:root{--app-bg: #0f0f0f;--surface: #161616;--surface-raised: #1c1c1c;--surface-elevated: #242424;--stage-bg: #101010;--border: #2c2c2c;--border-soft: #232323;--text: #eaeaea;--text-dim: #9a9a9a;--text-faint: #6b6b6b;--accent: #4f9dff;--accent-strong: #7ab6ff;--accent-ink: #05203f;--danger: #ff6b6b;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--topbar-h: 56px;--tool-strip-h: 74px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html,body{margin:0;padding:0;height:100%;background:var(--app-bg);overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit}#app{height:100dvh;overflow:hidden;position:relative}.shell{display:flex;flex-direction:column;height:100%;background:var(--app-bg)}.shell[hidden]{display:none}.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--app-bg);color:var(--text);z-index:30}.boot[hidden]{display:none}.boot-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgb(255 255 255 / .12);border-top-color:var(--accent);animation:spin .9s linear infinite}.boot.is-error .boot-spinner{animation:none;border-color:var(--danger)}.boot-title{margin:0;font-weight:700;letter-spacing:.02em}.boot-status{margin:0;color:var(--text-muted);font-size:.85rem}.boot.is-error .boot-status{color:var(--danger)}.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(var(--topbar-h) + var(--safe-top));padding:calc(var(--safe-top) + 6px) calc(8px + var(--safe-right)) 6px calc(12px + var(--safe-left));background:var(--surface);border-bottom:1px solid var(--border-soft)}.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand-mark{display:inline-flex;width:24px;height:24px;color:var(--accent);flex:0 0 auto}.brand-mark svg{width:100%;height:100%}.brand-name{font-size:.95rem;font-weight:600;letter-spacing:.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand #homeBtn:not([hidden])+.brand-mark{display:none}.mode-pill{flex:0 0 auto;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-strong);background:#4f9dff1f;border:1px solid rgb(79 157 255 / .3);border-radius:999px;padding:2px 8px}.topbar-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}.icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);cursor:pointer;flex:0 0 auto;transition:background-color .15s ease,color .15s ease}.icon-btn svg{width:21px;height:21px;display:block}.icon-btn:hover:not(:disabled){background:var(--surface-elevated);color:var(--text)}.icon-btn:active:not(:disabled){transform:scale(.96)}.icon-btn:disabled{opacity:.35;cursor:default}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn-accent:not(:disabled){color:var(--accent-strong)}.icon-btn.is-busy svg{animation:spin .9s linear infinite}.stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--stage-bg);background-image:radial-gradient(circle at 50% 35%,#171717 0%,var(--stage-bg) 70%);overflow:hidden;padding:14px;touch-action:none}.preview-canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border-radius:4px;box-shadow:0 8px 28px #0000008c;background:#000}.size-badge{position:absolute;left:50%;bottom:12px;transform:translate(-50%);background:#0000008c;color:var(--text);font-size:.7rem;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:999px;border:1px solid rgb(255 255 255 / .08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;display:inline-flex;align-items:center;gap:8px}.render-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .15s ease-out}.stage.is-rendering .render-dot{opacity:1;animation:pulse .8s ease-in-out infinite}.stage.is-rendering .preview-canvas{filter:saturate(.92)}@keyframes pulse{50%{opacity:.35}}.intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:520px;margin:auto}.intro-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;padding:22px 16px;border:1.5px dashed var(--border);border-radius:var(--radius-lg);background:#ffffff04;color:var(--text-dim);cursor:pointer;text-align:center;transition:border-color .15s ease,background-color .15s ease}.intro-card:hover,.intro-card.is-drop-target{border-color:var(--accent);background:#4f9dff0f}.intro-card.is-drop-target{border-style:solid}.intro-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.intro-card-icon{width:40px;height:40px;color:var(--accent)}.intro-card-icon svg{width:100%;height:100%}.intro-card-title{font-size:1.05rem;font-weight:700;color:var(--text)}.intro-card-text{font-size:.78rem;line-height:1.4;max-width:22ch}.intro-card-cta{margin-top:6px;font-size:.72rem;font-weight:600;color:var(--accent-strong)}.intro-hint{grid-column:1 / -1;margin:4px 0 0;font-size:.72rem;color:var(--text-faint);text-align:center}@media (max-width: 420px){.intro{grid-template-columns:1fr}.intro-card{min-height:0;padding:18px 14px}}.stage-drag-overlay{position:absolute;inset:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--accent);border-radius:var(--radius-lg);background:#4f9dff1f;color:var(--accent-strong);font-size:.9rem;font-weight:600;pointer-events:none;z-index:5}.stage-drag-overlay svg{width:32px;height:32px}.stage.is-empty .preview-canvas{display:none}.option-panel{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--border-soft);padding:10px calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));min-height:0;overflow-x:auto;scrollbar-width:none}.option-panel:empty{padding:0;border-top:none}.option-panel::-webkit-scrollbar{display:none}.option-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.option-row+.option-row{margin-top:10px}.option-label{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);flex:0 0 auto}.chip-group{display:flex;gap:6px;flex-wrap:wrap}.chip{appearance:none;border:1px solid var(--border);background:var(--surface-raised);color:var(--text-dim);font-size:.8rem;font-weight:500;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;min-height:36px;display:inline-flex;align-items:center;gap:6px}.chip svg{width:15px;height:15px}.chip:hover{border-color:var(--text-dim);color:var(--text)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.size-fields{display:flex;align-items:center;gap:8px}.field{display:flex;flex-direction:column;gap:3px}.field label{font-size:.65rem;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding-left:2px}.field input[type=number]{width:84px;background:var(--surface-raised);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 10px;font-size:.9rem;font-weight:600;text-align:center}.field input[type=number]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.dim-separator{color:var(--text-faint);font-size:1rem;padding-top:14px}.icon-btn-flat{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text-dim);cursor:pointer}.icon-btn-flat svg{width:17px;height:17px}.icon-btn-flat:hover{color:var(--text);border-color:var(--text-dim)}.icon-btn-flat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.position-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.align-groups{display:flex;flex-direction:column;gap:6px;min-width:0}.dpad{display:grid;grid-template-columns:34px 34px 34px;grid-template-rows:34px 34px 34px;gap:3px;place-items:center}.dpad button{grid-column:2;width:34px;height:34px;border:1px solid var(--border);background:var(--surface-raised);color:var(--text-dim);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.dpad button svg{width:16px;height:16px}.dpad button[data-dir=up]{grid-row:1}.dpad button[data-dir=left]{grid-row:2;grid-column:1}.dpad button[data-dir=right]{grid-row:2;grid-column:3}.dpad button[data-dir=down]{grid-row:3}.dpad button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.dpad button:active{transform:scale(.93)}.dpad button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nudge-readout{font-size:.72rem;color:var(--text-faint);font-weight:500;min-width:64px;text-align:center;font-variant-numeric:tabular-nums}.thumb-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.thumb-strip::-webkit-scrollbar{display:none}.thumb{position:relative;flex:0 0 auto;width:88px;height:88px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-raised);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain;display:block;background:repeating-conic-gradient(#222 0% 25%,#1a1a1a 0% 50%) 50% / 12px 12px}.thumb-index{position:absolute;top:4px;left:4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#000000a6;font-size:.65rem;font-weight:700;line-height:18px;text-align:center}.thumb-actions{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;background:linear-gradient(transparent,#000000bf);padding:10px 2px 2px}.thumb-actions button{width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:#00000073;color:var(--text);cursor:pointer}.thumb-actions button svg{width:15px;height:15px}.thumb-actions button:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}.thumb-actions button[data-remove]:hover{background:var(--danger)}.thumb-actions button:disabled{opacity:.25;cursor:default}.thumb-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-style:dashed;color:var(--text-dim);font-size:.72rem;font-weight:600;cursor:pointer}.thumb-add svg{width:22px;height:22px}.thumb-add:hover{border-color:var(--accent);color:var(--accent-strong)}.field-inline{flex-direction:row;align-items:center;gap:8px}.field-inline input[type=number]{width:64px}.color-swatch-input{width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:none;cursor:pointer}.range-row{display:flex;align-items:center;gap:10px;flex:1 1 160px;min-width:0}input[type=range]{flex:1 1 auto;min-width:0;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer;appearance:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface);box-shadow:0 1px 3px #0006}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}.range-value{font-size:.75rem;color:var(--text-dim);min-width:26px;text-align:right;font-variant-numeric:tabular-nums}.tool-strip{flex:0 0 auto;display:flex;align-items:stretch;gap:2px;height:calc(var(--tool-strip-h) + var(--safe-bottom));padding:4px calc(6px + var(--safe-right)) calc(4px + var(--safe-bottom)) calc(6px + var(--safe-left));background:var(--surface);border-top:1px solid var(--border-soft);overflow-x:auto;scrollbar-width:none}.tool-strip::-webkit-scrollbar{display:none}.tool-tab{flex:1 1 0;min-width:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;background:transparent;color:var(--text-dim);border-radius:var(--radius-sm);cursor:pointer;padding:6px 4px;transition:color .15s ease,background-color .15s ease}.tool-tab-icon{width:22px;height:22px;display:flex}.tool-tab-icon svg{width:100%;height:100%}.tool-tab-label{font-size:.68rem;font-weight:500;letter-spacing:.01em}.tool-tab:hover{color:var(--text)}.tool-tab[aria-pressed=true]{color:var(--accent)}.tool-tab[aria-pressed=true] .tool-tab-label{font-weight:700}.tool-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toast{position:fixed;left:50%;bottom:calc(var(--tool-strip-h) + var(--safe-bottom) + 14px);transform:translate(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);background:var(--surface-elevated);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:9px 16px;font-size:.8rem;font-weight:500;box-shadow:0 6px 20px #00000080;z-index:20;animation:toast-in .18s ease-out}.toast svg{width:16px;height:16px;flex:0 0 auto}.toast.is-error{color:var(--danger);border-color:#ff6b6b59}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .9s linear infinite}@media (max-width: 400px){.brand-name{font-size:.85rem}.field input[type=number]{width:70px}.tool-tab-label{font-size:.62rem}}@media (min-width: 720px){.shell{max-width:720px;margin:0 auto;border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft)}}