@font-face{font-family:Anton;src:url("assets/Anton-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
:root{--blue:#29b9ef;--ink:#050505;--signature-colour:#29b9ef}
*{box-sizing:border-box}html{background:white;color:var(--ink)}body{margin:0;font-family:"Courier New",monospace;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,.marquee:focus-visible{outline:3px solid var(--blue);outline-offset:5px}[hidden]{display:none!important}.definitions{position:absolute;width:0;height:0}.page{max-width:1680px;margin:0 auto;padding:14px 2.5vw 0}.header{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:3px solid var(--ink);position:relative}.header:after{content:"";position:absolute;left:0;right:0;bottom:-4px;border-bottom:1px solid black;transform:rotate(-.12deg)}.brand{font-family:Anton,sans-serif;font-size:26px;letter-spacing:.02em}.project-nav{display:flex;gap:14px;padding:0 0 10px}.sketch{position:relative;border:0;border-radius:0;isolation:isolate}.sketch>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:var(--ink);z-index:2}.social{display:flex;align-items:center;justify-content:center;gap:11px;min-height:40px;padding:7px 17px;background:white;font:20px Anton,sans-serif}.social img{object-fit:contain}.social:hover{background:#d9f3fe}.hero{display:grid;grid-template-columns:43% 57%;position:relative;min-height:500px;height:clamp(490px,54vw,570px);align-items:center}.hero-copy{position:relative;z-index:2;align-self:center;padding:24px 0 8px}.hero h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(116px,16.6vw,265px);line-height:1;margin:0 0 14px;letter-spacing:-.025em}.hero h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(30px,4.12vw,67px);line-height:1.1;white-space:nowrap;margin:0 0 19px}.hero p{font-size:clamp(17px,2vw,33px);line-height:1.2;margin:0 0 34px;white-space:nowrap}.accelerate{display:flex;align-items:center;justify-content:flex-start;gap:25px;background:var(--blue);font-size:clamp(23px,2.7vw,43px);padding:17px 27px;min-height:91px;width:83%;max-width:455px;transition:background .15s}.accelerate:hover{background:#5dccf5}.accelerate:active{transform:translateY(2px)}.back-arrow{font-family:Arial,sans-serif;font-size:1.6em;line-height:.7}.hero-art{position:relative;align-self:stretch;margin-left:-30px;pointer-events:none}.graph{position:absolute;width:100%;height:100%;right:-1%;top:0;overflow:visible}.graph text{font-family:"Courier New",monospace;font-size:29px;font-weight:bold}.character{position:absolute;width:100%;height:91%;object-fit:contain;object-position:bottom;left:-5%;bottom:10px;transform-origin:50% 85%;animation:wobble 5s ease-in-out infinite;-webkit-user-select:none;user-select:none}.ca-bar{display:flex;align-items:center;padding:12px 26px;gap:25px;min-height:71px;margin:8px 0 23px}.ca-bar>strong{font:27px Anton,sans-serif}.ca-divider{height:32px;border-left:2px solid}.ca-bar code{font-size:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.coming-soon{font-size:16px;white-space:nowrap}.copy-button{background:white;font:18px Anton,sans-serif;min-width:148px;min-height:45px;padding:8px 16px;white-space:nowrap}.copy-button:hover{background:#ddf4ff}.memes>h2{display:table;position:relative;font:27px Anton,sans-serif;margin:0 0 22px}.memes>h2:after{content:"";height:7px;border-top:2px solid var(--blue);border-bottom:1px solid var(--blue);position:absolute;bottom:-10px;left:-5px;width:160%;transform:rotate(-3deg)}.marquee{overflow:hidden;padding:4px 2px 7px}.marquee-track,.meme-group{display:flex}.meme-group{gap:25px;padding-right:25px}.meme-card{display:block;width:clamp(260px,22.7vw,380px);aspect-ratio:1.72;background:white;padding:7px;border:0}.meme-card:nth-child(odd){transform:rotate(-.6deg)}.meme-card:nth-child(even){transform:rotate(.5deg)}.meme-card img,.meme-card video{display:block;width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none}.meme-card:hover{background:#def4fe}.footer{height:90px}.forest-signature{--signature-colour:#29b9ef;--signature-size:190px}.forest-links a{background:white;color:black}.viewer{width:min(1100px,95vw);max-height:94dvh;border:3px solid black;padding:18px;background:white;box-shadow:7px 7px 0 var(--blue);overflow:auto}.viewer::backdrop{background:rgba(255,255,255,.92)}.viewer-top,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.viewer-top{font:24px Anton,sans-serif}.viewer button{background:white;padding:12px 20px;min-height:46px}.viewer button:hover{background:#dff5ff}.viewer-media{display:grid;place-items:center;margin:16px 0;min-height:100px}.viewer-media img,.viewer-media video{max-width:100%;max-height:69dvh;object-fit:contain}.viewer-bottom{font-size:16px}.viewer-close{font:18px Anton,sans-serif}body.viewer-open{overflow:hidden}.accelerating .character{animation:fast-wobble .11s linear infinite}.accelerating #progress-line{stroke:#00b0fc}.accelerating .accelerate{background:#87ddff}.accelerating .chart-arrow{animation:arrow-jitter .18s linear infinite}
@keyframes wobble{0%,100%{transform:rotate(-.45deg) translateY(0)}50%{transform:rotate(.45deg) translateY(-3px)}}@keyframes fast-wobble{0%,100%{transform:rotate(-1.4deg) translate(-2px,0)}50%{transform:rotate(1.4deg) translate(2px,-3px)}}@keyframes arrow-jitter{50%{transform:translate(2px,4px)}}
body{position:relative;min-height:100dvh}
.forest-signature{position:fixed}
@media(min-width:1001px){.hero{height:540px;min-height:500px}.hero h1{font-size:clamp(160px,16vw,255px)}.hero h2{font-size:clamp(46px,4.9vw,77px)}.character{width:112%;height:100%;left:-12%}}
@media(min-width:1600px){.hero{height:570px}}
@media(max-width:1000px) and (min-width:701px){.hero{height:430px;min-height:430px}.accelerate{min-height:69px;padding:14px 18px;gap:16px}.hero p{margin-bottom:24px}.hero-art{margin-left:-5px}.hero h1{font-size:16vw}.hero h2{font-size:4vw}}
@media(max-width:700px){.page{padding:12px 17px 0}.header{min-height:49px}.brand{font-size:24px}.project-nav{gap:9px;padding-bottom:8px}.social{font-size:16px;min-height:39px;gap:7px;padding:7px 12px}.social img{width:21px;height:23px}.hero{display:flex;flex-direction:column;height:auto;min-height:0;padding:24px 0 0;gap:0}.hero-copy{align-self:stretch;padding:0;z-index:2}.hero h1{font-size:clamp(104px,29vw,188px);line-height:.98;margin-bottom:10px}.hero h2{font-size:clamp(30px,8.7vw,52px);margin-bottom:11px}.hero p{font-size:clamp(15px,4.5vw,25px);white-space:normal;margin-bottom:18px}.accelerate{width:100%;max-width:390px;min-height:64px;font-size:27px;padding:13px 23px;gap:23px}.hero-art{width:100%;height:280px;min-height:0;margin:8px 0 -3px;align-self:center}.character{width:103%;height:95%;left:-3%;bottom:0}.graph{width:100%;right:0}.ca-bar{padding:13px 13px;gap:12px;min-height:64px;margin:13px 0 22px;flex-wrap:wrap}.ca-bar>strong{font-size:23px}.ca-divider{height:25px}.ca-bar code{font-size:15px}.coming-soon{font-size:13px}.copy-button{min-width:93px;font-size:15px;min-height:36px;padding:7px 10px}.memes>h2{font-size:25px;margin-bottom:19px}.meme-card{width:76vw;max-width:440px}.meme-group{gap:18px;padding-right:18px}.footer{height:85px}.forest-signature{--signature-size:155px}.viewer{padding:12px}.viewer-media img,.viewer-media video{max-height:65dvh}.viewer-top{font-size:22px}.viewer button{padding:9px 14px}.viewer-bottom{gap:8px;font-size:14px}}
@media(max-width:375px){.page{padding-left:12px;padding-right:12px}.coming-soon{order:5;width:100%;text-align:left;padding-left:48px}.ca-bar{row-gap:5px}.hero-art{height:250px}.social{padding:7px 10px}.project-nav{gap:6px}}
@media(prefers-reduced-motion:reduce){.character,.accelerating .character,.accelerating .chart-arrow{animation:none!important}*{scroll-behavior:auto!important}}

.copy-button{border:2px solid var(--ink);transform:rotate(-.35deg)}

/* Fill the desktop viewport with the approved composition, not a fixed-size island. */
.brand svg{display:block;width:86px;height:43px}
.hero h1{font-size:0;line-height:0;margin:0 0 15px}
.hero h1 svg{display:block;width:100%;height:clamp(185px,27dvh,320px)}
.hero h2{font-size:clamp(27px,3vw,58px);white-space:normal;line-height:1.1}
.hero p{margin-bottom:24px}
.footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:60px;height:60px}
.music-volume{display:flex;align-items:center;gap:8px;font:14px "Courier New",monospace;color:#333}
.music-volume input{width:clamp(70px,10vw,110px);min-height:28px;margin:0;accent-color:var(--blue);cursor:pointer}
.music-volume output{min-width:4ch;text-align:right}
#sound-toggle{padding:9px 12px;border:0;background:white;font:14px "Courier New",monospace;color:#333}
#sound-toggle:hover{color:black;text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:5px}
@media(min-width:1001px){
 .page{max-width:none;width:100%;min-height:100dvh;display:flex;flex-direction:column;padding:14px 2.6vw 0}
 .page>main{flex:1;display:flex;flex-direction:column;min-height:0}
 .hero{height:auto;min-height:390px;flex:1}
 .hero-copy{padding:12px 0 8px}
 .hero h1 svg{height:clamp(160px,20dvh,240px)}
 .hero-art{min-width:0}
 .character{height:100%;width:112%;left:-12%}
 .hero h2{margin-bottom:18px}
 .accelerate{min-height:76px;font-size:clamp(25px,2.15vw,40px);padding:15px 24px;max-width:500px}
 .ca-bar{flex-shrink:0;min-height:66px;margin:10px 0 19px}
 .memes{flex-shrink:0}
 .meme-card{width:clamp(290px,25vw,480px)}
 .footer{flex-shrink:0}
}
@media(min-width:701px) and (max-width:1000px){
 .hero h1 svg{height:190px}
 .hero h2{font-size:30px}
 .hero p{font-size:17px;white-space:normal}
}
@media(max-width:700px){
 .brand svg{width:75px;height:38px}
 .hero h1 svg{height:clamp(150px,43vw,210px);width:100%;margin:0}
 .hero h1{margin-bottom:9px}
 .hero h2{font-size:clamp(26px,7.5vw,43px);margin-bottom:12px}
 .hero p{margin-bottom:18px}
 .footer{height:68px;min-height:68px}
}

/* Decorative cursor images never affect page dimensions or hit testing. */
.image-trail{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4;contain:strict}
.image-trail img{position:absolute;left:0;top:0;width:clamp(132px,14.4vw,216px);height:auto;aspect-ratio:1.72;object-fit:contain;background:white;border:var(--trail-border-width,0px) solid var(--trail-border-color,transparent);box-shadow:none;will-change:transform,opacity}
@media(min-width:1001px){
 .page{height:auto}
 .page>main{flex:1;min-height:0}
 .hero{min-height:390px}
 .hero-art{overflow:hidden}
}
@media(min-width:1001px) and (max-height:850px){
 .hero{min-height:320px}
 .hero h1 svg{height:clamp(120px,19dvh,160px)}
 .hero h1{margin-bottom:10px}
 .hero h2{margin-bottom:12px}
 .hero p{font-size:clamp(17px,1.6vw,24px);margin-bottom:17px}
 .accelerate{min-height:60px;padding:11px 24px}
 .ca-bar{margin:7px 0 12px;min-height:60px;padding-top:8px;padding-bottom:8px}
 .memes>h2{margin-bottom:15px}
 .meme-card{width:clamp(230px,21vw,360px)}
 .footer{height:45px;min-height:45px}
}

/* Keep intrinsic media sizes from stretching the reel or adding blank space. */
.meme-card{position:relative;min-height:0}
.meme-card img,.meme-card video{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
.social-icon{display:flex;align-items:center}.social-icon svg{width:24px;height:26px;fill:currentColor}
