:root{color-scheme:light;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #f8f6f3;--fg: #1f1b16;--muted: #6f655f;--accent: #f97316;--accent-soft: rgba(249, 115, 22, .12);--card: #ffffff;--border: #e8e0d7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}button{font-family:inherit}.app{min-height:100vh;display:flex;flex-direction:column;margin:0 auto;max-width:480px;background:var(--bg)}.app__header{padding:1.5rem 1.25rem .5rem;display:flex;justify-content:space-between;gap:1rem}.app__title{margin:0;font-size:1.75rem}.app__subtitle{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}.speech-debug{margin:0 1.25rem 1rem;padding:.85rem 1rem;border-radius:.9rem;border:1px dashed rgba(249,115,22,.4);background:rgba(249,115,22,.08)}.speech-debug--success{border-style:solid;border-color:#22c55e59;background:rgba(34,197,94,.12)}.speech-debug__title{margin:0;font-weight:600;font-size:.95rem}.speech-debug__text{margin:.35rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.45}.language-toggle{display:inline-flex;padding:.25rem;background:var(--card);border-radius:999px;border:1px solid var(--border);align-self:flex-start}.language-toggle__button{border:none;background:transparent;padding:.35rem .8rem;border-radius:999px;font-size:.85rem;color:var(--muted);cursor:pointer;white-space:nowrap}.language-toggle__button--active{background:var(--accent);color:#fff}.app__content{flex:1;overflow-y:auto;padding:0 1.25rem 5.5rem}.section{margin-bottom:2rem}.section__title{margin:1.5rem 0 .75rem;font-size:1.25rem}.section__subtitle{margin:.5rem 0;font-size:1rem;color:var(--muted)}.section__note{margin:1rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.4}.card-row{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:1rem;overflow-x:auto;padding-bottom:.75rem}.card-row.is-grabbing,.card-row.is-grabbing *{cursor:grabbing!important;cursor:-webkit-grabbing!important}.card{background:var(--card);border-radius:1.25rem;padding:1.25rem;border:1px solid var(--border);box-shadow:0 12px 24px #1f1b160f;display:flex;flex-direction:column;gap:.75rem}.card--interactive{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.card--interactive:active{transform:translateY(1px)}.card--interactive:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.card__header{display:flex;justify-content:space-between;align-items:flex-start}.card__label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}.card__symbol{margin:0;font-size:2.75rem}.card__speak{border:none;background:var(--accent-soft);border-radius:999px;padding:.35rem .5rem;font-size:1rem;cursor:pointer}.card__name-row{display:flex;align-items:center;gap:.4rem}.card__name{margin:0;font-weight:600}.card__name-speak{padding:.25rem .45rem;font-size:.9rem}.card__pronounce{margin:0;color:var(--muted);font-size:.95rem}.card__meta{margin:0;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.card__example{position:relative;background:rgba(249,115,22,.08);padding:.6rem 2.4rem .6rem .75rem;border-radius:.75rem;display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.card__example-text{display:flex;flex-direction:column;gap:.2rem}.card__example-speak{position:absolute;top:.4rem;right:.4rem;padding:.3rem .45rem}.card__tip{margin:0;font-size:.9rem;line-height:1.35}.tone-card{gap:1rem}.tone-card__alias{margin:.25rem 0 0;font-size:.85rem;color:var(--muted)}.tone-card__usage{margin-top:0}.tone-card__examples{display:flex;flex-direction:column;gap:.75rem}.tone-card__example{border:1px solid var(--border);border-radius:.9rem;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;background:rgba(249,115,22,.08)}.tone-card__example-header{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.tone-card__result{color:var(--accent)}.tone-card__example-body{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.tone-card__thai{font-size:1.35rem;font-weight:700}.tone-card__translit{font-size:.9rem;color:var(--muted)}.tone-card__example-speak{align-self:flex-start}.tone-card__meaning{margin:0;font-size:.9rem;color:var(--muted)}.tone-card__tip{margin-top:0}.syllable-card{gap:.85rem}.syllable-card-list{display:grid;gap:1rem;margin-top:1rem}.syllable-card__tone{margin:0;font-size:.85rem;color:var(--muted)}.syllable-card__tone-label{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;margin-right:.35rem}.syllable-card__description{margin:0;font-size:.95rem;line-height:1.45}.syllable-card__section{display:flex;flex-direction:column;gap:.5rem}.syllable-card__section-label{margin:0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.syllable-card__components{display:grid;gap:.5rem}.syllable-card__component{padding:.65rem .75rem;border-radius:.9rem;background:rgba(31,27,22,.05);display:flex;flex-direction:column;gap:.35rem}.syllable-card__component-header{display:flex;align-items:baseline;gap:.35rem}.syllable-card__component-symbol{font-size:1.4rem}.syllable-card__component-translit{font-size:.85rem;color:var(--muted)}.syllable-card__component-note{margin:0;font-size:.9rem;line-height:1.35}.syllable-card__example-note{margin:0;font-size:.9rem;line-height:1.4}.syllable-card__example-note-label{font-weight:600;margin-right:.35rem}.syllable-card__examples{display:flex;flex-direction:column;gap:.5rem}.syllable-card__example-row{display:flex;align-items:stretch;background:rgba(31,27,22,.05);padding:.6rem .75rem;border-radius:.85rem}.syllable-card__example-badge{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}.syllable-card__example-body{display:flex;flex-direction:column;gap:.25rem;flex:1;position:relative}.syllable-card__example-word{font-weight:600}.syllable-card__example-pronounce{font-size:.85rem;color:var(--muted)}.syllable-card__example-meaning{font-size:.9rem}.syllable-card__example-audio{position:absolute;top:-.4rem;right:0;border:none;background:var(--accent-soft);cursor:pointer;font-size:1rem;color:var(--muted);border-radius:999px;padding:.25rem .45rem}.syllable-card__example-audio:disabled{cursor:not-allowed;opacity:.4}.syllable-card__example-badge{align-self:flex-end}@media (min-width: 720px){.syllable-card-list{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}.syllable-detail{display:flex;flex-direction:column;gap:1.25rem}.syllable-detail__back{align-self:flex-start;font-size:.9rem}.syllable-detail__letter{max-width:420px}.example-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;margin-top:.5rem}.example-item{display:flex;align-items:flex-start;justify-content:space-between;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--card)}.example-item__text{display:flex;flex-direction:column;gap:.2rem}.example-item__thai{font-size:1rem;line-height:1.1;font-weight:500}.example-item__roman{color:var(--muted);font-size:.85rem}.example-item__roman:after{content:" · ";color:var(--muted)}.example-item__meaning{font-size:.85rem}.example-item__speak{flex-shrink:0;font-size:.95rem;line-height:1;margin-left:.5rem}.practice{display:flex;flex-direction:column;gap:.75rem;align-items:center;background:var(--card);padding:1.5rem;border-radius:1.5rem;border:1px solid var(--border);box-shadow:0 16px 32px #1f1b1614}.practice__header{display:flex;gap:1rem;width:100%;justify-content:space-between}.practice__badge{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.practice__symbol{font-size:4rem;line-height:1}.practice__prompt{margin:0;color:var(--muted);text-align:center}.practice__details{width:100%;display:flex;flex-direction:column;gap:.75rem}.practice__actions{display:flex;gap:.75rem}.btn{flex:1;padding:.75rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-weight:600;cursor:pointer}.btn--primary{background:var(--accent);border:none;color:#fff}.btn--ghost{background:transparent;border-color:transparent;color:var(--accent);flex:initial}.toggle-group{display:inline-flex;padding:.25rem;background:var(--card);border-radius:999px;border:1px solid var(--border);margin-bottom:1rem}.toggle{border:none;background:transparent;padding:.45rem .9rem;border-radius:999px;font-size:.9rem;color:var(--muted)}.toggle--active{background:var(--accent);color:#fff}.bottom-nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);background:rgba(248,246,243,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.bottom-nav__item{border:none;background:transparent;padding:.85rem 0;display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--muted);font-weight:500}.bottom-nav__item--active{color:var(--accent)}.bottom-nav__icon{font-size:1.15rem}.bottom-nav__label{font-size:.75rem}.tone-table{background:var(--card);border-radius:1rem;border:1px solid var(--border);margin-top:1.25rem;overflow:hidden}.tone-table__header{padding:.75rem 1rem;background:var(--accent);color:#fff;font-weight:600}.tone-table__content{display:flex;flex-direction:column}.tone-table__row{display:flex;flex-wrap:nowrap;gap:.65rem;padding:.9rem 1rem;border-top:1px solid var(--border);font-size:1rem;align-items:stretch}.tone-table__pattern{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:.3rem}.tone-table__pattern-label{font-weight:700;font-size:1.05rem}.tone-table__result{color:var(--accent);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}.tone-table__mark{flex:0 0 4.25rem;display:flex;align-items:center;justify-content:center;font-size:3rem;line-height:1}.tone-table__example-card{position:relative;flex:1.25 1 0;background:rgba(249,115,22,.08);border:1px solid var(--border);border-radius:.85rem;padding:.75rem .85rem .7rem;display:flex;flex-direction:column;gap:.45rem}.tone-table__example-text{display:flex;flex-direction:column;gap:.3rem}.tone-table__thai{font-size:1.25rem;font-weight:700}.tone-table__translit{font-size:.9rem;color:var(--muted)}.tone-table__meaning{margin:0;color:var(--muted);line-height:1.3}.tone-table__speaker{position:absolute;top:.5rem;right:.5rem}@media (min-width: 768px){.tone-table__row{gap:1rem}.tone-table__pattern{flex:1.1 1 0;align-items:flex-start}.tone-table__result{font-size:.95rem}.tone-table__mark{flex-basis:4.6rem;font-size:3.2rem}.tone-table__example-card{flex:1.35 1 0}.tone-table__example-text{align-items:flex-start}.tone-table__speaker{top:.55rem;right:.55rem}}.lesson-section{margin-bottom:2rem}.lesson-section__header{margin-bottom:1rem}.lesson-section__title{margin:0;font-size:1.1rem}.lesson-section__description{margin:.25rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.4}.lesson-entries{display:flex;flex-direction:column;gap:.75rem}.lesson-nav{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .25rem .75rem;margin-bottom:.5rem}.lesson-nav__chip{border:1px solid var(--border);background:rgba(255,255,255,.9);padding:.45rem .85rem;border-radius:999px;font-size:.85rem;color:var(--muted);white-space:nowrap}.lesson-nav__chip--active{border-color:var(--accent);background:rgba(249,115,22,.16);color:var(--accent);font-weight:600}.lesson-entry{background:var(--card);border-radius:1rem;border:1px solid var(--border);padding:1rem 1.1rem;box-shadow:0 8px 18px #1f1b160d;display:flex;flex-direction:column;gap:.5rem}.lesson-entry__header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.lesson-entry__thai{margin:0;font-size:1.25rem}.lesson-entry__translit{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}.lesson-entry__meaning{margin:0;font-size:.95rem}.lesson-entry__note{margin:0;font-size:.85rem;color:var(--muted)}.lesson-entry__extra{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}.lesson-entry__label{margin:0;font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}.lesson-entry__breakdown{display:grid;gap:.35rem}.lesson-entry__breakdown-row{display:grid;grid-template-columns:auto auto 1fr;gap:.5rem;align-items:baseline}.lesson-entry__breakdown-thai{font-weight:600}.lesson-entry__breakdown-roman{font-size:.85rem;color:var(--muted)}.lesson-entry__breakdown-meaning{font-size:.9rem}.lesson-entry__variations{display:flex;flex-direction:column;gap:.75rem}.lesson-entry__variation{border:1px solid var(--border);border-radius:.85rem;padding:.65rem .8rem;display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;background:rgba(249,115,22,.06)}.lesson-entry__variation-text{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.lesson-entry__variation-thai{font-weight:600;font-size:1rem}.lesson-entry__variation-roman{font-size:.85rem;color:var(--muted)}.lesson-entry__variation-meaning{font-size:.9rem}.lesson-entry__variation-breakdown{display:grid;gap:.25rem;margin-top:.25rem}.lesson-entry__variation-breakdown-item{display:grid;grid-template-columns:auto auto 1fr;gap:.4rem;font-size:.82rem;color:var(--muted)}.lesson-entry__variation-breakdown-thai{font-weight:600;color:var(--fg)}.lesson-entry__variation-breakdown-roman{font-style:italic}.lesson-entry__variation-breakdown-meaning{justify-self:start}.lesson-entry__variation-icon{border:none;background:rgba(249,115,22,.18);color:var(--accent);font-size:1.05rem;padding:.35rem .5rem;border-radius:999px;cursor:pointer}.number-tool{display:flex;flex-direction:column;gap:.75rem}.number-tool__header{align-items:flex-start}.number-tool__helper{margin:.25rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.4}.number-tool__body{display:flex;flex-direction:column;gap:.75rem}.number-tool__controls{display:flex;flex-direction:column;gap:.5rem}.number-tool__input{padding:.65rem .75rem;border-radius:.8rem;border:1px solid var(--border);font-size:1rem}.number-tool__button{width:100%}.number-tool__error{margin:0;font-size:.85rem;color:#dc2626}.number-tool__result-card{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.number-tool__result-text{display:flex;flex-direction:column;gap:.2rem}.number-tool__result-thai{margin:0;font-size:1.15rem;font-weight:600}.number-tool__result-roman{margin:0;font-size:.95rem;color:var(--muted)}.number-tool__result-digit{margin:0;font-size:.85rem;color:var(--muted)}@media (min-width: 640px){.number-tool__controls{flex-direction:row;align-items:center}.number-tool__input{flex:1}.number-tool__button{width:auto}}@media (min-width: 768px){.app{max-width:720px}.card-row{grid-auto-columns:280px}.app__content{padding-bottom:6.5rem}}