/* Alphabete und Sprachniveaus, aus dem Designsystem (PageScriptsHub, ScriptTrainer, CharTable, LevelPicker). */
.lg-ad .lg-house::before { content: ""; width: 44px; height: 44px; background: url("/_blob/d0d76dd4bc6d0abcb31ce6ba94b7f995") center / contain no-repeat; }
@container lg (min-width: 600px) {
  .lg-footer--v2 .lg-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-footer--v2 .lg-footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; }
  .lg-footer--v2 .lg-footer__brand p { margin: 0; }
  .lg-footer--v2 .lg-footer__brand .lg-btn { margin-top: 0 !important; }
  .lg-footer--v2 .lg-footer__help { grid-column: 1 / -1; margin-top: 0; display: flex; gap: 14px; align-items: baseline; }
  .lg-footer--v2 .lg-footer__help .lg-footer__h { margin: 0; }
  .lg-footer--v2 .lg-footer__lang { grid-column: 1 / -1; }
  .lg-footer--v2 .lg-footer__langs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg-footer--v2 .lg-footer__legal > span { width: auto; }
}
@container lg (min-width: 1100px) {
  .lg-footer--v2 .lg-footer__grid { grid-template-columns: 1.35fr 3.4fr repeat(3, minmax(0, 1.15fr)); gap: var(--space-8) var(--space-6); }
  .lg-footer--v2 .lg-footer__brand { grid-column: auto; display: block; }
  .lg-footer--v2 .lg-footer__brand p { margin: var(--space-3) 0 0; }
  .lg-footer--v2 .lg-footer__brand .lg-btn { margin-top: 16px !important; }
  .lg-footer--v2 .lg-footer__help { display: block; margin-top: var(--space-6); }
  .lg-footer--v2 .lg-footer__help .lg-footer__h { margin: 0 0 var(--space-3); }
  .lg-footer--v2 .lg-footer__lang { grid-column: auto; }
  .lg-footer--v2 .lg-footer__langs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lg-lesson__card:has(> .lg-audio) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); }
