/* Static layout primitives replacing the framework reset and button utility classes. */
*,::before,::after { box-sizing:border-box; border:0 solid; }
html { -webkit-text-size-adjust:100%; tab-size:4; }
img,svg { display:block; vertical-align:middle; }
img { max-width:100%; height:auto; }
.download-button,.channel-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid transparent; border-radius:.45rem; font-weight:500; transition:background-color .15s; }
.download-button svg,.channel-button svg { flex-shrink:0; width:1rem; height:1rem; }
:root {
 --font-geist-sans: Arial, Helvetica, sans-serif; --font-geist-mono: Consolas, monospace;
 --background:#fff; --foreground:#112b45; --card:#fff; --card-foreground:#112b45; --popover:#fff; --popover-foreground:#112b45;
 --primary:#07384a; --primary-foreground:#fff; --secondary:#e8f5f3; --secondary-foreground:#112b45; --muted:#f3f7f7; --muted-foreground:#526472;
 --accent:#e8f5f3; --accent-foreground:#07384a; --destructive:#b13333; --border:#d7e3e5; --input:#d7e3e5; --ring:#148f9b; --radius:.45rem;
}
.dark { --background:#091d30; --foreground:#f5fbfc; --card:#112b45; --card-foreground:#f5fbfc; --popover:#112b45; --popover-foreground:#f5fbfc; --primary:#67d4d4; --primary-foreground:#092535; --secondary:#193d4a; --secondary-foreground:#f5fbfc; --muted:#193442; --muted-foreground:#c3d3da; --accent:#24505b; --accent-foreground:#f5fbfc; --border:#365563; --input:#365563; --ring:#67d4d4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:light; }
body { margin:0; background:#fff; color:#112b45; font-family:Arial,Helvetica,sans-serif; font-size:1.0625rem; line-height:1.65; }
a { color:inherit; text-underline-offset:.23em; }
a:focus-visible { outline:3px solid #148f9b; outline-offset:5px; }
section { scroll-margin-top:2rem; }
.site-header,main,.site-footer { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; border-bottom:1px solid #d7e3e5; }
.brand { display:inline-flex; align-items:center; gap:13px; text-decoration:none; font-weight:700; letter-spacing:-.02em; font-size:1.2rem; }
.brand img { border-radius:50%; }
.channel-link { display:flex; align-items:center; gap:6px; font-size:.9375rem; color:#356070; text-decoration:none; }
.intro { max-width:900px; padding:55px 0 43px; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:.875rem; font-weight:700; letter-spacing:.1em; color:#087583; margin:0 0 15px; }
h1 { font-size:clamp(2.2rem,4.5vw,3.5rem); line-height:1.12; letter-spacing:-.045em; margin:0 0 20px; font-weight:750; }
.lead { max-width:740px; font-size:1.1875rem; color:#526472; margin:0; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:26px; }
.download-button,.channel-button { height:auto; min-height:48px; padding:12px 19px; font-size:1rem; white-space:normal; line-height:1.35; gap:10px; color:#fff; background:#07384a; text-decoration:none; }
.download-button:hover,.channel-button:hover { color:#fff; background:#0b5364; }
.download-button:visited,.channel-button:visited { color:#fff; }
.file-type { font-size:.75rem; opacity:.8; letter-spacing:.04em; padding-left:4px; }
.text-link { display:inline-flex; align-items:center; gap:6px; color:#087583; font-weight:600; font-size:.9375rem; text-decoration:underline; }
.lesson-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:40px; border-top:1px solid #d7e3e5; padding-top:42px; }
.lesson-nav { align-self:start; position:sticky; top:30px; display:flex; flex-direction:column; gap:12px; }
.margin-note { font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive; color:#087583; font-size:1.5rem; font-weight:600; transform:rotate(-3deg); display:inline-block; }
.lesson-nav .margin-note { margin-bottom:12px; }
.lesson-nav a { text-decoration:none; font-size:.9375rem; color:#526472; }
.lesson-nav a:hover { color:#087583; text-decoration:underline; }
.lesson-nav p { margin-top:17px; color:#647480; font-size:.875rem; }
.worksheet { border-left:3px solid #8fd5d5; padding-left:39px; max-width:850px; }
.worksheet section { padding-bottom:34px; margin-bottom:27px; border-bottom:1px solid #e4ecee; }
h2 { font-size:1.55rem; line-height:1.3; font-weight:700; letter-spacing:-.025em; margin:0 0 18px; }
.section-number { color:#087583; font-size:.875rem; letter-spacing:.03em; vertical-align:middle; margin-right:11px; }
p { margin:0 0 16px; }
.facts { padding-left:1.25rem; margin:0 0 24px; }
.facts li { margin-bottom:15px; padding-left:7px; }
.facts li::marker { color:#148f9b; }
.steps { padding-left:1.4rem; }
.steps li { padding-left:8px; margin-bottom:19px; }
.steps li::marker { color:#087583; font-weight:700; }
.quiet-note,.resource-note { color:#526472; font-size:.9375rem; }
.checks { list-style:none; padding:0; margin:26px 0; }
.checks li { display:flex; gap:15px; margin-bottom:24px; }
.checks svg { color:#087583; flex:0 0 21px; margin-top:5px; }
h3 { margin:0 0 5px; font-size:1.0625rem; font-weight:700; }
.checks p { margin:0; color:#3e5363; }
.success-note { padding:18px 23px; border-left:3px solid #148f9b; background:#eef8f7; }
.lesson-footer { padding-bottom:43px; }
.lesson-footer h2 { margin-top:21px; }
.lesson-footer .resource-note { margin:23px 0 0; }
.site-footer { border-top:1px solid #d7e3e5; padding:25px 0 35px; display:flex; justify-content:space-between; gap:15px; color:#526472; font-size:.875rem; }
.skip-link { position:absolute; left:20px; top:-80px; z-index:10; padding:12px; background:white; }
.skip-link:focus { top:15px; }
@media(max-width:720px) {
 .site-header,main,.site-footer { width:calc(100% - 36px); } .site-header { padding:20px 0; } .brand { font-size:1.05rem; gap:10px; } .brand img { width:38px; height:38px; } .channel-link { font-size:.875rem; max-width:110px; line-height:1.35; }
 .intro { padding:33px 0; } .lead { font-size:1.0625rem; } .actions { gap:17px; } .lesson-layout { display:block; padding-top:29px; } .lesson-nav { display:none; } .worksheet { padding-left:19px; } .site-footer { flex-direction:column; gap:4px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .site-header,.lesson-nav,.actions,.site-footer,.text-link,.channel-button { display:none; } main { width:100%; } .intro { padding:0; } .lesson-layout { display:block; } .worksheet { border:0; padding:0; max-width:none; } .worksheet section { break-inside:avoid; } }