:root{--font:system-ui, -apple-system, "Segoe UI", sans-serif;--bad:#cf222e}[data-style=soft-light][data-theme=light]{--bg:linear-gradient(160deg, #eef2ff 0%, #f8fafc 55%, #fdf4ff 100%);--surface:#fff;--surface2:#f1f5f9;--ink:#0f172a;--muted:#5b6678;--accent:#4f46e5;--accent2:#a855f7;--on-accent:#fff;--line:#e2e8f0;--good:#16a34a;--card-border:1px solid transparent;--card-shadow:0 10px 30px -12px #4f46e54d;--radius:18px;--glow:none;--weight:700;--tab-radius:999px;--key-white:#fff;--key-black:#1e293b;--key-border:#cbd5e1;--key-radius:0 0 10px 10px;--key-held:#c7d2fe;--key-label:#4f46e5;--key-label-ground:#eef2ff;--key-black-label:#c7d2fe}[data-style=soft-light][data-theme=dark]{--bg:linear-gradient(160deg, #111427 0%, #0d1020 55%, #1a1230 100%);--surface:#181c30;--surface2:#20253c;--ink:#e5e7eb;--muted:#a3afc2;--accent:#818cf8;--accent2:#c084fc;--on-accent:#0d1020;--line:#2b3150;--good:#4ade80;--card-border:1px solid #262b45;--card-shadow:0 10px 30px -12px #0009;--radius:18px;--glow:none;--weight:700;--tab-radius:999px;--key-white:#e8eaf2;--key-black:#0b0d18;--key-border:#0d1020;--key-radius:0 0 10px 10px;--key-held:#4f46e5;--key-label:#3730a3;--key-label-ground:#c7d2fe;--key-black-label:#a5b4fc}[data-style=night-studio][data-theme=dark]{--bg:radial-gradient(120% 70% at 50% 0%, #1e1b4b 0%, #0b1020 60%) fixed #0b1020;--surface:#ffffff0d;--surface2:#ffffff14;--ink:#e2e8f0;--muted:#a3afc2;--accent:#22d3ee;--accent2:#a78bfa;--on-accent:#03131a;--line:#ffffff1f;--good:#34d399;--card-border:1px solid #ffffff1a;--card-shadow:none;--radius:14px;--glow:0 0 14px #22d3eeb3;--weight:600;--tab-radius:999px;--key-white:#e2e8f0;--key-black:#020617;--key-border:#0b1020;--key-radius:0 0 8px 8px;--key-held:#22d3ee;--key-label:#0e7490;--key-label-ground:#cffafe;--key-black-label:#67e8f9}[data-style=night-studio][data-theme=light]{--bg:radial-gradient(120% 70% at 50% 0%, #e0f2fe 0%, #f1f5f9 60%) fixed #f1f5f9;--surface:#ffffffc7;--surface2:#ffffffeb;--ink:#0f172a;--muted:#5b6678;--accent:#0891b2;--accent2:#7c3aed;--on-accent:#fff;--line:#0f172a1f;--good:#059669;--card-border:1px solid #0f172a14;--card-shadow:0 8px 30px -14px #0891b259;--radius:14px;--glow:0 0 12px #0891b273;--weight:600;--tab-radius:999px;--key-white:#fff;--key-black:#0f172a;--key-border:#cbd5e1;--key-radius:0 0 8px 8px;--key-held:#67e8f9;--key-label:#0e7490;--key-label-ground:#ecfeff;--key-black-label:#67e8f9}[data-style=playful-bold][data-theme=light]{--font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;--bg:#fff7ed;--surface:#fff;--surface2:#ffedd5;--ink:#1c1917;--muted:#57534e;--accent:#f97316;--accent2:#facc15;--on-accent:#1c1917;--line:#1c1917;--good:#15803d;--card-border:3px solid #1c1917;--card-shadow:5px 5px 0 #1c1917;--radius:16px;--glow:none;--weight:800;--tab-radius:12px;--key-white:#fff;--key-black:#1c1917;--key-border:#1c1917;--key-radius:0 0 10px 10px;--key-held:#fdba74;--key-label:#1c1917;--key-label-ground:#ffedd5;--key-black-label:#fdba74}[data-style=playful-bold][data-theme=dark]{--font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;--bg:#1c1917;--surface:#292524;--surface2:#3a2f28;--ink:#fafaf9;--muted:#d6d3d1;--accent:#fb923c;--accent2:#facc15;--on-accent:#1c1917;--line:#fafaf9;--good:#4ade80;--card-border:3px solid #fafaf9;--card-shadow:5px 5px 0 #fb923c;--radius:16px;--glow:none;--weight:800;--tab-radius:12px;--key-white:#f5f5f4;--key-black:#0c0a09;--key-border:#0c0a09;--key-radius:0 0 10px 10px;--key-held:#fb923c;--key-label:#1c1917;--key-label-ground:#fed7aa;--key-black-label:#fdba74}:root{font-family:var(--font);color:var(--ink);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--bg);color:var(--ink);margin:0}.app{box-sizing:border-box;flex-direction:column;min-width:0;max-width:72rem;min-height:100dvh;margin:0 auto;padding:0 1rem;display:flex;container-type:inline-size}.app>main{flex:1;min-width:0;padding-bottom:2rem}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:.75rem 0;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.logo{color:var(--on-accent);background:linear-gradient(135deg, var(--accent), var(--accent2));font-weight:var(--weight);letter-spacing:-.02em;border-radius:.6rem;padding:.15rem .6rem}[data-style=playful-bold] .logo{border:2.5px solid var(--line);background:var(--accent);transform:rotate(-3deg)}.chip{background:var(--surface2);font-variant-numeric:tabular-nums;border-radius:999px;padding:.25rem .75rem;font-weight:700}[data-style=playful-bold] .chip{border:2px solid var(--line)}nav{flex-wrap:wrap;gap:.5rem;display:flex}nav .tab{border-radius:var(--tab-radius);color:var(--muted);background:0 0;border-color:#0000;font-weight:600}nav .tab[aria-current=page]{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow)}[data-style=night-studio][data-theme=dark] nav .tab[aria-current=page]{color:#67e8f9;box-shadow:none;background:#22d3ee24;border-color:#22d3ee59}button,select,input[type=number],input[type=email],input:not([type]){font:inherit;border:1px solid var(--accent);background:var(--surface2);min-height:2.75rem;color:var(--ink);border-radius:.5rem;padding:.25rem .9rem}button{cursor:pointer;background:var(--accent);color:var(--on-accent);font-weight:600}button:disabled{opacity:.5;cursor:not-allowed}.theme-button{background:var(--surface2);min-width:2.75rem;color:var(--ink);border-color:var(--line);box-shadow:var(--glow);border-radius:999px;padding:.25rem}a{color:var(--accent)}label{flex-direction:column;gap:.25rem;margin:.75rem 0;display:flex}label:has(input[type=checkbox]){flex-direction:row;align-items:center;min-height:2.75rem}input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--accent)}fieldset{border:1px solid var(--line);border-radius:.5rem}.run{text-align:center;gap:1rem;display:grid}.run>*{min-width:0;margin:0}.run .progress{color:var(--muted)}.card{background:var(--surface);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.75rem}.staff-card [role=img]{max-width:28rem;margin:0 auto}.staff-panel{border-radius:calc(var(--radius) - 6px);color:#1f2430;padding:.4rem .6rem}[data-theme=dark] .staff-panel{color:#1f2430;background:#fbf8f1;box-shadow:inset 0 0 0 1px #0000000f}[data-style=playful-bold][data-theme=dark] .staff-panel{box-shadow:inset 0 0 0 2.5px #0c0a09}[data-theme=light] .staff-panel{background:#fff}.stats{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.stat{flex-direction:column;gap:.25rem;min-width:0;display:flex}.stat-name{color:var(--muted);font-size:.875rem}.stat-value{font-weight:var(--weight);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.keyboard-bar{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1rem;display:flex}.keyboard-bar label{color:var(--ink);flex-direction:row;align-items:center;margin:0;font-weight:600}.hint{font-size:.875rem}.wrong,[role=alert]{color:var(--bad);font-weight:600}.results dl{grid-template-columns:max-content 1fr;gap:.5rem 1.5rem;font-size:1.25rem;display:grid}.results dd{font-variant-numeric:tabular-nums;margin:0}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}th,td{text-align:left;border-bottom:1px solid var(--line);padding:.5rem}tr.own{background:var(--surface2);font-weight:600}@media (prefers-reduced-motion:no-preference){button{transition:filter .15s}button:hover{filter:brightness(1.15)}}.home{gap:1rem;display:grid}.hero{align-items:center;gap:1rem;display:grid}.hero h1{margin:0;font-size:2.25rem}.pitch{color:var(--muted);font-size:1.125rem}.actions{flex-wrap:wrap;gap:.75rem;display:flex}button.secondary{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}.logo{cursor:pointer;font-size:inherit;border:0}@container (width>=601px){.hero{grid-template-columns:1fr 1fr}}@container (width>=901px){.run{grid-template-columns:1fr 18rem;grid-template-areas:"count count""staff stats""keys keys"}.run .progress{grid-area:count}.staff-card{grid-area:staff}.stats{grid-area:stats;grid-template-columns:1fr;align-content:start}.keyboard-card{grid-area:keys}}@container (width<=560px){header{display:contents}.brand{padding:.5rem 0}nav{background:var(--surface);border-top:var(--card-border);z-index:2;order:2;justify-content:space-around;margin:0 -1rem;padding:.5rem;position:sticky;bottom:0}nav button{flex:auto;padding:.25rem .5rem;font-size:.875rem}.keyboard-card{padding:.25rem}.keyboard-card [aria-label=Piano\ keyboard]{height:110px!important}}