:root{--paper:#f3f8f6;--sheet:#fbfdfb;--card:#f8f3e6;--ink:#0d2b2b;--mut:#3b5a58;--teal:#086f6b;--teal2:#0b8f89;--cover:#0c3a39;--cover2:#145250;--coral:#ff8f76;--coral2:#ffc2b3;--carbon:#0f2a2b;--line:rgba(8,111,107,.3);--sb:264px;
--hand:"Shantell Sans","Comic Sans MS",cursive;--text:Karla,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Courier Prime","Courier New",monospace;
--wob:255px 14px 225px 14px/14px 225px 14px 255px;--wob2:14px 225px 14px 255px/255px 14px 225px 14px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:400 17px/1.62 var(--text);color:var(--ink);background-color:var(--paper);
background-image:linear-gradient(rgba(8,111,107,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(8,111,107,.2) 1px,transparent 1px),linear-gradient(rgba(8,111,107,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(8,111,107,.1) 1px,transparent 1px);
background-size:120px 120px,120px 120px,24px 24px,24px 24px;overflow-wrap:break-word}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--teal);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
.cover :focus-visible{outline-color:#fff}
h1,h2,h3{font-family:var(--hand);line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
code{font-family:var(--mono);font-size:.95em}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--coral);color:var(--ink);padding:12px 18px;font-weight:700;border-radius:8px}
.skip:focus{left:8px}
.hl{background:linear-gradient(100deg,transparent 0,var(--coral2) 2.5%,var(--coral2) 96%,transparent 100%) no-repeat 0 70%/100% 68%;padding:0 .35em;margin:0 -.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:10px 22px;font:700 1.02rem/1.2 var(--hand);color:var(--ink);background:var(--coral);border:2px solid var(--ink);border-radius:var(--wob);box-shadow:3px 4px 0 var(--ink);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:center}
.btn:hover{color:var(--ink);transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.big{min-height:56px;padding:12px 30px;font-size:1.15rem}
.btn.ghost{background:var(--sheet);box-shadow:none;border-style:dashed}
.btn.ghost:hover{background:#fff;box-shadow:none;border-style:solid}
.btn.sm{min-height:44px;padding:8px 16px;font-size:.95rem;box-shadow:2px 3px 0 var(--ink)}
.btn.sm.ghost{box-shadow:none}
.btn[disabled]{opacity:.6;cursor:progress}
.acts2{display:flex;flex-wrap:wrap;gap:14px 16px;margin:0}

/* cover (sidebar) */
.cover{position:fixed;inset:0 auto 0 0;width:var(--sb);z-index:20;display:flex;flex-direction:column;gap:22px;padding:26px 0 20px;color:#eef6f3;background-color:var(--cover);
background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 1px,transparent 1px 4px);box-shadow:inset -14px 0 18px -12px rgba(0,0,0,.5)}
.label{display:flex;flex-direction:column;gap:10px;margin:0 34px 0 20px;padding:16px 16px 14px;background:var(--card);color:var(--ink);text-decoration:none;border-radius:4px;border:1px solid #d9cfb4;box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 0 0 4px var(--card),inset 0 0 0 5px var(--teal);transform:rotate(-1.2deg)}
.label:hover{color:var(--ink);transform:rotate(0)}
.mark{width:36px;height:36px;flex:none}
.label-t{display:block;min-width:0}
.label b{display:block;font:700 1.42rem/1.05 var(--hand)}
.label i{display:block;margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);font:400 .78rem/1.35 var(--mono);color:var(--mut)}
.cover>.btn.cta{order:3;margin:0 34px 0 20px;box-shadow:3px 4px 0 #041b1b}
.cover .nav{order:2;display:flex;flex-direction:column;gap:22px;min-height:0}
.tabs{display:flex;flex-direction:column;gap:7px;padding-left:34px}
.tab{display:flex;align-items:center;min-height:46px;padding:8px 30px 8px 18px;font:500 1.06rem/1.2 var(--hand);color:#eef6f3;background:var(--cover2);border-radius:12px 0 0 12px;text-decoration:none;border:1px solid rgba(255,255,255,.14);border-right:0;transition:padding .15s,background .15s}
.tab:hover{color:#fff;background:#1a6663;padding-left:24px}
.tab[aria-current]{background:var(--paper);color:var(--ink);font-weight:700;margin-left:-14px;border-color:var(--paper);box-shadow:-3px 3px 0 rgba(0,0,0,.28)}
.tab[aria-current] span{background:linear-gradient(var(--coral2),var(--coral2)) no-repeat 0 78%/100% 46%;padding:0 4px}
.slip{order:4;margin:0 34px 0 20px;padding:12px 14px 10px;background:var(--card);color:var(--ink);font:400 .8rem/1.3 var(--mono);border-radius:3px;background-image:repeating-linear-gradient(transparent 0 27px,rgba(8,111,107,.28) 27px 28px);background-position:0 10px;transform:rotate(.8deg);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.slip{background-image:none;padding:6px 14px}
.slip div{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:34px;padding:5px 0;border-top:1px solid rgba(8,111,107,.28)}
.slip div:first-child{border-top:0}
.label .mark rect{fill:#dcebe7}
.slip dt{color:var(--mut);min-width:0}
.slip dd{margin:0;font:700 1rem/1 var(--hand);color:var(--teal);white-space:nowrap}
.ep{margin:0 34px 0 20px;font-size:.72rem;line-height:1.4;color:#b9d6d1;word-break:break-all}
.cover>.btn.cta{margin-top:0}
.cover .nav{order:2}
.cover>.cta{order:3}
.cover{justify-content:flex-start}
.wire{position:absolute;top:0;bottom:0;right:-17px;width:34px;pointer-events:none;z-index:3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='28'%3E%3Crect x='3' y='9' width='9' height='11' rx='3.5' fill='%23041b1b'/%3E%3Crect x='22' y='7' width='9' height='11' rx='3.5' fill='%230d2b2b' fill-opacity='.82'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M7 14.5 27 11' stroke='%23041b1b' stroke-opacity='.35' stroke-width='5'/%3E%3Cpath d='M7 13 27 9.5' stroke='%23c9d6d3' stroke-width='3.2'/%3E%3Cpath d='M7 18 27 14.5' stroke='%23aebfbb' stroke-width='3.2'/%3E%3Cpath d='M9 12.2 25 9.4' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") repeat-y 0 6px}
.burger{display:none}

/* page */
.page{margin-left:var(--sb);padding:0 56px 0 64px;min-width:0}
.runner,main,.foot{max-width:1060px;margin-inline:auto}
.runner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 12px;border-bottom:2px solid var(--ink);font:400 .86rem/1.3 var(--mono);color:var(--mut);position:relative}
.runner::after{content:"";position:absolute;left:0;right:0;bottom:-6px;border-bottom:1px solid var(--ink)}
.runner p{margin:0}
.crumb{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
.crumb a{color:var(--mut);display:inline-flex;align-items:center;min-height:44px}
.crumb span{display:inline-flex;align-items:center;color:var(--ink)}
.crumb span:last-child{font-weight:700}
.folio{display:flex;align-items:center;gap:14px;white-space:nowrap}
.folio b{display:grid;place-items:center;width:44px;height:44px;font:700 1.05rem/1 var(--hand);color:var(--teal);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M25 4C12 3 4 13 5 25s10 20 21 19 19-10 18-22S36 5 22 6' fill='none' stroke='%23086f6b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
main{display:block;padding:44px 0 30px;counter-reset:entry}
section{margin:0}
.entry,.split,.closer,.facts,.keygrid+*{margin-top:76px}

/* headings */
h1{font-size:clamp(2.15rem,4.1vw,3.5rem);font-weight:700;max-width:19ch}
.scrib{display:block;width:min(320px,70%);height:14px;margin:10px 0 22px;fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;overflow:visible}
.scrib path+path{stroke:var(--coral);stroke-width:2}
.lead{font-size:1.2rem;line-height:1.55;color:var(--mut);max-width:60ch}
.top{max-width:860px}
.top .lead:last-child{margin-bottom:0}
.eh{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.eh h2{font-size:clamp(1.6rem,2.6vw,2.15rem);min-width:0}
.num{counter-increment:entry;flex:none;display:grid;place-items:center;width:56px;height:56px;font:700 1.35rem/1 var(--hand);color:var(--teal);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M25 4C12 3 4 13 5 25s10 20 21 19 19-10 18-22S36 5 22 6' fill='none' stroke='%23086f6b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-6deg)}
.num::before{content:counter(entry)}
.eyebrow{font:700 .92rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 18px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:52px;align-items:start}
.hero-t,.hero-c{min-width:0}
.ticks{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:34px}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 12c3 2 5 5 6 8C11 12 16 6 22 2' fill='none' stroke='%23086f6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-c{padding-top:8px}
.note-hand{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;margin:0 28px 6px 0;font:500 1.12rem/1.2 var(--hand);color:var(--teal);transform:rotate(-2deg);text-align:right}
.arrow{width:54px;height:40px;flex:none;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:-14px}

/* code: carbon sheets held by photo corners */
pre.code{position:relative;margin:1.5em 0;padding:0;color:#e6f2ef;background:
linear-gradient(135deg,var(--card) 0 15px,rgba(0,0,0,.35) 15px 17px,transparent 17px) 0 0/40px 40px no-repeat,
linear-gradient(-45deg,var(--card) 0 15px,rgba(0,0,0,.35) 15px 17px,transparent 17px) 100% 100%/40px 40px no-repeat,
linear-gradient(45deg,var(--card) 0 15px,rgba(0,0,0,.35) 15px 17px,transparent 17px) 0 100%/40px 40px no-repeat,var(--carbon);
border-radius:3px;box-shadow:5px 6px 0 rgba(13,43,43,.16);overflow:hidden;max-width:100%}
pre.code code{display:block;overflow-x:auto;padding:54px 24px 26px 26px;font:400 .9rem/1.62 var(--mono);white-space:pre;tab-size:2}
pre.code .k{color:#ffb3a1}
pre.code .s{color:#8fe3d6}
pre.code .c{color:#9dbdb9;font-style:italic}
.copy{position:absolute;top:6px;right:8px;min-height:44px;min-width:64px;padding:6px 14px;font:700 .82rem/1 var(--mono);color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:var(--wob);cursor:pointer}
.copy:hover{background:var(--coral)}
.codebox{position:relative;min-width:0;transform:rotate(.5deg)}
.codebox pre.code{margin:0}
.codetabs{display:flex;gap:4px;padding-left:20px;position:relative;z-index:1}
.codetabs button{min-height:44px;padding:8px 18px;font:700 .9rem/1 var(--mono);color:var(--ink);background:#dfe9e5;border:1.5px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;cursor:pointer}
.codetabs button[aria-selected=true]{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.codetabs button:hover{background:var(--coral2);color:var(--ink)}

/* facts */
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:0;background:var(--sheet);border:2px solid var(--ink);border-radius:var(--wob2)}
.facts div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:20px 16px 18px 20px;border-left:1.5px dashed var(--line);min-width:0}
.facts div:first-child{border-left:0}
.facts dd{margin:0;font:700 1.9rem/1 var(--hand);color:var(--ink)}
.facts div:first-child dd{align-self:flex-start;background:linear-gradient(100deg,transparent,var(--coral2) 4%,var(--coral2) 95%,transparent) no-repeat 0 70%/100% 64%;padding:0 8px;margin-left:-8px}
.facts dt{font:400 .82rem/1.35 var(--mono);color:var(--mut)}
.facts.big{margin-top:40px}
.facts.big dd{font-size:2.5rem}
.facts.big div{padding:28px 18px 24px 24px}
.facts.col{grid-template-columns:1fr;margin-top:0}
.facts.col div{flex-direction:row;justify-content:space-between;align-items:baseline;border-left:0;border-top:1.5px dashed var(--line);padding:14px 20px}
.facts.col div:first-child{border-top:0}
.facts.col dd{font-size:1.4rem;white-space:nowrap}
.sub{font:700 1rem/1.6 var(--mono);margin:18px 0 0}

/* index cards */
.index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 26px}
.index .it{position:relative;min-width:0;padding:46px 22px 20px;background:var(--sheet);border:1px solid #c9dad6;border-radius:4px;box-shadow:3px 4px 0 rgba(13,43,43,.13);background-image:linear-gradient(var(--coral),var(--coral)),repeating-linear-gradient(transparent 0 27px,rgba(8,111,107,.16) 27px 28px);background-size:100% 2px,100% 100%;background-position:0 34px,0 40px;background-repeat:no-repeat,repeat}
.index .it::before{content:"";position:absolute;top:10px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 1px 2px 2px rgba(13,43,43,.4)}
.index .it:nth-child(3n+1){transform:rotate(-.5deg)}
.index .it:nth-child(3n){transform:rotate(.6deg)}
.index h3{font-size:1.22rem;margin-bottom:10px}
.index p{margin:0;color:var(--mut);font-size:1rem;line-height:1.65}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;counter-reset:st}
.steps li{position:relative;min-width:0;padding-top:64px;counter-increment:st}
.steps li::before{content:counter(st);position:absolute;top:0;left:0;display:grid;place-items:center;width:50px;height:50px;font:700 1.5rem/1 var(--hand);color:var(--ink);background:var(--coral);border:2px solid var(--ink);border-radius:50% 46% 52% 44%/46% 52% 44% 50%}
.steps li::after{content:"";position:absolute;top:24px;left:64px;right:-14px;border-top:2.5px dashed var(--teal)}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.25rem;margin-bottom:8px}
.steps p{margin:0;color:var(--mut)}

/* sticky notes */
.stickies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.stickies .it{min-width:0;padding:30px 20px 24px;background:#cdeeea;box-shadow:2px 6px 10px -4px rgba(13,43,43,.4);position:relative;transform:rotate(-1.4deg)}
.stickies .it:nth-child(even){background:#ffd9cf;transform:rotate(1.1deg)}
.stickies .it::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;background:rgba(13,43,43,.07)}
.stickies h3{font-size:1.18rem;margin-bottom:8px}
.stickies p{margin:0;font-size:.98rem;line-height:1.55}

/* split + prose */
.split{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:56px;align-items:start}
.split>*{min-width:0}
.split aside{position:sticky;top:26px;display:grid;gap:26px}
.split.legal{grid-template-columns:minmax(0,760px)}
.split.docs,.split.read,.split.legal{margin-top:50px}
.prose{max-width:740px;font-size:1.06rem;line-height:1.72}
.prose>:first-child{margin-top:0}
.prose h2{font-size:clamp(1.45rem,2.3vw,1.85rem);margin:2em 0 .9em;padding-bottom:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C15 1 28 7 44 4s30-2 44 1 20 0 31-1' fill='none' stroke='%23086f6b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/130px 8px no-repeat}
.prose h3{font-size:1.22rem;margin:1.6em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--teal);font-weight:700}
.prose strong{background:linear-gradient(var(--coral2),var(--coral2)) no-repeat 0 82%/100% 38%}
.prose :not(pre)>code,.libcard code,.ep2 code{background:#dcebe7;padding:.08em .4em;border-radius:4px;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.5em 0;font-size:.98rem;background:var(--sheet);border:2px solid var(--ink);border-radius:4px}
.prose th,.prose td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);border-right:1px dashed var(--line);vertical-align:top}
.prose th{font:700 .85rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;background:#dcebe7;border-bottom:2px solid var(--ink)}
.prose tr:last-child td{border-bottom:0}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:4px solid var(--coral);font-family:var(--hand);color:var(--mut)}
.longread .prose{font-size:1.12rem;line-height:1.78;max-width:700px}
.upd,.ep2{font:400 .9rem/1.5 var(--mono);color:var(--mut);margin:18px 0 0}
.ep2{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ep2 span{font-weight:700;color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--wob);padding:2px 12px;background:var(--coral2)}

/* library card (side, closer, form) */
.libcard{background:var(--card);border:1px solid #d9cfb4;border-radius:5px;padding:26px 24px 24px;box-shadow:4px 5px 0 rgba(13,43,43,.16);position:relative;background-image:linear-gradient(var(--teal),var(--teal));background-size:100% 3px;background-position:0 12px;background-repeat:no-repeat}
.side{transform:rotate(.7deg)}
.side-h{font:700 1.3rem/1.15 var(--hand);margin:8px 0 8px}
.side p{color:var(--mut);font-size:.98rem}
.side .btn{width:100%}
.closer .libcard{padding:48px 44px 44px;max-width:820px;transform:rotate(-.4deg)}
.closer h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:12px}
.closer p{color:var(--mut);font-size:1.1rem;max-width:56ch}
.closer .acts2{margin-top:26px}

/* toc */
.toc{padding:4px 0 4px 20px;border-left:2px solid var(--ink)}
.toc-h{font:700 .82rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:var(--mut)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:tc}
.toc li{counter-increment:tc}
.toc a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:9px 0;font:500 1rem/1.3 var(--hand);color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--line)}
.toc a::before{content:counter(tc);font:700 .82rem/1 var(--mono);color:var(--teal);flex:none;min-width:1.2em}
.toc a:hover{color:var(--teal)}

/* takeaways */
.takeaways{margin:0 0 48px;padding:26px 28px 14px;max-width:700px;background:var(--sheet);border:2px solid var(--ink);border-radius:var(--wob2);position:relative}
.takeaways h2{display:inline-block;font-size:1.3rem;background:var(--coral2);padding:2px 12px;transform:rotate(-1.5deg);margin:-44px 0 0;position:absolute;top:26px;left:20px;border:1.5px solid var(--ink)}
.takeaways .ticks{margin:14px 0 12px;gap:12px}

/* faq */
.qa{max-width:860px;border-top:2px solid var(--ink)}
.qa details{border-bottom:1.5px dashed var(--teal)}
.qa summary{position:relative;list-style:none;cursor:pointer;min-height:56px;padding:16px 52px 16px 2px;font:700 1.16rem/1.3 var(--hand)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:12px;width:32px;height:32px;display:grid;place-items:center;font:700 1.4rem/1 var(--hand);color:var(--teal);border:2px solid var(--teal);border-radius:50% 44% 52% 46%/46% 52% 44% 50%;transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg);background:var(--coral2);color:var(--ink);border-color:var(--ink)}
.qa summary:hover{color:var(--teal)}
.qa p{margin:0 0 20px;padding:0 52px 0 2px;color:var(--mut);max-width:72ch}

/* key page */
.keygrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);grid-template-areas:"top form" "ben form";gap:30px 60px;align-items:start}
.keygrid .top{grid-area:top}
.keyform{grid-area:form;min-width:0}
.keyben{grid-area:ben;min-width:0}
.keygrid h1{font-size:clamp(2.1rem,3.6vw,3.1rem)}
.ben{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--ink)}
.ben li{position:relative;padding:14px 0 14px 38px;border-bottom:1.5px dashed var(--line)}
.ben li::before{content:"";position:absolute;left:2px;top:17px;width:24px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 12c3 2 5 5 6 8C11 12 16 6 22 2' fill='none' stroke='%23086f6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ben b{display:block;font:700 1.1rem/1.25 var(--hand)}
.ben span{display:block;color:var(--mut);font-size:.98rem;line-height:1.5;margin-top:3px}

.form{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:0 28px 26px;box-shadow:8px 9px 0 var(--teal);transform:rotate(.6deg)}
.form::before{content:"";position:absolute;top:-13px;left:50%;width:120px;height:26px;margin-left:-60px;background:rgba(255,143,118,.82);border-left:2px dotted rgba(13,43,43,.35);border-right:2px dotted rgba(13,43,43,.35);transform:rotate(-2deg)}
.tabs2{display:flex;gap:0;margin:0 -28px 24px;padding:26px 28px 0;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(transparent 0 27px,rgba(8,111,107,.2) 27px 28px)}
.tabs2 button{flex:1;min-height:48px;padding:10px 8px;font:700 1rem/1.2 var(--hand);color:var(--mut);background:transparent;border:2px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;cursor:pointer;margin-bottom:-2px}
.tabs2 button[aria-selected=true]{color:var(--ink);background:var(--card);border-color:var(--ink);box-shadow:0 2px 0 var(--card)}
.tabs2 button:hover{color:var(--ink)}
.msg{font:700 .95rem/1.4 var(--text)}
.msg:empty{display:none}
.msg.err{margin:0 0 18px;padding:12px 14px;color:#7a1408;background:#ffe3dc;border:2px solid #b3260f;border-radius:var(--wob)}
.row{margin-bottom:18px}
.row label,.calc label{display:block;font:700 .82rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;color:var(--mut)}
.row input,.calc input{width:100%;min-height:52px;padding:10px 14px;font:400 1.08rem/1.3 var(--mono);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:5px;box-shadow:inset 0 -3px 0 #dcebe7}
.row input:focus,.calc input:focus{outline:3px solid var(--coral);outline-offset:2px;border-color:var(--teal)}
.note{font:400 .84rem/1.45 var(--mono);color:var(--mut);margin:8px 0 0}
.form .btn[data-submit]{width:100%;min-height:58px;font-size:1.12rem;margin-top:4px}
.form [data-note]{margin-top:16px;text-align:center}
.keyout{display:none;padding-top:28px}
.keyout.on{display:block}
.keyout h3{font-size:1.5rem;margin-bottom:14px}
.keybox{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:var(--carbon);color:#e6f2ef;border-radius:4px}
.keybox span{flex:1;min-width:0;font:700 .98rem/1.4 var(--mono);word-break:break-all;color:#8fe3d6}
.keyout>p{margin:14px 0;line-height:1.9;font-size:.98rem}
.keyout code{background:#e9e0c9;padding:.1em .4em;border-radius:4px;overflow-wrap:anywhere}
.mut{color:var(--mut)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* calculator */
.worksheet{max-width:860px;background:var(--sheet);border:2px solid var(--ink);border-radius:var(--wob2);padding:30px 30px 28px;box-shadow:6px 7px 0 rgba(13,43,43,.14)}
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:end}
.calc>div{min-width:0}
.calc output{display:flex;align-items:center;min-height:52px;font:700 2.3rem/1 var(--hand);color:var(--ink);padding:0 12px;background:linear-gradient(100deg,transparent,var(--coral2) 3%,var(--coral2) 96%,transparent) no-repeat 0 60%/100% 74%}
.index.three .it{padding-bottom:24px}

/* 404 */
.nf{position:relative;padding:20px 0 60px}
.nf-n{font:700 clamp(5rem,16vw,11rem)/.9 var(--hand);color:transparent;-webkit-text-stroke:2.5px var(--teal);margin:0 0 10px}
.nf .acts2{margin-top:30px}

/* footer */
.foot{margin-top:70px;padding:28px 0 44px;border-top:2px solid var(--ink);position:relative;font:400 .9rem/1.5 var(--mono)}
.foot::before{content:"";position:absolute;left:0;right:0;top:4px;border-top:1px solid var(--ink)}
.foot-b{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 1.2rem/1 var(--hand)}
.foot-b .mark rect{fill:#dcebe7}
.foot ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.foot li a:hover{color:var(--teal)}
.legal-n{margin:0;color:var(--mut);max-width:80ch}

/* layout steps */
@media (max-height:760px) and (min-width:1000px){.cover{gap:14px;padding-top:16px}.slip{display:none}.label i{display:none}}
@media (max-height:600px) and (min-width:1000px){.ep{display:none}.tab{min-height:44px}}
@media (max-width:1300px){
.hero{grid-template-columns:minmax(0,1fr);gap:34px}
.hero-c{max-width:760px}
.split{grid-template-columns:minmax(0,1fr) 250px;gap:36px}
.stickies{grid-template-columns:repeat(2,minmax(0,1fr))}
.page{padding:0 40px 0 52px}
.keygrid{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:26px 40px}
}
@media (max-width:1180px){
.index{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts div:nth-child(4){border-left:0}
.facts div:nth-child(n+4){border-top:1.5px dashed var(--line)}
.facts.col div:nth-child(n){border-left:0}
.split,.split.docs,.split.read{grid-template-columns:minmax(0,1fr)}
.split aside{position:static}
.split.docs aside,.split.read aside{order:-1}
.split.docs .side,.split.read .side{display:none}
}
@media (max-width:999px){
html{scroll-padding-top:100px}
.cover{position:sticky;top:0;inset:auto;width:auto;flex-direction:row;align-items:center;gap:10px;padding:8px 12px 8px 14px;box-shadow:none}
.label{flex:1;min-width:0;flex-direction:row;align-items:center;gap:10px;margin:0;padding:0;background:none;border:0;box-shadow:none;color:#fff;transform:none;min-height:48px}
.label:hover{color:#fff}
.label b{font-size:1.02rem;line-height:1.1}
.label i{display:none}
.mark{width:34px;height:34px}
.label .mark rect{fill:#f4efe2}
.cover>.btn.cta{order:0;margin:0;min-height:44px;padding:6px 14px;font-size:.92rem;box-shadow:2px 3px 0 #041b1b;white-space:nowrap}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 11px;background:transparent;border:1.5px solid rgba(255,255,255,.5);border-radius:10px;cursor:pointer;flex:none}
.burger span{display:block;height:2.5px;background:#fff;border-radius:2px}
.cover .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:6;padding:18px 16px 22px;gap:18px;background:var(--cover);border-top:1px solid rgba(255,255,255,.18);box-shadow:0 14px 24px rgba(0,0,0,.35);max-height:calc(100vh - 66px);overflow-y:auto}
.cover .nav.open{display:flex}
.tabs{padding:0;gap:8px}
.tab,.tab[aria-current]{margin:0;border-radius:10px;border:1px solid rgba(255,255,255,.14);min-height:48px;box-shadow:none}
.slip,.ep{margin:0;transform:none}
.wire{top:100%;bottom:auto;left:0;right:0;width:auto;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Crect width='26' height='7' fill='%230c3a39'/%3E%3Crect x='8' y='11' width='10' height='8' rx='3.5' fill='%230d2b2b' fill-opacity='.8'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M11 3 13.5 15' stroke='%23c9d6d3' stroke-width='2.8'/%3E%3Cpath d='M15.5 3 18 15' stroke='%23aebfbb' stroke-width='2.8'/%3E%3C/g%3E%3C/svg%3E") repeat-x 4px 0}
.page{margin-left:0;padding:22px 28px 0}
.runner{padding-top:8px}
main{padding-top:34px}
.keygrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "form" "ben";gap:28px}
.keyform{max-width:520px}
}
@media (max-width:700px){
body{font-size:16.5px}
.page{padding:22px 18px 0}
.runner{font-size:.78rem}
.folio time{display:none}
.entry,.split,.closer,.facts,.keygrid+*{margin-top:56px}
.eh{gap:12px;margin-bottom:22px}
.num{width:46px;height:46px;font-size:1.15rem}
.lead{font-size:1.08rem}
.index,.steps,.stickies,.calc{grid-template-columns:minmax(0,1fr)}
.index .it,.stickies .it,.index .it:nth-child(n),.stickies .it:nth-child(n),.codebox,.form,.side,.closer .libcard{transform:none}
.steps{gap:26px}
.steps li{padding:0 0 0 66px;min-height:50px}
.steps li::after{top:56px;left:24px;right:auto;bottom:-22px;border-top:0;border-left:2.5px dashed var(--teal)}
.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts div:nth-child(n){border-left:0;border-top:1.5px dashed var(--line);padding:16px 14px}
.facts div:nth-child(even){border-left:1.5px dashed var(--line)}
.facts div:nth-child(-n+2){border-top:0}
.facts div:last-child:nth-child(odd){grid-column:1/-1}
.facts dd,.facts.big dd{font-size:1.65rem}
.facts.col{grid-template-columns:1fr}
.facts.col div:nth-child(n){border-left:0;border-top:1.5px dashed var(--line)}
.facts.col div:first-child{border-top:0}
.note-hand{margin-right:10px;font-size:1rem}
pre.code code{padding:54px 16px 22px 18px;font-size:.82rem}
.codetabs{padding-left:10px}
.codetabs button{padding:8px 13px}
.form{padding:0 18px 22px;box-shadow:5px 6px 0 var(--teal)}
.tabs2{margin:0 -18px 20px;padding:24px 18px 0}
.closer .libcard{padding:36px 22px 28px}
.worksheet{padding:22px 18px}
.qa summary{font-size:1.06rem}
.qa p{padding-right:8px}
.takeaways{padding:26px 18px 10px}
.acts2 .btn{flex:1 1 auto}
.prose,.longread .prose{font-size:1.03rem}
}
@media (max-width:380px){.label b{font-size:.92rem}.cover>.btn.cta{padding:6px 10px;font-size:.86rem}.mark{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.cover{display:none}.page{margin:0}}