:root{color-scheme:dark;font-family:Segoe UI Variable Display,Yu Gothic UI,Hiragino Sans,sans-serif;background:#070b12;color:#f4f7fb;line-height:1.45;font-weight:500;--bg: #070b12;--panel: rgba(16, 22, 34, .94);--panel-soft: rgba(18, 24, 38, .72);--stroke: rgba(255, 255, 255, .08);--muted: #95a0b8;--text: #f4f7fb;--accent: #ff8b57;--accent-2: #55cfff;--success: #75f0b2;--shadow: 0 28px 80px rgba(0, 0, 0, .42)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 18% 12%,rgba(255,139,87,.16),transparent 24%),radial-gradient(circle at 80% 8%,rgba(85,207,255,.12),transparent 22%),linear-gradient(180deg,#09101a,#070b12 36%,#05070c)}body{min-height:100vh;overscroll-behavior:none}button,input{font:inherit}button{border:0;cursor:pointer;color:inherit}img,canvas{display:block}#app{min-height:100vh}.app-shell{min-height:100vh;width:min(100vw,520px);margin:0 auto;position:relative;padding:14px 14px 120px}.hidden-input{display:none}.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:12px;padding-top:max(6px,env(safe-area-inset-top))}.topbar-actions{display:flex;gap:10px}.icon-button,.icon-button-soft{width:46px;height:46px;border-radius:16px;background:#0a0e16c7;border:1px solid var(--stroke);box-shadow:0 12px 28px #0003}.icon-button-soft{background:#0a0e1699}.mode-pill{min-height:46px;padding:8px 14px;border-radius:18px;border:1px solid var(--stroke);background:#0c111bd6;display:grid;gap:1px;align-content:center;box-shadow:0 12px 34px #0000003d}.mode-pill strong,.mode-pill span{display:block}#modeTitle{font-size:.96rem;font-weight:700}#modeSubtitle{color:var(--muted);font-size:.74rem}.stage-screen{display:grid;gap:14px}.viewport{position:relative;min-height:56vh;border-radius:34px;overflow:hidden;background:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%) 0 0 / 24px 24px,linear-gradient(-45deg,rgba(255,255,255,.04) 25%,transparent 25%) 0 0 / 24px 24px,linear-gradient(180deg,#121927,#090d14);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}.viewport-transform{width:100%;min-height:56vh;display:grid;place-items:center;transform-origin:center center;transition:transform .14s ease-out}.canvas-stack{position:relative;width:min(calc(100vw - 56px),var(--canvas-width, 100%));max-width:100%;aspect-ratio:var(--canvas-width, 1) / var(--canvas-height, 1)}.canvas-stack canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hud-top{position:absolute;top:16px;left:16px;right:16px;z-index:12;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.hud-chip{max-width:58%;padding:10px 12px;border-radius:16px;background:#080b12b8;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#f7f9fd;font-size:.74rem}.hud-chip-accent{background:#ff8b5733}.compare-hint{position:absolute;top:72px;left:16px;z-index:12;padding:7px 11px;border-radius:999px;background:#080b12ad;border:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:.72rem}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;display:grid;align-content:center;justify-items:start;gap:12px;padding:28px;background:linear-gradient(180deg,#05080e7a,#05080ec7),radial-gradient(circle at top right,rgba(255,139,87,.2),transparent 34%)}.eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}.empty-state h1{margin:0;font-size:clamp(2.8rem,12vw,4.8rem);line-height:.92}.empty-state p{margin:0;max-width:28ch;color:#d5deed}.empty-actions,.action-grid,.helper-row{display:grid;gap:10px}.empty-actions{width:100%;max-width:280px;margin-top:4px}.primary-button,.secondary-button{min-height:52px;padding:0 18px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s ease,opacity .16s ease,border-color .16s ease}.primary-button{background:linear-gradient(135deg,#ffb066,var(--accent));color:#1b100a;font-weight:800;box-shadow:0 20px 34px #ff7d483d}.secondary-button{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:var(--text)}.primary-button:active,.secondary-button:active,.tool-button:active,.icon-button:active{transform:scale(.98)}.progress-hud{position:absolute;left:16px;right:16px;bottom:16px;z-index:16;padding:14px;border-radius:20px;background:#080c12e0;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 22px 44px #0000004d}.progress-copy{display:grid;gap:4px;margin-bottom:10px}.progress-copy strong{font-size:.9rem}.progress-copy span{color:var(--muted);font-size:.78rem}.progress-track{width:100%;height:8px;border-radius:999px;overflow:hidden;background:#ffffff14}.progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%);z-index:18;padding:10px 14px;border-radius:999px;background:#080c12e6;border:1px solid rgba(255,255,255,.08);color:#f7f9fd;font-size:.78rem}.onboarding{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;padding:28px;display:grid;align-content:end;gap:10px;text-align:left;background:linear-gradient(180deg,#06090e2e,#06090ee0),radial-gradient(circle at top right,rgba(85,207,255,.16),transparent 24%)}.onboarding strong{font-size:1.46rem}.onboarding p{margin:0;color:#d5deed}.onboarding-actions{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;color:var(--muted)}.sheet{padding:14px 14px 8px;border-radius:30px;background:linear-gradient(180deg,#0e131df0,#0b0f17fa);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}.sheet-handle{width:52px;height:5px;border-radius:999px;margin:0 auto 14px;background:#ffffff1f}.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}.sheet-head h2{margin:4px 0 0;font-size:1.45rem}.sheet-metrics{display:grid;gap:4px;justify-items:end;color:var(--muted);font-size:.72rem}.sheet-body{display:grid;gap:12px}.sheet-section{display:grid;gap:10px}.hidden{display:none!important}.control-card,.status-card{padding:14px;border-radius:22px;background:var(--panel-soft);border:1px solid rgba(255,255,255,.06)}.status-card strong{display:block;margin-bottom:6px}.status-card p,.helper-copy{margin:0;color:var(--muted);font-size:.82rem}.label-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.segment{min-height:46px;border-radius:16px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);color:#d8e1ef}.segment.active{background:linear-gradient(135deg,#ff8b57eb,#ffbf75eb);color:#1b100a;font-weight:800;border-color:transparent}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.single-grid{grid-template-columns:1fr}.helper-row{grid-template-columns:repeat(2,minmax(0,1fr))}input[type=range]{width:100%;accent-color:var(--accent)}.apply-footer{display:grid;grid-template-columns:.82fr 1.18fr;gap:10px;margin-top:14px}.toolbar{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(calc(100vw - 20px),520px);z-index:40;padding:10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(68px,1fr);gap:8px;overflow-x:auto;border-radius:28px;background:#080c12eb;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 24px 48px #00000057;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.tool-button{min-height:64px;padding:8px 6px;border-radius:18px;background:transparent;display:grid;gap:5px;justify-items:center;color:#c8d1df}.tool-button span{font-size:1.1rem}.tool-button em{font-style:normal;font-size:.72rem}.tool-button.active{background:linear-gradient(180deg,#ff8b573d,#ff8b571f);color:#fff5ee;border:1px solid rgba(255,139,87,.26)}@media (min-width: 768px){.app-shell{width:min(100vw,1120px);padding:20px 20px 108px}.stage-screen{grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);align-items:start}.viewport,.viewport-transform{min-height:calc(100vh - 210px)}.toolbar{width:min(calc(100vw - 40px),1120px)}}@media (max-width: 420px){.app-shell{padding-left:10px;padding-right:10px}.helper-row,.action-grid{grid-template-columns:1fr}.sheet{border-radius:26px}.viewport{border-radius:28px}}