:root {
  color-scheme:dark;
  --ink:#0b0e18; --panel:#111624; --paper:#e9ecf3; --muted:#9ba5bc;
  --orange:#79e5dc; --mint:#79e5dc; --pink:#e5a5b4; --lavender:#b3c2db;
  --line:#b3c2db26; --display:'Manrope','Noto Sans Thai',sans-serif;
  --body:'Manrope','Noto Sans Thai',sans-serif; --mono:'DM Mono',monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--ink); color:var(--paper); font:400 14px/1.8 var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.42; cursor:default; }
[hidden] { display:none!important; }
img { display:block; max-width:100%; height:auto; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a,summary { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--display); }
em { font:inherit; font-style:normal; color:inherit; }
.wrap { width:min(1170px,89%); margin-inline:auto; }
.muted { color:var(--muted); }
.mono { font:400 10px/1.5 var(--mono); }
.eyebrow { font:400 11px/1.6 var(--body); color:var(--muted); letter-spacing:0; margin-bottom:16px; }
.spark { color:var(--orange); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; border:1px solid var(--line); background:transparent; border-radius:4px; padding:11px 17px; min-height:44px; font-size:12px; font-weight:500; line-height:1.5; }
.button:hover:not(:disabled) { border-color:var(--mint); }
.button.primary { color:var(--ink); background:var(--mint); border-color:var(--mint); }
.button.primary:hover:not(:disabled) { background:#a3eee7; }
.button span { font-size:18px; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:12px; background:none; border:0; padding:0; line-height:1.8; }
.text-link:hover { color:var(--mint); }
.text-link span { color:var(--mint); }
.skip { position:fixed; top:-100px; left:16px; padding:12px 20px; background:var(--mint); color:var(--ink); z-index:100; }
.skip:focus { top:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { width:89%; max-width:1170px; margin-inline:auto; height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:17px; }
.brand { font:600 22px/1 var(--display); letter-spacing:-1px; }
.brand>span { color:var(--mint); }
.learn-brand { font-size:13px; color:var(--muted); }
.site-header nav { margin-left:auto; display:flex; gap:25px; font-size:11px; }
.site-header nav span { color:var(--mint); margin-left:7px; }
.site-header nav a:hover { color:var(--mint); }
.study-index { padding-block:53px 70px; }
.study-heading { max-width:800px; margin-bottom:47px; }
.course-code { font:10px/1.8 var(--mono); color:var(--muted); margin-bottom:18px; }
.study-heading h1 { font-size:clamp(32px,4vw,50px); font-weight:600; line-height:1.2; letter-spacing:-.045em; margin-bottom:20px; }
.study-heading h1>span { color:var(--mint); }
.study-intro { font-size:14px; line-height:2; color:#b9c1d3; margin-bottom:24px; }
.study-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.study-actions .text-link { color:var(--muted); font-size:11px; }
.study-columns { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:65px; align-items:start; }
.list-heading { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:23px; margin-bottom:15px; }
.list-heading h2 { font-size:21px; font-weight:500; margin:0; }
.list-heading>span { font-size:11px; color:var(--muted); }
.course-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.filters { display:flex; gap:15px; flex-wrap:wrap; }
.filters button { border:0; border-bottom:1px solid transparent; background:none; padding:6px 0; font-size:11px; color:var(--muted); }
.filters button.active { color:var(--mint); border-bottom-color:var(--mint); }
.search { max-width:150px; }
.search input { width:100%; min-width:0; background:none; color:var(--paper); border:1px solid var(--line); border-radius:3px; font-size:11px; padding:7px 10px; }
.search input::placeholder { color:var(--muted); }
.course-grid { display:flex; flex-direction:column; }
.course-card { display:grid; grid-template-columns:25px minmax(0,1fr) 25px; align-items:start; gap:20px; border-bottom:1px solid var(--line); padding:23px 0; }
.course-number { font:12px/1.8 var(--mono); color:#76849e; padding-top:1px; }
.course-entry h3 { font:500 17px/1.55 var(--display); letter-spacing:-.015em; margin:0 0 4px; }
.course-entry h3 a:hover { color:var(--mint); }
.card-thai { font-size:12px; color:#c0c8d9; margin:0 0 7px; }
.card-description { font-size:11px; line-height:1.9; color:var(--muted); margin-bottom:11px; max-width:600px; }
.row-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:9px; color:#8491ab; }
.row-meta .video-badge { font-size:9px; }
.video-badge { color:var(--mint); font-size:10px; }
.video-badge.pending { color:var(--muted); }
.completed-label { color:var(--mint); }
.row-open { align-self:center; font-size:20px; color:var(--muted); text-align:right; }
.course-card:hover .row-open { color:var(--mint); }
.study-notes { border-top:1px solid var(--line); padding-top:24px; }
.study-notes section { padding:23px 0; border-bottom:1px solid var(--line); }
.study-notes h2 { font:500 13px/1.7 var(--body); margin-bottom:12px; }
.study-notes p { font-size:11px; line-height:1.95; color:var(--muted); margin:9px 0 0; }
.author-note { display:flex; align-items:center; gap:12px; margin-bottom:2px; }
.author-avatar { display:block; flex:none; width:43px; height:43px; border-radius:50%; background:#172138 url('../assets/fursona.webp') 52% 29%/290%; border:1px solid var(--line); }
.author-note>div { display:flex; flex-direction:column; gap:3px; }
.author-note strong { font-size:13px; font-weight:500; }
.author-note>div>span { font-size:9px; color:var(--muted); }
.note-link { display:inline-block; color:var(--mint); font-size:11px; margin-top:14px; }
.progress-label { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:10px; color:var(--muted); margin-bottom:10px; }
.progress-label strong { color:var(--paper); font-size:10px; font-weight:500; }
.progress-track { height:3px; background:#b3c2db1a; overflow:hidden; }
.progress-track>span { display:block; height:100%; background:var(--mint); }
.empty-state { padding:40px 20px; text-align:center; }
.empty-state h3 { font-size:17px; font-weight:500; }
.empty-state p { color:var(--muted); font-size:12px; }
.site-footer { width:89%; max-width:1170px; margin-inline:auto; padding-block:25px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:9px; }
.site-footer>a { font-size:15px; color:var(--paper); letter-spacing:-.5px; }
.site-footer>a span { color:var(--mint); }
.site-footer>span:last-child { font:8px var(--mono); }
.section-heading { display:flex; justify-content:space-between; gap:25px; align-items:end; margin-bottom:25px; }
.section-heading h2 { font-size:25px; font-weight:500; line-height:1.4; letter-spacing:-.03em; margin:0 0 10px; }
.loading { padding:50px 6%; }
.noscript { padding:20px 6%; color:var(--mint); }

.lesson-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:70px;padding-block:38px 60px}.lesson-sidebar{align-self:start;position:sticky;top:30px}.lesson-sidebar>.text-link{font-size:11px;margin-bottom:36px}.lesson-sidebar>.eyebrow{font-size:9px;margin-bottom:13px}.lesson-sidebar h2{font-size:32px;line-height:1.15;letter-spacing:-.035em;margin-bottom:28px}.lesson-sidebar .progress-label{font-size:8px;gap:7px}.lesson-sidebar .progress-label strong{font-size:9px}.lesson-sidebar nav{display:flex;flex-direction:column;gap:4px;margin-top:28px}.lesson-sidebar nav>a{display:grid;grid-template-columns:23px 1fr 12px;align-items:center;gap:10px;font-size:11px;line-height:1.4;padding:13px 12px;border:1px solid transparent;border-radius:5px;color:var(--muted)}.lesson-sidebar nav>a:hover{background:var(--panel);color:var(--paper)}.lesson-sidebar nav>a[aria-current]{border-color:var(--line);background:var(--panel);color:var(--paper)}.sidebar-number{font:10px var(--mono);color:var(--muted)}[aria-current] .sidebar-number{color:var(--orange)}.sidebar-check{color:var(--mint)}.sidebar-note{border-top:1px solid var(--line);margin-top:25px;padding:24px 12px;display:flex;align-items:center;gap:14px}.sidebar-note p{font:italic 17px/1.4 Georgia,serif;color:var(--muted);margin:0}.breadcrumb{display:flex;gap:11px;flex-wrap:wrap;font:9px var(--mono);color:var(--muted);margin-bottom:35px}.breadcrumb>a{color:var(--orange)}.lesson-kicker{display:flex;align-items:center;gap:25px;margin-bottom:14px}.lesson-kicker .eyebrow{margin:0}.lesson-heading h1{font:600 clamp(32px,3.9vw,54px)/1.1 var(--display);letter-spacing:-.05em;max-width:850px;margin-bottom:18px}.lesson-heading h1>span{color:var(--orange)}.lesson-thai{font-size:18px;line-height:1.7;margin-bottom:8px}.lesson-heading>p.muted{font-size:12px;line-height:1.9;max-width:700px}.lesson-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:25px 0 40px}.material-info{font-size:10px;color:var(--muted)}.lesson-actions>.text-link{margin-left:auto}.minor-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.minor-heading h2{font:500 15px/1.6 var(--body);margin:0}.minor-heading .mono{color:var(--muted);font-size:9px}.video-frame{position:relative;aspect-ratio:16/9;background:#17121c;border:1px solid var(--line);border-radius:6px;overflow:hidden}.video-frame iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.video-caption{display:flex;justify-content:space-between;gap:20px;margin-top:13px;font-size:10px;color:var(--muted)}.video-caption>a{color:var(--orange);white-space:nowrap}.pending-video{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:1fr 1fr;align-items:center}.pending-video>img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}.pending-video>div{padding:30px}.pending-video .eyebrow{font-size:8px;margin-bottom:16px}.pending-video h3{font:500 22px/1.55 var(--body);letter-spacing:-.03em}.pending-video p{font-size:11px;color:var(--muted);margin:0}.playlist-review{margin-top:16px;border-bottom:1px solid var(--line);padding-bottom:14px}.playlist-review summary{font-size:11px;cursor:pointer;display:flex;justify-content:space-between}.playlist-review summary span{color:var(--orange)}.playlist-review>p{font-size:10px;margin-top:15px}.lesson-overview{display:grid;grid-template-columns:.9fr 1.3fr;gap:35px;border-block:1px solid var(--line);padding-block:30px;margin-block:35px 55px}.lesson-overview .eyebrow{font-size:9px;margin-bottom:10px}.lesson-overview h2{font:500 23px/1.5 var(--body);letter-spacing:-.04em;margin:0}.lesson-overview h2 em{display:block;font-family:var(--body);font-style:normal}.lesson-overview ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.lesson-overview li{display:flex;gap:15px;align-items:baseline;font-size:11px;color:var(--muted)}.lesson-overview li>span{font:9px var(--mono);color:var(--orange)}.practice-section .section-heading{margin-bottom:6px}.practice-section .section-heading h2{font:500 34px/1.5 var(--body);letter-spacing:-.05em;margin-bottom:0}.practice-section .section-heading em{font-family:var(--body);font-style:normal}.practice-label{font-size:10px;color:var(--muted);padding-bottom:9px}.practice-intro{font-size:11px;margin-bottom:25px}.mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:0}.mode-tabs>button{border:1px solid var(--line);border-bottom:0;border-radius:5px 5px 0 0;background:transparent;display:flex;align-items:center;gap:8px;justify-content:center;padding:15px 8px;font-size:11px;color:var(--muted);position:relative;min-height:57px}.mode-tabs small{font:8px var(--mono)}.mode-tabs b{font:8px var(--mono);padding:2px 4px;background:#ffffff0a;border-radius:3px}.mode-tabs [aria-selected=true]{color:var(--orange);background:var(--panel);border-top-color:var(--orange)}.mode-tabs [aria-selected=true]:after{content:'';position:absolute;bottom:-1px;height:2px;left:0;right:0;background:var(--panel);z-index:1}#practice-panel{background:var(--panel);border:1px solid var(--line);border-radius:0 0 6px 6px;overflow:hidden;min-height:380px}#practice-panel:focus{outline:none}.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 28px}.quiz-top .mono{font-size:9px;color:var(--muted)}.quiz-best{color:var(--muted);font-size:10px}.quiz-progress{height:2px;background:#ffffff0b}.quiz-progress>span{display:block;height:100%;background:var(--orange)}.question-content{padding:25px 28px 28px}.source-tag{font-size:9px;display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:3px;color:var(--lavender);margin-bottom:15px}.source-tag.original{color:var(--mint)}.question-content h3{font:500 17px/1.85 var(--body);letter-spacing:-.01em;white-space:pre-wrap;margin-bottom:18px;overflow-wrap:anywhere}.question-image{max-height:360px;object-fit:contain;background:white;border-radius:5px;margin:14px auto;width:auto}.answer-hint{font-size:10px;color:var(--muted);margin-bottom:14px}.answers{display:grid;gap:9px}.answer{display:flex;align-items:center;gap:15px;border:1px solid var(--line);background:#211b274d;border-radius:5px;padding:14px 16px;text-align:left;line-height:1.7;font-size:12px;min-height:56px;width:100%;transition:border-color .2s,background .2s}.answer:hover:not(:disabled){border-color:var(--orange)}.answer.selected{border-color:var(--orange);background:#f6a1760d}.answer-letter{font:10px var(--mono);width:25px;height:25px;display:grid;place-items:center;background:#ffffff08;border:1px solid var(--line);border-radius:4px;flex-shrink:0}.answer-indicator{color:var(--muted);margin-left:auto}.answer.correct{border-color:var(--mint);background:#a5e8d40c}.answer.correct .answer-indicator{color:var(--mint)}.answer.incorrect{border-color:var(--pink);background:#ef9fb90d}.answer.incorrect .answer-indicator{color:var(--pink)}.answer:disabled{opacity:1;cursor:default}.quiz-actions{border-top:1px solid var(--line);padding-top:22px;margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px}.quiz-actions>.muted{font-size:10px}.quiz-actions .button{min-height:42px;padding:10px 18px;font-size:11px}.feedback{border:1px solid var(--line);border-radius:5px;padding:18px 20px;margin-top:20px;font-size:11px}.feedback strong{display:block;font-size:13px;font-weight:500}.feedback p{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.feedback.success{border-color:#a5e8d44d;background:#a5e8d408}.feedback.success strong{color:var(--mint)}.feedback.retry{border-color:#ef9fb94d;background:#ef9fb908}.feedback.retry strong{color:var(--pink)}.quiz-result{text-align:center;padding:40px 25px}.quiz-result>.spark{font-size:50px;display:block;margin-bottom:20px}.quiz-result .eyebrow{font-size:9px}.quiz-result h3{font:600 70px var(--display);letter-spacing:-.05em;margin:15px 0 20px}.quiz-result h3 em{font:400 40px var(--display);color:var(--muted)}.quiz-result>p{font-size:12px}.quiz-result>div{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-block:25px}.quiz-result>p:last-child{font-size:10px}.match-list{display:grid;gap:12px;margin-top:25px}.match-row{border:1px solid var(--line);border-radius:5px;padding:16px}.match-row>label{display:flex;align-items:center;gap:12px;font-size:13px;margin-bottom:10px}.match-row>label>span{font:9px var(--mono);color:var(--orange)}.match-row>select{width:100%;min-width:0;border:1px solid var(--line);background:var(--ink);color:var(--paper);border-radius:4px;padding:11px 12px;font-size:11px;cursor:pointer}.match-row option{background:var(--ink);color:var(--paper)}.match-feedback{margin:8px 0 0;font-size:10px}.match-feedback:empty{display:none}.match-correct{border-color:#a5e8d480}.match-correct .match-feedback{color:var(--mint)}.match-incorrect{border-color:#ef9fb980}.match-incorrect .match-feedback{color:var(--pink)}.flashcard-wrap{padding:0 28px 25px}.flashcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:310px;width:100%;border:1px solid #c5b4e942;background:#c5b4e908;border-radius:8px;padding:30px;color:var(--paper)}.flashcard.is-flipped{background:#a5e8d40c;border-color:#a5e8d44d}.flash-eyebrow{font:9px var(--mono);letter-spacing:.07em;color:var(--lavender)}.is-flipped .flash-eyebrow{color:var(--mint)}.flash-text{font:500 20px/1.8 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}.flash-explanation{color:var(--muted);font-size:12px;line-height:1.9}.flip-hint{font-size:10px;color:var(--muted);margin-top:auto;padding-top:12px}.flashcard .question-image{max-height:240px}.flash-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block:20px}.flash-evaluation{display:flex;gap:10px}.flash-evaluation>.button{min-height:42px;padding:10px 15px;font-size:11px}.icon-button{display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:50%;width:39px;height:39px;font-size:18px;flex-shrink:0}.flash-tools{display:flex;justify-content:center;gap:35px;border-top:1px solid var(--line);padding-top:20px}.flash-tools>.text-link{font-size:10px;color:var(--muted)}.flash-note{font-size:9px;text-align:center;margin:15px 0 0}.lesson-resources{margin-top:35px}.lesson-resources .eyebrow{font-size:9px;margin-bottom:14px}.lesson-resources>div{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lesson-resources a{border:1px solid var(--line);border-radius:5px;padding:17px;display:flex;align-items:center;gap:12px;font-size:11px}.lesson-resources a:hover{border-color:var(--orange)}.lesson-resources small{color:var(--muted);font-size:9px}.lesson-resources b{margin-left:auto;color:var(--orange);font-weight:400;font-size:17px}.lesson-completion{display:flex;align-items:center;justify-content:space-between;gap:25px;border-block:1px solid var(--line);padding-block:30px;margin-top:35px}.lesson-completion h3{font:500 17px var(--body);margin-bottom:9px}.lesson-completion h3 span{color:var(--orange);margin-left:10px}.lesson-completion p{color:var(--muted);font-size:10px;margin:0}.lesson-completion .button{font-size:11px;white-space:nowrap}.lesson-completion .button[aria-pressed=true]{color:var(--mint);border-color:var(--mint)}.lesson-pagination{display:flex;justify-content:space-between;gap:30px;margin-block:25px}.lesson-pagination>a{display:flex;flex-direction:column;gap:7px;width:48%}.lesson-pagination>a:last-child{text-align:right}.lesson-pagination small{color:var(--muted);font-size:10px}.lesson-pagination strong{font:500 16px var(--display);letter-spacing:-.03em}.lesson-pagination a:hover strong{color:var(--orange)}.source-note{font-size:9px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:30px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:20;background:var(--paper);color:var(--ink);border-radius:5px;padding:12px 22px;font-size:12px;max-width:90vw;box-shadow:0 5px 30px #0004;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}.loading{padding:50px 6%}.noscript{padding:20px 6%;color:var(--orange)}
img{height:auto}

/* Lesson layouts keep the same learning controls with quieter typography. */
.lesson-layout { grid-template-columns:210px minmax(0,1fr); gap:55px; }
.lesson-sidebar h2 { font-size:22px; font-weight:500; letter-spacing:-.025em; }
.lesson-heading h1 { font:600 clamp(29px,3.2vw,43px)/1.2 var(--display); letter-spacing:-.035em; }
.lesson-heading h1>span { display:none; }
.lesson-kicker .eyebrow { font-family:var(--body); letter-spacing:0; }
.lesson-thai { font-size:16px; }
.pending-video { display:block; background:var(--panel); border-radius:4px; }
.pending-video>div { padding:25px; }
.pending-video h3 { font:500 16px/1.7 var(--body); margin-bottom:10px; }
.lesson-overview { grid-template-columns:1fr; gap:14px; padding-block:24px; margin-block:30px 40px; }
.lesson-overview .eyebrow { display:none; }
.lesson-overview h2 { font-size:16px; font-weight:500; letter-spacing:0; }
.lesson-overview ul { gap:8px; }
.practice-section .section-heading h2 { font-size:25px; font-weight:500; letter-spacing:-.025em; }
.practice-section .section-heading .eyebrow { display:none; }
.practice-intro { margin-bottom:20px; }
.mode-tabs { gap:0; }
.mode-tabs>button { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:13px 8px; min-height:49px; }
.mode-tabs small { display:none; }
.mode-tabs [aria-selected=true] { border-bottom:2px solid var(--mint); background:transparent; }
.mode-tabs [aria-selected=true]:after { display:none; }
#practice-panel { border-top:0; border-radius:0 0 4px 4px; }
.quiz-top .mono { font-family:var(--body); letter-spacing:0; }
.quiz-result h3 { font:500 45px var(--display); }
.quiz-result h3 em { font:400 27px var(--display); }
.quiz-result .eyebrow { font:12px var(--body); }
.flashcard { background:#172033; border-color:var(--line); }
.flashcard.is-flipped { background:#79e5dc07; }
.flash-eyebrow { font-family:var(--body); letter-spacing:0; }
@media(max-width:1000px) {
 .study-columns { grid-template-columns:minmax(0,1fr) 220px; gap:35px; }
 .lesson-layout { gap:30px; grid-template-columns:190px minmax(0,1fr); }
 .course-toolbar { align-items:stretch; flex-direction:column; gap:10px; }
 .search { max-width:210px; }
 .lesson-completion { align-items:start; flex-direction:column; gap:18px; }
}
@media(max-width:760px) {
 .wrap,.site-header,.site-footer { width:89%; }
 .site-header { height:68px; gap:13px; }
 .site-header nav { gap:15px; }
 .back-home { display:none; }
 .study-index { padding-block:36px 45px; }
 .study-heading { margin-bottom:35px; }
 .study-heading h1 { font-size:36px; }
 .study-intro { font-size:12px; }
 .study-columns { grid-template-columns:minmax(0,1fr); gap:35px; }
 .study-notes { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }
 .author-note { grid-column:1/-1; padding-bottom:12px; }
 .study-notes section { padding-block:20px; }
 .course-toolbar { flex-direction:row; align-items:center; }
 .search { max-width:150px; }
 .lesson-layout { grid-template-columns:minmax(0,1fr); padding-top:24px; gap:24px; }
 .lesson-sidebar { position:static; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:15px; border-bottom:1px solid var(--line); padding-bottom:16px; }
 .lesson-sidebar>.text-link { margin:0; font-size:11px; }
 .lesson-sidebar>.eyebrow,.lesson-sidebar>h2 { display:none; }
 .lesson-sidebar nav { grid-column:1/-1; display:flex; flex-direction:row; overflow-x:auto; gap:6px; margin:0; padding:5px 3px; scrollbar-width:thin; }
 .lesson-sidebar nav>a { display:flex; flex-shrink:0; padding:9px; font-size:10px; gap:8px; }
 .lesson-sidebar nav>a>span:nth-child(2) { display:none; }
 .lesson-sidebar nav>a[aria-current]>span:nth-child(2) { display:inline; }
 .sidebar-check:empty { display:none; }
 .lesson-sidebar .progress-label { margin-bottom:7px; font-size:9px; }
 .lesson-content { min-width:0; }
 .breadcrumb { margin-bottom:25px; }
 .lesson-actions>.text-link { margin-left:0; }
 .site-footer>span:last-child { display:none; }
 .lesson-completion { flex-direction:row; align-items:center; }
}
@media(max-width:480px) {
 .site-header { gap:10px; }
 .brand { font-size:20px; }
 .learn-brand { font-size:12px; }
 .site-header nav { font-size:10px; }
 .site-header nav span { margin-left:3px; }
 .study-heading h1 { font-size:31px; letter-spacing:-.045em; }
 .course-code { font-size:9px; }
 .study-intro { font-size:12px; }
 .study-intro br { display:none; }
 .study-actions { gap:17px; }
 .study-actions .button { font-size:11px; padding:11px 14px; }
 .study-actions .text-link { font-size:10px; }
 .course-toolbar { flex-direction:column; align-items:stretch; gap:12px; }
 .filters { gap:20px; }
 .search { max-width:none; }
 .search input { padding:9px 11px; }
 .course-card { grid-template-columns:21px minmax(0,1fr) 17px; gap:12px; padding-block:22px; }
 .course-number { font-size:10px; padding-top:3px; }
 .course-entry h3 { font-size:15px; line-height:1.55; }
 .card-thai { font-size:11px; margin-top:5px; }
 .card-description { font-size:10px; }
 .row-meta { gap:6px 12px; font-size:8px; }
 .row-meta .video-badge { font-size:8px; }
 .row-open { font-size:18px; }
 .study-notes { display:block; }
 .author-note { padding-bottom:10px; }
 .study-notes h2 { font-size:13px; }
 .site-footer { font-size:8px; padding-block:22px; gap:10px; }
 .site-footer>a { font-size:14px; }
 .lesson-sidebar { gap:12px; }
 .lesson-sidebar .progress-label { font-size:8px; }
 .lesson-sidebar .progress-label strong { font-size:9px; }
 .lesson-sidebar nav>a { padding:9px 8px; }
 .breadcrumb { font-size:7px; gap:8px; margin-bottom:24px; }
 .lesson-kicker { gap:15px; flex-wrap:wrap; }
 .lesson-kicker .eyebrow { font-size:10px; }
 .lesson-heading h1 { font-size:29px; line-height:1.25; }
 .lesson-thai { font-size:15px; }
 .lesson-heading>p.muted { font-size:11px; }
 .lesson-actions { gap:12px; margin-block:22px 28px; }
 .material-info { font-size:8px; }
 .lesson-actions>.button { font-size:11px; }
 .lesson-actions>.text-link { flex-basis:100%; font-size:11px; }
 .minor-heading h2 { font-size:13px; }
 .minor-heading .mono { font-size:8px; }
 .video-caption { flex-direction:column; gap:7px; font-size:9px; }
 .pending-video>div { padding:20px; }
 .pending-video p { font-size:11px; }
 .playlist-review summary { font-size:10px; }
 .practice-section .section-heading { flex-wrap:nowrap; gap:10px; }
 .practice-section .section-heading h2 { font-size:23px; }
 .practice-label { font-size:9px; white-space:nowrap; }
 .practice-intro { font-size:10px; }
 .mode-tabs>button { font-size:9px; gap:4px; min-height:54px; padding:10px 3px; flex-direction:column; line-height:1.4; }
 .mode-tabs b { font-size:7px; }
 .quiz-top { padding:19px 16px; gap:10px; }
 .quiz-top .mono,.quiz-best { font-size:8px; }
 .question-content { padding:21px 16px; }
 .question-content h3 { font-size:14px; line-height:1.9; }
 .source-tag { font-size:8px; }
 .answer { padding:13px 11px; gap:10px; font-size:11px; }
 .answer-letter { width:22px; height:22px; font-size:9px; }
 .answer-hint { font-size:9px; }
 .quiz-actions { gap:14px; flex-wrap:wrap; }
 .quiz-actions>.muted { font-size:9px; }
 .quiz-actions>.button { margin-left:auto; }
 .feedback { padding:14px; font-size:10px; }
 .feedback strong { font-size:12px; }
 .match-row { padding:12px; }
 .match-row>label { font-size:12px; }
 .match-row>select { font-size:10px; padding:12px 7px; }
 .flashcard-wrap { padding:0 16px 22px; }
 .flashcard { padding:24px 17px; min-height:300px; }
 .flash-text { font-size:17px; }
 .flash-eyebrow { font-size:9px; }
 .flash-explanation { font-size:10px; }
 .flash-nav { gap:8px; }
 .flash-evaluation { gap:7px; }
 .flash-evaluation>.button { font-size:10px; padding:11px 10px; min-height:40px; }
 .icon-button { width:31px; height:31px; font-size:15px; }
 .flash-tools { gap:20px; }
 .flash-tools>.text-link { font-size:9px; }
 .flash-note { font-size:8px; }
 .lesson-resources>div { grid-template-columns:1fr; gap:10px; }
 .lesson-resources a { font-size:11px; padding:16px; }
 .lesson-completion { flex-direction:column; align-items:start; gap:16px; padding-block:25px; }
 .lesson-completion h3 { font-size:16px; }
 .lesson-completion p { font-size:10px; }
 .lesson-pagination { gap:18px; }
 .lesson-pagination strong { font-size:13px; line-height:1.4; }
 .lesson-pagination small { font-size:9px; }
 .source-note { font-size:9px; }
 .quiz-result { padding:30px 18px; }
 .quiz-result>p { font-size:11px; }
 .quiz-result .button { font-size:11px; }
 #toast { font-size:11px; padding:12px 16px; width:max-content; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; animation:none!important; } }

/* Shared motion language with the portfolio. */
:root { --kinetic-ease:cubic-bezier(.45,0,.25,1); }
.button,.icon-button,.filter-button,.mode-tabs>button,.course-card,.row-open,.lesson-sidebar nav a,.answer,.lesson-resources a { transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .3s ease,transform .36s var(--kinetic-ease); }
.progress-track span,.quiz-progress span { transition:width .5s var(--kinetic-ease); }
.course-card:hover .row-open,.course-card:focus-within .row-open { transform:translateX(5px); }
.study-heading,.lesson-heading { animation:study-enter .7s var(--kinetic-ease) both; }
.course-card { animation:study-enter .55s var(--kinetic-ease) both; }
.course-card:nth-child(2) { animation-delay:.045s; }
.course-card:nth-child(3) { animation-delay:.09s; }
.course-card:nth-child(4) { animation-delay:.135s; }
.course-card:nth-child(n+5) { animation-delay:.18s; }
#practice-panel>.question-content,#practice-panel>.quiz-result,.feedback { animation:study-enter .35s var(--kinetic-ease) both; }
.flashcard { animation:study-card-enter .38s var(--kinetic-ease) both; }
@keyframes study-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes study-card-enter { from { opacity:.35; transform:perspective(900px) rotateY(-12deg) translateY(5px); } to { opacity:1; transform:perspective(900px) rotateY(0) translateY(0); } }
@media(max-width:360px) {
 .site-header .wrap { gap:12px; }
 .site-header nav { gap:12px; }
 .practice-section .section-heading { flex-wrap:wrap; }
 .match-row { min-width:0; }
 .match-row>select { min-width:0; width:100%; }
 #toast { max-width:calc(100vw - 24px); white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }