:root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0f1726;--surface: #1d2939;--surface-raised: #26364d;--surface-deep: #0b1322;--border: #35445a;--border-strong: #46566d;--text: #f8fafc;--muted: #aab7c8;--faint: #66758a;--accent: #d9ff3f;--blue: #6f9ddb;--green: #bfe832;--magenta: #ff4fd8;--violet: #a56cff;--orange: #ff9d3d;--red: #ff5252;--yellow: #d9ff3f}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg)}body{color:var(--text)}button,input,select{font:inherit;letter-spacing:0}button{color:var(--muted);background:transparent;border:1px solid transparent;border-radius:3px;cursor:pointer}button:hover:not(:disabled){color:var(--text);background:#2a3a52;border-color:var(--border-strong)}button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:1px}button:disabled{opacity:.35;cursor:default}.app-shell{--topbar-height: 56px;display:grid;grid-template-rows:var(--topbar-height) minmax(0,1fr);width:100%;height:100%;background:var(--bg)}.top-bar{z-index:10;display:grid;grid-template-columns:160px auto minmax(160px,1fr) auto;align-items:center;height:var(--topbar-height);padding:0 8px;background:#1d2939;border-bottom:1px solid var(--border-strong)}.brand-block{display:flex;align-items:center;gap:9px;min-width:0}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:transparent;border-radius:2px;overflow:hidden}.brand-mark img{display:block;width:34px;height:37px;object-fit:contain}.brand-block strong,.brand-block small{display:block;line-height:1.05;letter-spacing:0}.brand-block strong{font-size:14px}.brand-block small{margin-top:3px;color:var(--accent);font-size:11px}.top-actions{display:flex;align-items:center;gap:2px}.top-actions.align-right{justify-content:flex-end}.top-actions button,.canvas-toolbar button,.icon-actions button,.panel-heading button,.tree-item button,.slice-item button{display:inline-grid;place-items:center;width:30px;height:30px;padding:0}.top-actions button.export-action,.top-actions button.file-action{display:inline-flex;width:auto;min-width:34px;height:34px;gap:6px;padding:0 8px;color:var(--action-text);background:var(--action-bg);border-color:var(--action-border);font-size:12px;white-space:nowrap}.top-actions .open-action{--action-bg: #164e63;--action-border: #39b5cf;--action-text: #e2faff}.top-actions .save-action{--action-bg: #d9ff3f;--action-border: #e8ff82;--action-text: #111827}.top-actions .png-action{--action-bg: #225a3e;--action-border: #4aaf79;--action-text: #e7ffef}.top-actions .zip-action{--action-bg: #645020;--action-border: #c7a044;--action-text: #fff6d9}.top-actions .video-action{--action-bg: #674173;--action-border: #b785c9;--action-text: #fbe8ff}.top-actions .pdf-action{--action-bg: #733642;--action-border: #c86c7e;--action-text: #ffe9ed}.top-actions button.export-action:hover:not(:disabled),.top-actions button.file-action:hover:not(:disabled){background:var(--action-bg);color:var(--action-text);border-color:var(--action-text);filter:brightness(1.15)}.top-actions button.export-action:disabled{opacity:.5}.toolbar-divider{width:1px;height:20px;margin:0 4px;background:var(--border)}.project-identity{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:0 18px}.project-identity input{width:min(360px,100%);height:28px;padding:0 8px;color:var(--text);background:transparent;border:1px solid transparent;border-radius:2px;text-align:center}.project-identity input:hover,.project-identity input:focus{background:var(--surface);border-color:var(--border)}.save-state{flex:0 0 auto;color:var(--muted);font-size:11px}.save-state.saved{color:var(--green)}.save-state.error{color:var(--red)}.save-state.saving{color:var(--yellow)}.workspace{--left-width: 286px;--right-width: 302px;display:grid;grid-template-columns:var(--left-width) minmax(0,1fr) var(--right-width);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0}.workspace.left-collapsed{--left-width: 0px}.workspace.right-collapsed{--right-width: 0px}.side-panel{min-width:0;min-height:0;background:var(--surface)}.left-panel{grid-column:1;grid-row:1;border-right:1px solid var(--border-strong)}.right-panel{grid-column:3;grid-row:1;border-left:1px solid var(--border-strong)}.canvas-area{grid-column:2;grid-row:1;min-width:0;min-height:0;background:var(--surface-deep)}.panel-heading{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 8px 0 12px;border-bottom:1px solid var(--border);background:#202d40}.panel-heading strong{font-size:13px;font-weight:650}.panel-scroll{height:calc(100% - 72px);overflow:auto}.right-panel .panel-scroll{height:calc(100% - 100px)}.animation-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.animation-modes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:58px;font-size:12px;border-color:var(--border-strong);background:var(--surface-deep)}.animation-modes button.active{color:#fbe8ff;background:#674173;border-color:#b785c9}.range-label{margin-top:12px}.range-label>span{display:flex;align-items:center;justify-content:space-between;gap:8px}.range-label output{color:var(--text);font-variant-numeric:tabular-nums}.radar-color-control{display:flex;flex-direction:column;gap:8px}.radar-colors{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;padding:4px}.radar-colors button.swatch{width:36px;height:32px}input[type=range]{padding:0;border:0;accent-color:#c18dd2;background:transparent}.preview-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.preview-heading .section-title{margin:0}.preview-heading button{display:grid;place-items:center;width:28px;height:28px;border-color:var(--border)}.video-preview{display:grid;place-items:center;width:100%;max-height:300px;background:#000;border:1px solid var(--border-strong);border-radius:3px;overflow:hidden}.video-preview canvas{display:block;width:100%;height:100%;object-fit:contain}.video-preview canvas[hidden]{display:none}.video-preview span{color:var(--muted);font-size:12px}.video-export-button{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;min-height:36px;margin-top:12px;color:#fbe8ff;border-color:#b785c9;background:#674173;font-size:12px}.video-export-button:hover:not(:disabled){background:#7e538b;border-color:#d6afe6}progress{width:100%;height:8px;accent-color:#c18dd2}.segmented-control{display:grid;grid-template-columns:1fr 1fr;height:34px;padding:4px;border-bottom:1px solid var(--border)}.right-panel>.segmented-control{grid-template-columns:repeat(2,minmax(0,1fr));height:62px;gap:4px;flex-shrink:0}.right-panel>.segmented-control button{gap:4px;padding:0 2px;font-size:11px}.right-panel>.segmented-control svg{flex-shrink:0}.segmented-control button,.binary-actions button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:0 8px;font-size:12px}.segmented-control button.active,.binary-actions button.active{color:var(--accent);background:#2a3a52;border-color:var(--accent)}.binary-actions button.warning.active{color:var(--orange);background:#332a23;border-color:#64452d}.panel-section{padding:11px 12px 13px;border-bottom:1px solid var(--border)}.section-title{margin-bottom:10px;color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase}.compact-form{display:flex;flex-direction:column;gap:8px}.compact-form label{display:flex;flex-direction:column;gap:4px;min-width:0;color:var(--muted);font-size:11px}.compact-form .checkbox-option{flex-direction:row;align-items:center;gap:8px;min-height:32px;cursor:pointer;color:var(--text)}.checkbox-option input[type=checkbox]{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}input,select{width:100%;height:29px;min-width:0;padding:0 7px;color:var(--text);background:#111b2b;border:1px solid var(--border-strong);border-radius:2px;font-size:12px}select{cursor:pointer}.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}.swatch-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;justify-items:center;gap:6px;min-height:24px}.right-panel .swatch-row{grid-template-columns:repeat(6,minmax(0,1fr))}button.swatch{width:20px;height:20px;padding:0;border:1px solid #777777;border-radius:2px}button.swatch.selected{outline:2px solid var(--text);outline-offset:1px}.color-input{width:24px;height:24px;padding:1px}.primary-action,.inline-action{display:inline-flex;align-items:center;justify-content:center;gap:6px}.primary-action{min-height:31px;padding:0 10px;color:#111827;background:var(--accent);border-color:#e8ff82;font-size:12px;font-weight:750}.primary-action:hover:not(:disabled){color:#111827;background:#e6ff73}.inline-action{height:26px;padding:0 8px;color:var(--accent);font-size:11px}.tree-list,.tree-group,.slice-list{display:flex;flex-direction:column}.tree-list{gap:2px}.slice-list{padding:2px 0 4px 20px}.tree-item,.slice-item{display:flex;align-items:center;min-width:0;min-height:29px;padding:2px 3px 2px 6px;border:1px solid transparent;border-radius:2px;cursor:pointer}.tree-item:hover,.slice-item:hover{background:#26364d}.tree-item.selected,.slice-item.selected{background:#2b3b54;border-color:#9ebc32}.tree-color{flex:0 0 auto;width:9px;height:9px;margin-right:7px;border:1px solid #b5b5b5}.tree-name,.slice-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.tree-name{flex:1}.slice-item{gap:5px;color:var(--muted)}.slice-item>span{flex:1}.tree-item button,.slice-item button{flex:0 0 auto;width:24px;height:24px}.tree-item button.delete-screen{color:#eb8e91}.tree-item button.delete-screen:hover:not(:disabled){color:#ffe5e6;background:#60353d}.library-list{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}.library-item{display:flex;flex-direction:column;align-items:flex-start;min-height:42px;padding:6px 8px;border-color:var(--border)}.library-item.selected{color:var(--text);background:#2b3b54;border-color:#9ebc32}.library-item span,.library-item small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-item span{font-size:12px}.library-item small{margin-top:3px;color:var(--muted);font-size:10px}.icon-actions{display:flex;gap:3px;margin-bottom:10px}.library-panel>.compact-form{padding-top:9px;border-top:1px solid var(--border)}.binary-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.canvas-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.canvas-option-grid button{min-width:0;min-height:34px;padding:6px 4px;display:inline-flex;align-items:center;justify-content:center;gap:5px;color:var(--text-muted);border:1px solid var(--border);background:var(--surface-deep)}.canvas-option-grid button.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-deep))}.binary-actions button{height:29px;border-color:var(--border)}.metrics-list{display:flex;flex-direction:column;gap:7px;margin:0}.metrics-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:6px;border-bottom:1px solid #304057}.metrics-list dt{color:var(--muted);font-size:11px}.metrics-list dd{margin:0;color:var(--text);font-family:Consolas,monospace;font-size:11px;text-align:right}.selection-summary{color:var(--accent);font-size:12px}.empty-state{margin:10px 0 0;color:var(--faint);font-size:11px;line-height:1.5}.empty-state.centered{display:grid;place-items:center;width:100%;height:100%;margin:0}.canvas-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#0a111e}.canvas-shell canvas{display:block}.canvas-shell .konvajs-content{touch-action:none}.touch-selection{display:none}.canvas-toolbar{position:absolute;z-index:3;top:8px;left:8px;display:flex;align-items:center;height:36px;padding:2px 4px;background:#202d40;border:1px solid var(--border-strong);border-radius:3px}.canvas-toolbar button.active{color:var(--accent);background:#2a3a52;border-color:#9ebc32}.canvas-toolbar button.zoom-readout{width:52px;color:var(--text);font-family:Consolas,monospace;font-size:11px}.canvas-status{position:absolute;z-index:3;right:0;bottom:0;left:0;display:flex;align-items:center;gap:16px;height:25px;padding:0 9px;color:var(--muted);background:#1d2939;border-top:1px solid var(--border);font-family:Consolas,monospace;font-size:10px;pointer-events:none}.canvas-status span{display:inline-flex;align-items:center;gap:5px}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:#111b2b}::-webkit-scrollbar-thumb{background:#52627a;border:2px solid #111b2b}::-webkit-scrollbar-thumb:hover{background:#6b7c95}@media(max-width:1700px){.app-shell{--topbar-height: 100px}.top-bar{grid-template-columns:160px auto minmax(120px,1fr);grid-template-rows:52px 48px}.top-actions.align-right{grid-column:1 / -1;gap:6px;border-top:1px solid var(--border);height:48px}}@media(max-width:1180px){.workspace{--left-width: 248px;--right-width: 266px}.save-state{display:none}}@media(max-width:900px){.app-shell{--topbar-height: 138px;grid-template-rows:var(--topbar-height) minmax(0,1fr) auto;height:100dvh}.workspace{--left-width: 0px;--right-width: 0px}.workspace{position:relative;grid-template-columns:minmax(0,1fr)}.workspace.mobile-tools-open{grid-template-rows:minmax(170px,42%) minmax(0,1fr)}.canvas-area{grid-column:1;grid-row:1}.top-bar{grid-template-columns:145px minmax(0,1fr);grid-template-rows:44px 46px 48px}.brand-block{grid-column:1;grid-row:1;gap:5px}.brand-mark{width:32px;height:32px}.brand-mark img{width:28px;height:30px}.brand-block strong{font-size:12px}.brand-block small{font-size:10px}.project-identity{display:flex;grid-column:2;grid-row:1;padding:0}.project-identity input{text-align:right;font-size:12px}.top-actions:not(.align-right){grid-column:1 / -1;grid-row:2;justify-content:flex-start;gap:1px;overflow-x:auto;scrollbar-width:none}.top-actions:not(.align-right) button{flex:0 0 40px;width:40px;height:44px}.top-actions .toolbar-divider{flex:0 0 1px;margin:0 2px}.top-actions button.file-action{width:40px;padding:0;justify-content:center}.file-action span{display:none}.top-actions.align-right{grid-column:1 / -1;grid-row:3;justify-content:stretch;gap:4px;height:48px}.top-actions.align-right button:not(.export-action),.top-actions.align-right .toolbar-divider{display:none}.top-actions button.export-action{flex:1 1 0;min-width:0;width:auto;height:44px;flex-direction:column;gap:3px;padding:0 2px;font-size:10px}.export-action span{max-width:100%;white-space:normal;line-height:1.1;text-align:center}.mobile-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:58px;padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--border-strong);z-index:8}.mobile-navigation button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:56px;padding:4px 2px;font-size:11px;border-radius:0}.mobile-navigation button.active{color:var(--accent);background:#26364d;border-top-color:var(--accent)}.mobile-panel{grid-column:1;grid-row:2;min-height:0;border-top:1px solid var(--border-strong);overflow:hidden}.mobile-panel .side-panel{display:block;position:static;width:100%;height:100%;border:0}.mobile-panel .panel-heading{height:44px}.mobile-panel .panel-heading button{width:44px;height:44px}.mobile-panel .segmented-control{height:44px}.mobile-panel .right-panel>.segmented-control{height:52px;grid-template-columns:repeat(4,minmax(0,1fr))}.mobile-panel .right-panel>.segmented-control button{flex-direction:column;gap:2px;min-height:44px}.mobile-panel .panel-scroll{height:calc(100% - 88px);overscroll-behavior:contain}.mobile-panel .right-panel>.panel-scroll{height:calc(100% - 96px)}.mobile-panel .project-sections{display:flex;flex-direction:column}.mobile-panel .project-sections>section{flex:0 0 auto}.mobile-panel .quick-create{order:-1}.mobile-panel .quick-create .compact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-panel .quick-create .field-row,.mobile-panel .quick-create .swatch-row,.mobile-panel .quick-create .primary-action{grid-column:1 / -1}.mobile-project-name{min-width:0;flex:1;margin-right:8px}.mobile-panel input:not([type=checkbox]):not([type=color]),.mobile-panel select{min-height:44px;font-size:16px}.mobile-panel .compact-form label,.mobile-panel .section-title,.mobile-panel .metrics-list dt,.mobile-panel .metrics-list dd{font-size:12px}.mobile-panel .tree-item,.mobile-panel .slice-item{min-height:44px}.mobile-panel .tree-item button,.mobile-panel .slice-item button{width:36px;height:40px}.mobile-panel .primary-action,.mobile-panel .binary-actions button,.mobile-panel .inline-action,.mobile-panel .video-export-button{min-height:44px}.mobile-panel .swatch-row,.mobile-panel .right-panel .swatch-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.mobile-panel .swatch,.mobile-panel .color-input{width:30px;height:30px}.mobile-panel .animation-modes button{min-height:62px}.mobile-panel .preview-heading button,.mobile-panel .icon-actions button{width:44px;height:44px}.touch-selection{display:block;flex:0 0 20px;width:20px;height:20px;margin:0 8px 0 0;accent-color:var(--accent)}.canvas-toolbar{height:44px;padding:2px}.canvas-toolbar button{width:36px;height:38px}.canvas-toolbar button.zoom-readout{width:42px}.canvas-status{gap:8px;font-size:9px}.canvas-status span:nth-child(3){display:none}}@media(max-width:900px)and (max-height:500px){.app-shell{--topbar-height: 94px}.top-bar{grid-template-rows:46px 48px}.brand-block,.project-identity{display:none}.top-actions:not(.align-right){grid-row:1}.top-actions.align-right{grid-row:2}.workspace.mobile-tools-open{grid-template-columns:minmax(0,1fr) minmax(300px,42%);grid-template-rows:minmax(0,1fr)}.mobile-panel{grid-column:2;grid-row:1;border-top:0;border-left:1px solid var(--border-strong)}.mobile-navigation,.mobile-navigation button{min-height:48px}}