@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Noto Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Noto Sans Thai;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-thai.woff2)format("woff2");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Noto Sans Thai;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-thai-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Noto Sans Fallback;src:local(Arial);ascent-override:100.54%;descent-override:27.56%;line-gap-override:0%;size-adjust:106.33%}:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f3ea;--bg-deep:#efe8da;--card:#fff;--surface:#efe8da;--ink:#1d1f45;--muted:#5e5d75;--line:#e2dacb;--brand:#2b2d6e;--brand-ink:#fff;--brand-text:#2b2d6e;--accent:#f0a21a;--accent-ink:#1d1f45;--accent-soft:#fcefd2;--good:#1d7f54;--good-soft:#dcf1e5;--bad:#b8402b;--bad-soft:#f9e1db;--tone-mid:#5c5b72;--tone-low:#1d5fa8;--tone-falling:#b5401c;--tone-high:#0b7458;--tone-rising:#8a3f96;--band-1:#34378c;--band-2:#1d1f45;--band-ink:#f7f3ea;--band-muted:#c9c8e6;--phone-bezel:#121329;--shadow-sm:0 1px 2px #1d1f450f, 0 2px 8px #1d1f450f;--shadow:0 2px 4px #1d1f450f, 0 12px 32px #1d1f451f;--shadow-lg:0 4px 10px #1213292e, 0 30px 60px #12132947;--font:"Noto Sans", "Noto Sans Thai", "Noto Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;--font-thai:"Noto Sans Thai", "Noto Sans", system-ui, sans-serif;--font-display:"Bricolage Grotesque", var(--font);--radius:1.25rem;--radius-sm:.75rem;--page:75rem;--gutter:clamp(1rem, 4vw, 2rem);--header-space:8.5rem;--header-h:4.75rem;--section-space:clamp(5.5rem, 13vw, 9.5rem);--selection:var(--tone-low)}:root[data-selection=falling]{--selection:var(--tone-falling)}:root[data-selection=high]{--selection:var(--tone-high)}:root[data-selection=rising]{--selection:var(--tone-rising)}::selection{background-color:var(--selection);color:var(--bg)}@media (max-width:40rem){:root{--header-space:11rem}}:root[data-theme=dark]{--header-bar:color-mix(in srgb, color-mix(in srgb, var(--card), #fff 12%) 58%, transparent);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#121329;--bg-deep:#0d0e22;--card:#1c1e3f;--surface:#262850;--ink:#f3efe6;--muted:#a9a8c3;--line:#2f3163;--brand:#9a9df5;--brand-ink:#121329;--brand-text:#b4b6fa;--accent:#f4b13a;--accent-ink:#121329;--accent-soft:#3a2f1a;--good:#52c78f;--good-soft:#163528;--bad:#f2806a;--bad-soft:#3c201b;--tone-mid:#aeadc6;--tone-low:#7cb8ff;--tone-falling:#ff9466;--tone-high:#4fd1a5;--tone-rising:#e39be0;--band-1:#23255a;--band-2:#101126;--band-muted:#b9b8d8;--phone-bezel:#050611;--shadow-sm:0 1px 2px #0000004d;--shadow:0 2px 4px #00000040, 0 12px 32px #00000059;--shadow-lg:0 4px 10px #00000059, 0 30px 60px #00000080}*,:before,:after{box-sizing:border-box}html{-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + .75rem)}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:var(--bg);color:var(--ink);font-family:var(--font);overflow-wrap:break-word;margin:0;font-size:1.0625rem;line-height:1.6}img,svg,picture{max-width:100%;display:block}img{height:auto}h1,h2,h3,h4{letter-spacing:-.02em;text-wrap:balance;margin:0 0 .5em;font-weight:800;line-height:1.15}h1,h2,h3{font-family:var(--font-display);font-weight:700}h1{letter-spacing:-.025em;font-size:clamp(2.25rem,6.6vw,3.75rem);line-height:1.04}h2{letter-spacing:-.02em;font-size:clamp(1.875rem,4.6vw,2.875rem)}h3{letter-spacing:-.01em;font-size:1.25rem}p{text-wrap:pretty;margin:0 0 1em}ul,ol{margin:0 0 1em;padding-left:1.25em}a{color:var(--brand-text);text-underline-offset:.18em;text-decoration-thickness:.08em}a:hover{text-decoration-thickness:.14em}strong{font-weight:700}.spell{font-weight:700;font-family:var(--font)}code{background:var(--surface);border-radius:.35em;padding:.1em .35em;font-size:.9em}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}:lang(th){font-family:var(--font-thai);line-height:1.7}.thai-display{font-family:var(--font-thai);letter-spacing:0;font-weight:600;line-height:1.5}.vh{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip-link{z-index:100;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);padding:.75rem 1rem;font-weight:700;text-decoration:none;position:absolute;top:-10rem;left:1rem}.skip-link:focus{top:.75rem}.wrap{width:100%;max-width:var(--page);padding-inline:var(--gutter);margin-inline:auto}.t-mid{color:var(--tone-mid)}.t-low{color:var(--tone-low)}.t-falling{color:var(--tone-falling)}.t-high{color:var(--tone-high)}.t-rising{color:var(--tone-rising)}.ph{font-weight:600}.ph .w{white-space:nowrap}.site-header{--logo:2.75rem;z-index:50;pointer-events:none;justify-content:center;padding-inline:.75rem;transition:top .35s;display:flex;position:fixed;top:.75rem;left:0;right:0}.site-header .bar{background-color:var(--header-bar,color-mix(in srgb, var(--card) 70%, transparent));-webkit-backdrop-filter:saturate(1.5)blur(16px);backdrop-filter:saturate(1.5)blur(16px);pointer-events:auto;border-radius:999px;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;width:100%;max-width:46rem;min-height:3.5rem;padding:.375rem .5rem;transition:background-color .3s,box-shadow .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;display:grid;box-shadow:0 10px 30px -12px #12132966}.site-header .brand{grid-column:2;margin:0;font-size:1.5rem;transition:color .3s,translate .35s}.site-header .brand img{height:var(--logo);transition:height .35s}.theme-toggle{border:1px solid var(--store-line);background:var(--store-bg);width:2.5rem;height:2.5rem;color:var(--accent);cursor:pointer;border-radius:50%;grid-column:1;justify-self:start;place-items:center;padding:0;transition:opacity .3s,transform .5s cubic-bezier(.34,1.5,.64,1),scale .15s,visibility,background-color .2s,border-color .2s,color .4s;display:grid}.theme-toggle svg{view-transition-name:theme-toggle-icon;width:1.375rem;height:1.375rem;transition:rotate .6s cubic-bezier(.34,1.3,.64,1);overflow:visible;rotate:90deg}.theme-toggle .disc,.theme-toggle .rays,.theme-toggle .shadow{transform-box:view-box;transform-origin:12px 12px}.theme-toggle .shadow{transition:transform .25s ease-in;transform:translate(8px,-8px)}.theme-toggle .disc{transition:transform .35s .1s}.theme-toggle .rays{transition:opacity .25s .2s,transform .45s cubic-bezier(.34,1.56,.64,1) .15s}.theme-toggle:hover{border-color:var(--store-line-hover);background:var(--store-bg-hover)}.theme-toggle:active{scale:.92}.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}:root[data-theme=dark] .theme-toggle{color:var(--brand)}:root[data-theme=dark] .theme-toggle svg{transition:rotate .8s cubic-bezier(.45,0,.2,1);rotate:0deg}:root[data-theme=dark] .theme-toggle .rays{opacity:0;transition:opacity .35s,transform .5s cubic-bezier(.45,0,.2,1);transform:rotate(-45deg)scale(.5)}:root[data-theme=dark] .theme-toggle .disc{transition:transform .65s cubic-bezier(.45,0,.2,1);transform:scale(1.8)}:root[data-theme=dark] .theme-toggle .shadow{transition:transform .65s cubic-bezier(.45,0,.2,1) .1s;transform:none}::view-transition-old(theme-toggle-icon){display:none}::view-transition-new(theme-toggle-icon){animation:none}@media (scripting:none){.theme-toggle{display:none}}.site-header .store-btn{grid-column:3;justify-self:end;transition:opacity .3s,transform .5s cubic-bezier(.34,1.5,.64,1),visibility,background-color .2s,border-color .2s}@media (scripting:enabled){.site-header:not(.scrolled){--logo:4.5rem;top:2.75rem}.site-header:not(.scrolled) .bar{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#0000}body:has(.hero) .site-header:not(.scrolled) .brand{color:var(--band-ink)}.site-header:not(.scrolled) .brand{translate:calc(var(--logo) * .4) 0}.site-header:not(.scrolled) .theme-toggle{opacity:0;visibility:hidden;transition:opacity .2s,transform .25s ease-in,visibility 0s linear .25s;transform:translateY(1.5rem)scale(.7)}body:has(.hero) .site-header:not(.past-hero-button) .store-btn{opacity:0;visibility:hidden;transition:opacity .2s,transform .25s ease-in,visibility 0s linear .25s;transform:translateY(1.5rem)scale(.7)}}.brand{white-space:nowrap;color:var(--ink);font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:.6rem;margin-right:auto;font-size:1.25rem;font-weight:700;text-decoration:none;display:inline-flex}.brand img{filter:drop-shadow(0 0 .6px #1d1f458c)drop-shadow(0 2px 3px #1d1f4529);width:auto;height:2.75rem}:root[data-theme=dark] .brand img{filter:drop-shadow(0 2px 4px #00000073)}.nav{display:none}.nav ul{gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.nav a,.menu-panel a{color:var(--ink);border-radius:999px;padding:.5rem .75rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:block}.nav a:hover,.menu-panel a:hover,.nav a[aria-current=page]{background:var(--surface)}.menu{position:relative}.menu summary{cursor:pointer;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;list-style:none;display:inline-flex}.menu summary::-webkit-details-marker{display:none}.menu summary:hover{background:var(--surface)}.menu summary svg{width:1.5rem;height:1.5rem}.menu-panel{border-radius:var(--radius-sm);background:var(--card);min-width:13rem;box-shadow:var(--shadow);border:1px solid var(--line);padding:.5rem;position:absolute;top:calc(100% + .5rem);right:0}.menu-panel ul{margin:0;padding:0;list-style:none}.menu-panel a{border-radius:.5rem;padding:.65rem .75rem;font-size:1rem}@media (max-width:26rem){.site-header{--logo:2.4rem;padding-inline:.5rem}.site-header .bar{gap:.4rem}.site-header .brand{gap:.45rem;font-size:1.25rem}}@media (max-width:26rem) and (scripting:enabled){.site-header:not(.scrolled){--logo:3.6rem;top:2rem}}@media (prefers-reduced-motion:reduce){.site-header,.site-header .brand,.site-header .brand img{transition:none}}@media (min-width:52rem){.nav{display:block}.menu{display:none}}.store-btn,.theme-toggle{--store-bg:#191b42;--store-line:#3d4088;--store-label:#a3a3cf;--store-bg-hover:#23265a;--store-line-hover:#5559a8}.store-btn{border:1px solid var(--store-line);background:var(--store-bg);height:3.25rem;color:var(--band-ink);font-family:var(--font);white-space:nowrap;border-radius:.7rem;align-items:center;gap:.8rem;padding:0 1.6rem 0 1.3rem;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.5,.64,1),background-color .2s,border-color .2s;display:inline-flex}:root[data-theme=dark] .store-btn,:root[data-theme=dark] .theme-toggle{--store-bg:#0e0f25;--store-line:#2e3170;--store-label:#9796c0;--store-bg-hover:#1a1c45;--store-line-hover:#4a4d9a}.store-btn .apple{flex:none;width:1.2rem;height:auto;margin-top:-.1rem}.store-text{flex-direction:column;align-items:flex-start;gap:.2rem;line-height:1;display:flex}.store-pre{color:var(--store-label);letter-spacing:.06em;text-transform:uppercase;font-size:.6rem;font-weight:500}.store-name{letter-spacing:-.01em;font-size:1rem;font-weight:700}.store-btn:hover{border-color:var(--store-line-hover);background:var(--store-bg-hover);transform:scale(1.05)}.store-btn:active{transform:scale(.97)}.store-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.store-btn.small{border-radius:999px;gap:.55rem;height:2.5rem;padding:0 1.25rem 0 1.05rem}.store-btn.small .apple{width:1rem}.store-btn.small .store-text{gap:.15rem}.store-btn.small .store-pre{font-size:.5rem}.store-btn.small .store-name{font-size:.875rem}@media (max-width:30rem){.store-btn.small{justify-content:center;width:2.5rem;padding:0}.store-btn.small .apple{width:1.05rem;margin-top:-.1rem}.store-btn.small .store-text{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (prefers-reduced-motion:reduce){.store-btn{transition:none}.store-btn:hover,.store-btn:active{transform:none}.theme-toggle,.site-header .store-btn{transition:opacity .2s,visibility}.site-header:not(.scrolled) .theme-toggle{transition:opacity .2s,visibility 0s linear .2s;transform:none}body:has(.hero) .site-header:not(.past-hero-button) .store-btn{transition:opacity .2s,visibility 0s linear .2s;transform:none}.theme-toggle svg,.theme-toggle .disc,.theme-toggle .rays,.theme-toggle .shadow{transition:none!important}}.chip-list{flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem;padding:0;list-style:none;display:flex}.chip-list li{background:var(--surface);border-radius:999px;padding:.3rem .8rem;font-size:.9375rem;font-weight:600}.section.alt .chip-list li{background:var(--card)}.eyebrow{color:var(--brand-text);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .75rem;font-size:.8125rem;font-weight:800}.lede{color:var(--muted);max-width:40rem;font-size:clamp(1.0625rem,2.2vw,1.25rem)}.phone{width:min(100%, var(--phone-w,18rem));background:var(--phone-bezel);box-shadow:var(--shadow-lg), inset 0 0 0 1.5px #ffffff1f;border-radius:14%/6.6%;flex:none;position:relative;container-type:inline-size}.phone picture{padding:2.4cqw}.phone img{background:var(--bg);border-radius:12.2%/5.6%;width:100%}.shot{margin:0}.shot figcaption{color:var(--muted);text-align:center;margin-top:1rem;font-size:.9375rem}.hero{color:var(--band-ink);background:radial-gradient(60rem 30rem at 85% 10%, #f0a21a2e, transparent 60%), linear-gradient(160deg, var(--band-1), var(--band-2));padding-block:calc(var(--header-space) + clamp(1rem, 4vw, 3.5rem)) var(--section-space);position:relative;overflow:hidden}.hero:after{content:"เรียนภาษาไทย";font-family:var(--font-thai);color:#ffffff0b;white-space:nowrap;pointer-events:none;font-size:clamp(6rem,20vw,15rem);font-weight:800;line-height:1.3;position:absolute;bottom:-2.2rem;right:-2rem}.hero .wrap{z-index:1;align-items:center;gap:3rem;display:grid;position:relative}.hero .eyebrow{color:var(--accent)}.hero h1{margin-bottom:1.25rem}.hero h1 .hl{color:var(--accent)}.hero .lede{color:var(--band-muted);margin-bottom:1.75rem}.hero-actions{flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;display:flex}.hero-visual{aspect-ratio:1/1.24;width:100%;max-width:30rem;margin-inline:auto;position:relative}.hero-visual .phone{width:52%;position:absolute;top:0;right:1%;transform:rotate(4deg)}.hero-visual .flashcard{width:72%;transition:scale .35s;position:absolute;bottom:0;left:0;transform:rotate(-4deg)}@media (hover:hover) and (prefers-reduced-motion:no-preference){.hero-visual .flashcard:hover{scale:1.015}}@media (max-width:40rem){.hero{padding-bottom:12.5rem}.hero:after{bottom:2.5rem}.hero-visual{width:calc(100% - 3rem);margin-block:.5rem 2rem}}@media (min-width:60rem){.hero .wrap{grid-template-columns:1.1fr .9fr;gap:3rem}}.flashcard,.practice{--face:#f8f0df}.flashcard{aspect-ratio:2/3;perspective:1400px;color:var(--ink);text-align:center;position:relative;container-type:inline-size}:root[data-theme=dark] .flashcard,:root[data-theme=dark] .practice{--face:var(--card)}.flip-toggle{z-index:3;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.card-inner{z-index:4;pointer-events:none;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.3,1);position:relative}.flip-toggle:checked~.card-inner{transform:rotateY(180deg)}.flip-toggle:focus-visible~.card-inner .face{outline:3px solid var(--accent);outline-offset:4px}.face{background:var(--face);box-shadow:var(--shadow-lg);backface-visibility:hidden;border-radius:clamp(1.1rem,7.5cqw,1.75rem);flex-direction:column;align-items:center;padding:clamp(.9rem,6.5cqw,1.5rem);transition:visibility 0s .15s;display:flex;position:absolute;inset:0}.face p{margin:0}.face.back{visibility:hidden;transform:rotateY(180deg)}.flip-toggle:checked~.card-inner .front{visibility:hidden}.flip-toggle:checked~.card-inner .back{visibility:visible}.front-main,.back-main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.25rem;display:flex}.card-label{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.625rem,3.2cqw,.75rem);font-weight:700}.card-en{letter-spacing:-.01em;font-size:clamp(1.75rem,11cqw,2.5rem);font-weight:700;line-height:1.2}.card-hint{color:var(--muted);padding-bottom:clamp(.25rem,3cqw,1rem);font-size:clamp(.75rem,3.8cqw,.875rem)}.card-th{font-family:var(--font-thai);padding-block:.12em;font-size:clamp(2.75rem,19cqw,4.5rem);font-weight:600;line-height:1.45}.card-ph-row{align-items:center;gap:clamp(.5rem,3.5cqw,.75rem);display:flex}.card-ph{font-size:clamp(1.25rem,7cqw,1.5rem);line-height:1.3}.card-ph .ph{font-weight:500}.card-mean{color:var(--muted);font-size:clamp(.9375rem,5cqw,1.125rem);margin-top:.25rem!important}.card-example{border-top:1px solid var(--line);text-align:left;align-items:flex-start;gap:.75rem;width:100%;padding-top:clamp(.6rem,4.5cqw,1rem);display:flex}.ex-text{flex:1;min-width:0}.ex-th{font-size:clamp(1rem,5.6cqw,1.25rem);line-height:1.6}.ex-ph,.ex-en{color:var(--muted);font-size:clamp(.75rem,4cqw,.875rem);line-height:1.45}.ex-ph .ph{font-weight:400}.card-tip{background:color-mix(in srgb, var(--ink) 8%, var(--face));text-align:left;border-radius:clamp(.75rem,4.5cqw,1rem);align-items:flex-start;gap:.5rem;width:100%;padding:clamp(.4rem,2.5cqw,.5rem) clamp(.6rem,3.5cqw,.75rem);font-size:clamp(.75rem,4cqw,.875rem);line-height:1.45;display:flex;margin-top:clamp(.5rem,3.5cqw,.75rem)!important}.card-tip svg{width:1.125em;height:1.125em;color:color-mix(in srgb, var(--accent) 68%, var(--ink));flex:none;margin-top:.15em}:root[data-theme=dark] .card-tip{background:color-mix(in srgb, var(--brand) 16%, var(--face))}:root[data-theme=dark] .card-tip svg{color:var(--accent)}.say{background:color-mix(in srgb, var(--accent) 35%, var(--face));width:clamp(2.25rem,12cqw,2.75rem);height:clamp(2.25rem,12cqw,2.75rem);color:var(--ink);border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.say.sm{width:clamp(1.9rem,10cqw,2.25rem);height:clamp(1.9rem,10cqw,2.25rem);margin-top:.25rem}.say svg{width:50%;height:50%}button.say{pointer-events:auto;cursor:pointer;transition:transform .15s,background-color .15s,color .15s}:root[data-theme=dark] .say{background:color-mix(in srgb, var(--brand) 30%, var(--face));color:color-mix(in srgb, var(--brand) 60%, #fff)}@media (hover:hover){button.say:hover{background:color-mix(in srgb, var(--accent) 60%, var(--face))}:root[data-theme=dark] button.say:hover{background:color-mix(in srgb, var(--brand) 48%, var(--face));color:#fff}}@media (hover:hover) and (prefers-reduced-motion:no-preference){button.say:hover{transform:scale(1.08)}}button.say:active{transform:scale(.9)}.flashcard-note{color:var(--band-muted);text-align:center;margin:.9rem 0 0;font-size:.875rem}@media (prefers-reduced-motion:reduce){.card-inner,.face{transition:none}}.flashcard.shake{animation:.6s ease-in-out card-shake}@keyframes card-shake{0%,to{translate:0;rotate:0deg}20%{translate:-3px;rotate:-1.2deg}40%{translate:2.5px;rotate:1deg}60%{translate:-1.5px;rotate:-.6deg}80%{translate:.5px;rotate:.2deg}}.section{padding-block:var(--section-space)}.section.alt{background:var(--bg-deep)}.section-head{max-width:44rem;margin-bottom:clamp(2rem,5vw,3.5rem)}.section-head.center{text-align:center;margin-inline:auto}.section-head.center .lede{margin-inline:auto}.how{overflow-x:clip}.how-grid{align-items:center;gap:2.5rem;display:grid}.how-text h2{margin-bottom:.75rem}.how-steps{counter-reset:how-step;gap:.9rem;margin:1.75rem 0 0;padding:0;list-style:none;display:grid}.how-steps li{color:var(--muted);counter-increment:how-step;grid-template-columns:1.75rem 1fr;align-items:start;gap:.85rem;display:grid}.how-steps li:before{content:counter(how-step);background:var(--accent);width:1.75rem;height:1.75rem;color:var(--accent-ink);border-radius:50%;place-items:center;margin-top:calc(.5lh - .875rem);font-weight:800;display:grid}.how-steps strong{color:var(--ink)}@media (min-width:52rem){.how-grid{grid-template-columns:1fr minmax(0,19rem);gap:clamp(3rem,7vw,6rem)}}.section:not(.alt)+.section:not(.alt),.section.alt+.section.alt{padding-top:0}.recap-list{gap:2rem;margin:0;padding:0;list-style:none;display:grid}.recap-list>li{border-radius:var(--radius);background:radial-gradient(30rem 16rem at 0% 0%, color-mix(in srgb, var(--hue) 11%, transparent), transparent 70%), var(--card);box-shadow:var(--shadow-sm);gap:1.5rem;padding:1.5rem 1.25rem;display:grid}.recap-head{align-items:center;gap:.9rem;margin-bottom:.9rem;display:flex}.recap-head h3{margin:0;font-size:clamp(1.5rem,2.6vw,1.75rem);line-height:1.2}.recap-text>p{color:var(--muted)}.recap-text>:last-child{margin-bottom:0}.recap-badge{background:color-mix(in srgb, var(--hue) 16%, transparent);width:3rem;height:3rem;color:var(--hue);border-radius:.9rem;flex:none;place-items:center;display:grid;rotate:-6deg}.recap-list>li:nth-child(2n) .recap-badge{rotate:6deg}.recap-badge svg{width:1.5rem;height:1.5rem}.recap-bare{align-self:center;container:recap-visual/inline-size}.recap-visual{border-radius:var(--radius-sm);background:color-mix(in srgb, color-mix(in srgb, var(--hue) 9%, var(--surface)) 45%, transparent);align-self:center;padding:1rem;container:recap-visual/inline-size}.recap-visual>:last-child,.recap-visual .tone-set{margin-bottom:0}.recap-visual .chip-list li{background:var(--card);font-size:.8125rem}.recap-label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .75rem;font-size:.8125rem;font-weight:800}.recap-visual .chip-list li.level{background:color-mix(in srgb, var(--hue) 20%, var(--card))}.recap-visual .tone-set{grid-template-columns:repeat(2,minmax(0,1fr))}@container recap-visual (min-width:25rem){.recap-visual .tone-set{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}.recap-visual .tone-set li{column-gap:.35rem;padding-inline:.55rem}.recap-visual .tone-set li>[lang=th]{font-size:1.5rem}.recap-visual .tone-set .say{width:2rem;height:2rem;margin-top:.2rem}}@media (max-width:22rem){.recap-visual .tone-set li{column-gap:.35rem;padding-inline:.6rem}.recap-visual .tone-set .say{width:2rem;height:2rem}}.recap-quiz{--face:var(--card)}.recap-quiz-q{justify-content:space-between;align-items:center;gap:.75rem;min-height:2.5rem;margin:0 0 .75rem;font-weight:700;display:flex}.recap-quiz-q .say{width:2.25rem;height:2.25rem}.recap-quiz ul{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.recap-quiz li button{border-radius:var(--radius-sm);background:var(--card);width:100%;box-shadow:var(--shadow-sm);color:var(--ink);font:inherit;text-align:left;cursor:pointer;border:2px solid #0000;align-items:center;gap:.6rem;padding:.5rem .9rem;transition:border-color .15s;display:flex}.recap-quiz li button:disabled{cursor:default}@media (hover:hover){.recap-quiz li button:not(:disabled):hover{border-color:color-mix(in srgb, var(--hue) 45%, transparent)}}.recap-quiz li button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.recap-quiz li [lang=th]{font-size:1.375rem;font-weight:700;line-height:1.6}.recap-quiz li .ph{font-size:1.0625rem}.recap-quiz li .mean{color:var(--muted);margin-left:auto;font-size:.875rem}.recap-quiz li svg{flex:none;width:1.25rem;height:1.25rem}.recap-quiz li.right button{border-color:var(--tone-high)}.recap-quiz li.right svg{color:var(--tone-high)}.recap-quiz li.wrong button{border-color:var(--tone-falling)}.recap-quiz li.wrong svg{color:var(--tone-falling)}.recap-quiz-foot{min-height:1.5rem;color:var(--muted);margin:.75rem 0 0;font-size:.875rem}.recap-player{background:var(--card);box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:.75rem;margin:0 0 1rem;padding:.5rem .9rem .5rem .5rem;display:flex}.recap-player .toggle{background:var(--hue);width:2.25rem;height:2.25rem;color:var(--card);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;padding:0;transition:scale .15s;display:grid}.recap-player .toggle:active{scale:.92}.recap-player .toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.recap-player .toggle svg{width:1.1rem;height:1.1rem}.recap-player .wave{flex:1;align-items:center;gap:2px;min-width:0;height:1.75rem;display:flex}.recap-player .wave span{height:calc(var(--h,.5) * 100%);background:color-mix(in srgb, var(--muted) 35%, transparent);border-radius:2px;flex:1;min-width:1.5px}.recap-player .wave span.played{background:var(--hue)}.recap-player .time{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:.75rem;font-weight:700}.recap-story-lines{gap:.6rem;margin:0 0 1rem;padding:0;list-style:none;display:grid}.recap-story-lines li{align-items:flex-end;gap:.5rem;display:flex}.recap-story-lines li.reply{flex-direction:row-reverse}.recap-story-lines .avatar{background:color-mix(in srgb, var(--who) 22%, var(--card));width:1.9rem;height:1.9rem;color:var(--who);border-radius:50%;flex:none;place-items:center;font-size:.8125rem;font-weight:800;display:grid}.recap-story-lines .bubble{background:var(--card);min-width:0;max-width:calc(100% - 2.4rem);box-shadow:var(--shadow-sm);border:2px solid #0000;border-radius:1rem 1rem 1rem .3rem;flex-direction:column;padding:.55rem .85rem .6rem;display:flex}.recap-story-lines li.reply .bubble{border-radius:1rem 1rem .3rem}.recap-story-lines .bubble.playing{border-color:var(--hue)}.recap-story-lines .who{color:var(--who);align-items:center;gap:.35rem;font-size:.75rem;font-weight:800;display:flex}.recap-story-lines .who svg{width:.95rem;height:.95rem;color:var(--hue)}.recap-story-lines [lang=th]{font-size:1.0625rem;font-weight:600;line-height:1.6}.recap-story-lines .phrase{white-space:nowrap}.recap-story-lines .ph{font-size:.8125rem;line-height:1.4}.recap-story-question p{margin:0 0 .5rem;font-size:.9375rem;font-weight:700}.recap-story-question ul{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.recap-story-question li button{background:var(--card);box-shadow:var(--shadow-sm);color:var(--ink);font:inherit;cursor:pointer;border:2px solid #0000;border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .85rem;font-size:.875rem;font-weight:600;transition:border-color .15s;display:inline-flex}.recap-story-question li button:disabled{cursor:default}@media (hover:hover){.recap-story-question li button:not(:disabled):hover{border-color:color-mix(in srgb, var(--hue) 45%, transparent)}}.recap-story-question li button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.recap-story-question li.right button{border-color:var(--tone-high)}.recap-story-question li.wrong button{border-color:var(--tone-falling);opacity:.85}.recap-story-question li svg{width:1rem;height:1rem}.recap-story-question li.right svg{color:var(--tone-high)}.recap-story-question li.wrong svg{color:var(--tone-falling)}.recap-schedule{border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow-sm);margin:0 0 1rem;padding:.15rem 1rem;list-style:none}.recap-schedule li{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto 5.5rem;align-items:center;gap:.75rem;padding:.6rem 0;display:grid}.recap-schedule li:last-child{border-bottom:0}.recap-schedule .word{flex-direction:column;min-width:0;display:flex}.recap-schedule .word [lang=th]{font-size:1.25rem;font-weight:600;line-height:1.5}.recap-schedule .word .ph{font-size:.8125rem}.recap-schedule .status{white-space:nowrap;border-radius:999px;align-items:center;gap:.35rem;padding:.15rem .55rem;font-size:.75rem;font-weight:600;display:inline-flex}.recap-schedule .status .dot{border-radius:50%;width:.4rem;height:.4rem}.recap-schedule .status.learning{background:var(--accent-soft);color:var(--ink)}.recap-schedule .status.learning .dot{background:var(--accent)}.recap-schedule .status.mastered{background:color-mix(in srgb, var(--tone-high) 16%, var(--card));color:var(--tone-high)}.recap-schedule .status.mastered .dot{background:var(--tone-high)}.recap-schedule .next{text-align:right;flex-direction:column;align-items:stretch;gap:.35rem;display:flex}.recap-schedule .when{white-space:nowrap;font-size:.8125rem;font-weight:700}.recap-schedule .wait{background:color-mix(in srgb, var(--muted) 18%, transparent);border-radius:999px;height:.3rem;display:block;overflow:hidden}.recap-schedule .wait span{width:calc(var(--w,0) * 100%);border-radius:inherit;background:var(--hue);height:100%;display:block}.recap-caption{color:var(--muted);margin:0 0 1rem;font-size:.875rem}.recap-review-card{border-radius:var(--radius-sm);background:var(--accent-soft);box-shadow:var(--shadow-sm);align-items:center;gap:.85rem;padding:.85rem 1rem;display:flex}.recap-review-card .tile{background:var(--accent);width:2.5rem;height:2.5rem;color:var(--accent-ink);border-radius:.75rem;flex:none;place-items:center;display:grid}.recap-review-card .tile svg{width:1.35rem;height:1.35rem}.recap-review-card strong{display:block}.recap-review-card .sub{color:var(--muted);font-size:.8125rem;display:block}.recap-review-card .pill{background:var(--accent);color:var(--accent-ink);border-radius:999px;margin-left:auto;padding:.4rem .95rem;font-size:.875rem;font-weight:700}.recap-widgets{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.recap-widget{--widget-bg:#2b2d6e;--widget-label:#f0a21a;aspect-ratio:338/158;background:var(--widget-bg);width:min(23.5rem,100%);box-shadow:var(--shadow-sm);color:#fff;border-radius:1.6rem;gap:1.15rem;padding:1.05rem 1.2rem;display:flex}:root[data-theme=dark] .recap-widget{--widget-bg:#1c1e3f;--widget-label:#f4b13a;box-shadow:0 0 0 1px #ffffff14}.recap-widget-word,.recap-widget-example{flex-direction:column;min-width:0;display:flex}.recap-widget-example{flex:1;justify-content:flex-end;gap:.15rem}.recap-widget .label{color:var(--widget-label);letter-spacing:.08em;text-transform:uppercase;margin-bottom:auto;font-size:.625rem;font-weight:800}.recap-widget-word .th{font-size:2.3rem;font-weight:600;line-height:1.4}.recap-widget .phon{color:#ffffffb8;font-size:.9375rem}.recap-widget .en{font-size:.9375rem;font-weight:600}@container recap-visual (max-width:24rem){.recap-widget{aspect-ratio:auto;border-radius:1.4rem;gap:.9rem;min-height:8.5rem;padding:.9rem 1rem}.recap-widget .label{font-size:.5625rem}.recap-widget-word .th{font-size:1.9rem}.recap-widget .phon,.recap-widget .en{font-size:.8125rem}.recap-widget-example .th{font-size:.9375rem}.recap-widget-example .en{font-size:.75rem}}.recap-widget .word{white-space:nowrap}.recap-widget-example .th{font-size:1.125rem;font-weight:500;line-height:1.5}.recap-widget-example .en{color:#ffffffb8;font-size:.8125rem;font-weight:400}.recap-drill{gap:.75rem;display:grid}.recap-drill-title,.recap-drill-caption{text-align:center;margin:0}.recap-drill-title{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.8125rem;font-weight:800}.recap-drill-play{background:var(--accent);width:4.5rem;height:4.5rem;color:var(--accent-ink);cursor:pointer;border:0;border-radius:50%;justify-self:center;place-items:center;padding:0;transition:scale .15s;display:grid;box-shadow:0 8px 22px -10px #12132999}.recap-drill-play:active{scale:.94}.recap-drill-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.recap-drill-play svg{width:2rem;height:2rem}.recap-drill-caption{color:var(--muted);font-size:.875rem}.recap-drill-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:.25rem 0 0;padding:0;list-style:none;display:grid}.recap-drill-options button{border-radius:var(--radius-sm);background:var(--card);width:100%;min-height:3.5rem;box-shadow:var(--shadow-sm);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;border:2px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.5rem;font-size:1.25rem;font-weight:800;transition:border-color .15s;display:flex}.recap-drill-options button:disabled{cursor:default}@media (hover:hover){.recap-drill-options button:not(:disabled):hover{border-color:color-mix(in srgb, var(--hue) 45%, transparent)}}.recap-drill-options button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.recap-drill-options svg{width:1.1rem;height:1.1rem}.recap-drill-options .right button{border-color:var(--tone-high)}.recap-drill-options .right svg{color:var(--tone-high)}.recap-drill-options .wrong button{border-color:var(--tone-falling)}.recap-drill-options .wrong svg{color:var(--tone-falling)}.recap-drill-answer{text-align:center;min-height:1.9rem;margin:0}.recap-drill-answer [lang=th]{font-size:1.125rem;font-weight:700}.recap-drill-answer .ph{font-size:.9375rem}@media (min-width:52rem){.recap-list{gap:2.75rem}.recap-list>li{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:2.5rem;padding:2rem}.recap-visual{padding:1.25rem}}.practice{width:min(100%,23rem);margin-inline:auto}@media (max-width:40rem){.practice{width:min(100% - 3rem,23rem)}}@media (min-width:52rem){.practice{width:min(100%,19rem)}}.practice-head{grid-template-columns:1fr auto;gap:.4rem 1rem;margin-bottom:1rem;font-size:.875rem;display:grid}.practice-title{font-weight:700}.practice-count{color:var(--muted);font-variant-numeric:tabular-nums}.practice-bar{background:var(--surface);width:100%;height:.375rem;color:var(--accent);appearance:none;border:0;border-radius:999px;grid-column:1/-1;overflow:hidden}.practice-bar::-webkit-progress-bar{background:var(--surface)}.practice-bar::-webkit-progress-value{background:var(--accent);border-radius:999px;transition:inline-size .3s}.practice-bar::-moz-progress-bar{background:var(--accent);border-radius:999px}.practice-stage{aspect-ratio:2/3;margin-bottom:1.25rem;position:relative;container-type:inline-size}.practice-card,.practice-ghost{position:absolute;inset:0}.practice-card{z-index:2;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:.22s ease-out practice-enter}.practice-card .flashcard{height:100%;transition:scale .35s}@media (hover:hover) and (prefers-reduced-motion:no-preference){.practice-card:hover .flashcard{scale:1.015}}.practice-card .flip-toggle{touch-action:pan-y}@keyframes practice-enter{0%{opacity:.6;translate:0 .875rem;scale:.95}}.practice-ghost{background:var(--face);box-shadow:var(--shadow-sm);border-radius:clamp(1.1rem,7.5cqw,1.75rem);transition:translate .22s ease-out,scale .22s ease-out}.practice-ghost.ghost-1{opacity:.85;translate:0 .75rem;scale:.95}.practice-ghost.ghost-2{opacity:.6;translate:0 1.5rem;scale:.9}.card-hint.nudge{color:color-mix(in srgb, var(--accent) 68%, var(--ink));font-weight:700;animation:.4s ease-in-out hint-nudge}:root[data-theme=dark] .card-hint.nudge{color:var(--accent)}@keyframes hint-nudge{20%{translate:-8px}40%{translate:8px}60%{translate:-5px}80%{translate:5px}}.swipe-stamp{z-index:6;opacity:0;pointer-events:none;border-radius:clamp(1.1rem,7.5cqw,1.75rem);position:absolute;inset:0}.swipe-stamp.knew{background:color-mix(in srgb, var(--good) 15%, transparent);box-shadow:inset 0 0 0 4px var(--good);color:var(--good)}.swipe-stamp.missed{background:color-mix(in srgb, var(--bad) 15%, transparent);box-shadow:inset 0 0 0 4px var(--bad);color:var(--bad)}.swipe-stamp span{background:var(--face);border:2px solid;border-radius:.75rem;align-items:center;gap:.25rem;padding:.25rem .75rem;font-size:1.125rem;font-weight:800;display:inline-flex;position:absolute;top:1.25rem}.swipe-stamp svg{width:1.25rem;height:1.25rem}.swipe-stamp.knew span{left:1.25rem;rotate:-12deg}.swipe-stamp.missed span{right:1.25rem;rotate:12deg}.practice-actions{gap:.75rem;min-height:3.5rem;display:flex}.practice-btn{font:inherit;cursor:pointer;border:0;border-radius:1rem;flex:1;justify-content:center;align-items:center;gap:.5rem;font-size:1.0625rem;font-weight:700;transition:transform .15s,filter .15s;display:inline-flex}.practice-btn svg{width:1.35rem;height:1.35rem}.practice-btn.show{background:var(--brand);color:var(--brand-ink)}.practice-btn.missed{background:var(--bad-soft);color:var(--bad)}.practice-btn.knew{background:var(--good-soft);color:var(--good)}.practice-btn:hover{filter:brightness(.96)}:root[data-theme=dark] .practice-btn:hover{filter:brightness(1.15)}.practice-btn:active{transform:scale(.97)}.practice-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.practice-keys{color:var(--muted);text-align:center;margin:.75rem 0 0;font-size:.8125rem}@media (hover:none),(pointer:coarse),(max-width:40rem){.practice-keys{display:none}}@media (scripting:none){.practice-actions,.practice-keys{display:none}}.practice-results{background:var(--face);box-shadow:var(--shadow-lg);color:var(--ink);text-align:center;border-radius:1.75rem;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1.25rem;animation:.22s ease-out practice-enter;display:flex;position:absolute;inset:0;overflow-y:auto}.score-ring{flex:none;width:8.5rem;height:8.5rem;position:relative}.score-ring svg{width:100%;height:100%;rotate:-90deg}.score-ring circle{fill:none;stroke-width:10px}.score-ring .track{stroke:var(--surface)}.score-ring .fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .7s}.score-ring p{flex-direction:column;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;inset:0}.score-ring strong{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:800;line-height:1.1}.score-ring span{color:var(--muted);font-size:.875rem}.practice-verdict{margin:0;font-weight:700}.practice-missed{text-align:left;width:100%}.practice-missed p{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .4rem;font-size:.75rem;font-weight:700}.practice-missed ul{gap:.35rem;margin:0;padding:0;list-style:none;display:grid}.practice-missed li{background:color-mix(in srgb, var(--ink) 6%, var(--face));border-radius:.75rem;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;padding:.4rem .75rem;font-size:.9375rem;display:flex}.practice-missed [lang=th]{font-size:1.125rem;font-weight:600;line-height:1.5}.practice-missed li>span:last-child{color:var(--muted);margin-left:auto}.practice-note{color:var(--muted);margin:auto 0 0;font-size:.8125rem}@media (prefers-reduced-motion:reduce){.practice-card,.practice-results,.card-hint.nudge{animation:none}.practice-ghost,.score-ring .fill{transition:none}.practice-bar::-webkit-progress-value{transition:none}}.checks{margin:0 0 1.5rem;padding:0;list-style:none}.checks li{margin-bottom:.65rem;padding-left:1.9rem;position:relative}.checks li:before{content:"";background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231d1f45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat;border-radius:999px;width:1.15rem;height:1.15rem;position:absolute;top:.32em;left:0}.tone-legend{flex-wrap:wrap;gap:.4rem 1rem;margin:0 0 1.25rem;padding:0;font-weight:700;list-style:none;display:flex}.tone-legend li{align-items:baseline;gap:.3rem;display:inline-flex}.tone-legend b{font-size:1.15em}.tone-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0 0 1.5rem;padding:0;list-style:none;display:grid}.tone-set li{--face:var(--card);border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow-sm);grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.5rem;padding:.75rem .9rem;line-height:1.3;display:grid}.tone-set li>*{grid-column:1/-1}.tone-set [lang=th]{white-space:nowrap;grid-column:1;font-size:1.75rem;font-weight:700;line-height:1.6}.tone-set .say{grid-area:1/2;width:2.25rem;height:2.25rem;margin-top:.3rem}.tone-set .ph{font-size:1.125rem}.tone-set .mean{color:var(--muted);font-size:.875rem;display:block}.tone-set .tone-name{letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem;font-size:.75rem;font-weight:700;display:block}@media (min-width:36rem){.tone-set{grid-template-columns:repeat(4,minmax(0,1fr))}}.note{border-radius:var(--radius-sm);background:var(--accent-soft);border-left:4px solid var(--accent);margin:0 0 1.5rem;padding:1rem 1.15rem}.note p:last-child{margin-bottom:0}.note-title{letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem;font-size:.8125rem;font-weight:800;display:block}.gallery{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);--phone-w:13rem;overflow-x:auto}.gallery-list{width:max-content;padding:1rem var(--gutter) 2rem;gap:1.5rem;margin:0;list-style:none;display:flex}.gallery-list li{scroll-snap-align:start;width:var(--phone-w);flex:none}.gallery .phone{width:100%}.gallery figcaption{color:var(--ink);font-weight:600}.gallery-wrap{max-width:calc(var(--page) + 2 * var(--gutter));margin-inline:auto}.gallery:focus-visible{outline-offset:-3px}.gallery-section .section-head{margin-top:clamp(2.5rem,7vw,5rem)}.gallery.stacked{--phone-w:clamp(15rem, 36vw, 19rem);--slot:calc(var(--phone-w) * .56);isolation:isolate;scrollbar-width:none;container-type:inline-size}.gallery.stacked::-webkit-scrollbar{display:none}.gallery.stacked .gallery-list{padding:1.5rem calc(50cqi - var(--slot) / 2) 1rem;gap:0}.gallery.stacked .gallery-list li{width:var(--slot);scroll-snap-align:center;position:relative}.gallery.stacked .shot{width:var(--phone-w);margin-left:calc((var(--slot) - var(--phone-w)) / 2);transform:translateX(var(--tuck,0)) scale(var(--scale,1));transform-origin:50% 40%}.gallery.stacked .gallery-list li:not([data-current]){cursor:pointer}.gallery.stacked .phone{filter:brightness(calc(1 - var(--away,0) * .12))}.gallery.stacked figcaption{opacity:0;transition:opacity .2s}.gallery.stacked [data-current] figcaption{opacity:1}.gallery-nav{justify-content:center;gap:.75rem;margin-top:.5rem;display:flex}.gallery-nav[hidden]{display:none}.gallery-nav button{border:1px solid var(--line);background:var(--card);width:2.75rem;height:2.75rem;box-shadow:var(--shadow-sm);color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;padding:0;transition:opacity .2s;display:grid}.gallery-nav button:first-child svg{rotate:180deg}.gallery-nav button:disabled{opacity:.35;cursor:default}.gallery-nav button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.gallery-nav svg{width:1.25rem;height:1.25rem}.guide-cards{gap:1rem;margin:0;padding:0;list-style:none;display:grid}.guide-card{border-radius:var(--radius);background:var(--card);height:100%;box-shadow:var(--shadow-sm);flex-direction:column;padding:1.5rem;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.guide-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.guide-card .thai-display{color:var(--brand-text);margin:0 0 .5rem;font-size:2rem}.guide-card h3{margin-bottom:.4rem}.guide-card h3 a{color:var(--ink);text-decoration:none}.guide-card h3 a:after{content:"";border-radius:var(--radius);position:absolute;inset:0}.guide-card h3 a:focus-visible{outline:none}.guide-card:has(a:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.guide-card p{color:var(--muted);margin:0;font-size:.9375rem}@media (prefers-reduced-motion:reduce){.guide-card{transition:none}.guide-card:hover{transform:none}}@media (min-width:40rem){.guide-cards{grid-template-columns:repeat(2,1fr)}}@media (min-width:64rem){.guide-cards{grid-template-columns:repeat(4,1fr)}.guide-cards.three{grid-template-columns:repeat(3,1fr)}}.faq{max-width:50rem;margin-inline:auto}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;font-size:1.0625rem;font-weight:700;list-style:none;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary h3{font-size:inherit;font-weight:inherit;letter-spacing:0;margin:0;line-height:1.4;display:inline}.faq summary:after{content:"";border-right:2.5px solid var(--brand-text);border-bottom:2.5px solid var(--brand-text);width:.65rem;height:.65rem;transition:transform .2s;position:absolute;top:50%;right:.25rem;transform:translateY(-70%)rotate(45deg)}.faq details[open] summary:after{transform:translateY(-30%)rotate(-135deg)}.faq .answer{color:var(--muted);padding:0 0 1.25rem}.faq .answer p:last-child{margin-bottom:0}@media (prefers-reduced-motion:reduce){.faq summary:after{transition:none}}.cta{color:var(--band-ink);background:radial-gradient(40rem 20rem at 10% 100%, #f0a21a33, transparent 60%), linear-gradient(160deg, var(--band-1), var(--band-2));text-align:center;padding-block:var(--section-space);position:relative;overflow:hidden}.cta-gloss{margin:0 0 1.5rem;font-size:1.0625rem}.cta .cta-gloss{color:var(--band-muted)}.cta .ph span{color:var(--band-ink)}.cta .thai-display{color:var(--accent);margin-block:0;font-size:clamp(2.5rem,8vw,4rem)}.cta h2{max-width:36rem;margin-inline:auto}.cta p{max-width:36rem;color:var(--band-muted);margin-inline:auto}.cta .hero-actions{justify-content:center;margin-top:2rem}.site-footer{background:var(--bg-deep);color:var(--muted);padding-block:3.5rem 2.5rem;font-size:.9375rem}.footer-grid{gap:2rem;display:grid}.site-footer h2{color:var(--ink);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem;font-size:.8125rem}.site-footer ul{margin:0;padding:0;list-style:none}.site-footer li+li{margin-top:.4rem}.site-footer a{color:var(--ink);padding-block:.15rem;text-decoration:none;display:inline-block}.site-footer a:hover{text-decoration:underline}.footer-brand p{max-width:22rem;margin-top:.75rem}.legal{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem;font-size:.8125rem}.legal p{margin-bottom:.5rem}@media (min-width:52rem){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}.page-head{padding-block:calc(var(--header-space) + clamp(1rem, 4vw, 2.5rem)) clamp(1.5rem, 4vw, 2.5rem)}.page-head h1{max-width:48rem;font-size:clamp(2.125rem,6vw,3.5rem)}.page-head .lede{max-width:46rem}.breadcrumbs ol{color:var(--muted);flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 1.5rem;padding:0;font-size:.875rem;list-style:none;display:flex}.breadcrumbs li+li:before{content:"/";color:var(--line);margin-right:.5rem}.breadcrumbs a{color:var(--muted)}.meta{color:var(--muted);margin:0;font-size:.875rem}.article-layout{gap:2.5rem;padding-bottom:clamp(3rem,8vw,5rem);display:grid}.article-layout>*{min-width:0}.toc{border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm);align-self:start;padding:1.25rem 1.35rem;font-size:.9375rem}.toc h2{letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem;font-size:.8125rem}.toc ol{margin:0;padding-left:1.2rem}.toc li+li{margin-top:.35rem}.toc a{color:var(--ink)}@media (min-width:64rem){.article-layout{grid-template-columns:minmax(0,1fr) 16rem;gap:4rem}.toc{top:calc(var(--header-h) + 1rem);order:2;position:sticky}}.prose{max-width:46rem}.prose h2{margin-top:2.75rem;font-size:clamp(1.625rem,3.6vw,2.125rem)}.prose h2:first-child{margin-top:0}.prose h3{margin-top:2rem}.prose li+li{margin-top:.35rem}.prose .lede{max-width:none}.table-wrap{border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow-sm);margin:0 0 1.75rem;position:relative;overflow-x:auto}.table-wrap:focus-visible{outline-offset:2px}table{border-collapse:collapse;width:100%;font-size:.9375rem}caption{text-align:left;color:var(--ink);padding:.85rem 1rem .35rem;font-weight:700}th,td{text-align:left;vertical-align:top;border-top:1px solid var(--line);padding:.6rem 1rem}thead th{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;border-top:0;font-size:.75rem;font-weight:800}.cell-th{white-space:nowrap;font-size:1.1875rem;font-weight:600}.cell-rule{margin-top:.4rem;display:block}.cell-th{display:block}td .cell-th{font-size:1.25rem}.cell-ph{display:block}.cell-also{color:var(--muted);margin-top:.15rem;font-size:.875rem;font-weight:400;display:block}.cell-also [lang=th]{font-size:.9375rem;font-weight:500}.cell-say{--face:var(--card);justify-content:space-between;align-items:center;gap:.75rem;display:flex}.cell-say .say{width:2.25rem;height:2.25rem}th.nowrap{white-space:nowrap}tbody th{font-weight:700}@media (max-width:40rem){table{font-size:.875rem}th,td{padding:.55rem .6rem}td .cell-th{font-size:1.125rem}}@media (max-width:23rem){.words .num{display:none}}td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}td.muted{color:var(--muted)}tr.skip td{color:var(--muted);font-style:italic}.period-dot{vertical-align:.05em;border-radius:999px;width:.6rem;height:.6rem;margin-right:.4rem;display:inline-block}.cta-box{border-radius:var(--radius);color:var(--band-ink);background:linear-gradient(160deg, var(--band-1), var(--band-2));align-items:center;gap:1.25rem;margin:2.5rem 0;padding:1.5rem;display:grid}.cta-box img.icon{border-radius:.95rem;width:4rem;height:4rem}.cta-box h2,.cta-box h3{margin:0 0 .35rem;font-size:1.375rem}.cta-box p{color:var(--band-muted);margin:0}@media (min-width:40rem){.cta-box{grid-template-columns:auto 1fr auto}}.related{border-top:1px solid var(--line);padding-block:3rem clamp(3rem,8vw,5rem)}.related h2{font-size:1.5rem}.word-nav{flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none;display:flex}.word-nav a{background:var(--card);box-shadow:var(--shadow-sm);border-radius:999px;padding:.4rem .9rem;font-weight:700;text-decoration:none;display:inline-block}.plain{max-width:46rem;padding-bottom:clamp(3rem,8vw,5rem)}.plain h2{margin-top:2.5rem;font-size:1.5rem}.plain h3{margin-top:1.5rem;font-size:1.125rem}.contact-card{border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm);gap:.25rem;margin:1.5rem 0;padding:1.25rem 1.35rem;display:grid}.contact-card a{font-size:1.25rem;font-weight:700}.not-found{padding-block:calc(var(--header-space) + clamp(2rem, 7vw, 5rem)) clamp(3rem, 10vw, 7rem);text-align:center}.not-found .thai-display{color:var(--brand-text);margin:0;font-size:clamp(3.5rem,14vw,6rem)}.not-found .lede{margin-inline:auto}.not-found ul{flex-wrap:wrap;justify-content:center;gap:.75rem;margin:2rem 0 0;padding:0;list-style:none;display:flex}.button{background:var(--card);min-height:3rem;box-shadow:var(--shadow-sm);color:var(--ink);border-radius:999px;justify-content:center;align-items:center;padding:0 1.35rem;font-weight:700;text-decoration:none;display:inline-flex}.button.primary{background:var(--accent);color:var(--accent-ink)}@media (prefers-reduced-motion:no-preference){.reveal{opacity:0;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transform:translateY(18px)}.reveal.in{opacity:1;transform:none}}