:root{--bg:#0b0b0d;--panel:rgba(20,20,23,0.84);--border:rgba(255,255,255,0.11);--text:#edecea;--muted:#9b9a97;--muted-2:#66655f;--dot:#86857f;--dot-off:rgba(255,255,255,0.16);--row-line:rgba(255,255,255,0.055);--warn:#d9bd82;--accent:#d9d2c8;--accent-dim:rgba(217,210,200,0.16);--accent-line:rgba(217,210,200,0.38);--font-ui:ui-sans-serif,system-ui,"Segoe UI",sans-serif;--font-display:ui-serif,Georgia,"Times New Roman",serif}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}body,html{height:100dvh;overscroll-behavior:none}.stage{position:relative;width:100vw;height:100dvh}.guide,.stage{overflow:hidden}.guide{position:absolute;top:16px;left:16px;width:268px;max-height:calc(100dvh - 130px);display:flex;flex-direction:column;border-radius:14px;background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.guide-body{overflow-y:auto;padding:0 8px 12px;-webkit-overflow-scrolling:touch}.watermark{position:absolute;top:18px;right:18px;font-size:11px;letter-spacing:.08em;color:var(--muted);opacity:.75;text-align:right;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}.controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;max-width:calc(100vw - 24px);padding:10px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.watermark-inline{display:none}@media (max-width:640px){.watermark{display:none}.watermark-inline{display:inline;font-size:9px;letter-spacing:.06em;color:var(--muted-2)}.guide{top:10px;left:10px;right:10px;width:auto;max-height:calc(100dvh - 190px)}.controls{bottom:10px;gap:8px 12px;padding:9px 12px}}.intro{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 40px));text-align:center;color:var(--muted);line-height:1.6;pointer-events:none}.intro h1{color:var(--text);margin:0;font-size:26px}@media (max-width:640px){.intro{top:40%}.intro h1{font-size:21px}}.pane-select{background:rgba(255,255,255,.05);color:inherit;border:1px solid var(--border);border-radius:5px;padding:2px 4px;font:inherit;font-size:12px;min-width:86px}.pane-section>.pane-row{border-bottom:1px solid var(--row-line)}.pane-section>.pane-row:last-child{border-bottom:none}.pane-step{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border);border-radius:5px;width:20px;height:20px;line-height:1;font-size:13px}.pane-step:disabled{opacity:.4;cursor:default}.pane-chip{background:transparent;border:1px solid var(--border);border-radius:999px;padding:1px 7px;font-size:9px;letter-spacing:.04em}.pane-chip:disabled{cursor:default}.pane-range{width:72px;accent-color:var(--accent)}input[type=range]{height:24px}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.film-grade{transition:filter .24s ease}.film-grain,.film-vignette{position:absolute;inset:0;pointer-events:none}.film-vignette{background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.85) 100%)}.film-grain{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");mix-blend-mode:overlay}.safe-column{width:min(100%,calc(100dvh * 9 / 16))}.safe-column,.wordmark{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}.wordmark{bottom:18px;font-family:var(--font-display);font-size:15px;letter-spacing:.16em;color:var(--accent);opacity:.8;text-shadow:0 1px 6px rgba(0,0,0,.7)}.perf-exit{position:absolute;top:16px;right:16px;padding:7px 13px;border-radius:999px;background:rgba(20,20,23,.92);border:1px solid var(--border);color:var(--muted);font-size:11px;letter-spacing:.06em}.pane-swatches{display:inline-flex;gap:5px}.pane-swatch{width:15px;height:15px;border-radius:50%;border:1px solid var(--border);padding:0}.pane-swatch[aria-pressed=true]{outline:1px solid var(--text);outline-offset:2px}.pane-disclosure{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;padding:6px 8px;margin-top:4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}