:root{color:#172033;background:#f4efe6;font-family:Avenir Next,PingFang SC,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}button{font:inherit}.player-shell{background:radial-gradient(circle at 0 0,#ffffffd6,#0000 40%),linear-gradient(135deg,#f4efe6 0%,#e7f5f1 55%,#dceaf5 100%);min-height:100vh;position:relative;overflow:hidden}.player-backdrop{pointer-events:none;background:radial-gradient(circle at 20% 20%,#0f766e1f,#0000 25%),radial-gradient(circle at 80% 0,#fbbf2438,#0000 25%);position:absolute;inset:0}.player-card{z-index:1;max-width:1240px;margin:0 auto;padding:28px 20px 40px;position:relative}.hero{max-width:720px;margin-bottom:24px}.eyebrow,.panel-kicker{letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--accent) 76%, #172033 24%);margin:0 0 8px;font-size:12px}.hero h1,.panel-header h2{margin:0;font-family:Baskerville,STSong,Songti SC,serif;line-height:1.05}.hero h1{font-size:clamp(36px,8vw,64px)}.hero-copy{color:#172033bd;margin:14px 0 0;font-size:16px;line-height:1.6}.practice-layout{grid-template-columns:1.15fr .85fr;gap:20px;display:grid}.practice-panel,.result-panel>*{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffc7;border:1px solid #fff9;box-shadow:0 24px 60px #1a23361f}.practice-panel{border-radius:28px;padding:24px}.result-panel{gap:16px;display:grid}.score-card,.breakdown-card,.feedback-card{border-radius:24px;padding:20px}.panel-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.audio-pill{white-space:nowrap;color:#115e59;background:#0f766e1a;border-radius:999px;padding:8px 12px;font-weight:600}.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px;display:grid}.meta-grid div,.error-card,.warning-card,.capability-card,.recording-banner{background:#f4efe6b8;border-radius:18px;padding:16px}.meta-grid span{color:#172033a8;margin-bottom:8px;font-size:13px;display:block}.meta-grid strong{line-height:1.5;display:block}.action-row{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.primary-button,.secondary-button,.ghost-button{cursor:pointer;border:none;border-radius:999px;padding:12px 18px;transition:transform .16s,opacity .16s}.primary-button{background:var(--accent);color:#fff;box-shadow:0 12px 24px color-mix(in srgb, var(--accent) 35%, transparent)}.secondary-button{color:#fff;background:#172033}.ghost-button{color:#115e59;background:#0f766e1a}.primary-button:hover,.secondary-button:hover,.ghost-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.capability-card{border:1px solid #0f766e2e;margin-top:18px}.capability-card strong{color:#115e59;display:block}.capability-card p{color:#172033bd;margin:8px 0 0;line-height:1.5}.capability-insecure,.capability-missing-api,.capability-missing-recorder{background:#fef3c7a8;border-color:#b4530938}.capability-insecure strong,.capability-missing-api strong,.capability-missing-recorder strong{color:#92400e}.recording-banner{align-items:center;gap:12px;margin-top:18px;display:flex}.recording-banner span:last-child{line-height:1.5}.dot{background:#dc2626;border-radius:999px;width:12px;height:12px;box-shadow:0 0 0 8px #dc26261f}.warning-card{color:#92400e;margin-top:18px}.warning-card p{margin:8px 0 0;line-height:1.5}.score-row{justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 4px;display:flex}.score-row strong{font-family:Baskerville,STSong,Songti SC,serif;font-size:clamp(48px,12vw,78px)}.score-row span{color:#f59e0b;font-size:24px}.encouragement{color:#172033c2;margin:0 0 16px;line-height:1.6}.score-breakdown{gap:10px;margin:0;padding:0;list-style:none;display:grid}.score-breakdown li,.token-card{background:#f4efe6b8;border-radius:18px;gap:6px;padding:14px;display:grid}.score-breakdown li{grid-template-columns:1fr auto;align-items:center}.token-list{gap:10px;display:grid}.token-head{justify-content:space-between;align-items:center;display:flex}.token-card p,.token-card small,.empty-state{color:#172033b8;margin:0}@media (width<=920px){.practice-layout{grid-template-columns:1fr}.panel-header{flex-direction:column}}@media (width<=640px){.player-card{padding-inline:14px}.practice-panel,.score-card,.breakdown-card,.feedback-card{border-radius:22px;padding:18px}.meta-grid{grid-template-columns:1fr}}