:root{--bg:#efe6d4;--card:#f8f1e3;--card-2:#e9dcc3;--ink:#2a2622;--muted:#6b6258;--accent:#c8553d;--teal:#2f6f6a;--gold:#d9a441;--shadow:#462d1447;--sky:#bfe0e3;--desk:#a7744c;--desk-top:#c08b5e;--sun-o:1;--moon-o:0;--grain-o:.5;--grain-f:none;--shape:#3b3a3d;--accent-ink:#a8432d;--on-accent:#fff8ec;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1b1a19;--card:#282522;--card-2:#33302c;--ink:#f1e8d8;--muted:#a89e90;--accent:#e07a5f;--teal:#6cbcb0;--gold:#e8b85a;--shadow:#000000a6;--sky:#22304a;--desk:#6e4a30;--desk-top:#85593a;--sun-o:0;--moon-o:1;--grain-o:.35;--grain-f:invert(1);--shape:#7d7882;--accent-ink:#e07a5f;--on-accent:#1b1a19;color-scheme:dark}}:root[data-theme=dark]{--bg:#1b1a19;--card:#282522;--card-2:#33302c;--ink:#f1e8d8;--muted:#a89e90;--accent:#e07a5f;--teal:#6cbcb0;--gold:#e8b85a;--shadow:#000000a6;--sky:#22304a;--desk:#6e4a30;--desk-top:#85593a;--sun-o:0;--moon-o:1;--grain-o:.35;--grain-f:invert(1);--shape:#7d7882;--accent-ink:#e07a5f;--on-accent:#1b1a19;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0}html{-webkit-tap-highlight-color:transparent;overflow-x:clip}body{background:var(--bg);color:var(--ink);font:17px/1.55 Bricolage Grotesque,system-ui,sans-serif;transition:background .4s,color .4s;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:100;opacity:var(--grain-o);filter:var(--grain-f);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}a{color:inherit}.hand{font-family:Patrick Hand,cursive}.wrap{width:min(1120px,100% - 32px);margin-inline:auto}.felt{filter:url(#felt) drop-shadow(0 4px 3px var(--shadow))}.felt-soft{filter:url(#felt)}.boil{animation:.45s step-end infinite boil;display:inline-block}@keyframes boil{0%{transform:rotate(-.8deg)}50%{transform:rotate(.6deg)translateY(-1px)}}.paper{background:var(--card);color:var(--ink);box-shadow:0 1px 0 #ffffff40 inset, 0 3px 0 -1px var(--card-2), 0 18px 30px -16px var(--shadow);border-radius:14px 20px 12px 22px/20px 12px 22px 14px;transition:background .4s}.tape:after{content:"";background:color-mix(in srgb, var(--gold) 45%, transparent);width:84px;height:24px;box-shadow:0 1px 2px var(--shadow);position:absolute;top:-12px;left:50%;transform:translate(-50%)rotate(-3deg)}nav{z-index:50;position:fixed;top:14px;left:0;right:0}nav .wrap{background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:blur(8px);border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px;transition:background .4s;display:flex}.tag{background:var(--accent-ink);color:var(--on-accent);clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);border-radius:4px 10px 10px 4px;padding:6px 16px 6px 22px;font-weight:800;text-decoration:none;transition:transform .15s;position:relative}@media (hover:hover){.tag:hover{transform:rotate(-3deg)}}.tag:focus-visible{text-underline-offset:4px;outline:none;text-decoration:underline wavy}.navlinks{align-items:center;gap:6px;display:flex}.navlinks a{padding:6px 12px;font-size:15px;font-weight:600;text-decoration:none}@media (hover:hover){.navlinks a:hover{text-decoration:underline wavy var(--accent)}}.toggle{cursor:pointer;background:var(--card-2);width:64px;height:34px;box-shadow:inset 0 2px 4px var(--shadow);border:0;border-radius:20px;padding:0;position:relative}@media (hover:hover){.toggle:hover{box-shadow:inset 0 2px 4px var(--shadow), 0 0 0 2px var(--accent)}}.burger{cursor:pointer;background:var(--card-2);width:42px;height:34px;box-shadow:inset 0 2px 4px var(--shadow);border:0;border-radius:12px;flex-direction:column;justify-content:center;gap:4px;padding:0 11px;display:none}.burger span{background:var(--ink);border-radius:2px;height:2.5px;transition:transform .25s,opacity .25s}@media (hover:hover){.burger:hover{box-shadow:inset 0 2px 4px var(--shadow), 0 0 0 2px var(--accent)}}.toggle,.burger{transition:transform .12s}.toggle:active,.burger:active{transform:scale(.92)}nav:has(.menu:popover-open) .burger span:first-child{transform:translateY(6.5px)rotate(45deg)}nav:has(.menu:popover-open) .burger span:nth-child(2){opacity:0}nav:has(.menu:popover-open) .burger span:nth-child(3){transform:translateY(-6.5px)rotate(-45deg)}.menu{min-width:200px;color:var(--ink);border:0;margin:0;padding:10px;position:fixed;inset:72px 16px auto auto}.menu a{border-radius:10px;padding:10px 14px;font-size:22px;font-weight:700;text-decoration:none;display:block}.menu a:focus-visible{background:var(--card-2);text-decoration:underline wavy var(--accent)}@media (hover:hover){.menu a:hover{background:var(--card-2);text-decoration:underline wavy var(--accent)}}.toggle span{background:var(--gold);width:26px;height:26px;box-shadow:0 2px 3px var(--shadow);border-radius:50%;transition:transform .35s cubic-bezier(.5,1.6,.4,1);position:absolute;top:4px;left:4px}:root[data-theme=dark] .toggle span{background:#e9e2d0;transform:translate(30px);box-shadow:inset -7px -2px #b9b0a0}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .toggle span{background:#e9e2d0;transform:translate(30px);box-shadow:inset -7px -2px #b9b0a0}}.hero{align-items:center;min-height:100vh;padding:100px 0 40px;display:grid;position:relative;overflow:hidden}.hero .wrap{z-index:2;grid-template-columns:1fr 1.15fr;align-items:center;gap:24px;display:grid;position:relative}.blob{z-index:0;position:absolute}.kicker{color:var(--accent-ink);margin:0;font-size:22px}h1{letter-spacing:-.03em;margin:6px 0 18px;font-size:clamp(48px,8vw,104px);font-weight:800;line-height:.92}.lede{max-width:30ch;color:var(--muted);margin:0 0 26px;font-size:20px}.lede b{color:var(--ink)}.btn{background:var(--ink);color:var(--bg);box-shadow:0 5px 0 var(--accent);border-radius:12px 16px 10px 18px;padding:12px 22px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-block}@media (hover:hover){.btn:hover{box-shadow:0 3px 0 var(--accent);transform:translateY(2px)}}.btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:0 0}.cta,.letter-links{flex-wrap:wrap;gap:12px;display:flex}.scene{width:100%;height:auto;overflow:visible}.caption{fill:var(--ink);font-family:Patrick Hand,cursive;font-size:30px}.scroll-hint{color:var(--muted);z-index:2;font-size:20px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.f-sky{fill:var(--sky);transition:fill .4s}.f-desk{fill:var(--desk)}.f-desk-top{fill:var(--desk-top)}.f-card{fill:var(--card)}.f-card2{fill:var(--card-2)}.f-shape{fill:var(--shape)}.f-accent{fill:var(--accent)}.f-teal{fill:var(--teal)}.f-gold{fill:var(--gold)}.sun{opacity:var(--sun-o);transition:opacity .4s}.moon{opacity:var(--moon-o);transition:opacity .4s}section{position:relative}.sec{padding:110px 0}h2{letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(36px,5vw,60px);line-height:1}h1,h2,.sub,.say{text-wrap:balance}.sub{color:var(--muted);margin:0 0 44px;font-size:24px}.notes{grid-template-columns:repeat(4,1fr);gap:22px;display:grid}.note{padding:26px 20px 20px;position:relative}.note:nth-child(odd){transform:rotate(-2deg)}.note:nth-child(2n){transform:rotate(1.5deg)}.note strong{color:var(--accent);font-size:clamp(32px,9vw,46px);line-height:1;display:block}.note p{color:var(--muted);margin:8px 0 0;font-size:15px}.comic{grid-template-columns:repeat(6,1fr);gap:18px;display:grid}.panel{flex-direction:column;padding:18px;display:flex;position:relative}.panel.big{grid-column:span 3}.panel.mid{grid-column:span 2}.panel svg{background:var(--card-2);border-radius:10px;width:100%;height:auto;margin-bottom:14px}.panel .say,.frame .say{color:var(--ink);font-size:22px;line-height:1.2}.panel .say{margin:0 0 8px}.panel h3{margin:0;font-size:22px}.panel p{color:var(--muted);margin:4px 0 12px;font-size:15px}.chips{flex-wrap:wrap;gap:6px;margin-top:auto;display:flex}.chip{background:var(--card-2);border-radius:20px;padding:3px 9px;font-size:12px;font-weight:600}.prize{background:var(--gold);color:#2a2622;box-shadow:0 3px 4px var(--shadow);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:800;position:absolute;top:-14px;right:14px;transform:rotate(4deg)}.todo{outline:2px dashed var(--accent);outline-offset:3px}.panel.linked{transition:transform .2s,box-shadow .2s}@media (hover:hover){.panel.linked:hover{box-shadow:0 1px 0 #ffffff40 inset, 0 3px 0 -1px var(--card-2), 0 26px 34px -16px var(--shadow);transform:translateY(-4px)rotate(-.4deg)}}.panel.linked:focus-within{outline:2px solid var(--accent);outline-offset:3px}.stretch{color:inherit;text-decoration:none}.stretch span[aria-hidden]{color:var(--muted);font-size:.8em}.stretch:after{content:"";border-radius:inherit;z-index:1;position:absolute;inset:0}@media (hover:hover){.panel.linked:hover .stretch{text-decoration:underline wavy var(--accent)}}.stretch:focus-visible{outline:none}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.strip-sec{overflow:hidden}.scroller{scrollbar-width:none;overflow-x:auto}.scroller::-webkit-scrollbar{display:none}.strip{gap:26px;width:max-content;padding:20px 16px 30px max(16px,50% - 560px);display:flex}.frame{flex:none;width:380px;padding:18px;position:relative}.frame svg{background:var(--card-2);border-radius:10px;width:100%;height:auto}.frame .when{color:var(--accent-ink);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 2px;font-size:14px;font-weight:700}.frame h3{margin:0;font-size:22px}.frame .say{margin:6px 0 0}.farm .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:30px;display:grid}.farm svg{width:100%;height:auto}.medals{grid-template-columns:repeat(4,1fr);gap:26px 18px;display:grid}.medal{text-align:center}.medal svg{width:84px;height:auto}.medal b{font-size:17px;display:block}.medal span{color:var(--muted);font-size:13px}.stat{margin:-24px 0 40px;font-size:26px}.contact{text-align:center;padding-bottom:140px}.env{width:min(520px,100%);margin:0 auto;position:relative}.env svg{width:100%;height:auto;overflow:visible}.letter-links{justify-content:center;margin-top:28px}footer{text-align:center;color:var(--muted);padding:30px 0 50px;font-size:18px}@media (width<=900px){.hero .wrap,.farm .wrap{grid-template-columns:1fr}.navlinks a{display:none}.burger{display:flex}.scroll-hint,.hero .star{display:none}.notes{grid-template-columns:repeat(2,minmax(0,1fr))}.comic{grid-template-columns:minmax(0,1fr)}.panel.big,.panel.mid{grid-column:auto}.medals{grid-template-columns:repeat(2,minmax(0,1fr))}.strip-sec .scroller{scroll-snap-type:x mandatory;overflow-x:auto}.frame{scroll-snap-align:center;width:82vw}}@media (prefers-reduced-motion:reduce){.boil,.bug,.steam{animation:none!important}}.bug{animation:3.2s steps(8,end) infinite alternate crawl}@keyframes crawl{to{transform:translate(-60px,18px)}}.steam{animation:2.4s ease-in-out infinite steam}.steam:nth-of-type(2){animation-delay:.8s}@keyframes steam{0%{opacity:0;transform:translateY(8px)}40%{opacity:.7}to{opacity:0;transform:translateY(-22px)}}
