/* LearnWithUs: a notebook on a workbench.
   Colour has one meaning everywhere, as pens: blue = data, amber marker = the part that learns
   or changes, green = right, red = mistake. */
:root{
  --mat:#17332F; --paper:#FCFCF8; --ink:#1B1E2E; --pencil:#5C6072; --rule:#AEB3C6;
  --data:#2456E6; --data-s:#DCE6FF; --model:#F2A20C; --hl:#FFE566; --good:#12A56B; --good-s:#BFF0D4; --err:#E5384F; --err-s:#FFC9CF;
  --pop:cubic-bezier(.2,.9,.3,1.3); --out:cubic-bezier(.2,.7,.2,1);
  --body:'Newsreader',Georgia,serif; --hand:'Caveat',cursive; --mono:'JetBrains Mono',ui-monospace,monospace;
  --wob:255px 15px 225px 15px/15px 225px 15px 255px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:400 17px/1.5 var(--body);color:var(--ink);overflow-x:hidden;display:flex;flex-direction:column;
  background:var(--mat) linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/100% 48px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/48px 100%;background-color:var(--mat)}
h1,h2,h3{font-family:var(--hand);font-weight:700;line-height:1;margin:0}
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px}
p{margin:0} button{font:inherit;color:inherit} code{font:400 .9em var(--mono);background:rgba(36,86,230,.08);padding:1px 5px;border-radius:4px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--data);outline-offset:2px}
.eyebrow{font:700 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil)}
.hand{font:600 22px/1.2 var(--hand);color:var(--data)} .hand.grey{color:var(--pencil)}
.k{font-weight:600;white-space:nowrap} .k.d{color:var(--data)} .k.e{color:var(--err)} .k.g{color:var(--good)}
.k.m{background:linear-gradient(100deg,transparent 2%,var(--hl) 5% 95%,transparent 98%);padding:0 5px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 21px/1 var(--hand);padding:7px 17px 8px;cursor:pointer;
  background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:var(--wob);box-shadow:2px 3px 0 rgba(27,30,46,.22);
  transition:transform .12s var(--out),box-shadow .12s var(--out)}
