:root{--bg:#f8fafc;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--accent:#0ea5e9;--accent-soft:#e0f2fe;--warn:#d97706;--warn-soft:#fef3c7;--good:#15803d;--good-soft:#dcfce7;--bad:#b91c1c;--bad-soft:#fee2e2;--nav-bg:#fff;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-thai:"Noto Sans Thai", "Leelawadee UI", Thonburi, "Sarabun", system-ui, sans-serif;--tap-target:48px;--nav-h:4rem;--header-h:5rem;--thai-scale:1}@media (prefers-color-scheme:dark){:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--accent:#38bdf8;--accent-soft:#0c4a6e;--warn:#f59e0b;--warn-soft:#422006;--good:#4ade80;--good-soft:#052e16;--bad:#f87171;--bad-soft:#450a0a;--nav-bg:#1e293b}}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;line-height:1.5}button{font:inherit;color:inherit}.thai{font-family:var(--font-thai);line-height:1.9}.app{grid-template-rows:auto 1fr auto;height:100dvh;display:grid}.app__main{-webkit-overflow-scrolling:touch;min-height:0;padding:1rem 1rem 2rem;overflow-y:auto}.app-header{padding:.75rem 1rem;padding-top:calc(.75rem + env(safe-area-inset-top));background:var(--nav-bg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;display:flex}.app-header__title{margin:0;font-size:1.125rem;font-weight:600}.app-header__actions{align-items:center;margin-right:-.75rem;display:flex}.app-header__action{width:var(--tap-target);height:var(--tap-target);color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:999px;place-items:center;padding:0;display:grid}.app-header__action svg{width:24px;height:24px}.app-header__action.active,.app-header__action--on{color:var(--accent)}.bottom-nav{height:calc(var(--nav-h) + env(safe-area-inset-bottom));background:var(--nav-bg);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.bottom-nav__tab{min-width:0;min-height:var(--tap-target);color:var(--text-muted);-webkit-tap-highlight-color:transparent;flex-direction:column;justify-content:center;align-items:center;gap:.125rem;padding:.5rem .25rem;text-decoration:none;display:flex}.bottom-nav__tab.active{color:var(--accent)}.bottom-nav__glyph{font-family:var(--font-thai);font-size:1.125rem;line-height:1.4}.bottom-nav__label{letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.75rem;overflow:hidden}.placeholder{max-width:34rem;margin:0 auto;padding:1.5rem 0}.placeholder__title{margin:0 0 .5rem;font-size:1.5rem}.placeholder__summary{color:var(--text-muted);margin:0 0 1rem}.placeholder__backlog{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:.5rem;margin:0;padding:.5rem .75rem;font-size:.8125rem}.stack{flex-direction:column;gap:1rem;max-width:40rem;margin:0 auto;display:flex}.lead,.count,.empty{color:var(--text-muted);margin:0;font-size:.8125rem}.speak{width:44px;height:44px;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:999px;flex:none;place-items:center;padding:0;display:grid}.speak:active{background:var(--accent-soft)}.speak svg{width:22px;height:22px}.speak--sm{width:36px;height:36px}.speak--sm svg{width:18px;height:18px}.chips{flex-wrap:wrap;gap:.375rem;display:flex}.chip{min-height:36px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;align-items:center;gap:.25rem;padding:.25rem .75rem;font-size:.875rem;display:inline-flex}.chip--active{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}.chip--muted{opacity:.45}.chip__sub{opacity:.8;font-size:.75rem}.chip__mark{font-size:1.125rem;line-height:1}.status__msg{border:1px solid var(--border);background:var(--surface);border-radius:.5rem;margin:0;padding:.625rem .75rem;font-size:.875rem}.status__good{border-color:var(--accent);color:var(--text)}.status__bad{color:var(--text);border-color:var(--warn);background:var(--warn-soft)}.status__pending{color:var(--text-muted)}.sheet{left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));background:var(--bg);border:1px solid var(--border);z-index:6;border-bottom:none;border-radius:1rem 1rem 0 0;flex-direction:column;height:min(72%,34rem);display:flex;position:fixed;box-shadow:0 -8px 24px #0f172a38}.sheet--settings{top:calc(var(--header-h) + env(safe-area-inset-top));height:auto}.sheet__title{margin:0 0 .25rem;font-size:1.05rem;font-weight:600}.sheet__grab{flex:none;place-items:center;height:26px;display:grid}.sheet__grab span{background:#94a3b8;border-radius:99px;width:40px;height:4px;display:block}.sheet__scroll{min-height:0;padding:0 .875rem 1rem;overflow-y:auto}.sheet__word{text-align:center;margin:0;font-size:2.5rem;line-height:1.9}.sheet__char{cursor:pointer;-webkit-tap-highlight-color:transparent}.sheet__cluster{white-space:pre;cursor:pointer;-webkit-tap-highlight-color:transparent;display:inline-block;position:relative}.sheet__layer{position:absolute;top:0;left:0}.sheet__char--lit{color:var(--warn)}.sheet__rom{color:var(--accent);justify-content:center;align-items:center;gap:.25rem;margin:0;font-size:1.125rem;display:flex}.sheet__eng{text-align:center;color:var(--text-muted);margin:0 0 .5rem;font-size:1rem}.sheet__syllable{margin-top:.75rem}.sheet__syltitle{color:var(--text-muted);margin:0 0 .375rem;font-size:1rem}.pieces{flex-direction:column;gap:.375rem;display:flex}.piece{background:var(--surface);border:1px solid var(--border);border-radius:.625rem;align-items:stretch;display:flex;overflow:hidden}.piece--on{border-color:var(--warn);background:var(--warn-soft)}.piece__main{min-width:0;min-height:46px;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:none;flex:auto;align-items:center;gap:.625rem;padding:.375rem .625rem;display:flex}.piece__glyph{text-align:center;flex:none;min-width:2.5rem;font-size:1.375rem;line-height:1.7}.piece__kind{flex:none;font-size:.875rem;font-weight:600}.piece__detail{min-width:0;color:var(--text-muted);flex:auto;font-size:.8125rem}.piece__go{width:44px;color:var(--accent);border-left:1px solid var(--border);flex:none;place-items:center;font-size:1.125rem;text-decoration:none;display:grid}.sheet__tone{background:var(--surface);border:1px solid var(--accent);border-radius:.625rem;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;margin-top:.5rem;padding:.5rem .625rem;display:flex}.sheet__tonename{color:var(--accent);text-transform:capitalize;font-size:1.125rem;font-weight:700}.sheet__tonethai{color:var(--text-muted);font-size:.9375rem}.sheet__rule{color:var(--text-muted);flex:1 0 100%;margin:.25rem 0 0;font-size:.875rem}.sheet__note,.sheet__unsplit{color:var(--text);background:var(--warn-soft);border-radius:.375rem;margin:.375rem 0 0;padding:.375rem .5rem;font-size:.875rem}.word__link{min-width:0;color:inherit;flex-direction:column;flex:auto;gap:.0625rem;text-decoration:none;display:flex}.tools{flex:none;align-items:center;display:flex}.translate{width:44px;height:44px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:999px;flex:none;place-items:center;padding:0;display:grid}.translate svg{width:22px;height:22px}.translate:active{background:var(--accent-soft)}.translate--on{color:var(--accent);background:var(--accent-soft)}.word--open,.sentence--focused{border-color:var(--accent)}.sentence__hint{color:var(--text-muted);margin:.5rem 0 0;font-size:.8125rem}.sentence__word--on{color:var(--accent);background:var(--accent-soft);border-bottom:2px solid var(--accent);border-radius:3px 3px 0 0;font-weight:600}.letter--focused,.vowel--focused{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.breakdown{flex-direction:column;gap:.5rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.breakdown__syllable{background:var(--bg);border:1px solid var(--border);border-radius:.5rem;padding:.5rem .625rem}.breakdown__head{flex-wrap:wrap;align-items:baseline;gap:.5rem;display:flex}.breakdown__thai{font-size:1.25rem}.breakdown__roman{color:var(--text-muted);font-size:1rem}.breakdown__tone{color:var(--accent);text-transform:capitalize;margin-left:auto;font-size:.9375rem;font-weight:600}.breakdown__tonethai{color:var(--text-muted);font-weight:400}.breakdown__facts{grid-template-columns:auto 1fr;gap:.125rem .75rem;margin:.5rem 0 0;font-size:.875rem;display:grid}.breakdown__facts dt{color:var(--text-muted)}.breakdown__facts dd{margin:0}.breakdown__rule{color:var(--text-muted);margin:.5rem 0 0;font-size:.875rem}.breakdown__note{color:var(--text);background:var(--warn-soft);border-radius:.375rem;margin:.375rem 0 0;padding:.375rem .5rem;font-size:.875rem}.trainer{flex-direction:column;gap:.625rem;display:flex}.trainer__scoreline{color:var(--text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;gap:.5rem;font-size:.875rem;display:flex}.trainer__prompt{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:1.25rem 1rem;display:flex}.trainer__thai{font-size:3rem;line-height:1.6}.chip--right{color:var(--good);background:var(--good-soft);border-color:var(--good)}.chip--wrong{color:var(--bad);background:var(--bad-soft);border-color:var(--bad)}.trainer__verdict{color:var(--good);margin:0;font-size:1rem;font-weight:600}.trainer__verdict--wrong{color:var(--bad)}.trainer__next{min-height:44px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);cursor:pointer;border-radius:999px;align-self:flex-start;padding:.5rem 1rem;font-size:.9375rem}.issues{flex-direction:column;gap:.25rem;margin:.5rem 0 0;padding:0 0 0 1.125rem;display:flex}.issues__item{color:var(--text-muted);font-size:.875rem}.picker{border:none;margin:0;padding:0}.picker__legend{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding:0 0 .375rem;font-size:.8125rem;font-weight:600}.picker__hint{text-transform:none;letter-spacing:0;opacity:.75;font-weight:400}.search{width:100%;min-height:44px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:.5rem .75rem}.search:focus-visible,.chip:focus-visible,.speak:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.group{flex-direction:column;gap:.5rem;display:flex}.group__title{align-items:baseline;gap:.5rem;margin:0;font-size:1.125rem;display:flex}.group__thai{color:var(--text-muted);font-size:1rem;font-weight:400}.group__blurb{color:var(--text-muted);margin:0;font-size:.875rem}.letters,.words{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.letter{background:var(--surface);border:1px solid var(--border);border-radius:.625rem;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.letter--obsolete{opacity:.55}.letter__char{width:calc(2.25rem * var(--thai-scale));font-size:calc(1.75rem * var(--thai-scale));text-align:center;flex:none}.letter__body{flex-direction:column;flex:auto;min-width:0;display:flex}.letter__name{font-size:calc(1.125rem * var(--thai-scale))}.letter__roman{color:var(--text-muted);font-size:1rem}.letter__meaning{color:var(--text-muted);font-size:.875rem}.letter__sounds{font-variant-numeric:tabular-nums;color:var(--text-muted);flex-direction:column;flex:none;align-items:flex-end;font-size:.875rem;display:flex}.letter__sound--final{opacity:.7}.word{background:var(--surface);border:1px solid var(--border);border-radius:.625rem;padding:.625rem .75rem}.word__main{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.word__thai{font-size:calc(1.5rem * var(--thai-scale));min-width:0}.word__gloss{flex-direction:column;gap:.0625rem;margin-top:.125rem;display:flex}.word__roman{color:var(--accent);font-size:1.1875rem}.word__english{color:var(--text-muted);font-size:1.0625rem}.word__note{color:var(--text-muted);background:var(--bg);border-radius:.375rem;margin:.5rem 0 0;padding:.375rem .5rem;font-size:.9375rem}.sentences{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.sentence{background:var(--surface);border:1px solid var(--border);border-radius:.625rem;padding:.75rem}.sentence__head{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.gloss{flex-wrap:wrap;align-items:flex-start;gap:.5rem .75rem;min-width:0;display:flex}.gloss__tok{color:inherit;text-align:center;border-bottom:1px dashed var(--border);-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:center;gap:.0625rem;padding:0 .125rem;text-decoration:none;display:flex}.gloss__tok--on{background:var(--accent-soft);border-bottom:2px solid var(--accent);border-radius:3px 3px 0 0}.gloss__thai{font-size:calc(1.375rem * var(--thai-scale))}.gloss__roman{color:var(--accent);font-size:1.0625rem;line-height:1.4}.gloss__en{color:var(--text-muted);font-size:1.0625rem;line-height:1.4}.sentence__natural{border-top:1px solid var(--border);margin:.625rem 0 0;padding-top:.5rem;font-size:1.125rem}.sentence__note{color:var(--text-muted);background:var(--bg);border-radius:.375rem;margin:.5rem 0 0;padding:.375rem .5rem;font-size:.9375rem}.sentence__toggle{color:var(--text-muted);cursor:pointer;background:0 0;border:none;margin-top:.5rem;padding:0;font-size:.75rem;text-decoration:underline}.sample{font-size:calc(1.5rem * var(--thai-scale));text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:.5rem;margin:.75rem 0 0;padding:.5rem .75rem}.vowels{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.vowel{background:var(--surface);border:1px solid var(--border);border-radius:.625rem;flex-direction:column;gap:.125rem;padding:.5rem .625rem;display:flex}.vowel__pattern{font-size:calc(1.5rem * var(--thai-scale))}.vowel__roman{color:var(--accent);font-size:1.0625rem}.vowel__meta{color:var(--text-muted);font-size:.8125rem}.verdict{background:var(--surface);border:1px solid var(--accent);border-radius:.75rem;padding:1rem}.verdict--invalid{border-color:var(--border)}.verdict__label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:0;font-size:.8125rem;font-weight:600}.verdict__tone{color:var(--accent);text-transform:capitalize;margin:.125rem 0 0;font-size:2rem;font-weight:700}.verdict__thai{margin:0;font-size:1.125rem}.verdict__roman{color:var(--text-muted);font-size:1rem}.reasoning{flex-direction:column;gap:.25rem;margin:.75rem 0 0;padding:0 0 0 1.25rem;display:flex}.reasoning__step{color:var(--text-muted);font-size:.9375rem}.verdict__rule{border-top:1px solid var(--border);margin:.75rem 0 0;padding-top:.75rem;font-size:.875rem}