:root{--bg:#ffffff;--soft:#f0f9ff;--soft2:#e0f2fe;--sky:#0ea5e9;--sky-d:#0284c7;--cyan:#06b6d4;--navy:#0c2d48;--muted:#4b6478;--line:#d6e9f5;--maple:#e2401c;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--navy);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}a{color:var(--sky-d)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left))}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:800}h2{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800}h3{font-size:1.15rem}
p{margin:0 0 .8em}
.notice{background:var(--soft);border-bottom:1px solid var(--line);font-size:.86rem;color:var(--muted)}.notice .wrap{padding-block:8px}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:800;font-size:1.25rem}.brand svg{width:34px;height:34px}.brand b{color:var(--sky-d)}
nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:999px;font-size:.95rem}nav a:hover{background:var(--soft);color:var(--sky-d)}
@media(max-width:700px){nav .hide-m{display:none}}
.hero{background:radial-gradient(700px 380px at 90% -10%,var(--soft2),transparent 70%),radial-gradient(500px 300px at 0% 110%,#ecfeff,transparent 70%);padding:56px 0 48px;border-bottom:1px solid var(--line)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-d);background:var(--soft2);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.hl{background:linear-gradient(90deg,var(--sky-d),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.15rem;color:var(--muted);max-width:40em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem}
.btn-p{background:linear-gradient(95deg,var(--sky),var(--cyan));color:#fff;box-shadow:0 10px 24px -14px var(--sky)}.btn-p:hover{filter:brightness(1.05)}
.btn-l{background:#fff;border-color:var(--line);color:var(--navy)}.btn-l:hover{border-color:var(--sky)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.facts span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.88rem}
section{padding:56px 0}section.alt{background:var(--soft)}
.grid{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--navy);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(2,132,199,.55);border-color:var(--sky)}
.card p{color:var(--muted);font-size:.95rem;flex:1}.grp{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan)}
.meta{font-size:.82rem;color:var(--muted)}.free{position:absolute;top:16px;right:16px;font-size:.7rem;font-weight:800;color:#047857;background:#d1fae5;border-radius:999px;padding:2px 9px}
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:20px}.steps div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft2);color:var(--sky-d);margin-bottom:8px}
#study[hidden]{display:none}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}.tabs a{text-decoration:none;font-size:.9rem;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--navy);background:#fff}.tabs a[aria-current]{background:var(--sky-d);border-color:var(--sky-d);color:#fff}
.viewer{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:0 24px 50px -36px rgba(12,45,72,.45)}
.viewer img{margin:0 auto;max-height:80vh;width:auto;border-radius:8px;border:1px solid var(--line)}
.vnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}.vnav button{min-width:48px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--soft);font-size:1.1rem;cursor:pointer;color:var(--navy)}
.dl{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:16px}
.small{font-size:.85rem;color:var(--muted)}
.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-top:22px}
.quiz ol{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}.quiz li button{width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;color:inherit;cursor:pointer}
.quiz li button:hover{border-color:var(--sky)}.quiz .ok{background:#d1fae5;border-color:#10b981}.quiz .no{background:#fee2e2;border-color:#ef4444}
.why{background:var(--soft);border-radius:12px;padding:12px 14px;font-size:.95rem}.qtop{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted)}
.key,.legal details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:12px}.legal summary{font-weight:700;cursor:pointer}.sec-head p{color:var(--muted)}
footer{border-top:1px solid var(--line);padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:.85rem;color:var(--muted)}
details.app summary{font-weight:700;cursor:pointer}details.app{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:10px}

