:root{--cream:#fbf6e9;--ink:#3e3026;--sage:#7d9e81;--line:#dedcc9;--muted:#898777}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}header{height:112px;padding:30px 5%;display:flex;align-items:center;gap:36px;position:relative;z-index:5}.wordmark{font-size:54px;font-weight:900;letter-spacing:-5px;color:var(--ink);text-decoration:none;line-height:1}.wordmark span{font-size:12px;letter-spacing:0;vertical-align:top;margin-left:8px}.brand-note{font-size:9px;letter-spacing:1.6px;line-height:1.6}#pause{margin-left:auto;background:none;border:1px solid var(--line);border-radius:28px;padding:12px 18px;font-size:12px}#pause span{margin-left:15px}main{position:relative;height:calc(100svh - 186px);min-height:350px;isolation:isolate;overflow:hidden}.intro{position:absolute;top:4%;left:8%;z-index:1;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;display:flex;gap:9px;align-items:center}.eyebrow span,.status i{width:6px;height:6px;background:var(--sage);border-radius:50%;display:inline-block}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(45px,5.8vw,88px);line-height:1.02;letter-spacing:-4px;margin:23px 0 18px}h1 em{font-weight:400;color:#789579}.intro p{font-size:12px;color:var(--muted)}.orbit{position:absolute;border:1px solid #e8e5d7;border-radius:50%;width:480px;height:480px;left:50%;top:52%;transform:translate(-50%,-50%);z-index:-1}.orbit-two{width:610px;height:610px;opacity:.55}.side-note{position:absolute;right:8%;top:42%;transform:rotate(5deg);color:#868875;pointer-events:none}.side-note span{font-size:8px;letter-spacing:1.7px}.side-note p{font-family:Georgia,serif;font-style:italic;font-size:22px;line-height:1.45}.side-note svg{margin-left:35px;transform:rotate(75deg)}#mascot{position:absolute;width:260px;height:260px;left:0;top:0;z-index:3;pointer-events:none;will-change:transform}.character{position:absolute;inset:0;transform-origin:50% 90%}.chew{position:absolute;inset:0;background-image:url('assets/chewing.webp');background-size:100% 100%;background-repeat:no-repeat}.open{clip-path:inset(0 0 13% 0);display:none;position:absolute;width:100%;height:100%;overflow:hidden}.open img{position:absolute;width:146%;max-width:none;left:-22%;top:-12%}.chasing .chew,.noticing .chew{display:none}.chasing .open,.noticing .open{display:block}.chasing .character{animation:waddle .25s infinite alternate}.noticing .character{transform:rotate(-7deg)}.eating .character{animation:munch .2s infinite alternate}.shadow{position:absolute;bottom:1%;left:20%;width:64%;height:12px;background:#696445;filter:blur(8px);opacity:.12;z-index:-1}#bubble{position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-5deg);white-space:nowrap;font-family:Georgia,serif;font-style:italic;font-size:17px;color:#778b70;transition:opacity .2s}.instructions{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:11px;color:#807e70;z-index:5}.mouse-symbol{font-size:25px;color:var(--sage)}#feed{border:0;border-bottom:1px solid #a4ad94;background:none;padding:8px 0;margin-left:20px;font-size:11px;color:var(--ink)}#feed span{margin-left:9px}footer{height:74px;margin:0 5%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.3px}.status{display:flex;gap:9px;align-items:center;font-size:10px;letter-spacing:.1px}.escape{color:var(--muted);font-size:8px}#cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none;transform-origin:5px 5px;will-change:transform}.custom-cursor,.custom-cursor *{cursor:none!important}.custom-cursor #cursor{display:block}.cursor-eaten #cursor{opacity:0}button:focus-visible,a:focus-visible{outline:2px solid #628368;outline-offset:5px}@keyframes waddle{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(5deg) translateY(-7px)}}@keyframes munch{from{transform:scale(1.025,.98)}to{transform:scale(.985,1.015)}}@media(max-width:760px){header{height:86px;padding:20px 6%}.wordmark{font-size:43px}.brand-note{display:none}main{height:calc(100svh - 150px)}.intro{top:2%;left:7%}h1{font-size:50px;letter-spacing:-2.5px;margin:17px 0}.eyebrow{font-size:7px}.side-note{display:none}.orbit{width:330px;height:330px;top:58%}.orbit-two{width:450px;height:450px}#mascot{width:220px;height:220px}.instructions{bottom:12px;gap:8px;flex-wrap:wrap;justify-content:center;width:90%;white-space:normal}#feed{margin-left:8px}footer{height:64px}.escape{display:none}footer>span{font-size:7px}.status{font-size:9px}}@media(prefers-reduced-motion:reduce){.character{animation:none!important}}
/* A quiet, full-screen stage. The interaction is a surprise. */
main{height:100svh;min-height:0;width:100%;}#mascot{width:280px;height:280px;}@media(max-width:760px){main{height:100svh;}#mascot{width:230px;height:230px;}}
/* Keep the body, horns, fork and feet on one fixed frame. */
.chew{background-position:0 0;}
.eating .character{animation:none;}

canvas.chew{width:100%;height:100%;}
body.swallowed,body.swallowed *{cursor:none!important;}
.sweat{position:absolute;inset:0;width:100%;height:100%;opacity:var(--sickness,0);pointer-events:none;}
.burping .chew{display:none}.burping .open{display:block}.burping .character{animation:burp .7s ease-out both}
.burp-puff{display:none;position:absolute;left:52%;top:47%;width:1px;height:1px;pointer-events:none}.burping .burp-puff{display:block}.burp-puff i{position:absolute;width:25px;height:25px;border:2px solid #aebc91;background:#dce4c9;border-radius:50%;animation:puff .85s ease-out both}.burp-puff i:nth-child(2){animation-delay:.07s;margin-top:-18px}.burp-puff i:nth-child(3){animation-delay:.13s;margin-top:14px}
@keyframes burp{0%{transform:scale(1,1)}20%{transform:scale(.94,1.08)}42%{transform:scale(1.1,.92)}100%{transform:scale(1,1)}}
@keyframes puff{from{transform:translate(0,0) scale(.3);opacity:.8}to{transform:translate(95px,-35px) scale(2);opacity:0}}

.snacks{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:26px;align-items:center;pointer-events:none;white-space:nowrap}
.snacks span{display:flex;align-items:center;gap:7px}
.snacks svg{height:24px;width:auto;display:block}
.snacks b{font:700 15px/1 Arial,Helvetica,sans-serif;color:#6e6754;font-variant-numeric:tabular-nums}
.snacks[hidden]{display:none}

/* The pixel mascot, drawn by sprite.js at a whole-number scale of the 64px
   art: the box is 4x on desktop, 3x on phones. Rotating or scaling pixel art
   by a fraction smears it, so the old waddle and munch are gone -- the run
   and chew animations carry that now -- and noticing is a hop, not a tilt. */
#mascot{width:256px;height:256px}
@media(max-width:760px){#mascot{width:192px;height:192px}}
.sprite{position:absolute;background-repeat:no-repeat;image-rendering:pixelated}
.chasing .character,.eating .character{animation:none}
.noticing .character{transform:none;animation:none}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}

/* Drags on the stage belong to the page, not the browser: without this a
   moving finger becomes a scroll/zoom, the touch is cancelled, and he gives up. */
#playground{touch-action:none}

/* The snack pile, heaped just above the counters. Inside the stage, so it
   stays behind the mascot (z-index 3) when he walks past it. */
#pile{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);image-rendering:pixelated;pointer-events:none;z-index:2}