:root{--color-bg: #F7F7F2;--color-surface: #FFFFFF;--color-primary: #245C4F;--color-primary-hover: #1b473d;--color-primary-soft: #E7F0EA;--color-accent-soft: #F7E8D7;--color-text: #182A25;--color-text-muted: #596A63;--color-border: #DCE4DE;--color-error: #B42318;--color-error-soft: #FDE8E8;--color-success: #1E6B43;--color-success-soft: #E8F5EE;--color-on-primary: #FFFFFF;--color-hero: #234E43;--color-hero-muted: #D4E4D6;--color-paper: #F5EDD9;--color-paper-ink: #365445;--color-decoration: #799980;--space-3xl: 64px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-base: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-card: 20px;--radius-control: 12px;--radius-badge: 9999px;--content-max-width: 1200px;--lesson-max-width: 760px;--sidebar-width: 232px;--touch-target-min: 44px;--font-family: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xs: 13px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-md: 18px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 30px;--font-size-3xl: 36px;--line-height-thai: 1.62;--shadow-subtle: 0 2px 8px rgba(24, 42, 37, .04), 0 1px 2px rgba(24, 42, 37, .02);--shadow-card: 0 4px 16px rgba(24, 42, 37, .05), 0 1px 3px rgba(24, 42, 37, .03);--shadow-elevated: 0 12px 32px rgba(24, 42, 37, .08), 0 2px 6px rgba(24, 42, 37, .04);--transition-smooth: .18s cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-thai);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{color:var(--color-text);font-weight:600;line-height:1.35}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{color:var(--color-text);margin-bottom:var(--space-xs)}a{color:var(--color-primary);text-decoration:none}input,textarea,select,button{font-family:inherit;font-size:var(--font-size-base);color:inherit}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button{min-height:var(--touch-target-min)}button:not(:disabled){-webkit-tap-highlight-color:transparent}button svg{flex-shrink:0}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--color-primary)!important;outline-offset:3px}.custom-btn{min-width:var(--touch-target-min)}.custom-btn:not(:disabled):hover{filter:brightness(.95);transform:translateY(-1px)}.custom-btn:not(:disabled):active{transform:translateY(0)}.custom-card{min-width:0}.muted{color:var(--color-text-muted);line-height:1.7}.brand-button{border:0;background:transparent;text-align:left}.nav-caption{padding:var(--space-md);font-size:var(--font-size-xs);color:var(--color-text-muted)}.nav-item:hover{box-shadow:inset 0 0 0 1px var(--color-border)}.nav-item[aria-current=page]{box-shadow:inset 3px 0 var(--color-primary)}.sidebar-note{margin:auto var(--space-sm) var(--space-lg);padding:var(--space-lg);border-radius:var(--radius-card);background:var(--color-bg);color:var(--color-primary)}.sidebar-note p{margin:var(--space-md) 0 var(--space-sm);font-size:var(--font-size-sm)}.sidebar-note span{font-size:var(--font-size-xs);color:var(--color-text-muted)}.skip-link{position:fixed;left:var(--space-base);top:var(--space-base);z-index:200;transform:translateY(-200%);padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-primary);border-radius:var(--radius-control)}.skip-link:focus{transform:translateY(0)}.today-page{display:flex;flex-direction:column;gap:var(--space-xl)}.today-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);flex-wrap:wrap}.today-heading h1{font-size:clamp(28px,3vw,38px);margin:var(--space-sm) 0;letter-spacing:-.03em}.greeting-dot{color:var(--color-primary)}.eyebrow{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-muted);font-size:var(--font-size-xs)}.duration-picker{display:flex;flex-direction:column;gap:var(--space-sm)}.segmented-control{display:flex;padding:var(--space-xs);border:1px solid var(--color-border);background:var(--color-primary-soft);border-radius:var(--radius-control)}.segmented-control button{border:0;border-radius:var(--radius-control);padding:var(--space-sm) var(--space-base);background:transparent;color:var(--color-text-muted);cursor:pointer}.segmented-control button span{display:block;font-size:var(--font-size-xs)}.segmented-control button[aria-pressed=true]{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-subtle);font-weight:600}.lesson-hero{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:var(--space-lg);padding:var(--space-2xl);background:var(--color-hero);border-radius:var(--radius-card);overflow:hidden}.hero-content{position:relative;z-index:1}.hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm);font-size:var(--font-size-xs);color:var(--color-hero-muted);margin-bottom:var(--space-lg)}.lesson-hero h2{color:var(--color-on-primary);font-size:clamp(25px,2.5vw,34px);line-height:1.5}.hero-english{color:var(--color-hero-muted);margin-top:var(--space-xs);font-size:var(--font-size-md)}.hero-objective{color:var(--color-hero-muted);margin:var(--space-lg) 0;max-width:44ch}.hero-actions{display:flex;align-items:center;gap:var(--space-base);flex-wrap:wrap}.hero-start.custom-btn{background:var(--color-paper)!important;color:var(--color-hero)!important;border-color:var(--color-paper)!important;font-weight:600!important}.hero-link{color:var(--color-on-primary);padding:var(--space-sm);background:transparent;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:5px;font-size:var(--font-size-sm)}.hero-illustration{position:relative;display:grid;place-items:center;min-height:270px}.illustration-orbit{position:absolute;width:285px;height:285px;border-radius:50%;border:1px solid var(--color-decoration)}.phrase-paper{position:relative;width:228px;padding:var(--space-lg);background:var(--color-paper);color:var(--color-paper-ink);transform:rotate(7deg);box-shadow:var(--shadow-elevated);border-radius:var(--space-xs)}.phrase-paper>span{font-size:var(--font-size-xs)}.phrase-paper strong{display:block;font:30px/1.2 Georgia,serif;margin:var(--space-lg) 0}.phrase-paper em{font-weight:400}.paper-rule{border-top:1px solid var(--color-decoration);margin-bottom:var(--space-base)}.phrase-paper small{font-size:9px;letter-spacing:.14em}.audio-sticker{position:absolute;bottom:0;left:var(--space-base);display:flex;gap:var(--space-xs);align-items:center;padding:var(--space-base);border-radius:var(--radius-control);background:var(--color-primary-soft);color:var(--color-primary);transform:rotate(-8deg);box-shadow:var(--shadow-card)}.audio-sticker svg{margin-right:var(--space-sm)}.audio-sticker span{width:3px;height:16px;border-radius:var(--radius-badge);background:var(--color-primary)}.audio-sticker span:nth-child(3),.audio-sticker span:nth-child(5){height:28px}.section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-base)}.section-heading h2,.review-card h2{font-size:var(--font-size-md)}.section-heading>.muted{font-size:var(--font-size-sm)}.steps-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);overflow:hidden}.steps-grid li{padding:var(--space-lg)}.steps-grid li+li{border-left:1px solid var(--color-border)}.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-base)}.step-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-control);color:var(--color-primary);background:var(--color-primary-soft)}.step-number{font:22px Georgia,serif;color:var(--color-text-muted)}.steps-grid h3{font-size:var(--font-size-base)}.steps-grid h3 span{display:block;margin-top:var(--space-xs);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:400}.steps-grid p{margin-top:var(--space-sm);color:var(--color-text-muted);font-size:var(--font-size-sm)}.today-bottom-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--space-lg)}.review-card{background:var(--color-accent-soft)!important;display:flex;flex-direction:column;gap:var(--space-md)}.review-card .section-heading{margin-bottom:0}.review-card .custom-btn{margin-top:auto;justify-content:space-between!important}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:var(--space-lg) 0 var(--space-sm);gap:var(--space-xs)}.week-day{display:flex;align-items:center;flex-direction:column;gap:var(--space-sm);color:var(--color-text-muted);font-size:var(--font-size-xs)}.day-circle{display:grid;place-items:center;width:38px;height:38px;background:var(--color-bg);border-radius:50%;border:1px solid var(--color-border)}.is-today .day-circle{border:2px solid var(--color-primary);color:var(--color-primary);font-weight:700}.day-circle.is-complete{background:var(--color-primary);color:var(--color-on-primary)}.text-link{display:inline-flex;align-items:center;gap:var(--space-sm);background:transparent;border:0;cursor:pointer;color:var(--color-primary);font-size:var(--font-size-sm)}.text-link:hover{text-decoration:underline}.today-footer{color:var(--color-text-muted);text-align:center;font-size:var(--font-size-sm)}@media(max-width:1199px){.lesson-hero{padding:var(--space-xl);grid-template-columns:1.5fr 1fr}.steps-grid li{padding:var(--space-base)}}@media(max-width:767px){.today-page{gap:var(--space-lg)}.today-heading{align-items:stretch}.duration-picker{width:100%}.segmented-control button{flex:1}.segmented-control button span{display:inline;margin-left:var(--space-sm)}.lesson-hero{grid-template-columns:1fr;padding:var(--space-lg)}.hero-illustration{display:none}.hero-start.custom-btn{width:100%}.hero-actions{gap:var(--space-xs)}.hero-link{width:100%}.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps-grid li:nth-child(3){border-left:0}.steps-grid li:nth-child(n+3){border-top:1px solid var(--color-border)}.today-bottom-grid{grid-template-columns:minmax(0,1fr)}.day-circle{width:32px;height:32px}}