:root{color:#0f172a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 0,#14b8a63d,#0000 40%),radial-gradient(circle at 95% 100%,#fb923c36,#0000 36%),#f8fafc;min-height:100vh;margin:0}#root{min-height:100vh}.app-shell{grid-template-columns:1fr;gap:1rem;width:min(1120px,100% - 2rem);margin:2rem auto;display:grid}.hero-panel,.grid-panel{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(140deg,#fffffff2,#fdf8f4e0);border:1px solid #1118271f;border-radius:22px;box-shadow:0 24px 55px -45px #111827cc}.hero-panel{padding:clamp(1.25rem,3vw,2.2rem)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#0f766e;margin:0;font-size:.85rem;font-weight:700}h1{letter-spacing:-.02em;margin:.4rem 0 .8rem;font-size:clamp(1.8rem,4vw,3.3rem);line-height:1.02}.lead{color:#334155;max-width:62ch;margin:0}.controls{gap:.65rem;margin-top:1.2rem;display:grid}.controls label{font-weight:700}.controls input[type=range]{accent-color:#ea580c}.controls select{color:#0f172a;background:#fff;border:1px solid #0f172a33;border-radius:10px;padding:.52rem .7rem;font-size:.92rem;font-weight:600}.meter-wrap{gap:.45rem;margin-top:.35rem;display:grid}.meter-row{grid-template-columns:44px 1fr 90px;align-items:center;gap:.5rem;font-size:.82rem;display:grid}.meter-row span{color:#0f172a;font-weight:700}.meter-row small{color:#334155;text-align:right}.meter-track{background:#0f172a1a;border-radius:999px;height:.72rem;position:relative;overflow:hidden}.meter-fill{border-radius:999px;width:0;position:absolute;inset:0 auto 0 0}.meter-fill.rms{background:linear-gradient(90deg,#22c55e,#16a34a)}.meter-fill.peak{background:linear-gradient(90deg,#38bdf8,#0ea5e9)}.meter-threshold{background:#dc2626;border-radius:2px;width:2px;position:absolute;top:-2px;bottom:-2px}.control-actions{flex-wrap:wrap;gap:.6rem;display:flex}button{letter-spacing:.02em;cursor:pointer;border:0;border-radius:999px;padding:.66rem 1.1rem;font-size:.95rem;font-weight:700}.start{color:#f8fafc;background:#0f766e}.stop{color:#f8fafc;background:#1e293b}.status{color:#1d4ed8;margin:1rem 0 0;font-weight:600}.wave-panel{background:#ffffffb8;border:1px solid #0f172a1f;border-radius:14px;margin-top:.9rem;padding:.7rem}.wave-head{text-transform:uppercase;letter-spacing:.04em;justify-content:space-between;gap:.8rem;margin-bottom:.45rem;font-size:.74rem;font-weight:700;display:flex}.tempo-label{color:#c2410c}.mic-label{color:#0369a1}.wave-canvas{background:#f8fafc;border-radius:10px;width:100%;height:180px;display:block}.snapshot-wrap{margin-top:.7rem}.snapshot-wrap h3{text-transform:uppercase;letter-spacing:.05em;color:#334155;margin:0 0 .5rem;font-size:.85rem}.snapshot-list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.65rem;display:grid}.snapshot-card{background:#f8fafce6;border:1px solid #0f172a1f;border-radius:10px;gap:.35rem;margin:0;padding:.5rem;display:grid}.snapshot-card img{border:1px solid #64748b40;border-radius:8px;width:100%}.snapshot-card figcaption{color:#475569;gap:.15rem;font-size:.75rem;display:grid}.snapshot-download{color:#0f766e;font-size:.78rem;font-weight:700;text-decoration:none}.grid-panel{flex-wrap:wrap;gap:1rem;padding:clamp(1rem,2.4vw,1.6rem);display:flex}.grid-panel>div{flex:290px}.count-circles{gap:.5rem;margin-top:.5rem;display:flex}.count-circles span{color:#0f172a;background:#0f766e24;border-radius:50%;place-items:center;width:2.4rem;height:2.4rem;font-weight:700;display:grid}.count-circles .active{color:#fffbeb;background:#ea580c;transform:scale(1.08)}.beats{flex-wrap:wrap;gap:.48rem;margin-top:.55rem;display:flex}.beat{background:#f8fafc;border:1px solid #1e293b2e;border-radius:12px;gap:.1rem;width:calc(25% - .48rem);min-width:80px;padding:.45rem;display:grid}.beat.good{background:#16a34a1f;border-color:#16a34a80}.beat.perfect{background:#22c55e2e;border-color:#15803da6}.beat.bad{background:#dc262617;border-color:#dc262666}.beat.miss{background:#ef444429;border-color:#b91c1c8c}.beat.current{box-shadow:inset 0 0 0 2px #ea580c}.beat strong{font-size:.9rem}.beat .beat-status{text-transform:uppercase;letter-spacing:.06em;font-size:.68rem}.beat .beat-score{color:#0f172a;font-size:.9rem;font-weight:800}.beat small{color:#64748b;font-size:.68rem}.hint{color:#475569;margin-top:.45rem}h2,h3{margin:0}h3{margin-top:.9rem}.claps{gap:.35rem;margin:.55rem 0 0;padding:0;list-style:none;display:grid}.claps li{background:#94a3b826;border-radius:8px;padding:.32rem .5rem;font-size:.9rem}@media (width<=740px){.app-shell{width:min(1120px,100% - 1rem);margin:1rem auto}.grid-panel{gap:.8rem}.beats{gap:.4rem}.beat{width:calc(50% - .4rem)}.meter-row{grid-template-columns:42px 1fr 80px;font-size:.76rem}}