:root{--page:#eceff3;--ink:#181c22;--muted:#5c626c;--line:#181c2224;--accent:#d65416;--panel:#fffffff0;color:var(--ink);font:14px/1.45 Segoe UI,Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--page);height:100%;margin:0;overflow:hidden}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stage{position:fixed;inset:0}#map{touch-action:none;cursor:grab;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}#map:active{cursor:grabbing}.title{pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#eceff3db;border-radius:14px;min-width:318px;padding:12px 18px 14px;position:absolute;top:14px;left:16px;box-shadow:0 0 14px 6px #eceff3db}.kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-size:12px;font-weight:600}.title h1{letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums;margin:2px 0 0 -2px;font-size:38px;font-weight:300;line-height:1.15}.state{color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;min-height:1.45em;margin:4px 0 0;font-size:15px}.state.quiet{color:var(--muted)}.state span+span:not(:empty):before{content:"  ·  ";white-space:pre}.menu-button{background:var(--panel);width:40px;height:40px;box-shadow:0 0 0 1px var(--line);border-radius:50%;place-content:center;gap:4px;display:grid;position:absolute;top:20px;right:22px}.menu-button span{background:var(--ink);width:16px;height:1.5px;transition:transform .2s,opacity .2s;display:block}.menu-button[aria-expanded=true] span:first-child{transform:translateY(5.5px)rotate(45deg)}.menu-button[aria-expanded=true] span:nth-child(2){opacity:0}.menu-button[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px)rotate(-45deg)}.menu{background:var(--panel);width:248px;max-height:calc(100% - 160px);box-shadow:0 0 0 1px var(--line), 0 12px 32px #181c221f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;padding:6px 18px 12px;position:absolute;top:70px;right:22px;overflow:auto}.menu section+section{border-top:1px solid var(--line)}.menu h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;font-size:11px;font-weight:600}.menu .list{margin:0 -8px 10px;display:grid}.menu .list button{text-align:left;border-radius:6px;padding:6px 8px}.menu .list button:hover{background:#181c220f}.menu .list button[aria-pressed=true]{color:var(--accent);font-weight:600}.menu .row{gap:6px;margin-bottom:12px;display:flex}.menu .row button{box-shadow:inset 0 0 0 1px var(--line);border-radius:6px;flex:1;padding:5px 0}.menu .row button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}.menu .small{color:var(--muted);margin:10px 0 0;font-size:12px}.bar{background:linear-gradient(#eceff300, var(--page) 55%);align-items:center;gap:20px;height:72px;padding:0 28px 8px;display:flex;position:absolute;bottom:0;left:0;right:0}.play{background:var(--ink);border-radius:50%;flex:none;place-items:center;width:40px;height:40px;display:grid}.play svg{fill:#fff;width:14px;height:14px}.scrub{flex:1;height:44px;position:relative}.track{background:#181c2229;border-radius:2px;height:4px;position:absolute;top:14px;left:0;right:0;overflow:hidden}.fill{transform-origin:0;will-change:transform;background:var(--accent);position:absolute;inset:0;transform:scaleX(0)}#time{appearance:none;cursor:pointer;background:0 0;width:calc(100% + 16px);height:32px;margin:0;position:absolute;top:0;left:-8px}#time::-webkit-slider-runnable-track{background:0 0;height:32px}#time::-moz-range-track{background:0 0;height:32px}#time::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--ink);background:#fff;border-radius:50%;width:16px;height:16px;margin-top:8px;box-shadow:0 1px 4px #0003}#time::-moz-range-thumb{border:2px solid var(--ink);background:#fff;border-radius:50%;width:12px;height:12px}.ticks{height:16px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;position:absolute;top:26px;left:0;right:0}.ticks span{white-space:nowrap;position:absolute;translate:-50%}.ticks span.mark{color:var(--accent);font-weight:600}.status{text-align:center;max-width:46ch;color:var(--muted);margin:0;position:absolute;top:50%;left:50%;translate:-50% -50%}.status:empty{display:none}.status.error{color:#9b2c1b}@media (max-width:640px){.title{min-width:226px;padding:10px 12px;top:8px;left:8px}.title h1{font-size:26px}.kicker{font-size:10px}.state{font-size:13px}.menu-button{top:12px;right:14px}.menu{top:60px;right:14px}.bar{gap:12px;padding:0 16px 6px}.ticks span.minor{display:none}}.compact .title{min-width:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;padding:6px 10px 7px;top:4px;left:6px}.compact .kicker{display:none}.compact .title h1{margin-left:-1px;font-size:20px;font-weight:400}.compact .state{margin-top:1px;font-size:12px}.compact .menu-button{width:32px;height:32px;top:10px;right:10px}.compact .bar{gap:12px;height:50px;padding:0 14px 2px}.compact .play{width:30px;height:30px}.compact .play svg{width:11px;height:11px}.compact .ticks{font-size:10px}.expand-button{background:var(--panel);width:40px;height:40px;box-shadow:0 0 0 1px var(--line);border-radius:50%;place-items:center;display:grid;position:absolute;top:70px;right:22px}.expand-button svg{fill:none;width:16px;height:16px;stroke:var(--ink);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.compact .expand-button{width:32px;height:32px;top:48px;right:10px}.compact .expand-button svg{width:13px;height:13px}.compact .menu{max-height:calc(100% - 144px);top:88px;right:10px}.embed:not(.compact) .menu{max-height:calc(100% - 210px);top:120px}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