.guide{max-width:820px}.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:16px 0}.toc ol{margin:6px 0 0;padding-left:20px;columns:2;column-gap:28px;font-size:.92rem}@media(max-width:600px){.toc ol{columns:1}}
.sec{background:#fff;border:1px solid var(--line);border-left:6px solid var(--c,var(--sky));border-radius:16px;padding:18px 20px;margin:18px 0;overflow-x:auto}
.sec h2{font-size:1.4rem;color:var(--navy)}.sec h3{color:var(--sky-d);margin-top:1.1em}
.sec table{border-collapse:collapse;width:100%;font-size:.92rem;margin:10px 0}.sec th{background:var(--soft2);text-align:left}.sec th,.sec td{border:1px solid var(--line);padding:7px 9px;vertical-align:top}
.sec ul{padding-left:20px}.sec li{margin:4px 0}
.must{background:#ecfdf5;border:1px solid #6ee7b7;border-radius:12px;padding:10px 14px}.must::before{content:"⭐ ";}
.warn{background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:10px 14px}
.info{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
li.trick{list-style:none;margin-left:-20px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:12px;padding:9px 13px}li.trick::before{content:"🧠 "}
li.life{list-style:none;margin-left:-20px;background:#f0f9ff;border-radius:12px;padding:8px 13px}li.life::before{content:"🏠 "}
.switch{display:flex;gap:8px;margin:18px 0}.switch a{flex:1;text-align:center}
.final{text-align:center;padding:20px}.final b{font-size:2rem;color:var(--sky-d)}

.brand .word{font-family:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;font-weight:800;font-size:1.3rem;line-height:1;letter-spacing:-.01em;color:var(--navy)}.brand .word b{color:#2f8f62}.brand .word small{display:block;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.34em;color:#2f8f62;margin-top:3px;font-weight:700}.brand svg{width:38px;height:38px;flex:none}@media (max-width:440px){.brand .word{font-size:1.15rem}}

/* ===== Thai-Numan-style layer (2026-10-31): animated hero + colourful tiles. Original CSS/SVG art, no external media. ===== */
.th-hero{position:relative;overflow:hidden;min-height:min(86svh,760px);display:grid;align-items:center;padding:72px 0 96px;background:linear-gradient(170deg,#f0f9ff 0%,#e0f2fe 45%,#ffffff 100%);border-bottom:1px solid var(--line);isolation:isolate}
.th-media{position:absolute;inset:0;z-index:-1}
.th-scene{position:absolute;inset:-4%;opacity:0;animation:th-fade 18s infinite,th-kb 18s infinite}
.th-scene svg{width:100%;height:100%}
.th-s1{background:radial-gradient(60% 55% at 85% 15%,#bae6fd 0,transparent 70%),radial-gradient(50% 50% at 10% 95%,#cffafe 0,transparent 70%),radial-gradient(35% 35% at 60% 80%,#fde68a55 0,transparent 70%)}
.th-s2{animation-delay:6s,6s;background:radial-gradient(55% 50% at 20% 20%,#e0f2fe,transparent 70%),radial-gradient(45% 45% at 90% 90%,#fce7f3,transparent 70%)}
.th-s3{animation-delay:12s,12s;background:radial-gradient(60% 50% at 75% 30%,#dcfce7,transparent 70%),radial-gradient(50% 50% at 0% 70%,#e0f2fe,transparent 70%)}
.th-ecg{stroke-dasharray:1400;stroke-dashoffset:1400;animation:th-draw 6s ease-in-out infinite;opacity:.35}
@keyframes th-fade{0%{opacity:0}6%{opacity:1}33%{opacity:1}40%{opacity:0}100%{opacity:0}}
@keyframes th-kb{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1.08)}}
@keyframes th-draw{0%{stroke-dashoffset:1400}60%,100%{stroke-dashoffset:0}}
.th-leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.th-leaf{position:absolute;top:-60px;opacity:.28;animation:th-fall linear infinite}
@keyframes th-fall{0%{transform:translate(0,-60px) rotate(0)}50%{transform:translate(40px,48vh) rotate(180deg)}100%{transform:translate(-20px,100vh) rotate(360deg)}}
.th-glow{position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 45%,rgba(255,255,255,.85),transparent 70%)}
.th-glass{max-width:760px;padding:30px 30px 26px;border-radius:28px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 70px -30px rgba(2,132,199,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.th-glass::before{content:"";display:block;width:58px;height:5px;border-radius:5px;margin-bottom:14px;background:linear-gradient(90deg,#f97316,#fbbf24 45%,#38bdf8)}
.th-hero h1{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:clamp(2.1rem,6vw,3.9rem);line-height:1.08;letter-spacing:-.01em}
.th-hero .btn{border-radius:999px;padding:14px 26px}
.th-hero .btn-p{box-shadow:0 12px 30px -10px rgba(14,165,233,.7)}
.th-rv{opacity:0;transform:translateY(24px);animation:th-up .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes th-up{to{opacity:1;transform:none}}
.th-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:24px;height:38px;border:2px solid #7dd3fc;border-radius:14px}
.th-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:#0ea5e9;animation:th-dot 1.6s ease-in-out infinite}
@keyframes th-dot{to{transform:translateY(12px);opacity:0}}
/* colourful light tiles */
.th-tile{--c1:#e0f2fe;--c2:#ffffff;--ac:#0ea5e9;background:linear-gradient(150deg,var(--c1),var(--c2) 75%);border:1px solid color-mix(in srgb,var(--ac) 25%,#fff);border-radius:24px;overflow:hidden}
.th-tile::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 28%,transparent),transparent 70%);transition:transform .5s}
.th-tile:hover::before{transform:scale(1.35)}
.th-tile:hover{border-color:var(--ac);box-shadow:0 22px 44px -26px var(--ac)}
.th-tile .grp{color:var(--ac)}
.th-tile h3{font-size:1.25rem}
.th-t1{--c1:#ffe4e6;--ac:#e11d48}.th-t2{--c1:#e0f2fe;--ac:#0284c7}.th-t3{--c1:#ede9fe;--ac:#7c3aed}.th-t4{--c1:#fef3c7;--ac:#d97706}
.th-t5{--c1:#dcfce7;--ac:#16a34a}.th-t6{--c1:#cffafe;--ac:#0891b2}.th-t7{--c1:#fce7f3;--ac:#db2777}
/* topic pages: light animated band at top */
main>section.alt:first-child{background:linear-gradient(120deg,#f0f9ff,#e0f2fe 40%,#ecfeff 70%,#f0f9ff);background-size:300% 300%;animation:th-pan 18s ease-in-out infinite}
@keyframes th-pan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (max-width:640px){.th-hero{min-height:auto;padding:48px 0 80px}.th-glass{padding:22px 18px;border-radius:22px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.8)}.th-leaf:nth-child(n+8){display:none}}
@media (prefers-reduced-motion:reduce){.th-scene,.th-leaf,.th-ecg,.th-rv,.th-scroll span,main>section.alt:first-child{animation:none!important}.th-s1{opacity:1}.th-rv{opacity:1;transform:none}.th-leaf{display:none}}

/* ===== Mobile polish (2026-10-31) ===== */
@media (max-width:640px){
 .notice{font-size:.74rem;line-height:1.35}.notice .wrap{padding-top:6px;padding-bottom:6px}
 header nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
 .th-hero{padding:28px 0 64px}
 .th-hero h1{font-size:clamp(1.8rem,8.4vw,2.3rem)}
 .th-hero .lede{font-size:.98rem;line-height:1.5}
 .th-hero .row{gap:10px}.th-hero .row .btn{flex:1 1 100%;justify-content:center;text-align:center}
 .th-hero .facts span{font-size:.78rem}
 .grid{grid-template-columns:1fr;gap:14px}
 .th-tile{padding:18px;border-radius:20px}
 .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-inline:-4px}
 .tabs::-webkit-scrollbar{display:none}
 .tabs a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
 .btn{min-height:48px;padding:12px 18px;white-space:nowrap}
 .sec a,.guide nav a,.toc a{min-height:44px;display:inline-flex;align-items:center}
 .quiz button{min-height:48px}
 .sec{overflow-x:auto}
}
@media (min-width:420px) and (max-width:640px){.grid{grid-template-columns:1fr 1fr;gap:12px}.th-tile h3{font-size:1.08rem}.th-tile p{font-size:.86rem}}
@media (max-width:640px){.btn{white-space:normal}main>section.alt:first-child .btn{flex:1 1 100%;justify-content:center;text-align:center}}
footer .foot-note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(14,165,233,.18);font-size:.76rem;line-height:1.5;color:#64748b;opacity:.95}