:root {
  color-scheme: light;
  --paper:#faf8f3; --surface:#fff; --ink:#1d2740; --muted:#626b79;
  --copper:#b95732; --copper-hover:#934124; --copper-ink:#683a27; --copper-soft:#f8eae1;
  --line:#ddd8cc; --navy:#243b6b; --success:#176444;
  --body:Inter,Arial,sans-serif; --display:'Plus Jakarta Sans',Inter,Arial,sans-serif;
  font-family:var(--body); color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
a { color:var(--copper-hover); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,a,input,select,textarea { touch-action:manipulation; }
:focus-visible { outline:3px solid var(--copper); outline-offset:4px; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { border-color:var(--copper); background:var(--copper-soft); text-decoration:none; }
button:disabled { cursor:default; opacity:.45; }
.primary { color:#fff; background:var(--copper); border-color:var(--copper); }
.primary:hover { color:#fff; background:var(--copper-hover); border-color:var(--copper-hover); }
.button svg,.text-link svg,.lesson-open svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea,select { display:block; max-width:100%; min-height:44px; padding:9px 11px; border:1px solid #c9c3b8; border-radius:6px; color:var(--ink); background:#fff; font-size:16px; }
input[type=radio],input[type=checkbox],input[type=range] { accent-color:var(--copper); }
input[type=radio],input[type=checkbox] { width:18px; height:18px; flex:none; }
textarea { width:100%; resize:vertical; line-height:1.6; }
label { font-size:14px; font-weight:500; }
h1,h2,h3 { font-family:var(--display); font-weight:650; line-height:1.25; letter-spacing:-.025em; }
h1 { font-size:clamp(30px,3.4vw,44px); margin:0; }
h2 { font-size:25px; margin:0 0 12px; }
h3 { font-size:17px; margin:0 0 8px; }
p { margin:0 0 16px; }
img,svg { max-width:100%; }
[hidden] { display:none !important; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:100; padding:10px 16px; color:#fff; background:var(--copper-ink); }
.skip-link:focus { top:8px; }
.site-header { border-bottom:1px solid var(--line); }
.header-inner,.page,.footer-inner { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; height:76px; position:relative; }
.brand { display:inline-flex; align-items:center; gap:10px; flex:none; color:var(--ink); text-decoration:none; }
.brand img { display:block; width:36px; height:36px; }
.brand>span { display:flex; flex-direction:column; gap:4px; }
.brand strong { font:700 17px/1.2 var(--display); }
.brand>span>span { font:500 11px/1.3 var(--body); color:var(--copper); }
.brand:hover { text-decoration:none; }
#site-nav { display:flex; gap:30px; align-items:center; font-size:14px; }
#site-nav>a:not(.button) { color:var(--muted); text-decoration:none; padding-block:12px; }
#site-nav>a[aria-current=page]:not(.button) { color:var(--copper-hover); font-weight:600; }
.menu-toggle { display:none; }
.page { min-height:65vh; padding-bottom:72px; }
.home-hero { display:grid; grid-template-columns:1fr 1.03fr; gap:70px; align-items:center; padding:70px 0 74px; }
.hero-copy h1 { font-size:clamp(34px,4vw,52px); line-height:1.12; font-weight:700; max-width:15ch; letter-spacing:-.035em; }
.hero-copy>p { margin:24px 0 28px; max-width:39ch; font-size:18px; line-height:1.7; color:var(--muted); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.text-link { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.demonstration { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px; min-width:0; }
.demo-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.demo-heading h2 { font-size:20px; line-height:1.4; letter-spacing:-.025em; max-width:32ch; margin:0; }
.demo-context { font-size:12px; color:var(--muted); }
.circuit { display:block; width:100%; height:auto; margin:10px 0; }
.circuit text { fill:var(--ink); font:18px var(--body); }
.circuit .voltage-label { fill:var(--copper-hover); font-weight:600; font-size:22px; }
.wire { stroke:var(--navy); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.junction { fill:var(--copper); }
.demo-controls { display:flex; flex-wrap:wrap; align-items:end; gap:14px; }
.demo-controls label:not(.check-label) { display:flex; flex-direction:column; gap:6px; }
.demo-controls select { min-width:110px; font-size:14px; }
.check-label { display:flex; align-items:center; gap:7px; min-height:44px; font-weight:400; font-size:13px; }
.demo-result { display:flex; align-items:center; gap:16px; padding:16px 0 4px; margin-top:16px; border-top:1px solid var(--line); }
.demo-result strong { font:650 27px/1.3 var(--display); color:var(--copper-hover); white-space:nowrap; }
.demo-result>span { font-size:13px; color:var(--muted); line-height:1.5; }
.demonstration>.text-link { margin-top:14px; }
.section-intro { display:flex; gap:70px; justify-content:space-between; align-items:start; margin-bottom:20px; }
.section-intro h2 { max-width:16ch; font-size:30px; }
.section-intro p { max-width:48ch; color:var(--muted); }
.library-preview { padding-top:42px; border-top:1px solid var(--line); }
.lesson-list { border-top:1px solid var(--line); }
.lesson-row { display:grid; grid-template-columns:190px minmax(0,1fr) 48px; align-items:center; gap:36px; padding:28px 0; border-bottom:1px solid var(--line); }
.lesson-meta { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.lesson-meta>span:first-child { color:var(--copper-ink); font-weight:500; }
.lesson-meta>span:last-child { color:var(--muted); font-size:12px; }
.lesson-row h2 { font-size:23px; margin:0 0 8px; }
.lesson-row h2 a { color:var(--ink); text-decoration:none; }
.lesson-row h2 a:hover { text-decoration:underline; }
.lesson-row p { color:var(--muted); font-size:15px; max-width:65ch; margin:0; }
.lesson-open { width:44px; height:44px; display:flex; justify-content:center; align-items:center; border:1px solid var(--line); border-radius:50%; }
.lesson-open:hover { background:var(--copper-soft); }
.planning-invitation { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-top:64px; }
.planning-invitation h2 { font-size:28px; max-width:25ch; }
.planning-invitation p { color:var(--muted); }
.planning-invitation .button { margin-top:8px; }
.teaching-sequence { margin:0; padding:0 0 0 22px; }
.teaching-sequence li { padding:0 0 22px 12px; }
.teaching-sequence li::marker { color:var(--copper); font-weight:500; }
.teaching-sequence strong { display:block; font-weight:600; }
.teaching-sequence span { display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.site-footer { border-top:1px solid var(--line); background:#f3efe6; }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px; padding-block:30px; }
.footer-inner nav { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:13px; }
.footer-inner nav a { color:var(--muted); }
.footer-inner>p { font-size:12px; width:100%; color:var(--muted); margin:0; }
.page-heading { padding:50px 0 34px; max-width:780px; }
.page-heading p { margin:18px 0 0; color:var(--muted); font-size:18px; }
.library-controls { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:0 0 24px; }
.library-controls label { display:grid; gap:7px; }
.library-controls>span,.library-footnote { font-size:13px; color:var(--muted); }
.library-footnote { margin-top:24px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; color:var(--muted); font-size:13px; }
.lesson-heading { display:flex; justify-content:space-between; align-items:start; gap:35px; margin:22px 0 30px; }
.lesson-heading h1 { font-size:clamp(28px,2.9vw,38px); max-width:24ch; }
.lesson-heading p { margin-top:16px; margin-bottom:0; color:var(--muted); max-width:55ch; }
.lesson-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; max-width:230px; flex:none; }
.lesson-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:44px; align-items:start; }
.lesson-main { min-width:0; }
.teaching-notes { font-size:14px; }
.notes-title { font-size:13px; color:var(--copper-ink); margin:0 0 26px; }
.teaching-notes section { margin-bottom:25px; }
.teaching-notes h2 { font-size:16px; letter-spacing:0; }
.teaching-notes p { color:var(--muted); }
details { padding:15px 0; border-top:1px solid var(--line); }
summary { font-weight:500; cursor:pointer; }
details p { margin:14px 0 0; }
.teaching-notes>.text-link { margin-top:24px; }
.model-note { margin:20px 0 0; font-size:13px; line-height:1.6; color:var(--muted); }
.knowledge-check { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.knowledge-check h2 { font-size:20px; }
fieldset { border:0; margin:0 0 16px; padding:0; }
legend { padding:0; font-size:15px; margin-bottom:14px; }
.answer-option { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; font-size:15px; }
[data-feedback] { margin:16px 0 0; font-size:14px; }
[data-feedback][data-correct=true] { color:var(--success); }
.search-array { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:6px; margin:28px 0 22px; }
.search-cell { display:flex; flex-direction:column; text-align:center; gap:6px; font-size:16px; }
.search-cell>strong { display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:5px; font-weight:500; }
.search-cell>span { font-size:11px; color:var(--muted); }
.search-cell.discarded>strong { color:#79818b; background:#f3f2ee; border-color:transparent; }
.search-cell.current>strong { border:2px solid var(--copper); color:var(--copper-ink); background:var(--copper-soft); }
.search-cell.found>strong { border-color:var(--success); color:var(--success); background:#edf6f0; }
.step-summary { font-size:15px; min-height:72px; margin-bottom:16px; }
.demo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.demo-actions>span { color:var(--muted); font-size:12px; }
.range-label { width:100%; }
.range-label output { color:var(--copper-ink); font:600 25px var(--display); }
.range-label input { width:100%; min-height:36px; }
.statistics-plot { display:block; width:100%; height:210px; margin-top:20px; overflow:visible; }
.statistics-plot .axis line { stroke:#9299a3; stroke-width:1; }
.statistics-plot text { fill:var(--muted); font:14px var(--body); }
.statistics-plot circle { fill:var(--navy); stroke:#fff; stroke-width:1.5; }
.statistics-plot circle:last-child { fill:var(--copper); }
.statistics-plot [data-mean-line] line { stroke:var(--copper); stroke-width:2; }
.statistics-plot [data-mean-line] text { fill:var(--copper-ink); font-weight:500; }
.statistics-plot [data-median-line] line { stroke:var(--navy); stroke-width:2; stroke-dasharray:4 3; }
.stat-readouts { display:flex; gap:48px; align-items:center; margin-top:8px; }
.stat-readouts p { margin:0; font-size:13px; }
.stat-readouts strong { display:block; font:650 28px/1.5 var(--display); }
.stat-readouts p:first-child strong { color:var(--copper-hover); }
.data-values { margin:14px 0 0; font-size:13px; color:var(--muted); }
.planner-heading { padding-bottom:25px; }
.planner-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.planner-toolbar label { display:grid; gap:6px; min-width:220px; max-width:420px; flex:1; }
.planner-toolbar select { min-width:0; width:100%; }
.planner-toolbar>span { margin-left:auto; font-size:13px; color:var(--muted); padding-bottom:10px; }
.planner-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; margin-top:30px; align-items:start; }
.planner-fields h2 { font-size:20px; margin-bottom:22px; }
.planner-fields>label { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.preview-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.preview-actions h2 { font:500 13px var(--body); color:var(--muted); margin:0 auto 0 0; }
.preview-actions button { min-height:40px; padding:8px 11px; font-size:12px; }
#plan-document { padding:36px; background:var(--surface); border:1px solid var(--line); box-shadow:0 2px 4px #1d274005; }
#plan-document>h2 { font-size:27px; overflow-wrap:anywhere; white-space:pre-wrap; }
.plan-byline { font-size:12px; color:var(--copper-hover); padding-bottom:20px; border-bottom:1px solid var(--line); margin:0 0 26px; }
#plan-document section { margin-top:24px; break-inside:avoid; }
#plan-document h3 { font-size:14px; letter-spacing:0; }
#plan-document section p { font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
#plan-document section p.empty { color:#7a808b; }
.about-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:90px; }
.about-layout h2 { font-size:22px; margin-top:26px; }
.about-layout p,.about-layout li { color:var(--muted); }
.about-layout ul { padding-left:20px; }
.about-layout aside { border-left:1px solid var(--line); padding-left:34px; }
.family-strip { margin-top:50px; border-top:1px solid var(--line); padding-top:30px; }
.family-strip h2 { font-size:21px; }
.family-strip p { max-width:80ch; color:var(--muted); }
.not-found { padding:80px 0; max-width:600px; }
.not-found p { margin:20px 0; }
body[data-presentation=true] :is(.site-header,.site-footer,.breadcrumbs,.teacher-content) { display:none; }
body[data-presentation=true] .page { width:min(1400px,calc(100% - 48px)); padding-bottom:24px; }
body[data-presentation=true] .lesson-layout { display:block; }
body[data-presentation=true] .demonstration { max-width:1000px; margin-inline:auto; }
body[data-presentation=true] .circuit { max-height:42vh; }
body[data-presentation=true] .lesson-tools>a { display:none; }
body[data-presentation=true] .lesson-tools { max-width:none; }
@media(max-width:1000px) {
  .home-hero { gap:36px; }
  .lesson-row { grid-template-columns:160px minmax(0,1fr) 44px; gap:24px; }
  .lesson-layout { grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); gap:28px; }
  .search-array { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .planning-invitation,.about-layout { gap:50px; }
  .planner-layout { gap:24px; }
  #plan-document { padding:24px; }
}
@media(max-width:760px) {
  .header-inner,.page,.footer-inner { width:calc(100% - 32px); }
  .header-inner { height:68px; }
  .menu-toggle { display:inline-flex; }
  #site-nav { display:none; position:absolute; top:68px; right:-16px; left:-16px; background:var(--paper); border-bottom:1px solid var(--line); padding:16px; z-index:20; gap:10px; align-items:stretch; }
  #site-nav[data-open=true] { display:flex; flex-direction:column; }
  #site-nav>a:not(.button) { padding:10px; }
  .home-hero { grid-template-columns:1fr; padding:38px 0 44px; gap:32px; }
  .hero-copy h1 { font-size:36px; max-width:18ch; }
  .hero-copy>p { font-size:16px; margin:20px 0; }
  .demonstration { padding:18px; }
  .demo-heading h2 { font-size:18px; }
  .demo-controls { gap:10px; }
  .demo-controls select { font-size:16px; }
  .section-intro { display:block; }
  .section-intro h2 { font-size:26px; max-width:none; }
  .section-intro p { font-size:15px; }
  .lesson-row { grid-template-columns:minmax(0,1fr) 44px; gap:12px 16px; padding:24px 0; }
  .lesson-meta { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:12px; }
  .lesson-row h2 { font-size:21px; }
  .lesson-row p { font-size:14px; }
  .planning-invitation { grid-template-columns:1fr; gap:32px; margin-top:40px; }
  .planning-invitation h2 { font-size:26px; }
  .footer-inner { padding-block:24px; gap:24px; }
  .footer-inner nav { gap:14px 22px; }
  .page { padding-bottom:42px; }
  .page-heading { padding:36px 0 26px; }
  .page-heading p { font-size:16px; }
  .lesson-heading { flex-direction:column; gap:22px; }
  .lesson-tools { max-width:none; justify-content:start; }
  .lesson-tools button,.lesson-tools .button { font-size:13px; }
  .lesson-layout,.planner-layout,.about-layout { grid-template-columns:1fr; gap:36px; }
  .teaching-notes { border-top:1px solid var(--line); padding-top:26px; }
  .planner-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; }
  .planner-toolbar>span { grid-column:1 / -1; width:100%; margin:0; padding:0; }
  .planner-toolbar label { min-width:0; }
  .about-layout aside { border-left:0; border-top:1px solid var(--line); padding-left:0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }
@media print {
  @page { margin:18mm; }
  body { background:white; color:black; font-size:11pt; }
  .site-header,.site-footer,.skip-link,.planner-heading,.planner-toolbar,.planner-fields,.preview-actions { display:none!important; }
  .page,.planner-layout { width:100%; display:block; margin:0; padding:0; }
  #plan-document { border:0; padding:0; box-shadow:none; }
  #plan-document>h2 { font-size:22pt; }
  #plan-document section p { font-size:11pt; }
  #plan-document section { break-inside:avoid; }
}