:root{
  --paper:#FBF7EC; --rule:#B7CFEA; --margin:#E4575B; --pen:#D22B3A; --ink:#1B1B1F; --pencil:#4a4a55;
  --violet:#9B3FD4; --magenta:#E23FE0; --indigo:#4B3BE8; --desk:#2a1838;
  --line:32px;
  --type:'Special Elite','Courier New',monospace; --hand:'Gochi Hand','Comic Sans MS',cursive; --marker:'Permanent Marker',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--type);font-size:18px;line-height:var(--line);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.desk{position:fixed;inset:-20%;z-index:-1;background:
  radial-gradient(circle at 20% 30%,rgba(226,63,224,.18) 0 2px,transparent 3px) 0 0/46px 46px,
  radial-gradient(circle at 70% 60%,rgba(155,63,212,.22) 0 2px,transparent 3px) 0 0/62px 62px,
  var(--desk);animation:drift 60s linear infinite}
@keyframes drift{to{transform:translate3d(-92px,-124px,0)}}
.type{font-family:var(--type)} .hand{font-family:var(--hand)} .marker{font-family:var(--marker)} .mono{font-family:var(--type)}
.small{font-size:14px;letter-spacing:.04em}

.sheet{position:relative;max-width:980px;margin:48px auto 64px;padding:40px 48px 40px 128px;
  background:
    linear-gradient(90deg,transparent 94px,var(--margin) 94px,var(--margin) 96px,transparent 96px),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px) var(--line)),
    var(--paper);
  background-position:0 0,0 12px,0 0;
  box-shadow:0 2px 0 #e9e1cc,0 4px 0 #ddd3b9,0 30px 60px rgba(0,0,0,.45);transform:rotate(-.4deg)}
.holes{position:absolute;left:30px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}
.holes i{display:block;width:26px;height:26px;border-radius:50%;background:var(--desk);box-shadow:inset 0 3px 4px rgba(0,0,0,.5)}

