:root{--g:#3FB23B;--pale:#EAF7E6;--dev:#31CF57;--blue:#DCE6FA;--beige:#FCF5EA;
--ph:min(76vw,46vh,380px);--ms:min(36vh,300px)}
@media (min-width:1000px){:root{--ms:min(46vh,420px)}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:var(--g)}
body{font-family:"Diatype Rounded","Nunito","Quicksand","SF Pro Rounded",ui-rounded,sans-serif;font-weight:500;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--g)}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#fff}
.stage>*{position:absolute;left:50%;top:50%}
.logo{width:min(260px,62vw);transform:translate(-50%,-50%);z-index:3}
.logo img{width:100%;height:auto}
.tagline{width:min(92vw,820px);text-align:center;font-size:clamp(24px,4.6vw,36px);line-height:1.333;letter-spacing:-.01em;transform:translate(-50%,-50%);opacity:0;z-index:3}
.mascot{width:calc(var(--ms)*.68);height:var(--ms);transform:translate(-50%,-50%);z-index:5;will-change:transform}
.mascot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;opacity:0;transform-origin:50% 100%;transform:translateY(calc(var(--bob,0)*-1%)) rotate(calc(var(--rot,0)*1deg)) scale(calc(1 + var(--sq,0)),calc(1 - var(--sq,0)));transition:opacity .07s linear}
.mascot img.on{opacity:1}
.phone{width:var(--ph);height:var(--ph);transform:translate(-50%,-50%);background:var(--dev);border-radius:clamp(28px,11%,44px);padding:calc(var(--ph)*.13) calc(var(--ph)*.07) calc(var(--ph)*.07);z-index:4;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),inset 0 4px 0 rgba(255,255,255,.35)}
.phone-top{position:absolute;top:4.5%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:7%}
.cam{width:11px;height:11px;border-radius:50%;background:#173d1c;box-shadow:inset 0 0 0 3px #2a6b31}
.spk{display:flex;gap:5px}.spk i{width:5px;height:5px;border-radius:50%;background:#1f7a2a;opacity:.75}
.sensor{width:22px;height:8px;border-radius:999px;background:#1f7a2a;opacity:.75}
.bezel{position:relative;width:100%;height:100%;background:#111;border-radius:clamp(18px,calc(var(--ph)*.08),30px);padding:calc(var(--ph)*.04)}
.screen{position:relative;width:100%;height:100%;background:var(--blue);border-radius:clamp(10px,5%,18px);overflow:hidden}
.screen img{position:absolute;left:50%;bottom:-6%;width:62%}
.dive{position:absolute;left:50%;bottom:calc(100% - var(--ph)*.04);width:74%;height:calc(var(--ph)*1.1);transform:translateX(-50%);overflow:hidden;pointer-events:none}
.dive img{position:absolute;bottom:0;left:0;width:100%;visibility:hidden}
.doodle{position:absolute;width:64px;height:64px;fill:none;stroke:var(--g);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.doodle path{stroke-dasharray:240;stroke-dashoffset:240}
.d1{left:-26%;top:8%}.d2{right:-24%;top:-4%;width:52px}.d3{right:-30%;bottom:14%}
.doodles-on .doodle{opacity:1}
.doodles-on .doodle path{animation:sketch 4.8s ease-in-out infinite}
.doodles-on .d2 path{animation-delay:1.6s}.doodles-on .d3 path{animation-delay:3.1s}
@keyframes sketch{0%{stroke-dashoffset:240;opacity:1}35%{stroke-dashoffset:0;opacity:1}70%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.pills{width:100vw;left:0;transform:translateY(-50%);overflow:hidden;z-index:3;opacity:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:12px;width:max-content;list-style:none;padding-left:9vw;animation:marq 28s linear infinite;animation-play-state:paused}
.pills.run .track{animation-play-state:running}
.track li{background:var(--pale);color:var(--g);font-size:16px;line-height:1.25;padding:12px 20px;border-radius:999px;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}
.cta{position:fixed;top:20px;right:20px;z-index:20;background:var(--g);color:#fff;text-decoration:none;font-size:20px;line-height:1;padding:16px 28px;border-radius:999px;
  box-shadow:0 2.4px 4.8px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(-12px) scale(.9);transform-origin:top right;transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1),visibility .35s,padding .3s,font-size .3s}
.cta.show{opacity:1;visibility:visible;transform:none}
.cta.small{font-size:16px;padding:12px 20px}
.cta:hover{transform:scale(1.05)}
.cta:focus-visible,.sound:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.manifesto{min-height:150vh;padding:22vh 24px 40vh;display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center}
.m-line{max-width:760px;font-size:clamp(24px,4.4vw,36px);line-height:1.333;letter-spacing:-.01em}
.sound{position:fixed;left:20px;bottom:18px;z-index:20;background:none;border:0;color:var(--g);font:inherit;font-size:13px;display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px}
.sound .dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--g)}
.sound[aria-pressed="true"] .dot{background:var(--g)}
@media (max-width:600px){.cta{top:14px;right:14px}.d1{left:-10%;top:-16%}.d2{right:auto;left:-8%;top:auto;bottom:-16%}.d3{display:none}.doodle{width:44px;height:44px}}
/* reduced motion: static stacked layout */
.rm .stage{height:auto;overflow:visible;padding:90px 20px 40px;display:flex;flex-direction:column;align-items:center;gap:28px}
.rm .stage>*{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important}
.rm .mascot{display:none}
.rm .screen img{transform:translate(-50%,0)!important}
.rm .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;max-width:900px;margin:0 auto}
.rm .pills{-webkit-mask:none;mask:none;width:100%}
.rm .manifesto{min-height:auto;padding:10vh 24px 30vh}
.rm .cta{opacity:1;visibility:visible;transform:none;transition:none}
.rm .doodle{display:none}
/* ambient idle loop: never still on load */
@media (prefers-reduced-motion:no-preference){
.logo img{animation:clayfloat 3.6s ease-in-out infinite;transform-origin:50% 80%}
.mascot img{animation:mbob 1.8s ease-in-out infinite;transform-origin:50% 100%}
}
@keyframes clayfloat{0%,100%{transform:translateY(0) rotate(-1.2deg) scale(1)}50%{transform:translateY(-8px) rotate(1.2deg) scale(1.015,.99)}}
@keyframes mbob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-10px) scale(.98,1.03)}85%{transform:translateY(0) scale(1.03,.97)}}
@keyframes mwave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes tagbreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.rm .logo img,.rm .mascot img,.rm #inside,.rm .tagline{animation:none}