/* Shared design tokens between kladde.html and kladde-teacher.html
   (Part 12 finding #17) — was defined twice, differently formatted, with
   drifted formatting risking real drift in the values themselves. Each
   app's own <style> block still owns everything beyond these tokens. */
:root{
  --paper:#EAE6DC;
  --paper-dot: rgba(29,29,31,.08);
  --outer:#DEDACE;
  --ink:#1D1D1F;
  --ink-soft:#5B5B60; /* darkened from #6E6E73 (2026-08-29 launch audit #18) -- 4.07:1 on --paper fell short of WCAG AA's 4.5:1 for normal text; ~4.6:1 now */
  --accent:#2F4C7C;
  --accent-soft:#DBE3F1;
  --wrong:#AD3A3A;
  --wrong-soft:#F2DBDA;
  --seafoam:#2F8577;
  --seafoam-soft:#DFF4EE;
  --amber:#DB9A3C;
  --plum:#7C5C82;
  --card:#FFFFFF;
  --shadow: rgba(29,29,31,.16);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
:root{--slate:#1B2428; --green:#17261F; --chalk:#EEECE4; --chalk-dim:#B9C3BF; --tape:#E9D9A6; --wood-a:#6A5A4D; --wood-b:#443830; --line:rgba(29,29,31,.13); --ease:cubic-bezier(.16,1,.3,1); --px:0; --py:0; --c1:#9DB8E8; --c2:#8FD9C6; --c3:#F0D98C; --c4:#D5B6DD;}
html{scroll-behavior:smooth; background:var(--outer);} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{margin:0; color:var(--ink); font:16px/1.55 'IBM Plex Sans',sans-serif; background:var(--outer); -webkit-text-size-adjust:100%; overflow-x:clip;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(var(--paper-dot) 1.4px, transparent 1.4px); background-size:180px 180px, 20px 20px;}
a{color:inherit;} button{font:inherit; color:inherit;}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;}
.dark :focus-visible{outline-color:#F0D98C;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.chalk{filter:url(#chalk); color:var(--chalk);}
.tape{display:inline-block; padding:3px 14px 2px; transform:rotate(-2deg); font:600 13px 'Space Grotesk',sans-serif; color:var(--ink); background:var(--tape); box-shadow:0 2px 6px rgba(0,0,0,.3); clip-path:polygon(0 8%,3% 0,6% 10%,9% 0,100% 0,97% 12%,100% 25%,97% 38%,100% 52%,97% 66%,100% 80%,97% 92%,100% 100%,0 100%,3% 88%,0 74%,3% 60%,0 46%,3% 32%,0 20%);}
.tp{position:absolute; top:-9px; width:72px; height:24px; background:rgba(240,217,140,.92); clip-path:polygon(0 0,100% 0,97% 20%,100% 40%,97% 60%,100% 80%,97% 100%,0 100%,3% 80%,0 60%,3% 40%,0 20%);} .tp.l{left:-16px; transform:rotate(-36deg);} .tp.r{right:-16px; transform:rotate(36deg);}
.skip{position:fixed; top:12px; left:12px; z-index:100; transform:translateY(-80px); background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px; text-decoration:none; font:600 14px 'Space Grotesk',sans-serif;} .skip:focus{transform:none;}
h1,h2,h3{font-weight:400; margin:0;}

/* waitlist form (production keeps the existing join_waitlist call, ids and messages) */
.wl .field-row{display:flex; gap:10px; flex-wrap:wrap;}
.wl input[type=email]{flex:1 1 220px; min-width:0; height:52px; padding:0 16px; border:1.5px solid var(--ink); border-radius:11px; background:#fff; font:16px 'IBM Plex Sans',sans-serif; color:var(--ink);} .wl input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.btn{flex:0 0 auto; height:52px; padding:0 24px; border-radius:11px; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); font:600 15.5px 'Space Grotesk',sans-serif; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 18px -10px rgba(29,29,31,.7); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:transform .15s var(--ease);} .btn:hover{transform:translateY(-1px);} @media (max-width:520px){.wl .btn{flex-basis:100%;}}
.wl .micro{margin:12px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.5;} .wl .status{min-height:1px; margin:8px 0 0; font-size:14px; color:var(--wrong);}
.ok{display:none; padding:14px 16px; border:1.5px solid var(--seafoam); border-radius:12px; background:#DFF4EE; font-size:15px;} .ok b{display:block; font:700 12.5px 'Space Grotesk',sans-serif; letter-spacing:.03em; text-transform:uppercase; color:#1F6B5F; margin-bottom:4px;} .wl.done .ok{display:block;} .wl.done form,.wl.done .micro{display:none;}

footer.site{padding:26px 24px 40px; text-align:center; font:12.5px/1.9 'Space Grotesk',sans-serif; color:var(--ink-soft);} footer.site a{text-decoration:underline; text-underline-offset:2px;} footer.site a:hover{color:var(--accent);}
footer.dark{color:#D7C9B8;} footer.dark a:hover{color:#fff;}

/* ---------- product re-creations (invented placeholder data) ---------- */
.pm{position:relative; width:272px; height:548px; border:6px solid var(--ink); border-radius:36px; overflow:hidden; background:var(--paper); box-shadow:0 40px 60px -26px rgba(0,0,0,.65), 0 10px 18px -8px rgba(0,0,0,.35); display:flex; flex-direction:column; flex:none; font:12px/1.4 'IBM Plex Sans',sans-serif; color:var(--ink);}
.pm .h{height:74px; background:var(--green); color:var(--chalk); padding:16px 16px 0; flex:none; font:400 22px/1 'Special Elite',monospace; filter:none;}
.pm .s{flex:1; margin-top:-22px; background:var(--paper); border-radius:22px 22px 0 0; padding:14px 12px; position:relative; overflow:hidden;
  background-image:repeating-linear-gradient(to bottom, transparent 0 27px, rgba(47,76,124,.09) 27px 28px);}
.pm h4{margin:0 0 8px; font:400 20px/1.1 'Special Elite',monospace;} .pm .c{background:#fff; border:1.5px solid var(--ink); border-radius:12px; padding:9px 11px; margin:0 0 9px; box-shadow:2px 3px 0 rgba(29,29,31,.16);}
.pm .nt{background:#FBF9F3; border-radius:5px; padding:11px 11px 10px; margin:0 0 10px; box-shadow:0 10px 14px -10px rgba(29,29,31,.5); position:relative; transform:rotate(-.5deg);} .pm .nt .tp{width:40px; height:14px; top:-6px;} .pm .nt .tp.l{left:-8px;} .pm .nt .tp.r{right:-8px;}
.pm .nt small{color:var(--ink-soft); font-size:10.5px; font-weight:600; display:block;} .pm .nt b{display:block; font:700 14px 'Space Grotesk',sans-serif; margin:1px 0 2px;}
.pm .bar{height:6px; background:rgba(29,29,31,.12); border-radius:4px; margin:6px 0 8px; overflow:hidden;} .pm .bar i{display:block; height:100%; width:50%; background:var(--seafoam); border-radius:4px;}
.pm .go{display:block; text-align:center; background:var(--seafoam); color:#fff; border-radius:9px; padding:8px; font:700 13px 'Space Grotesk',sans-serif;}
.pm .c b{font:700 12.5px 'Space Grotesk',sans-serif;} .pm .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--wrong); margin-right:6px;}
.pm .opt{display:block; padding:8px 10px; margin:0 0 6px; border:1.5px solid rgba(29,29,31,.5); border-radius:9px; background:#fff; font-size:12.5px;} .pm .opt.ok{background:#DFF4EE; border-color:var(--seafoam);} .pm .opt.bad{background:#F2DBDA; border-color:var(--wrong);}
.pm .pr{display:flex; gap:4px; margin:0 0 8px;} .pm .pr i{flex:1; height:5px; border-radius:3px; background:rgba(29,29,31,.15);} .pm .pr i.d{background:var(--seafoam);} .pm .pr i.x{background:var(--wrong);}
.pm .q{font:700 14px/1.3 'Space Grotesk',sans-serif; margin:0 0 8px;} .pm .fb{border:1.5px dashed var(--seafoam); border-radius:8px; padding:7px 9px; font-size:11.5px; margin-top:2px;}
.pm .bn{height:44px; flex:none; background:linear-gradient(180deg,#5b4c40,#3c3129); border-top:2px solid #86735f; display:flex; justify-content:space-around; align-items:center; color:#B4C4BC; font:600 9.5px 'Space Grotesk',sans-serif;}
.bph{position:relative; padding:9px; background:var(--green); border-radius:8px; box-shadow:inset 0 0 0 4px var(--wood-a), 0 22px 30px -18px rgba(0,0,0,.7); width:300px; flex:none;} .bph .in{height:170px; border-radius:3px; display:grid; place-items:center; text-align:center; color:var(--chalk); font:400 21px/1.55 'Special Elite',monospace; filter:url(#chalk); background-image:repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.05) 24px 25px);}
.dm{position:relative; width:520px; height:330px; border-radius:12px; overflow:hidden; display:flex; background:var(--paper); border:1.5px solid rgba(29,29,31,.7); box-shadow:0 40px 60px -26px rgba(0,0,0,.65); flex:none; font:12px/1.4 'IBM Plex Sans',sans-serif; color:var(--ink);}
.dm .sd{width:128px; flex:none; background:var(--slate); color:var(--chalk); padding:14px 12px; display:flex; flex-direction:column; gap:7px; font:600 11.5px 'Space Grotesk',sans-serif;} .dm .sd .w{font:400 20px/1 'Special Elite',monospace; margin-bottom:8px; filter:url(#chalk);} .dm .sd span{padding:6px 8px; border-radius:8px; display:flex; justify-content:space-between;} .dm .sd span.on{box-shadow:inset 0 0 0 1.5px rgba(238,236,228,.7);} .dm .sd i{font-style:normal; background:var(--tape); color:var(--ink); border-radius:4px; padding:0 5px; font-size:10.5px;}
.dm .mn{flex:1; padding:14px 16px; position:relative; min-width:0;} .dm h4{margin:0 0 8px; font:400 21px/1 'Special Elite',monospace;} .dm .nd{background:#fff; border-radius:9px; padding:10px 12px; box-shadow:0 12px 16px -12px rgba(29,29,31,.5); border:1px solid var(--line); margin-bottom:10px;} .dm .nd b{font:700 13px 'Space Grotesk',sans-serif;} .dm .nd p{margin:3px 0 0; font-size:11.5px; color:var(--ink-soft);}
.dm .ch{display:flex; align-items:flex-end; gap:8px; height:84px; padding:6px 4px 0; background:#fff; border-radius:9px; border:1px solid var(--line);} .dm .ch i{flex:1; border-radius:5px 5px 2px 2px; background:var(--accent); display:block;} .dm .ch i:nth-child(odd){background:var(--seafoam);}
.cap{margin:10px 0 0; font:600 12px 'Space Grotesk',sans-serif; color:var(--ink-soft);} .dark .cap{color:var(--chalk-dim);}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important;} }

/* Full-site additions shared by the three complete drafts (full-a/b/c.html). Look per direction lives in each page. */
.draftbar{background:var(--tape); color:var(--ink); font:600 12.5px/1.45 'Space Grotesk',sans-serif; text-align:center; padding:7px 16px; position:relative; z-index:20;} .draftbar a{text-decoration:underline; text-underline-offset:2px;}
.topnav{position:absolute; z-index:10; display:flex; align-items:center; gap:2px; font:600 14.5px 'Space Grotesk',sans-serif;} .topnav a{padding:9px 12px; border-radius:9px; text-decoration:none; color:inherit;} .topnav a:hover{text-decoration:underline; text-underline-offset:3px;} .topnav .navbtn{margin-left:8px; padding:9px 16px; background:var(--ink); color:var(--paper); border-radius:10px; text-decoration:none;}
.dark .topnav .navbtn,.topnav.on-dark .navbtn{background:var(--chalk); color:var(--ink);}
@media (max-width:760px){ .topnav{display:none;} }

.sec{color:var(--fg,var(--ink));} .sec .wrap{max-width:1180px; margin:0 auto; padding:clamp(56px,10vh,104px) clamp(22px,5vw,80px);}
.sec h2{font:400 clamp(28px,3.4vw,44px)/1.15 'Special Elite',monospace; max-width:20ch; margin:0 0 14px;}
.lead2{max-width:56ch; color:var(--fg2,var(--ink-soft)); font-size:17px; margin:0 0 34px;}
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;} .trio h3{font:700 18px 'Space Grotesk',sans-serif; margin:0 0 6px;} .trio p{margin:0; color:var(--fg2,var(--ink-soft)); font-size:15.5px;}
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:center;} .split.rev .txt{order:2;}
.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:20px;} .steps li{counter-increment:s; position:relative; padding-left:50px;} .steps li::before{content:counter(s); position:absolute; left:0; top:-1px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:400 18px 'Special Elite',monospace; border:2px solid currentColor;}
.steps b{display:block; font:700 17px 'Space Grotesk',sans-serif; margin-bottom:2px;} .steps span{color:var(--fg2,var(--ink-soft)); font-size:15.5px;}
.vis{display:flex; flex-direction:column; align-items:center; gap:18px; min-width:0;} .vis .cap{margin:0; text-align:center;}
.phones{display:flex; justify-content:center; align-items:flex-start;} .phones .pm:nth-child(1){transform:rotate(-3deg); position:relative; z-index:1;} .phones .pm:nth-child(2){transform:rotate(3deg); margin-left:-34px; margin-top:34px;}
.vis .dm{max-width:none;}
.dwn{width:26px; height:44px; overflow:visible;} .dwn path{fill:none; stroke:var(--arrow,var(--accent)); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;}
.ticks{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 48px;} .ticks li{position:relative; padding-left:40px;} .ticks li::before{content:''; position:absolute; left:0; top:2px; width:24px; height:24px; background:var(--tick,#2F8577); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l6 6L21 5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l6 6L21 5'/%3E%3C/svg%3E") center/contain no-repeat;}
.ticks b{display:block; font:700 17px 'Space Grotesk',sans-serif; margin-bottom:2px;} .ticks span{color:var(--fg2,var(--ink-soft)); font-size:15.5px;} .ticks a{text-decoration:underline; text-underline-offset:2px;}
.stand{margin:34px 0 0; max-width:64ch; font-size:15.5px; color:var(--fg2,var(--ink-soft));} .stand a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.stages{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;} .stages b{display:block; font:700 17px 'Space Grotesk',sans-serif; margin-bottom:3px;} .stages span{color:var(--fg2,var(--ink-soft)); font-size:15.5px;}
footer.site .fnav{margin-bottom:10px;}
.wl .ok small{display:block; margin-top:6px; font-size:12.5px; color:#1F6B5F;}

/* scroll reveal: only when JS and motion are on; reduced motion shows everything at once */
.motion .rv > *{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease);} .motion .rv.in > *{opacity:1; transform:none;}
.motion .rv.in > *:nth-child(2){transition-delay:.12s;} .motion .rv.in > *:nth-child(3){transition-delay:.24s;} .motion .rv.in > *:nth-child(4){transition-delay:.34s;} .motion .rv.in > *:nth-child(5){transition-delay:.42s;} .motion .rv.in > *:nth-child(6){transition-delay:.5s;}

/* product re-creations scaled for narrower columns (layout box shrinks with the visual) */
@media (max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr); gap:36px;} .split.rev .txt{order:0;}
  .trio{grid-template-columns:minmax(0,1fr); gap:22px;} .ticks{grid-template-columns:minmax(0,1fr);} .stages{grid-template-columns:minmax(0,1fr);}
  .vis .dm{transform:scale(.8); margin:-33px -52px;}
}
@media (max-width:560px){
  .vis .dm{transform:scale(.6); margin:-66px -104px;}
  .vis .bph{transform:scale(.9); margin:-8px -15px;}
  .phones .pm{transform:scale(.58); margin:-115px -57px;} .phones .pm:nth-child(1){transform:scale(.58) rotate(-3deg);} .phones .pm:nth-child(2){transform:scale(.58) rotate(3deg); margin:-80px -57px -115px -86px;}
}

.bph .in{white-space:nowrap; font-size:19px;}

/* A2 "Die Tafel", second pass: ONE blackboard that stays pinned while its content changes with the scroll.
   Everything after the board is paper. Pinned mode only when JS and motion are on (html.pin); otherwise the chapters simply stack. */
:root{--a1:#2F4C7C; --a1-soft:#DBE3F1; --a2:#2F8577; --a2-soft:#DCEEEA; --b1:#A9762A; --b1-soft:#F0E3CB; --b2:#74497C; --b2-soft:#EADFEC; --k:1;}
html{scroll-padding-top:0;}

/* ---- scroll progress (CSS only, where scroll-driven animations exist) ---- */
.rail{display:none;}
@supports (animation-timeline: scroll()){ .rail{display:block; position:fixed; z-index:60; top:0; left:0; right:0; height:3px; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4)); animation:railgrow linear both; animation-timeline:scroll(root);} @keyframes railgrow{to{transform:scaleX(1);}} }

/* ---- the one board ---- */
.pin{position:relative;}
.room{background:transparent; padding:0;}
.frame{border-radius:0; padding:clamp(8px,.9vw,14px) clamp(8px,.9vw,14px) 0; background:linear-gradient(180deg,var(--wood-a),var(--wood-b)); height:100%;}
html.pin .room{position:sticky; top:0; height:100dvh; overflow:hidden;}
.board{position:relative; height:100%; background:var(--green); border-radius:6px 6px 0 0; overflow:hidden; color:var(--chalk); padding:84px clamp(28px,6vw,96px) 96px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 620px 110px at 22% 24%, rgba(255,255,255,.055), transparent 72%), radial-gradient(ellipse 760px 140px at 72% 66%, rgba(255,255,255,.04), transparent 72%);
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 18px 40px -10px rgba(0,0,0,.65) inset;}
html.pin .board{padding:0;}
.topbar{position:absolute; z-index:12; top:0; left:0; right:0; display:flex; align-items:center; gap:12px; padding:22px clamp(28px,6vw,96px) 0; pointer-events:none;} .topbar > *{pointer-events:auto;}
.wm{font:400 clamp(30px,3vw,38px)/1 'Special Elite',monospace;}
.topnav{position:static; margin-left:auto; color:var(--chalk);} .topnav .navbtn{background:var(--chalk); color:var(--ink);}
.chapter{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,64px); align-items:center; padding:46px clamp(28px,6vw,96px);}
html:not(.pin) .board{padding-top:84px;} html:not(.pin) .chapter + .chapter{border-top:2px dashed rgba(238,236,228,.25);}
html.pin .chapter{position:absolute; inset:84px clamp(28px,6vw,96px) 92px; padding:0; visibility:hidden; opacity:0; transition:opacity .45s ease, visibility 0s .45s;}
html.pin .chapter.on{visibility:visible; opacity:1; transition:opacity .5s ease .15s, visibility 0s;}
html.pin .chapter .tx > *{transform:translateY(26px); opacity:0; transition:transform .7s var(--ease), opacity .5s ease;} html.pin .chapter.past .tx > *{transform:translateY(-26px);}
html.pin .chapter.on .tx > *{transform:none; opacity:1;} html.pin .chapter.on .tx > *:nth-child(2){transition-delay:.08s;} html.pin .chapter.on .tx > *:nth-child(3){transition-delay:.16s;} html.pin .chapter.on .tx > *:nth-child(4){transition-delay:.24s;} html.pin .chapter.on .tx > *:nth-child(5){transition-delay:.32s;}
.vcell{position:relative; align-self:stretch; display:grid; place-items:center; perspective:1500px; min-height:0;}
.vl{transform-style:preserve-3d; transform-origin:50% 50%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
html.pin .vl{position:absolute; left:50%; top:50%; width:var(--vw); height:var(--vh);}
html.pin .vl{transform:translate(-50%,-50%) scale(var(--k)) translateY(50px) rotateX(-14deg) translateZ(-120px); opacity:0; transition:transform .9s var(--ease), opacity .5s ease;} html.pin .chapter.past .vl{transform:translate(-50%,-50%) scale(var(--k)) translateY(-60px) rotateX(10deg) translateZ(-160px);}
html.pin .chapter.on .vl{transform:translate(-50%,-50%) scale(var(--k)); opacity:1; transition-delay:.15s;}
.vl > .pm,.vl > .dm,.vl .bph{will-change:auto;}
.tx h1,.tx h2{font:400 clamp(30px,4.2vw,58px)/1.12 'Special Elite',monospace; max-width:15ch; margin:0 0 16px; filter:url(#chalk);} .tx h2{font-size:clamp(28px,3.6vw,50px);}
.tx h1 em{font-style:normal; color:var(--c3);}
.tx .lede{font:500 clamp(16px,1.4vw,19px)/1.55 'Space Grotesk',sans-serif; color:var(--chalk-dim); max-width:40ch; margin:0 0 24px;}
.scribble{display:block; width:min(300px,70%); height:16px; margin:-4px 0 18px 4px; overflow:visible;} .scribble path{fill:none; stroke:var(--c3); stroke-width:4; stroke-linecap:round;}
.side{display:inline-block; align-self:flex-start; margin:0 0 18px; padding:7px 16px; font:400 clamp(16px,1.5vw,20px)/1.2 'Special Elite',monospace; color:var(--chalk); border:2.4px solid #F0D98C; border-radius:10px; filter:url(#chalk);}
.chlist{list-style:none; padding:0; margin:0; display:grid; gap:9px; font:600 15.5px/1.35 'Space Grotesk',sans-serif;} .chlist li{padding-left:26px; position:relative;} .chlist li::before{content:''; position:absolute; left:0; top:7px; width:14px; height:8px; border-left:3px solid var(--c3); border-bottom:3px solid var(--c3); transform:rotate(-45deg) scale(.9); filter:url(#chalk);} .chlist span{color:var(--chalk-dim); font-weight:500;}
.note{position:relative; background:#FBF9F3; color:var(--ink); border-radius:8px; padding:26px 26px 20px; max-width:470px; box-shadow:0 34px 44px -22px rgba(0,0,0,.75), 0 8px 14px -6px rgba(0,0,0,.4); transform:rotate(-1deg);} .note h2{font:700 19px 'Space Grotesk',sans-serif; margin:0 0 12px; filter:none; max-width:none; color:var(--ink);}
.vl .cap{color:var(--chalk-dim); text-align:center; margin-top:10px;}

/* hero rig: the phone with live-site pieces floating in front of it */
.rig{position:relative; width:440px; height:580px; transform-style:preserve-3d; transform:rotateY(calc(var(--px) * -10deg - 8deg)) rotateX(calc(var(--py) * 6deg)); transition:transform .5s var(--ease);}
.rig .ph{position:absolute; left:50%; top:16px; margin-left:-136px; transform:translateZ(0);}
.rig .ring{position:absolute; left:50%; top:50%; width:420px; height:420px; margin:-210px 0 0 -210px; transform:translateZ(-70px); overflow:visible;} .rig .ring circle{fill:none; stroke:rgba(238,236,228,.2); stroke-width:3; stroke-dasharray:6 10; stroke-linecap:round;}
.fcard{position:absolute; left:-4px; bottom:64px; width:172px; padding:14px 16px 12px; background:#FBF9F3; color:var(--ink); border:1.5px solid var(--ink); border-radius:12px; box-shadow:0 26px 30px -16px rgba(0,0,0,.7), 4px 5px 0 rgba(29,29,31,.2); transform:translateZ(110px) rotate(-7deg);} .fcard b{display:block; font:400 22px/1.15 'Special Elite',monospace;} .fcard small{display:block; margin-top:4px; font:italic 500 13.5px 'IBM Plex Sans',sans-serif; color:var(--ink-soft);} .fcard::before{content:''; position:absolute; top:-9px; left:50%; margin-left:-30px; width:60px; height:20px; background:rgba(240,217,140,.92); transform:rotate(3deg); clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%);}
.chip{position:absolute; font:700 13.5px 'Space Grotesk',sans-serif; padding:7px 13px; border-radius:20px; box-shadow:0 14px 18px -10px rgba(0,0,0,.65);} .chip.ok{right:0; top:96px; background:var(--seafoam); color:#fff; transform:translateZ(130px) rotate(5deg);}
.chip.pr{right:-6px; bottom:112px; background:#FBF9F3; color:var(--ink); transform:translateZ(70px) rotate(-3deg); display:flex; gap:8px; align-items:center;} .chip.pr i{display:inline-block; width:9px; height:9px; border-radius:50%; background:rgba(29,29,31,.18);} .chip.pr i.on{background:var(--seafoam);}
.motion .float{animation:float 6.5s ease-in-out infinite;} .motion .float.d2{animation-duration:7.5s; animation-delay:-2s;} .motion .float.d3{animation-duration:8s; animation-delay:-4s;} @keyframes float{50%{margin-top:-9px;}}

/* chapter 2-5 details */
.duo{display:flex; align-items:flex-start;} .duo > :nth-child(1){transform:rotate(-3deg); position:relative; z-index:1;} .duo > :nth-child(2){transform:rotate(3deg); margin-left:-34px; margin-top:30px;}

/* chapter dots = chalk sticks in the tray */
.tray{position:absolute; left:0; right:0; bottom:0; height:42px; z-index:12; background:linear-gradient(180deg,#5b4c40,#3c3129); border-top:2px solid #86735f; box-shadow:0 -10px 18px -8px rgba(0,0,0,.5);}
.chdots{position:absolute; left:50%; bottom:100%; transform:translateX(-50%); display:flex; gap:10px; margin-bottom:-5px;} .chdots a{display:block; width:34px; height:11px; border-radius:5px; box-shadow:0 3px 3px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.3) inset; opacity:.55; transition:opacity .3s, transform .3s, width .3s;} .chdots a:hover{opacity:.85;} .chdots a.on{opacity:1; width:54px; transform:translateY(-3px);}
.chdots a:nth-child(1){background:var(--c1);} .chdots a:nth-child(2){background:var(--c2);} .chdots a:nth-child(3){background:var(--c3);} .chdots a:nth-child(4){background:var(--c4);} .chdots a:nth-child(5){background:var(--c1);}
html:not(.pin) .chdots{display:none;}
.chaps{display:none;} html.pin .chaps{display:block; margin-top:-100dvh; position:relative; pointer-events:none;} .chap{display:block;} .chap[data-ch="1"]{height:100vh;} .chap[data-ch="2"],.chap[data-ch="3"],.chap[data-ch="4"]{height:90vh;} .chap[data-ch="5"]{height:120vh;}

/* ---- paper sections after the board ---- */
.sec h2 em{font-style:normal; background:linear-gradient(transparent 62%, rgba(240,217,140,.75) 62%);}
.bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; margin-top:8px;}
.tile{position:relative; grid-column:span 3; background:#FBF9F3; border:1.5px solid var(--ink); border-radius:22px; padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px; min-height:300px; overflow:hidden; box-shadow:4px 6px 0 rgba(29,29,31,.14);}
.tile h3{font:700 19px 'Space Grotesk',sans-serif; margin:0;} .tile p{margin:0; color:var(--ink-soft); font-size:15.5px; max-width:36ch;}
.lvl-chip{display:inline-flex; align-self:flex-start; font:700 11.5px 'Space Grotesk',sans-serif; letter-spacing:.03em; padding:4px 10px; border-radius:7px;}
.tile .art{margin-top:auto; padding-top:14px; display:flex; align-items:flex-end; gap:12px; min-height:110px;}
.tilt{transform:perspective(900px) rotateX(calc(var(--ty,0) * -7deg)) rotateY(calc(var(--tx,0) * 7deg)); transition:transform .35s var(--ease), box-shadow .35s;} .tilt:hover{box-shadow:10px 16px 30px -12px rgba(29,29,31,.35);}
.tilt::after{content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:var(--gl,0); transition:opacity .3s; background:radial-gradient(circle at calc(50% + var(--tx,0) * 50%) calc(50% + var(--ty,0) * 50%), rgba(255,255,255,.55), transparent 55%);}
.art .bph{transform:scale(.62); transform-origin:0 100%; margin:0 -110px -6px 0; flex:none;}
.art .qcard{background:#fff; border:1.5px solid var(--ink); border-radius:12px; padding:9px 12px; font:600 13px/1.35 'Space Grotesk',sans-serif; box-shadow:3px 4px 0 rgba(29,29,31,.16); transform:rotate(2deg);} .art .qcard u{text-decoration:none; background:var(--a2-soft); color:#1F6B5F; padding:0 5px; border-radius:4px;} .art .arr{width:44px; height:30px; flex:none; margin-bottom:34px;} .art .arr path{fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.lv{display:flex; gap:10px; flex-wrap:wrap;} .lv span{font:400 30px/1 'Special Elite',monospace; padding:10px 16px; border-radius:12px; border:1.5px solid currentColor;} .lv span:nth-child(1){color:var(--a1); background:var(--a1-soft);} .lv span:nth-child(2){color:var(--a2); background:var(--a2-soft);} .lv span:nth-child(3){color:var(--b1); background:var(--b1-soft);} .lv span:nth-child(4){color:var(--b2); background:var(--b2-soft);}
.bars{display:flex; align-items:flex-end; gap:9px; height:104px; width:100%;} .bars i{flex:1; border-radius:6px 6px 2px 2px; background:var(--a2); display:block; height:var(--h); transform-origin:50% 100%;} .bars i.hk{background:var(--wrong);} .motion .rv:not(.in) .bars i,.motion .tile:not(.in) .bars i{transform:scaleY(.08);} .bars i{transition:transform .9s var(--ease);} .bars i:nth-child(2){transition-delay:.08s;} .bars i:nth-child(3){transition-delay:.16s;} .bars i:nth-child(4){transition-delay:.24s;} .bars i:nth-child(5){transition-delay:.32s;} .bars i:nth-child(6){transition-delay:.4s;} .bars i:nth-child(7){transition-delay:.48s;}
.tile .tag{font:600 12.5px 'Space Grotesk',sans-serif; color:var(--ink-soft);}
.big24{font:400 clamp(70px,9vw,110px)/.9 'Special Elite',monospace; color:var(--ink);}
.bento.rv > *{opacity:1;}

/* live-site notebook scene, rebuilt in 3D */
.nbkscene{perspective:1700px; display:flex; justify-content:center; padding:30px 0 20px;}
.nbk{position:relative; width:min(780px,100%); height:430px; display:grid; grid-template-columns:1fr 1fr; transform-style:preserve-3d; transform:rotateX(calc(12deg + var(--py) * -3deg)) rotateY(calc(-14deg + var(--px) * 5deg)); transition:transform .5s var(--ease); border-radius:14px; background:#E9E3D5; box-shadow:0 60px 70px -40px rgba(29,29,31,.6), 0 0 0 1.5px var(--ink);}
.nbk .pg{position:relative; padding:40px 36px; background:#FCFAF5 repeating-linear-gradient(to bottom, transparent 0 35px, rgba(47,76,124,.14) 35px 36px); background-position:0 52px; transform-style:preserve-3d;} .nbk .pg.l{border-radius:14px 0 0 14px; box-shadow:inset -24px 0 26px -22px rgba(29,29,31,.3);} .nbk .pg.r{border-radius:0 14px 14px 0; box-shadow:inset 24px 0 26px -22px rgba(29,29,31,.3);}
.nbk .spiral{position:absolute; left:50%; top:-10px; bottom:-10px; width:22px; margin-left:-11px; z-index:3; border-radius:6px; transform:translateZ(8px); background:repeating-linear-gradient(to bottom, transparent 0 12px, #2b2724 12px 17px, #b9b3a8 17px 19px, transparent 19px 30px);}
.nbk .kick{font:700 12.5px 'Space Grotesk',sans-serif; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; transform:translateZ(14px);}
.nbk .vocab{display:flex; flex-direction:column; gap:2px; margin-bottom:22px; transform:translateZ(26px);} .nbk .vocab .w1{font:400 34px/1.1 'Special Elite',monospace;} .nbk .vocab mark{background:rgba(240,217,140,.8); padding:0 5px; border-radius:4px; color:inherit;} .nbk .vocab .df{color:var(--ink-soft); font-size:16px;}
.nbk .ex{font:500 20px/1.75 'IBM Plex Sans',sans-serif; transform:translateZ(18px);} .nbk .ex .w{display:inline-block; padding:0 4px; margin:0 1px; border-radius:5px; background:rgba(143,217,198,.55);} .nbk .ex .w:nth-child(odd){background:rgba(240,217,140,.6);}
@keyframes hl{from{background:transparent;}}
.motion .nbk.in .ex .w{animation:hl .5s ease both; animation-delay:calc(var(--i) * .3s + .5s);} .motion .nbk:not(.in) .ex .w{background:transparent;}
.nbk .gem{position:absolute; right:30px; bottom:96px; font:700 15px 'Space Grotesk',sans-serif; color:#fff; background:var(--seafoam); padding:7px 14px; border-radius:20px; transform:translateZ(60px) rotate(-6deg); box-shadow:0 14px 18px -10px rgba(0,0,0,.5); transition:opacity .4s ease 2.2s, scale .5s var(--ease) 2.2s;} .motion .nbk:not(.in) .gem{opacity:0; scale:.5;}
.nbk .prog{position:absolute; left:36px; bottom:34px; display:flex; gap:10px; align-items:center; font:600 12.5px 'Space Grotesk',sans-serif; color:var(--ink-soft); transform:translateZ(16px);} .nbk .prog i{width:12px; height:12px; border-radius:50%; background:rgba(29,29,31,.15); transition:background .4s;} .nbk .prog i.on{background:var(--seafoam);} .motion .nbk:not(.in) .prog i.on{background:rgba(29,29,31,.15);} .nbk.in .prog i:nth-of-type(1){transition-delay:1.2s;} .nbk.in .prog i:nth-of-type(2){transition-delay:1.5s;} .nbk.in .prog i:nth-of-type(3){transition-delay:1.8s;} .nbk.in .prog i:nth-of-type(4){transition-delay:2.1s;}
.nbk .fcard2{position:absolute; left:34px; top:62px; width:176px; transform:translateZ(90px) rotate(-6deg); background:#FBF9F3; border:1.5px solid var(--ink); border-radius:12px; padding:14px 16px 12px; box-shadow:0 26px 30px -16px rgba(0,0,0,.55), 4px 5px 0 rgba(29,29,31,.2);} .nbk .fcard2 b{display:block; font:400 22px/1.15 'Special Elite',monospace;} .nbk .fcard2 small{display:block; margin-top:4px; font:italic 500 13.5px 'IBM Plex Sans',sans-serif; color:var(--ink-soft);}
.nbk .pg.l .bph{position:absolute; left:40px; bottom:40px; transform:translateZ(30px) rotate(2deg) scale(.82); transform-origin:0 100%;}
.scenecap{text-align:center; margin:28px 0 0; font:500 clamp(17px,1.6vw,20px) 'Space Grotesk',sans-serif; color:var(--ink-soft);}

/* live-site connect scene */
.cstage{display:grid; grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr); align-items:center; perspective:1400px;}
.ccard{position:relative; background:#FBF9F3; border:1.5px solid var(--ink); border-radius:16px; padding:22px 22px 24px; box-shadow:4px 6px 0 rgba(29,29,31,.16); min-height:150px; display:flex; flex-direction:column; gap:12px;} .ccard.stu{transform:rotateY(8deg) rotate(-1.5deg);} .ccard.tea{transform:rotateY(-8deg) rotate(1.2deg);}
.ccard .role{align-self:flex-start; font:700 11.5px 'Space Grotesk',sans-serif; letter-spacing:.04em; padding:4px 10px; border-radius:7px; background:var(--a1-soft); color:var(--a1);} .ccard.tea .role{background:var(--a2-soft); color:var(--a2);}
.ccard p{margin:0; font:400 clamp(20px,2vw,25px)/1.3 'Special Elite',monospace;} .ccard.tea p mark{background:rgba(240,217,140,.8); padding:0 4px; border-radius:4px; color:inherit;}
.wire{display:flex; justify-content:space-around; align-items:center; position:relative; height:44px;} .wire::before{content:''; position:absolute; left:0; right:0; top:50%; border-top:3px dotted rgba(29,29,31,.4);} .wire i{position:relative; width:11px; height:11px; border-radius:50%; background:var(--accent); display:block;}
.motion .cstage.in .wire i{animation:pulse 1.8s ease-in-out infinite;} .motion .cstage.in .wire i:nth-child(2){animation-delay:.3s;} .motion .cstage.in .wire i:nth-child(3){animation-delay:.6s;} @keyframes pulse{50%{transform:scale(1.7); background:var(--seafoam);}}
.cp{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; font:700 15px 'Space Grotesk',sans-serif;} .cp .st{padding:6px 14px; border-radius:20px; border:1.5px solid var(--ink); background:#fff;} .cp .sep{color:var(--ink-soft);}
.motion .cp.in .st{animation:lit .7s ease both;} .motion .cp.in .st:nth-of-type(2){animation-delay:.6s;} .motion .cp.in .st:nth-of-type(3){animation-delay:1.2s;} @keyframes lit{from{background:#fff;} to{background:#F0D98C;}} .cp .st{background:#F0D98C;} .motion .cp:not(.in) .st{background:#fff;}

.s-pilot .stages li{position:relative;} .s-priv{--tick:var(--seafoam);} .s-priv .stand{border-left:3px solid var(--c3); padding-left:14px;}
.s-pilot .stages{position:relative; padding-top:26px;} .s-pilot .stages::before{content:''; position:absolute; left:0; right:0; top:11px; border-top:3px dotted rgba(29,29,31,.4);} .s-pilot .stages li::before{content:''; position:absolute; top:-27px; left:0; width:20px; height:20px; border-radius:50%; background:var(--paper); border:3px solid var(--ink);} .s-pilot .stages li.now::before{background:var(--seafoam); border-color:var(--seafoam); box-shadow:0 0 0 5px rgba(47,133,119,.25);}
.joinwrap .join{padding:30px clamp(22px,6vw,96px) 70px; max-width:760px; margin:0 auto;} .joinwrap .note{transform:rotate(.6deg); max-width:none;} .joinwrap .note h2{font:400 28px/1.2 'Special Elite',monospace;}
.bandpaper{background:transparent;}

/* ---- laptop height squeeze ---- */
@media (max-height:760px) and (min-width:901px){ .tx h1{font-size:clamp(28px,3.4vw,46px);} .tx .lede{margin-bottom:16px;} .note{padding:20px 22px 16px;} .scribble{display:none;} .chlist{gap:6px;} }

/* ---- phones and narrow screens ---- */
@media (max-width:900px){
  .frame{padding:8px 8px 0;}
  .topbar{padding:14px 20px 0;} .topnav{display:none;} .wm{font-size:28px;}
  .chapter{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:10px; padding:30px 20px;}
  html.pin .chapter{inset:54px 18px 62px; align-items:start;}
  .tx h1{font-size:clamp(28px,8.6vw,38px); margin-bottom:10px; max-width:none;} .tx h2{font-size:clamp(25px,7.4vw,32px); margin-bottom:10px; max-width:none;} .tx .lede{font-size:15.5px; margin-bottom:14px;} .scribble{display:none;}
  html.pin .tx .lede.long{display:none;}
  .note{max-width:none; padding:18px 18px 14px; transform:none;} .chapter .note h2{display:none;} .note .micro{margin-top:8px; font-size:12px;}
  .chlist span{display:none;} .chlist{font-size:14.5px; gap:6px;}
  .rig{width:440px; height:580px;} .side{margin-bottom:10px;}
  .vcell{min-height:0;} .srcthumb{display:none;}
  .bento{grid-template-columns:minmax(0,1fr);} .tile{grid-column:auto; min-height:0;}
  .nbk{grid-template-columns:minmax(0,1fr); height:auto; transform:none; width:100%;} .nbk .pg.l{display:none;} .nbk .pg{padding:30px 24px 70px;} .nbk .spiral{display:none;} .nbk .pg.r{border-radius:14px;} .nbk .gem{right:20px; bottom:70px;} .nbk .prog{left:24px;} .nbk .ex{font-size:18px;}
  .cstage{grid-template-columns:minmax(0,1fr); gap:6px;} .wire{height:46px; width:60px; margin:0 auto; transform:rotate(90deg);} .ccard.st,.ccard.tea{transform:none;}
}
.tile.w4{grid-column:span 4;} .tile.w2{grid-column:span 2;}
@media (max-width:900px){ .tile.w4,.tile.w2{grid-column:auto;} }
.chlist span{display:block;}
.lv span{font-size:24px; padding:8px 13px;}
@media (max-width:900px){ .chlist span{display:none;} }

/* stacked (no pin) mode: visuals shrink on narrow screens, margins collapse with them */
html:not(.pin) .vl{--ss:1; transform:scale(var(--ss)); margin:calc(var(--vh) * (var(--ss) - 1) / 2) calc(var(--vw) * (var(--ss) - 1) / 2);}
@media (max-width:640px){ html:not(.pin) .vl{--ss:.62;} }
.dl{display:inline;} @media (max-width:900px){ .dl{display:none;} html.pin .tx .lede.long{display:none;} .draftbar{padding:6px 12px;} }

@media (max-width:900px){
  .tile .art{flex-wrap:wrap; align-items:flex-end;} .art .qcard{flex:1 1 200px;} .art .arr{display:none;} .art .bph{margin:0 -112px -6px 0;}
}
@media (max-width:1000px){
  .s-pilot .stages{padding-top:0; gap:22px;} .s-pilot .stages::before{left:9px; right:auto; top:6px; bottom:6px; border-top:0; border-left:3px dotted rgba(29,29,31,.4);} .s-pilot .stages li{padding-left:40px;} .s-pilot .stages li::before{left:0; top:2px;}
}

/* chapter 2: a photo of the board with chalks and a rubber, and a photo of notes */
.shot{position:relative; width:470px; height:340px; transform-style:preserve-3d;}
.photo{position:absolute; left:0; top:0; width:372px; padding:12px 12px 40px; background:#FBF9F3; box-shadow:0 30px 34px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2); transform:rotate(-3deg);}
.photo .tp{width:62px; height:20px; top:-9px;} .photo .tp.l{left:-14px;} .photo .tp.r{right:-14px;}
.photo .pic{position:relative; height:236px; background:#17261F; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), inset 0 12px 30px -12px rgba(0,0,0,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 80% 60% at 30% 25%, rgba(255,255,255,.07), transparent 70%);}
.photo .wr{position:absolute; left:22px; top:20px; right:16px; font:400 24px/1.5 'Special Elite',monospace; color:var(--chalk); filter:url(#chalk);} .photo .wr u{text-decoration:none; color:var(--c3);} .photo .wr s{display:block; text-decoration:none; color:var(--c2); font-size:19px;}
.photo .smudge{position:absolute; left:0; right:0; bottom:42px; height:46px; background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(238,236,228,.10), transparent 70%);}
.photo .ledge{position:absolute; left:0; right:0; bottom:0; height:40px; background:linear-gradient(180deg,#6f5e50,#4a3d33); border-top:2px solid #8d7a66;}
.photo .ck{position:absolute; bottom:100%; height:11px; border-radius:5px; margin-bottom:-3px; box-shadow:0 3px 3px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.3) inset;} .ck.a{left:22px; width:54px; background:var(--c1);} .ck.b{left:88px; width:46px; background:var(--c3);} .ck.c{left:146px; width:22px; background:#EEECE4; transform:rotate(-8deg);}
.photo .er{position:absolute; left:196px; bottom:100%; width:92px; height:30px; margin-bottom:-4px; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,#c29b66 0 52%,#2c2c2e 52%); box-shadow:0 5px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);} .photo .er::after{content:''; position:absolute; left:10px; right:10px; bottom:2px; height:5px; border-radius:3px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 3px,transparent 3px 7px);}
.photo .er i{position:absolute; left:-14px; top:20px; width:22px; height:9px; border-radius:50%; background:rgba(238,236,228,.5); filter:blur(3px);}
.photo .polcap{position:absolute; left:16px; bottom:10px; font:400 15px 'Special Elite',monospace; color:#5B5B60;}
.nphoto{position:absolute; right:0; bottom:0; width:206px; padding:9px 9px 28px; background:#fff; box-shadow:0 26px 30px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.18); transform:translateZ(70px) rotate(5deg);}
.nphoto .pg2{height:176px; padding:14px 14px 0 26px; position:relative; background:#FCFAF5 repeating-linear-gradient(to bottom, transparent 0 25px, rgba(47,76,124,.2) 25px 26px); background-position:0 30px; font:400 17px/26px 'Special Elite',monospace; color:#1D1D1F;} .nphoto .pg2::before{content:''; position:absolute; top:0; bottom:0; left:14px; width:3px; background:rgba(173,58,58,.45);} .nphoto .pg2 b{font-weight:400; text-decoration:underline; text-decoration-color:var(--c3); text-decoration-thickness:3px; text-underline-offset:3px;}
.nphoto .tp{width:46px; height:16px; top:-8px; left:50%; margin-left:-23px; transform:rotate(2deg);}

/* A3/A4, second take: the part after the green board uses the SAME arrangement as the board: a second pinned stage,
   text left, one big object right, the content changes with the scroll. Stage = brown wood desk (A3) or light paper (A4). */
.dstage.board{border-radius:0; box-shadow:none;}
.theme-desk .dstage.board{background:linear-gradient(180deg,var(--wood-a),var(--wood-b)); color:#F6F2E8; --fg:#F6F2E8; --fg2:#E6DDCC; --acc:#F0D98C;}
.theme-paper .dstage.board{background-color:var(--paper); color:var(--ink); --fg:var(--ink); --fg2:var(--ink-soft); --acc:var(--accent);
  background-image:radial-gradient(ellipse 900px 600px at 28% 40%, rgba(255,255,255,.65), transparent 70%), radial-gradient(var(--paper-dot) 1.4px, transparent 1.4px); background-size:auto,20px 20px;}
.dframe.frame{padding:0; background:none; border-radius:0;} .droom.room{background:transparent;}
.dstage .wm{filter:none; color:var(--fg);} .dstage .topnav{color:var(--fg);} .dstage .topnav .navbtn{background:var(--fg); color:var(--ink);} .theme-desk .dstage .topnav .navbtn{background:#F3EFE4;} .theme-paper .dstage .topnav .navbtn{background:var(--ink); color:var(--paper);}
.dstage .tx h2{filter:none; color:var(--fg); font-size:clamp(26px,3.3vw,46px); max-width:17ch;} .dstage .tx h2 em{font-style:normal; color:var(--acc);} .theme-paper .dstage .tx h2 em{color:inherit; background:linear-gradient(transparent 62%, rgba(240,217,140,.85) 62%);}
.dstage .tx .lede{color:var(--fg2);} .dstage .vl .cap{color:var(--fg2);}
.theme-paper .dstage .tray{background:transparent; border:0; box-shadow:none;} .theme-paper .dstage .chdots{margin-bottom:-12px;}
.theme-paper .dstage .chdots a{box-shadow:0 2px 3px rgba(0,0,0,.25);}
.dstage .tray{z-index:12;}
.lvl-chip{display:inline-flex; align-self:flex-start; font:700 11.5px 'Space Grotesk',sans-serif; letter-spacing:.03em; padding:4px 10px; border-radius:7px;}
.wide{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); text-align:center;} .wide .tx{max-width:760px; margin:0 auto;} .wide .tx h2{max-width:none;} .wide .tx .lede{margin-left:auto; margin-right:auto;}

/* 1: fanned cards */
.fan{position:relative; width:840px; height:470px; transform-style:preserve-3d; transform:rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -3deg)); transition:transform .5s var(--ease);}
.fc{position:absolute; left:50%; top:50%; width:290px; height:400px; margin:-200px 0 0 -145px; background:#FBF9F3; color:var(--ink); border:1.5px solid var(--ink); border-radius:18px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:8px; box-shadow:0 34px 44px -22px rgba(0,0,0,.65), 5px 7px 0 rgba(29,29,31,.18); transform:translateX(var(--x)) translateZ(var(--z)) rotate(var(--r)); transition:transform .6s var(--ease), box-shadow .4s, opacity .7s ease;}
.fc:nth-child(1){--x:-268px; --r:-8deg; --z:0px;} .fc:nth-child(2){--x:0px; --r:1.5deg; --z:40px;} .fc:nth-child(3){--x:268px; --r:8deg; --z:0px;}
.fan:hover .fc:nth-child(1){--x:-292px; --r:-11deg;} .fan:hover .fc:nth-child(3){--x:292px; --r:11deg;} .fc:hover{--z:110px; z-index:5;}
.fc::before{content:''; position:absolute; top:-9px; left:50%; margin-left:-34px; width:68px; height:22px; background:rgba(240,217,140,.92); transform:rotate(-2deg); clip-path:polygon(0 0,100% 0,97% 20%,100% 40%,97% 60%,100% 80%,97% 100%,0 100%,3% 80%,0 60%,3% 40%,0 20%);}
.fc h3{font:700 19px/1.25 'Space Grotesk',sans-serif; margin:4px 0 0;} .fc p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.5;} .fc .art2{margin-top:auto; display:flex; flex-direction:column; gap:10px;}
.mb{height:84px; background:#17261F; border:4px solid #6A5A4D; border-radius:6px; display:grid; place-items:center; text-align:center; color:var(--chalk); font:400 16px/1.5 'Special Elite',monospace; filter:url(#chalk); box-shadow:inset 0 0 22px rgba(0,0,0,.5);}
.qc{background:#fff; border:1.5px solid var(--ink); border-radius:10px; padding:8px 10px; font:600 12.5px/1.35 'Space Grotesk',sans-serif; box-shadow:2px 3px 0 rgba(29,29,31,.16);} .qc u{text-decoration:none; background:var(--a2-soft); color:#1F6B5F; padding:0 5px; border-radius:4px;}
.lv2{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .lv2 span{font:400 34px/1 'Special Elite',monospace; text-align:center; padding:16px 0; border-radius:14px; border:1.5px solid currentColor;} .lv2 span:nth-child(1){color:var(--a1); background:var(--a1-soft);} .lv2 span:nth-child(2){color:var(--a2); background:var(--a2-soft);} .lv2 span:nth-child(3){color:var(--b1); background:var(--b1-soft);} .lv2 span:nth-child(4){color:var(--b2); background:var(--b2-soft);}
.fc .bars{height:118px;} .fc .tag{font:600 12px 'Space Grotesk',sans-serif; color:var(--ink-soft);}
.motion .fan:not(.in) .bars i{transform:scaleY(.08);} .motion .fan:not(.in) .fc{opacity:0;} .motion .fan.in .fc:nth-child(2){transition-delay:.1s;} .motion .fan.in .fc:nth-child(3){transition-delay:.2s;}

/* 2: notebook */
.nbk.big{width:960px; height:500px; border-radius:18px;} .nbk.big .pg{padding:52px 48px;} .nbk.big .vocab .w1{font-size:54px;} .nbk.big .vocab .df{font-size:19px;} .nbk.big .ex{font-size:25px; line-height:1.8;} .nbk.big .gem{font-size:17px; right:40px; bottom:112px;} .nbk.big .prog{left:48px; bottom:44px; font-size:13.5px;} .nbk.big .prog i{width:14px; height:14px;} .nbk.big .fcard2{left:44px; top:64px; width:216px; padding:16px 18px 14px;} .nbk.big .fcard2 b{font-size:28px;} .nbk.big .fcard2 small{font-size:15px;} .nbk.big .pg.l .bph{left:48px; bottom:48px; transform:translateZ(30px) rotate(2deg) scale(1);}
.scenecap2{margin:18px 0 0; font:500 18px 'Space Grotesk',sans-serif; color:var(--fg2); text-align:center;}

/* 3: two notes */
.duo3{position:relative; width:580px; height:520px;}
.pnote{position:absolute; width:430px; background:#FBF9F3; color:var(--ink); border:1.5px solid var(--ink); border-radius:6px; padding:28px 28px 30px; min-height:190px; display:flex; flex-direction:column; gap:14px; box-shadow:0 34px 44px -22px rgba(0,0,0,.65), 5px 7px 0 rgba(29,29,31,.16);
  background-image:repeating-linear-gradient(to bottom, transparent 0 41px, rgba(47,76,124,.16) 41px 42px); background-position:0 58px;}
.pnote::before{content:''; position:absolute; top:-10px; left:50%; margin-left:-38px; width:76px; height:24px; background:rgba(240,217,140,.92); transform:rotate(-3deg); clip-path:polygon(0 0,100% 0,97% 20%,100% 40%,97% 60%,100% 80%,97% 100%,0 100%,3% 80%,0 60%,3% 40%,0 20%);}
.pnote .role{align-self:flex-start; font:700 12px 'Space Grotesk',sans-serif; letter-spacing:.04em; padding:4px 11px; border-radius:7px; background:var(--a1-soft); color:var(--a1);} .pnote.tea .role{background:var(--a2-soft); color:var(--a2);}
.pnote p{margin:0; font:400 30px/1.35 'Special Elite',monospace;} .pnote.tea p mark{background:rgba(240,217,140,.85); padding:0 5px; border-radius:4px; color:inherit;}
.pnote.stu{left:0; top:6px; transform:rotateY(8deg) rotate(-3deg);} .pnote.tea{right:0; bottom:6px; transform:rotateY(-8deg) rotate(2.5deg);}
.loop{position:absolute; left:50%; top:50%; width:150px; height:130px; margin:-70px 0 0 -30px; overflow:visible;} .loop path{fill:none; stroke:var(--acc); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0;}
.motion .duo3:not(.in) .loop path{stroke-dashoffset:1;} .motion .duo3 .loop path{transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) .5s;}
.motion .duo3 .pnote.tea{transition:transform .9s var(--ease) .9s, opacity .7s ease .9s;} .motion .duo3:not(.in) .pnote.tea{opacity:0; transform:translateX(70px) rotateY(-30deg) rotate(2.5deg);}
.dstage .cp{margin-top:22px;} .dstage .cp .st{border-color:#FBF9F3; color:var(--ink);} .theme-paper .dstage .cp .st{border-color:var(--ink);} .dstage .cp .sep{color:var(--fg2);}
.motion .dstage .cp:not(.in) .st{background:#fff;}

/* 4: privacy */
.pgrid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:660px;}
.pc{position:relative; background:#FBF9F3; color:var(--ink); border:1.5px solid var(--ink); border-radius:16px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px; box-shadow:0 26px 34px -22px rgba(0,0,0,.6), 4px 5px 0 rgba(29,29,31,.16);}
.pc svg{width:40px; height:40px; fill:none; stroke:var(--seafoam); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;} .pc h3{font:700 17px 'Space Grotesk',sans-serif; margin:2px 0 0;} .pc p{margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.5;} .pc a{text-decoration:underline; text-underline-offset:2px;}
.pgrid2 .pc:nth-child(odd){transform:rotate(-.7deg);} .pgrid2 .pc:nth-child(even){transform:rotate(.7deg);}
.motion .pgrid2 .pc{transition:opacity .6s ease, transform .7s var(--ease);} .motion .pgrid2:not(.in) .pc{opacity:0; transform:translateY(24px);} .pgrid2.in .pc:nth-child(2){transition-delay:.07s;} .pgrid2.in .pc:nth-child(3){transition-delay:.14s;} .pgrid2.in .pc:nth-child(4){transition-delay:.21s;} .pgrid2.in .pc:nth-child(5){transition-delay:.28s;} .pgrid2.in .pc:nth-child(6){transition-delay:.35s;}
.pstand{position:relative; margin:20px 0 0; max-width:42ch; background:#F0E3A9; color:var(--ink); padding:14px 18px; border-radius:4px; transform:rotate(-1deg); box-shadow:0 22px 26px -16px rgba(0,0,0,.55); font-size:14px; line-height:1.5;} .pstand a{text-decoration:underline; text-underline-offset:2px;} .pstand b{font:700 12px 'Space Grotesk',sans-serif; letter-spacing:.05em; text-transform:uppercase; display:block; margin-bottom:2px;}

/* 5: pilot */
.stampbig{display:inline-block; align-self:flex-start; margin:0 0 20px; border:4px double var(--acc); color:var(--acc); border-radius:12px; padding:9px 22px; font:700 clamp(17px,2vw,26px) 'Space Grotesk',sans-serif; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-4deg);}
.road{position:relative; width:520px; display:flex; flex-direction:column; gap:26px; padding-left:50px;}
.road::before{content:''; position:absolute; left:14px; top:30px; bottom:30px; border-left:4px dotted var(--fg2); opacity:.6;}
.mc{position:relative; background:#FBF9F3; color:var(--ink); border:1.5px solid var(--ink); border-radius:16px; padding:20px 24px 22px; box-shadow:0 26px 34px -22px rgba(0,0,0,.6), 4px 6px 0 rgba(29,29,31,.16);}
.mc::before{content:''; position:absolute; top:26px; left:-44px; width:22px; height:22px; border-radius:50%; background:#FBF9F3; border:4px solid var(--ink);} .mc.now::before{background:var(--seafoam); border-color:var(--seafoam); box-shadow:0 0 0 7px rgba(47,133,119,.3);}
.mc b{display:block; font:400 26px/1.2 'Special Elite',monospace; margin-bottom:4px;} .mc span{color:var(--ink-soft); font-size:15px;} .mc.now{box-shadow:0 0 0 3px var(--seafoam), 0 26px 34px -22px rgba(0,0,0,.6);}
.mc.now em{position:absolute; top:-12px; right:18px; font:700 12px 'Space Grotesk',sans-serif; font-style:normal; background:var(--seafoam); color:#fff; padding:3px 10px; border-radius:20px;}
.motion .road .mc{transition:opacity .6s ease, transform .7s var(--ease);} .motion .road:not(.in) .mc{opacity:0; transform:translateX(40px);} .road.in .mc:nth-child(2){transition-delay:.15s;} .road.in .mc:nth-child(3){transition-delay:.3s;}

/* join + footer after the stage */
.lo{position:relative;} .lo.theme-desk{background:linear-gradient(180deg,var(--wood-a),var(--wood-b)); color:#E6DDCC;}
.lo .joinwrap{padding:clamp(60px,12vh,120px) clamp(22px,6vw,96px) 30px;} .lo .joinwrap .join{padding:0; max-width:820px; margin:0 auto;} .lo .joinwrap .note{max-width:none; padding:42px 44px 34px; transform:rotate(-.8deg);} .lo .joinwrap .note h2{font:400 clamp(30px,4vw,52px)/1.1 'Special Elite',monospace; color:var(--ink); margin-bottom:10px;} .lo .joinwrap .note p{font-size:17px;}
.theme-desk.lo footer.site{color:#E6DDCC;} .theme-desk.lo footer.site a:hover{color:#fff;}

/* ---- narrow screens: smaller, simpler versions of the same objects ---- */
@media (max-width:900px){
  html.pin .vl{width:var(--mvw,var(--vw)); height:var(--mvh,var(--vh));}
  .dstage .tx h2{font-size:clamp(24px,7vw,30px); max-width:none;}
  .wide{grid-template-rows:auto minmax(0,1fr);}
  .fan{width:330px; height:auto; display:flex; flex-direction:column; gap:16px; transform:none;} .fc{position:relative; left:auto; top:auto; margin:0; width:100%; height:auto; transform:rotate(var(--r)); --x:0px; --z:0px;} .fc .art2{display:none;} .fan:hover .fc:nth-child(1),.fan:hover .fc:nth-child(3){--x:0px;} .fc:nth-child(1){--r:-1.5deg;} .fc:nth-child(2){--r:1deg;} .fc:nth-child(3){--r:-.8deg;} .fc{padding:16px 16px 14px;} .fc p{font-size:13.5px;}
  .nbk.big{width:340px; height:auto; grid-template-columns:minmax(0,1fr); transform:none;} .nbk.big .pg.l,.nbk.big .spiral{display:none;} .nbk.big .pg.r{border-radius:14px; padding:26px 22px 70px;} .nbk.big .vocab .w1{font-size:40px;} .nbk.big .ex{font-size:19px;} .nbk.big .gem{right:18px; bottom:64px;} .nbk.big .prog{left:22px; bottom:26px;}
  .scenecap2{display:none;}
  .duo3{width:340px; height:430px;} .pnote{width:290px; padding:22px 20px 22px; min-height:150px;} .pnote p{font-size:22px;} .pnote.stu{transform:rotate(-2deg);} .pnote.tea{transform:rotate(2deg);} .loop{width:90px; height:80px; margin:-34px 0 0 -20px;} .motion .duo3:not(.in) .pnote.tea{transform:translateY(40px) rotate(2deg);}
  .pgrid2{grid-template-columns:minmax(0,1fr); width:340px; gap:10px;} .pc{flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 12px; padding:10px 14px;} .pc svg{width:30px; height:30px;} .pc h3{flex:1; margin:0; font-size:15px;} .pc p{flex-basis:100%; font-size:12.5px; line-height:1.4;} .pgrid2 .pc:nth-child(n){transform:none;}
  .dstage .pstand{display:none;}
  .road{width:340px; gap:18px; padding-left:40px;} .mc{padding:14px 16px 16px;} .mc b{font-size:21px;} .mc span{font-size:13.5px;} .mc::before{left:-36px; top:18px; width:18px; height:18px;} .road::before{left:11px;}
  .stampbig{margin-bottom:10px;}
}
@media (min-width:901px){ html:not(.pin) .dstage .vl{--ss:.72;} html:not(.pin) .dstage .wide .vl{--ss:1;} }
@media (max-width:900px){ html:not(.pin) .dstage .vl{--ss:1;} }
@media (min-width:901px){ .dstage .chapter:not(.wide){grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);} }
@media (max-width:900px){ .nbk.big .gem{bottom:auto; top:16px; right:14px;} }

/* ===== step transitions (no sweeping eraser, no glare) ===== */
/* green board: the new step is written in line by line, the big object turns in from depth and un-blurs */
html.pin .board:not(.dstage) .chapter .tx > *{opacity:1; transform:none; clip-path:inset(-40px 100% -60px -20px); transition:clip-path .8s cubic-bezier(.5,0,.2,1);}
html.pin .board:not(.dstage) .chapter.on .tx > *{clip-path:inset(-40px -40px -60px -20px);}
html.pin .board:not(.dstage) .chapter.on .tx > *:nth-child(1){transition-delay:.25s;} html.pin .board:not(.dstage) .chapter.on .tx > *:nth-child(2){transition-delay:.4s;} html.pin .board:not(.dstage) .chapter.on .tx > *:nth-child(3){transition-delay:.55s;} html.pin .board:not(.dstage) .chapter.on .tx > *:nth-child(4){transition-delay:.7s;} html.pin .board:not(.dstage) .chapter.on .tx > *:nth-child(5){transition-delay:.85s;}
html.pin .board:not(.dstage) .chapter.past .tx > *{clip-path:inset(-40px -40px -60px -20px);}
html.pin .board:not(.dstage) .vl{filter:blur(7px); transform:translate(-50%,-50%) scale(calc(var(--k) * .85)) rotateY(38deg) translateZ(-280px); opacity:0; transition:transform 1s cubic-bezier(.2,.9,.3,1.1), opacity .6s ease, filter .7s ease;}
html.pin .board:not(.dstage) .chapter.on .vl{filter:blur(0); transform:translate(-50%,-50%) scale(var(--k)); opacity:1; transition-delay:.3s;}
html.pin .board:not(.dstage) .chapter.past .vl{transform:translate(-50%,-50%) scale(calc(var(--k) * .85)) rotateY(-38deg) translateZ(-280px);}

/* desk: the old step is tossed up and back, the new one drops in from below with a little overshoot */
html.pin .dstage .chapter{opacity:0; visibility:hidden; transform:perspective(1800px) translateY(130px) rotateX(-22deg) scale(.93); transition:opacity .45s ease, transform .95s cubic-bezier(.2,.9,.3,1.15), visibility 0s .95s;}
html.pin .dstage .chapter.on{opacity:1; visibility:visible; transform:perspective(1800px); transition:opacity .5s ease .1s, transform 1s cubic-bezier(.2,.9,.3,1.15) .05s, visibility 0s;}
html.pin .dstage .chapter.past{transform:perspective(1800px) translateY(-120px) rotateX(20deg) rotateZ(-2.5deg) scale(.93);}
html.pin .dstage .vl{transform:translate(-50%,-50%) scale(calc(var(--k) * .8)) rotateY(-22deg) rotateX(8deg); opacity:0; transition:transform 1.05s cubic-bezier(.2,.9,.3,1.25), opacity .5s ease;}
html.pin .dstage .chapter.on .vl{transform:translate(-50%,-50%) scale(var(--k)); opacity:1; transition-delay:.18s;}
html.pin .dstage .chapter.past .vl{transform:translate(-50%,-50%) scale(calc(var(--k) * .85)) rotateY(20deg);}

.nbk.big .fcard2{color:var(--ink);} .scenecap2{margin-top:34px;}
.nbk.big .pg.l .bph{transform:rotate(2deg);}
/* the SVG chalk filter inside 3D-transformed layers leaves clipped paint in Chromium: use a plain text-shadow there */
.nbk .bph .in,.fc .mb{filter:none; text-shadow:0 0 1px rgba(238,236,228,.8), 0 0 4px rgba(238,236,228,.25);}

/* ===== the notebook: a brown book that opens, white pages, dark ink ===== */
.nbk.big.book{display:block; position:relative; width:960px; height:500px; background:none; box-shadow:none; border-radius:0; transform:none; transform-style:preserve-3d;}
.book .bk-r{position:absolute; right:0; top:0; width:480px; height:500px; padding:14px 14px 14px 0; background:linear-gradient(160deg,#42301f,#271b12); border-radius:0 20px 20px 0; box-shadow:0 40px 50px -26px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.07);}
.book .pg{height:100%; color:var(--ink); background:#FDFBF6 repeating-linear-gradient(to bottom, transparent 0 35px, rgba(47,76,124,.16) 35px 36px); background-position:0 52px;}
.book .pg.r{border-radius:0 10px 10px 0; box-shadow:inset 22px 0 24px -20px rgba(29,29,31,.28);} .book .pg.l{border-radius:10px 0 0 10px; box-shadow:inset -22px 0 24px -20px rgba(29,29,31,.28);}
.book .fcov{position:absolute; left:480px; top:0; width:480px; height:500px; transform-origin:0 50%; transform-style:preserve-3d; transform:rotateY(-180deg);}
.book .cf,.book .cb{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.book .cf{border-radius:0 20px 20px 0; background:linear-gradient(160deg,#4a3623,#271b12); box-shadow:inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 12px #34251a, inset 0 0 0 13.5px rgba(240,217,140,.32), 0 30px 40px -24px rgba(0,0,0,.7); display:grid; place-items:center; align-content:center; gap:18px; text-align:center;}
.book .cf b{font:400 64px/1 'Special Elite',monospace; color:#F3E7CF; font-weight:400; text-shadow:0 2px 0 rgba(0,0,0,.35);} .book .cf i{display:block; width:70px; height:22px; background:var(--tape); transform:rotate(-3deg); box-shadow:0 2px 5px rgba(0,0,0,.4); clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,100% 0,95% 30%,100% 55%,95% 80%,100% 100%,0 100%,5% 70%,0 40%);}
.book .cb{transform:rotateY(180deg); padding:14px 0 14px 14px; background:linear-gradient(200deg,#42301f,#271b12); border-radius:20px 0 0 20px; box-shadow:0 40px 50px -26px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.07);}
.book .spiral{z-index:5; background:repeating-linear-gradient(to bottom, transparent 0 12px, #1a120c 12px 17px, #d9d2c3 17px 19px, transparent 19px 30px);}
.book .fcard2{color:var(--ink);} .book .vocab .df{color:var(--ink-soft);} .book .ex .w{color:var(--ink);} .book .prog{color:var(--ink-soft);}
/* closed book at first (centered on its right half), opens when the step shows */
.motion .book:not(.in){transform:translateX(-240px);} .motion .book:not(.in) .fcov{transform:rotateY(0deg);}
.motion .book{transition:transform 1.3s cubic-bezier(.6,0,.2,1) .35s;} .motion .book .fcov{transition:transform 1.4s cubic-bezier(.6,0,.15,1) .35s;}
.motion .book.in .ex .w{animation-delay:calc(var(--i) * .3s + 1.8s);} .motion .book .gem{transition-delay:4s;} .motion .book.in .prog i:nth-of-type(1){transition-delay:2.6s;} .motion .book.in .prog i:nth-of-type(2){transition-delay:2.9s;} .motion .book.in .prog i:nth-of-type(3){transition-delay:3.2s;} .motion .book.in .prog i:nth-of-type(4){transition-delay:3.5s;}
@media (max-width:900px){
  .nbk.big.book{width:340px; height:auto;} .motion .book:not(.in){transform:none;}
  .book .bk-r{position:relative; width:100%; height:auto; padding:12px; border-radius:16px;} .book .pg.r{border-radius:10px; padding:26px 22px 70px;}
  .book .fcov{left:0; width:100%; height:100%; transform:rotateY(-115deg); opacity:0; pointer-events:none;} .book .cb{display:none;} .book .cf{border-radius:16px;} .book .cf b{font-size:46px;} .book .spiral{display:none;}
  .motion .book:not(.in) .fcov{transform:rotateY(0deg); opacity:1;} .motion .book .fcov{transition:transform 1.3s cubic-bezier(.6,0,.15,1) .35s, opacity .3s ease 1.4s;}
}

/* static text version of the pinned chapters (see index.html #textversion) */
.txtver{display:none;}
html.pin .txtver{display:block; position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}