:root{--font-thai:"Itim", "Leelawadee UI", Tahoma, sans-serif;--font-ui:system-ui, -apple-system, "Segoe UI", sans-serif;--color-bg:#faf9f7;--color-surface:#fff;--color-border:#e3e0da;--color-text:#2b2620;--color-muted:#8a8377;--color-accent:#b9502b;--color-correct:#3f8a4c;--color-wrong:#c0392b;--color-correct-bg:#e7f4e9;--color-wrong-bg:#fbeaea;--shadow-panel:#2b262026;--color-accent-soft:color-mix(in srgb, var(--color-accent) 18%, var(--color-bg));--shadow-accent:color-mix(in srgb, var(--color-accent) 30%, transparent)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#1c1a17;--color-surface:#262320;--color-border:#3a3530;--color-text:#f0ede8;--color-muted:#9c9488;--color-accent:#e07a4f;--color-correct:#6fcf7f;--color-wrong:#e8685a;--color-correct-bg:#1f3324;--color-wrong-bg:#3a1f1c;--shadow-panel:#0006}}:root[data-theme=dark]{--color-bg:#1c1a17;--color-surface:#262320;--color-border:#3a3530;--color-text:#f0ede8;--color-muted:#9c9488;--color-accent:#e07a4f;--color-correct:#6fcf7f;--color-wrong:#e8685a;--color-correct-bg:#1f3324;--color-wrong-bg:#3a1f1c;--shadow-panel:#0006}:root[data-font=digital]{--font-thai:"Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif}:root[data-font=handwriting]{--font-thai:"Itim", "Leelawadee UI", Tahoma, sans-serif}:root[data-font=textbook]{--font-thai:"Sarabun", "Leelawadee UI", Tahoma, sans-serif}*{box-sizing:border-box}.icon{vertical-align:-.15em;display:inline-block}html{overscroll-behavior:none;overflow-x:hidden}body{font-family:var(--font-ui);background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent;margin:0;overflow-x:hidden}button,select,.letter,.class-toggle,.tabs__button,.exercise__sentence,.exercise__word{touch-action:manipulation}.page{max-width:1500px;margin:0 auto;padding:1.5rem 1rem 4rem;overflow-x:hidden}.topbar{z-index:20;align-items:center;gap:.5rem;display:flex;position:fixed;top:1rem;right:1rem}.tabs-toggle{border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;width:2.25rem;height:2.25rem;color:var(--color-muted);border-radius:999px;justify-content:center;align-items:center;font-size:1.1rem;transition:border-color .15s,color .15s;display:none}.tabs-toggle:hover,.tabs-toggle[aria-expanded=true]{border-color:var(--color-accent);color:var(--color-accent)}.settings{position:relative}.settings__toggle{border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;width:2.25rem;height:2.25rem;color:var(--color-muted);border-radius:999px;justify-content:center;align-items:center;transition:border-color .15s,color .15s;display:flex}.settings__toggle-icon{width:1.15rem;height:1.15rem}.settings__toggle:hover,.settings__toggle[aria-expanded=true]{border-color:var(--color-accent);color:var(--color-accent)}.settings__panel{background:var(--color-surface);border:1px solid var(--color-border);min-width:240px;max-height:calc(100vh - 5rem);box-shadow:0 8px 24px var(--shadow-panel);border-radius:10px;padding:.4rem;position:absolute;top:calc(100% + .5rem);right:0;overflow-y:auto}.settings__panel[hidden]{display:none}.settings__item{cursor:pointer;color:var(--color-text);-webkit-user-select:none;user-select:none;border-radius:6px;align-items:center;gap:.55rem;padding:.5rem;font-size:.85rem;display:flex}.settings__item:hover{background:var(--color-bg)}.settings__item input[type=checkbox]{accent-color:var(--color-accent);cursor:pointer;margin-left:auto}.settings__item select{font:inherit;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);cursor:pointer;border-radius:6px;margin-left:auto;padding:.2rem .4rem}.settings__item input[type=color]{border:1px solid var(--color-border);cursor:pointer;background:0 0;border-radius:6px;width:1.9rem;height:1.9rem;margin-left:auto;padding:0}.settings__item input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.settings__item input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.settings__item input[type=color]::-moz-color-swatch{border:none;border-radius:4px}.settings__accent-reset{font:inherit;color:var(--color-muted);cursor:pointer;background:0 0;border:none;padding:0 .3rem;font-size:.75rem;text-decoration:underline}.settings__accent-reset:hover{color:var(--color-accent)}.page__title{text-align:center;margin:0 0 1.25rem;padding-right:2.75rem;font-size:1.5rem}@media (width<=640px){.page__title{padding-right:4.25rem}}.notice{background:var(--color-accent-soft);border:1px solid var(--color-accent);color:var(--color-accent);border-radius:8px;margin:0 0 1rem;padding:.6rem .9rem;font-size:.85rem}.tabs{border-bottom:1px solid var(--color-border);gap:.5rem;margin-bottom:1.25rem;display:flex}.tabs__button{font:inherit;cursor:pointer;color:var(--color-muted);background:0 0;border:none;border-bottom:2px solid #0000;padding:.6rem 1.1rem}.tabs__button.is-active{color:var(--color-accent);border-bottom-color:var(--color-accent);font-weight:600}.tabs__group{gap:.5rem;margin-left:auto;display:flex}@media (width<=640px){.tabs-toggle{display:flex}.tabs{background:var(--color-surface);border:1px solid var(--color-border);min-width:180px;max-height:calc(100vh - 5rem);box-shadow:0 8px 24px var(--shadow-panel);z-index:20;border-radius:10px;flex-direction:column;gap:0;margin-bottom:0;padding:.4rem;display:none;position:fixed;top:3.75rem;left:auto;right:1rem;overflow-y:auto}.tabs.is-open{display:flex}.tabs__button{text-align:left;border-bottom:none;border-radius:6px;padding:.6rem .7rem}.tabs__button.is-active{background:var(--color-accent-soft)}.tabs__group{border-top:1px solid var(--color-border);flex-direction:column;gap:0;margin-top:.4rem;margin-left:0;padding-top:.4rem}}.section{display:none}body[data-active-tab=consonants] .section--consonants,body[data-active-tab=vowels] .section--vowels,body[data-active-tab=digits] .section--digits,body[data-active-tab=finals] .section--finals,body[data-active-tab=quiz] .section--quiz,body[data-active-tab=flashcards] .section--flashcards,body[data-active-tab=exercises] .section--exercises{display:block}.section-heading{text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted);margin:1.5rem 0 .5rem;font-size:1rem}.section-heading-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.section-heading-row .section-heading{margin:1.5rem 0 .5rem}.class-toggles{align-items:center;gap:.4rem;display:flex}.class-toggle{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;padding:.3rem .75rem;font-size:.8rem;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:inline-flex;position:relative}.class-toggle:hover{border-color:var(--color-accent)}.class-toggle:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:1px}.class-toggle:has(input:checked){background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.class-toggle input[type=checkbox]{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}body.details-hidden .letter__note,body.details-hidden .letter__actions{display:none}.listing{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem;display:grid}.consonant-columns,.vowel-columns{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem .8rem;margin-bottom:.5rem;display:grid}.consonant-columns__col,.vowel-columns__col{flex-direction:column;min-width:0;display:flex}@media (width<=640px){.consonant-columns__col:not(:first-child),.vowel-columns__col:not(:first-child){border-top:1px solid var(--color-border);margin-top:1rem;padding-top:1rem}}.column-heading{text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted);margin:0 0 .4rem;font-size:.75rem}.listing--grouped{flex-wrap:wrap;align-items:flex-start;gap:.7rem 1.1rem;display:flex}.sound-group{flex-direction:column;gap:.3rem;width:76px;display:flex}.listing--vowels .sound-group{flex-direction:row;justify-content:center;width:auto}.listing--vowels .letter{width:76px}@media (width<=480px){.consonant-columns{gap:.4rem .3rem}.sound-group,.listing--vowels .letter{width:58px}}.letter{background:var(--color-surface);border:1px solid var(--color-border);text-align:center;border-radius:10px;flex-direction:column;transition:transform .15s,box-shadow .15s;display:flex;overflow:hidden}.letter.is-active{box-shadow:0 4px 14px var(--shadow-accent);border-color:var(--color-accent);transform:translateY(-2px)}.letter--clickable .letter__body{cursor:pointer}.letter--clickable .letter__body:hover{background:var(--color-accent-soft)}.letter__body{flex:1;padding:.45rem .4rem .35rem}.letter__actions{border-top:1px solid var(--color-border);margin-top:0;display:flex}.letter__audio-btn,.letter__final-btn{cursor:pointer;color:var(--color-muted);background:0 0;border:none;flex:1;justify-content:center;align-items:center;padding:.4rem .3rem;font-size:.9rem;display:flex}.letter__audio-btn:hover,.letter__final-btn:hover,.letter__audio-btn.is-playing,.letter__final-btn.is-playing{background:var(--color-accent-soft);color:var(--color-accent)}.letter__actions>button+button{border-left:1px solid var(--color-border)}.letter__title-row{text-align:center}.letter__title-wrap{display:inline-block;position:relative}.letter__title{font-family:var(--font-thai);font-size:1.6rem;font-style:normal;font-weight:400;display:block}.letter__final-suffix{white-space:nowrap;font-family:var(--font-thai);color:var(--color-muted);opacity:.75;margin-left:.15rem;font-size:.75rem;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.letter__sound{color:var(--color-accent);margin-top:.05rem;font-size:.8rem;font-style:normal;display:block}.letter__length-tag{text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;margin-top:.15rem;padding:.05rem .35rem;font-size:.55rem;display:inline-block}.letter[data-length=long] .letter__length-tag{color:var(--color-accent);background:var(--color-accent-soft);border-color:var(--color-accent)}body.hide-short .letter[data-length=short],body.hide-long .letter[data-length=long]{display:none}.letter__note{color:var(--color-muted);margin-top:.1rem;font-size:.65rem;display:block}.finals__intro{color:var(--color-muted);max-width:640px;font-size:.85rem;line-height:1.5}.finals__groups{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;display:grid}.final-group{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:.75rem;transition:transform .15s,box-shadow .15s}.final-group.is-active{box-shadow:0 4px 14px var(--shadow-accent);border-color:var(--color-accent);transform:translateY(-2px)}.final-group__header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.final-group__symbol{font-family:var(--font-thai);color:var(--color-accent);font-size:1.3rem}.final-group__sound-btn,.final-group__example-btn{border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;border-radius:999px;padding:.2rem .5rem;font-size:.8rem}.final-group__sound-btn:hover,.final-group__sound-btn.is-playing,.final-group__example-btn:hover,.final-group__example-btn.is-playing{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.final-group__members{flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem;display:flex}.final-group__member{font-family:var(--font-thai);border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;color:var(--color-text);border-radius:6px;padding:.1rem .45rem;font-size:1.1rem}.final-group__member:hover,.final-group__member.is-playing{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.final-group__example{border-top:1px solid var(--color-border);flex-wrap:wrap;align-items:baseline;gap:.4rem;padding-top:.5rem;font-size:.85rem;display:flex}.final-group__example-thai{font-family:var(--font-thai);font-size:1.2rem;font-weight:400}.final-group__example-roman{color:var(--color-accent);font-style:normal}.final-group__example-gloss{color:var(--color-muted);flex:1}.quiz__stats{color:var(--color-muted);flex-wrap:wrap;gap:1rem;margin-bottom:1rem;font-size:.85rem;display:flex}.quiz__stats b{color:var(--color-text)}.quiz__setup{margin-bottom:1.25rem}.quiz__setup-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.quiz__setup-label{color:var(--color-muted);min-width:4rem;font-size:.8rem}.quiz__setup-row .class-toggles,.flashcards__setup-row .class-toggles{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:.3rem;overflow-x:auto}.quiz__setup-row .class-toggles .class-toggle,.flashcards__setup-row .class-toggles .class-toggle{flex-shrink:0}.quiz__card{background:var(--color-surface);border:1px solid var(--color-border);text-align:center;box-sizing:border-box;overflow-wrap:break-word;border-radius:14px;width:100%;max-width:420px;margin:0 auto;padding:2rem 1.5rem;transition:box-shadow .15s,border-color .15s}@media (width<=480px){.quiz__card{padding:1.5rem 1rem}}.quiz__card.is-active{box-shadow:0 4px 14px var(--shadow-accent);border-color:var(--color-accent)}.quiz__prompt{font-family:var(--font-thai);font-size:4rem;line-height:1}.quiz__prompt--roman{font-family:var(--font-ui);overflow-wrap:break-word;font-size:1.8rem}.quiz__play{font:inherit;color:var(--color-text);border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;border-radius:999px;margin:1rem 0 1.5rem;padding:.4rem 1rem}.quiz__play:hover,.quiz__play.is-playing{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.quiz__options{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.quiz__option{font:inherit;color:var(--color-text);border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;border-radius:8px;padding:.7rem;font-size:1rem}.quiz__option:disabled{cursor:default}.quiz__option.is-correct{border-color:var(--color-correct);background:var(--color-correct-bg);color:var(--color-correct);font-weight:600}.quiz__option.is-wrong{border-color:var(--color-wrong);background:var(--color-wrong-bg);color:var(--color-wrong)}.quiz__option--thai{font-family:var(--font-thai);font-size:1.4rem}.quiz__feedback{overflow-wrap:break-word;min-height:1.2em;margin-top:1rem;font-weight:600}.flashcards__stats{color:var(--color-muted);flex-wrap:wrap;gap:1rem;margin-bottom:1rem;font-size:.85rem;display:flex}.flashcards__stats b{color:var(--color-text)}.flashcards__setup{margin-bottom:1.25rem}.flashcards__setup-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.flashcards__setup-label{color:var(--color-muted);min-width:4rem;font-size:.8rem}.flashcards__card{background:var(--color-surface);border:1px solid var(--color-border);text-align:center;box-sizing:border-box;overflow-wrap:break-word;border-radius:14px;width:100%;max-width:420px;margin:0 auto;padding:2rem 1.5rem;transition:box-shadow .15s,border-color .15s}@media (width<=480px){.flashcards__card{padding:1.5rem 1rem}}.flashcards__card.is-active{box-shadow:0 4px 14px var(--shadow-accent);border-color:var(--color-accent)}.flashcards__card:not(.is-revealed){cursor:pointer}.flashcards__prompt{font-family:var(--font-thai);font-size:4rem;line-height:1}.flashcards__prompt--roman{font-family:var(--font-ui);overflow-wrap:break-word;font-size:1.8rem}.flashcards__play{font:inherit;color:var(--color-text);border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;border-radius:999px;margin:1rem 0;padding:.4rem 1rem}.flashcards__play:hover,.flashcards__play.is-playing{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.flashcards__answer,.flashcards__example,.flashcards__grade{display:none}.flashcards__card.is-revealed .flashcards__answer,.flashcards__card.is-revealed .flashcards__example{display:block}.flashcards__card.is-revealed .flashcards__grade{display:flex}.flashcards__card.is-revealed .flashcards__reveal{display:none}.flashcards__answer{color:var(--color-accent);margin-top:.75rem;font-size:1.6rem}.flashcards__answer--thai{font-family:var(--font-thai);color:var(--color-text);overflow-wrap:break-word;font-size:2.4rem}.flashcards__example{color:var(--color-muted);margin-top:.5rem;font-size:.85rem}.flashcards__reveal{font:inherit;color:var(--color-text);border:1px solid var(--color-accent);background:var(--color-bg);cursor:pointer;border-radius:999px;margin-top:1.5rem;padding:.5rem 1.3rem}.flashcards__reveal:hover{background:var(--color-accent-soft);color:var(--color-accent)}.flashcards__grade{gap:.6rem;margin-top:1.5rem}.flashcards__grade-btn{font:inherit;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;border-radius:8px;flex:1;padding:.7rem;font-weight:600}.flashcards__grade-btn--again{border-color:var(--color-wrong);color:var(--color-wrong)}.flashcards__grade-btn--again:hover{background:var(--color-wrong-bg)}.flashcards__grade-btn--know{border-color:var(--color-correct);color:var(--color-correct)}.flashcards__grade-btn--know:hover{background:var(--color-correct-bg)}.exercise__controls{align-items:center;gap:.6rem;display:flex}.exercise__select{font:inherit;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);cursor:pointer;border-radius:6px;padding:.3rem .5rem}.exercise__list{flex-direction:column;gap:.75rem;display:flex}.exercise__sentence{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;transition:border-color .15s,box-shadow .15s;display:flex}.exercise__sentence.is-active{border-color:var(--color-accent);box-shadow:0 4px 14px var(--shadow-accent)}.exercise__play{border:1px solid var(--color-border);background:var(--color-bg);width:2.4rem;height:2.4rem;color:var(--color-text);cursor:pointer;border-radius:999px;flex:none;justify-content:center;align-items:center;font-size:1rem;display:flex}.exercise__play:hover,.exercise__play.is-playing{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.exercise__body{flex:1;min-width:0}.exercise__text{flex-wrap:wrap;align-items:flex-end;gap:.5rem .4rem;display:flex}.exercise__word{cursor:pointer;border-radius:5px;flex-direction:column;align-items:center;padding:.1rem .2rem 0;transition:background .1s,color .1s;display:flex}.exercise__word:hover{background:var(--color-accent-soft)}.exercise__word.is-current{background:var(--color-accent-soft);color:var(--color-accent)}.exercise__word-roman{font-family:var(--font-ui);color:var(--color-muted);white-space:nowrap;font-size:.7rem}.exercise__word.is-current .exercise__word-roman{color:var(--color-accent)}.exercise__word-thai{font-family:var(--font-thai);font-size:1.5rem}.exercise__gloss{color:var(--color-muted);margin:.4rem 0 0;font-size:.85rem}.exercise__number{color:var(--color-muted);font-variant-numeric:tabular-nums;flex:none;align-self:flex-start;font-size:.8rem}