:root{color-scheme:dark;--bg: #040404;--panel: #0d0d0d;--raised: #111;--hover: #171717;--text: #f5f5f5;--muted: #a1a1a1;--dim: #686868;--border: #202020;--border-light: #303030;--success: #4ade80;--danger: #f87171;--radius: 10px;--radius-sm: 7px;--shadow: 0 16px 40px rgb(0 0 0 / 35%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden;background:var(--bg);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit}.visually-hidden{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}.shell{height:100vh;display:grid;grid-template-columns:clamp(340px,38vw,500px) minmax(0,1fr)}.shell.editor-controls{grid-template-columns:152px minmax(0,1fr)}.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:-.01em}.brand-mark{position:relative;display:block;width:25px;height:25px;border-radius:6px;color:var(--text)}.brand-mark i{position:absolute;display:block;background:currentColor;transform:rotate(45deg)}.brand-mark i:first-child{width:8px;height:8px;top:4px;left:5px;border-radius:2px}.brand-mark i:last-child{width:4px;height:4px;top:14px;left:15px;border-radius:1px;opacity:.72}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 14px}.icon-action{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius-sm);color:var(--muted);background:transparent;font-size:21px;font-weight:300;line-height:1;cursor:pointer}.icon-action:hover{color:var(--text);background:var(--hover)}.quiet-action,.export-action{min-height:30px;border:0;border-radius:6px;padding:6px 9px;color:var(--muted);background:transparent;font-size:11px;font-weight:500;cursor:pointer}.quiet-action:hover{color:var(--text);background:var(--hover)}.quiet-action:disabled{opacity:.35;cursor:default}.quiet-action.active{color:var(--text);background:var(--hover)}.export-action{margin-left:3px;padding-inline:13px;color:#080808;background:var(--text)}.export-action:hover{background:#d9d9d9}.editor-pane{min-width:0;min-height:0;display:grid;grid-template-rows:60px 66px 40px minmax(0,1fr) 58px;position:relative;z-index:3;border-right:1px solid var(--border);background:var(--panel)}.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px;padding:8px 10px;border-radius:var(--radius-sm)}.file-row:hover{background:var(--hover)}.file-row h1{margin:4px 0 0;color:var(--text);font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.section-label{display:block;color:var(--dim);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.file-actions{display:flex;align-items:center;gap:1px;opacity:.72}.file-row:hover .file-actions{opacity:1}.text-link{display:inline-flex;align-items:center;color:var(--muted);text-decoration:none}.editor-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 13px 11px 18px;border-top:1px solid var(--border)}.editor-footer>span{color:var(--dim);font-size:9.5px}.preview-pane{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--bg)}.preview-head{position:absolute;z-index:30;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:6px;border:1px solid var(--border);border-radius:12px;background:#0d0d0de0;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.editor-mode-switch{display:flex;align-items:center;gap:2px;padding:4px 10px 5px}.editor-mode-switch button{flex:1;height:30px;border:0;border-radius:6px;color:var(--dim);background:transparent;font-size:10px;cursor:pointer}.editor-mode-switch button:hover{color:var(--muted);background:var(--hover)}.editor-mode-switch button.active{color:var(--text);background:var(--hover)}.code-editor{min-height:0;overflow:hidden;border-top:1px solid var(--border);font-size:12px;line-height:1.8}.cm-tooltip{border:0!important;background:transparent!important}.command-tooltip{width:220px;padding:10px 11px;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text);background:var(--raised);box-shadow:0 16px 40px #00000059}.command-tooltip code{display:block;margin-bottom:5px;color:var(--text);font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace}.command-tooltip span{display:block;color:var(--muted);font:10px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.graphical-editor{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 54px;overflow:hidden;border-top:1px solid var(--border)}.command-list{min-height:0;overflow:auto;padding:8px;scrollbar-width:thin;scrollbar-color:var(--border-light) transparent}.command-card{margin-bottom:3px;border:1px solid transparent;border-radius:8px;background:transparent}.command-card:hover{background:#1717178c}.command-card.selected{border-color:var(--border-light);background:var(--raised)}.command-row{display:flex;align-items:center;min-width:0}.command-main{min-width:0;flex:1;display:grid;grid-template-columns:22px minmax(72px,auto) minmax(0,1fr);align-items:center;gap:7px;min-height:39px;padding:7px 8px;border:0;color:var(--text);background:transparent;text-align:left;cursor:pointer}.command-index{color:var(--dim);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right}.command-kind{font-size:11px;font-weight:550;white-space:nowrap}.command-kind.note{color:var(--muted);font-weight:500}.command-summary{min-width:0;overflow:hidden;color:var(--dim);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap}.command-actions{display:flex;align-items:center;gap:1px;padding-right:5px}.command-actions button{display:grid;place-items:center;width:25px;height:25px;padding:0;border:0;border-radius:5px;color:var(--dim);background:transparent;font-size:12px;cursor:pointer}.command-actions button:hover{color:var(--text);background:var(--hover)}.command-actions button:disabled{opacity:.25;cursor:default}.command-actions .remove-command:hover{color:var(--danger)}.command-inspector{padding:5px 10px 12px 37px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.field-grid label,.command-inspector>label{min-width:0;display:grid;gap:5px;color:var(--dim);font-size:9px}.field-grid .wide-field,.command-inspector>.wide-field{grid-column:1 / -1}.field-input{min-width:0;display:flex;align-items:center;gap:5px}.field-grid input,.command-inspector>label input{min-width:0;width:100%;height:31px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;color:var(--text);background:var(--bg);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;outline:none}.field-grid input:focus,.command-inspector>label input:focus{border-color:#4a4a4a}.field-input .colour-picker{flex:0 0 31px;width:31px;padding:3px;cursor:pointer}.no-fields{margin:1px 0 0;color:var(--dim);font-size:10px}.add-command{display:flex;align-items:center;gap:7px;padding:9px 10px;border-top:1px solid var(--border);background:var(--panel)}.add-command select{min-width:0;flex:1;height:34px;padding:0 9px;border:1px solid var(--border);border-radius:7px;color:var(--muted);background:var(--raised);font-size:10px;outline:none;cursor:pointer}.add-command button{height:34px;padding:0 13px;border:0;border-radius:7px;color:#080808;background:var(--text);font-size:10px;font-weight:600;cursor:pointer}.add-command button:hover{background:#d9d9d9}.graphical-tool-panel{min-height:0;overflow:auto;border-top:1px solid var(--border);padding:10px}.tool-help{margin:12px 4px 0;color:var(--dim);font-size:9px;line-height:1.55}.editor-controls .file-row{padding-inline:6px}.editor-controls .file-actions{display:none}.editor-controls .editor-footer{padding-inline:10px}.editor-controls .editor-footer>span{display:none}.editor-controls .export-action{width:100%;margin:0}.view-switch{display:flex;align-items:center;gap:2px}.view-switch button{border:0;border-radius:var(--radius-sm);padding:7px 10px;color:var(--muted);background:transparent;font-size:11px;cursor:pointer}.view-switch button:hover,.view-switch button.active{color:var(--text);background:var(--hover)}.view-switch button span{margin-left:3px;color:var(--dim);font-size:9px}.preview-tools{display:flex;align-items:center;gap:5px}.zoom-readout{min-width:38px;color:var(--dim);text-align:center;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.layer-controls{display:flex;align-items:center;gap:10px}.split-control{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:9px}.split-control input{width:min(90px,10vw);accent-color:var(--text);cursor:pointer}.draw-toolbar{position:absolute;z-index:32;top:72px;left:14px;width:130px;padding:6px;border:1px solid var(--border);border-radius:12px;background:#0d0d0de5;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.draw-toolbar.sidebar-tools{position:static;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.draw-tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.draw-tool-grid button{position:relative;display:grid;place-items:center;height:38px;padding:0;border:0;border-radius:7px;color:var(--muted);background:transparent;cursor:pointer}.draw-tool-grid button:hover{color:var(--text);background:var(--hover)}.draw-tool-grid button.active{color:var(--text);background:#242424;box-shadow:inset 0 0 0 1px var(--border-light)}.icn-tool-icon{display:block;width:22px;height:22px;pointer-events:none}.icn-tool-icon>svg{display:block;width:100%;height:100%;overflow:visible}.tool-shortcut{position:absolute;right:3px;bottom:2px;color:var(--dim);font:7px ui-monospace,SFMono-Regular,Menlo,monospace}.draw-tool-grid button.active .tool-shortcut{color:var(--muted)}.draw-style{display:flex;align-items:center;gap:7px;margin-top:6px;padding:7px 4px 1px;border-top:1px solid var(--border)}.draw-colour{position:relative;flex:0 0 28px;width:28px;height:28px;overflow:hidden;border:1px solid var(--border-light);border-radius:7px;cursor:pointer}.draw-colour input{position:absolute;inset:-6px;width:40px;height:40px;border:0;padding:0;cursor:pointer}.draw-width{min-width:0;flex:1;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:3px}.draw-width span{color:var(--dim);font:8px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}.draw-width input{min-width:0;width:100%;accent-color:var(--text);cursor:ew-resize}.draw-style.selection-style{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-inline:0}.selection-count{grid-column:1 / -1;padding:1px 3px 4px;color:var(--dim);font-size:8px}.selection-tool-action{min-width:0;height:29px;padding:0 4px;border:1px solid var(--border);border-radius:6px;color:var(--muted);background:var(--raised);font-size:8px;cursor:pointer}.selection-tool-action span{margin-right:2px;font-size:11px}.selection-tool-action:hover{color:var(--text);border-color:var(--border-light)}.selection-tool-action.danger:hover{color:var(--danger)}.selection-tool-action:disabled{opacity:.35;cursor:default}.selected-style-control{min-width:0;display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:5px;min-height:30px;color:var(--dim);font-size:8px}.selected-style-control input[type=color]{width:25px;height:25px;padding:2px;border:1px solid var(--border);border-radius:5px;background:var(--raised)}.selected-style-control input[type=range]{min-width:0;width:100%;accent-color:var(--text)}.selected-style-control.mixed span{color:#d75b55}.grid-settings{display:grid;grid-template-columns:1fr 46px;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}.grid-settings label{display:flex;align-items:center;gap:4px;color:var(--dim);font-size:8px}.grid-settings label:last-child{grid-column:1 / -1}.grid-settings input[type=checkbox]{accent-color:#d75b55}.grid-settings input[type=number]{min-width:0;width:100%;height:25px;padding:3px 5px;border:1px solid var(--border);border-radius:5px;color:var(--text);background:var(--raised);font:8px ui-monospace,SFMono-Regular,Menlo,monospace}.clean-action{width:100%;height:28px;margin-top:8px;border:1px solid var(--border);border-radius:6px;color:var(--muted);background:transparent;font-size:8px;cursor:pointer}.clean-action:hover{color:var(--text);border-color:var(--border-light);background:var(--hover)}.canvas-area,.layers-area{position:absolute;inset:0;min-height:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-area{cursor:grab}.canvas-area:not(.tool-select){cursor:crosshair}.canvas-area.is-dragging{cursor:grabbing}.canvas-area{background-color:var(--bg);background-image:linear-gradient(rgb(32 32 32 / 72%) 1px,transparent 1px),linear-gradient(90deg,rgb(32 32 32 / 72%) 1px,transparent 1px);background-size:var(--grid-step, 32px) var(--grid-step, 32px)}.canvas-area.no-grid{background-image:none}.canvas-area:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at center,transparent 18%,rgb(4 4 4 / 12%) 55%,rgb(4 4 4 / 68%) 100%)}.stage{position:absolute;z-index:2;top:50%;left:50%;width:min(54vh,480px);aspect-ratio:1;transform-origin:center}.reference-image,.icon-preview{position:absolute;inset:0;width:100%;height:100%}.reference-image{object-fit:contain;pointer-events:none;filter:saturate(.75)}.icon-preview{z-index:2}.icon-preview svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}.command-highlight{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}.command-highlight svg{width:100%;height:100%;overflow:visible;color:#d75b55;filter:sepia(1) saturate(5) hue-rotate(320deg) drop-shadow(0 0 3px #d75b55) drop-shadow(0 0 7px rgb(215 91 85 / 45%))}.draft-preview{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none;opacity:.72;filter:drop-shadow(0 0 5px rgb(245 245 245 / 34%))}.draft-preview svg{width:100%;height:100%;overflow:visible}.selection-hits{position:absolute;inset:0;z-index:6;pointer-events:none}.selection-hit{position:absolute;inset:0;pointer-events:none}.selection-hit svg{width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none}.selection-hit svg *{pointer-events:visiblePainted;cursor:pointer}.selection-hit.selected svg *{cursor:move}.selection-box{position:absolute;z-index:7;min-width:1px;min-height:1px;border:1px solid rgb(245 245 245 / 72%);pointer-events:auto;cursor:move;touch-action:none}.selection-box:after{content:"";position:absolute;inset:-3px;border:1px solid rgb(4 4 4 / 70%);pointer-events:none}.selection-handle{position:absolute;z-index:1;width:9px;height:9px;padding:0;border:1px solid var(--text);border-radius:2px;background:var(--bg);box-shadow:0 0 0 1px #000000bf;pointer-events:auto}.selection-handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.selection-handle.ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.selection-handle.sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.selection-handle.se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}.marquee-box{position:absolute;z-index:9;border:1px solid #d75b55;background:#d75b551a;pointer-events:none}.snap-guide{position:absolute;z-index:9;pointer-events:none;opacity:.75;border-color:#d75b55;border-style:dashed}.snap-guide.vertical{top:-200%;bottom:-200%;border-left-width:1px}.snap-guide.horizontal{left:-200%;right:-200%;border-top-width:1px}.point-layer{position:absolute;inset:0;z-index:8;pointer-events:none}.visual-point{position:absolute;transform:translate(-50%,-50%);padding:0;border-style:solid;border-color:var(--text);border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px #0000008c;pointer-events:auto;cursor:move;touch-action:none}.visual-point.size,.visual-point.radius,.visual-point.ellipse-size{border-radius:2px}.visual-point.offset{border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}.visual-point:hover,.visual-point.active{border-color:#d75b55;background:#d75b55}.axis{position:absolute;z-index:0;pointer-events:none;background:var(--border)}.axis-x{top:50%;width:100%;height:1px}.axis-y{left:50%;width:1px;height:100%}.canvas-hint{position:absolute;z-index:20;right:14px;bottom:12px;margin:0;color:var(--dim);font-size:9px;pointer-events:none}.draw-hint{position:absolute;z-index:20;left:14px;bottom:12px;margin:0;color:var(--dim);font-size:9px;pointer-events:none}.drop-hint{position:absolute;z-index:4;left:50%;bottom:19px;transform:translate(-50%);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;color:var(--muted);background:#0d0d0dcc;font-size:10px;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.drop-hint:hover{color:var(--text);border-color:var(--border-light);background:var(--raised)}.render-error{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,82%);padding:13px 14px;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--danger);background:var(--raised)}.render-error b,.render-error span{display:block;font-size:10px}.render-error span{margin-top:4px;font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.layers-area{perspective:1050px;background:var(--bg);cursor:grab}.layers-area.is-dragging{cursor:grabbing}.layer-camera{position:absolute;left:50%;top:50%;width:min(47vh,400px);aspect-ratio:1;transform-style:preserve-3d}.layer-track{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.layer-plane{position:absolute;left:50%;top:50%;width:100%;height:100%;border:1px solid rgb(245 245 245 / 7%);background:transparent;transform-style:preserve-3d;pointer-events:auto;cursor:inherit;transition:border-color .12s,background .12s}.layer-plane.active{border-color:#f5f5f53d;background:transparent}.layer-plane.editing{border-color:#f5f5f557}.layer-plane.hovered{border-color:#f5f5f594}.layer-plane.hovered>div{filter:drop-shadow(0 0 4px rgb(245 245 245 / 72%))}.layer-plane>div,.layer-plane svg{width:100%;height:100%;overflow:visible}.layer-label{position:absolute;left:5px;top:5px;padding:3px 5px;border-radius:3px;border:1px solid var(--border);color:var(--muted);background:#111111eb;font:8px ui-monospace,SFMono-Regular,Menlo,monospace}.reference-layer{border-style:dashed;border-color:#f5f5f51a;background:transparent}.reference-layer img{width:100%;height:100%;object-fit:contain;filter:saturate(.7)}.depth-rail{position:absolute;right:20px;top:50%;height:min(48%,310px);width:42px;transform:translateY(-50%);display:flex;justify-content:center}.depth-rail:before{content:"";position:absolute;top:7px;bottom:20px;left:50%;width:1px;background:var(--border-light)}.depth-rail input{position:relative;z-index:1;width:18px;height:calc(100% - 16px);margin:0;writing-mode:vertical-lr;direction:rtl;accent-color:var(--text);cursor:ns-resize}.depth-rail span{position:absolute;left:50%;bottom:0;transform:translate(-50%);white-space:nowrap;color:var(--dim);font:8px ui-monospace,SFMono-Regular,Menlo,monospace}.empty-layers{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--dim);font-size:11px}.shortcut-overlay{position:absolute;z-index:50;left:50%;bottom:26px;transform:translate(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;width:min(620px,calc(100% - 40px));padding:10px 12px;border:1px solid var(--border-light);border-radius:10px;color:var(--muted);background:#0d0d0df0;box-shadow:var(--shadow);font-size:9px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.shortcut-overlay span{white-space:nowrap}.shortcut-overlay kbd{margin-right:3px;padding:2px 4px;border:1px solid var(--border-light);border-radius:4px;color:var(--text);background:var(--raised);font:8px ui-monospace,SFMono-Regular,Menlo,monospace}.notice{position:absolute;z-index:52;left:50%;bottom:24px;transform:translate(-50%);padding:8px 11px;border:1px solid var(--border-light);border-radius:8px;color:var(--text);background:#111111f5;box-shadow:var(--shadow);font-size:9px}.reference-bar{position:absolute;z-index:30;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;min-height:40px;padding:5px 6px 5px 12px;border:1px solid var(--border);border-radius:11px;background:#0d0d0de0;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.reference-bar:not(.has-reference){display:none}.reference-title{color:var(--muted);font-size:9px;font-weight:500}.opacity-control{flex:1;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px}.opacity-control input{width:min(120px,100%);accent-color:var(--text);cursor:pointer}.reference-actions{margin-left:auto;display:flex;align-items:center}.text-button{border:0;padding:7px;color:var(--dim);background:transparent;font-size:9px;cursor:pointer}.text-button:hover{color:var(--danger)}@media(max-width:820px){.shell{grid-template-columns:330px minmax(0,1fr)}.split-control span,.svg-button{display:none}}@media(max-width:680px){body{overflow:auto}.shell{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:440px 620px}.editor-pane{grid-template-rows:58px 62px 40px minmax(0,1fr) 56px;border-right:0;border-bottom:1px solid var(--border)}.sidebar-head{padding-inline:12px}.preview-head{top:10px;left:10px;right:10px}.draw-toolbar{top:66px;left:10px}.preview-tools>.quiet-action:first-child{display:none}.layer-controls{gap:5px}.split-control input{width:58px}.reference-bar{right:10px;bottom:10px;gap:8px}.opacity-control span{display:none}.layer-camera{left:50%;width:min(70vw,350px)}}