:root{--bg:#121215;--panel:#1b1b20;--line:#2a2a31;--ink:#e6e6ea;--muted:#8a8a96;--hover:#26262d;--active:#33333d;--accent:#6d8bff;--colour-size:22px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior:none;-webkit-text-size-adjust:100%;margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}a{color:var(--accent);text-decoration:none}.app{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template:"workspace"1fr"palette""toolbar"/100%;display:grid;position:fixed;inset:0}.workspace{grid-area:workspace;min-width:0;min-height:0;position:relative;overflow:hidden}.workspace canvas{cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.workspace .constrain{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);position:absolute}@media (width<=403px){.workspace .constrain{top:calc(60px + env(safe-area-inset-top))}}.workspace .constrain[hidden]{display:none}.workspace .constrain.active{background:var(--accent);color:#fff}.tool.memory.active{background:var(--accent);color:#fff;box-shadow:none}.view-actions{display:contents}@media (width<=699px){.view-actions{z-index:1;top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));gap:4px;display:flex;position:absolute}.view-actions .divider{display:none}.view-actions .tool{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}.view-actions .tool:hover{background:var(--hover)}.view-actions .tool.active{background:var(--active)}}.toolbar .file-action{order:-1}@media (width<=699px){.view-actions [data-action=export]{margin-right:8px}}.artboard-labels{pointer-events:none;position:absolute;inset:0}.workspace-message{max-width:calc(100% - 32px);color:var(--ink);pointer-events:none;background:#2a2a31;border-radius:8px;margin:0;padding:8px 12px;font-size:13px;position:absolute;bottom:16px;left:50%;translate:-50%}.workspace-message[hidden]{display:none}.artboard-label{pointer-events:auto;touch-action:none;align-items:center;gap:2px;display:flex;position:absolute;top:0;left:0;translate:0 calc(-100% - 3px)}.artboard-label .name{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:grab;background:0 0;border:0;border-radius:4px;align-items:center;gap:3px;padding:0 4px;font:500 11px/18px system-ui,-apple-system,Segoe UI,sans-serif;display:flex}.artboard-label.below{translate:0 3px}.artboard-label .icon{display:none}.artboard-label.reference .icon{display:contents}.artboard-label.reference .icon svg{width:12px;height:12px}.artboard-label.reference .name{opacity:.6;font-style:italic}.artboard-label.reference .name:hover,.artboard-label.reference.selected .name{opacity:1}.artboard-label .name:hover{color:var(--ink);background:var(--hover)}.artboard-label .name:active{cursor:grabbing}.artboard-label.selected .name{color:#fff;background:var(--accent)}.artboard-label .delete{background:var(--panel);width:22px;height:18px;color:var(--muted);cursor:pointer;border:0;border-radius:4px;place-items:center;padding:0;display:grid}.artboard-label .delete[hidden]{display:none}.artboard-label .delete:hover{color:#ff8a8a;background:var(--hover)}.artboard-label .delete svg{width:15px;height:15px}.label-menu{z-index:10;border:1px solid var(--line);background:var(--panel);border-radius:8px;min-width:180px;padding:4px;display:grid;position:fixed;box-shadow:0 8px 24px #0006}.label-menu[hidden]{display:none}.label-menu button{min-height:36px;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:0 12px;font:13px system-ui,-apple-system,Segoe UI,sans-serif}.label-menu button:hover,.label-menu button:focus-visible{background:var(--hover);outline:none}.label-menu button.danger{color:#ff8a8a}.label-menu button[role=menuitemradio]{padding-left:28px;position:relative}.label-menu button[aria-checked=true]:before{content:"✓";position:absolute;left:10px}.label-menu button[role=menuitemradio]+button:not([role=menuitemradio]){border-top:1px solid var(--line);border-radius:0 0 5px 5px}.label-menu button:disabled{opacity:.4;cursor:default;background:0 0}.size-picker,.export-picker{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;width:min(320px,100vw - 32px);padding:16px}.size-picker::backdrop,.export-picker::backdrop{background:#00000080}.size-picker h2,.export-picker h2{margin:0 0 12px;font-size:15px;font-weight:600}.size-picker button,.size-picker input,.export-picker button{border:1px solid var(--line);background:var(--hover);height:40px;color:var(--ink);font:inherit;border-radius:8px}.size-picker button,.export-picker button{cursor:pointer;padding:0 12px}.size-picker button:hover,.export-picker button:hover:not(:disabled){background:var(--active)}.size-picker .presets{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.size-picker .custom{align-items:center;gap:8px;margin-top:12px;display:flex}.size-picker .custom input{text-align:center;flex:1;width:0;padding:0 8px}.size-picker .custom input:invalid{border-color:#b4202a}.export-picker .which{gap:8px;margin-bottom:12px;display:grid}.export-picker .which[hidden]{display:none}.export-picker .which label{cursor:pointer;align-items:center;gap:8px;min-height:32px;display:flex}.export-picker .which label:has(:disabled){color:var(--muted);cursor:default}.export-picker .which input{width:18px;height:18px;accent-color:var(--accent);margin:0}.export-picker .scales{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.export-picker .scales button{flex-direction:column;justify-content:center;align-items:center;height:52px;padding:0 4px;display:flex}.export-picker .scales button:disabled{opacity:.4;cursor:default}.export-picker .scales small{color:var(--muted);font-size:11px}.export-picker .scales small:empty,.export-picker .scales[hidden]{display:none}.export-picker .nothing{color:var(--muted);margin:0 0 12px;font-size:13px;line-height:1.4}.size-picker .cancel,.export-picker .cancel{width:100%;color:var(--muted);background:0 0;margin-top:12px}.toolbar{padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);grid-area:toolbar;gap:4px;display:flex}.toolbar .spacer{flex:1}.toolbar .divider{background:var(--line);width:1px;margin:6px 2px}.tool{width:44px;height:44px;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:10px;place-items:center;padding:0;display:grid}.tool:hover{background:var(--hover);color:var(--ink)}.tool.active{background:var(--active);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.tool:focus-visible,.palette-colour:focus-visible,.artboard-label button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.current-colour{width:22px;height:22px;box-shadow:0 0 0 2px var(--ink);border-radius:6px}.palette{grid-area:palette;grid-template-columns:repeat(17, var(--colour-size));grid-auto-rows:var(--colour-size);background:var(--panel);border-top:1px solid var(--line);justify-content:center;gap:2px;padding:8px;display:grid}.palette-collapsed .palette{display:none}.palette .transparent{grid-row:span 4}.palette-colour.transparent,.current-colour.transparent{background:repeating-conic-gradient(#8a8a96 0 25%, #e6e6ea 0 50%) 0 0 / 8px 8px}.palette-colour{background:var(--colour);cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;border-radius:4px;padding:0}.palette-colour[aria-selected=true]{z-index:1;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink);position:relative}@media (width>=700px){.app{grid-template:"toolbar palette workspace"100%/auto auto 1fr}.toolbar{border-top:0;border-right:1px solid var(--line);flex-direction:column;padding:8px 6px}.palette{grid-template-columns:repeat(4, var(--colour-size));touch-action:pan-y;border-top:0;border-right:1px solid var(--line);align-content:start;overflow-y:auto}.palette .transparent{grid-area:auto/1/auto/-1}}@media (width<=699px){.toolbar .tool{flex:0 44px;min-width:32px}:root{--colour-size:min(20px, calc((100vw - 16px - 32px) / 17))}}@media (width<=379px){.toolbar{gap:2px}}.start-screen dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;width:min(320px,100vw - 32px);padding:16px}.start-screen dialog::backdrop{background:#00000080}.start-screen{touch-action:pan-y;height:100%;overflow:auto}.start-screen main{max-width:640px;padding:calc(20px + env(safe-area-inset-top)) 16px 32px;margin:0 auto}.start-screen header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.start-screen h1{flex:1;margin:0;font-size:20px;font-weight:650}.start-screen h2{margin:0 0 12px;font-size:15px;font-weight:600}.start-screen .actions{gap:8px;display:flex}.start-screen :is(main,.rename,.confirm-delete) :is(button,.button,input[type=text]){border:1px solid var(--line);background:var(--hover);height:40px;color:var(--ink);font:inherit;border-radius:8px}.start-screen :is(main,.rename,.confirm-delete) :is(button,.button){cursor:pointer;align-items:center;gap:6px;padding:0 14px;display:inline-flex}.start-screen .button svg{width:18px;height:18px}.start-screen :is(main,.rename,.confirm-delete) :is(button,.button):hover{background:var(--active)}.start-screen :is(main,.rename) button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.start-screen .confirm-delete button.danger{color:#fff;background:#b4202a;border-color:#b4202a}.start-screen :focus-visible{outline:2px solid var(--accent);outline-offset:2px}.start-screen .message{color:#ffb3b3;background:#3a1418;border-radius:8px;margin:0 0 16px;padding:10px 12px}.start-screen .message[hidden],.start-screen .empty[hidden]{display:none}.start-screen .empty{color:var(--muted)}.file-list{margin:0;padding:0;list-style:none}.file-list li{border-bottom:1px solid var(--line);align-items:center;gap:4px;display:flex}.file-list .open{min-width:0;color:var(--ink);flex-direction:column;flex:1;padding:12px 4px;display:flex}.file-list .open:hover .name{color:var(--accent)}.file-list .name{text-overflow:ellipsis;white-space:nowrap;font-weight:550;overflow:hidden}.file-list .meta{color:var(--muted);font-size:12px}.start-screen .file-list button.icon{width:40px;color:var(--muted);background:0 0;border-color:#0000;justify-content:center;padding:0}.start-screen .file-list button.icon:hover{color:var(--ink);background:var(--hover)}.start-screen .file-list [data-action=delete]:hover{color:#ff8a8a}.start-screen dialog input[type=text]{width:100%;padding:0 10px}.start-screen dialog p{color:var(--muted);margin:0}.start-screen dialog .buttons{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.story-index{touch-action:pan-y;height:100%;overflow:auto}.story-index main{max-width:640px;margin:0 auto;padding:24px 20px}.story-index h1{margin:0 0 4px;font-size:20px}.story-index ul{padding:0;list-style:none}.story-index li{border-bottom:1px solid var(--line);padding:10px 0}.story-index p{color:var(--muted);margin:2px 0 0}