@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap');
*{box-sizing:border-box}html,body{margin:0;background:#111;color:#111;font-family:'Space Mono',monospace;overflow:hidden}body{cursor:crosshair}.grain{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.panel{width:100vw;height:100vh;min-height:1080px;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;flex:none}.panel>*{position:relative;z-index:2}#scroller{height:100vh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth}header{position:fixed;z-index:50;top:22px;left:30px;right:30px;height:58px;border:3px solid #111;background:#fff;display:flex;align-items:center;padding:0 18px;box-shadow:6px 6px 0 #111;transform:rotate(-.15deg)}header a{color:#111;text-decoration:none;font-weight:700}.brand{display:flex;align-items:center;font-size:22px;margin-right:auto}.brand img{width:40px;height:40px;object-fit:contain;margin-right:8px}nav{display:flex;gap:28px;font-size:13px}nav a:hover{text-decoration:underline;text-decoration-thickness:3px}.sound{margin-left:25px;border:0;background:#d9ff38;width:34px;height:34px;border-radius:50%;font-size:20px}.hero{background:linear-gradient(#64c8ff 0 58%,#fff6c9 58%)}.sun{position:absolute;width:180px;height:180px;border:8px solid #111;border-radius:50%;background:#ffdb32;right:8%;top:13%;box-shadow:18px 14px 0 #ff6b57;animation:float 5s ease-in-out infinite}.cloud{position:absolute;background:#fff;border:4px solid #111;border-radius:50%;width:240px;height:90px;filter:drop-shadow(8px 8px 0 #111)}.c1{left:7%;top:17%;transform:rotate(-4deg)}.c2{right:28%;top:28%;transform:scale(.65) rotate(5deg)}.hero-copy{position:absolute;left:8%;top:27%;width:48%}.kicker{display:inline-block;background:#111;color:#fff;padding:8px 13px;transform:rotate(-2deg)}h1,h2{font-family:Anton,sans-serif;margin:0;line-height:.83;letter-spacing:-2px}.hero h1{font-size:clamp(150px,13vw,260px);text-shadow:7px 7px 0 #fff}.hero h1 i{font-style:normal;color:#ff5c4d;-webkit-text-stroke:4px #111}.hero-copy>p{font-size:26px;font-weight:700;transform:rotate(-1deg)}.ca{border:4px solid #111;background:#d9ff38;padding:17px 22px;font:700 18px 'Space Mono';box-shadow:7px 7px 0 #111;cursor:pointer;transform:rotate(1deg)}.ca:hover{transform:translate(4px,4px) rotate(-1deg);box-shadow:3px 3px 0 #111}.ca em{font-size:11px;margin-left:18px}.hero-jug{position:absolute;right:5%;bottom:4%;width:38%;animation:jugBob 3.2s ease-in-out infinite}.hero-jug img{width:100%;filter:drop-shadow(15px 18px 0 rgba(0,0,0,.16))}.orbit{position:absolute;right:5%;top:0;font:100px Anton;color:#d9ff38;-webkit-text-stroke:4px #111;animation:spin 6s linear infinite}.grass{position:absolute!important;z-index:1!important;left:-2%;right:-2%;bottom:-2%;height:27%;background:repeating-linear-gradient(78deg,#4a9e38 0 7px,#79c843 7px 13px,#2d762e 13px 18px);clip-path:polygon(0 44%,5% 28%,8% 49%,14% 20%,18% 51%,24% 32%,29% 52%,34% 24%,39% 51%,45% 31%,51% 54%,57% 26%,64% 50%,70% 23%,76% 48%,82% 29%,89% 52%,94% 22%,100% 45%,100% 100%,0 100%)}.scribble{position:absolute;left:3%;top:12%;font-weight:700;transform:rotate(-8deg)}.note{position:absolute;bottom:4%;left:5%;background:#fff;padding:8px;border:3px solid #111;transform:rotate(3deg)}
.story{background:#ff6b57}.paper{position:absolute;left:7%;top:16%;width:47%;height:68%;background:#f5f0df;border:4px solid #111;padding:55px 65px;box-shadow:14px 14px 0 #111;transform:rotate(-1.5deg)}.paper h2{font-size:100px}.paper mark{background:#d9ff38;padding:0 12px}.paper p{font-size:18px;line-height:1.55}.paper strong{display:inline-block;margin-top:20px;border-bottom:5px solid #111}.tape{position:absolute;top:-25px;left:42%;width:150px;height:55px;background:#f7d37a88;transform:rotate(4deg)}.story-jug{position:absolute;right:3%;bottom:-7%;width:42%;filter:drop-shadow(16px 16px 0 #111);transform:rotate(3deg)}.black-card{position:absolute;right:7%;top:17%;width:30%;background:#111;color:#fff;padding:25px;border:4px solid #fff;transform:rotate(4deg);text-align:center}.eyes{font-size:80px}.black-card p{font-size:24px}.sticker{position:absolute;right:38%;bottom:14%;background:#56d8ff;border:4px solid #111;border-radius:50%;width:170px;height:170px;display:grid;place-items:center;text-align:center;font-weight:700;transform:rotate(-12deg)}
.moods{background:#f4efe2}.mood-head{position:absolute;left:5%;top:13%;z-index:4}.mood-head h2{font-size:80px}.mood-head h2 span{color:#654cff}.mood-head p{font-weight:700}.pose-sheet{position:absolute;left:2%;right:2%;top:29%;bottom:8%;border:5px solid #111;background:#111;overflow:hidden;box-shadow:14px 14px 0 #ffdb32}.pose-sheet img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}.ticker{position:absolute;bottom:0;left:0;width:100%;height:60px;background:#d9ff38;border-top:4px solid #111;display:flex;align-items:center;overflow:hidden;font-weight:700;font-size:22px}.ticker span{white-space:nowrap;animation:ticker 18s linear infinite}
.lore{background:#10101b;color:#fff}.stars{position:absolute!important;inset:0;background-image:radial-gradient(#fff 1.5px,transparent 1.5px);background-size:47px 47px;opacity:.45}.lore-copy{position:absolute;left:7%;top:16%;width:46%}.chapter{color:#d9ff38;border:2px solid #d9ff38;padding:7px}.lore h2{font-size:105px;margin:30px 0}.lore h2 i{color:#ff6b57}.lore-copy p{font-size:18px;line-height:1.55}.planet{position:absolute;right:2%;bottom:-15%;width:48%;height:75%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#654cff,#1d1d38 55%,#080810 70%);border:5px solid #fff;box-shadow:0 0 90px #654cff}.planet img{position:absolute;width:75%;left:4%;top:-36%;filter:drop-shadow(0 25px 15px #000)}.radio{position:absolute;right:4%;top:17%;border:3px solid #d9ff38;color:#d9ff38;padding:18px;transform:rotate(3deg)}
.join{background:#d9ff38}.join-copy{position:absolute;left:8%;top:18%;width:48%}.join-copy>span{background:#111;color:#fff;padding:8px}.join h2{font-size:150px;margin:25px 0}.join h2 i{color:#654cff;-webkit-text-stroke:3px #111}.join-copy p{font-size:20px;max-width:650px}.links{display:flex;gap:15px;margin:35px 0}.links a{background:#fff;border:4px solid #111;color:#111;text-decoration:none;padding:18px;font-weight:700;box-shadow:6px 6px 0 #111}.links a:hover{background:#56d8ff}.big{font-size:24px;background:#ff6b57}.join-jug{position:absolute;right:4%;bottom:4%;width:43%;animation:jugBob 3s ease-in-out infinite}.join-jug img{width:100%;position:relative;z-index:2}.halo{position:absolute;width:70%;aspect-ratio:1;border:25px solid #ffdb32;border-radius:50%;top:2%;left:13%;animation:pulse 2s infinite}footer{position:absolute;bottom:0;left:0;right:0;background:#111;color:#fff;height:55px;padding:17px 35px;font-size:12px}footer span{float:right}.progress{position:fixed;z-index:60;right:20px;top:100px;bottom:30px;width:5px;background:#ffffff55}.progress i{display:block;width:100%;height:0;background:#111}
@keyframes jugBob{50%{transform:translateY(-18px) rotate(-1deg)}}@keyframes float{50%{transform:translateY(15px) rotate(4deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ticker{to{transform:translateX(-100%)}}@keyframes pulse{50%{transform:scale(1.08);opacity:.6}}@media(max-width:900px){header{left:10px;right:10px}nav{display:none}.panel{min-height:100svh;height:100svh}.hero-copy,.paper,.lore-copy,.join-copy{left:6%;width:88%}.hero h1{font-size:28vw}.hero-jug{width:70%;right:-15%}.paper{top:14%;height:auto;padding:35px}.paper h2,.lore h2{font-size:16vw}.story-jug{opacity:.22;width:80%}.black-card,.sticker{display:none}.mood-head h2{font-size:11vw}.pose-sheet{top:32%;bottom:12%}.lore-copy{z-index:5}.planet{opacity:.35;width:90%}.join h2{font-size:25vw}.join-jug{opacity:.25;width:85%}.links{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}#scroller{scroll-snap-type:y proximity}}