:root{--ink: #12304f;--ink-soft: rgba(18, 48, 79, .72);--glass: rgba(255, 255, 255, .62);--glass-strong: rgba(255, 255, 255, .86);--line: rgba(255, 255, 255, .9);--accent: #1f5fbf;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--ink);background:#86b9ee;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}.app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}.stage{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;outline:none}.stage:focus-visible{box-shadow:inset 0 0 0 3px #1f5fbf8c}.scene-canvas,.overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.overlay{pointer-events:none;overflow:visible}.ruler-line{stroke:var(--line);stroke-width:1.5}.tick line{stroke:var(--line);stroke-width:1}.ruler-line,.tick line{filter:drop-shadow(0 0 1px rgba(18,48,79,.45))}.tick text{fill:#fff;font-size:11px;letter-spacing:.04em;paint-order:stroke;stroke:#12304f80;stroke-width:3px;stroke-linejoin:round}.tick.active text{font-weight:700}.tick.active line{stroke-width:2}.guide{stroke:#ffffffb3;stroke-width:1;stroke-dasharray:3 4}.marker{fill:#fff;stroke:var(--accent);stroke-width:2}.cursor{fill:#ffffff40;stroke:#fff;stroke-width:1.5}.chip rect{fill:var(--glass-strong);stroke:#12304f1f}.chip text{fill:var(--ink);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.02em}.hint{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);margin:0;padding:.55rem 1.1rem;border-radius:999px;background:var(--glass);color:var(--ink);font-size:.9rem;letter-spacing:.02em;pointer-events:none;white-space:nowrap;animation:breathe 2.6s ease-in-out infinite}@keyframes breathe{50%{opacity:.55}}.topbar{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:1rem 1.25rem;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:baseline;gap:.6rem;min-width:0;color:#fff}.brand h1{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.01em}.sub{font-size:.8rem;opacity:.85}.controls{display:flex;align-items:center;gap:.6rem;min-width:0}.scenes{display:flex;padding:3px;border-radius:999px;background:var(--glass)}button{font:inherit;color:inherit;border:0;cursor:pointer}.scenes button{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .9rem;border-radius:999px;background:transparent;font-size:.85rem}.scenes button[aria-pressed=true]{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 1px 3px #12304f26}.key{font-size:.7rem;opacity:.55}.mute{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;border-radius:999px;background:var(--glass);font-size:.85rem}.mute svg path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.mute[aria-pressed=true]{background:var(--ink);color:#fff}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.howto{position:absolute;left:50%;bottom:1rem;transform:translate(-50%);width:min(46rem,calc(100% - 2rem));margin:0;padding:.5rem .9rem;border-radius:12px;background:#ffffff80;color:var(--ink-soft);font-size:.8rem;line-height:1.4;text-align:center;pointer-events:none}@media(max-width:559px){.topbar{padding:.75rem}.sub{display:none}.controls{width:100%;justify-content:space-between}.scenes button{padding:.4rem .7rem}.howto{bottom:.6rem;font-size:.72rem}}@media(prefers-reduced-motion:reduce){.hint{animation:none}}