/* LT Korean — Hangul section styles. Colors and fonts come from the tokens in index.html. */
/* One column. Every block in the section (headings, stepper, text, cards, tables, notes, the Build bench, the quizzes, the pager, the
   footer) runs from the same left edge to the same right edge. No block sets a width of its own; change the column here.
   The column starts at the left edge of the site's main area, like the other pages. */
.hg{max-width:640px}
.hg :is(.page,.pager,.page-head p,.b-text,.b-note,.qz,.stepper){max-width:none}   /* the site's own pages give these a width; here the column does */

/* ---- Shared pieces (type, buttons, cards, stepper, quiz), pinned to how the Hangul section was designed ---- */
:where(.hg) h1{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.18;letter-spacing:-.015em;margin:0;text-wrap:balance}
:where(.hg) h2{font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.3;margin:0;text-wrap:balance}
:where(.hg) .eyebrow,:where(.hg) .b-label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
:where(.hg) .lede{font-size:17px;color:var(--muted);max-width:60ch;margin:0}
:where(.hg) .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:18px}
:where(.hg) .btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);text-decoration:none;cursor:pointer;transition:filter .15s,border-color .15s}
:where(.hg) .btn:hover{filter:brightness(1.1)}
:where(.hg) .btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
:where(.hg) .btn.ghost:hover{border-color:var(--accent);filter:none}
:where(.hg) .btn.small{padding:6px 12px;font-size:13px}
:where(.hg) .btn:disabled{opacity:.45;cursor:default;filter:none}
:where(.hg) .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
:where(.hg) .b-text p{margin:0 0 .85em}:where(.hg) .b-text>*:last-child{margin-bottom:0}
:where(.hg) .b-note{background:var(--accent-soft);border-radius:10px;padding:14px 18px;font-size:14.5px;display:flex;flex-direction:column;gap:4px}
:where(.hg) .b-note .b-label{color:var(--accent)}
:where(.hg) .b-note p{margin:0}
:where(.hg) .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--think-soft);color:var(--think)}
:where(.hg) .stepper{list-style:none;padding:0 0 4px;margin:24px 0 30px;display:grid;grid-template-columns:repeat(var(--steps,5),minmax(0,1fr));gap:6px}
:where(.hg) .step{font:inherit;width:100%;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--muted);white-space:nowrap;background:var(--surface);cursor:pointer}
:where(.hg) .step:hover{border-color:var(--accent)}
:where(.hg) .step-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--hover);font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
:where(.hg) .step.seen .step-n{background:var(--good-soft);color:var(--good)}
:where(.hg) .step.on{border-color:var(--accent);color:var(--ink)}
:where(.hg) .step.on .step-n{background:var(--accent);color:var(--on-accent)}
@media (max-width:520px){
  :where(.hg) .step{flex-direction:column;gap:3px;padding:8px 2px 6px;border-radius:12px;font-size:12px}
}
:where(.hg) .page{display:flex;flex-direction:column;gap:22px}
:where(.hg) .page-head{display:flex;flex-direction:column;gap:4px}
:where(.hg) .page-head p{margin:0;color:var(--muted)}
:where(.hg) .pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
:where(.hg) .pager .btn:only-child{margin-left:auto}
:where(.hg) .qz{display:flex;flex-direction:column;gap:14px}
:where(.hg) .fc-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
:where(.hg) .fc-bar{height:4px;border-radius:2px;background:var(--hover);overflow:hidden;margin-top:-6px}
:where(.hg) .fc-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
:where(.hg) .qz-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:190px;padding:28px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-align:center;box-shadow:0 2px 0 var(--line),0 18px 36px -22px var(--shadow)}
:where(.hg) .fc-face{font-size:clamp(34px,8vw,52px);font-weight:500;line-height:1.25;overflow-wrap:anywhere}
:where(.hg) .fc-sub{font-size:14px;color:var(--muted)}
:where(.hg) .qz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:where(.hg) .qz-opt{font:inherit;font-size:15.5px;text-align:left;display:flex;align-items:baseline;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;min-width:0;transition:border-color .15s}
:where(.hg) .qz-opt:hover{border-color:var(--accent)}
:where(.hg) .qz-opt .k{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
:where(.hg) .qz-opt.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
:where(.hg) .qz-opt.right{border-color:var(--good);background:var(--good-soft);color:var(--good);box-shadow:none}
:where(.hg) .qz-opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad);box-shadow:none}
:where(.hg) .qz-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px}
:where(.hg) .qz-foot .feedback{flex:1 1 200px}
:where(.hg) .qz-foot .btn{margin-left:auto}
:where(.hg) .feedback{font-size:14.5px;margin:0}
:where(.hg) .feedback .ok{color:var(--good);font-weight:600}:where(.hg) .feedback .no{color:var(--bad);font-weight:600}
:where(.hg) .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
:where(.hg) table{border-collapse:collapse;width:100%;font-size:15px}
:where(.hg) th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--hover)}
:where(.hg) th,:where(.hg) td{padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
:where(.hg) tbody tr:last-child td{border-bottom:0}
.hg .qz-prompt{width:auto;aspect-ratio:auto}
.hg .tag{align-self:auto;margin-bottom:0}
.hg .btn.small{align-self:auto}
.hg .crumbs a{text-decoration:none}
.hg .crumbs a:hover{color:var(--accent);text-decoration:underline}
@media (prefers-reduced-motion: reduce){.hg *{animation:none!important}}

/* ---- Hangul section ---- */
.hg-link{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-decoration:none}
.hg-link:hover{color:var(--accent);text-decoration:underline}
.hg-notice{margin:0 0 20px;padding:10px 14px;border-radius:8px;background:var(--think-soft);color:var(--think);font-size:13.5px}

.hg-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hg-head-ko{font-family:var(--f-display);font-weight:700;font-size:60px;line-height:1;color:var(--accent)}
.hg-head-ko.sm{font-size:44px;font-variant-numeric:tabular-nums}
.hg-head-letters{margin:0;font-size:22px;font-weight:500;letter-spacing:.14em}
.hg-head>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 280px}
.hg-resume{font:inherit;color:inherit;width:100%;text-align:left;border:0;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:14px 18px;border-radius:12px;background:var(--accent-soft);margin-top:26px}
.hg-resume strong{font-weight:600}
.hg-resume span:last-child{color:var(--accent);font-weight:600;font-size:14px}

