@font-face{font-family:"Permanent Marker";src:url("assets/permanent-marker.ttf") format("truetype");font-display:swap}
@font-face{font-family:Kalam;src:url("assets/kalam.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Kalam;src:url("assets/kalam-bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Caveat;src:url("assets/caveat.ttf") format("truetype");font-weight:600;font-display:swap}
:root{--paper:#fafaf6;--ink:#161714;--muted:#57584f;--line:#bdbdb2;--display:"Permanent Marker",cursive;--hand:Kalam,cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:35px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.5 var(--hand);overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px dashed var(--ink);outline-offset:8px}
button:disabled{cursor:default}
svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
button svg,.button svg{width:23px;height:23px;flex-shrink:0}
::selection{background:var(--ink);color:var(--paper)}
.svg-defs{position:absolute;inset:0 auto auto 0;width:0;height:0;overflow:hidden}
.paper-grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23grain)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.handwritten{font:600 32px/1.1 Caveat,cursive}

/* Inky outlines are separate from the text, so the lettering stays readable. */
.has-sketch-frame,.has-sketch-line{position:relative;isolation:isolate}
.sketch-frame{position:absolute!important;inset:-6px!important;width:calc(100% + 12px)!important;height:calc(100% + 12px)!important;z-index:-1;overflow:visible;pointer-events:none;filter:url(#rough-ink)}
.sketch-line{position:absolute;left:0;top:0;width:100%;height:16px;pointer-events:none;overflow:visible;filter:url(#rough-ink)}
.ink-fill{fill:var(--paper);stroke:none}
.ink-stroke{stroke:var(--ink);stroke-width:3.5;fill:none}
.ink-echo{stroke:var(--ink);stroke-width:1.5;fill:none}
.ink-hatch{stroke:var(--ink);stroke-width:1.4;fill:none}
h1,h2,.brand,.comic-word,.toy-title{font-family:var(--display);font-weight:400;filter:url(#rough-letter)}
h1,h2,p{margin-top:0}
h2{font-size:clamp(38px,4.4vw,66px);line-height:1.17;letter-spacing:-2px;margin-bottom:0;transform:rotate(-2deg)}
.outlined{color:var(--paper);-webkit-text-stroke:1.8px var(--ink);paint-order:stroke fill}
.header{height:112px;margin:0 5.5%;display:flex;align-items:center;justify-content:space-between;gap:30px;z-index:40}
.header>.sketch-line{top:auto;bottom:0;transform:rotate(-.5deg)}
.brand{display:flex;align-items:center;gap:8px;font-size:43px;letter-spacing:-3px;transform:rotate(-4deg);white-space:nowrap;line-height:1}
.brand svg{width:40px;height:49px;stroke-width:3.4;filter:url(#rough-ink)}

.nav{display:flex;align-items:center;gap:32px;font-size:17px;font-weight:700}
.nav>.sketch-frame{display:none}
.nav a{position:relative;transform:rotate(-2deg);padding:14px 0}
.nav a:nth-child(2){transform:rotate(2deg)}
.nav a:after{content:"";position:absolute;left:0;right:100%;height:3px;bottom:8px;background:var(--ink);transform:rotate(-3deg);transition:right .2s;filter:url(#rough-ink)}
.nav a:hover:after{right:0}
.header-actions{display:flex;align-items:center;gap:25px}
.sound-button{display:flex;gap:7px;align-items:center;background:none;border:0;font-size:13px}
.sound-button svg{filter:url(#rough-ink)}
.button{--rotation:-2deg;min-height:53px;padding:7px 24px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-size:17px;font-weight:700;white-space:nowrap;transform:rotate(var(--rotation));transition:transform .18s}
.button:hover{transform:rotate(calc(var(--rotation) - 2deg)) translateY(-3px)}
.button:active{transform:rotate(0deg) translateY(2px)}
.button-dark{color:var(--paper)}
.button-dark .ink-fill{fill:var(--ink)}
.button-dark svg:not(.sketch-frame){stroke:var(--paper)}
.button-outline{--rotation:1.7deg}
.button-big{min-height:62px;padding:10px 29px;font-size:19px}
.header-buy{font-size:16px;min-height:48px}
.menu-toggle{display:none;background:none;border:0;font-size:28px}

.hero{max-width:1600px;margin:0 auto;padding:65px 5.5% 55px;display:grid;grid-template-columns:1.08fr 1fr;gap:0 15px;position:relative}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 28px;transform:rotate(-2deg);font-weight:700}
.status-dot{width:9px;height:9px;border-radius:38% 60% 44% 55%;background:var(--ink);filter:url(#rough-ink)}
h1{font-size:clamp(45px,5.6vw,88px);line-height:1.2;letter-spacing:-3px;margin:0 0 25px;white-space:nowrap;transform:rotate(-3.5deg);transform-origin:left center}
.puff-word{position:relative;display:inline-block;transform:rotate(4deg)}
.puff-word>svg{position:absolute;left:-5%;bottom:-12px;width:110%;stroke-width:7;filter:url(#rough-ink)}
.hero-description{font-size:25px;line-height:1.45;margin:29px 0 26px;transform:rotate(-1deg);max-width:450px}
.hero-buttons{display:flex;gap:23px;align-items:center}
.social-mini{display:flex;gap:18px;align-items:center;margin-top:30px;font-size:13px}
.social-mini button{border:0;background:none;padding:7px;transform:rotate(-5deg)}
.social-mini button:hover{transform:rotate(12deg)}
.social-mini svg{filter:url(#rough-ink);width:21px;height:21px}
.mini-line{width:26px;height:3px;background:var(--ink);transform:rotate(-7deg);filter:url(#rough-ink)}
.social-mini .handwritten{font-size:27px;transform:rotate(-7deg);white-space:nowrap}
.hero-art{position:relative;height:calc(39vw + 110px);max-height:710px;min-width:0;margin-top:-24px}
.mascot-button{position:absolute;width:100%;left:0;top:0;background:none;border:0;padding:0;mix-blend-mode:multiply;transform:rotate(-3deg);transition:transform .25s;user-select:none;-webkit-user-select:none}
.mascot-image{width:100%;height:auto;display:block;filter:contrast(1.2);pointer-events:none}
.mascot-button:hover{transform:rotate(1deg) translateY(-3px)}
.mascot-button.poked{animation:boing .6s}




.speech-bubble{position:absolute;left:-6%;top:105px;z-index:2;max-width:160px;font:600 30px/1.05 Caveat,cursive;transform:rotate(-12deg);pointer-events:none}



.puff-control{position:absolute;bottom:0;left:15%;width:70%;max-width:370px;z-index:3}
.puff-button{width:100%;height:62px;border:0;background:var(--paper);transform:rotate(-3deg);touch-action:none;user-select:none;-webkit-user-select:none}
.puff-fill{position:absolute;inset:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;filter:url(#rough-ink);border-radius:2% 4% 6% 1%}
.puff-button-content{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px;position:relative;z-index:2;mix-blend-mode:difference;color:white;font-size:19px;font-weight:700}
.puff-button .joint-icon{width:35px;height:26px}
.puff-button.puffing{transform:rotate(-1deg) translateY(2px)}
.puff-stats{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-top:16px;line-height:1.1;transform:rotate(-1deg)}
.puff-stats b{font-weight:700}
.puff-accessibility{display:block;font-size:12px;text-align:center;margin-top:7px;color:var(--muted)}



.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;margin-top:49px;padding:24px 0;font-size:12px;transform:rotate(-.3deg)}
.scroll-note{display:flex;gap:16px}

.section-wrap{max-width:1600px;margin:0 auto;padding:80px 5.5%}
.section-number{font-size:16px;display:flex;justify-content:space-between;gap:20px;margin-bottom:37px;transform:rotate(-1deg);font-weight:700}
.section-number>span{font-weight:400}
.lore>.sketch-line,.club>.sketch-line{left:5.5%;width:89%}
.lore-layout{display:grid;grid-template-columns:1fr 1fr;gap:7%}
.lore-note{display:block;font-size:35px;margin:23px 0 0 18px;transform:rotate(-8deg)}
.lore-copy{max-width:530px;transform:rotate(.6deg)}
.lore-copy p{font-size:22px;line-height:1.55;margin-bottom:18px}
.lore-copy .thought{font:600 39px/1.2 Caveat,cursive;transform:rotate(-3deg);margin:24px 0}
.text-link{font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:2.5px solid var(--ink);border-radius:0 0 40% 10%;padding:10px 0;transform:rotate(-1deg)}
.text-link span{font-size:29px}
.comic-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:65px 0 5px}
.comic-panel{padding:32px 22px 27px;text-align:center;transform:rotate(-1.4deg)}
.comic-panel:nth-child(2){transform:rotate(1.5deg) translateY(7px)}
.comic-panel:nth-child(3){transform:rotate(-.9deg)}
.panel-number{position:absolute;left:17px;top:7px;font-size:16px;transform:rotate(-10deg)}
.comic-word{font-size:29px;letter-spacing:-1px}
.comic-panel p{font-size:17px;margin:0;line-height:1.4}
.thought-scribble,.exhale-doodle{height:118px;display:flex;align-items:center;justify-content:center}
.thought-scribble svg,.exhale-doodle svg{width:95%;height:95px;stroke-width:4;filter:url(#rough-ink)}
.comic-bunny{display:block;width:80px;height:90px;margin:14px auto;stroke-width:3.5;filter:url(#rough-ink)}
.playground{position:relative}
.playground>.sketch-line{left:4%;width:92%;transform:rotate(-.5deg)}
.play-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:46px}
.play-heading p{font-size:23px;line-height:1.45;margin:0 0 5px;transform:rotate(3deg)}
.play-heading .handwritten{display:block;font-size:31px;margin-top:12px;transform:rotate(-5deg)}
.toy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px}
.toy-card{padding:25px;border:0;background:transparent;display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;transform:rotate(1deg);transition:transform .2s}
.toy-card:nth-child(2){transform:rotate(-1.8deg) translateY(8px)}
.toy-card:nth-child(3){transform:rotate(1.5deg)}
.toy-card:hover{transform:rotate(-3deg) translateY(-6px)}
.toy-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:700;line-height:1.3}
.toy-top>span{font-size:28px}
.toy-title{font-size:28px;letter-spacing:-1px}
.toy-description{font-size:19px;line-height:1.4;margin-top:9px}
.toy-action{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;border-top:2px solid var(--ink);border-radius:40% 5% 0 0;padding-top:17px;margin-top:24px}
.trip-art,.doodle-art,.fortune-art{height:155px;position:relative;display:flex;align-items:center;justify-content:center;margin:15px 0 20px}
.trip-art i{position:absolute;width:124px;height:108px;border:3.5px solid var(--ink);border-radius:47% 54% 46% 51%/43% 52% 50% 57%;transform:rotate(18deg);filter:url(#rough-ink)}
.trip-art i:nth-child(2){width:102px;height:88px;transform:rotate(-13deg)}
.trip-art i:nth-child(3){width:80px;height:67px;transform:rotate(13deg)}
.trip-art i:nth-child(4){width:58px;height:48px;transform:rotate(25deg)}
.trip-art i:nth-child(5){width:36px;height:30px}
.trip-art i:nth-child(6){width:14px;height:12px}

.toy-card:hover .trip-art i{animation:spin 5s linear infinite}
.doodle-art svg{width:190px;height:130px;stroke-width:4.5;transform:rotate(-10deg);filter:url(#rough-ink)}
.fortune-art>span{width:107px;height:103px;background:var(--ink);color:var(--paper);border-radius:48% 51% 45% 54%/51% 44% 57% 48%;display:grid;place-items:center;font:53px var(--display);transform:rotate(17deg);outline:2px solid var(--ink);outline-offset:5px;filter:url(#rough-ink)}


.club{padding-top:85px;padding-bottom:75px}
.club-top{display:flex;justify-content:space-between;align-items:center;gap:40px}
.club h2{font-size:clamp(38px,4.8vw,72px)}
.club-underline{position:relative;display:inline-block}
.club-underline svg{position:absolute;bottom:-16px;left:-2%;width:103%;stroke-width:5;filter:url(#rough-ink)}
.club-face{width:180px;flex-shrink:0;margin:0 4% 0 0;transform:rotate(12deg);position:relative}
.club-face>svg{width:100%;height:auto;stroke-width:6;filter:url(#rough-ink)}
.club-face .handwritten{position:absolute;bottom:-25px;left:-10px;white-space:nowrap;font-size:31px;transform:rotate(-15deg)}
.club-bottom{display:flex;justify-content:space-between;align-items:center;gap:35px;margin-top:55px}
.club-bottom p{font-size:22px;line-height:1.5;margin:0;transform:rotate(-2deg)}
.club-links{display:flex;gap:24px}
.club-links .button{font-size:14px;padding:9px 19px;gap:14px;min-height:59px}
.club-links svg{width:21px;height:21px}
.contract{display:flex;align-items:center;gap:26px;padding:23px;margin-top:55px;transform:rotate(-.6deg);font-size:14px}
.contract code{font:inherit;flex:1;overflow-wrap:anywhere}
.contract button{border:0;background:none;font-size:15px;font-weight:700;white-space:nowrap}
.contract button span{margin-left:15px;font-size:24px}
footer{padding:44px 5.5% 25px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
footer>.sketch-line{width:94%;left:3%;transform:rotate(.3deg)}
footer .brand{font-size:39px}
footer p{font-size:17px;line-height:1.5;margin:0}
footer p span{font-size:14px;color:var(--muted)}
.back-top{background:none;border:0;padding:15px 0;font-size:15px;font-weight:700;transform:rotate(3deg)}
.back-top span{font-size:25px;margin-left:12px}
.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:25px;padding-top:24px;margin-top:10px;font-size:13px}
.footer-bottom .sketch-line{opacity:.45;height:10px}
.footer-bottom button{background:none;border:0;padding:0;font-size:14px;transform:rotate(-2deg)}

#smoke-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}
#doodle-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none;z-index:60}
body.doodle-on #doodle-canvas{pointer-events:auto;cursor:crosshair}
.doodle-toolbar{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) rotate(-1deg);z-index:80;display:flex;align-items:center;gap:15px;padding:14px 19px;background:var(--paper);font-size:16px;white-space:nowrap}
.doodle-toolbar[hidden]{display:none}
.doodle-toolbar button{background:var(--ink);color:var(--paper);border:0;padding:8px 13px;font-size:14px;border-radius:4% 2% 7% 3%;transform:rotate(1deg)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px) rotate(-1deg);background:var(--ink);color:var(--paper);padding:15px 25px;border:2px solid var(--paper);border-radius:2% 5% 3% 4%;font-size:19px;z-index:110;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;width:max-content;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0) rotate(-1deg)}
dialog{border:0;padding:42px;width:calc(100% - 45px);max-width:535px;background:var(--paper);color:var(--ink);text-align:center;overflow:visible;transform:rotate(-1.3deg)}
dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.dialog-close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:26px}
.dialog-eyebrow{font-size:15px;font-weight:700}
.dialog-bunny{display:block;width:65px;height:80px;margin:22px auto 20px;stroke-width:3.5;filter:url(#rough-ink)}
dialog h2{font-size:38px;letter-spacing:-1px;line-height:1.2}
dialog p{font-size:22px;line-height:1.5;margin:24px 0}
dialog .button{font-size:17px;width:100%}
body.trip-mode{--paper:#181916;--ink:#fafaf6;--muted:#c7c8be;--line:#74766a}
body.trip-mode .mascot-image{filter:invert(1)}
body.trip-mode .mascot-button{mix-blend-mode:screen;animation:floaty 4s ease-in-out infinite}
body.trip-mode .puff-fill{background:#77786e}
body.trip-mode .speech-bubble{transform:rotate(9deg)}

body.trip-mode .club-face{animation:floaty 4s ease-in-out infinite}
.puffing-body .mascot-button{animation:breathe .8s ease-in-out infinite alternate}
@keyframes boing{0%,100%{transform:rotate(-3deg) scale(1)}25%{transform:rotate(5deg) scale(.95,1.05)}55%{transform:rotate(-6deg) scale(1.04,.96)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-14px)}}
@keyframes breathe{from{transform:rotate(-3deg) scale(1)}to{transform:rotate(-2deg) scale(1.025)}}

@media(max-width:1200px){
  .header{gap:20px}.nav{gap:22px;font-size:15px}.header-actions{gap:17px}
  .hero{padding-top:55px}.eyebrow{font-size:14px}h1{font-size:5.4vw;letter-spacing:-2px}
  .hero-description{font-size:23px}.hero-buttons{gap:16px}.button-big{font-size:17px;padding:10px 24px}
  .social-mini{gap:12px;font-size:11px}.social-mini .handwritten{font-size:24px}.mini-line{width:15px}
  .speech-bubble{font-size:26px;max-width:140px;left:-4%;top:95px}

  .puff-control{left:11%;width:76%}.puff-stats{font-size:11px}.puff-button-content{font-size:17px}
  .hero-bottom{font-size:10px}.lore-copy p{font-size:21px}.lore-copy .thought{font-size:35px}
  .toy-grid{gap:23px}.toy-card{padding:20px}.toy-top{font-size:11px}.toy-title{font-size:24px}.toy-description{font-size:18px}.toy-action{font-size:12px}
  .club-bottom{flex-direction:column;align-items:start;gap:28px}.club-links .button{font-size:16px}.club-face{width:150px}
}
@media(max-width:900px){
  .header{height:99px;margin:0 5%}.brand{font-size:36px}.brand svg{width:32px;height:41px}.nav{gap:17px;font-size:13px}
  .header-actions{gap:10px}.header-buy{font-size:14px;padding:7px 17px;gap:13px;min-height:43px}
  .sound-button span{display:none}.sound-button{padding:5px}.hero{padding:45px 5% 45px;gap:0 10px}
  h1{font-size:5.5vw}.eyebrow{font-size:12px;margin-bottom:23px}.hero-description{font-size:20px}
  .button-big{font-size:15px;min-height:53px;padding:8px 18px;gap:15px}.hero-buttons{gap:15px}
  .social-mini{font-size:10px;gap:12px}.social-mini .handwritten,.mini-line{display:none}
  .hero-art{height:calc(39vw + 120px);margin-top:-12px}.puff-control{left:7%;width:86%}

  .speech-bubble{font-size:23px;top:76px;left:-3%;max-width:115px}

  .puff-button{height:55px}.puff-button-content{font-size:16px;padding:0 16px}.puff-stats{font-size:10px}.puff-accessibility{font-size:10px}
  .hero-bottom{font-size:9px;margin-top:35px}.hero-bottom>span:last-child{max-width:200px;text-align:right}
  .section-wrap{padding:65px 5%}.section-number{font-size:14px}.section-number>span{font-size:12px}
  h2{font-size:4.7vw;letter-spacing:-1.3px}.lore-layout{gap:5%}.lore-copy p{font-size:19px}.lore-note{font-size:30px;margin-left:0}
  .lore-copy .thought{font-size:31px}.text-link{font-size:12px}.comic-strip{gap:14px;margin-top:45px}
  .comic-panel{padding:30px 16px 24px}.comic-word{font-size:23px}.comic-panel p{font-size:14px}
  .play-heading p{font-size:20px}.play-heading .handwritten{font-size:27px}.toy-grid{gap:19px}
  .toy-card{padding:16px}.toy-top{font-size:9px;gap:4px}.toy-title{font-size:20px}.toy-description{font-size:16px}.toy-action{font-size:10px}
  .trip-art,.doodle-art,.fortune-art{height:130px}.trip-art i{width:107px;height:99px}.fortune-art>span{width:90px;height:87px}

  .club h2{font-size:4.9vw}.club-face{width:120px;margin-right:2%}.club-face .handwritten{font-size:26px;left:-25px}
  .club-bottom p{font-size:20px}.club-links{gap:20px}.club-links .button{font-size:14px}
  .contract{font-size:12px;gap:18px;padding:20px}.contract button{font-size:13px}
  footer{gap:20px;padding:40px 5% 22px}footer p{font-size:15px}footer p span{font-size:12px}
  .back-top{font-size:12px}.footer-bottom{font-size:11px}.footer-bottom button{font-size:12px}
}
@media(max-width:650px){
  .header{height:87px;gap:10px;margin:0 6%}.brand{font-size:34px}.brand svg{width:30px;height:37px}
  .header-actions{gap:13px}.header-buy{font-size:13px;min-height:39px;padding:6px 13px;gap:10px}.header-buy svg{width:18px;height:18px}
  .sound-button svg{width:19px;height:19px}.menu-toggle{display:block;font-size:26px;padding:2px}
  .nav{display:none;position:absolute;top:84px;left:0;right:0;z-index:20;background:var(--paper);padding:20px;font-size:15px;justify-content:space-between;gap:13px}
  .nav.open{display:flex}.nav>.sketch-frame{display:block}
  .hero{padding:38px 7% 35px;grid-template-columns:1fr;gap:0}
  .eyebrow{font-size:13px;margin-bottom:25px}
  h1{font-size:11.5vw;letter-spacing:-2px;line-height:1.19;margin-bottom:26px;transform:rotate(-3.5deg)}
  .puff-word>svg{bottom:-10px;stroke-width:6}
  .hero-description{font-size:22px;line-height:1.45;margin-top:27px;margin-bottom:27px}
  .hero-buttons{gap:22px}.button-big{font-size:17px;padding:9px 22px;min-height:54px;gap:15px}
  .social-mini{margin-top:27px;font-size:10px;gap:12px}.social-mini>span:first-child{white-space:nowrap}.social-mini .handwritten{display:inline;font-size:24px}.social-mini button{padding:5px}
  .social-mini svg{width:20px;height:20px}
  .hero-art{width:100%;max-width:470px;height:calc(86vw + 115px);max-height:585px;justify-self:center;margin-top:26px}
  .mascot-button{width:100%;top:0;left:0}

  .speech-bubble{top:93px;left:-5%;font-size:27px;max-width:130px}

  .puff-control{left:5%;width:85%;bottom:0;max-width:none}.puff-button{height:61px}
  .puff-button-content{font-size:19px;padding:0 20px}.puff-stats{font-size:11px;margin-top:18px}
  .puff-accessibility{font-size:11px}
  .hero-bottom{margin-top:28px;padding:24px 0 28px;font-size:9px;gap:10px}.hero-bottom>span:last-child{display:none}.scroll-note{gap:8px}
  .section-wrap{padding:55px 7%}.section-number{font-size:13px;gap:20px;margin-bottom:30px}
  .section-number>span{font-size:10px;text-align:right;max-width:130px}
  h2{font-size:10.2vw;letter-spacing:-1.5px;line-height:1.22}
  .lore-layout{grid-template-columns:1fr;gap:33px}
  .lore-note{font-size:32px;margin-top:22px;margin-left:7px}
  .lore-copy p{font-size:21px;line-height:1.5}.lore-copy .thought{font-size:35px;margin:23px 0}
  .text-link{font-size:14px;line-height:1.35}
  .comic-strip{grid-template-columns:1fr;gap:25px;margin-top:42px}
  .comic-panel{display:grid;grid-template-columns:1fr 100px;align-items:center;text-align:left;padding:28px 21px 23px;gap:7px}
  .comic-panel:nth-child(2){transform:rotate(1.4deg)}
  .comic-word{font-size:25px;letter-spacing:-1px}.comic-panel p{font-size:16px;grid-column:1}
  .thought-scribble,.exhale-doodle,.comic-bunny{grid-column:2;grid-row:1/3;width:100%;height:86px;margin:0}
  .thought-scribble svg,.exhale-doodle svg{height:80px;width:100%}.comic-bunny{width:75px;margin:auto}
  .panel-number{top:4px;left:13px;font-size:14px}
  .play-heading{flex-direction:column;align-items:start;gap:28px;margin-bottom:38px}
  .play-heading p{font-size:21px;transform:rotate(-1deg)}.play-heading .handwritten{font-size:30px}
  .toy-grid{grid-template-columns:1fr;gap:29px}
  .toy-card{display:grid;grid-template-columns:minmax(0,1fr) 94px;column-gap:9px;padding:22px}
  .toy-card:nth-child(2){transform:rotate(-1.8deg)}
  .toy-top{grid-column:1/-1;font-size:12px;gap:8px;margin-bottom:18px}
  .toy-title{grid-column:1;font-size:23px;line-height:1.3;align-self:end}
  .toy-description{grid-column:1;font-size:18px;margin-top:8px}
  .toy-action{grid-column:1/-1;font-size:13px;margin-top:22px}
  .trip-art,.doodle-art,.fortune-art{grid-column:2;grid-row:1/3;width:94px;height:115px;margin:0}
  .trip-art i{width:89px;height:83px}.trip-art i:nth-child(2){width:73px;height:67px}.trip-art i:nth-child(3){width:56px;height:51px}
  .trip-art i:nth-child(4){width:39px;height:36px}.trip-art i:nth-child(5){width:22px;height:20px}.trip-art i:nth-child(6){width:7px;height:6px}

  .doodle-art svg{width:100px;height:100px;stroke-width:5}
  .fortune-art>span{width:71px;height:69px;font-size:41px}

  .club{padding-top:62px}.club h2{font-size:9.3vw;line-height:1.25}.club-face{display:none}
  .club-bottom{margin-top:40px;gap:27px}.club-bottom p{font-size:21px}
  .club-links{width:100%;flex-direction:column;gap:23px}
  .club-links .button{font-size:15px;padding:10px 18px;min-height:57px;justify-content:space-between;gap:13px}
  .club-links .button svg{margin-right:auto}.club-links .button>span{margin-left:auto}
  .contract{margin-top:40px;flex-wrap:wrap;padding:19px;gap:8px 15px}
  .contract>span{flex-basis:100%;font-size:13px}.contract code{font-size:12px;line-height:1.4}.contract button{font-size:12px}.contract button span{margin-left:5px}
  footer{grid-template-columns:1fr auto;padding:36px 7% 24px;gap:23px}footer .brand{font-size:34px}
  footer p{grid-column:1/-1;grid-row:2;font-size:17px}footer p span{font-size:13px}
  .back-top{font-size:12px}.footer-bottom{flex-wrap:wrap;font-size:11px;gap:19px}
  .footer-bottom button{order:3;flex-basis:100%;font-size:14px}
  .doodle-toolbar{max-width:94vw;gap:9px;padding:12px;bottom:20px}.doodle-toolbar>span{display:none}.doodle-toolbar button{font-size:13px;padding:7px 11px}
  dialog{padding:35px 25px;transform:rotate(-.7deg)}dialog h2{font-size:30px}dialog p{font-size:21px}.dialog-eyebrow{font-size:12px}
  dialog .button{font-size:14px;padding:8px 12px;gap:10px}.toast{font-size:17px;padding:13px 19px}
}
@media(max-width:365px){
  .header-actions{gap:8px}.header-buy{font-size:12px;padding:5px 10px;gap:6px}.sound-button{padding:2px}
  .brand{font-size:30px}.brand svg{width:25px}.header-buy svg{width:15px}
  .button-big{font-size:15px;padding:8px 17px;gap:12px}.hero-buttons{gap:18px}
  .social-mini{gap:8px;font-size:10px}.social-mini .handwritten{font-size:23px}
  .eyebrow{font-size:12px}.hero-description{font-size:21px}.puff-stats{font-size:10px}.puff-button-content{font-size:17px}
  .toy-card{padding:20px 17px;grid-template-columns:minmax(0,1fr) 80px}.toy-title{font-size:20px}.toy-description{font-size:17px}
  .trip-art,.doodle-art,.fortune-art{width:80px}.toy-top{font-size:10px}.toy-action{font-size:12px}
  .club-links .button{font-size:13px}.contract code{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}