*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,Arial,Helvetica,sans-serif;background:var(--accent-yellow);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;font-weight:900}a{text-decoration:none;color:inherit}.page-content{background:var(--bg-section-warm);min-height:100vh;padding:0 24px}.inner{max-width:640px;margin:0 auto;padding-top:96px;padding-bottom:64px}.label{font-size:12px;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;font-weight:500}.title{font-size:clamp(32px,6vw,52px);font-weight:600;line-height:1.08;letter-spacing:-.03em;margin-bottom:16px}.subtitle{font-size:15px;font-weight:500;color:var(--text-muted);line-height:1.55;max-width:480px;margin-bottom:36px}.setup-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}.field{display:flex;flex-direction:column;gap:4px}.field span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600}.field select{font-family:inherit;font-weight:700;font-size:14px;color:var(--text);background:#fff;border:2px solid var(--text);border-radius:100px;height:44px;padding:0 16px;cursor:pointer}#newChordBtn{height:44px;padding:0 22px}.cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--text);color:var(--bg);font-size:14px;font-weight:700;border-radius:100px;transition:transform .15s ease;border:none;cursor:pointer}.cta-btn:hover{transform:scale(1.04)}.cta-btn:disabled{opacity:.4;cursor:default;transform:none}.cta-btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:transparent;color:var(--text);font-size:14px;font-weight:700;border-radius:100px;border:2px solid var(--text);transition:all .15s ease;cursor:pointer}.cta-btn-outline:hover{background:var(--text);color:var(--bg)}.card{background:#fff;border:2px solid var(--text);border-radius:16px;box-shadow:0 4px 0 0 var(--text);padding:28px;margin-bottom:20px}.rec-dot-wrap{display:flex}.rec-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--text);background:transparent;display:inline-block;flex-shrink:0}.rec-dot[data-state=off]{background:transparent}.rec-dot[data-state=ready]{background:transparent;border-color:var(--text)}.rec-dot[data-state=recording]{background:#e8384a;border-color:#e8384a;animation:recPulse 1s ease-in-out infinite}@keyframes recPulse{0%,to{box-shadow:0 0 #e8384a8c}50%{box-shadow:0 0 0 8px #e8384a00}}.mic-gate:not([hidden]){display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--accent-blue)}.mic-gate-title{font-size:18px;font-weight:900}.mic-gate-desc{font-size:13px;font-weight:600;opacity:.75;margin-top:4px;max-width:420px}.mic-error{font-size:13px;font-weight:700;color:#7a1020;background:#fff9;padding:8px 12px;border-radius:8px}.game-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.rec-indicator{display:flex;align-items:center;gap:8px}.rec-label{font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:.03em}.progress-dots{display:flex;gap:8px}.progress-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--text);background:transparent}.progress-dot[data-done=true]{background:var(--accent-green)}.progress-dot[data-current=true]{background:var(--accent-yellow)}.target-wrap{text-align:center;margin-bottom:20px}.target-degree{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:4px}.target-note{font-size:56px;font-weight:900;letter-spacing:-.02em;line-height:1}.listen-btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:700;color:var(--text);background:transparent;border:2px solid var(--text);border-radius:100px;padding:8px 16px;cursor:pointer;transition:all .15s ease}.listen-btn:hover{background:var(--text);color:var(--bg)}.listen-btn[aria-pressed=true]{background:var(--accent-pink);border-color:var(--text)}.listen-btn:disabled{opacity:.35;cursor:default;background:transparent;color:var(--text)}.meter-track{position:relative;height:14px;border:2px solid var(--text);border-radius:100px;background:var(--bg-subtle);overflow:hidden;margin-bottom:8px}.meter-zone-green{position:absolute;left:40%;width:20%;top:0;bottom:0;background:#40c07259}.meter-center-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--text);opacity:.4}.meter-marker{position:absolute;top:-3px;width:10px;height:20px;border-radius:4px;background:var(--text-muted);left:50%;transform:translate(-50%);transition:left .08s linear,background .15s ease}.meter-marker[data-zone=green]{background:var(--accent-green)}.meter-marker[data-zone=yellow]{background:#d4920a}.meter-marker[data-zone=red]{background:#e8384a}.meter-info{font-size:12px;font-weight:600;color:var(--text-muted);text-align:center;margin-bottom:20px;min-height:16px}.hold-track{height:8px;border-radius:100px;background:var(--bg-subtle);border:2px solid var(--text);overflow:hidden;margin-bottom:24px}.hold-fill{height:100%;width:0%;background:var(--accent-green);transition:width .06s linear}.game-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.skip-btn{background:none;border:none;color:var(--text-muted);font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer}.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}.result-title{font-size:22px;font-weight:900}.pitch-toggle{font-family:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:transparent;border:2px solid var(--card-border);border-radius:100px;padding:6px 12px;cursor:pointer;transition:all .15s ease}.pitch-toggle[aria-pressed=true]{color:var(--text);border-color:var(--text);background:var(--accent-green)}.result-desc{font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:20px}.chord-stack{display:flex;flex-direction:column-reverse;gap:8px;margin-bottom:24px}.chord-row{display:flex;align-items:center;gap:12px;border:2px solid var(--text);border-radius:12px;padding:10px 14px}.chord-row-note{font-size:20px;font-weight:900;width:40px;flex-shrink:0}.chord-row-degree{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700;width:60px;flex-shrink:0}.chord-row-play{margin-left:auto;background:none;border:2px solid var(--text);border-radius:50%;width:32px;height:32px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.chord-row-play:hover{background:var(--text)}.chord-row-play:hover .tri{border-left-color:var(--bg)}.tri{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--text);margin-left:2px}.footer-row{margin-top:8px}.back-link{font-size:14px;color:var(--text);opacity:.6}@media (max-width: 480px){.inner{padding-top:64px}.title{font-size:30px}.card{padding:20px}.target-note{font-size:42px}}