.hg-round{margin-top:30px}
.hg-round-h{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px}
.hg-rows{border-top:1px solid var(--line)}
.hg-row{font:inherit;color:inherit;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:3.6em 12em minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:16px 4px}
.hg-row-n{white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.hg-row-letters{font-size:21px;font-weight:500;letter-spacing:.08em;line-height:1.3;white-space:nowrap;text-align:center}
.hg-row-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.hg-row-t{font-weight:600;font-size:16.5px;transition:color .15s}
.hg-row:hover .hg-row-t{color:var(--accent)}
.hg-row-s{font-size:14px;color:var(--muted)}
.hg-row-state{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.hg-row.is-done .hg-row-state{color:var(--good)}
.hg-row.is-locked{cursor:default}
.hg-row.is-locked .hg-row-n,.hg-row.is-locked .hg-row-letters,.hg-row.is-locked .hg-row-t{color:var(--muted)}
.hg-row.is-locked:hover .hg-row-t{color:var(--muted)}
.hg-dots{display:inline-flex;gap:3px}
.hg-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.hg-dots i.on{background:var(--good)}
@media (max-width:640px){
  .hg-row{grid-template-columns:3.4em minmax(0,1fr) auto}
  .hg-row-n{font-size:22px}
  .hg-row-letters{grid-column:2;grid-row:1;text-align:left}
  .hg-row-state{grid-column:3;grid-row:1}
  .hg-row-main{grid-column:2 / -1}
}

/* Letter chart */
.hg-chart{margin-top:44px;display:flex;flex-direction:column;gap:14px}
.hg-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.hg-chart-head span{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Two boxes side by side only when each is wide enough for full-size cells. */
.hg-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr));gap:14px}
.hg-chart-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hg-crow{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:10px;align-items:center}
.hg-crow>span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* Every row is one line on a shared 7-column grid: cells shrink to fit instead of wrapping, so columns stay lined up. */
.hg-cells{display:grid;grid-template-columns:repeat(7,minmax(0,38px));gap:6px}
.hg-cell{font:inherit;display:grid;place-items:center;min-width:0;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:19px;font-weight:500;cursor:pointer;padding:0;transition:border-color .15s}
.hg-cell:hover{border-color:var(--accent)}
.hg-cell.off{border-style:dashed;background:transparent;color:var(--line);cursor:default}
.hg-cell.off:hover{border-color:var(--line)}
.hg-cell.gap{border:0;background:transparent;cursor:default}
@media (max-width:520px){
  .hg-chart-box{padding:14px}
  .hg-crow{grid-template-columns:4.7em minmax(0,1fr);gap:8px}
  .hg-crow>span{font-size:10.5px;letter-spacing:.03em}
  .hg-cells{gap:4px}
  .hg-cell{font-size:17px;border-radius:7px}
}

