.lesson-layout { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:22px; align-items:start; }
.thai-source.font-modern, .font-pair .font-modern { font-family:'Noto Sans Thai',sans-serif; font-weight:400; }
.thai-source.font-traditional, .thai-choice.font-traditional, .font-pair .font-traditional, .bucket-letters { font-family:'Thai Traditional',serif; font-weight:400; }
.font-status { padding:16px; background:#fbf3df; border-radius:12px; color:#725712; }
.font-pending .thai-source, .font-pending #thai-choices { visibility:hidden; }
.letter-source-label, .letter-target-label { margin:16px 0 4px; color:#4b5563; font-size:.8rem; font-weight:650; }
.focused-letter .thai-source { font-size:clamp(5rem,16vw,7rem); line-height:1.6; padding:0 16px; }
.focused-letter .thai-choice.font-traditional { font-size:clamp(2.8rem,10vw,4rem); line-height:1.6; min-height:100px; padding:4px 12px; }
.thai-buckets { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.thai-buckets .thai-choice { display:flex; flex-direction:column; align-items:center; gap:12px; min-height:130px; border:2px dashed #b8cddd; font-size:.95rem; }
.bucket-letters { min-height:40px; font-size:1.6rem; line-height:1.8; color:#13598b; word-break:break-all; }
.font-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
.font-pair > div { display:flex; flex-direction:column; text-align:center; padding:10px; background:rgb(255 255 255 / .6); border-radius:10px; }
.font-pair strong { font-size:4rem; line-height:1.8; }
.font-pair small { font-size:.75rem; }
.thai-source.segmentation-source { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0; padding:16px 10px; font-family:'Thai Traditional',serif; font-size:clamp(1.5rem,5vw,2rem); font-weight:400; line-height:2.6; }
.sentence-unit { display:inline-flex; align-items:baseline; white-space:nowrap; }
.boundary-toggle { display:inline-block; position:relative; z-index:1; min-width:14px; width:14px; margin:0 -6px; align-self:stretch; padding:0; border:0; border-radius:4px; background:transparent; color:#9aa9b4; font:inherit; font-size:.45em; cursor:pointer; }
.boundary-toggle[data-kind='none']::before { content:'+'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:12px; opacity:0; }
.boundary-toggle[data-kind='none']:hover::before, .boundary-toggle[data-kind='none']:focus-visible::before { opacity:1; }
.boundary-toggle[aria-pressed='true'] { background:#e7eef3; color:#13598b; font-size:.9em; width:.61em; margin:0 1px; }
.boundary-toggle:hover:not(:disabled) { background:#dce8f1; color:#13598b; }
.boundary-toggle:disabled { cursor:default; }
.separator-preview { padding:14px; border:1px solid #b8cddd; border-radius:10px; background:#f9fafb; overflow-wrap:anywhere; }
.separator-preview strong { display:block; color:#4b5563; font-size:.8rem; margin-bottom:8px; }
.separator-preview span { color:#13598b; font-family:'Thai Traditional',serif; font-size:1.35rem; line-height:1.9; }
.separator-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; }
.separator-tools button { min-height:44px; padding:8px 14px; border:1px solid #b8cddd; border-radius:10px; background:white; color:#13598b; font:inherit; font-size:.9rem; cursor:pointer; }
.separator-tools button[aria-pressed='true'] { color:white; background:#13598b; }
.sentence-row { flex-basis:100%; max-width:100%; }
.sentence-row > .thai-font-caption { display:block; margin-bottom:8px; }
.sentence-row-glyphs { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; }
.sentence-row-glyphs .thai-glyph { line-height:2.6; }
.boundary-toggle[data-kind='syllable'] { background:#fcf6e9; color:#725712; }
.sentence-row-glyphs.thai-glyph--modern .sentence-unit > span { font-family:'Noto Sans Thai',sans-serif; }
.sentence-row-glyphs.thai-glyph--traditional .sentence-unit > span { font-family:'Thai Traditional',serif; }
@media(max-width:420px) { .thai-buckets { gap:7px; } .thai-buckets .thai-choice { font-size:.78rem; padding:10px 6px; } }
.thai-quiz { padding:28px; background:#fff; border:1px solid #e5e7eb; border-top:6px solid #daa520; border-radius:16px; min-width:0; }
.thai-source { margin:18px 0; padding:24px 16px; border-radius:16px; background:#f9fafb; color:#13598b; text-align:center; font-size:clamp(1.8rem,6vw,3.1rem); font-weight:650; line-height:1.8; overflow-wrap:anywhere; }
.thai-source.translation { font-size:clamp(1.2rem,4vw,1.8rem); }
.thai-prompt { margin:0 0 8px; font-size:1.1rem; }
.thai-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.thai-choice { min-height:64px; padding:12px; font:inherit; font-size:1.1rem; line-height:1.8; border:1px solid #b8cddd; border-radius:12px; background:#e7eef3; color:#13598b; cursor:pointer; overflow-wrap:anywhere; }
.thai-choice:hover:not(:disabled) { border-color:#13598b; background:#dce8f1; }
.thai-choice:disabled { cursor:default; opacity:.85; }
.thai-choice.correct { background:#e8f6ed; border-color:#388354; color:#215e38; }
.thai-choice.wrong { background:#f8e9ed; border-color:#800020; color:#800020; }
.thai-quiz button:focus-visible, .thai-guide summary:focus-visible { outline:3px solid #800020; outline-offset:3px; }
.thai-feedback { padding:18px; border-radius:12px; background:#e8f6ed; color:#215e38; margin:18px 0; }
.thai-feedback.bad { background:#f8e9ed; color:#800020; }
.thai-feedback p { margin:8px 0 0; }
.thai-feedback .expected { font-size:1.35rem; font-weight:750; line-height:1.8; }
.thai-action { padding:12px 20px; min-height:48px; border:0; border-radius:12px; font:inherit; font-weight:750; background:#daa520; color:#322600; cursor:pointer; }
.thai-action:hover { background:#13598b; color:white; }
.thai-action:disabled { opacity:.45; cursor:default; }
.thai-guide { border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:20px; box-shadow:0 4px 6px rgb(0 0 0/.06); }
.thai-guide h2 { margin:0; font-size:1.05rem; }
.thai-guide p { color:#4b5563; font-size:.9rem; line-height:1.75; }
.thai-guide .thai-guide-example { color:#13598b; font-size:1.1rem; }
.thai-guide details { margin-top:16px; }
.thai-guide summary { color:#13598b; cursor:pointer; font-weight:650; }
.thai-clock { display:flex; align-items:center; gap:12px; margin:16px 0; color:#725712; font-variant-numeric:tabular-nums; }
.thai-clock progress { flex:1; min-width:0; height:9px; accent-color:#daa520; }
.thai-clock.warning { color:#800020; }
.thai-clock.warning progress { accent-color:#800020; }
.thai-order { min-height:90px; padding:14px; border:2px dashed #b8cddd; border-radius:12px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; margin:16px 0; }
.thai-tokens { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.thai-tokens button, .thai-order button { padding:8px 14px; min-height:48px; border:1px solid #b8cddd; border-radius:10px; color:#13598b; background:#e7eef3; font:inherit; font-size:1.2rem; line-height:1.8; cursor:pointer; }
.thai-tokens button:disabled { opacity:.3; cursor:default; }
.thai-order-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.thai-quiet { font:inherit; font-size:.85rem; border:1px solid #e5e7eb; background:white; color:#13598b; border-radius:9px; padding:8px 12px; cursor:pointer; min-height:44px; }
.thai-audio-status { font-size:.8rem; color:#4b5563; }
.skip-link { position:absolute; left:16px; top:-100px; z-index:20; background:white; padding:12px; color:#13598b; }
.skip-link:focus { top:8px; }
@media(max-width:800px) { .lesson-layout { grid-template-columns:1fr; } .thai-quiz { padding:20px; } }
@media(max-width:420px) { .thai-quiz { padding:16px; } .thai-choice { font-size:1rem; padding:10px; } }