:root{--desk:#b9c6e4;--paper:#fbfcf7;--grid:#d7e4f2;--ink:#1c2b8c;--red:#d93636;--y:#ffe46b;--p:#ffa6c9;--m:#a5ecc9;--tx:#1c2b8c;--shadow:rgba(20,30,70,.25);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--desk:#0f1526;--paper:#f1f3ea;--shadow:rgba(0,0,0,.6)}}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--desk);color:var(--tx);font:1.3rem/1.5 "Patrick Hand","Comic Sans MS",cursive,sans-serif}
a{color:var(--red);text-underline-offset:4px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:Caveat,"Patrick Hand",cursive;margin:0;line-height:1}
.wrap{max-width:56rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.page{position:relative;background:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;border-radius:6px;box-shadow:0 10px 30px var(--shadow);padding:2.5rem 1.5rem 2.5rem 4.5rem;margin:0 0 2.5rem}
.page::before{content:"";position:absolute;left:3rem;top:0;bottom:0;width:2px;background:var(--red);opacity:.5}
.page::after{content:"";position:absolute;left:.9rem;top:1.5rem;bottom:1.5rem;width:1rem;background:radial-gradient(circle,var(--desk) 6px,transparent 7px) 0 0/1rem 3rem repeat-y}
.page:nth-of-type(odd){transform:rotate(-.4deg)}.page:nth-of-type(even){transform:rotate(.4deg)}
h2{font-size:clamp(2.4rem,6vw,3.4rem);font-weight:700;margin-bottom:1rem}
.tag{font-family:Caveat,cursive;font-size:1.5rem;color:var(--red);transform:rotate(-3deg);display:inline-block;margin-bottom:.5rem}
.cover h1{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:700;max-width:18ch;letter-spacing:-.01em}
.cover svg{width:min(26rem,90%);height:20px;display:block;margin:.25rem 0 1.25rem}
.cover path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.4s .4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.cover p{max-width:34rem;font-size:1.5rem}
s{text-decoration-color:var(--red);text-decoration-thickness:3px;opacity:.7}
.btn{display:inline-block;margin:.75rem .75rem 0 0;padding:.5rem 1.2rem;border:3px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;background:transparent;color:var(--ink);font:inherit;font-size:1.35rem;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--y)}
.btn.p{background:var(--ink);color:var(--paper)}.btn.p:hover{background:var(--red);border-color:var(--red)}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.5rem 1.25rem;padding:1rem 0}
.note{position:relative;padding:1.6rem 1rem 1rem;box-shadow:3px 6px 10px var(--shadow);color:#1c2b8c;touch-action:auto;transition:box-shadow .15s}
.note:nth-child(3n+1){background:var(--y);rotate:-2deg}.note:nth-child(3n+2){background:var(--p);rotate:1.5deg}.note:nth-child(3n){background:var(--m);rotate:-1deg}
.note .pin{position:absolute;top:0;left:0;right:0;height:1.5rem;cursor:grab;touch-action:none;display:flex;justify-content:center;align-items:center}
.note .pin::after{content:"";width:.9rem;height:.9rem;border-radius:50%;background:var(--red);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.note.drag{box-shadow:8px 14px 22px var(--shadow);z-index:20}.note.drag .pin{cursor:grabbing}
.note b{font-family:Caveat,cursive;font-size:1.7rem;line-height:1;display:block}
.note small{font-size:1.05rem;opacity:.8;display:block;margin-bottom:.25rem}
.note span{font-size:1.1rem;line-height:1.25;display:block}
.note.big{grid-column:span 2}.note.big b{font-size:2.3rem}.note.big span{font-size:1.25rem}.todo{list-style:none;padding:0;margin:1rem 0 0}.todo li{margin:.3rem 0}.todo li::before{content:"☐ ";color:var(--red)}.todo li.ok::before{content:"☑ "}.game.failed{border-color:var(--red)}.game.failed::after{content:"FAILED";position:absolute;right:1rem;top:.5rem;font:700 2.6rem Caveat,cursive;color:var(--red);border:4px solid var(--red);padding:0 .6rem;transform:rotate(12deg);opacity:.85;pointer-events:none}.hint{font-family:Caveat,cursive;font-size:1.6rem;color:var(--red)}
.game{position:relative;border:3px dashed var(--ink);border-radius:10px;padding:1.25rem;background:rgba(255,255,255,.7)}
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.meter label{font-size:1.1rem;display:block}
.bar{height:16px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff}
.bar i{display:block;height:100%;width:50%;background:repeating-linear-gradient(-45deg,var(--ink) 0 6px,#4a5bd0 6px 12px);transition:width .5s}
#q{font-size:1.5rem;margin:0 0 .5rem}
#opts button{display:block;width:100%;text-align:left;margin:.5rem 0;padding:.6rem 1rem;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
#opts button:hover:not(:disabled){background:var(--y)}
#fb{min-height:2.6rem;color:var(--red);font-size:1.3rem;margin:.5rem 0}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.tags li{border:2px solid var(--ink);border-radius:50px;padding:.1rem .9rem;background:var(--paper)}
.tags li:nth-child(3n)::before{content:"✓ ";color:var(--red)}
.reads a{display:block;font-family:Caveat,cursive;font-size:1.9rem;font-weight:700;margin:.4rem 0}
footer{text-align:center;color:var(--ink);font-size:1.15rem;padding-bottom:1rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer{color:#cdd6f4}}
@media (max-width:560px){.page{padding:2rem 1rem 2rem 3rem}.page::before{left:2rem}.page::after{left:.4rem}.meters{grid-template-columns:1fr}.note.big{grid-column:auto}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cover path{animation:none;stroke-dashoffset:0}.bar i{transition:none}}
.mast{text-align:center;border-top:4px double var(--ink);border-bottom:4px double var(--ink);padding:.5rem 0 .6rem;margin:0 0 1.5rem}
.mast b{display:block;font:900 clamp(1.9rem,6vw,3.2rem)/1 "Playfair Display",Georgia,serif}
.mast small{font-size:1rem;opacity:.85}
.cols{column-count:2;column-gap:2rem;column-rule:1px solid var(--grid)}
.cols p{margin:0 0 .8rem}
.cols p:first-child::first-letter{float:left;font:900 3.6rem/.85 "Playfair Display",Georgia,serif;padding:.05em .1em 0 0;color:var(--red)}
:root[data-v] body{font:400 1.12rem/1.6 Lora,Georgia,serif;color:var(--tx)}
:root[data-v] :is(h1,h2){font-family:"Playfair Display",Georgia,serif;font-weight:900;letter-spacing:-.02em;line-height:1.05}
:root[data-v] .cover h1{font-size:clamp(2.1rem,6vw,3.7rem);max-width:20ch}
:root[data-v] h2{font-size:clamp(1.8rem,4.5vw,2.5rem);border-bottom:3px double var(--ink);padding-bottom:.4rem}
:root[data-v] .page{border-top:5px double var(--ink);border-radius:2px}
:root[data-v] .note{color:var(--nt)}
:root[data-v] .game{background:var(--gb)}
:root[data-v] .bar{background:var(--bb)}
:root[data-v] footer{color:var(--fc)}
:root[data-v] :is(.btn:hover,#opts button:hover:not(:disabled)){color:#111}
:root[data-v="pink"]{--desk:#e8c9b4;--paper:#fff1e5;--grid:#f3dccb;--ink:#2b2623;--tx:#2b2623;--red:#990f3d;--y:#ffd9a8;--p:#f7b6c2;--m:#bfe0d0;--nt:#2b2623;--gb:rgba(255,255,255,.6);--bb:#fff;--fc:#4a2f25;--shadow:rgba(70,30,20,.25)}
:root[data-v="morning"]{--desk:#b8bbbd;--paper:#efeee9;--grid:#dddcd5;--ink:#151515;--tx:#151515;--red:#c1272d;--y:#f2e394;--p:#e9c9c4;--m:#cfe0d3;--nt:#151515;--gb:rgba(255,255,255,.55);--bb:#fff;--fc:#1c1c1c;--shadow:rgba(0,0,0,.28)}
:root[data-v="evening"]{--desk:#080a10;--paper:#1c2230;--grid:#283046;--ink:#f2ede2;--tx:#f2ede2;--red:#f2c14e;--y:#f2c14e;--p:#e58fa8;--m:#7fd1b9;--nt:#14161c;--gb:rgba(255,255,255,.05);--bb:#0e121b;--fc:#aab3c8;--shadow:rgba(0,0,0,.6)}
:root[data-v="sunday"]{--desk:#bfe3d0;--paper:#fbfff8;--grid:#d9eedd;--ink:#0e3b2c;--tx:#0e3b2c;--red:#e8590c;--y:#ffd23f;--p:#ff9ec4;--m:#8fe3c0;--nt:#0e3b2c;--gb:rgba(255,255,255,.7);--bb:#fff;--fc:#0e3b2c;--shadow:rgba(10,60,40,.25)}
.sw{overflow-x:auto;scrollbar-width:none}
@media (max-width:700px){.cols{column-count:1}.mast small{font-size:.9rem}}
.wrap{padding-bottom:5.5rem}
.ring{position:absolute;right:2rem;top:7rem;width:7.5rem;height:7.5rem;border-radius:50%;border:7px solid rgba(120,70,30,.14);box-shadow:inset 0 0 0 3px rgba(120,70,30,.07);transform:rotate(-8deg);pointer-events:none}
.doodle{font-family:Caveat,cursive;font-size:1.7rem;color:var(--red);display:inline-block;transform:rotate(-4deg);margin-left:.5rem}
.clip{position:absolute;right:2rem;top:-1.2rem;width:2.2rem;height:5.5rem;border:4px solid #8a93a6;border-radius:1.2rem;border-bottom-color:transparent;transform:rotate(8deg);pointer-events:none}
.note.big::before{content:"";position:absolute;top:-.8rem;right:-.6rem;width:5rem;height:1.7rem;background:rgba(255,255,255,.6);transform:rotate(35deg)}
@media (max-width:560px){.ring,.doodle{display:none}}
.sw{position:fixed;left:50%;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:.2rem;background:var(--paper);border:2px solid var(--ink);border-radius:50px;padding:.25rem;z-index:50;max-width:calc(100% - 1rem)}
.sw button{font:inherit;font-size:.95rem;border:0;background:transparent;color:var(--ink);padding:.2rem .7rem;border-radius:50px;cursor:pointer;white-space:nowrap}
.sw button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cover svg.d{height:auto;margin:0;display:block}
.cover svg.d path,.cover svg.d circle{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw2 .9s ease forwards}
.cover svg.d{color:var(--ink)}
@keyframes draw2{to{stroke-dashoffset:0}}
.circ{position:relative;display:inline-block;white-space:nowrap}
.circ svg.d{position:absolute;left:-.2em;top:-.12em;width:calc(100% + .4em);height:calc(100% + .26em);overflow:visible}
.circ svg.d path{stroke:var(--red);stroke-width:4}
.stage{display:grid;grid-template-columns:1fr minmax(12rem,17rem);gap:2rem;align-items:center}
.walker{width:100%;cursor:pointer;overflow:visible}
.walker .p{transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.walker.go .p{transform:translateX(70px)}
.walker .b{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.scrawl{font-family:Caveat,cursive;font-size:.5em;font-weight:500;color:var(--red);display:inline-block;transform:rotate(-4deg);margin-left:.6rem;white-space:nowrap;letter-spacing:0}
:root[data-v="modern"]{--desk:#d9d4ff;--paper:#fbfbff;--grid:#e4e4f5;--ink:#14123f;--tx:#14123f;--red:#ff4d7d;--y:#d4ff4f;--p:#ffb0c8;--m:#9fe3ff;--nt:#14123f;--gb:rgba(255,255,255,.75);--bb:#fff;--fc:#2a2680;--shadow:rgba(40,30,120,.28)}
:root[data-v="modern"] body{font:1.3rem/1.5 "Patrick Hand","Comic Sans MS",cursive}
:root[data-v="modern"] :is(h1,h2){font-family:Caveat,cursive;font-weight:700;letter-spacing:0;line-height:.95}
:root[data-v="modern"] h2{font-size:clamp(2.4rem,6vw,3.4rem);border:0;padding:0}
:root[data-v="modern"] h2::after{content:"";display:block;height:10px;width:min(13rem,60%);margin-top:.35rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 10'%3E%3Cpath d='M2 6 Q12 0 22 6 T42 6 T62 6 T82 6 T102 6 T122 6 T138 6' fill='none' stroke='%23ff4d7d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left/100% 100%}
:root[data-v="modern"] .page{border-top:0;border-radius:6px}
:root[data-v="modern"] .mast{display:none}
:root[data-v="modern"] .cols p:first-child::first-letter{font-family:Caveat,cursive}
:root[data-v="modern"] .cover{min-height:min(86vh,44rem);display:flex;flex-direction:column;justify-content:center}
:root[data-v="modern"] .cover h1{font-size:clamp(2.6rem,9vw,5.8rem);line-height:.95;max-width:none}
:root[data-v="modern"] .btn.p{background:#6a4cff;border-color:#6a4cff;color:#fff}
:root[data-v="modern"] .btn:hover{background:var(--y);border-color:var(--ink);color:var(--ink)}
:root[data-v="modern"] .game{border-radius:255px 15px 225px 15px/15px 225px 15px 255px}
@media (max-width:700px){.stage{grid-template-columns:1fr}.walker{max-width:15rem}}
@media (prefers-reduced-motion:reduce){.cover svg.d path,.cover svg.d circle{animation:none;stroke-dashoffset:0}.walker .b{animation:none}}
nav.top{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;padding:.25rem .25rem 1.25rem;font-family:Caveat,cursive;font-size:1.6rem}
nav.top a{color:var(--fc);text-decoration:none}
nav.top a:hover{color:var(--red);text-decoration:underline wavy}
nav.top .brand{font-weight:700;font-size:2rem}
nav.top span{display:flex;gap:1.2rem;flex-wrap:wrap}
.flinks a{color:var(--fc)}
footer p{margin:.2rem 0}
.crumbs{font-family:Caveat,cursive;font-size:1.4rem}
.crumbs a{color:var(--red)}
.post h1{font-size:clamp(2.6rem,7vw,4.4rem);margin:.25rem 0 1.25rem}
.prose{max-width:40rem}
.prose p,.prose li{margin:0 0 1rem}
.prose h2{font-size:clamp(2rem,5vw,2.6rem);margin:2rem 0 1rem}
.prose h3{font-size:2rem;margin:1.5rem 0 .75rem}
.prose ul,.prose ol{padding-left:1.4rem;margin:0 0 1rem}
.prose strong{background:linear-gradient(transparent 62%,var(--y) 62%)}
.prose a{color:var(--red)}
.calc{background:var(--gb);border:2px dashed var(--ink);border-radius:10px;padding:1rem 1.25rem;margin:1.25rem 0}
.calc p,.calc li{margin:0 0 .6rem}
.scribble{margin:2.5rem 0 0;padding:1.4rem 1.5rem;background:var(--y);color:var(--nt);rotate:-1deg;box-shadow:3px 6px 10px var(--shadow);max-width:36rem}
.scribble b{font-family:Caveat,cursive;font-size:1.9rem;display:block;line-height:1}
.scribble p{margin:.4rem 0 0}
.scribble a{color:var(--nt);font-weight:700}
.pn{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:2.5rem}
.pn a,.card{display:block;border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:1rem 1.4rem;color:var(--ink);text-decoration:none;background:var(--gb)}
.pn a:hover,.card:hover{background:var(--y)}
.pn small,.card small{display:block;font-size:1.05rem;opacity:.75}
.pn b,.card b{font-family:Caveat,cursive;font-size:1.9rem;line-height:1.05;display:block}
.cards{display:grid;gap:1.25rem;margin-top:1.5rem}
.card span{display:block;margin-top:.25rem}
.card:nth-child(3n+1){background:var(--y)}.card:nth-child(3n+2){background:var(--p)}.card:nth-child(3n){background:var(--m)}
.card{color:var(--nt)}
.nl{display:block;margin-top:.5rem;font-family:Caveat,cursive;font-size:1.4rem;font-weight:700;color:var(--ink)}
.lost{min-height:60vh;display:flex;flex-direction:column;justify-content:center}