@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f2ec;--ink:#29292b;--muted:#777571;--line:#dedbd5;--panel:#fffaf1;--accent:#cfdb94}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100svh;overflow:hidden;transition:background .3s,color .3s}body.dark{--bg:#292c35;--ink:#f1ede4;--muted:#b6b6c0;--line:#464953;--panel:#353944;--accent:#a7bbe4}header{height:108px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:bold 40px 'Manrope',sans-serif;color:var(--ink);text-decoration:none;letter-spacing:-5px}.brand span{font-size:23px;color:#8c9d59;vertical-align:top;letter-spacing:0}.tag,.eyebrow,.caption,#status{font-size:10px;letter-spacing:1.8px;font-weight:600}button{font:inherit;color:inherit;cursor:pointer}header button{border:0;background:none;font-size:19px;display:flex;gap:9px;align-items:center}header button span{font-size:12px}main{position:relative;margin:9vh 0 0 12%;pointer-events:none}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{width:7px;height:7px;background:#8c9d59;border-radius:50%}h1{font:500 clamp(48px,6.5vw,96px)/1.05 'Manrope',sans-serif;letter-spacing:-5px;margin:25px 0}h1 em{font-family:Georgia,serif;font-weight:400}p{color:var(--muted);font-size:16px;line-height:1.7}.socials{display:flex;align-items:center;gap:14px;margin-top:16px;pointer-events:auto}.social{display:inline-flex;color:var(--muted);text-decoration:none}.social svg{width:22px;height:22px;fill:currentColor}.social:hover{color:var(--ink)}.social:focus-visible{outline:2px dashed var(--ink);outline-offset:4px;border-radius:6px}.hint{font-size:13px;color:var(--muted);margin-top:34px;transform:rotate(-5deg);display:inline-block}.ground{position:fixed;bottom:0;width:100%;height:32vh;background:var(--accent);opacity:.22;border-radius:50% 50% 0 0/35% 35% 0 0;pointer-events:none}footer{position:fixed;bottom:35px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:20px}.caption,#status{font-size:9px;color:var(--muted)}.controls{background:var(--panel);border:1px solid var(--line);padding:7px;border-radius:16px;display:flex;box-shadow:0 8px 24px #00000006}.controls button{border:0;background:none;padding:8px 9px;font-size:12px;border-radius:10px;display:inline-flex;align-items:center}.controls button:hover{background:var(--accent);color:#29292b}.controls span{margin-left:6px;min-width:16px;padding:1px 5px 2px;border:1px solid var(--line);border-bottom-width:2.5px;border-radius:5px;background:var(--bg);color:var(--muted);font-size:10px;font-weight:600;line-height:14px;text-align:center}.controls i{border-left:1px solid var(--line);margin:8px 2px}#beanie{position:fixed;top:0;left:0;width:96px;height:104px;border:0;padding:0;background:transparent;touch-action:none;user-select:none;cursor:grab;z-index:5;-webkit-tap-highlight-color:transparent}#beanie.dragging{cursor:grabbing}#beanie:focus-visible{outline:2px dashed #7e955a;outline-offset:6px;border-radius:20px}.sprite{display:block;width:96px;height:104px;background:url('spritesheet.png') no-repeat;background-size:768px 1144px;pointer-events:none}.shadow{position:absolute;bottom:3px;left:30px;width:34px;height:5px;border-radius:50%;background:#0002;filter:blur(2px);z-index:-1}#beanie.dragging .shadow{transform:scale(.7);opacity:.4}@media(max-width:700px){header{height:80px}.tag{display:none}main{margin:11vh 8% 0}h1{letter-spacing:-3px}.caption{display:none}footer{bottom:22px;justify-content:center}#status{display:none}.controls button{padding:8px 9px}.hint{margin-top:15px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Overhead light: a soft ground contact shadow, behind the sprite. */
#beanie{isolation:isolate}
#beanie .sprite{position:relative;z-index:1}
#beanie .shadow{left:23px;bottom:4px;width:46px;height:10px;background:radial-gradient(ellipse at center,rgba(32,29,25,.3) 0%,rgba(32,29,25,.15) 38%,rgba(32,29,25,0) 72%);filter:blur(1px);z-index:0;pointer-events:none;transform:scale(var(--shadow-scale,1));opacity:var(--shadow-opacity,1);transition:transform 90ms linear,opacity 90ms linear}
#beanie.dragging .shadow{transform:scale(var(--shadow-scale,1));opacity:var(--shadow-opacity,1)}

/* Minimal page: only the introduction and interactive controls. */
header{justify-content:flex-end;border-bottom:0}
footer{justify-content:center}

#letter-home{display:inline-block}#letter-home.taken{visibility:hidden}
#carried-letter{position:fixed;top:0;left:0;z-index:6;pointer-events:none;font-family:'Manrope',sans-serif;font-weight:500;line-height:1.05;transform-origin:50% 80%;color:var(--ink);user-select:none}
[hidden]{display:none!important}
#beanie.carrying{cursor:grab}

.magnets{display:inline-flex;gap:0;vertical-align:baseline}
.magnet-slot{display:inline-block;position:relative}
.magnet{display:block;font-family:'Euclid Circular A','Manrope',sans-serif;font-size:inherit;font-weight:500;line-height:1.05;letter-spacing:inherit;color:var(--ink);transform:rotate(var(--tilt));user-select:none;pointer-events:none}
.m0,.m1,.m2,.m3{--tilt:0deg}
.magnet.loose{position:fixed;left:0;top:0;z-index:7;transform-origin:center;}
.magnet.grabbed{cursor:grabbing}.magnet:focus-visible{outline:2px dashed var(--ink);outline-offset:5px;border-radius:10px}

/* The letters in "Jeff" look like the rest of the title; only JB can move them. */

/* Friendly illustrated theme toggle, matching Beanie's bold outlines. */
#theme{width:56px;height:56px;padding:4px;display:grid;place-items:center;border-radius:50%;transition:transform .18s ease,background .18s ease}
#theme img{width:48px;height:48px;grid-area:1/1;object-fit:contain}
#theme .moon-icon{display:none}body.dark #theme .sun-icon{display:none}body.dark #theme .moon-icon{display:block}
#theme:hover{transform:rotate(-8deg) scale(1.07);background:#bdb5ec20}
#theme:active{transform:scale(.94)}#theme:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}

/* Agent actions: hidden until opened from JB's right-click menu, and closable. */
footer[hidden],.jb-menu[hidden]{display:none}
.close-actions{font-size:17px!important;line-height:1;padding:6px 10px!important;color:var(--muted)}
.controls button.move{align-self:center;width:24px;height:24px;min-width:0;margin-left:3px;padding:0;justify-content:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--bg);color:var(--muted);font-size:12px;line-height:1;touch-action:none;user-select:none}
.controls i+button.move{margin-left:6px}.controls button.move:has(+ i){margin-right:6px}
.controls button.move:hover,.controls button.move.held{background:var(--accent);color:#29292b}
.jb-menu{position:fixed;z-index:2147483001;min-width:160px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px #0000001f}
.jb-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:13px}
.jb-menu button:hover,.jb-menu button:focus-visible{background:var(--accent);color:#29292b;outline:none}

/* The "hi, I'm" title. */
@font-face{font-family:'Euclid Circular A';src:url('fonts/EuclidCircularA-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
h1{font-family:'Euclid Circular A','Manrope',sans-serif}