@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&family=DM+Sans:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap');
:root{--cream:#faf6e9;--ink:#193820;--green:#4d792f;--lime:#dff19c;--orange:#ff7c40;--line:#cfd5bf}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100svh;margin:0;display:flex;flex-direction:column;overflow-x:hidden;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--orange);color:var(--ink)}
.ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.nav,main,footer{position:relative;z-index:1}.nav{height:78px;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;font:700 37px 'Space Grotesk',sans-serif;letter-spacing:-2px}.brand img{width:46px;height:46px;filter:drop-shadow(0 4px 6px #17341422)}.brand span{align-self:flex-start;margin-top:8px;font-size:14px;letter-spacing:0}
.sound-switch{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--ink);border-radius:100px;background:var(--lime);color:var(--ink);cursor:pointer;font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.7px;box-shadow:0 0 0 var(--ink);transition:transform .2s,box-shadow .2s,background .2s}.sound-switch:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}.sound-switch:focus-visible,.mascot-button:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.sound-bars{display:flex;align-items:center;gap:2px;width:19px;height:18px}.sound-bars i{display:block;width:3px;height:5px;border-radius:4px;background:currentColor}.sound-switch[aria-pressed="true"]{background:var(--orange)}.sound-switch[aria-pressed="true"] .sound-bars i{animation:equalize .55s ease-in-out infinite alternate}.sound-switch[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:-.35s}.sound-switch[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:-.15s}.sound-switch[aria-pressed="true"] .sound-bars i:nth-child(4){animation-delay:-.45s}
main{flex:1;display:flex;flex-direction:column;overflow:hidden}.hero{position:relative;isolation:isolate;width:100%;max-width:1800px;flex:1;margin:auto;padding:18px 4.5% 0}.hero-topline{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:1.5px}.hero-topline span:last-child{font:23px Arial,sans-serif;color:var(--orange);animation:slowspin 9s linear infinite}.hero h1{margin:14px 0 0;text-align:center;color:var(--green);font:900 clamp(100px,22vw,320px)/.86 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-.025em;text-shadow:0 5px 0 #dce5c2;transition:letter-spacing .3s,text-shadow .3s}.hero.is-booping h1{letter-spacing:.01em;text-shadow:4px 4px 0 var(--lime),8px 8px 0 var(--orange)}.hero-stage{position:relative;display:grid;grid-template-columns:1fr 1.8fr .8fr;align-items:start;max-width:1280px;min-height:0;margin:-85px auto 0}.hero-copy{padding-top:65px}.pill{display:inline-block;padding:10px 13px;border-radius:4px;background:var(--lime);font-size:11px;font-weight:700;letter-spacing:1px;transform:rotate(-3deg)}.hero-copy h2{margin:18px 0 0;font:700 clamp(32px,4vw,60px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-2px}
.hero-art{position:relative;width:100%;max-width:570px;justify-self:center;perspective:900px;isolation:isolate}.mascot-button{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;cursor:crosshair;touch-action:manipulation;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .22s ease-out;-webkit-tap-highlight-color:transparent}.mascot{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 12px #27451818);user-select:none;-webkit-user-drag:none;transition:opacity .2s,filter .25s}.particle-mascot{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .16s;filter:drop-shadow(0 2px 1px #1d351944)}.particle-active .mascot{opacity:.12;filter:blur(1px) drop-shadow(0 22px 12px #27451812)}.particle-active .particle-mascot{opacity:1}.mascot-button.is-booping .mascot{animation:boop .65s cubic-bezier(.22,.8,.3,1)}.boop-hint{position:absolute;bottom:8%;left:-1%;font:600 10px 'Space Grotesk',sans-serif;letter-spacing:1px;color:var(--green);transform:rotate(-9deg);pointer-events:none}.hero-aside{padding-top:35px;justify-self:end}.pepoto-label{display:flex;align-items:center;gap:13px;padding:15px 19px;border:1px solid var(--ink);border-radius:3px;background:var(--lime);box-shadow:4px 4px 0 var(--ink);transform:rotate(9deg);font:600 11px/1.3 'Space Grotesk',sans-serif;letter-spacing:1.3px}.pepoto-label strong{font-size:27px;line-height:1.05;letter-spacing:-1px}.label-star{font:43px/1 Arial,sans-serif}.pepoto-spark{position:absolute;z-index:5;left:50%;top:45%;font:var(--size,26px)/1 Arial,sans-serif;color:var(--spark-color);pointer-events:none;animation:spark .85s ease-out forwards}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 4.5%;padding:18px 0;border-top:1px solid var(--line);font-size:11px;letter-spacing:1px}footer p{margin:0;font-size:12px;letter-spacing:0}
@keyframes equalize{to{height:17px}}@keyframes slowspin{to{transform:rotate(360deg)}}@keyframes boop{0%,100%{transform:scale(1)}20%{transform:scale(1.07,.88) rotate(-3deg)}46%{transform:translateY(-18px) scale(.95,1.06) rotate(3deg)}72%{transform:scale(1.03,.98) rotate(-1deg)}}@keyframes spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.6)}}
@media(min-width:1100px) and (max-height:850px){.hero h1{font-size:22vh}.hero-stage{margin-top:-55px}.hero-art{max-width:49vh}.hero-copy h2{font-size:44px}}@media(max-width:760px){.nav{height:70px;margin:0 5%}.brand{font-size:29px}.brand img{width:36px;height:36px}.sound-switch{padding:9px 12px;font-size:10px;gap:8px}.hero h1{margin-top:15px;font-size:24vw}.hero-stage{grid-template-columns:1fr 1fr;margin-top:-12px}.hero-art{grid-column:1/-1;grid-row:1;width:82%;max-width:420px}.hero-copy{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 28px}.hero-copy h2{margin:0;font-size:26px;letter-spacing:-1px}.hero-copy h2 br{display:none}.pill{font-size:10px}.hero-aside{position:absolute;right:0;top:28%;padding:0}.pepoto-label{gap:8px;padding:10px 12px;font-size:9px;box-shadow:3px 3px 0 var(--ink)}.pepoto-label strong{font-size:21px}.label-star{font-size:28px}.boop-hint{left:6%;font-size:9px}footer{padding:16px 0}footer p{font-size:11px}}@media(max-width:440px){.sound-label{display:none}.sound-switch{padding:9px}.hero-art{width:95%}.hero-aside{right:-2px;top:23%}.pepoto-label{gap:6px;padding:8px 10px;font-size:8px}.pepoto-label strong{font-size:18px}.label-star{font-size:23px}.hero-copy h2{font-size:24px}.boop-hint{bottom:4%;font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-canvas,.particle-mascot{display:none}.mascot-button,.mascot,.sound-switch,.hero h1{transition:none}.mascot-button.is-booping .mascot{animation:none}.hero-topline span:last-child,.sound-bars i{animation:none!important}}

/* PEPOTO RAVE */
:root{--beat:0;--rave-hue:95}body{transition:background .55s,color .4s}.rave-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 62%,#183c20 0,#080c09 48%,#020403 100%);transition:opacity .5s}.rave-grid{position:absolute;left:-30%;right:-30%;bottom:-28%;height:78%;transform:perspective(420px) rotateX(63deg);transform-origin:center bottom;background-image:linear-gradient(rgba(198,255,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,0,.25) 1px,transparent 1px);background-size:58px 58px;filter:drop-shadow(0 0 7px #b8ff00);animation:gridDrive 1.1s linear infinite}.laser{position:absolute;top:-25%;left:50%;width:12vw;height:145%;transform-origin:50% 0;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(2px);opacity:calc(.12 + var(--beat) * .38)}.laser-one{background:linear-gradient(#f4ff61aa,#b6ff00 58%,transparent);animation:laserOne 3.8s ease-in-out infinite}.laser-two{background:linear-gradient(#ff52cfaa,#ff006e 58%,transparent);animation:laserTwo 4.7s ease-in-out infinite reverse}.laser-three{background:linear-gradient(#5ff9ffaa,#00eaff 58%,transparent);animation:laserThree 3.1s ease-in-out infinite}.laser-four{background:linear-gradient(#fff8d0aa,#ff6b00 58%,transparent);animation:laserFour 5.2s ease-in-out infinite reverse}.rave-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,hsla(var(--rave-hue),100%,72%,.4),transparent 45%);opacity:calc(var(--beat) * .68);mix-blend-mode:screen}.rave-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.025) 6px);mix-blend-mode:overlay}
body.rave-on{background:#030604;color:#f4ffe0}.rave-on .rave-scene{opacity:1}.rave-on .nav,.rave-on footer{border-color:#baff3d55}.rave-on .brand,.rave-on footer{color:#eaffbd;text-shadow:0 0 14px #aaff55aa}.rave-on .brand img{filter:drop-shadow(0 0 9px #c2ff42) drop-shadow(0 0 24px #49ff18)}.rave-on .sound-switch{background:#c7ff00;border-color:#eaffb6;box-shadow:0 0 12px #b7ff00,0 0 35px #64ff0077;color:#071105}.rave-on .hero-topline{color:#caff51;text-shadow:0 0 12px #8cff00}.rave-on .hero h1{color:#e9ffc2;-webkit-text-stroke:1px #baff4b;text-shadow:calc(-5px - var(--beat) * 8px) 0 0 #ff1677aa,calc(5px + var(--beat) * 8px) 0 0 #00eaffaa,0 0 calc(20px + var(--beat) * 45px) #aeff00;animation:raveTitle 1.55s steps(2,end) infinite}.rave-on .pill{background:#d8ff00;color:#071105;box-shadow:0 0 22px #b4ff00}.rave-on .hero-copy h2{text-shadow:0 0 16px #baff73}.rave-on .mascot-button{animation:mascotRave .615s cubic-bezier(.2,.8,.4,1) infinite alternate}.rave-on .mascot{filter:drop-shadow(calc(var(--beat) * -11px) 0 0 #ff178bcc) drop-shadow(calc(var(--beat) * 11px) 0 0 #00eaffcc) drop-shadow(0 0 calc(14px + var(--beat) * 35px) #b8ff30)}.rave-on .pepoto-label{background:#ff1979;color:#fff;border-color:#fff;box-shadow:4px 4px 0 #c5ff25,0 0 30px #ff0077;animation:labelRave .75s steps(2,end) infinite}.rave-on .hero-topline span:last-child,.rave-on .label-star{color:#d8ff00;filter:drop-shadow(0 0 8px #c4ff00)}
@keyframes gridDrive{to{background-position:0 58px,58px 0}}@keyframes laserOne{0%,100%{transform:translateX(-50%) rotate(-42deg)}50%{transform:translateX(-50%) rotate(44deg)}}@keyframes laserTwo{0%,100%{transform:translateX(-50%) rotate(58deg)}50%{transform:translateX(-50%) rotate(-28deg)}}@keyframes laserThree{0%,100%{transform:translateX(-50%) rotate(-12deg)}50%{transform:translateX(-50%) rotate(68deg)}}@keyframes laserFour{0%,100%{transform:translateX(-50%) rotate(22deg)}50%{transform:translateX(-50%) rotate(-64deg)}}@keyframes raveTitle{0%,92%,100%{transform:translate(0)}94%{transform:translate(-4px,2px)}96%{transform:translate(5px,-2px)}98%{transform:translate(-2px)}}@keyframes mascotRave{from{transform:translateY(0) scale(1)}to{transform:translateY(calc(var(--beat) * -9px)) scale(calc(1 + var(--beat) * .025))}}@keyframes labelRave{50%{transform:rotate(6deg) scale(1.05);filter:hue-rotate(55deg)}}
@media(max-width:760px){.laser{width:22vw}.rave-on .hero h1{-webkit-text-stroke:0}.rave-grid{bottom:-18%;height:65%;background-size:40px 40px}}
@media(prefers-reduced-motion:reduce){.rave-grid,.laser,.rave-on .hero h1,.rave-on .mascot-button,.rave-on .pepoto-label{animation:none!important}.rave-flash{display:none}.rave-on .mascot{filter:drop-shadow(0 0 20px #b8ff30)}}