/* HSK audio dictation: focused transcript practice with visible character differences */
.hd-root{--hd-ink:#233f47;--hd-muted:#677b83;--hd-line:#cbdfe4;--hd-surface:#fff;--hd-soft:#eef8f7;--hd-accent:#227e8b;background:linear-gradient(135deg,#eaf7f9,#f9fbf7);border:1px solid var(--hd-line);border-radius:21px;padding:22px;margin:22px 0;color:var(--hd-ink)}
.hd-head{display:flex;justify-content:space-between;align-items:center;gap:18px}
.hd-head>div:first-child{flex:1;min-width:0}
.hd-kicker{font-size:10px;letter-spacing:.1em;font-weight:850;color:var(--hd-accent)}
.hd-head h2{font-size:clamp(21px,2.8vw,29px);color:var(--hd-ink);margin:9px 0}
.hd-head p,.hd-disclaimer{font-size:11px;line-height:1.8;color:var(--hd-muted)}
.hd-count{padding:16px;min-width:145px;text-align:center;display:grid;gap:5px;background:#d7eeef;border:1px solid #a4d6db;border-radius:14px}
.hd-count strong{font-size:28px;color:#197d8b}.hd-count span{font-size:11px;color:#427984}
.hd-meta{display:flex;align-items:center;gap:11px 17px;flex-wrap:wrap;border-radius:11px;background:var(--hd-soft);padding:12px 15px;margin:18px 0}
.hd-meta span{font-size:11px;color:var(--hd-ink)}.hd-meta button{margin-left:auto;font-size:11px}
.hd-card{background:var(--hd-surface);border:1px solid var(--hd-line);border-radius:15px;padding:19px}
.hd-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px}.hd-intro strong{font-size:12px;color:var(--hd-ink)}
.hd-listen{display:flex;align-items:center;gap:12px;background:var(--hd-soft);border-radius:13px;padding:15px;margin:16px 0}
.hd-note{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border-radius:50%;background:#c7e6e8;font-size:21px;color:#127e88}
.hd-listen>div:nth-child(2){flex:1;min-width:0}.hd-listen h3{font-size:14px;color:var(--hd-ink);margin:0 0 5px}
.hd-listen p{font-size:11px;line-height:1.7;color:var(--hd-muted);margin:0}
.hd-listen button,.hd-actions button,.hd-foot-actions button{font-size:11px;white-space:nowrap}
.hd-controls{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0}
.hd-controls label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:750;color:var(--hd-ink)}
.hd-controls select{border:1px solid #aacfd4;background:var(--hd-surface);color:var(--hd-ink);border-radius:8px;padding:9px 12px}
.hd-input-label{display:block;font-size:12px;font-weight:800;color:var(--hd-ink);margin:16px 0 7px}
#hd-input{display:block;width:100%;min-height:85px;box-sizing:border-box;background:var(--hd-surface);color:var(--hd-ink);border:1px solid #a9ced3;border-radius:11px;padding:13px 15px;font:500 18px/1.7 "Microsoft YaHei",sans-serif;resize:vertical}
#hd-input:disabled{opacity:.75}
.hd-actions{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0}
.hd-transcript,.hd-result{background:var(--hd-soft);border:1px solid var(--hd-line);padding:17px;border-radius:11px;margin:15px 0}
.hd-transcript strong,.hd-result strong{font-size:14px;color:var(--hd-accent)}
.hd-transcript p,.hd-hanzi{font:600 clamp(18px,2.4vw,24px)/1.9 "Microsoft YaHei",sans-serif;color:var(--hd-ink)}
.hd-transcript span,.hd-pinyin{font-size:12px;font-style:italic;color:var(--hd-muted)}
.hd-result p{font-size:12px;color:var(--hd-ink);line-height:1.75}
.hd-diff{display:flex;flex-wrap:wrap;gap:3px;margin:15px 0;font:600 22px/1.5 "Microsoft YaHei",sans-serif;overflow-wrap:anywhere}
.hd-diff span{border-radius:5px;padding:1px 3px}
.hd-diff .hd-match{color:var(--hd-ink)}
.hd-missing{background:#fae0df;color:#a8323a}
.hd-extra{background:#ffebd2;color:#a35a0a;text-decoration:line-through}
.hd-result .hd-legend{font-size:10px;line-height:2}
.hd-history{font-size:11px;color:var(--hd-muted);margin:11px 0}
.hd-foot-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0}
.hd-foot-actions span,.hd-status{font-size:11px;color:var(--hd-muted);line-height:1.75}
.hd-status{min-height:18px;color:var(--hd-accent)}
.hd-root :is(button,select,textarea):focus-visible{outline:3px solid #369bab;outline-offset:3px}
body.dark .hd-root{--hd-ink:#e2f5f6;--hd-muted:#bad0d7;--hd-line:#506d74;--hd-surface:#253942;--hd-soft:#304950;--hd-accent:#abeaf0;background:linear-gradient(130deg,#274048,#24363c)}
body.dark .hd-count{background:#315760;border-color:#538c95}
body.dark .hd-count strong,body.dark .hd-count span{color:#c5f3f5}
body.dark .hd-note{background:#356168;color:#aaf0e8}
body.dark .hd-missing{background:#6a3037;color:#ffe3e3}
body.dark .hd-extra{background:#695035;color:#ffe8be}
@media(max-width:900px){.hd-listen{flex-wrap:wrap}.hd-listen>div:nth-child(2){flex-basis:calc(100% - 58px)}}
@media(max-width:630px){.hd-root{padding:14px}.hd-head{align-items:stretch;flex-direction:column}.hd-count{min-width:0}.hd-card{padding:13px}.hd-meta button{margin-left:0;width:100%}.hd-listen button{flex:1}.hd-actions button,.hd-foot-actions button{width:100%}}