@font-face{font-family:Space;src:url('/assets/space-grotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:Plex;src:url('/assets/ibm-plex-mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#0a0908;--paper:#f4f2f0;--red:#e01e2f;--muted:#a29b95;--line:#2b2723}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Plex,'DejaVu Sans Mono',monospace}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--red);outline-offset:10px}
.page{max-width:1440px;min-height:100svh;margin:auto;padding:0 6vw;display:flex;flex-direction:column}header{min-height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:inline-flex;align-items:center;gap:16px;font:600 30px Space,sans-serif;letter-spacing:-1px}.small-fox{font:400 24px Plex,'DejaVu Sans',monospace;letter-spacing:0;white-space:nowrap}.small-fox span{color:var(--red)}.header-note{font-size:11px;color:var(--muted)}
main{flex:1;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:5vw;padding:100px 0 112px}.eyebrow{color:var(--red);font-size:11px;letter-spacing:2px;line-height:1.8;margin:0 0 30px}.eyebrow span{margin-right:9px}h1{font:600 clamp(45px,5.3vw,78px)/1.06 Space,sans-serif;letter-spacing:-.055em;margin:0 0 32px}h1 span{color:#87817b}.description{font-size:13px;line-height:1.95;color:var(--muted);margin:0}.scene{min-width:0;min-height:330px;position:relative;border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#0e0c0a;padding:22px}.scene-label{align-self:stretch;display:flex;justify-content:space-between;font-size:9px;color:var(--muted);gap:12px}.fox-wrap{position:relative;text-align:center;margin:36px 0 24px}.fox{white-space:nowrap;font-family:Plex,'DejaVu Sans',monospace;font-size:clamp(44px,5.2vw,72px);line-height:1.5;animation:sway 4.5s ease-in-out infinite;transform-origin:50% 100%}.muzzle{color:var(--red)}.eye{display:inline-block;animation:blink 5.4s infinite;transform-origin:center}.shadow{height:2px;width:65%;margin:22px auto 0;background:var(--line);animation:shadow 4.5s ease-in-out infinite}.scene-caption{font-size:11px;color:var(--muted);margin:0 0 8px}.dots{display:inline-block;animation:dots 2.5s ease-in-out infinite}
footer{border-top:1px solid var(--line);min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.12)}}@keyframes shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.5}}@keyframes dots{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:760px){.page{padding:0 7vw}header{min-height:90px}.brand{font-size:25px;gap:12px}.small-fox{font-size:20px}.header-note{font-size:9px}main{grid-template-columns:1fr;gap:48px;padding:62px 0}h1{font-size:clamp(43px,10vw,68px)}.description{font-size:12px}.scene{min-height:280px}.fox{font-size:58px}.eyebrow{font-size:9px;letter-spacing:1.5px}footer{font-size:9px;flex-wrap:wrap;padding:20px 0;min-height:75px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}