html,body{margin:0;height:100%;overflow:hidden;background:#03050a}kbd{display:inline-block;min-width:1.5em;padding:0 5px;border:1px solid var(--rule-strong);border-bottom-width:2px;border-radius:5px;background:var(--card);font:600 11px var(--sans);text-align:center;color:var(--ink)}.practice{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 100%,#111a33,#03050a 60%);font-family:var(--sans)}.highway{display:block;width:clamp(300px,26vw,640px);max-width:92vw;height:100%;background:#05070d;box-shadow:0 0 0 1px #ffffff14,0 0 60px #2f6bff22}.hud{position:absolute;top:14px;left:16px;display:flex;flex-direction:column;gap:4px;color:#c9d3ee;font-size:12px;letter-spacing:.04em;pointer-events:none;font-variant-numeric:tabular-nums}.hud b{font-size:16px;color:#fff;margin-left:4px}.hud small{color:#8692b0;margin-left:6px}.hud-judges b{margin:0 6px 0 0}.corner{position:absolute;top:12px;right:14px;display:flex;gap:8px}.corner-button{width:38px;height:38px;border:1px solid #ffffff26;border-radius:10px;background:#0d1426cc;color:#e8eeff;font-size:18px;cursor:pointer}.corner-button:hover,.corner-button[aria-expanded=true]{background:#1b2a52}.settings{position:absolute;top:58px;right:14px;width:min(300px,calc(100vw - 28px));max-height:calc(100vh - 72px);overflow:auto;font-size:13px;box-shadow:0 12px 40px #0008}.settings .synb-button{padding:4px 9px;min-height:30px;font-size:12px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings .synb-input{min-height:32px;padding:4px 8px}.stat-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0}.stat-grid dt{color:var(--muted)}.stat-grid dd{margin:0;font-variant-numeric:tabular-nums}.small{font-size:11px;margin:0}.offset-strip{position:relative;height:26px;border-radius:var(--radius-inner);background:linear-gradient(90deg,#ff6b6b33,var(--paper) 35%,var(--paper) 65%,#ff6b6b33);overflow:hidden}.offset-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent)}.offset-dot{position:absolute;top:6px;width:6px;height:14px;margin-left:-3px;border-radius:3px;background:var(--ink)}.offset-label{position:absolute;bottom:1px;font-size:10px;color:var(--muted)}.offset-label.left{left:6px}.offset-label.right{right:6px}@media(max-width:720px){.hud{top:auto;bottom:120px}}.dist{position:absolute;left:16px;top:150px;width:min(250px,calc(50vw - 240px));min-width:210px;padding:12px;border:1px solid #ffffff1f;border-radius:12px;background:#0b1122d9;color:#c9d3ee;font-size:12px;font-variant-numeric:tabular-nums}.dist-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}.dist-windows{display:flex;gap:2px;padding:2px;border-radius:8px;background:#ffffff12}.dist-windows button{border:0;border-radius:6px;padding:2px 6px;background:transparent;color:#8692b0;font:600 11px var(--sans);cursor:pointer}.dist-windows button[aria-pressed=true]{background:#2f6bff;color:#fff}.dist-total{margin-left:auto;color:#fff;font-weight:700}.dist-lanes{display:grid;gap:5px}.dist-lane{display:grid;grid-template-columns:14px 1fr 54px 46px;align-items:center;gap:6px}.dist-key{font-weight:700;color:#fff;text-align:center}.dist-bar{height:10px;border-radius:5px;background:#ffffff10;overflow:hidden}.dist-bar span{display:block;height:100%;border-radius:5px;transition:width .2s}.dist-num small,.dist-hold{color:#8692b0}.dist-hold{text-align:right}.dist-sub{margin:12px 0 6px;color:#8692b0}.dist-hist{display:flex;align-items:flex-end;gap:4px;height:64px}.dist-hist.offsets{gap:2px;height:52px}.dist-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}.dist-col small{font-size:9px;color:#8692b0;line-height:1.3}.dist-col .dist-pct{color:#c9d3ee}.dist-col-bar{width:100%;min-height:1px;border-radius:3px 3px 0 0;transition:height .2s}.dist-col-bar.hold{background:#2f6bff}.dist-col-bar.max{background:#7ef0ff}.dist-col-bar.great{background:#ffe066}.dist-col-bar.good{background:#9be37c}.dist-col-bar.break{background:#ff6b6b}.dist-axis{display:flex;justify-content:space-between;margin-top:3px;font-size:9px;color:#8692b0}@media(max-width:900px){.dist{top:auto;bottom:12px;left:8px;width:200px;min-width:0}}.pattern{position:absolute;top:58px;right:14px;width:min(300px,calc(100vw - 28px));max-height:calc(100vh - 72px);overflow:auto;font-size:13px;box-shadow:0 12px 40px #0008}.settings.beside-pattern{right:calc(26px + min(300px,calc(100vw - 28px)))}.pattern-close{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}.pattern-list{display:flex;flex-wrap:wrap;gap:4px}.pattern-list button,.pattern-bars button{border:1px solid var(--rule-strong);border-radius:7px;padding:3px 8px;background:transparent;color:var(--ink);font:500 12px var(--sans);cursor:pointer}.pattern-list button[aria-checked=true],.pattern-bars button[aria-pressed=true]{border-color:#2f6bff;background:#2f6bff;color:#fff}.pattern-list button:disabled:not([aria-checked=true]),.pattern-bars button:disabled:not([aria-pressed=true]){opacity:.4;cursor:default}.pattern-bars{display:flex;gap:3px}.pattern-result{padding-top:10px;border-top:1px solid var(--rule)}.pattern-accuracy{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}.pattern-accuracy small{font-size:16px;color:#ffe066}.pattern-judges{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px}.corner-button.wide{width:auto;padding:0 12px;font-size:13px}@media(max-width:1100px){.settings.beside-pattern{right:14px;z-index:2}}.gear{position:relative;height:100%;flex-shrink:0}.scatter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(240px,76%);height:72px;pointer-events:none;border:1px solid #ffffff16;border-radius:8px;background:#05070da8;box-shadow:0 4px 16px #0003}
