@font-face{font-family:'Kalam';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/kalam-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Kalam';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/kalam-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format('woff2')}


:root{
  /* layout: one sheet of ruled paper; a single content column; every group of content sits in a white panel snapped to the 32px rules; handwriting only for headings, notes and answers */
  --desk:#27324a; --paper:#fdfdfa; --rule:#d3e0ee; --margin:#e2636b;
  --ink:#1b2a4b; --pencil:#5d6a82; --pen:#c62f3b; --hi:#ffe566; --panel:#ffffff; --line:#c3d2e3;
  --hand:"Kalam","Segoe Print","Comic Sans MS",cursive; --body:"Figtree","Segoe UI",Arial,sans-serif;
  --L:32px; --gutter:104px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--body);font-size:17px;line-height:var(--L)}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.sheet{position:relative;max-width:1040px;margin:32px auto;background-color:var(--paper);
  background-image:linear-gradient(to bottom,transparent 31px,var(--rule) 31px);background-size:100% var(--L);background-position:0 8px;
  padding:64px 56px 64px var(--gutter);border-radius:4px;overflow:hidden}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:76px;width:2px;background:var(--margin);opacity:.7}
.holes{position:absolute;left:26px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}
.holes i{display:block;width:24px;height:24px;border-radius:50%;background:var(--desk)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pen);outline-offset:3px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:0 24px;flex-wrap:wrap;min-height:var(--L);margin-bottom:var(--L)}
.name{font-family:var(--hand);font-weight:700;font-size:24px;line-height:var(--L);color:var(--ink);text-decoration:none}
.nav{display:flex;align-items:center;gap:0 24px;flex-wrap:wrap}
.nav a.link{font-weight:600;font-size:16px;line-height:var(--L);color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 transparent}
.nav a.link:hover,.nav a.link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--pen)}
a.watch{font-weight:600;font-size:15px;line-height:var(--L);color:var(--paper);background:var(--ink);text-decoration:none;padding:0 16px;border-radius:6px}
a.watch:hover{background:#0f1a33}

/* type */
h1{font-family:var(--hand);font-weight:700;font-size:clamp(34px,5.4vw,52px);line-height:64px;text-wrap:balance}
h2{font-family:var(--hand);font-weight:700;font-size:32px;line-height:var(--L);scroll-margin-top:24px}
.lead{font-size:19px;max-width:34em;margin-top:var(--L)}
.sub{color:var(--pencil);max-width:40em;margin-top:var(--L)}
.block{margin-top:calc(var(--L)*3)}
.block>h2+*{margin-top:var(--L)}
.view[hidden]{display:none}

/* buttons */
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-height:64px;margin-top:var(--L)}
.btn{display:inline-block;font:600 16px/40px var(--body);color:var(--paper);background:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:0 18px;text-decoration:none;cursor:pointer}
.btn:hover{background:#0f1a33;border-color:#0f1a33}
.btn.ghost{background:var(--panel);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.small{line-height:32px;font-size:15px;padding:0 14px}

/* panels */
.panel{background:var(--panel);border:1.5px solid var(--line);border-radius:10px;padding:22px 24px;line-height:26px}
.panel h3{font:600 18px/26px var(--body)}
.panel p{color:var(--ink)}
.muted{color:var(--pencil)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:0 48px;align-items:start}
.sticky{background:var(--hi);padding:20px 18px 18px;transform:rotate(2.5deg);font-family:var(--hand);line-height:26px;font-size:18px;color:#3a3000;position:relative;margin-top:16px}
.sticky b{display:block;font-size:40px;line-height:44px}
.sticky::before{content:"";position:absolute;top:-10px;left:72px;width:64px;height:20px;background:rgba(255,255,255,.6);transform:rotate(-4deg)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step .n{display:inline-block;width:32px;height:32px;border:2px solid var(--pen);border-radius:50%;font:700 20px/30px var(--hand);color:var(--pen);text-align:center;margin-bottom:10px}
.step p{color:var(--pencil);margin-top:4px;font-size:16px}

/* demo */
.demo{border:2px solid var(--ink);padding:26px 28px 28px}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pill{font:600 13px/24px var(--body);color:var(--pencil);border:1.5px solid var(--line);border-radius:999px;padding:0 12px;white-space:nowrap}
.pill.hi{background:var(--hi);border-color:var(--hi);color:#3a3000}
.demo .story{margin-top:10px;max-width:44em}
.places{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.places li{font-family:var(--hand);font-weight:700;font-size:20px;line-height:36px;border:1.5px solid var(--ink);border-radius:8px;padding:0 14px}
.ask{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ask>span{font-weight:600}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.opt{font:600 15px/36px var(--body);color:var(--ink);background:var(--panel);border:0;padding:0 16px;cursor:pointer}
.opt+.opt{border-left:2px solid var(--ink)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.list li{font-family:var(--hand);font-size:19px;line-height:38px;background:#f2f6fb;border-radius:6px;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1.5px dashed var(--line)}
.ring{display:inline-block;font:700 26px/40px var(--hand);color:var(--pen);border:2.5px solid var(--pen);border-radius:50% 46% 52% 48%/55% 50% 50% 45%;padding:0 18px;transform:rotate(-2deg);white-space:nowrap}
.result em{font-style:normal;font-family:var(--hand);font-size:20px;color:var(--pen);flex:1;min-width:14em}
.rule-line{margin-top:18px;font-family:var(--hand);font-weight:700;font-size:24px;line-height:36px}
.rule-line span{background:linear-gradient(transparent 18%,var(--hi) 18%,var(--hi) 90%,transparent 90%);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.demo .cta{min-height:0;margin-top:20px}

/* topics */
.card{display:block;background:var(--panel);border:2px solid var(--ink);border-radius:10px;padding:22px 26px 24px;text-decoration:none;color:var(--ink);box-shadow:6px 6px 0 var(--line);line-height:26px}
.card:hover{box-shadow:6px 6px 0 var(--hi)}
.card span{display:block}
.card .tagline{font-family:var(--hand);color:var(--pen);font-size:18px}
.card .card-title{font-family:var(--hand);font-weight:700;font-size:30px;line-height:40px}
.card .card-text{margin-top:2px;max-width:40em}
.card .card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.card .status{font-size:15px;color:var(--pencil)}
.card .btn{display:inline-block}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--L)}
.area li{color:var(--pencil);font-size:16px}
.area h3{margin-bottom:6px}
.area a{color:var(--ink);font-weight:600;text-decoration-color:var(--pen);text-decoration-thickness:2px;text-underline-offset:4px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 48px;align-items:start}
.sign{font-family:var(--hand);font-weight:700;font-size:30px;line-height:var(--L);margin-top:var(--L);transform:rotate(-2deg);display:inline-block}
.facts li{padding:10px 0;border-top:1.5px dashed var(--line)}
.facts li:first-child{border-top:0;padding-top:0}
.facts li:last-child{padding-bottom:0}
.facts b{display:block;font-weight:600}
.facts span{color:var(--pencil);font-size:16px}

/* topic page */
.crumb{color:var(--pencil);font-size:15px}
.crumb a{color:var(--ink);font-weight:600;text-decoration-color:var(--pen);text-decoration-thickness:2px;text-underline-offset:4px}
.crumb span{margin:0 4px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--L)}
.stats b{display:block;font:700 34px/40px var(--hand)}
.stats span{color:var(--pencil);font-size:16px}
.lessons{padding:6px 24px}
.lessons li{display:grid;grid-template-columns:36px minmax(0,1fr) auto 56px;gap:0 14px;align-items:center;padding:11px 0;border-top:1.5px dashed var(--line)}
.lessons li:first-child{border-top:0}
.lessons .no{font:700 20px/26px var(--hand);color:var(--pencil)}
.lessons .t{font-weight:600}
.lessons .when{color:var(--pencil);font-size:15px;text-align:right}
.lessons li.st{background:#fffbe3;margin:0 -24px;padding-left:24px;padding-right:24px}
.lessons li.st .t{font-weight:400}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.q p{font-weight:600}
.q .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;min-height:36px}
.q .check{font:600 15px/32px var(--body);color:var(--ink);background:var(--panel);border:2px solid var(--ink);border-radius:6px;padding:0 14px;cursor:pointer}
.q .ans{font-family:var(--hand);font-size:20px;color:var(--pen);display:none}
.q.open .ans{display:inline}

/* footer */
footer{margin-top:calc(var(--L)*3);padding-top:0;color:var(--pencil);font-size:15px;line-height:var(--L)}
.foot-links{display:flex;gap:0 22px;flex-wrap:wrap}
.foot-links a{color:var(--ink);font-weight:600;text-decoration-color:var(--pen);text-decoration-thickness:2px;text-underline-offset:4px}

@media (max-width:860px){
  .hero,.about{grid-template-columns:minmax(0,1fr)}
  .sticky{width:208px;margin-top:var(--L)}
  .about .facts{margin-top:var(--L)}
  .steps,.stats{grid-template-columns:minmax(0,1fr)}
  .areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  :root{--gutter:40px}
  .sheet{margin:0;border-radius:0;padding:32px 16px 64px var(--gutter)}
  .sheet::before{left:26px}
  .holes{display:none}
  .panel,.demo,.card{padding:18px 16px}
  .areas,.qgrid,.list{grid-template-columns:minmax(0,1fr)}
  .lessons{padding:4px 16px}
  .lessons li{grid-template-columns:28px minmax(0,1fr) 44px}
  .lessons li .pill{display:none}
  .lessons li.st{margin:0 -16px;padding-left:16px;padding-right:16px}
  .seg{display:flex;flex-direction:column;width:100%}
  .opt+.opt{border-left:0;border-top:2px solid var(--ink)}
}