/* cover */
.cover{position:relative;padding-bottom:var(--line)}
.cover-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.grade{position:relative;width:150px;height:150px;flex:none;display:grid;place-items:center;color:var(--pen);font-family:var(--marker);transform:rotate(8deg)}
.grade::before{content:"";position:absolute;inset:6px;border:5px solid var(--pen);border-radius:52% 46% 55% 44%/48% 55% 45% 52%;transform:rotate(-12deg)}
.grade span{font-size:84px;line-height:1}
.grade em{position:absolute;right:10px;bottom:14px;font-style:normal;font-size:22px}
.title{margin:8px 0 var(--line);font-weight:400;line-height:1}
.title .type{display:block;font-size:clamp(30px,10.2vw,112px);letter-spacing:-.02em;text-transform:uppercase}
.title .type:nth-child(2){color:var(--violet);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.ticker{display:inline-block;margin-top:10px;font-size:44px;color:var(--magenta);transform:rotate(-4deg)}
.fields{max-width:520px}
.field{margin:0;display:flex;gap:12px;align-items:baseline;min-height:var(--line);line-height:var(--line)}
.fill{flex:1;font-size:28px;color:var(--indigo);border-bottom:2px solid var(--ink);padding:0 8px}
.ca-field .ca-value{flex:1;min-width:0;min-height:26px;border-bottom:2px solid var(--ink);font-size:15px;overflow-wrap:anywhere;line-height:1.5;padding:0 6px}
.ca-controls{display:flex;gap:8px;align-items:center}
.ca-copy{font-family:var(--marker);font-size:15px;color:var(--pen);background:none;border:2px solid var(--pen);border-radius:40% 55% 45% 60%/60% 45% 55% 40%;padding:2px 12px;cursor:pointer;transition:transform .15s}
.ca-copy:hover{transform:rotate(-4deg) scale(1.05)} .ca-copy:active{transform:scale(.95)}
.ca-copy.done{background:var(--pen);color:var(--paper)}
.ca-scan{color:var(--ink);display:grid;place-items:center;transition:transform .15s} .ca-scan:hover{transform:rotate(12deg);color:var(--violet)}

.photo{position:relative;margin:calc(var(--line)*1.5) 0 0 auto;width:min(560px,100%);background:#fff;padding:14px 14px 8px;box-shadow:0 10px 24px rgba(0,0,0,.18);transform:rotate(2.5deg)}
.photo img{display:block;width:100%;height:auto;border:2px solid var(--ink)}
.photo figcaption{text-align:center;font-size:22px;color:var(--pencil)}
.staple{position:absolute;top:-8px;left:50%;width:70px;height:10px;margin-left:-35px;background:linear-gradient(#e6e6ea,#8d8d96);border-radius:3px;box-shadow:0 2px 2px rgba(0,0,0,.3);transform:rotate(-3deg);z-index:1}

.red-note{position:absolute;color:var(--pen);font-size:26px;line-height:1.1;pointer-events:none;opacity:0;transform:scale(.6) rotate(-14deg);transition:opacity .5s .5s,transform .5s .5s}
.in .red-note,.in.red-note{opacity:1;transform:scale(1) rotate(-8deg)}
.n1{left:-6px;bottom:120px;max-width:190px}
.n2{right:0;bottom:-10px}
.n3{right:10px;top:40px;transform-origin:center}
.n4{left:40%;bottom:-6px}

/* questions */
.q{position:relative;margin-top:calc(var(--line)*2);padding-bottom:var(--line)}
.q h2{margin:0 0 var(--line);font-size:21px;font-weight:400;line-height:var(--line)}
.q h2 b{font-size:30px;margin-right:6px}
.pts{color:var(--pencil);font-size:15px}
.answer p{margin:0 0 var(--line);font-size:26px;line-height:var(--line);color:var(--indigo);max-width:720px}
.answer u{text-decoration-color:var(--magenta);text-decoration-thickness:3px}

.ask label{display:block}
.ask-row{display:flex;gap:14px;align-items:flex-end}
.ask input{flex:1;min-width:0;font-size:28px;line-height:var(--line);color:var(--indigo);background:transparent;border:0;border-bottom:3px solid var(--ink);padding:0 6px;outline:none}
.ask input:focus{border-bottom-color:var(--magenta)}
.ask input::placeholder{color:#9a95a6}
.stamp{font-family:var(--marker);font-size:22px;color:var(--paper);background:var(--violet);border:3px solid var(--ink);border-radius:10px;padding:4px 22px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);transition:transform .12s,box-shadow .12s}
.stamp:hover{background:var(--magenta);transform:rotate(1deg) translateY(-2px);box-shadow:6px 6px 0 var(--ink)}
.stamp:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.stamp:focus-visible,.ask input:focus-visible,a:focus-visible,.ca-copy:focus-visible{outline:3px dashed var(--magenta);outline-offset:4px}
.transcript{list-style:none;margin:var(--line) 0 0;padding:0}
.transcript li{margin:0 0 var(--line)}
.transcript p{margin:0}
.q-line{font-size:17px}
.a-line{font-size:26px;color:var(--indigo);min-height:var(--line)}
.a-line::before{content:"A: ";font-family:var(--type);font-size:17px;color:var(--ink)}
.typing::after{content:"|";animation:blink .6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hint{color:var(--pencil);margin:0}

.mc > p{margin:0}
.choices{list-style:none;display:flex;flex-wrap:wrap;gap:4px 40px;margin:0 0 var(--line);padding:0 0 0 28px;font-size:26px;color:var(--indigo)}
.choices li{position:relative;counter-increment:c}
.choices{counter-reset:c}
.choices li::before{content:counter(c,lower-alpha) ") ";font-family:var(--type);font-size:16px;color:var(--ink)}
.circled::after{content:"";position:absolute;inset:-6px -14px;border:3px solid var(--magenta);border-radius:50% 45% 55% 48%/55% 50% 48% 45%;transform:rotate(-3deg)}
.circled.big{font-size:34px}

.work{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start}
.steps{margin:0;padding-left:36px;font-size:26px;color:var(--indigo)}
.steps li{line-height:var(--line);margin-bottom:var(--line)}
.steps s{text-decoration-color:var(--pen);text-decoration-thickness:3px}
.doodle{margin:0;transform:rotate(-3deg)}
.doodle img{width:100%;height:auto;display:block;animation:wobble 4s ease-in-out infinite}
@keyframes wobble{50%{transform:rotate(2deg) translateY(-6px)}}

.class-links{display:flex;gap:20px;flex-wrap:wrap}
.sticker{display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 14px;color:var(--ink);text-decoration:none;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--violet);transform:rotate(-2deg);transition:transform .15s,box-shadow .15s}
.sticker:nth-child(2){transform:rotate(2deg)}
.sticker svg{width:28px;height:28px;color:var(--violet)}
.sticker span{font-size:26px}
.sticker:hover{transform:rotate(0) translateY(-3px);box-shadow:6px 7px 0 var(--magenta)}

.foot{margin-top:calc(var(--line)*2);padding-top:var(--line);border-top:3px double var(--ink);display:grid;gap:12px}
.foot-id{display:flex;align-items:center;gap:14px}
.foot-id img{width:56px;height:56px;border:3px solid var(--ink);border-radius:12px;background:#fff}
.foot-id p{margin:0;font-size:22px}
.foot-id .hand{color:var(--magenta);font-size:26px}
.icons{display:flex;gap:14px}
.icons:empty{display:none}
.icons a{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;color:var(--ink);transition:transform .15s,background .15s,color .15s}
.icons a svg{width:20px;height:20px}
.icons a:hover{background:var(--violet);color:var(--paper);transform:rotate(-10deg)}
.fine{color:var(--pencil);margin:0}

.reveal{opacity:0;transform:translateY(24px) rotate(.6deg);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:720px){
  :root{--line:28px}
  body{font-size:16px}
  .sheet{margin:16px 8px 32px;padding:28px 18px 28px 54px;transform:none;background-position:0 0,0 10px,0 0;
    background:linear-gradient(90deg,transparent 42px,var(--margin) 42px,var(--margin) 44px,transparent 44px),repeating-linear-gradient(180deg,transparent 0 calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px) var(--line)),var(--paper)}
  .holes{left:10px} .holes i{width:18px;height:18px}
  .grade{width:96px;height:96px} .grade span{font-size:54px} .grade em{font-size:16px;right:4px;bottom:8px}
  .ticker{font-size:32px}
  .fill{font-size:22px}
  .answer p,.a-line,.choices,.steps{font-size:22px}
  .q h2{font-size:17px} .q h2 b{font-size:24px}
  .work{grid-template-columns:1fr}
  .doodle{max-width:260px;margin:0 auto}
  .n1{left:auto;right:0;bottom:-16px;font-size:20px}
  .red-note{font-size:20px}
  .n3{top:auto;bottom:-6px}
  .ask-row{flex-direction:column;align-items:stretch}
  .stamp{align-self:flex-end}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.red-note{opacity:1!important;transform:none!important}
}
.slogan{margin:0 0 var(--line);font-size:20px;color:var(--pencil)}
[hidden]{display:none!important}
.n3{top:auto;bottom:-4px;right:20px}