:root{--ink:#1b160f;--muted:#756b5f;--paper:#fffaf0;--soft:#f3e8d3;--line:#dfcfb6;--brand:#0f766e;--brand2:#b45309;--accent:#eab308;--shadow:0 22px 55px rgba(75,48,18,.14)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#d9f99d 0,#fef3c7 26%,#fffaf0 58%,#e0f2fe 100%);color:var(--ink);font-family:"Avenir Next","Noto Sans Thai",Tahoma,sans-serif;line-height:1.65}.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(16px);background:rgba(255,250,240,.86);border-bottom:1px solid var(--line)}.nav{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:13px 18px}.brand{font-weight:900;color:var(--ink);text-decoration:none}.navlinks{display:flex;gap:8px;flex-wrap:wrap}.navlinks a{padding:7px 11px;border-radius:999px;color:var(--ink);text-decoration:none}.navlinks a.active,.navlinks a:hover{background:var(--ink);color:var(--paper)}main{max-width:1240px;margin:auto;padding:24px 18px 70px}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);gap:20px;align-items:stretch}.card,.section,.course-step,.frame-step{background:rgba(255,250,240,.94);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}.card,.section{padding:24px}.hero h1{font-size:clamp(2rem,5vw,4.8rem);line-height:1.02;margin:10px 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:900}.lead{font-size:1.12rem;color:#4b4033}.meta,.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.pill,.time-tag{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fffdf6;color:var(--ink);text-decoration:none;font-size:.9rem}.time-tag{background:var(--brand);color:white;border-color:var(--brand);font-weight:900}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:10px 15px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:900;border:0}.btn.secondary{background:#fffdf6;color:var(--ink);border:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}.stat{background:rgba(255,250,240,.82);border:1px solid var(--line);border-radius:22px;padding:18px}.stat strong{display:block;font-size:2rem}.section{margin:22px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.lesson-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.sidebar{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;padding:16px}.sidebar a{display:block;padding:8px 10px;border-radius:12px;color:var(--ink);text-decoration:none}.sidebar a:hover,.sidebar a.active{background:var(--soft)}.course-step,.frame-step{padding:22px;margin:0 0 18px;scroll-margin-top:90px}.step-title{display:flex;gap:12px;align-items:center}.step-no{display:inline-flex;width:42px;height:42px;border-radius:14px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;font-weight:900}.step-grid{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}figure{margin:0}img{max-width:100%;border-radius:18px;border:1px solid var(--line)}figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}.quote{border-left:5px solid var(--brand2);background:#fff4df;border-radius:0 16px 16px 0;padding:14px;margin:12px 0}.point{background:#fffdf6;border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0}.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.toc a{display:block;border:1px solid var(--line);border-radius:18px;padding:12px;background:#fffdf6;color:var(--ink);text-decoration:none}.toc small{display:block;color:var(--muted)}.video-frame video{width:100%;max-height:72vh;background:#111;border-radius:24px}.clip-card img{aspect-ratio:16/9;object-fit:cover;width:100%}.timeline-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;border-bottom:1px dashed var(--line);padding:12px 0}.footer{max-width:1240px;margin:auto;padding:26px 18px;color:var(--muted)}@media(max-width:900px){.hero,.lesson-layout,.step-grid{grid-template-columns:1fr}.sidebar{position:relative;top:auto;max-height:none}.nav{align-items:flex-start;gap:8px;flex-direction:column}}