/* Now You Ask, v2: first day of school. Crayons, handwriting paper, cursive, gold stars.
   Light mode is a classroom table; dark mode is a chalkboard. Words stay adult; the look carries the nostalgia. */
:root{
 --paper:#FFFBEF;--card:#FFFFFF;--ink:#1F2340;--muted:#4F5372;--line:#D9D3BF;
 --red:#E5383B;--orange:#F48C06;--yellow:#FFC300;--green:#2A9D5C;--blue:#2F6FDE;--purple:#8E5BD8;
 --act:#2F6FDE;--actink:#FFFFFF;--soft:#EAF1FF;--rule:#B9CDF2;--margin:#F2A3A3;--ok:#1E7A4C;--star:#F5B700;
 --head:'Fredoka',Verdana,sans-serif;--body:'Andika',Verdana,sans-serif;--script:'Playwrite US Trad',cursive;
 --wob:22px 8px 24px 10px/10px 24px 8px 22px;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --paper:#1F2C25;--card:#283830;--ink:#F3F1E6;--muted:#C9CFC1;--line:#4A5E52;
 --act:#7FB0FF;--actink:#13201A;--soft:#2F4239;--rule:#47604F;--margin:#7A4A47;--ok:#7FDCA4;color-scheme:dark}}
:root[data-theme="dark"]{
 --paper:#1F2C25;--card:#283830;--ink:#F3F1E6;--muted:#C9CFC1;--line:#4A5E52;
 --act:#7FB0FF;--actink:#13201A;--soft:#2F4239;--rule:#47604F;--margin:#7A4A47;--ok:#7FDCA4;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:20px/1.6 var(--body)}
a{color:var(--act)}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0 0 .4em;font-weight:700}
h1{font-size:clamp(46px,8vw,80px)}
h2{font-size:clamp(32px,5vw,44px)}
h3{font-size:25px;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
.script{font-family:var(--script);font-weight:400}

/* header */
header.top{display:flex;align-items:center;gap:12px;padding:18px 0}
.brand{white-space:nowrap;display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:var(--script);font-size:24px;line-height:1.2}
.brand svg{width:64px;height:16px;flex:none}
.top .sp{flex:1}
.top a.small{font:600 18px var(--head);text-decoration:none}

/* crayon scribble underline */
.scribble{background:no-repeat left 92%/100% .5em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C60 4 110 16 160 9 S250 6 297 11 M8 16 C70 9 140 18 200 12 S270 11 292 14' fill='none' stroke='%23FFC300' stroke-width='5' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");padding-bottom:.05em}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:20px 0 40px}
.lede{font-size:23px;max-width:34em}
.sheet{position:relative;background:#FFFEF8;border-radius:6px;box-shadow:0 2px 0 #E6DFC7,0 14px 30px rgba(31,35,64,.14);padding:10px 8px 24px;transform:rotate(-1.2deg);color:#1F2340}
.sheet:before{content:"";position:absolute;left:42px;top:0;bottom:0;width:2px;background:#F2A3A3}
.sheet svg{display:block;width:100%;height:auto}
.sheet .crayon{position:absolute;width:62%;right:-6%;bottom:-26px;transform:rotate(-14deg);filter:drop-shadow(0 6px 6px rgba(0,0,0,.18))}
.sheet .star{position:absolute;right:-14px;top:-18px;width:64px;transform:rotate(12deg)}

/* crayon buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 44px 12px 26px;border:0;border-radius:14px 0 0 14px;
 clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);
 background:var(--c,var(--yellow));color:var(--ci,#1F2340);font:600 19px var(--head);cursor:pointer;text-decoration:none;
 background-image:linear-gradient(90deg,transparent 12px,rgba(0,0,0,.22) 12px 15px,transparent 15px calc(100% - 46px),rgba(0,0,0,.22) calc(100% - 46px) calc(100% - 43px),transparent 0),
  linear-gradient(transparent 0 4px,rgba(255,255,255,.35) 4px 7px,transparent 7px)}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px)}
.btn.go{--c:var(--blue);--ci:#FFFFFF}
.btn.c-red{--c:var(--red);--ci:#FFFFFF}
.btn.c-green{--c:var(--green);--ci:#FFFFFF}
.btn.c-orange{--c:var(--orange)}
.btn.c-purple{--c:var(--purple);--ci:#FFFFFF}
.btn:focus-visible{clip-path:none;outline:4px solid var(--red);outline-offset:3px;border-radius:14px}
.seg button:focus-visible,input:focus-visible,summary:focus-visible,.check:focus-visible{outline:4px solid var(--red);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 10px}
.note{font-size:17px;color:var(--muted)}

/* sections */
section{padding:44px 0 40px;position:relative}
section:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 14' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C120 2 240 12 360 7 S600 4 720 8 S900 11 996 6' fill='none' stroke='%23C9C2AA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.step{background:var(--card);border:3px solid var(--ink);border-radius:var(--wob);padding:20px}
.step b.n{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;font:700 26px var(--head);color:#1F2340;margin-bottom:10px;
 background:no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M26 4c13 0 22 9 22 21s-9 23-23 23S4 38 5 25 14 3 28 5' fill='%23FFC300' stroke='%23F48C06' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.step:nth-child(2) b.n{filter:hue-rotate(160deg) saturate(1.3)}
.step:nth-child(3) b.n{filter:hue-rotate(260deg) saturate(1.2)}
details.first{background:var(--card);border:3px dashed var(--line);border-radius:var(--wob);padding:18px 22px;margin-top:24px}
details summary{cursor:pointer;font:600 22px var(--head);color:var(--act)}
details[open] summary{margin-bottom:14px}
details.first ol{margin:0 0 14px 26px;padding:0}
details.first li{margin:6px 0}

/* door switch */
.seg{display:inline-flex;border:3px solid var(--ink);border-radius:var(--wob);overflow:hidden;margin:8px 0 24px;max-width:100%}
.seg button{border:0;background:var(--card);color:var(--ink);font:600 19px var(--head);padding:14px 22px;cursor:pointer;min-height:56px}
.seg button[aria-pressed="true"]{background:var(--yellow);color:#1F2340}

/* practice cards: a worksheet */
.card{position:relative;background:var(--card);border:3px solid var(--ink);border-radius:var(--wob);padding:28px;margin:0 0 34px}
.card .meta{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.num{font-family:var(--script);font-size:20px;line-height:1.4;padding:4px 16px 6px;border-radius:999px;background:var(--tagc,var(--yellow));color:#1F2340}
.card:nth-of-type(6n+1){--tagc:#FFD95A}.card:nth-of-type(6n+2){--tagc:#A7D8B8}.card:nth-of-type(6n+3){--tagc:#B9CFFF}
.card:nth-of-type(6n+4){--tagc:#FFC08A}.card:nth-of-type(6n+5){--tagc:#D7C2FF}.card:nth-of-type(6n){--tagc:#FFB3B3}
.mins{font:600 16px var(--head);color:var(--muted)}
.tried{margin-left:auto;font:600 16px var(--head);color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.tried:before{content:"";width:26px;height:26px;background:var(--star);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.learn{font-size:21px}
label.f{display:block;font:600 19px var(--head);margin:16px 0 6px}
input.t{width:100%;font:20px var(--body);padding:14px 16px;border-radius:12px;border:3px solid var(--line);background:var(--paper);color:var(--ink)}
.recipe{position:relative;margin:22px 0 16px;border:2px solid var(--line);border-radius:6px;background:#FFFEF8 repeating-linear-gradient(transparent 0 35px,#B9CDF2 35px 36px);
 padding:16px 18px 14px 40px;white-space:pre-wrap;line-height:36px;font-size:19px;color:#1F2340;box-shadow:0 2px 0 #E6DFC7}
.recipe:before{content:"";position:absolute;left:26px;top:0;bottom:0;width:2px;background:#F2A3A3}
.recipe .lab{position:absolute;top:-17px;left:16px;background:var(--card);color:var(--ink);padding:0 10px;font-family:var(--script);font-size:16px;line-height:30px}
.recipe mark{background:#FFE58A;color:#1F2340;border-radius:4px;padding:0 3px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.cols h4{font:600 22px var(--head);margin:0 0 6px}
.cols ul{margin:0;padding-left:24px}
.cols li{margin:6px 0}
.say li{list-style:none;margin-left:-24px;font-family:var(--script);font-size:19px;line-height:1.7}
.tip{background:var(--soft);border:2px dashed var(--act);border-radius:14px;padding:12px 16px;font-size:18px;margin:16px 0 0}
.huddle{margin-top:18px;background:var(--soft);border-radius:var(--wob);padding:16px 18px}
.huddle b{font-family:var(--head)}
.check{display:flex;align-items:center;gap:14px;margin-top:20px;font:600 20px var(--head);cursor:pointer;min-height:48px}
.check .box{width:40px;height:40px;border:3px dashed var(--muted);border-radius:50%;display:inline-flex;flex:none}
.check.on .box{border:0;border-radius:0;background:var(--star);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:rotate(-8deg) scale(1.15)}
.copied{color:var(--ok);font:600 17px var(--head);min-height:1.4em}

/* locked */
.locked{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}
.lock{border:3px dashed var(--line);border-radius:var(--wob);padding:16px 18px;background:var(--card)}
.lock .num{background:var(--line);color:var(--ink)}
.lock h3{font-size:22px;margin:12px 0 4px}
.lock p{margin:0;color:var(--muted);font-size:18px}
.join{background:#23312A;color:#F3F1E6;border-radius:var(--wob);padding:30px;border:10px solid #A8794B;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.join h2{color:#F3F1E6;font-family:var(--script);font-weight:400;font-size:clamp(28px,4.4vw,40px);line-height:1.4}
.join .note{color:#F3F1E6;opacity:.85}
.join .btn[aria-disabled="true"]{opacity:.8;cursor:default}
.weekly{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.weekly div{background:var(--card);border:3px solid var(--ink);border-radius:var(--wob);padding:20px}
.safe{background:var(--card);border:3px solid var(--red);border-radius:var(--wob);padding:20px 24px}
footer{padding:36px 0 60px;color:var(--muted);font-size:17px;position:relative}
footer:before{content:"";display:block;height:14px;margin-bottom:24px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 14' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C120 2 240 12 360 7 S600 4 720 8 S900 11 996 6' fill='none' stroke='%23C9C2AA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.crayonrow{display:flex;gap:6px;margin:6px 0 0}
.crayonrow svg{width:16.66%;height:auto}

@media (max-width:760px){
 body{font-size:19px}
 .hero{grid-template-columns:1fr;gap:34px;padding-top:6px}
 .lede{font-size:21px}
 .steps,.weekly,.locked,.cols{grid-template-columns:1fr}
 .card{padding:20px}
 .seg{display:flex}.seg button{flex:1;padding:12px 10px;font-size:17px}
 .recipe{font-size:18px}
 .btns .btn{flex:1 1 100%}
 .sheet{margin:0 14px 34px}
 .brand{font-size:20px}.brand svg{width:48px}
 .top a.small{font-size:16px}
 .hero{padding-bottom:20px}
}

/* explanation sections */
.notes4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.sticky{position:relative;margin:0;padding:26px 18px 20px;font-size:20px;line-height:1.45;color:#1F2340;box-shadow:0 8px 14px rgba(31,35,64,.14);min-height:150px}
.sticky:before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);transform:rotate(-3deg)}
.n1{background:#FFE98A;transform:rotate(-2deg)}.n2{background:#FFC9C9;transform:rotate(1.5deg)}.n3{background:#C9DCFF;transform:rotate(-1deg)}.n4{background:#C8EBCF;transform:rotate(2deg)}
.who2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.whocard{background:var(--card);border:3px solid var(--ink);border-radius:var(--wob);padding:24px;border-top-width:12px}
.wc-blue{border-top-color:var(--blue)}.wc-green{border-top-color:var(--green)}
.whocard h3{font-size:26px;margin:14px 0 10px}
.whocard .btn{margin-top:6px}
ul.stars{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
ul.stars li{position:relative;padding-left:40px;font-size:20px}
ul.stars li:before{content:"";position:absolute;left:0;top:2px;width:28px;height:28px;background:var(--star);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.isnt{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.isnt div{background:var(--card);border:3px dashed var(--line);border-radius:var(--wob);padding:18px}
.isnt h3{font-size:22px;color:var(--red)}
.isnt p{margin:0;font-size:18px}
.faq details{background:var(--card);border:3px solid var(--line);border-radius:var(--wob);padding:16px 20px;margin:0 0 12px}
.faq summary{font-size:21px;color:var(--ink)}
.faq summary:after{content:" +";color:var(--act)}
.faq details[open] summary:after{content:" \2212"}
.faq p{margin:0}
.whynote{background:#FFFEF8 repeating-linear-gradient(transparent 0 35px,#B9CDF2 35px 36px);color:#1F2340;border-radius:6px;padding:18px 24px 16px 44px;position:relative;line-height:36px;max-width:720px;box-shadow:0 10px 24px rgba(31,35,64,.12);transform:rotate(-.6deg)}
.whynote:before{content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;background:#F2A3A3}
.whynote p{margin:0 0 4px}
.sig{font-size:26px}
.usebox{background:var(--card);border:3px solid var(--ink);border-radius:var(--wob);padding:24px 26px;margin:0 0 30px}
.usebox ul.stars{grid-template-columns:1fr}
@media (max-width:900px){.notes4,.isnt{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.notes4,.isnt,.who2,ul.stars{grid-template-columns:1fr}.sticky{min-height:0}.whocard h3{font-size:23px}}

.whocard .num{display:inline-block;margin:0}
.wc-blue .num{background:#B9CFFF}.wc-green .num{background:#A7D8B8}