.btn:hover{transform:translateY(-1px) rotate(-.6deg);box-shadow:3px 5px 0 rgba(27,30,46,.22)}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 rgba(27,30,46,.22)}
.btn.pri{background:var(--hl)} .btn.go{background:var(--good-s)}
.btn.txt{border-color:transparent;background:none;box-shadow:none;color:var(--pencil);text-decoration:underline;text-underline-offset:3px}
.btn.sm{font-size:18px;padding:4px 12px 5px}
.btn[disabled]{opacity:.35;pointer-events:none}
.viki{width:50px;height:50px;flex:none;overflow:visible}
.viki.hop{animation:hop .5s var(--pop)}
@keyframes hop{40%{transform:translateY(-10px) rotate(-6deg)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes dash{to{stroke-dashoffset:-28}}
@keyframes stampin{from{opacity:0;transform:rotate(-16deg) scale(2.4)}}
@keyframes spin{to{transform:rotate(360deg)}}
.shake{animation:shake .35s} .popin{animation:pop .35s var(--pop)}

/* ---------- desk furniture ---------- */
.top{display:flex;align-items:flex-end;gap:12px;padding:10px 20px 0;color:#fff;width:min(1640px,97%);margin:0 auto 9px;position:relative;z-index:6}
.logo{display:flex;align-items:center;gap:8px;font:700 32px/1 var(--hand);margin-right:auto;padding-bottom:8px}
/* the LearnWithUs wordmark: "Learn" lettered by hand, a small serif "with", and "Us" on a highlighter stroke */
.wm{display:inline-flex;align-items:baseline;gap:.08em;white-space:nowrap;letter-spacing:.01em}
.wm-l{font:700 1em/1 var(--hand)}
.wm-w{font:italic 400 .5em/1 var(--body);opacity:.8;margin:0 .06em;transform:translateY(-.25em)}
.wm-u{position:relative;font:700 1.08em/1 var(--hand);color:var(--ink);padding:0 .14em .02em;transform:rotate(-4deg);display:inline-block}
.wm-u::before{content:"";position:absolute;inset:.12em -.04em .02em;background:var(--hl);border-radius:.28em .12em .32em .1em;transform:skewX(-8deg);z-index:-1;
  box-shadow:inset 0 -.12em 0 var(--model)}
.wm-u{isolation:isolate}
.wm-big{font-size:46px;margin:6px 0 4px} .wm-big .wm{justify-content:center}
.tabs{display:flex;gap:4px;align-items:flex-end;min-width:0}
.tabs button{border:0;cursor:pointer;font:700 20px/1 var(--hand);color:var(--ink);padding:8px 14px 10px;border-radius:10px 10px 0 0;background:var(--c,#C9EBFF);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;
  transform:translateY(5px);transition:transform .25s var(--pop);box-shadow:0 -2px 6px rgba(0,0,0,.25)}
.tabs button:hover{transform:translateY(1px)} .tabs button.on{transform:none;padding-top:13px}
.acct{position:relative;margin-bottom:8px}
.avatar{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;font:700 15px var(--mono);background:var(--hl);color:var(--ink)}
.menu{position:absolute;right:0;top:44px;background:#FFF3A3;color:var(--ink);padding:12px 14px;box-shadow:3px 6px 14px rgba(0,0,0,.35);transform:rotate(1deg);white-space:nowrap;z-index:400}
.menu p{font-size:14px;margin-bottom:8px}
.foot{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;color:#fff}
.foot{width:min(1640px,97%);margin:0 auto;justify-content:space-between;padding:10px 4px}
.foot .btn{font-size:20px;padding:5px 14px 6px;max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.foot .btn[hidden]{display:none} .foot .fside{flex:1;display:flex} .foot .fside.r{justify-content:flex-end}
.trail{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.trail .where{font:600 21px/1 var(--hand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.parts{display:flex;gap:6px}
.parts button{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:none;color:#fff;font:700 12px var(--mono);cursor:pointer;padding:0;transition:transform .15s var(--pop),background .2s}
.parts button:hover{transform:scale(1.18)} .parts button.done{background:var(--good);border-color:var(--good)}
.parts button.now{background:var(--hl);border-color:var(--hl);color:var(--ink);transform:scale(1.18)}
.parts button.end{border-radius:6px;width:auto;padding:0 7px}

/* ---------- screens: sign in, then the library, then a book ---------- */
.scr{display:none;flex:1;color:#fff;width:min(1240px,94%);margin:0 auto;padding:10px 0 40px;animation:rise .45s var(--out)}
body[data-screen=auth] #authScr{display:flex;align-items:center;justify-content:center}
body[data-screen=lib] #libScr{display:block}
body:not([data-screen=book]) :is(.stage,.foot,.tabs,#libT,#sideT){display:none!important}
body[data-screen=auth] .acct,body[data-screen=load] .acct{display:none}
.authcard{text-align:center;transform:rotate(-1deg)} .authcard .viki{width:64px;height:64px}
.ssomsg{font:400 16px/1.45 var(--body);margin:6px 0 14px} #sso .btn{width:100%;text-decoration:none}
#libHi{font-size:clamp(34px,4.4vw,54px);margin-top:16px} .libsub{opacity:.75;margin:6px 0 26px}
.shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:34px 30px}
.bk{position:relative;aspect-ratio:3/4;border:0;padding:0;cursor:pointer;color:#fff;text-align:center;border-radius:4px 12px 12px 4px;
  background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 7%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 62%,#000));
  box-shadow:0 14px 28px rgba(0,0,0,.45),inset -3px 0 0 rgba(255,255,255,.14);transition:transform .25s var(--pop),box-shadow .25s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.bk:not(.wait):hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 24px 36px rgba(0,0,0,.5),inset -3px 0 0 rgba(255,255,255,.14)}
.bk-band{position:absolute;top:0;bottom:0;right:16%;width:9px;background:rgba(0,0,0,.4);box-shadow:inset 2px 0 2px rgba(255,255,255,.14)}
.bk-label{position:relative;background:var(--paper);color:var(--ink);padding:12px 12px 10px;width:78%;transform:rotate(-2deg);border-radius:4px;box-shadow:0 5px 12px rgba(0,0,0,.35)}
.bk-label b{display:block;font:700 27px/1 var(--hand)} .bk-label small{display:block;font:400 13px/1.25 var(--body);color:var(--pencil);margin-top:6px}
.bk-foot{position:relative;font:700 21px/1 var(--hand)}
.bk .viki{width:44px;height:44px;position:relative}
.bk.wait{cursor:default;filter:saturate(.45) brightness(.82)}
.bk.wait .bk-foot{background:var(--hl);color:var(--ink);padding:4px 14px 5px;transform:rotate(-3deg);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.bktitle{font-size:58px!important;letter-spacing:.01em!important;line-height:.95!important}

/* ---------- index sidebar: the whole book at a glance, and where you are in it ---------- */
.idx{margin-bottom:8px;white-space:nowrap}
.side{position:fixed;left:0;top:0;bottom:0;width:310px;z-index:350;overflow-y:auto;padding:14px 12px 30px;color:var(--ink);
  background:var(--paper) linear-gradient(rgba(36,86,230,.085) 1px,transparent 1px) 0 0/100% 22px;box-shadow:6px 0 24px rgba(0,0,0,.45);
  transform:translateX(-105%);visibility:hidden;transition:transform .35s var(--out),visibility 0s .35s}
body.side-open.reading .side{transform:none;visibility:visible;transition:transform .35s var(--out)}
body{transition:padding-left .35s var(--out)}
@media (min-width:1100px){body.side-open.reading{padding-left:310px}}
/* the index scrolls with a pencil: eraser on top, point at the bottom, sliding along a dotted guide */
.side::-webkit-scrollbar{width:20px}
.side::-webkit-scrollbar-track{background:radial-gradient(circle,rgba(27,30,46,.28) 1.2px,transparent 1.6px) center top/20px 12px repeat-y}
.side::-webkit-scrollbar-thumb{min-height:70px;border:4px solid transparent;border-radius:4px 4px 8px 8px;background-clip:padding-box;
  background-image:linear-gradient(to bottom,#F28C9A 0 9px,#C3C7D4 9px 13px,#FFD84D 13px calc(100% - 15px),#EBCFA6 calc(100% - 15px) calc(100% - 5px),#1B1E2E calc(100% - 5px))}
.side::-webkit-scrollbar-thumb:hover{border-width:3px}
@supports not selector(::-webkit-scrollbar){.side{scrollbar-width:thin;scrollbar-color:var(--model) transparent}}
.side-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.side .lvl{margin-top:10px}
.si{display:flex;align-items:baseline;gap:7px;width:100%;border:0;background:none;text-align:left;cursor:pointer;padding:3px 6px;border-radius:4px;font:400 15px/1.3 var(--body);color:var(--ink)}
.si:hover{background:rgba(255,229,102,.45)}
.si .t{flex:1;min-width:0} .si .n{font:700 12px var(--mono);color:var(--pencil);width:18px;flex:none}
.si .m{font:700 17px/1 var(--hand);color:var(--pencil);white-space:nowrap} .si.done .m,.si.done .tk{color:var(--good)}
.si .tk{font:700 12px var(--mono);width:16px;flex:none;color:var(--pencil)}
.si.stg.in .t,.si.chap.in .t{font-weight:600}
.si.stg.open{border-bottom:1.5px solid var(--ink);border-radius:4px 4px 0 0}
.si.chap{padding-left:26px} .si.part{padding-left:46px;font-size:14px}
.si.here{background:linear-gradient(100deg,transparent 1%,var(--hl) 3% 97%,transparent 99%);font-weight:600}
.si .pin{font:700 16px/1 var(--hand);color:var(--data);white-space:nowrap}
.si.later{color:var(--pencil)}

/* ---------- the book ---------- */
.stage{position:relative;width:min(1640px,97%);flex:1;min-height:540px;max-height:900px;margin:0 auto;perspective:3400px}
.book{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--out)}
.book::before{content:'';position:absolute;inset:-9px -11px;border-radius:16px;background:#22327F;box-shadow:0 30px 60px rgba(0,0,0,.55);transform:translateZ(-3px);transition:left .5s}
.book.closed::before{left:calc(50% - 4px)}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;--sh:0;will-change:transform}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;background:var(--paper)}
.front{border-radius:3px 12px 12px 3px} .back{transform:rotateY(180deg);border-radius:12px 3px 3px 12px}
.face::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 8%)}
.back::before{background:linear-gradient(270deg,rgba(0,0,0,.16),transparent 8%)}
/* the shade on a turning page has its own layer, so fading it does not redraw the page under it */
.face::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:#000;opacity:var(--sh);will-change:opacity}
.pg{position:absolute;inset:0;padding:26px clamp(30px,3.4vw,58px) 40px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(rgba(36,86,230,.085) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(36,86,230,.085) 1px,transparent 1px) 0 0/22px 100%}
/* a page with more than fits can be scrolled; a slim pencil-grey bar shows when that is so */
.pg::-webkit-scrollbar{width:9px} .pg::-webkit-scrollbar-track{background:transparent}
.pg::-webkit-scrollbar-thumb{background:rgba(27,30,46,.28);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){.pg{scrollbar-width:thin;scrollbar-color:rgba(27,30,46,.3) transparent}}
.pn{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:600 18px var(--hand);color:var(--pencil);z-index:2;pointer-events:none}
.edge{position:absolute;top:0;bottom:0;width:26px;z-index:200;cursor:grab;touch-action:none}
.edge.r{right:0} .edge.l{left:0}
.edge::after{content:'';position:absolute;bottom:0;width:0;height:0;border-style:solid;opacity:0;transition:opacity .2s}
.edge.r::after{right:0;border-width:0 0 26px 26px;border-color:transparent transparent rgba(27,30,46,.18) transparent}
.edge.l::after{left:0;border-width:26px 0 0 26px;border-color:transparent transparent transparent rgba(27,30,46,.18)}
.edge:hover::after{opacity:1}

/* cover and sign-in plate */
.cover{background:linear-gradient(135deg,#2D42A8,#1D2B70);color:#fff}
.cover .pg{background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px);align-items:center;justify-content:center;text-align:center;gap:16px}
.cover::before{background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 6%)}
.band{position:absolute;top:0;bottom:0;right:44px;width:16px;background:#101844;box-shadow:inset 2px 0 3px rgba(255,255,255,.15),2px 0 6px rgba(0,0,0,.4);z-index:2}
.label{background:var(--paper);color:var(--ink);padding:18px 30px 14px;width:min(100%,340px);transform:rotate(-2deg);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.label h1{font-size:76px;letter-spacing:.04em} .label h1.wm-big{font-size:44px;letter-spacing:0} .label .hand{font-size:28px}
.cover .viki{width:76px;height:76px}
.plate{display:grid;gap:10px;margin-top:12px;padding-top:14px;border-top:2px dashed var(--rule);text-align:left}
.plate .eyebrow{text-align:center}
.fld{position:relative;display:block}
.fld span{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil)}
.fld input{display:block;width:100%;border:0;border-bottom:2px solid var(--ink);background:none;font:700 25px/1.2 var(--hand);color:var(--data);padding:0 46px 0 2px;outline:none;border-radius:0}
.fld input:focus{border-bottom-color:var(--data);background:linear-gradient(transparent 60%,rgba(255,229,102,.6) 60%)}
.fld.bad input{border-bottom-color:var(--err)}
.eye{position:absolute;right:0;bottom:4px;border:0;background:none;cursor:pointer;font:700 18px var(--hand);color:var(--pencil)}
.ferr{font:700 20px/1.15 var(--hand);color:var(--err)} .ferr:empty{display:none}
.plate .btn.txt{font-size:19px;padding:0}

/* contents */
.hello{display:flex;gap:12px;align-items:center}
.lvl{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil);margin-top:5px;border-bottom:2px solid var(--ink);padding-bottom:3px}
.toc{display:flex;align-items:baseline;gap:8px;width:100%;border:0;background:none;padding:1px 6px;cursor:pointer;text-align:left;font-size:16px;line-height:1.4;border-radius:4px}
.toc:hover{background:rgba(255,229,102,.4)} .toc.sel{background:linear-gradient(100deg,transparent 1%,var(--hl) 3% 97%,transparent 99%)}
.toc .n{font:700 13px var(--mono);width:22px;color:var(--pencil);flex:none}
.toc .dl{flex:1;min-width:16px;border-bottom:2px dotted var(--rule);transform:translateY(-4px)}
.toc .s{font:700 20px/1 var(--hand);color:var(--pencil);white-space:nowrap} .toc.done .s{color:var(--good)} .toc.cur .s{color:var(--model)}
.topics{display:grid;gap:6px;margin:4px 0}
.topic{display:flex;align-items:center;gap:10px;padding:7px 10px;border:2px solid var(--ink);border-radius:var(--wob);background:#fff;cursor:pointer;text-align:left;width:100%;transition:transform .12s var(--out)}
.topic:hover{transform:translateX(3px) rotate(-.3deg)}
.topic .tk{width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;flex:none;display:grid;place-items:center;font:700 13px var(--mono)}
.topic.done .tk{background:var(--good);color:#fff} .topic.cur .tk{background:var(--hl)}
.topic b{font-weight:600} .topic small{margin-left:auto;font:700 19px var(--hand);color:var(--pencil);white-space:nowrap}
.sticky{background:#FFF3A3;padding:14px 16px;transform:rotate(1.2deg);box-shadow:3px 6px 14px rgba(0,0,0,.2);margin-top:auto}
.sticky h3{margin:2px 0 6px} .sticky p{font-size:15px;line-height:1.4}
.sticky .btn{font-size:20px;margin-top:8px}
.recap{margin:0;padding:0;list-style:none} .recap li{position:relative;padding:0 0 0 26px;font:600 20px/1.25 var(--hand)}
.recap li::before{content:'✓';position:absolute;left:2px;color:var(--good);font-weight:700}
.upnext{border:2.5px solid var(--ink);border-radius:var(--wob);background:#fff;padding:16px 18px;box-shadow:3px 5px 0 rgba(27,30,46,.18)}
.upnext h2{margin:6px 0 8px} .upnext ol{margin:0 0 12px;padding-left:22px;font-size:16px;color:var(--pencil)} .upnext ol b{color:var(--ink);font-weight:600}
.plist{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.plist button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;padding:3px 4px;cursor:pointer;text-align:left;font-size:17px;border-radius:4px}
.plist button:hover{background:rgba(255,229,102,.4)}
.plist .tk{width:22px;height:22px;border:2px solid var(--ink);border-radius:50%;flex:none;display:grid;place-items:center;font:700 12px var(--mono)} .plist .done .tk{background:var(--good);color:#fff}
.plist small{margin-left:auto;font:700 18px var(--hand);color:var(--pencil)}
.soon{border:2px dashed var(--rule);padding:14px;border-radius:var(--wob);color:var(--pencil)}

/* story pages */
.speak{display:flex;gap:10px;align-items:flex-start}
.bubble p{font-size:19px;line-height:1.45} .bubble p+p{margin-top:8px;font-size:16px;color:var(--pencil)}
.bubble.swap{animation:rise .4s var(--out)}
.beatnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stepno{font:600 20px var(--hand);color:var(--pencil)}
.gatemsg{font:600 21px/1.15 var(--hand);color:var(--model);min-height:24px;margin-top:-4px} .gatemsg.ok{color:var(--good)} .gatemsg:empty{display:none}
.notes ul{margin:4px 0 0;padding:0;list-style:none}
.notes li{position:relative;padding:1px 0 1px 26px;font:600 21px/1.2 var(--hand);color:var(--ink)}
.notes li::before{content:'✓';position:absolute;left:2px;color:var(--good);font-weight:700}
.notes li.new{animation:rise .5s var(--out);background:linear-gradient(100deg,transparent 1%,var(--hl) 3% 97%,transparent 99%) no-repeat 0 0/0% 100%;animation:rise .5s var(--out),sweep 1.6s var(--out)}
@keyframes sweep{0%{background-size:0% 100%}40%{background-size:100% 100%}100%{background-size:100% 0%}}
.extra{margin-top:auto;display:flex;flex-direction:column;align-items:center}
.reveal:not(.on){display:none} .reveal.on{animation:rise .5s var(--out)}
.taped{position:relative;background:#fff;padding:8px;box-shadow:2px 4px 12px rgba(0,0,0,.18);transform:rotate(-1deg);width:min(100%,340px)}
.taped::before{content:'';position:absolute;top:-11px;left:50%;width:90px;height:24px;margin-left:-45px;background:rgba(255,229,102,.75);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.15);z-index:2}
svg.dia{display:block;width:100%;height:auto;max-height:54vh;touch-action:none;user-select:none;-webkit-user-select:none}
svg.dia text{font:600 17px var(--hand);fill:var(--pencil)}
.axis{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;fill:none}
.done-note{display:none;align-items:center;gap:12px;background:var(--good-s);padding:10px 14px;transform:rotate(-1deg);box-shadow:2px 4px 10px rgba(0,0,0,.18)}
.done-note.on{display:flex;animation:pop .45s var(--pop)} .done-note p{font:700 23px/1.05 var(--hand);margin-right:auto}

/* shared diagram pieces: chips you drag, places you drop them */
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:6px 12px;font:700 17px var(--mono);background:#fff;border:2.5px solid var(--data);border-radius:var(--wob);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:2px 3px 0 rgba(27,30,46,.18);transition:transform .12s var(--out)}
.chip:hover{transform:translateY(-2px) rotate(-1deg)} .chip.txtv{border-color:var(--good)} .chip.picked{box-shadow:0 0 0 4px var(--hl)}
.chip.ghost{position:fixed;z-index:600;pointer-events:none;left:0;top:0;transform:none;transition:none;box-shadow:4px 8px 14px rgba(0,0,0,.3)}
.chip.fact{font:600 16px/1.25 var(--body);max-width:230px;text-align:left;border-color:var(--ink);background:#FFF3A3;border-radius:2px}
.tray{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;border:2px dashed var(--rule);border-radius:var(--wob);min-height:60px}
[data-drop].over{outline:3px dashed var(--model);outline-offset:3px}
.codestrip{background:var(--ink);color:#E6E9FF;font:400 15px/1.7 var(--mono);padding:12px 16px;border-radius:6px;white-space:pre-wrap;min-height:52px;box-shadow:3px 6px 16px rgba(0,0,0,.3);transform:rotate(.4deg)}
.codestrip .new{animation:rise .4s var(--out);color:var(--hl)}

/* lab */
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:10px;align-items:center;padding:3px 0;font-size:16px}
.tick{width:22px;height:22px;flex:none;border:2px solid var(--ink);border-radius:var(--wob);display:grid;place-items:center;background:#fff}
.tick svg{width:22px;height:22px;margin:-6px 0 0 4px;stroke:var(--good);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;opacity:0;transition:stroke-dashoffset .4s var(--out);overflow:visible}
li.pass .tick svg{stroke-dashoffset:0;opacity:1} li.fail .tick{border-color:var(--err);background:var(--err-s)}
.boxes{display:flex;flex-wrap:wrap;gap:20px 14px;padding-top:12px;min-height:66px}
.frame{border:2px dashed var(--model);border-radius:var(--wob);padding:4px 12px 10px;margin-top:6px}
.frame>span{font:700 20px var(--hand);color:var(--model)}
.box{position:relative;min-width:80px;max-width:100%;padding:14px 12px 8px;text-align:center;border:2.5px solid var(--data);border-radius:var(--wob);background:#fff;font:700 19px var(--mono);animation:pop .4s var(--pop);transition:box-shadow .2s,background .3s;overflow-wrap:anywhere}
.box.t-str{border-color:var(--good)} .box.t-function{border-style:dashed;border-color:var(--pencil);font-size:15px;color:var(--pencil)} .box.t-bool{border-color:var(--model)}
.box .tag{position:absolute;top:-13px;left:8px;font:700 19px/1 var(--hand);padding:2px 9px;background:rgba(255,229,102,.92);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2);white-space:nowrap}
.box.wrote{box-shadow:0 0 0 4px var(--model);background:#FFF8DC}
.empty{color:var(--pencil);font:600 20px var(--hand)}
.receipt{background:#fff;padding:10px 14px 20px;font:400 15px/1.6 var(--mono);box-shadow:2px 3px 8px rgba(0,0,0,.15);min-height:60px;white-space:pre-wrap;overflow-wrap:anywhere;
  clip-path:polygon(0 0,100% 0,100% 100%,96% calc(100% - 8px),92% 100%,88% calc(100% - 8px),84% 100%,80% calc(100% - 8px),76% 100%,72% calc(100% - 8px),68% 100%,64% calc(100% - 8px),60% 100%,56% calc(100% - 8px),52% 100%,48% calc(100% - 8px),44% 100%,40% calc(100% - 8px),36% 100%,32% calc(100% - 8px),28% 100%,24% calc(100% - 8px),20% 100%,16% calc(100% - 8px),12% 100%,8% calc(100% - 8px),4% 100%,0 calc(100% - 8px))}
.receipt .e{color:var(--err)}
.ed{position:relative;background:var(--ink);border-radius:6px;box-shadow:3px 6px 16px rgba(0,0,0,.3);transform:rotate(.4deg);margin-top:10px}
.ed::before{content:'';position:absolute;top:-11px;left:30px;width:90px;height:24px;background:rgba(255,229,102,.8);transform:rotate(-4deg);z-index:2}
.ed-bar{display:flex;gap:8px;align-items:center;padding:12px 12px 8px;border-bottom:1px solid #353A5C;flex-wrap:wrap}
.ed-bar span{font:700 12px var(--mono);color:#9AA0C8;margin-right:auto}
.ed-bar .btn{font-size:19px;padding:4px 12px 5px;border-color:#000}
.code{position:relative;font:400 15px/26px var(--mono);overflow-x:auto}
.code pre,.code textarea{margin:0;padding:12px 12px 12px 48px;font:inherit;white-space:pre;tab-size:4;border:0;min-width:100%;min-height:calc(var(--rows,6)*26px + 24px);overflow:hidden}
.code pre{color:#E6E9FF;pointer-events:none;position:relative;width:max-content}
.code textarea{position:absolute;inset:0;width:100%;height:100%;background:none;color:transparent;caret-color:#fff;resize:none;outline:none}
.gut{position:absolute;left:0;top:12px;width:34px;text-align:right;color:#5B6090;pointer-events:none;white-space:pre}
.runline{position:absolute;left:5px;right:5px;top:12px;height:26px;border-radius:5px;background:rgba(255,229,102,.22);border-left:4px solid var(--hl);opacity:0;transition:transform .25s var(--out),opacity .2s}
.runline.err{background:rgba(229,56,79,.3);border-color:var(--err)}
.c-s{color:#8CF0C8} .c-n{color:#9DB8FF} .c-f{color:#FFD067} .c-k{color:#FF9DB0} .c-c{color:#6B719C;font-style:italic}
.inputs{padding:8px 12px 12px;border-top:1px solid #353A5C;color:#9AA0C8;font:400 13px var(--mono);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inputs input{font:400 14px var(--mono);background:#0F1220;color:#fff;border:1px solid #454B74;border-radius:4px;padding:4px 8px;width:110px}
.say{display:flex;gap:10px;align-items:center;min-height:62px;font-size:17px;line-height:1.35}
.say b{color:var(--data)} .say.err .saytxt{color:var(--err)}
.say small{display:block;font:400 12.5px/1.4 var(--mono);color:var(--pencil);margin-top:3px}
.token{position:fixed;z-index:500;left:0;top:0;padding:3px 10px;background:var(--hl);border:2px solid var(--ink);border-radius:var(--wob);font:700 15px var(--mono);pointer-events:none;max-width:200px;overflow:hidden;white-space:nowrap}
.pyload{font:600 20px var(--hand);color:#9AA0C8;padding:0 12px 10px} .pyload::before{content:'';display:inline-block;width:12px;height:12px;border:2px solid #9AA0C8;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;margin-right:8px;vertical-align:-1px}

/* practice terminal, git picture and SQL tables (shared by every stage) */
.sim-term{background:var(--ink);color:#E6E9FF;border-radius:6px;font:400 14px/1.55 var(--mono);box-shadow:3px 6px 16px rgba(0,0,0,.3);padding:10px 12px;cursor:text}
.sim-out{max-height:230px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#454B74 transparent}
.sim-line{display:flex;gap:8px;align-items:baseline}
.sim-line input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;caret-color:var(--hl)}
.sim-ps{color:#8CF0C8;white-space:nowrap} .sim-cmd{color:#fff}
.sim-g{color:#8CF0C8} .sim-r{color:#FF9DA8} .sim-b{color:#9DB8FF} .sim-dim{color:#8087B0}
.sim-graph{display:block;width:100%;height:auto}
.sim-id{font:700 10px var(--mono);fill:var(--pencil)}
.sim-tip{font:700 16px var(--hand);fill:var(--pencil)} .sim-tip.head{fill:var(--data)}
.sqltables{display:grid;gap:10px}
.sqlcard{background:#fff;padding:8px 10px;box-shadow:2px 3px 8px rgba(0,0,0,.14)} .sqlcard>b{font:700 21px/1 var(--hand)} .sqlcard small,.sqlres small{color:var(--pencil);font-size:13px}
.sqlt{border-collapse:collapse;font:400 13px/1.3 var(--mono);margin-top:4px;width:100%}
.sqlt th{text-align:left;border-bottom:2px solid var(--ink);padding:2px 8px 2px 0;font-weight:700}
.sqlt td{padding:2px 8px 2px 0;border-bottom:1px solid var(--rule)} .sqlt i{color:var(--pencil)}
.sqlres{background:#fff;padding:8px 10px;box-shadow:2px 3px 8px rgba(0,0,0,.14);max-height:230px;overflow:auto;min-height:44px}

/* checks and tests */
.qtop{display:flex;align-items:center;gap:12px}
.qbar{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.qbar i{width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;background:#fff;transition:background .3s}
.qbar i.ok{background:var(--good)} .qbar i.no{background:var(--err)} .qbar i.now{background:var(--hl)}
.qbody{display:flex;flex-direction:column;gap:12px;animation:rise .4s var(--out)}
.qbody .q{font:400 20px/1.35 var(--body)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{font:700 16px/1.25 var(--mono);padding:12px;justify-content:flex-start;text-align:left}
.opt.prose{font:400 17px/1.3 var(--body)}
.opt.sel{box-shadow:0 0 0 3px var(--data)} .opt.right{background:var(--good-s);box-shadow:0 0 0 3px var(--good);animation:pop .35s var(--pop)} .opt.wrong{box-shadow:0 0 0 3px var(--err);animation:shake .35s}
.card{position:relative;background:var(--ink);color:#E6E9FF;font:400 16px/1.8 var(--mono);padding:18px 20px;white-space:pre;overflow-x:auto;border-radius:6px;transform:rotate(-1deg);box-shadow:3px 6px 16px rgba(0,0,0,.3);margin-top:14px}
.card::before{content:'';position:absolute;top:-11px;right:30px;width:90px;height:24px;background:rgba(255,229,102,.8);transform:rotate(3deg)}
.slots{display:grid;gap:8px}
.slot{min-height:48px;border:2px dashed var(--pencil);border-radius:var(--wob);display:flex;align-items:center;gap:10px;padding:4px 4px 4px 12px;font:700 22px var(--hand);color:var(--pencil)}
.pool{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:10px}
.note{border:0;cursor:pointer;background:#FFF3A3;color:var(--ink);padding:14px 12px;min-height:84px;font:700 21px/1.15 var(--hand);text-align:left;box-shadow:2px 5px 10px rgba(0,0,0,.2);transition:transform .15s var(--out);animation:pop .3s var(--pop)}
.note:nth-child(odd){transform:rotate(-2deg)} .note:nth-child(even){transform:rotate(1.5deg);background:#C9EBFF}
.note:hover{transform:rotate(0) translateY(-3px)}
.slot .note{flex:1;min-height:0;padding:7px 10px;transform:none;font-size:19px}
.slot.right .note{background:var(--good-s)} .slot.wrong .note{background:var(--err-s)}
.ans{font:700 22px var(--mono);padding:8px 12px;width:min(100%,260px);border:2px solid var(--ink);border-radius:var(--wob);background:#fff}
.ans.right{background:var(--good-s)} .ans.wrong{background:var(--err-s);animation:shake .35s}
.fbnote{display:none;gap:10px;align-items:center;margin-top:auto;padding:10px 12px;background:var(--good-s);transform:rotate(-.6deg);box-shadow:2px 4px 10px rgba(0,0,0,.18)}
.fbnote.on{display:flex;animation:pop .4s var(--pop)} .fbnote.no{background:var(--err-s)}
.fbnote p{font-size:15px;line-height:1.35;margin-right:auto} .fbnote strong{font:700 24px/1 var(--hand);display:block}
.stamp{align-self:center;margin:auto;padding:14px 26px;border:5px double var(--good);color:var(--good);border-radius:10px;text-align:center;transform:rotate(-7deg);font:700 54px/1 var(--hand);text-transform:uppercase;letter-spacing:.06em;opacity:.9;animation:stampin .5s var(--pop) .2s backwards}
.stamp.no{border-color:var(--err);color:var(--err)}
.stamp small{display:block;font:700 14px var(--mono);letter-spacing:.1em;margin-top:6px}

@media (min-width:821px){html,body{overflow:hidden}}
@media (max-width:820px){
  html,body{height:auto} body{display:block}
  body[data-screen=auth] #authScr{min-height:calc(100vh - 80px)} .shelf-row{grid-template-columns:repeat(2,1fr);gap:22px 16px} .bk-label b{font-size:22px} #libT{margin-bottom:4px;padding:3px 8px 4px}
  .side{width:min(88vw,330px);z-index:500} .idx{margin-bottom:4px;padding:3px 8px 4px}
  .top{position:sticky;top:0;z-index:300;width:auto;margin:0 0 8px;padding:8px 8px 0;gap:4px;background:var(--mat);box-shadow:0 6px 12px rgba(0,0,0,.35)}
  .logo{font-size:22px} .logo small{display:none} .tabs button{font-size:16px;padding:6px 6px 8px}
  .stage{width:auto;margin:0 8px;min-height:0;max-height:none;perspective:none}
  .book{position:static;transform:none!important} .book::before,.edge,.foot{display:none}
  .leaf{position:static;width:auto;height:auto;transform:none!important}
  .face{position:relative;transform:none;-webkit-backface-visibility:visible;backface-visibility:visible;border-radius:10px;margin-bottom:10px;scroll-margin-top:62px;box-shadow:0 8px 18px rgba(0,0,0,.35)}
  .face::before,.face::after{display:none} .face:empty{display:none}
  .pg{position:static;overflow:visible;padding:20px 18px 14px} .pn{position:static;display:block;padding-bottom:8px}
  .cover .pg{min-height:calc(100vh - 90px);justify-content:flex-start} .cover .viki{width:54px;height:54px} .band{display:none}
  .label h1{font-size:56px} .label h1.wm-big{font-size:40px} .opts,.pool{grid-template-columns:1fr} .note{min-height:0}
  svg.dia{max-height:none} .extra{margin-top:8px}
  h1{font-size:34px} h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}