/* The listening desk: audio comparison first, explanatory detail after answering. */
#sheet:has(#mixLab) { max-width:960px; }
#sheet:has(#mixLab) .sh-title { position:sticky; top:-4px; z-index:2; background:var(--bg2); }
.mix-lab { display:grid; gap:24px; min-width:0; }
.mix-lab h2 { margin:12px 0 20px; font-size:25px; line-height:1.4; }
.mix-lab h3 { margin:16px 0 10px; font-size:17px; }
.mix-lab p { line-height:1.65; }
.mix-intro { color:var(--muted); margin:0 0 22px; }
.mix-fields { display:flex; } .mix-fields .mix-field { max-width:220px; flex:1; }
.mix-catalog { display:flex; flex-direction:column; gap:4px; margin:0 0 8px; }
.mix-group h3 { margin:16px 0 8px; font-size:13px; font-weight:650; color:var(--muted); }
.mix-group:first-child h3 { margin-top:0; }
.mix-desk { display:flex; flex-direction:column; gap:8px; }
.mix-drill { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:center; width:100%; min-height:52px; padding:8px 12px; text-align:left; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.mix-drill.on { border-color:var(--gold); background:var(--panel2); }
.mix-drill:disabled { opacity:.55; }
.mix-drill-copy { min-width:0; } .mix-drill b { display:block; font-size:15px; font-weight:650; } .mix-drill small { display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.4; }
.mix-mark { width:28px; height:28px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(var(--gold),var(--gold)) 6px 8px / 16px 1.5px no-repeat, linear-gradient(var(--gold),var(--gold)) 6px 14px / 10px 1.5px no-repeat, linear-gradient(var(--gold),var(--gold)) 6px 20px / 13px 1.5px no-repeat, var(--bg); }
.mix-drill.on .mix-mark { border-color:var(--gold); }
.mix-field { display:flex; flex-direction:column; gap:8px; min-width:0; margin:0 0 14px; font-size:13px; color:var(--muted); }
.mix-field select { width:100%; max-width:100%; min-width:0; }
.mix-lab select { min-height:44px; padding:8px 10px; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:10px; font:inherit; }
.mix-field input[type=range] { width:100%; min-height:44px; margin:0; accent-color:var(--gold); }
.mix-count { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.mix-welcome { min-height:200px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:16px 0; }
.mix-welcome p { color:var(--muted); margin:0 0 24px; }
.mix-question small { color:var(--muted); font-size:13px; }
.mix-players { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; }
.mix-lab .btn { min-height:48px; white-space:normal; }
.mix-players .btn { border-radius:12px; min-height:62px; }
.mix-players .on { border-color:var(--gold); background:var(--gold); color:var(--bg); }
.mix-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0; }
.mix-answers .mix-correct { border-color:var(--good); color:var(--good); opacity:1; }
.mix-answers .mix-wrong { border-color:var(--bad); opacity:1; }
.mix-feedback { border-top:1px solid var(--line); padding-top:6px; }
.mix-feedback p { font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.mix-feedback .btn { margin:8px 8px 4px 0; }
.mix-aside { border-top:1px solid var(--line); padding-top:8px; min-width:0; }
.mix-import input { max-width:100%; min-height:44px; font:inherit; }
.mix-storage { color:var(--muted); font-size:12px; border-top:1px solid var(--line); padding-top:16px; }
.mix-curve { width:100%; height:auto; stroke:var(--gold); stroke-width:2; }
.mix-curve .mix-zero { stroke:var(--line); stroke-width:1; }
.mix-curve text { fill:var(--muted); stroke:none; font:11px sans-serif; }
.home-mix { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 6px; margin-top:18px; }
.home-mix b { display:block; font-size:17px; }
.home-mix small { display:block; font-size:13px; color:var(--muted); margin-top:5px; }
.home-mix svg { width:42px; height:38px; color:var(--gold); }
@media(min-width:700px) { .mix-lab { grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr); gap:28px; } .mix-aside { border-top:0; border-left:1px solid var(--line); padding:0 0 0 24px; } }
@media(max-width:350px) { .mix-players { gap:5px; } .mix-players .btn { padding:10px 12px; } .mix-lab h2 { font-size:22px; } }