:root{--paper: #f2efe8;--card: #fdfbf4;--card-2: #f7f4ec;--ink: #17140f;--ink-soft: rgba(23, 20, 15, .66);--ink-faint: rgba(23, 20, 15, .42);--red: #e8382a;--red-deep: #c2281c;--red-tint: rgba(232, 56, 42, .08);--green: #2fa565;--amber: #e79c14;--orange: #e06d1f;--radius: 16px;--pill: 999px;--bw: 3px;--font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--display: "Archivo Black", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;--shadow: 4px 4px 0 var(--ink);--shadow-sm: 3px 3px 0 var(--ink);--shadow-lg: 7px 7px 0 var(--ink)}*{box-sizing:border-box}html{background:var(--paper);background-image:radial-gradient(rgba(23,20,15,.055) 1px,transparent 1px);background-size:22px 22px}html,body{margin:0;padding:0;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}::selection{background:var(--red);color:var(--paper)}body:before{content:"";position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:-1;pointer-events:none;background-repeat:repeat-x;background-image:radial-gradient(circle 22px at 40px 78%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 12px at 120px 58%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 30px at 200px 88%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 16px at 290px 66%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 34px at 360px 74%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 14px at 450px 92%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 26px at 520px 60%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 10px at 600px 82%,rgba(23,20,15,.05) 99%,transparent 100%),radial-gradient(circle 40px at 668px 70%,rgba(23,20,15,.05) 99%,transparent 100%);background-size:760px 100%;animation:bubble-drift 90s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}@keyframes bubble-drift{to{background-position:760px 0}}@media(prefers-reduced-motion:reduce){body:before{animation:none}}.page{max-width:620px;margin:0 auto;padding:0 22px 20vh}.hero-card{background:#f1f0f4;border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--shadow-lg);overflow:hidden}.page-logo{display:block;width:min(320px,86%);margin:6px auto 0;-webkit-user-select:none;user-select:none}.hero-copy{padding:2px 24px 24px}.hero-copy p{margin:0 0 12px}.hero-copy p:last-child{margin-bottom:0}.rule-bar{position:relative;height:18px;border:2px solid var(--ink);border-radius:6px;background:var(--card);overflow:hidden;margin:-4px 0 14px}.rule-bar-fill{height:100%;background:var(--red);border-right:2px solid var(--ink)}.rule-bar-label{position:absolute;top:50%;right:8px;transform:translateY(-50%);font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-faint)}.page-icon{width:76px;height:76px;display:grid;place-items:center;font-size:36px;margin-top:72px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none}.page-title{font-family:var(--display);font-size:42px;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;margin:26px 0 8px;color:var(--ink);text-align:center}.page-sub{color:var(--ink-soft);font-size:17px;margin:0 0 24px;text-align:center}.step-title{font-family:var(--display);font-size:24px;font-weight:400;text-transform:uppercase;letter-spacing:.01em;margin:24px 0 4px}.callout{display:flex;gap:14px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:18px 20px;margin:16px 0;box-shadow:var(--shadow)}.callout .emoji{font-size:22px;line-height:1.4}.callout p{margin:0}.callout.rules{margin-top:28px}.callout.rules p{margin:0 0 10px}.callout.rules p:last-child{margin-bottom:0}.rank-row{display:flex;flex-wrap:wrap;gap:8px 10px;margin:4px 0 12px}.btn{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);border-radius:10px;padding:9px 20px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s,background .12s;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow)}.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:var(--shadow-sm)}.btn.primary{background:var(--red);color:var(--paper)}.btn.primary:hover{background:var(--red-deep)}.btn.big{font-size:17px;padding:13px 30px}.btn.block{display:block;width:100%}.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft);font-weight:600;text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--red);text-underline-offset:4px}.btn.ghost:hover{color:var(--red-deep);transform:none;box-shadow:none}.btn.ghost:active{transform:none}.btn.small{font-size:13px;padding:6px 12px}.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--pill);padding:3px 11px;white-space:nowrap;color:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.tag.green{background:var(--red)}.tag.yellow{background:#ad2318}.tag.orange{background:#6e150c}.tag.red,.tag.purple{background:var(--ink)}.tune-points{text-align:center;font-family:var(--display);font-size:76px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:14px 0 0;line-height:1.05;color:var(--ink);text-shadow:3px 3px 0 rgba(232,56,42,.25)}.tune-points span{font-size:17px;font-family:var(--font);font-weight:700;color:var(--ink-faint);text-shadow:none}.tune-points.draining{animation:drain-pulse .9s ease-in-out infinite;color:var(--red);text-shadow:3px 3px 0 rgba(23,20,15,.9)}@keyframes drain-pulse{0%,to{opacity:1}50%{opacity:.55}}.decay-graph{display:block;width:100%;height:64px;margin:12px 0 0}.decay-graph .axis{stroke:#17140f40;stroke-width:2}.decay-graph .area{fill:#e8382a1f;stroke:none}.decay-graph .curve{fill:none;stroke:var(--ink);stroke-width:2.5}.decay-graph .cursor{stroke:var(--red);stroke-width:2;stroke-dasharray:3 3}.decay-graph .dot{fill:var(--red);stroke:var(--ink);stroke-width:2}.total-bar{position:fixed;bottom:14px;left:50%;transform:translate(-50%);width:min(576px,calc(100% - 44px));z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:12px 18px}.total-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}.total-value{font-family:var(--display);font-size:22px;color:var(--ink)}.total-value span{font-family:var(--font);font-size:13px;font-weight:700;color:var(--ink-faint)}.board{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-top:20px}.board-head{font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:8px 16px}.board-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:2px solid rgba(23,20,15,.1)}.board-row:last-child{border-bottom:none}.board-row.me{background:var(--red-tint);font-weight:700}.board-rank{width:36px;font-weight:700;color:var(--ink-faint)}.board-name{flex:1}.board-you{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--paper);background:var(--red);border-radius:var(--pill);padding:2px 8px;margin-left:8px}.board-pts{font-variant-numeric:tabular-nums;font-weight:700}.board-row.missed{color:var(--ink-faint)}.board-row.missed .board-rank{color:var(--red-deep)}.recap-meta{display:block;font-size:11px;color:var(--ink-faint)}.aux-player{margin:22px 0 6px}.aux-cassette{font:inherit;font-size:34px;display:block;width:100%;height:84px;border-radius:20px;background:var(--red);color:var(--paper);border:var(--bw) solid var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .08s,box-shadow .08s,background .12s}.aux-cassette:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.aux-cassette:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.note-bar{height:24px;background:var(--card);border:2px solid var(--ink);border-radius:8px;margin-top:10px;position:relative;overflow:hidden}.note-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ctext x='6' y='32' font-size='16' fill='%23e8382a'%3E%E2%99%AA%3C/text%3E%3Ctext x='27' y='15' font-size='13' fill='%23e8382a'%3E%E2%99%AB%3C/text%3E%3C/svg%3E");background-size:46px 46px;background-repeat:repeat;opacity:0;transition:opacity .8s ease;animation:notes-rise 1.5s linear infinite}.note-bar.live:before{opacity:1}@keyframes notes-rise{to{background-position:0 -46px}}@media(prefers-reduced-motion:reduce){.note-bar:before{animation:none}}.option{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:15px 18px;margin:12px 0;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s,background .12s}.option:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow);background:var(--red-tint)}.option:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.option .key{flex:none;width:28px;height:28px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--paper);background:var(--ink);border-radius:50%}.option.aux-correct{background:#2fa56529}.option.aux-wrong{background:var(--red-tint)}.guess-note{width:100%;text-align:center;color:var(--ink-faint);font-size:13px;margin:16px 0 6px}.login-field{margin:20px 0}.login-label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}.login-note{color:var(--ink-soft);font-size:13px;margin:8px 0 0}.input{width:100%;font:inherit;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 16px;outline:none;box-shadow:var(--shadow-sm);transition:box-shadow .12s,border-color .12s}.input::placeholder{color:var(--ink-faint)}.input:focus{border-color:var(--red);box-shadow:3px 3px 0 var(--red)}.tune-search{position:relative;margin-top:16px}.tune-results{margin-top:8px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;max-height:290px;overflow-y:auto;position:relative;z-index:5}.tune-result{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--ink);background:none;border:none;border-bottom:2px solid rgba(23,20,15,.12);padding:10px 14px;cursor:pointer}.tune-result:hover{background:var(--red-tint)}.tune-result:last-child{border-bottom:none}.tune-thumb{width:34px;height:34px;flex:none;border-radius:6px;object-fit:cover;border:2px solid var(--ink)}.tune-cover{width:88px;height:88px;flex:none;border-radius:12px;object-fit:cover;border:var(--bw) solid var(--ink);box-shadow:var(--shadow)}.admin-card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;margin:16px 0}.admin-total{font-family:var(--display);font-size:18px}.admin-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:none;border-bottom:2px solid rgba(23,20,15,.1);padding:12px 16px;cursor:pointer}.admin-row:last-child{border-bottom:none}.admin-row:hover{background:var(--red-tint)}.admin-row-name{flex:1;display:flex;flex-direction:column;gap:1px}.admin-row-pts{font-weight:700;font-variant-numeric:tabular-nums;width:90px;text-align:right}.admin-row-arrow{color:var(--ink-faint);font-weight:700}.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table td{padding:7px 10px;border-bottom:1px solid rgba(23,20,15,.08)}.admin-table tr:last-child td{border-bottom:none}.admin-table tr.missed td{color:var(--ink-faint)}.admin-num{width:28px;color:var(--ink-faint);font-weight:700}.admin-diff{width:84px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)}.admin-mode{width:36px;text-align:center;font-size:12px;color:var(--ink-soft)}.admin-pts{width:70px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.admin-table tr.missed .admin-pts{color:var(--red-deep)}.row-flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.spread{display:flex;justify-content:space-between;align-items:center;gap:8px}.muted{color:var(--ink-soft)}.faint{color:var(--ink-faint);font-size:13px}.error-text{color:var(--red-deep);font-size:14px;margin:8px 0;font-weight:600}.mt{margin-top:16px}.mt-lg{margin-top:32px}