:root{--bg: #0b0d12;--bg-elev: #141823;--fg: #e9ecf2;--fg-dim: #8a93a6;--accent: #7c5cff;--accent-2: #19d3a2;--perfect: #7c5cff;--great: #22c55e;--good: #f1c40f;--ok: #f97316;--miss: #e74c3c;--radius: 14px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;height:100dvh;margin:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:radial-gradient(circle at 30% 0%,#1c1f2f,var(--bg) 60%);color:var(--fg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}button{font:inherit;color:inherit}.app{min-height:100dvh;display:flex;flex-direction:column;padding:clamp(10px,2.5vh,24px);gap:0;overflow:hidden}.app__screen-wrap{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,24px);overflow-y:auto}.footer{flex-shrink:0;text-align:center;font-size:12px;color:var(--fg-dim);letter-spacing:.08em;text-transform:lowercase;padding-top:10px}.screen{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}.title{margin:0;font-size:clamp(48px,12vw,84px);font-weight:800;letter-spacing:-.04em}.title__accent{color:var(--accent)}.subtitle{font-size:22px;font-weight:600;margin:0}.tagline{font-size:18px;color:var(--fg-dim);margin:-8px 0 8px}.hint{color:var(--fg-dim);font-size:13px;margin-top:4px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.12);background:var(--bg-elev);color:var(--fg);padding:12px 22px;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:transform 80ms ease,background .12s ease,border-color .12s ease}@media (hover: hover){.btn:hover{background:#1b2030;border-color:#fff3}}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--accent),#5a3fe0);border-color:transparent;box-shadow:var(--shadow)}@media (hover: hover){.btn--primary:hover{background:linear-gradient(135deg,#8c70ff,#6a4fff)}}.btn--lg{padding:16px 28px;font-size:18px}.btn--small{padding:8px 12px;font-size:13px}.btn--daily{border-color:#19d3a280;color:var(--accent-2);margin-top:4px}.btn--daily.btn--done{border-color:#ffffff1f;color:var(--fg-dim)}.toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;padding:8px 4px;cursor:pointer;color:var(--fg-dim);font-size:13px;margin-top:6px}.toggle__indicator{width:34px;height:20px;border-radius:999px;background:#ffffff1a;position:relative;transition:background .12s ease}.toggle__indicator:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg-dim);transition:transform .12s ease,background .12s ease}.toggle--on .toggle__indicator{background:#19d3a259}.toggle--on .toggle__indicator:after{transform:translate(14px);background:var(--accent-2)}.toggle--on .toggle__label{color:var(--fg)}.toggle--disabled,.toggle[disabled]{opacity:.4;cursor:not-allowed}.picker-grid{display:flex;flex-direction:column;gap:8px;width:100%}.picker-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.1);background:var(--bg-elev);border-radius:var(--radius);padding:10px 14px;text-align:left;display:flex;flex-direction:row;align-items:center;gap:12px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}@media (hover: hover){.picker-card:hover{transform:translateY(-2px);border-color:#7c5cff99;background:#1a1f30}}.picker-card__primary{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.picker-card__label{font-size:18px;font-weight:700}.picker-card__blurb{color:var(--fg-dim);font-size:12px}.picker-card__stats{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;font-size:11px;line-height:1.3;color:var(--fg-dim)}.picker-card__best{font-size:13px;font-weight:600;color:var(--accent-2)}.picker-card__avg{font-size:12px;color:var(--fg)}.picker-card__sub{font-size:11px;color:var(--fg-dim)}.picker-card__no-best{font-style:italic;color:var(--fg-dim)}.btn--clear-stats{margin-top:8px;color:var(--fg-dim);border-color:#ffffff0f}.game-meta{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:360px}.game-meta__chip{background:var(--bg-elev);border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim)}.game-meta__phase{font-size:13px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.1em}.game-help{color:var(--fg-dim);font-size:14px;min-height:20px}.tap-target{--pulse: 0;position:relative;width:min(70vw,48dvh,320px);aspect-ratio:1 / 1;border-radius:50%;border:0;background:radial-gradient(circle at 30% 30%,#232a3f,#11141d 70%);box-shadow:inset 0 0 0 1px #ffffff0f,0 20px 60px #00000080;cursor:pointer;display:grid;place-items:center;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform 60ms ease}.tap-target:active{transform:scale(.98)}.tap-target:disabled{cursor:default;opacity:.85}.tap-target__ring{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:50%;border:2px solid rgba(124,92,255,calc(.25 + var(--pulse) * .65));box-shadow:0 0 calc(20px + var(--pulse) * 60px) rgba(124,92,255,calc(var(--pulse) * .6));transition:border-color 80ms linear;pointer-events:none}.tap-target--echoing .tap-target__ring{border-color:rgba(25,211,162,calc(.4 + var(--pulse) * .5));box-shadow:0 0 calc(15px + var(--pulse) * 40px) #19d3a280}.tap-target--listening .tap-target__ring{border-color:rgba(124,92,255,calc(.25 + var(--pulse) * .7))}.tap-target--countdown .tap-target__ring{border-color:rgba(241,196,15,calc(.25 + var(--pulse) * .55))}.tap-target__flash{--flash-intensity: 0;--flash-color: transparent;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;opacity:var(--flash-intensity);background:radial-gradient(circle at center,var(--flash-color) 0%,transparent 65%);box-shadow:0 0 calc(40px * var(--flash-intensity)) var(--flash-color) inset}.tap-target__label-stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px}.tap-target__label{font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--fg)}.tap-target__sublabel{font-size:13px;font-weight:500;color:var(--fg-dim);letter-spacing:.04em;min-height:16px}.score-headline{display:flex;flex-direction:column;align-items:center;gap:4px}.score-headline__number{font-size:72px;font-weight:800;line-height:1;letter-spacing:-.03em}.score-headline__label{color:var(--fg-dim);font-size:16px}.score-headline__tempo{color:var(--fg-dim);font-size:13px;margin-top:2px;text-transform:uppercase;letter-spacing:.08em}.score-headline__badge{margin-top:6px;background:linear-gradient(135deg,var(--accent-2),#11a37e);color:#042418;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.judgment-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:320px}.dot{width:14px;height:14px;border-radius:50%;background:var(--fg-dim)}.dot--perfect{background:var(--perfect)}.dot--great{background:var(--great)}.dot--good{background:var(--good)}.dot--ok{background:var(--ok)}.dot--miss{background:var(--miss);opacity:.6}.judgment-summary{display:flex;gap:6px;width:100%;max-width:440px;justify-content:center}.tally{background:var(--bg-elev);border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;border:1px solid rgba(255,255,255,.06);flex:1 1 0;min-width:0}.tally__n{font-size:18px;font-weight:700}.tally__label{font-size:10px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em}.tally--perfect .tally__n{color:var(--perfect)}.tally--great .tally__n{color:var(--great)}.tally--good .tally__n{color:var(--good)}.tally--ok .tally__n{color:var(--ok)}.tally--miss .tally__n{color:var(--miss)}.score-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.daily-date{color:var(--fg-dim);font-size:13px;text-transform:uppercase;letter-spacing:.1em}.daily-note{color:var(--fg-dim);margin:0}.share-box{display:flex;align-items:center;gap:8px;background:var(--bg-elev);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 8px 8px 14px;max-width:100%}.share-box__text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;background:var(--bg-elev);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:14px 16px;overflow:hidden}.timeline__row{display:flex;align-items:center;gap:10px}.timeline__label{flex:0 0 56px;font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.1em}.timeline__track{position:relative;flex:1;height:18px;border-radius:9px;background:#ffffff0d;border:1px solid rgba(255,255,255,.04)}.timeline__track--expected{background:#ffffff0a}.timeline__track--actual{background:#7c5cff0f}.timeline-dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000059}.timeline-dot--expected{background:#c7cad6}.timeline-dot--perfect{background:var(--perfect)}.timeline-dot--great{background:var(--great)}.timeline-dot--good{background:var(--good)}.timeline-dot--ok{background:var(--ok)}.timeline-dot--miss{background:var(--miss);opacity:.7}.timeline__track--corrected{background:#ffffff08;height:14px;border-radius:7px}.timeline-dot--animated{transition:left 1125ms cubic-bezier(.4,0,.2,1);cursor:pointer}.timeline-dot--selected{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}.timeline__tap-popover{display:inline-flex;align-items:center;gap:8px;background:var(--bg-elev);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--fg);margin-top:4px}.timeline__tap-popover-tier{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:10px;padding:2px 6px;border-radius:999px;color:#0b0d12}.timeline__tap-popover-tier--perfect{background:var(--perfect);color:#fff}.timeline__tap-popover-tier--great{background:var(--great)}.timeline__tap-popover-tier--good{background:var(--good)}.timeline__tap-popover-tier--ok{background:var(--ok)}.timeline__tap-popover-tier--miss{background:var(--miss);color:#fff}.timeline__tap-popover-mode{color:var(--fg-dim);font-size:11px}.timeline__reveal{margin-bottom:4px;align-self:center}.practice{display:flex;flex-direction:column;gap:6px;width:100%;max-width:560px;background:#141823d9;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:12px 14px}.practice__row{display:flex;align-items:center;gap:10px}.practice__label{flex:0 0 56px;font-size:10px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.1em}.practice__track{position:relative;flex:1;height:22px;border-radius:11px;background:#ffffff0a;border:1px solid rgba(255,255,255,.04);overflow:hidden}.practice__track--actual{background:#7c5cff0f}.practice__cursor{position:absolute;top:0;bottom:0;width:2px;background:#fff9;box-shadow:0 0 8px #fff9;transform:translate(-1px);pointer-events:none;opacity:0;transition:opacity .12s ease}.practice-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0006}.practice-dot--expected{background:#c7cad6}.practice-dot--perfect{background:var(--perfect)}.practice-dot--great{background:var(--great)}.practice-dot--good{background:var(--good)}.practice-dot--ok{background:var(--ok)}.practice-dot--miss{background:var(--miss);opacity:.7}.score-headline__badge--practice{background:linear-gradient(135deg,#f1c40f,#c89c0d);color:#2a1f00}.score-headline__badge--improved{background:linear-gradient(135deg,#2ecc71,#1f9c5a);color:#062a14}.score-headline__badge-sub{font-weight:500;opacity:.8}.subscores{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px;position:relative}.subscore{position:relative;background:var(--bg-elev);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:12px 14px 10px;display:flex;flex-direction:column;align-items:center;gap:2px}.subscore__value{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em}.subscore__label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}.subscore__sub{font-size:12px;color:var(--fg-dim);margin-top:2px}.subscore__info{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:#ffffff14;color:var(--fg-dim);border:none;font-size:11px;font-weight:700;font-style:italic;font-family:serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}@media (hover: hover){.subscore__info:hover{background:#ffffff29;color:var(--fg)}}.subscores__popover{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-elev);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.4;color:var(--fg);text-align:left;z-index:10;box-shadow:var(--shadow)}.subscores__popover-title{display:block;margin-bottom:4px;font-weight:600;color:var(--fg)}.settings{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;max-width:360px}.settings__trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--fg-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;letter-spacing:.06em;padding:4px 8px;align-self:center}@media (hover: hover){.settings__trigger:hover{color:var(--fg)}}.settings__gear{display:inline-block;transition:transform .2s ease;font-size:14px}.settings__trigger[aria-expanded=true] .settings__gear{transform:rotate(60deg);color:var(--accent-2)}.settings__panel{display:flex;flex-direction:column;gap:4px;background:#141823b3;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:8px}.setting-row{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;text-align:left;width:100%}@media (hover: hover){.setting-row:hover:not(:disabled){background:#ffffff0a}}.setting-row:disabled,.setting-row--disabled{opacity:.45;cursor:not-allowed}.setting-row__text{display:flex;flex-direction:column;gap:1px;min-width:0}.setting-row__label{font-size:14px;font-weight:500}.setting-row__hint{font-size:11px;color:var(--fg-dim)}.setting-row__switch{width:36px;height:20px;border-radius:999px;background:#ffffff1a;position:relative;flex-shrink:0;transition:background .12s ease}.setting-row__knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg-dim);transition:transform .12s ease,background .12s ease}.setting-row--on .setting-row__switch{background:#19d3a259}.setting-row--on .setting-row__knob{transform:translate(16px);background:var(--accent-2)}.setting-row--dropdown{cursor:default}.setting-row__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff14;color:var(--fg);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 22px 4px 10px;font:inherit;font-size:13px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%),linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.setting-row__select:disabled{opacity:.55;cursor:not-allowed}@media (hover: hover){.setting-row__select:hover:not(:disabled){border-color:#fff3}}.settings__clear{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid rgba(231,76,60,.35);color:#e74c3c;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:13px;margin-top:4px}@media (hover: hover){.settings__clear:hover{background:#e74c3c14}}.screen--archive{width:100%;max-width:460px}.archive-note{font-size:12px;text-align:center;margin-top:6px}.archive-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}.archive-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg-elev);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 14px;color:var(--fg);text-align:left;cursor:pointer;font:inherit}.archive-row--played{border-color:#ffffff24}@media (hover: hover){.archive-row:hover{background:#ffffff0a}}.archive-row__date{display:flex;flex-direction:column;gap:2px}.archive-row__day{font-size:14px;font-weight:600}.archive-row__iso{font-size:11px;color:var(--fg-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.archive-row__score{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.archive-row__total{font-size:18px;font-weight:800;letter-spacing:-.01em}.archive-row__sub{font-size:11px;color:var(--fg-dim)}.archive-row__cta{font-size:12px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em}.btn--secondary{background:#ffffff0a;border:1px solid rgba(255,255,255,.1)}.rank-box{width:100%;max-width:360px;background:var(--bg-elev);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:8px}.rank-box--placeholder{text-align:center;color:var(--fg-dim);font-size:13px;padding:14px}.rank-box__header{display:flex;justify-content:space-between;align-items:baseline}.rank-box__rank{display:flex;align-items:baseline;gap:4px}.rank-box__pos{font-size:22px;font-weight:800;letter-spacing:-.01em}.rank-box__total{font-size:14px;color:var(--fg-dim)}.rank-box__pct{font-size:12px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em}.dist-chart{display:block;width:100%;height:64px;overflow:visible}.dist-chart__area{fill:#58c5ff2e;stroke:none}.dist-chart__line{fill:none;stroke:#58c5ffd9;stroke-width:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dist-chart__highlight-line{stroke:#fff9;stroke-width:.4;stroke-dasharray:1 1;vector-effect:non-scaling-stroke}.dist-chart__highlight-dot{fill:#fff;stroke:#58c5ff;stroke-width:.4;vector-effect:non-scaling-stroke}.rank-box__axis{display:flex;justify-content:space-between;font-size:10px;color:var(--fg-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.daily-meta{display:flex;align-items:center;gap:10px;justify-content:center}.daily-difficulty{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--fg)}.daily-difficulty--medium{background:#58c5ff24;border-color:#58c5ff66;color:#aedcff}.daily-difficulty--hard{background:#e74c3c26;border-color:#e74c3c66;color:#ffb4ad}.daily-difficulty--tiny{font-size:9px;padding:2px 6px;letter-spacing:.08em;margin-top:2px;align-self:flex-start}.listen-again{margin-top:4px;border-color:#ffffff2e;color:var(--fg-dim)}