.practice-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; padding-block:66px 76px; }
.practice-hero h1 { font-size:clamp(3rem,5.6vw,5.2rem); line-height:1.03; letter-spacing:-.065em; margin-block:16px 24px; }
.practice-hero .hero-lead { font-size:1.08rem; max-width:34rem; }
.small-note { color:var(--muted); font-size:.85rem; }
.practice-console { background:linear-gradient(135deg,#171c27,#0b0e16); border:1px solid rgba(255,215,65,.32); border-radius:28px; padding:30px; box-shadow:var(--shadow); text-align:center; }
.console-top { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.7rem; letter-spacing:.12em; font-weight:800; }
.session-label { color:var(--gold); }
.timer { font:900 clamp(4rem,8vw,6rem)/1.15 ui-monospace,SFMono-Regular,monospace; letter-spacing:-.08em; padding-block:22px 12px; }
.timer span { font:500 1.1rem/1 sans-serif; color:var(--muted); letter-spacing:0; margin-left:8px; }
.progress-track { height:4px; overflow:hidden; background:#303646; border-radius:4px; }
#progress { width:100%; height:100%; background:var(--gold); }
.prompt-label { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; margin:25px 0 4px; }
.prompt { font-size:clamp(2rem,4vw,3.1rem); line-height:1.25; font-weight:850; margin:0; overflow-wrap:anywhere; }
.console-status { color:var(--muted); font-size:.86rem; min-height:2.8em; margin:16px 0 22px; }
.console-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
button { font-family:inherit; cursor:pointer; }
.share-button { border:0; padding:16px 6px 0; color:var(--muted); background:none; font-size:.83rem; text-decoration:underline; text-underline-offset:4px; }
.share-status { min-height:1.4em; margin:6px 0 0; color:var(--gold); font-size:.75rem; overflow-wrap:anywhere; }
.practice-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:960px) { .practice-hero { gap:30px; } .practice-hero h1 { font-size:3.6rem; } }
@media(max-width:720px) { .practice-hero { grid-template-columns:1fr; padding-block:36px 48px; gap:24px; } .practice-hero h1 { font-size:clamp(2.7rem,10vw,4rem); } .practice-hero .intro { text-align:center; } .practice-hero .hero-lead { margin:auto; } .practice-console { padding:24px 18px; } .timer { font-size:4.3rem; } .practice-steps { grid-template-columns:1fr; } }
@media(max-width:520px) { .practice-hero { padding-top:24px; gap:18px; } .practice-hero h1 { margin-block:12px 16px; font-size:2.8rem; } .practice-hero .hero-lead { font-size:1rem; } .practice-console { padding:18px; } .timer { padding-block:14px 10px; font-size:3.8rem; } .prompt-label { margin-top:18px; } .console-status { margin-block:12px 16px; } }
.beat-panel { margin:0 0 16px; padding:14px; border:1px solid #343b4b; border-radius:16px; background:rgba(0,0,0,.18); text-align:left; }
.beat-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:.75rem; font-weight:700; }
.text-button { background:none; border:0; color:var(--gold); font-size:.75rem; padding:4px; }
.beat-choice { display:flex; gap:8px; }
.beat-choice select, .exercise-choice select { color:var(--text); background:#171c27; border:1px solid #485164; border-radius:9px; font:inherit; font-size:.8rem; padding:10px; min-width:0; width:100%; }
select option { background:#171c27; color:#fff; }
.preview-button { border:1px solid #485164; border-radius:9px; background:#171c27; color:var(--gold); min-width:42px; font-size:1rem; }
button:disabled { opacity:.45; cursor:default; }
.audio-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; margin-top:12px; color:var(--muted); font-size:.69rem; }
.volume-control { display:flex; align-items:center; gap:6px; }
.volume-control input { width:80px; accent-color:var(--gold); }
.volume-control output { width:28px; }
.count-in-control { display:flex; align-items:center; gap:5px; }
.count-in-control input { accent-color:var(--gold); }
.beat-status { color:var(--muted); font-size:.69rem; min-height:1.3em; margin:10px 0 0; }
.exercise-choice { display:flex; align-items:center; gap:12px; margin-bottom:16px; text-align:left; }
.exercise-choice label { flex-shrink:0; font-size:.75rem; color:var(--muted); }
.beat-credit { margin-top:24px; }
:where(button,select,input):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media(max-width:520px) { .beat-panel { padding:12px; } .beat-choice select { font-size:.72rem; } .audio-options { gap:8px; } .practice-hero .small-note { font-size:.8rem; } }