:root{
  color-scheme:dark;
  --night:#151c33;
  --night2:#1c2544;
  --ink:#dfe3ee;
  --muted:#939cb8;
  --line:#2c3760;
  --paper:#e8ebf1;
  --paper2:#dde1ea;
  --pink:#e98aa6;
  --eye:#e6cf4f;
  --paper-ink:#1b2240;
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  --hand:"Klee One","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--ink);font:17px/1.65 var(--body);padding-inline:20px;padding-block:0 80px}
main{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:120px}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.1}
h1{font-size:clamp(40px,7vw,76px)}
.alt{color:var(--eye);margin-left:10px;text-transform:none;letter-spacing:0}
h2{font-size:clamp(28px,4vw,40px)}
p{margin:0;max-width:62ch}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:18px}
section{display:flex;flex-direction:column;gap:28px}
.lead{font-size:19px;color:var(--ink)}
.dim{color:var(--muted)}
:focus-visible{outline:2px solid var(--eye);outline-offset:3px}

/* hero */
.hero{padding-top:72px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end}
.blank{background:var(--paper);aspect-ratio:3/4;max-width:100%;border-radius:2px;position:relative;box-shadow:0 30px 60px -30px #000a;transform:rotate(-1.2deg)}
.blank .cur{position:absolute;left:14%;top:14%;width:2px;height:28px;background:var(--paper-ink);animation:blink 1.1s steps(1) infinite}
.blank .stamp{position:absolute;right:10%;bottom:8%;font:13px var(--hand);color:#7a829c}
@keyframes blink{50%{opacity:0}}

/* notes */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.note{background:var(--paper);color:var(--paper-ink);padding:18px 18px 20px;border-radius:2px;font-family:var(--hand);font-size:17px;line-height:1.55;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 30px -22px #000c}
.note:nth-child(3n+1){transform:rotate(-1deg)}
.note:nth-child(3n+2){transform:rotate(.8deg)}
.note:nth-child(4n){transform:rotate(-.4deg)}
.fm{font:12px/1.5 ui-monospace,Menlo,monospace;color:#6d7592;border-bottom:1px dashed #b7bdcc;padding-bottom:8px}
.fm b{color:var(--paper-ink);font-weight:600}
.note.folded{background:var(--paper2);position:relative;justify-content:space-between;min-height:150px}
.note.folded::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 34px 34px 0;border-color:transparent var(--night) #b9bfcd transparent}
.note.folded .why{font-size:15px;color:#5b6380}
.count{font-family:var(--display);font-size:clamp(56px,9vw,96px);line-height:1;color:var(--eye)}
.countrow{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}

/* portrait */
.panel{background:var(--paper);color:var(--paper-ink);border-radius:2px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:32px;align-items:center}
.panel p{color:#39405e}
.panel h2{color:var(--paper-ink)}
canvas{width:100%;max-width:440px;height:auto;display:block;cursor:pointer;justify-self:center}
.btn{font:600 15px var(--body);background:var(--paper-ink);color:var(--paper);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;align-self:flex-start}

/* mistakes */
.errs{display:flex;flex-direction:column;gap:14px;font-family:var(--hand);font-size:24px}
.err{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.err s{color:var(--muted);text-decoration-color:var(--pink);text-decoration-thickness:2px}
.err .fix{color:var(--pink);font-size:20px;transform:rotate(-2deg)}
.err .n{font:13px var(--body);color:var(--muted);min-width:4ch}

/* languages */
.langs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.lang{background:var(--night);padding:26px;display:flex;flex-direction:column;gap:14px}
.lang .big{font-family:var(--hand);font-size:28px;line-height:1.4;color:var(--ink)}
.lang[lang="ja"] .big{font-weight:600}

/* end */
.today{background:var(--paper);color:var(--paper-ink);font-family:var(--hand);font-size:19px;line-height:1.7;padding:28px;max-width:560px;border-radius:2px;transform:rotate(.6deg);display:flex;flex-direction:column;gap:10px}
.today .cur{display:inline-block;width:2px;height:1.1em;background:var(--paper-ink);vertical-align:-3px;margin-left:2px;animation:blink 1.1s steps(1) infinite}

@media (max-width:720px){
  .hero,.panel{grid-template-columns:1fr}
  .blank{max-width:320px}
  .panel{padding:22px}
  .langs{grid-template-columns:1fr}
  main{gap:88px}
}
@media (prefers-reduced-motion:reduce){
  .cur{animation:none!important}
}
.stack.tight{gap:6px}
.panel .eyebrow.on-paper{color:#6d7592}
.lang .big{font-weight:400}

/* added for IN THIS ELECTRIC SEA: link back to the archive */
.ites-back{padding-top:20px;font-size:15px;color:var(--muted)}
.ites-back a{color:inherit}