/* Sound buttons */
.hg-say{font:inherit;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:17px;font-weight:500;cursor:pointer;line-height:1.4;transition:border-color .15s}
.hg-say:hover{border-color:var(--accent)}
.hg-say svg{width:15px;height:15px;flex:none;color:var(--accent)}
.hg-say.big{padding:12px 22px 12px 18px;font-family:var(--f-body);font-size:15px;font-weight:600;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.hg-say.big svg{width:19px;height:19px;color:var(--on-accent)}
.hg-say.big:hover{filter:brightness(1.1)}

/* Meet */
.hg-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hg-letter{gap:8px}
.hg-letter-top{display:flex;align-items:center;gap:14px}
.hg-glyph{font-size:54px;font-weight:500;line-height:1;width:1.1em;text-align:center;color:var(--accent)}
.hg-letter-id{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;margin-right:auto}
.hg-rom{font-family:var(--f-mono);font-size:15px;font-weight:500}
.hg-cue{margin:0;font-size:15px}
/* skip-ink is off so the line is not cut away under letters with a tail (g, j, p, y) */
.hg-cue u{font-weight:600;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accent);text-decoration-skip-ink:none}
.hg-how{margin:0;font-size:14px;color:var(--muted)}
.hg-from{margin:0;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted);display:flex;align-items:baseline;gap:10px}
.hg-from b{font-size:18px;font-weight:500;color:var(--ink);white-space:nowrap}
.hg-sub{display:flex;flex-direction:column;gap:10px}
.hg-sub>p{margin:0;color:var(--muted);font-size:14.5px}
.hg-says{display:flex;flex-wrap:wrap;gap:8px}
.hg-ko{font-size:17px;font-weight:500}
td .hg-say{font-size:16px}
.hg-td-rom{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
/* A folded explanation under a table. Closed it is one row with the label; open it shows the text. */
.hg-more{background:var(--accent-soft);border-radius:10px;font-size:14.5px}
.hg-more summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;cursor:pointer;list-style:none;border-radius:10px;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.hg-more summary::-webkit-details-marker{display:none}
.hg-more summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.hg-more[open] summary::before{transform:rotate(45deg)}
.hg-more p{margin:0;padding:0 18px 14px}
@media (prefers-reduced-motion:reduce){.hg-more summary::before{transition:none}}
/* A column that only shows where there is room for it, so the table never scrolls sideways on a phone. */
@media (max-width:520px){.hg-wide{display:none}.hg-fit th,.hg-fit td{padding-left:10px;padding-right:10px}}

/* Build */
.hg-build{display:flex;flex-direction:column;gap:18px}
.hg-target{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hg-target-rom{font-family:var(--f-mono);font-size:26px;font-weight:500;line-height:1.2}
.hg-target-en{color:var(--muted);font-size:14.5px}
.hg-bench{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hg-block{width:168px;height:168px;display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 2px 0 var(--line),0 18px 36px -22px var(--shadow);flex:none}
.hg-block.side{grid-template:"i m" 1fr / 1fr 1fr}
.hg-block.side.fin{grid-template:"i m" 3fr "f f" 2fr / 1fr 1fr}
.hg-block.under{grid-template:"i" 1fr "m" 1fr / 1fr}
.hg-block.under.fin{grid-template:"i" 1fr "m" 1fr "f" 1fr / 1fr}
.hg-block.open{grid-template:"i v" 1fr "h v" 1fr / 3fr 2fr}
.hg-block.open.fin{grid-template:"i v" 1fr "h v" 1fr "f f" 1fr / 3fr 2fr}
.hg-block.wrap{grid-template:"i v" 1fr "h v" 1fr / 3fr 2fr}
.hg-block.wrap.fin{grid-template:"i v" 1fr "h v" 1fr "f f" 1fr / 3fr 2fr}
.hg-slot{font:inherit;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border-radius:9px;border:1px dashed var(--line);background:var(--bg);color:var(--ink);font-size:32px;font-weight:500;line-height:1;cursor:pointer}
.hg-slot small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hg-slot.filled{border-style:solid}
.hg-slot.on{border-color:var(--accent);border-style:solid;box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
/* Before a vowel is chosen: one L-shaped vowel zone wrapping the consonant, which sits on top of it at the top left. */
.hg-slot.L,.hg-slot.L.on{grid-area:1 / 1 / 3 / 3;grid-template:". ." 1fr ". a" 1fr / 3fr 2fr;gap:6px;position:relative;border:0;background:none;box-shadow:none}
.hg-slot.L small{grid-area:a;position:relative}
.hg-L{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hg-L path{fill:var(--bg);stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.hg-slot.L.on .hg-L path{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2;stroke-dasharray:none}
.hg-block.open .hg-slot.i{position:relative;z-index:1}
.hg-slot.i{grid-area:i}.hg-slot.m{grid-area:m}.hg-slot.f{grid-area:f}.hg-slot.h{grid-area:h}.hg-slot.v{grid-area:v}
/* Check and Clear sit with the block they act on; the letter tray below is only for input. */
.hg-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.hg-acts{display:flex;flex-wrap:wrap;gap:8px}
.hg-build-fb{min-height:1.6em;margin-top:-4px}
@media (max-width:520px){.hg-build-fb{min-height:3.2em}}
.hg-tile:disabled{opacity:.5;cursor:default}
.hg-result{display:flex;flex-direction:column;gap:2px;min-width:0}
.hg-result b{font-family:var(--f-display);font-weight:700;font-size:72px;line-height:1.1;color:var(--accent);min-height:1.1em}
.hg-result.right b{color:var(--good)}
.hg-result.wrong b{color:var(--bad)}
.hg-result span{font-size:13px;color:var(--muted)}
.hg-tray{display:flex;flex-direction:column;gap:10px}
.hg-tray-row{display:grid;grid-template-columns:6.4em minmax(0,1fr);gap:10px;align-items:start}
.hg-tray-row>span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:12px}
.hg-tiles{display:flex;flex-wrap:wrap;gap:6px}
.hg-tile{font:inherit;display:grid;place-items:center;width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;font-weight:500;cursor:pointer;padding:0;transition:border-color .15s,background .15s}
.hg-tile:hover{border-color:var(--accent);background:var(--hover)}
@media (max-width:520px){.hg-tray-row{grid-template-columns:minmax(0,1fr);gap:4px}.hg-tray-row>span{padding-top:0}}
.hg-build-foot{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;min-height:44px}
.hg-build-foot .feedback{flex:1 1 200px}

/* Listen */
.hg-groups{display:flex;flex-direction:column;gap:8px}
.hg-group{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.hg-group{align-items:center}
.hg-groups.is-listen .hg-group{justify-content:center}   /* Hear the difference: each pair or triple sits in the middle of its box */
/* One unit per sound: model, record, your voice. Units sit side by side so the two sounds can be compared. */
.hg-unit{display:inline-flex;align-items:center;gap:6px;padding:5px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.hg-unit .hg-say{background:var(--surface)}
.hg-ic{font:inherit;display:grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--accent);cursor:pointer;transition:border-color .15s}
.hg-ic:hover{border-color:var(--accent)}
.hg-ic i{width:12px;height:12px;border-radius:50%;background:var(--bad)}
.hg-ic svg{width:16px;height:16px}
.hg-ic.live{border-color:var(--bad);background:var(--bad-soft)}
.hg-ic.live i{border-radius:2px;animation:hg-pulse 1s ease-in-out infinite}
@keyframes hg-pulse{50%{opacity:.35}}
.hg-ic:disabled{opacity:.4;cursor:default}
.hg-ic:disabled:hover{border-color:var(--line)}
/* Three sounds do not fit in one phone row as pills, so on a page that has a group of three (.mix) every unit stacks:
   sound on top, the two buttons under it. Every unit is a third of the row wide, in a pair too, so every letter on
   the page has the same shape and size, and a pair sits in the middle of its row. Pages with pairs only keep the
   one-row pills. */
@media (max-width:520px){
  .hg-groups.mix .hg-group{flex-wrap:nowrap}
  .hg-groups.mix .hg-unit{flex:0 0 calc((100% - 16px) / 3);min-width:0;display:grid;grid-template-columns:1fr 1fr;justify-items:center;border-radius:16px;padding:6px}
  .hg-groups.mix .hg-unit .hg-say{grid-column:1 / -1;justify-self:stretch;justify-content:center}
}
/* Narrow phones: a pair of pills is a few pixels too wide to sit side by side, so the padding tightens. Buttons keep their size. */
@media (max-width:380px){
  .hg-groups:not(.mix) .hg-group{padding:8px}
  .hg-groups:not(.mix) .hg-unit{gap:4px;padding:3px}
  .hg-groups:not(.mix) .hg-unit .hg-say{padding-right:9px}
}
.hg-key{display:inline-grid;place-items:center;width:1.25em;height:1.25em;vertical-align:-.2em;color:var(--accent)}
.hg-key i{width:.6em;height:.6em;border-radius:50%;background:var(--bad)}
.hg-key svg{width:.9em;height:.9em}
.hg-mic-note{margin:0;font-size:13.5px;color:var(--muted)}
.qz-opt.ko{font-size:24px;font-weight:500;justify-content:center;padding:14px}
.qz-opt.snd{align-items:center;justify-content:center;gap:9px;min-height:58px;padding:12px 14px}
.qz-opt.snd svg{width:20px;height:20px;flex:none;color:var(--accent)}
.qz-opt.snd.right svg,.qz-opt.snd.wrong svg{color:inherit}
.qz-opt.snd .rv{font-size:22px;font-weight:500;line-height:1.2}
.qz-opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Read */
.hg-words{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.hg-word{height:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:1px;min-height:132px;min-width:0}
.hg-word b{font-size:26px;font-weight:500;line-height:1.35}
.hg-word .r{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.hg-word .e{font-size:13.5px;color:var(--muted)}
.hg-word.open{background:var(--accent-soft);border-color:transparent}
.hg-word-ctl{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
.hg-word-ctl .hg-ic{width:36px;height:36px}
.hg-word-ctl .btn,.hg-word-ctl .hg-ic.model{margin-left:auto}
.hg-count{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}

/* Results */
.hg-done{gap:12px}
.hg-done-n{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.hg-done.pass .hg-done-n{color:var(--good)}
.hg-done p{margin:0}
.hg-done-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

.hg-foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13.5px;color:var(--muted)}
.hg-foot label{display:flex;align-items:center;gap:8px;cursor:pointer}
.hg-foot .sp{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---- Teacher view ---- */
.td-hg{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hg-listen-q{margin-top:14px;padding-top:26px;border-top:1px solid var(--line)}

/* Day 5: rules with examples, whole words and phrases instead of single letters */
.hg-row-letters.is-word,.hg-head-letters.is-word{letter-spacing:0}
.hg-row-letters.is-word{font-size:17px}
.hg-head-letters.is-word{font-size:19px}
.hg-rule>p{color:var(--ink);font-size:15px}
.hg-rule>p.hg-rule-after{color:var(--muted);font-size:14.5px}
.hg-rule+.hg-rule{margin-top:10px;padding-top:26px;border-top:1px solid var(--line)}
.hg-prons{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:0 14px;border-top:1px solid var(--line)}
.hg-pron{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;padding:7px 2px;border-bottom:1px solid var(--line);min-width:0}
.hg-pron-top{display:flex;align-items:center;gap:10px}
.hg-pron-to{font-size:17px;font-weight:500;color:var(--accent);white-space:nowrap}
.hg-pron-en{font-size:13.5px;color:var(--muted);margin-left:auto;text-align:right}
.hg-word .p{font-size:16px;font-weight:500;color:var(--accent)}
.hg-words.wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.hg-words.wide .hg-word b{font-size:22px;word-break:keep-all}
.hg .fc-face.long{font-size:clamp(26px,6.4vw,40px);word-break:keep-all}
.qz-opts.stack{grid-template-columns:minmax(0,1fr)}
.qz-opts.stack .qz-opt.ko{font-size:21px;padding:12px 14px}