:root{color-scheme:dark;--bg: #1a1a1f;--bg-2: #22222a;--bg-3: #2c2c36;--fg: #e6e6ea;--fg-dim: #9a9aa8;--border: #3a3a44;--accent: #7aa2ff;--danger: #ff6680;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}button{font:inherit;color:var(--fg);background:var(--bg-3);border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{color:var(--fg-dim);cursor:default;opacity:.5}input[type=range]{accent-color:var(--accent)}input[type=number],input[type=text],select{background:var(--bg-2);color:var(--fg);border:1px solid var(--border);padding:3px 6px;border-radius:3px}.app{display:grid;grid-template-rows:36px 44px 1fr;height:100%}.app-header{background:linear-gradient(180deg,#2a2a36,#1a1a22);display:flex;align-items:center;padding:0 12px;gap:12px;border-bottom:1px solid var(--border)}.brand{font-weight:600;letter-spacing:.5px}.brand-sub{color:var(--fg-dim);font-size:11px}.header-spacer{flex:1}.locale-switcher{display:flex;align-items:center;gap:4px;color:var(--fg-dim)}.locale-switcher select{background:var(--bg-2);color:var(--fg);border:1px solid var(--border);padding:2px 4px;font-size:11px;border-radius:3px}.autosave-indicator{display:inline-flex;align-items:center;gap:4px;color:var(--fg-dim);font-size:11px;margin-right:8px}.export-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:5000}.export-dialog{width:360px;max-width:calc(100vw - 32px);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;box-shadow:0 16px 40px #0000008c;display:flex;flex-direction:column}.export-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600}.export-dialog-header .close{background:transparent;border:0;color:var(--fg-dim);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}.export-dialog-header .close:hover{color:var(--fg)}.export-dialog-body{padding:12px;display:flex;flex-direction:column;gap:12px}.export-section{display:flex;flex-direction:column;gap:6px}.export-label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.5px}.scale-checkboxes{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.scale-check{display:inline-flex;align-items:center;gap:4px;font-size:12px}.scale-check.custom{gap:4px}.export-summary{font-size:11px;color:var(--fg-dim)}.export-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;border-top:1px solid var(--border)}.export-dialog-actions .primary{background:var(--accent);color:#0b1a3a;border-color:var(--accent)}.export-dialog-actions button:disabled{opacity:.5}.header-icon-btn{background:transparent;border:1px solid var(--border);border-radius:3px;color:var(--fg-dim);padding:4px 6px;cursor:pointer;margin-right:6px;display:inline-flex;align-items:center}.header-icon-btn:hover{color:var(--fg);border-color:var(--accent)}.shortcuts-dialog{width:460px;max-width:calc(100vw - 32px)}.shortcuts-table{width:100%;border-collapse:collapse}.shortcuts-table tr{border-bottom:1px dashed var(--border)}.shortcuts-table tr:last-child{border-bottom:0}.shortcuts-table td{padding:4px 6px;vertical-align:middle}.shortcuts-table .action-label{font-size:12px;color:var(--fg)}.shortcuts-table .binding-btn{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;padding:3px 8px;min-width:90px;text-align:center}.shortcuts-table .binding-btn.recording{background:var(--accent);color:#0b1a3a;border-color:var(--accent)}.shortcuts-table .binding-btn.conflict{color:var(--danger);border-color:var(--danger)}.shortcuts-table .reset-one{padding:3px 6px}.shortcuts-table .reset-one:disabled{opacity:.3}.shortcuts-footer-note{font-size:11px;color:var(--fg-dim);margin-top:12px;line-height:1.4}.artboard-edit-row{background:var(--bg-3);padding:6px 8px;margin-top:2px;margin-bottom:4px;border-radius:3px;border:1px solid var(--border)}.ab-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px}.ab-edit-grid label{display:grid;grid-template-columns:14px 1fr;align-items:center;gap:4px;font-size:11px;color:var(--fg-dim)}.ab-edit-grid input{width:100%}.ab-edit-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:6px}.ab-edit-actions button{font-size:11px;padding:3px 8px}.ab-edit-actions .primary{background:var(--accent);color:#0b1a3a;border-color:var(--accent)}.new-artboard-popover{background:var(--bg-3);padding:8px;margin-bottom:6px;border:1px solid var(--border);border-radius:3px}.new-project-dialog{width:400px;max-width:calc(100vw - 32px)}.preset-row{display:flex;flex-wrap:wrap;gap:6px}.preset-btn{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;padding:4px 10px}.preset-btn.active{background:var(--accent);color:#0b1a3a;border-color:var(--accent)}.autosave-indicator .lbl{white-space:nowrap}.autosave-indicator .spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.file-actions{display:flex;align-items:center;gap:6px;margin-right:12px}.file-actions button{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:4px 8px}.file-actions .lbl{display:inline-block}.toolbar{background:var(--bg-2);display:flex;align-items:center;gap:16px;padding:0 12px;border-bottom:1px solid var(--border)}.tool-buttons{display:flex;gap:4px}.tool-btn{padding:4px 8px;display:inline-flex;align-items:center;gap:6px;line-height:1}.tool-btn.active{background:var(--accent);color:#0b1a3a;border-color:var(--accent)}.tool-btn svg{display:inline-block;flex-shrink:0}.tool-icon{display:inline-flex;align-items:center}.panel-actions button,.history button{display:inline-flex;align-items:center;gap:4px}.tool-options{display:flex;align-items:center;gap:12px;color:var(--fg-dim)}.tool-options label{display:flex;align-items:center;gap:4px}.tool-options input[type=number]{width:56px}.tool-options .checkbox{gap:6px}.toolbar-spacer{flex:1}.history{display:flex;gap:4px}.main{position:relative;height:100%;min-height:0}.main-floating{display:block}.sidebar{background:var(--bg-2);overflow-y:auto;display:flex;flex-direction:column}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg);min-width:0;min-height:0}.canvas-wrap canvas{display:block;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.floating-panel{position:fixed;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px #00000073,0 1px #ffffff0a inset;display:flex;flex-direction:column;max-height:calc(100vh - 100px);overflow:hidden}.floating-panel.collapsed{max-height:none}.fp-title{display:flex;align-items:center;gap:4px;padding:4px 6px;background:linear-gradient(180deg,#2c2c36,#25252e);border-bottom:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none;font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.5px}.fp-title:active{cursor:grabbing}.floating-panel.collapsed .fp-title{border-bottom:0}.fp-collapse,.fp-close{background:transparent;border:0;padding:0;margin:0;width:16px;height:16px;cursor:pointer;color:var(--fg-dim);display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}.fp-collapse:hover,.fp-close:hover{color:var(--fg)}.fp-title-text{flex:1}.fp-body{overflow-y:auto;flex:1;min-height:0}.fp-body>.panel:first-child>.panel-header:first-child>span:first-of-type{display:none}.fp-body>.panel:first-child>.panel-header:first-child{justify-content:flex-end;min-height:0;margin-bottom:6px}.fp-body>.panel:first-child>.panel-header:first-child:not(:has(.panel-actions)){display:none}.fp-body>.panel{border-bottom:0;padding:6px 8px 8px}.fp-resize{position:absolute;touch-action:none}.fp-resize-n{top:-3px;left:8px;right:8px;height:6px;cursor:ns-resize}.fp-resize-s{bottom:-3px;left:8px;right:8px;height:6px;cursor:ns-resize}.fp-resize-w{left:-3px;top:8px;bottom:8px;width:6px;cursor:ew-resize}.fp-resize-e{right:-3px;top:8px;bottom:8px;width:6px;cursor:ew-resize}.fp-resize-nw{top:-3px;left:-3px;width:12px;height:12px;cursor:nwse-resize}.fp-resize-ne{top:-3px;right:-3px;width:12px;height:12px;cursor:nesw-resize}.fp-resize-sw{bottom:-3px;left:-3px;width:12px;height:12px;cursor:nesw-resize}.fp-resize-se{bottom:-3px;right:-3px;width:12px;height:12px;cursor:nwse-resize}.panel-menu{position:relative;margin-right:8px}.panel-menu-trigger{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:4px 8px}.panel-menu-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;box-shadow:0 8px 24px #00000073;list-style:none;padding:4px 0;margin-bottom:0;min-width:160px;z-index:1000}.panel-menu-dropdown li{display:grid;grid-template-columns:20px 1fr;align-items:center;padding:6px 8px;cursor:pointer;font-size:12px}.panel-menu-dropdown li:hover{background:var(--bg-3)}.panel-menu-dropdown .check{color:var(--accent);display:inline-flex;justify-content:center}.panel{padding:8px 10px;border-bottom:1px solid var(--border)}.panel-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;color:var(--fg-dim);letter-spacing:.5px;margin-bottom:6px}.panel-actions{display:flex;gap:4px;align-items:center}.panel-actions button{padding:2px 8px;font-size:12px}.panel-actions .create-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:var(--accent);color:#0b1a3a;border-color:var(--accent);font-weight:600}.panel-actions .create-btn:hover{filter:brightness(1.1)}.layer-list{list-style:none;padding:0;margin:0;min-height:8px}.layer-row{position:relative;display:grid;grid-template-columns:16px 22px 22px 22px 36px 1fr auto;gap:4px;align-items:center;padding:4px 6px;border-radius:3px;cursor:pointer;-webkit-user-select:none;user-select:none}.layer-thumbnail{display:block;border:1px solid var(--border);border-radius:2px;background:var(--bg)}.layer-row .drag-handle{color:var(--fg-dim);cursor:grab;display:inline-flex;align-items:center;justify-content:center}.layer-row .alpha-lock{background:transparent;border:1px solid transparent;padding:0;width:22px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg-dim);cursor:pointer;border-radius:3px}.layer-row .alpha-lock:hover{color:var(--fg);border-color:var(--border)}.layer-row .alpha-lock.active{color:#0b1a3a;background:var(--accent);border-color:var(--accent)}.layer-row .alpha-lock .alpha-glyph{font-family:ui-monospace,SF Mono,Menlo,monospace;font-weight:700;font-size:12px;line-height:1}.layer-row .alpha-lock-spacer{display:inline-block;width:22px;height:20px}.layer-row[data-dragging]{opacity:.4}.layer-row[data-drop-above]:before{content:"";position:absolute;left:4px;right:4px;top:-1px;height:2px;background:var(--accent);border-radius:1px;pointer-events:none}.layer-row[data-drop-below]:after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:2px;background:var(--accent);border-radius:1px;pointer-events:none}.layer-row:hover{background:var(--bg-3)}.layer-row.active{background:#7aa2ff26;border:1px solid rgba(122,162,255,.5)}.layer-row .visibility,.layer-row .lock{background:transparent;border:0;padding:0;cursor:pointer;color:inherit}.layer-row .layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row .layer-type{font-size:10px;color:var(--fg-dim)}.layer-row .rasterize-btn{font-size:10px;padding:1px 4px;margin-left:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:3px;color:var(--fg-dim);cursor:pointer}.layer-row .rasterize-btn:hover{color:var(--fg);border-color:var(--accent)}.layer-props{display:grid;grid-template-columns:1fr;gap:6px;padding:6px 0 10px;border-bottom:1px dashed var(--border);margin-bottom:8px}.layer-props label{display:grid;grid-template-columns:60px 1fr 36px;align-items:center;gap:6px}.layer-props label.checkbox{grid-template-columns:auto auto;gap:6px}.layer-props .num{color:var(--fg-dim);font-size:11px;text-align:right}.color-panel .primary-secondary{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}.color-swatch{position:relative;background-image:linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#777;border:1px solid var(--border);border-radius:3px;cursor:pointer;height:28px;min-width:28px;overflow:hidden;padding:0}.color-swatch:hover{border-color:var(--accent)}.color-swatch.active-pick{border-color:var(--accent);box-shadow:0 0 0 2px #7aa2ff4d}.color-swatch-fill{position:absolute;top:0;right:0;bottom:0;left:0}.color-swatch.large{height:48px;display:flex;align-items:flex-end;justify-content:flex-end}.color-swatch.large .lbl{position:relative;background:#000000b3;color:#fff;font-size:10px;padding:1px 4px;border-radius:2px;margin:2px;z-index:1}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.swap-btn{padding:0 8px;font-size:14px;line-height:1}.rgb-sliders{display:grid;gap:4px;margin-bottom:8px}.slider-row{display:grid;grid-template-columns:14px 1fr 32px;align-items:center;gap:6px}.slider-label{color:var(--fg-dim);font-size:11px}.slider-num{color:var(--fg-dim);font-size:11px;text-align:right}.hex-input{width:100%}.artboard-list{list-style:none;padding:0;margin:0 0 8px}.artboard-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:4px 6px;border-radius:3px;cursor:pointer}.artboard-row:hover{background:var(--bg-3)}.artboard-row.active{background:#7aa2ff26}.ab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ab-size{color:var(--fg-dim);font-size:11px}.artboard-row button{padding:1px 6px;font-size:11px}.view-controls{display:grid;gap:4px}.view-controls button{text-align:left}.zoom-row{display:flex;align-items:center;gap:6px}.zoom-row span{color:var(--fg-dim);font-size:11px}.zoom-row .num{min-width:38px;text-align:center;color:var(--fg)}.muted{color:var(--fg-dim);font-size:11px}.small{font-size:11px}.sym-controls,.sel-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sym-controls label{display:flex;align-items:center;gap:6px}.sel-controls button{font-size:11px;padding:3px 6px}.effect-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.effect-row{background:var(--bg-3);border:1px solid var(--border);border-radius:4px;padding:6px}.effect-row-header{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:6px}.effect-row-header .visibility{background:transparent;border:0;cursor:pointer;color:inherit;padding:0}.effect-row-header .effect-name{font-size:12px;font-weight:500}.effect-fields{display:grid;gap:4px;margin-top:6px}.effect-fields label{display:grid;grid-template-columns:60px 1fr 36px;align-items:center;gap:6px;font-size:11px}.effect-fields .num{color:var(--fg-dim);font-size:11px;text-align:right}.effect-color{display:grid;grid-template-columns:16px 1fr 16px 1fr 16px 1fr;gap:4px;align-items:center;font-size:10px;color:var(--fg-dim)}.color-picker{display:flex;flex-direction:column;gap:6px;padding:6px 0}.color-picker.compact{gap:4px}.sv-box{position:relative;width:100%;aspect-ratio:1.6 / 1;border-radius:4px;overflow:hidden;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.sv-box .sv-overlay-white{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff,#fff0);pointer-events:none}.sv-box .sv-overlay-black{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000,#0000);pointer-events:none}.sv-box .sv-handle{position:absolute;width:12px;height:12px;margin-left:-6px;margin-top:-6px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000080;pointer-events:none}.color-picker.compact .sv-box{aspect-ratio:2 / 1}.hue-strip{position:relative;height:12px;border-radius:3px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.hue-handle{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:#fff;border:1px solid rgba(0,0,0,.5);border-radius:2px;pointer-events:none}.alpha-strip{position:relative;height:10px;border-radius:3px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background-image:linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#777;overflow:hidden}.alpha-fg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.color-picker-bottom{display:flex;align-items:center;gap:6px}.swatch-preview{position:relative;width:28px;height:22px;border-radius:3px;border:1px solid var(--border);overflow:hidden;background-image:linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#777}.swatch-preview .swatch-fill{position:absolute;top:0;right:0;bottom:0;left:0}.color-picker-bottom .hex-input{flex:1;font-family:ui-monospace,monospace;font-size:11px}