:root{--paper:#F6F6F3;--ink:#141414;--pencil:#9A9A94;--muted:#5E5E59;--card:#FFFFFF;--font-display:'Instrument Serif',serif;--font-text:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text)}
a{color:var(--ink)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.enso{stroke-dasharray:0 100;animation:enso 2.8s cubic-bezier(.65,0,.35,1) forwards}
@keyframes enso{to{stroke-dasharray:88 100}}
.water{animation:flow 9s linear infinite}.water2{animation:flow 15s linear infinite reverse}
@keyframes flow{to{transform:translateX(-260px)}}
.bob{transform-box:fill-box;transform-origin:50% 100%;animation:bob 6s ease-in-out 2.4s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(2.5deg)}}
.ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:ripple 6s ease-out 2.6s infinite}
@keyframes ripple{0%{transform:scale(.4);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.sweep{transform-box:view-box;transform-origin:260px 200px;opacity:0;animation:show .8s ease 2.6s forwards,rot 6s linear 2.6s infinite}
@keyframes show{to{opacity:1}}
@keyframes rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.blip{opacity:0;animation:blip 6s linear infinite}
@keyframes blip{0%{opacity:1}45%{opacity:.25}100%{opacity:0}}
.ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:ping 6s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}22%{transform:scale(4.2);opacity:0}100%{opacity:0}}
.word{opacity:0;filter:blur(10px);letter-spacing:.14em;animation:word 3.6s cubic-bezier(.22,.8,.24,1) 1.4s forwards}
@keyframes word{to{opacity:1;filter:blur(0);letter-spacing:-.02em}}
.late{opacity:0;animation:late 1.2s ease 4.2s forwards}
@keyframes late{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade{animation:fade 1.2s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.hub-sweep{transform-box:view-box;transform-origin:100px 100px;animation:rot 6s linear .4s infinite}
.bob-s{transform-box:fill-box;transform-origin:50% 100%;animation:bob2 5s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(3deg)}}
.icon{transition:transform .3s cubic-bezier(.22,.8,.24,1)}
.app:hover .icon{transform:translateY(-5px)}
.app:focus-visible{outline:none}
.app:focus-visible .icon{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pen{transform-box:fill-box;transform-origin:0% 100%;animation:write 3s ease-in-out infinite}
@keyframes write{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-1px)}50%{transform:translate(4px,0)}75%{transform:translate(2px,1px)}}
.leaf{transform-box:fill-box;transform-origin:0% 100%;animation:sway 5s ease-in-out infinite}
.leaf2{transform-box:fill-box;transform-origin:0% 100%;animation:sway 5s ease-in-out -2.5s infinite}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
.check{stroke-dasharray:1;stroke-dashoffset:1;animation:check 4s cubic-bezier(.65,0,.35,1) 1s infinite}
@keyframes check{0%{stroke-dashoffset:1}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.print{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:96px;height:96px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.print .glow{position:absolute;inset:-34px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(20,20,20,.42) 0%,rgba(20,20,20,.2) 38%,rgba(20,20,20,0) 68%);opacity:calc(var(--p,0)*1.15);transform:scale(calc(.5 + var(--p,0)*.75))}
.print svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.print.done .glow{animation:pulse .5s ease-out forwards}
@keyframes pulse{to{opacity:0;transform:scale(2.4)}}
.print .hint{position:absolute;right:104px;bottom:38px;white-space:nowrap;font-size:12px;color:var(--muted);opacity:0;animation:late 1.2s ease 5s forwards;pointer-events:none}
.tile{width:clamp(64px,17vw,104px);aspect-ratio:1;border:1.5px solid var(--ink);border-radius:26%;background:var(--card);display:grid;place-items:center}
.soon .tile{border-style:dashed;border-color:var(--pencil);background:transparent}
.soon{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}.draw,.check{stroke-dashoffset:0}.enso{stroke-dasharray:88 100}.word,.late,.sweep{opacity:1;filter:none}.hint{opacity:1}.ping,.ripple,.blip{opacity:0}.print .glow{opacity:0}}
.ring{display:none}
@media (prefers-reduced-motion:reduce){.ring{display:block}}