.lg-lesson__card:has(> .lg-audio) > * { grid-column: 1 / -1; }
.lg-lesson__card:has(> .lg-audio) > :is(.lg-word__term, .lg-word__ipa) { grid-column: 1; }
.lg-lesson__card:has(> .lg-audio) > .lg-word__ipa { margin-top: calc(-1 * var(--space-2)); }
.lg-lesson__card:has(> .lg-audio) > .lg-audio { grid-column: 2; grid-row: 2 / span 2; align-self: center; justify-self: end; }
:is(.lg-focus .lg-word, .ap-word):has(> .lg-btn--ghost) { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 12px; }
:is(.lg-focus .lg-word, .ap-word):has(> .lg-btn--ghost) > * { grid-column: 1 / -1; }
:is(.lg-focus .lg-word, .ap-word):has(> .lg-btn--ghost) > :is(.lg-word__ipa, .ap-word__ipa) { grid-column: 1; }
:is(.lg-focus .lg-word, .ap-word):has(> .lg-btn--ghost) > .lg-btn--ghost { grid-column: 2; grid-row: auto; min-height: 44px; }
.lg-lesson > .lg-learnad .lg-ad { margin-block: 8px -8px; }
.lg-method { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lg-method__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: var(--space-1); }
.lg-method p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.lg-method .lg-link--arrow { justify-self: start; margin-top: var(--space-2); }
.lg-langtile .lg-langbadge { grid-row: span 2; }
.lg-nw { white-space: nowrap; }
.lg-scriptsample__word .lg-audio { grid-column: 2; grid-row: 1 / span 2; background: var(--highlight); color: var(--on-highlight); }
.lg-scriptcards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@container lg (min-width: 600px) { .lg-scriptcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container lg (min-width: 960px) { .lg-scriptcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
.lg-scriptcard { position: relative; height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.lg-scriptcard:hover { border-color: var(--text); box-shadow: var(--shadow-2); }
.lg-scriptcard__head { display: flex; align-items: center; gap: var(--space-3); }
.lg-scriptcard__head h3 { margin: 0; font: 750 20px/1.2 var(--font-display); }
.lg-scriptcard__head small { display: block; font: 600 13px/1.2 var(--font-text); color: var(--text-muted); }
.lg-scriptcard__sample { margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: 40px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; overflow-wrap: anywhere; display: block; min-height: 92px; box-sizing: border-box; min-width: 0; }
.lg-scriptcard__sample[dir="rtl"] { text-align: start; }
.lg-scriptcard__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
.lg-scriptcard__facts div { display: grid; gap: 2px; }
.lg-scriptcard__facts dt { font: 700 11px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lg-scriptcard__facts dd { margin: 0; font: 800 18px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.lg-scriptcard__note { font-size: 13px; color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; }
.lg-chartable { display: grid; gap: var(--space-4); }
.lg-chartable__bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.lg-chartable__bar .lg-segmented button[aria-pressed="true"] { font-weight: 750; }
.lg-chartable__legend { margin: 0; font-size: 14px; color: var(--text-muted); }
.lg-chartable__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@container lg (min-width: 600px) { .lg-chartable__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container lg (min-width: 960px) { .lg-chartable__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } }
.lg-char { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto auto; gap: 2px var(--space-2); align-items: start; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.lg-char__glyph { grid-column: 1; margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.lg-char__glyph small { font-size: .62em; font-weight: 700; color: var(--text-muted); margin-inline-start: 4px; }
.lg-char__tr { grid-column: 1; font: 800 15px/1.2 var(--font-display); color: var(--accent-text); }
.lg-char__hint { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.lg-char .lg-audio { grid-column: 2; grid-row: 1 / span 2; justify-self: end; background: var(--surface-sunken); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lg-char .lg-audio:hover, .lg-char .lg-audio.is-playing { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.lg-char.is-tricky { border-color: var(--warning); box-shadow: inset 0 3px 0 var(--warning); }
.lg-char.is-silent .lg-char__tr { color: var(--text-muted); }
.lg-chartable--syllabary .lg-chartable__grid { grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; }
.lg-chartable__rowlabel { display: grid; place-items: center; min-width: 26px; font: 800 13px/1 var(--font-display); color: var(--text-muted); text-transform: uppercase; }
.lg-chartable__collabel { display: grid; place-items: center; height: 26px; font: 800 13px/1 var(--font-display); color: var(--text-muted); text-transform: uppercase; }
.lg-syl { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; min-width: 0; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.lg-syl:hover { border-color: var(--text); }
.lg-syl.is-playing { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.lg-syl b { font-size: 32px; font-weight: 700; line-height: 1.15; }
.lg-syl span { font: 800 13px/1 var(--font-display); color: var(--accent-text); }
.lg-syl i { position: absolute; top: 5px; inset-inline-end: 5px; color: var(--text-muted); line-height: 0; }
.lg-syl.is-tricky { border-color: var(--warning); box-shadow: inset 0 3px 0 var(--warning); }
.lg-syl--empty { border: 1px dashed var(--line); background: transparent; cursor: default; }
.lg-chartable__detail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-inverse); color: var(--text-inverse); min-height: 64px; box-sizing: border-box; }
.lg-chartable__detail b { font-size: 38px; font-weight: 700; line-height: 1; }
.lg-chartable__detail span { font-size: 15px; }
.lg-chartable__detail span strong { font: 800 17px var(--font-display); color: var(--highlight); margin-inline-end: 6px; }
.lg-chartable__detail .lg-audio { background: var(--highlight); color: var(--on-highlight); }
@container lg (max-width: 599px) { .lg-syl { min-height: 64px; padding: 6px 2px; } .lg-syl b { font-size: 26px; } .lg-syl i { display: none; } .lg-chartable--syllabary .lg-chartable__grid { gap: 4px; } .lg-chartable__rowlabel { min-width: 18px; font-size: 11px; } }
.lg-chartable[dir="rtl"] .lg-char { padding: 12px 14px 12px 12px; }
.lg-chartable[dir="rtl"] .lg-char__tr, .lg-chartable[dir="rtl"] .lg-char__hint { font-family: var(--font-text); }
.lg-chartable--print { width: 210mm; min-height: 297mm; align-content: start; box-sizing: border-box; padding: 12mm 12mm 10mm; background: #fff; color: #0b1a1c; border: 1px solid #c0cbcd; gap: 4mm; }
.lg-chartable__printhead { display: none; justify-content: space-between; align-items: end; padding-bottom: 3mm; border-bottom: 1.5pt solid #0b1a1c; }
.lg-chartable__printhead b { display: flex; align-items: center; gap: 8px; font: 800 18pt/1.1 var(--font-display); }
.lg-chartable__printhead span { font: 600 8.5pt var(--font-text); color: #3a4b4d; text-align: end; }
.lg-chartable__printfoot { display: none; justify-content: space-between; font: 600 8pt var(--font-text); color: #3a4b4d; border-top: .5pt solid #c0cbcd; padding-top: 2mm; }
.lg-chartable--print .lg-chartable__printhead, .lg-chartable--print .lg-chartable__printfoot { display: flex; }
.lg-chartable--print .lg-chartable__bar, .lg-chartable--print .lg-chartable__detail, .lg-chartable--print .lg-audio, .lg-chartable--print .lg-syl i { display: none !important; }
.lg-chartable--print .lg-chartable__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.2mm; }
.lg-chartable--print .lg-char { grid-template-columns: 1fr; padding: 2.4mm 2.6mm; border-color: #c0cbcd; border-radius: 1.5mm; break-inside: avoid; }
.lg-chartable--print .lg-char__glyph { font-size: 20pt; }
.lg-chartable--print .lg-char__tr { font-size: 10pt; color: #006768; }
.lg-chartable--print .lg-char__hint { font-size: 7.5pt; color: #3a4b4d; }
.lg-chartable--print.lg-chartable--syllabary .lg-chartable__grid { grid-template-columns: auto repeat(5, minmax(0, 1fr)); }
.lg-chartable--print .lg-syl { min-height: 0; padding: 2mm 1mm; border-color: #c0cbcd; }
.lg-chartable--print .lg-syl b { font-size: 20pt; }
.lg-chartable--print .lg-syl span { font-size: 8.5pt; color: #006768; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html[data-print-one] body *:not(.is-print-target, .is-print-target *, :has(.is-print-target)) { display: none !important; }
  html[data-print-one] .lg-chartable.is-print-target { width: auto; min-height: 0; border: 0; padding: 0; background: #fff; }
  .lg-chartable { gap: 3mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html .lg-chartable .lg-syl { min-height: 0; padding: 1.2mm 1mm; }
  html .lg-chartable .lg-syl b { font-size: 20pt; }
  html .lg-chartable .lg-syl span { font-size: 8.5pt; color: #006768; }
  .lg-chartable .lg-char { grid-template-columns: 1fr; padding: 1.8mm 2.4mm; border-radius: 1.5mm; }
  .lg-chartable .lg-char__glyph { font-size: 20pt; }
  .lg-chartable .lg-char__tr { font-size: 10pt; color: #006768; }
  .lg-chartable .lg-char__hint { font-size: 7.5pt; color: #3a4b4d; }
  .lg-chartable .lg-chartable__printhead, .lg-chartable .lg-chartable__printfoot { display: flex; }
  .lg-chartable .lg-chartable__bar, .lg-chartable .lg-chartable__detail, .lg-chartable .lg-audio, .lg-chartable .lg-syl i { display: none !important; }
  .lg-chartable .lg-chartable__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.2mm; }
  .lg-chartable--syllabary .lg-chartable__grid { grid-template-columns: auto repeat(5, minmax(0, 1fr)); }
  .lg-char, .lg-syl { break-inside: avoid; border-color: #c0cbcd; }
}
.lg-printsheet { overflow-x: auto; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.lg-printsheet > * { margin-inline: auto; box-shadow: 0 0 0 1px rgba(0,0,0,.08), var(--shadow-2); }
@container lg (max-width: 599px) { .lg-printsheet { overflow: hidden; padding: var(--space-3); } .lg-printsheet > * { zoom: .42; } }
@container lg (min-width: 960px) { .lg-printsheet > * { zoom: .9; } }
.lg-lookalikes { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@container lg (min-width: 600px) { .lg-lookalikes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container lg (min-width: 960px) { .lg-lookalikes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
.lg-lookalike { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lg-lookalike__glyph { width: 72px; height: 72px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--warning-soft); font-size: 44px; font-weight: 800; line-height: 1; }
.lg-lookalike__pair { display: grid; gap: 6px; font-size: 15px; }
.lg-lookalike__pair > span { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.lg-lookalike__pair small { font: 700 11px/1.2 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.lg-lookalike__pair s { text-decoration-thickness: 2px; text-decoration-color: var(--danger); color: var(--text-muted); font: 700 18px var(--font-display); }
.lg-lookalike__pair b { font: 800 18px var(--font-display); color: var(--success-text); }
.lg-lookalike p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--text-muted); }
.lg-firstwords { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@container lg (min-width: 600px) { .lg-firstwords { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container lg (min-width: 960px) { .lg-firstwords { gap: var(--space-3) var(--gutter); } }
.lg-fword { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: 12px 12px 12px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lg-fword__w { font-size: 28px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.lg-fword__m { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; color: var(--text-muted); }
.lg-fword__m b { color: var(--accent-text); font: 800 15px var(--font-display); }
.lg-fword .lg-audio { grid-column: 2; grid-row: 1 / span 2; }
.lg-fword__tip { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; color: var(--warning-text); display: flex; gap: 6px; align-items: flex-start; }
.lg-scriptsteps { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; counter-reset: ss; }
@container lg (min-width: 960px) { .lg-scriptsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
.lg-scriptsteps li { counter-increment: ss; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--text); }
.lg-scriptsteps h3 { margin: 0; display: flex; align-items: center; gap: var(--space-3); font: 750 19px/1.2 var(--font-display); }
.lg-scriptsteps h3::before { content: counter(ss); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-inverse); color: var(--text-inverse); font: 800 15px/1 var(--font-display); }
.lg-scriptsteps p { margin: 0; font-size: 15px; color: var(--text-muted); }
.lg-scriptsteps .lg-scriptsteps__glyphs { margin: 4px 0 0; font-size: 28px; font-weight: 800; letter-spacing: .08em; }
.lg-method { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-3); }
.lg-method > .lg-method__icon { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
.lg-method > h3 { grid-column: 2; grid-row: 1; align-self: center; }
.lg-method > p, .lg-method > .lg-link--arrow { grid-column: 1 / -1; }
.lg-toolhead { padding-block: var(--space-6) var(--space-8); }
.lg-toolhead__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container lg (min-width: 960px) { .lg-toolhead__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-10); } }
.lg-toolhead__text { display: grid; gap: var(--space-4); align-content: start; }
.lg-toolhead h1 { font-size: clamp(32px, 4.4cqi, 48px); line-height: 1.05; }
.lg-toolhead__answer { margin: 0; font-size: 18px; line-height: 1.5; max-width: 52ch; }
.lg-toolhead__answer b { font-family: var(--font-display); font-weight: 800; }
.lg-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-tools .lg-btn { min-height: 52px; }
.lg-btn--print { background: var(--highlight); color: var(--on-highlight); border-color: var(--highlight); }
.lg-btn--print:hover { filter: brightness(.96); }
@container lg (max-width: 599px) { .lg-tools { display: grid; grid-template-columns: 1fr 1fr; } .lg-tools .lg-btn:first-child { grid-column: 1 / -1; } .lg-tools .lg-btn { padding-inline: 12px; } }
.lg-scriptlink-pill { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px 14px 4px 6px; border-radius: var(--radius-full); background: var(--warm-soft); color: var(--text); text-decoration: none; font: 650 15px/1.2 var(--font-text); box-shadow: inset 0 0 0 1px var(--warm); }
.lg-scriptlink-pill b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); font-size: 19px; font-weight: 700; }
.lg-scriptlink-pill .lg-icon { color: var(--text-muted); }
.lg-chartable--syllabary .lg-syl { min-height: 84px; gap: 4px; }
.lg-chartable--syllabary .lg-syl b { font-size: 36px; font-weight: 500; }
.lg-chartable--syllabary .lg-syl span { font-size: 14px; letter-spacing: .02em; }
.lg-chartable--syllabary .lg-chartable__collabel, .lg-chartable--syllabary .lg-chartable__rowlabel { font-size: 15px; color: var(--text); }
.lg-chartable--syllabary .lg-chartable__grid > :nth-child(12n+7), .lg-chartable--syllabary .lg-chartable__grid > :nth-child(12n+8), .lg-chartable--syllabary .lg-chartable__grid > :nth-child(12n+9), .lg-chartable--syllabary .lg-chartable__grid > :nth-child(12n+10), .lg-chartable--syllabary .lg-chartable__grid > :nth-child(12n+11), .lg-chartable--syllabary .lg-chartable__grid > :nth-child(12n+12) { }
@container lg (max-width: 599px) { .lg-chartable--syllabary .lg-syl { min-height: 66px; } .lg-chartable--syllabary .lg-syl b { font-size: 28px; } .lg-chartable--syllabary .lg-syl span { font-size: 12px; } }
.lg-chartable__count { font: 700 14px/1.2 var(--font-text); color: var(--text-muted); }
.lg-trainer { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.lg-trainer__head { display: flex; align-items: center; gap: var(--space-3); }
.lg-trainer__head h2, .lg-trainer__head h3 { margin: 0; font: 800 21px/1.2 var(--font-display); }
.lg-trainer__head .lg-icon { color: var(--accent-text); }
.lg-trainer__step { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.lg-trainer__step legend { padding: 0; margin-bottom: var(--space-2); font: 700 12px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lg-trainer__modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.lg-trainer__mode { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-2); align-items: center; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.lg-trainer__mode input { position: absolute; opacity: 0; }
.lg-trainer__mode > [data-icon], .lg-trainer__mode > svg, .lg-trainer__mode .lg-icon { grid-column: 1; grid-row: 1 / 3; color: var(--accent-text); }
.lg-trainer__mode > b, .lg-trainer__mode > small { grid-column: 2; }
.lg-trainer__mode b { font: 750 15px/1.2 var(--font-display); }
.lg-trainer__mode small { font-size: 13px; color: var(--text-muted); line-height: 1.25; }
.lg-trainer__mode:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--surface-hover); }
.lg-trainer__mode:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lg-trainer__groups { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-trainer__group { position: relative; display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: center; min-height: 48px; padding: 6px 12px 8px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.lg-trainer__group input { position: absolute; opacity: 0; }
.lg-trainer__group b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.lg-trainer__group span { font: 650 13px/1.1 var(--font-text); color: var(--text-muted); }
.lg-trainer__group i { grid-column: 1 / -1; height: 4px; margin-top: 6px; border-radius: 2px; background: linear-gradient(var(--success), var(--success)) left / var(--m, 0%) 100% no-repeat, var(--surface-sunken); }
.lg-trainer__group:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.lg-trainer__group:has(input:checked) span { color: var(--accent-text); }
.lg-trainer__group:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lg-trainer__all { justify-self: start; min-height: 36px; padding: 0; border: 0; background: none; color: var(--accent-text); font: 700 14px var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lg-trainer__go { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.lg-trainer__go .lg-segmented { flex: none; }
.lg-trainer__save { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.lg-trainer__save .lg-icon { flex: none; margin-top: 1px; }
.lg-trainer__setup { display: grid; gap: var(--space-4); }
.lg-trainer [hidden], .lg-levels [hidden], .lg-levelcheck [hidden] { display: none !important; }
.lg-trainer__play, .lg-trainer__done { display: none; gap: var(--space-4); }
.lg-trainer[data-state="play"] .lg-trainer__setup, .lg-trainer[data-state="done"] .lg-trainer__setup { display: none; }
.lg-trainer[data-state="play"] .lg-trainer__play { display: grid; }
.lg-trainer[data-state="done"] .lg-trainer__done { display: grid; }
.lg-trainer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lg-trainer__meta .lg-badge { background: var(--warning-soft); color: var(--warning-text); border: 0; }
.lg-trainer__dots { display: flex; gap: 4px; }
.lg-trainer__dots i { flex: 1; height: 8px; border-radius: 2px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.lg-trainer__dots i.is-ok { background: var(--success); box-shadow: none; }
.lg-trainer__dots i.is-no { background: var(--danger); box-shadow: none; }
.lg-trainer__dots i.is-now { box-shadow: inset 0 0 0 2px var(--text); }
.lg-trainer__prompt { display: grid; place-items: center; gap: 6px; min-height: 160px; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); text-align: center; }
.lg-trainer__prompt b { font-size: 80px; font-weight: 600; line-height: 1.05; }
.lg-trainer__prompt span { font-size: 14px; color: var(--text-muted); }
.lg-trainer__prompt .lg-audio { --_s: 88px; }
.lg-trainer__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.lg-trainer__opts .lg-opt { min-height: 60px; font: 750 19px/1.2 var(--font-display); }
.lg-trainer__opts .lg-opt b { font-size: 30px; font-weight: 600; line-height: 1; }
.lg-trainer__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.lg-trainer__quit { min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-muted); font: 650 14px var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@container lg (max-width: 599px) { .lg-trainer { padding: var(--space-4); } .lg-trainer__prompt { min-height: 132px; } .lg-trainer__prompt b { font-size: 64px; } }
.lg-trainer__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--success-soft); }
.lg-trainer__score .lg-ring { --_s: 88px; }
.lg-trainer__score h3 { margin: 0; font: 800 22px/1.2 var(--font-display); }
.lg-trainer__score p { margin: 4px 0 0; font-size: 15px; color: var(--text-muted); }
.lg-trainer__wrong { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.lg-trainer__wrong li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); }
.lg-trainer__wrong li b { font-size: 24px; font-weight: 700; }
.lg-trainer__wrong li small { font: 700 13px var(--font-display); color: var(--danger-text); }
.lg-trainer__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-scriptswitch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: center; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--warm-soft); box-shadow: inset 0 0 0 1px var(--warm); }
.lg-scriptswitch__glyph { width: 96px; height: 96px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface); font-size: 56px; font-weight: 600; line-height: 1; }
.lg-scriptswitch h2 { margin: 0; font: 800 24px/1.15 var(--font-display); }
.lg-scriptswitch p { margin: 6px 0 0; color: var(--text-muted); }
.lg-scriptswitch__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@container lg (min-width: 960px) { .lg-scriptswitch { grid-template-columns: auto minmax(0, 1fr) auto; } .lg-scriptswitch__btns { grid-column: auto; } }
@container lg (max-width: 599px) { .lg-scriptswitch { padding: var(--space-4); } .lg-scriptswitch__glyph { width: 72px; height: 72px; font-size: 42px; } .lg-scriptswitch h2 { font-size: 20px; } }
.lg-scriptchoice { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@container lg (min-width: 600px) { .lg-scriptchoice { grid-template-columns: 1fr 1fr; } }
.lg-scriptchoice > div { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.lg-scriptchoice > div.is-here { border-color: var(--text); box-shadow: inset 0 3px 0 var(--accent); }
.lg-scriptchoice h3 { margin: 0; display: flex; align-items: center; gap: var(--space-3); font: 750 19px/1.2 var(--font-display); }
.lg-scriptchoice h3 b { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: 24px; font-weight: 600; }
.lg-scriptchoice h3 .lg-badge { margin-inline-start: auto; }
.lg-scriptchoice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.lg-scriptchoice li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.lg-scriptchoice li .lg-icon { color: var(--success-text); margin-top: 3px; }
.lg-scriptchoice__ex { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }
.lg-scriptchoice__ex b { color: var(--text); font-size: 18px; font-weight: 600; margin-inline-end: 4px; }
.lg-scriptcard--tool { cursor: default; }
.lg-scriptcard--tool:hover { box-shadow: none; border-color: var(--line); }
.lg-scriptcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.lg-scriptcard__btns .lg-btn { min-height: 48px; padding-inline: 10px; }
@container lg (min-width: 960px) { .lg-scriptcards:has(> li:first-child:nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-scriptcards:has(> li:first-child:nth-last-child(2)) > li:first-child { grid-column: auto; } .lg-scriptcards:has(> li:first-child:nth-last-child(2)) .lg-scriptcard__sample { font-size: 60px; min-height: 140px; padding: var(--space-6); } }
.lg-scriptcards--soon { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: 14px; color: var(--text-muted); }
.lg-lvl { --lv: var(--accent); --on-lv: #fff; --level-c1: #4e3a86; --level-c2: #8a2f3c; }
.lg-lvl[data-level="A1"] { --lv: var(--level-a1); --on-lv: var(--on-level-a1, #0b1a1c); --lv-text: #6b4e00; }
.lg-lvl[data-level="A2"] { --lv: var(--level-a2); --on-lv: var(--on-level-a2, #0b1a1c); --lv-text: #954c28; }
.lg-lvl[data-level="B1"] { --lv: var(--level-b1); }
.lg-lvl[data-level="B2"] { --lv: var(--level-b2); }
.lg-lvl[data-level="C1"] { --lv: var(--level-c1); }
.lg-lvl[data-level="C2"] { --lv: var(--level-c2); }
.lg-levels { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); }
.lg-levels__top { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.lg-levels__lang { display: inline-flex; align-items: center; gap: var(--space-2); font: 650 14px/1.2 var(--font-text); color: var(--text-muted); }
.lg-levels__pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.lg-levels__pick button { position: relative; min-height: 56px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: 850 20px/1 var(--font-display); letter-spacing: -.01em; cursor: pointer; display: grid; place-items: center; gap: 2px; }
.lg-levels__pick button small { font: 650 11px/1 var(--font-text); color: var(--text-muted); letter-spacing: 0; }
.lg-levels__pick button:hover { background: var(--surface); }
.lg-levels__pick button[aria-selected="true"] { background: var(--lv); color: var(--on-lv); box-shadow: var(--shadow-1); }
.lg-levels__pick button[aria-selected="true"] small { color: inherit; opacity: .85; }
.lg-levels__pick button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@container lg (max-width: 599px) { .lg-levels { padding: var(--space-4); } .lg-levels__pick { gap: 4px; padding: 4px; position: sticky; top: 8px; z-index: 2; } .lg-levels__pick button { min-height: 52px; font-size: 18px; } .lg-levels__pick button small { display: none; } }
.lg-levels__panel { display: grid; gap: var(--space-4); }
.lg-levels__panel[hidden] { display: none; }
.lg-levels__body { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@container lg (min-width: 960px) { .lg-levels__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-6); } }
.lg-levels__story { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg); border-inline-start: 5px solid var(--lv); }
.lg-levels__story h3 { margin: 0; display: flex; align-items: center; gap: var(--space-3); font: 800 22px/1.2 var(--font-display); }
.lg-levels__story h3 .lg-level { background: var(--lv); color: var(--on-lv); }
.lg-levels__text { margin: 0; font-size: 20px; line-height: 1.6; }
@container lg (max-width: 599px) { .lg-levels__text { font-size: 18px; } }
.lg-levels__audio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.lg-levels__audio .lg-audio { --_s: 52px; background: var(--lv); color: var(--on-lv); }
.lg-levels__audio .lg-progress > span { background: var(--lv); }
.lg-levels__audio small { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-levels__facts { display: grid; gap: var(--space-3); align-content: start; }
.lg-levels__facts h4 { margin: 0; font: 700 12px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lg-levels__can { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.lg-levels__can li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.lg-levels__can .lg-icon { color: var(--lv-text, var(--lv)); margin-top: 3px; }
.lg-levels__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.lg-levels__nums div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.lg-levels__nums dd { white-space: nowrap; }
.lg-levels__nums dt { font: 650 12px/1.2 var(--font-text); color: var(--text-muted); }
.lg-levels__nums dd { margin: 0; font: 850 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.lg-levels__step { display: flex; justify-content: space-between; gap: var(--space-2); }
.lg-levels__note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-muted); }
.lg-levels__note .lg-icon { flex: none; margin-top: 1px; }
.lg-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@container lg (min-width: 960px) { .lg-ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; } }
.lg-ladder li { display: grid; gap: 6px; align-content: start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--lv); }
@container lg (min-width: 960px) { .lg-ladder li { min-height: calc(150px + var(--i) * 26px); } }
@container lg (max-width: 959px) { .lg-ladder li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); } .lg-ladder li p { grid-column: 1 / -1; } }
.lg-ladder b { font: 850 26px/1 var(--font-display); color: var(--lv-text, var(--lv)); }
.lg-ladder strong { font: 750 16px/1.2 var(--font-display); }
.lg-ladder span { font: 700 13px/1.2 var(--font-text); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lg-ladder p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.lg-levelcheck { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.lg-levelcheck__q { display: grid; gap: var(--space-3); }
.lg-levelcheck__q[hidden] { display: none; }
.lg-levelcheck__hear { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.lg-levelcheck__hear .lg-audio { --_s: 64px; }
.lg-levelcheck__hear b { display: block; font: 750 18px/1.2 var(--font-display); }
.lg-levelcheck__hear span { font-size: 14px; color: var(--text-muted); }
.lg-levelcheck__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
@container lg (min-width: 960px) { .lg-levelcheck__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lg-levelcheck__opts button { width: 100%; min-height: 64px; display: grid; gap: 4px; justify-items: center; align-content: center; padding: 8px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 700 15px/1.2 var(--font-text); cursor: pointer; }
.lg-levelcheck__opts button i { display: block; width: 44px; height: 8px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent)) left / var(--p) 100% no-repeat, var(--surface-sunken); }
.lg-levelcheck__opts button:hover, .lg-levelcheck__opts button[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.lg-levelcheck__res { display: none; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--text-inverse); }
.lg-levelcheck.is-done .lg-levelcheck__res { display: grid; }
.lg-levelcheck.is-done .lg-levelcheck__q, .lg-levelcheck.is-done .lg-levelcheck__bar { display: none; }
.lg-levelcheck__res > b { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--radius-md); background: var(--highlight); color: var(--on-highlight); font: 850 40px/1 var(--font-display); }
.lg-levelcheck__res h3 { margin: 0; font: 800 22px/1.2 var(--font-display); color: inherit; }
.lg-levelcheck__res p { margin: 6px 0 0; opacity: .85; font-size: 15px; }
.lg-levelcheck__res .lg-levelcheck__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-levelcheck__res .lg-btn--ghost { color: var(--text-inverse); border-color: rgba(255,255,255,.4); }
.lg-levelcheck__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: 14px; color: var(--text-muted); }
.lg-disclaimer { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info-text); font-size: 14px; line-height: 1.45; }
.lg-disclaimer .lg-icon { flex: none; margin-top: 1px; }
.lg-levelcta { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@container lg (min-width: 600px) { .lg-levelcta { grid-template-columns: 1fr 1fr; } }
.lg-levelcta a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.lg-levelcta a:first-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lg-levelcta a b { display: block; font: 800 20px/1.2 var(--font-display); }
.lg-levelcta a span { font-size: 15px; opacity: .85; }
.lg-levelcta .lg-tile__icon { background: var(--surface); color: var(--text); }
.lg-levelcta a:first-child .lg-tile__icon { background: rgba(255,255,255,.18); color: inherit; }
.lg-char__forms { grid-column: 1 / -1; display: flex; gap: 10px; font-size: 20px; color: var(--text-muted); }