@charset "UTF-8";
:root{color-scheme:dark;--bg:#080b10;--panel:#0d121a;--line:#202b3a;--dim:#607086;--text:#c8d4e3;--hi:#f0f5fb;--green:#33e395;--red:#ff5866;--blue:#77ccff;--amber:#ffb84f;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overflow:hidden}main{height:100vh;display:flex}.stage{flex:1;min-width:0;display:grid;place-items:center;padding:16px;position:relative}.stage canvas{display:block;max-width:100%;max-height:100%;aspect-ratio:1;border:1px solid var(--line);border-radius:14px;background:#090d12;box-shadow:0 25px 70px #0008}.session{position:absolute;top:26px;left:28px;padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:#0d121ad9;color:var(--dim);font-size:9px;letter-spacing:.08em}.session b{color:var(--text)}.paused{position:absolute;inset:16px;display:grid;place-items:center;background:#080b10aa;backdrop-filter:blur(2px);font-size:42px;font-weight:900;letter-spacing:.2em;color:var(--red);border-radius:14px}aside{width:380px;flex:0 0 380px;border-left:1px solid var(--line);padding:22px;overflow:auto;background:linear-gradient(#0b0f16,#080b10)}header{display:flex;justify-content:space-between;gap:10px;align-items:start}h1{font-size:20px;letter-spacing:.13em;margin:0;color:var(--hi)}h1 em{font-style:normal;color:var(--blue)}header p{font-size:10px;color:var(--dim);margin:6px 0 20px}.local{font-size:7px;letter-spacing:.12em;color:var(--green);border:1px solid #33e39544;border-radius:3px;padding:4px 6px}.policy-label,h2{display:block;font-size:8px;letter-spacing:.16em;color:var(--dim);margin:15px 0 7px}select{width:100%;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--hi);font:inherit;font-size:11px}.buttons{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:7px;margin-top:9px}button{padding:10px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text);font:inherit;font-size:9px;cursor:pointer}button:hover{border-color:#3a4b61;background:#121924}.buttons .accent{background:#183a31;color:#8df4c0;border-color:#2b805f}#status{display:flex;align-items:center;gap:7px;min-height:34px;color:var(--dim);font-size:9px}#status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #33e395}.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}.stats>div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 11px}.stats b{display:block;color:var(--hi);font-size:18px;font-variant-numeric:tabular-nums}.stats span{font-size:7px;text-transform:uppercase;color:var(--dim);letter-spacing:.11em}#chart{width:100%;height:70px;background:var(--panel);border:1px solid var(--line);border-radius:7px}#why{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px;min-height:51px;font-size:9px;line-height:1.65;color:#a7d5bf}.settings{display:grid;gap:7px;margin-top:12px;padding:11px;background:#0b1017;border:1px solid var(--line);border-radius:8px}.settings label{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:8px;color:var(--dim)}.settings output{color:var(--hi)}input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--green)}.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.lights div{border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:6px;text-align:center}.lights b{display:block;font-size:10px}.lights small{font-size:7px;color:var(--dim)}.results{position:absolute;z-index:3;right:400px;bottom:24px;width:390px;background:#0d121af2;border:1px solid #39506b;border-radius:10px;padding:14px;box-shadow:0 20px 60px #000}.results-head{display:flex;justify-content:space-between;align-items:center}.results-head h2{margin:0}.results-head button{padding:3px 7px;border:0;font-size:17px}table{width:100%;border-collapse:collapse;margin-top:10px;font-size:9px}th,td{padding:8px 5px;text-align:right;border-top:1px solid var(--line)}th:first-child,td:first-child{text-align:left}tbody tr:first-child{color:var(--green)}.results p{font-size:8px;color:var(--dim);margin:8px 0 0}.hint{font-size:8px;line-height:1.65;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}kbd{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:2px 4px;color:var(--text)}
@media(max-width:820px){body{overflow:auto}main{height:auto;min-height:100vh;display:block}.stage{padding:8px;width:100%;height:auto}.stage canvas{width:100%;max-height:none}.session{top:17px;left:17px}.paused{inset:8px}aside{width:100%;border-left:0;border-top:1px solid var(--line);padding:16px 16px 80px}.results{position:fixed;left:12px;right:12px;bottom:12px;width:auto}.stats{grid-template-columns:repeat(4,1fr)}.stats>div{padding:8px}.stats b{font-size:14px}}

/* 16x overdrive */
.buttons{grid-template-columns:.8fr 1.05fr .8fr 1.25fr}.buttons button{padding-inline:5px}#speed.fast{color:var(--amber);border-color:#ffb84f66;background:#312615}.dopagaki{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);text-align:center;pointer-events:none;filter:drop-shadow(8px 8px 0 #071018);animation:dopaIntro 1.8s both}.dopagaki span,.dopagaki em{display:block;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.24em;color:#fff;background:#ff176f;padding:5px 10px}.dopagaki b{display:block;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(52px,7vw,100px);font-style:italic;line-height:.8;letter-spacing:-.02em;color:#fff300;text-shadow:4px 0 #ff176f,-4px 0 #00f7ff,0 6px #471255;margin:9px 0}.dopagaki em{background:#00bccc;color:#071018}.dopagaki-on .stage:before{content:"";position:absolute;z-index:4;inset:16px;border-radius:14px;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,#fff 6px 7px);mix-blend-mode:overlay;opacity:.1;animation:dopaScan .35s linear infinite}.dopagaki-on .stage:after{content:"";position:absolute;z-index:3;inset:16px;border-radius:14px;pointer-events:none;box-shadow:inset 0 0 80px #ff176f,0 0 35px #00f7ff;animation:dopaFlash .32s steps(2) infinite}.dopagaki-on #city{animation:dopaShake .12s steps(2) infinite}.dopagaki-on aside{border-left-color:#ff176f;background:linear-gradient(160deg,#100a1d,#07161b)}.dopagaki-on h1{animation:dopaColor .35s linear infinite}.dopagaki-on #status i{background:#fff300;box-shadow:0 0 16px #ff176f}.dopagaki-on #speed{animation:dopaButton .28s steps(2) infinite}
@keyframes dopaIntro{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.4)}12%{opacity:1;transform:translate(-50%,-50%) rotate(3deg) scale(.88)}22%,72%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) rotate(-4deg) scale(1.08)}}@keyframes dopaShake{0%{transform:translate(-2px,1px) skewX(-.15deg)}50%{transform:translate(2px,-1px) skewX(.15deg)}100%{transform:translate(-1px,-2px)}}@keyframes dopaFlash{0%{opacity:.45;filter:hue-rotate(0)}100%{opacity:.8;filter:hue-rotate(100deg)}}@keyframes dopaScan{to{background-position:0 14px}}@keyframes dopaColor{0%{color:#00f7ff}50%{color:#fff300}100%{color:#ff176f}}@keyframes dopaButton{0%{background:#ff176f;color:#fff}100%{background:#fff300;color:#071018}}
@media(max-width:820px){.buttons{grid-template-columns:1fr 1fr}.dopagaki-on .stage:before,.dopagaki-on .stage:after{inset:8px}.dopagaki{top:46%}}
@media(prefers-reduced-motion:reduce){.dopagaki{display:none!important}.dopagaki-on #city,.dopagaki-on .stage:before,.dopagaki-on .stage:after,.dopagaki-on h1,.dopagaki-on #speed{animation:none!important}}

/* restrained 16x treatment */
.dopagaki{top:18%;filter:drop-shadow(3px 3px 0 #071018);animation:dopaIntroSoft 1.4s both}.dopagaki span,.dopagaki em{font-size:7px;letter-spacing:.18em;padding:4px 8px}.dopagaki b{font-size:clamp(30px,4vw,55px);line-height:.88;text-shadow:2px 0 #ff176f,-2px 0 #00bccc,0 3px #471255;margin:6px 0}.dopagaki-on .stage:before{display:none}.dopagaki-on .stage:after{animation:none;opacity:1;box-shadow:inset 0 0 34px #ff176f38,0 0 12px #00f7ff2b}.dopagaki-on #city,.dopagaki-on h1,.dopagaki-on #speed{animation:none}.dopagaki-on #speed{background:#312615;color:var(--amber);border-color:#ffb84f66}
@keyframes dopaIntroSoft{0%{opacity:0;transform:translate(-50%,-8px) rotate(-2deg)}18%,72%{opacity:1;transform:translate(-50%,0) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-6px) rotate(-2deg)}}

/* history time range */
#chart{height:82px}.chart-head{display:flex;align-items:end;justify-content:space-between;margin-top:15px}.chart-head h2{margin:0 0 7px}.chart-head label{display:flex;align-items:center;gap:6px;margin-bottom:5px;color:var(--dim);font-size:7px}.chart-head select{width:auto;padding:3px 20px 3px 6px;border-radius:4px;font-size:8px}