:root{--left-width:240px;--right-width:260px;--accent:#c6f36b;--border:#333;--text:#e6e6e6;color-scheme:dark}body{font-family:Inter,Arial,sans-serif;font-size:12px;background:#1e1e1e;color:var(--text)}button,input,select,textarea{font-size:12px;border-radius:6px;border-color:#333;min-height:32px;background:#2b2b2b;color:#e6e6e6}button{height:32px;padding:0 8px;font-weight:400}button:hover:not(:disabled){background:#353535;border-color:#454545}button:disabled{opacity:.4}button svg{width:16px;height:16px;flex:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #c6f36b;outline-offset:2px}.primary{background:#c6f36b;color:#1e1e1e;border-color:#c6f36b;font-weight:600}.primary:hover{background:#d4ff84!important}.icon-button{width:32px;display:inline-grid;place-items:center;padding:0;border-color:transparent;background:transparent;flex:none}header{height:48px;padding:0 16px;gap:8px;background:#252525;border-bottom:1px solid #333;overflow:visible}header .brand{margin:0}.brand .logo{font-size:24px}header .project-title{display:flex;align-items:center;justify-content:center;gap:8px;margin:auto;min-width:0;flex:1}header #projectName{flex:0 1 240px;max-width:240px;text-align:center;width:240px;font-size:12px;padding:4px 8px;min-width:80px}#saved{font-size:0!important;flex:none;width:6px;height:6px;border-radius:50%;background:#86b96b;margin:0;overflow:visible}#saved[data-state=error]{background:#f27878}#saved[data-state=saving]{background:#e9bd65}header #undo,header #redo{width:32px;font-size:12px}header #export{display:flex;align-items:center;gap:8px;padding:0 12px}.top-zoom{width:50px;font-size:11px}aside{top:48px;background:#252525}.left{width:var(--left-width)}.right{width:var(--right-width)}#viewport{inset:48px var(--right-width) 0 var(--left-width);background-color:#1e1e1e;background-image:radial-gradient(#3a3a3a .8px,transparent .8px)}.left .tabs,.right .tabs{height:48px;padding:8px;gap:4px;border-bottom:1px solid #333;background:#252525}.left .tabs button{border:0;background:transparent;font-size:12px;flex:1}.left .tabs button.active{background:#343434}.right .tabs{padding:0 16px}.right .tabs span{display:none}.layer-search{display:flex;gap:8px;align-items:center;padding:8px 16px;border-bottom:1px solid #333}.layer-search svg{width:14px;color:#9a9a9a;flex:none}.layer-search input{border:0;background:none;min-width:0;padding:0;font-size:11px}#layers{padding:8px;max-height:calc(100% - 96px);height:calc(100% - 96px)}.layer{min-height:32px;height:32px;padding:0 8px;margin:0;border-radius:4px;gap:6px}.layer.selected{background:#c6f36b18;color:#e6e6e6;box-shadow:inset 2px 0 #c6f36b}.layer.is-hidden{opacity:.4}.layer.child{padding-left:32px;font-size:11px}.layer.child.nested{padding-left:48px}.layer i{width:16px;height:16px;flex:none}.layer i svg{width:14px;height:14px}.layer button{min-height:24px;height:24px;min-width:20px;width:20px;padding:2px;color:#9a9a9a}.layer button svg{width:13px;height:13px}.layer [data-lock],.layer [data-hide]{opacity:0}.layer:hover [data-lock],.layer:hover [data-hide],.layer:focus-within button{opacity:1}.layer [data-toggle]{opacity:1}.layer span{min-width:0}.group-row{margin-left:8px}.panel-resizer{position:absolute;right:-3px;top:48px;bottom:0;width:6px;cursor:ew-resize;z-index:5}.panel-resizer:hover{background:#c6f36b55}.left-collapsed{--left-width:0px}.left-collapsed .left{visibility:hidden}.tools{bottom:24px;border:1px solid #3d3d3d;border-radius:8px;padding:8px;gap:4px;background:#252525}.tools button{width:32px;height:32px;min-height:32px;border-radius:6px}.tools button svg{width:18px;height:18px}.tools .active{background:#c6f36b;color:#1e1e1e}.tools .shape-caret{width:16px;margin-left:-5px}.tools i{height:24px}.navigation{top:auto;bottom:24px;right:16px;background:#252525;border-radius:6px;border-color:#333;height:32px;padding:0;gap:0}.navigation button{height:30px;font-size:11px;padding:0 6px;min-height:30px}.navigation i{height:16px}.selectiontools[hidden]{display:none!important}.right #properties{padding:0 16px 16px}.right .property-title{font-size:12px;padding-top:16px}.right .section,.inspector-section{padding:16px 0;border-bottom:1px solid #333}.right h3,.right label{font-size:11px;letter-spacing:.05em;color:#9a9a9a}.right h3{text-transform:uppercase;margin-bottom:8px}.right input,.right select{height:32px;min-height:32px;font-size:12px}.right input[type=color]{height:24px;min-height:24px}.right .check-control input{height:14px;min-height:14px}.right .muted{font-size:11px;color:#9a9a9a}.right #duplicate,.right #remove,.right #back,.right #front{display:none}.right #properties>.row:has(#duplicate),.right #properties>.row:has(#back){display:none}dialog{background:#252525;border-color:#3d3d3d;border-radius:8px;padding:24px}dialog h2{font-size:20px}dialog p{color:#9a9a9a}dialog button{height:32px}.studio-menu{position:fixed;z-index:100;width:220px;max-height:calc(100vh - 16px);overflow:auto;padding:4px;background:#292929;border:1px solid #454545;border-radius:6px;box-shadow:0 8px 30px #0008}.studio-menu button{width:100%;border:0;background:none;display:flex;align-items:center;gap:8px;text-align:left;border-radius:4px;font-size:11px;height:32px;padding:0 8px}.studio-menu button span{flex:1}.studio-menu kbd{font:10px Inter,Arial;color:#9a9a9a}.studio-menu hr{border:0;border-top:1px solid #3d3d3d;margin:4px}.studio-tooltip{position:fixed;z-index:200;background:#383838;border:1px solid #555;color:#eee;border-radius:4px;padding:6px 8px;font-size:11px;pointer-events:none;white-space:nowrap}.studio-tooltip[hidden]{display:none}#resourcePanel{padding:16px;overflow:auto;max-height:calc(100% - 48px)}#resourcePanel>button{width:100%;margin-bottom:8px}.asset-card{height:64px;display:flex;gap:8px;align-items:center;text-align:left;width:100%;margin-top:8px}.empty-state{font-size:11px;color:#9a9a9a;line-height:1.6}.page-row{display:flex;gap:8px;align-items:center;font-size:11px}.page-row svg{width:16px}.page-row span{margin-left:auto;color:#9a9a9a}.page-frame{text-align:left}.formatbar{top:56px;background:#252525;border-color:#444;border-radius:6px}.formatbar>b{display:none}.formatbar input,.formatbar select{height:32px;min-height:32px}#toast{bottom:80px;background:#303030;color:#eee;border:1px solid #505050;border-radius:6px;font-size:12px;padding:10px 16px}#toast button{margin-left:12px;height:24px;min-height:24px;color:#c6f36b;border:0;background:none}.frame-label{color:#9a9a9a}.element:hover:not([contenteditable=true]){outline:1px solid #c6f36b80}button,input,select,.layer{transition:background 140ms,border-color 140ms,color 140ms}.project-card{background:#292929;border-color:#3d3d3d}#properties[hidden],#resourcePanel[hidden],#layers[hidden],.layer-search[hidden]{display:none!important}@media(max-width:1050px){.left{width:var(--left-width)}.right{width:260px}#viewport{left:var(--left-width);right:260px}.navigation{bottom:72px}}@media(max-width:750px){:root{--left-width:0px}.left{display:none}header .project-title{justify-content:flex-start}header #projectName{width:120px}.top-zoom{display:none}.tools{left:16px;transform:none}.right{width:220px}#viewport{right:220px}}
.shortcut-grid{display:grid;grid-template-columns:1fr auto;gap:8px 24px;font-size:11px}.shortcut-grid kbd{color:#9a9a9a;font:11px monospace}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.dialog-heading h2{margin:0}.dialog-heading button{display:grid;place-items:center;padding:0;width:32px}#shortcutDialog{width:480px}.no-grid{background-image:none!important}.layer input{height:26px;min-height:26px;width:100%;padding:2px 4px;font-size:11px}
.inspector-heading{padding:16px 0 8px;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-controls{display:grid;grid-template-columns:repeat(8,1fr);gap:0;padding-bottom:8px;border-bottom:1px solid #333}.align-controls .icon-button{width:28px}.studio-section{padding:16px 0;border-bottom:1px solid #333}.right .studio-section h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;height:24px;font-size:11px;font-weight:500;letter-spacing:.06em}.studio-section h3 .icon-button{height:24px;min-height:24px;width:24px}.studio-row{display:flex;gap:8px;align-items:center;margin-top:8px}.studio-row>*{flex:1;min-width:0}.studio-row>.icon-button{flex:0 0 20px;width:20px;padding:0}.number-field{display:flex;align-items:center;border:1px solid #333;border-radius:6px;background:#2b2b2b;height:32px;min-width:0;flex:1}.number-field>span{font-size:10px;padding-left:8px;color:#9a9a9a;cursor:ew-resize;user-select:none;white-space:nowrap}.right .number-field input{border:0;background:transparent;width:100%;min-width:0;height:30px;min-height:30px;padding:0 6px;font-size:11px}.number-field:focus-within{border-color:#c6f36b}.right .studio-section select{padding:0 6px;font-size:11px}.studio-section>input[list]{margin-top:0}.text-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}.text-controls button{width:100%}.text-controls .active,.studio-row .active{background:#c6f36b18;color:#c6f36b}.fill-row{display:flex;gap:4px;align-items:center;margin-top:8px;height:32px}.fill-row .colour-swatch{width:24px;height:24px;min-height:24px;flex:none;border:1px solid #555;border-radius:4px}.right .fill-row>input{width:67px;min-width:0;font:11px monospace;padding:0 4px}.fill-row>.number-field{width:57px;flex:1}.fill-row>.icon-button{width:20px;min-width:20px}.fill-row .number-field>span{padding-left:4px}.fill-row .number-field input{padding:0 2px}.export-selection-button{width:100%;margin-top:8px;display:flex;gap:8px;align-items:center;justify-content:center}.colour-popover{width:248px;padding:12px;overflow:visible}.picker-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:8px}.picker-title button{width:24px;height:24px;padding:0}.saturation{height:160px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);position:relative;border-radius:4px;cursor:crosshair}.saturation i{position:absolute;pointer-events:none;width:10px;height:10px;border:2px solid white;box-shadow:0 0 2px black;border-radius:50%;transform:translate(-50%,-50%)}.colour-popover .hue{height:16px;min-height:16px;margin:12px 0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);padding:0;appearance:none}.hue::-webkit-slider-thumb{appearance:none;width:8px;height:20px;border:2px solid white;border-radius:4px;background:transparent}.picker-input{display:flex;gap:8px;margin-bottom:12px}.picker-input input{width:100%;font:12px monospace}.picker-input button{width:32px;padding:6px}.colour-popover label{font-size:10px;letter-spacing:.05em;margin-bottom:8px;color:#9a9a9a}.document-colours{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.document-colours button{width:18px;height:18px;min-height:18px;padding:0;border:1px solid #555}.colour-popover .apply-colour{justify-content:center;background:#c6f36b;color:#1e1e1e}
.size-badge{position:absolute;left:50%;transform-origin:top center;white-space:nowrap;font:10px Inter,Arial;color:#1e1e1e;background:#c6f36b;border-radius:3px;padding:3px 5px}.marquee{position:absolute;border:1px solid #c6f36b;background:#c6f36b16;pointer-events:none;z-index:5}.marquee[hidden]{display:none}#smartGuides{position:absolute;inset:0;pointer-events:none;z-index:6}.smart-line{position:absolute;background:#fb78b0}.smart-line.x{top:0;bottom:0;width:1px}.smart-line.y{left:0;right:0;height:1px}.smart-line span{position:absolute;left:8px;top:120px;background:#702345;color:#fff;padding:3px 5px;border-radius:3px;white-space:nowrap;font-size:10px}.smart-line.y span{top:8px;left:50%}.ruler{position:absolute;background:#252525ee;pointer-events:none;z-index:4;color:#aaa;font-size:9px;overflow:hidden}.ruler-x{left:20px;right:0;top:0;height:20px;border-bottom:1px solid #444}.ruler-y{top:20px;bottom:0;left:0;width:20px;border-right:1px solid #444}.ruler span{position:absolute;border-left:1px solid #555;padding:2px}.ruler-y span{writing-mode:vertical-rl;border-top:1px solid #555}.ruler[hidden]{display:none}.minimap{position:absolute;right:16px;bottom:68px;width:176px;height:116px;background:#252525e8;border:1px solid #444;border-radius:6px;z-index:5}.minimap button{position:absolute;min-height:0;padding:0;border-radius:1px;opacity:.8;border:1px solid #777}.minimap[hidden]{display:none}.drop-overlay{position:absolute;inset:16px;border:2px dashed #c6f36b;background:#1e1e1ecc;pointer-events:none;display:grid;place-items:center;font-size:18px;color:#c6f36b;z-index:20}.drop-overlay[hidden]{display:none}.drop-before{box-shadow:inset 0 2px #5fafff!important}.drop-after{box-shadow:inset 0 -2px #5fafff!important}.drop-inside{outline:1px solid #5fafff;background:#5fafff22!important}#commandPalette{width:560px;padding:12px}#commandPalette>input{height:40px;border:0;background:none;font-size:14px}#commandPalette p{font-size:10px;color:#9a9a9a;margin:12px 8px 0}.command-results{max-height:420px;overflow:auto;border-top:1px solid #444;padding-top:8px}.command-results button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left}.command-results button span{flex:1}.command-results button kbd{font-size:10px;color:#9a9a9a}.command-results button:focus{background:#c6f36b16}
.page-heading{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:11px;letter-spacing:.06em;color:#9a9a9a}.page-frame.active{background:#c6f36b18;color:#c6f36b}.rotate-zone{position:absolute;pointer-events:auto;cursor:crosshair}.layer:focus-visible{outline:1px solid #c6f36b;outline-offset:-1px}.studio-submenu{z-index:10002}.studio-menu>button:focus-visible{background:#c6f36b18}.studio-menu{max-height:calc(100vh - 24px)}
header #saved{font-size:10px!important;display:flex;align-items:center;gap:6px;width:auto;height:auto;background:transparent;color:#9a9a9a;white-space:nowrap}header #saved::before{content:'';width:6px;height:6px;border-radius:50%;background:#86b96b}header #saved[data-state=error],header #saved[data-state=saving]{background:transparent}header #saved[data-state=error]::before{background:#f27878}header #saved[data-state=saving]::before{background:#e9bd65}
body:not(.canvas-ready)>:not(#canvasGate){visibility:hidden!important}#canvasGate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e1e1e;color:#e6e6e6;z-index:99999;font:14px Inter,Arial,sans-serif}#canvasGate h1{font-size:24px;margin-bottom:8px}#canvasGate p{color:#aaa}#canvasGate a{display:inline-block;background:#c6f36b;color:#1e1e1e;border-radius:6px;text-decoration:none;padding:12px 20px;margin-top:16px}

/* Sliders: custom track and thumb so the thumb reaches both ends; --p is the filled share (set by studio.js). */
input[type=range]:not(.hue){-webkit-appearance:none;appearance:none;width:100%;height:16px;min-height:16px;padding:0;margin:8px 0 0;border:0;border-radius:0;background:transparent;cursor:pointer;--p:50%}
input[type=range]:not(.hue)::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(#c6f36b,#c6f36b) 0/var(--p) 100% no-repeat,#3a3a3a}
input[type=range]:not(.hue)::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:#e6e6e6;box-shadow:0 0 0 2px #252525}
input[type=range]:not(.hue)::-moz-range-track{height:4px;border-radius:2px;background:#3a3a3a}
input[type=range]:not(.hue)::-moz-range-progress{height:4px;border-radius:2px;background:#c6f36b}
input[type=range]:not(.hue)::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#e6e6e6;box-shadow:0 0 0 2px #252525}
input[type=range]:not(.hue):focus-visible{outline:0}
input[type=range]:not(.hue):focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #252525,0 0 0 4px #c6f36b}
/* Fields inside a bordered wrapper show one focus ring: the wrapper's. */
.number-field input:focus-visible,.opacity-control input:focus-visible,.picker-input input:focus-visible{outline:0}
.opacity-control>div:focus-within{border-color:#c6f36b}
/* Selects: Lucide chevron instead of the native arrow. */
select{-webkit-appearance:none;appearance:none;padding-right:26px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
/* Frame presets: two-line buttons sized to their content, chosen preset highlighted. */
#presets button{height:auto;min-height:48px;padding:8px 10px;line-height:1.45;display:block}
#presets button.active{border-color:#c6f36b;background:#c6f36b12}
.colour-popover .apply-colour[hidden]{display:none}
.labelled-button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}.labelled-button svg{width:14px;height:14px}
input[type=checkbox]{accent-color:#c6f36b;width:14px;height:14px;min-height:0}
/* Font picker */
.font-field{position:relative}
.font-field input{padding-right:28px!important}
.font-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:#9a9a9a;cursor:pointer;display:flex}
.font-caret svg{width:14px;height:14px}
.font-menu{max-height:320px;padding:4px}
.font-menu .font-group{font-size:10px;letter-spacing:.06em;color:#9a9a9a;padding:8px 8px 4px;text-transform:uppercase}
.font-menu .font-option{font-size:14px;height:32px;color:#e6e6e6}
.font-menu .font-option.active{background:#c6f36b18}
.font-menu .font-option.current{color:#c6f36b}
/* View settings */
.studio-menu .menu-check{width:14px;height:14px;display:flex;color:#c6f36b}
.studio-menu .menu-check svg{width:14px;height:14px}
.ruler canvas{display:block;position:absolute;inset:0}
.minimap{cursor:crosshair;overflow:hidden}
.minimap-view{position:absolute;border:1.5px solid #c6f36b;background:#c6f36b14;border-radius:2px;pointer-events:none}
.field-label{font-size:11px;color:#9a9a9a;margin:12px 0 6px}
.canvas-toggles{display:grid;gap:8px;margin:12px 0 4px}
.canvas-toggles .check-control{display:flex;align-items:center;gap:8px;font-size:12px;color:#e6e6e6}
/* Menu states: hover for the mouse, a soft fill for keyboard focus, no outline ring. */
.studio-menu:focus{outline:none}
.studio-menu button{cursor:default}
.studio-menu button:hover:not(:disabled),.studio-menu button[aria-expanded=true]{background:#ffffff14}
.studio-menu button:focus{outline:none}
.studio-menu button:focus-visible{outline:none;background:#c6f36b1f}
.studio-menu button:disabled{opacity:.4}
/* Full QA */
#layers .layer[hidden]{display:none!important}
.element.layer-hover:not(.selected),.frame.layer-hover{outline:1px solid #c6f36b!important;outline-offset:0}
.element.is-locked{pointer-events:none!important}
.element{overflow-wrap:anywhere}
.asset-item{position:relative;display:flex;align-items:center;gap:4px}
.asset-item .asset-card{flex:1;min-width:0}
.asset-item>button:last-child{width:32px;flex:none;opacity:0;transition:opacity .12s}
.asset-item:hover>button:last-child,.asset-item>button:last-child:focus-visible{opacity:1}
dialog:focus{outline:none}
#shortcutDialog{width:min(860px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto}
#shortcutDialog .shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
#shortcutDialog section h3{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a;margin:0 0 8px}
#shortcutDialog .shortcut-rows{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:12px}
#shortcutDialog kbd{font:11px 'JetBrains Mono',ui-monospace,monospace;color:#9a9a9a;text-align:right}
.asset-item .asset-card{height:40px;min-height:40px}
dialog[tabindex]:focus,dialog[tabindex]:focus-visible{outline:none!important}
/* Selection box: outline instead of border so 0%/100% handle positions are the layer's real edges. */
:root{--z:1}
.selection{border:0!important;outline:calc(1.5px / var(--z)) solid #c9f17b;outline-offset:calc(-.75px / var(--z));box-shadow:0 0 0 calc(1.5px / var(--z)) #0000004d,inset 0 0 0 calc(1.5px / var(--z)) #0000004d}
.multi-box{position:absolute;pointer-events:none;outline:calc(1.5px / var(--z)) solid #c9f17b;outline-offset:calc(-.75px / var(--z));box-shadow:0 0 0 calc(1.5px / var(--z)) #0000004d;z-index:10000}
.multi-box .handle{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);border-style:solid;border-color:#c9f17b;background:#fff;border-radius:1px}
.multi-box .size-badge{left:50%}
.selection.is-secondary{outline-style:dashed}
.danger-button{color:#ff8a80}
.danger-button[data-armed]{background:#ff5a4f;border-color:#ff5a4f;color:#1e1e1e}

/* Highlighted text keeps its own colour under a see-through highlight, so colour changes show while picking. */
.element[contenteditable="true"]::selection,.element[contenteditable="true"] ::selection{background:rgba(56,132,255,.32)}