@font-face{font-family:Bangers;src:url(/assets/fonts/bangers.woff2) format("woff2");font-display:swap}
:root{--ink:#16081f;--paper:#fff7e6;--pink:#ff3d6e;--frost:#ff8ad8;--lime:#b8f53a;--yellow:#ffe14a;--cyan:#39d5ff;--violet:#5b21b6;--deep:#1f0a3d}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;color:var(--ink);font:600 17px/1.5 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;background-color:var(--paper);background-image:radial-gradient(rgba(91,33,182,.13) 24%,transparent 26%);background-size:14px 14px;overflow-x:hidden}
a{color:var(--violet)}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px}
h1,h2,h3,.bang,.sfx,.btn,.cap,.num,.stepnum,.level b,.shout,.fresh span{font-family:Bangers,Impact,"Arial Black",sans-serif;font-weight:400;letter-spacing:.03em}
header.top{background:var(--ink);position:sticky;top:0;z-index:30}
.topin{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;padding-bottom:8px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:400 24px Bangers,Impact,sans-serif;letter-spacing:.05em}
.brand img{height:38px;width:auto}
nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}nav a{color:#fff;text-decoration:none;font-size:15px}nav a:hover{color:var(--lime)}
.bang{font-size:clamp(38px,7vw,68px);line-height:1;margin:56px 0 18px;color:var(--pink);text-shadow:3px 3px 0 var(--ink);-webkit-text-stroke:1.5px var(--ink);transform:rotate(-1.2deg)}
.lightbang{color:var(--yellow)}
.btn{display:inline-block;padding:10px 22px 8px;font-size:24px;text-decoration:none;color:var(--ink);border:4px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.btn.pink{background:var(--frost)}.btn.lime{background:var(--lime)}
.row{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.sfx{position:absolute;font-size:clamp(34px,6vw,64px);color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);line-height:1;z-index:5;animation:pop 2.4s ease-in-out infinite}
.pinkfx{color:var(--frost)}
@keyframes pop{0%,100%{scale:1}50%{scale:1.1}}
.say{position:absolute;margin:0;background:#fff;border:4px solid var(--ink);border-radius:18px;padding:8px 14px;font-weight:800;line-height:1.2;z-index:6;box-shadow:3px 3px 0 var(--ink)}
.say::after{content:"";position:absolute;left:24px;bottom:-16px;border:9px solid transparent;border-top:12px solid var(--ink);border-bottom:0;width:0}
.panel{position:relative;overflow:hidden;border:5px solid var(--ink);box-shadow:7px 7px 0 var(--ink);border-radius:6px;background-color:#fff}
.p-pink{background:repeating-conic-gradient(from 0deg at 50% 55%,#ff7aa0 0 5deg,var(--pink) 5deg 11deg)}
.p-cyan{background:repeating-conic-gradient(from 0deg at 40% 55%,#8be9ff 0 5deg,var(--cyan) 5deg 11deg)}
.p-yellow{background:repeating-conic-gradient(from 0deg at 50% 50%,#fff3a0 0 5deg,var(--yellow) 5deg 11deg)}
.p-lime{background:repeating-conic-gradient(from 0deg at 50% 60%,#dcff8a 0 5deg,var(--lime) 5deg 11deg)}
.p-violet{background:radial-gradient(rgba(255,255,255,.14) 24%,transparent 26%) 0 0/12px 12px,linear-gradient(135deg,var(--violet),var(--deep))}
.p-paper{background:#fff}
.cap{position:absolute;left:0;top:0;background:var(--yellow);border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:5px 12px 3px;font-size:22px;z-index:6}
.burstbg{position:absolute;width:100%;height:100%}
.chevs{position:absolute;width:88px;display:flex;flex-direction:column;gap:0;z-index:3}.chevs svg{width:88px;height:44px;animation:chev 1s infinite}.chevs svg:nth-child(2){animation-delay:.15s}.chevs svg:nth-child(3){animation-delay:.3s}
@keyframes chev{0%,100%{opacity:.35}40%{opacity:1}}
/* cover */
.cover{background:radial-gradient(rgba(255,255,255,.12) 24%,transparent 26%) 0 0/14px 14px,linear-gradient(135deg,#7c1fd1 0%,var(--pink) 100%);border-bottom:6px solid var(--ink);overflow:hidden}
.coverin{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:14px;min-height:560px}
.wordmark{width:100%;height:auto;display:block;transform:rotate(-2deg)}
.kicker{color:#fff;font:400 clamp(26px,3.6vw,38px)/1.1 Bangers,Impact,sans-serif;letter-spacing:.04em;text-shadow:3px 3px 0 var(--ink);margin:16px 0 0}
.badge{display:inline-block;margin:6px 0 0;background:var(--ink);color:var(--lime);padding:5px 14px;font-weight:800;border-radius:6px;transform:rotate(-1.5deg)}
.coverart{position:relative;height:560px}
.heropanel{position:absolute;inset:26px 34px 30px 30px;rotate:1.6deg}.hero{position:absolute;left:50%;top:4px;width:122%;max-width:none;height:auto;transform:translateX(-50%)}
.s1{left:0;top:9%;rotate:-12deg}.s2{right:0;top:44%;rotate:9deg;animation-delay:.6s}
.sayhero{left:50%;top:3%;transform:translateX(-30%);font-size:20px}
.float{position:absolute;width:82px;height:82px;animation:bob 3s ease-in-out infinite;z-index:4}.d1{left:4%;bottom:12%}.d2{right:6%;top:18%;width:58px;height:58px;animation-delay:.8s}
@keyframes bob{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -14px;rotate:6deg}}
/* strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.strip .panel{height:300px}.strip .big,.strip .slice{grid-column:span 2}.strip .wide{grid-column:span 3;height:360px}
.flying{position:absolute;right:16%;top:50%;width:190px;height:190px;translate:0 -50%;animation:bob 2s ease-in-out infinite}
.s3{left:32%;bottom:9%;rotate:-6deg}
.closeup{position:absolute;left:50%;top:-6%;width:125%;height:auto;transform:translateX(-50%)}
.saytop{right:10px;top:50px;font-size:22px}
.saber{position:absolute;left:-12%;top:58%;width:130%;height:16px;background:#fff;border:3px solid var(--ink);border-radius:9px;rotate:-24deg;box-shadow:0 0 0 7px var(--frost),0 0 0 10px var(--ink);z-index:3}
.half{position:absolute;width:150px;height:150px;top:17%;z-index:2}.half.l{left:13%;rotate:-16deg}.half.r{right:13%;rotate:164deg;top:30%}
.sp{position:absolute;width:13px;height:6px;border-radius:3px;background:var(--pink);z-index:4}.sp.a{left:44%;top:18%;rotate:30deg}.sp.b{left:55%;top:30%;background:var(--cyan);rotate:-30deg}.sp.c{left:40%;top:72%;background:var(--violet);rotate:60deg}.sp.d{left:62%;top:68%;rotate:10deg;background:#fff}.sp.e{left:50%;top:50%;background:var(--lime);rotate:80deg}
.s4{right:6%;bottom:7%;rotate:7deg}
.frap{position:absolute;left:50%;top:18%;width:150px;height:230px;translate:-50% 0;rotate:9deg;animation:bob 2.6s ease-in-out infinite}
.s5{left:8%;bottom:10%;rotate:-8deg}
.aj{position:absolute;left:3%;top:-6%;width:38%;height:auto}.luca{position:absolute;right:-1%;top:-4%;width:38%;height:auto;transform:scaleX(-1)}
.sayaj{left:39%;top:40px;font-size:30px}.sayluca{right:36%;bottom:44px;font-size:26px}
.sayluca::after{left:auto;right:-12px;bottom:12px;rotate:-90deg}
/* levels */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.level{position:relative;border:5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden;background:#fff;border-radius:6px}.level img{display:block;width:100%;height:auto}
.level b{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:clamp(24px,4vw,40px);padding:4px 0 2px;border-top:4px solid var(--ink);color:var(--ink)}
.l1 b{background:var(--lime)}.l2 b{background:var(--yellow)}.l3 b{background:var(--frost)}.l4 b{background:var(--pink);color:#fff}
.l1{rotate:-1deg}.l2{rotate:.8deg}.l3{rotate:-.6deg}.l4{rotate:1.4deg;scale:1.04}
.shout{font-size:clamp(28px,5vw,48px);text-align:center;margin:30px 0 8px;color:var(--violet);text-shadow:2px 2px 0 var(--yellow)}
.fresh{position:relative;width:min(100%,520px);height:230px;margin:6px auto 0;display:grid;place-items:center;rotate:-2deg}
.fresh span{position:relative;color:#fff;font-size:clamp(28px,5vw,42px);text-shadow:3px 3px 0 var(--ink);text-align:center;line-height:1}
.fresh small{display:block;font:800 15px/1.3 ui-rounded,system-ui,sans-serif;letter-spacing:0;text-shadow:none;margin-top:6px}
/* your songs */
.yours{background:radial-gradient(rgba(255,255,255,.1) 24%,transparent 26%) 0 0/14px 14px,var(--deep);margin-top:56px;padding:6px 0 46px;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tall{height:330px}.num{position:absolute;left:0;top:0;background:#fff;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:5px 14px 3px;font-size:28px;z-index:6}
.notes{position:absolute;left:0;right:0;top:64px;text-align:center;font-size:92px;line-height:1;color:#fff;text-shadow:4px 4px 0 var(--ink)}
.hs{position:absolute;left:50%;top:60px;translate:-50% 0;width:220px;height:132px;animation:bob 3s ease-in-out infinite}
.mid{position:absolute;left:50%;top:52px;translate:-50% 0;width:150px;height:150px}
.s6{right:6%;top:42%;rotate:-7deg;font-size:40px}
.saymid{left:14px;right:14px;bottom:24px;text-align:center;font-size:18px}
/* how-to */
.howto{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{padding:14px 14px 16px}.step h3{font-size:28px;margin:4px 0 8px 42px;line-height:1.05;min-height:58px;display:flex;align-items:center}.step p{margin:10px 0 0;font-size:15.5px;line-height:1.4}
.stepnum{position:absolute;left:0;top:0;width:46px;height:46px;display:grid;place-items:center;background:var(--pink);color:#fff;font-size:30px;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.pic{position:relative;height:150px;border:4px solid var(--ink);border-radius:6px;overflow:hidden;display:grid;place-items:center;background:var(--deep)}
.pic-song{background:repeating-conic-gradient(from 0deg at 50% 50%,#ff7aa0 0 6deg,var(--pink) 6deg 13deg)}.file{background:#fff;border:3px solid var(--ink);border-radius:8px;padding:12px 12px;font-weight:800}
.pic-browser{background:var(--cyan)}.win{position:relative;width:76%;height:76%;background:#fff;border:4px solid var(--ink);border-radius:8px;padding:8px}.win i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pink);margin-right:4px}.win i:nth-child(2){background:var(--yellow)}.win i:nth-child(3){background:var(--lime)}
.down{position:absolute;left:50%;top:54%;translate:-50% -50%;font:400 58px/1 Bangers,Impact,sans-serif;color:var(--violet);animation:drop 1.4s infinite}
@keyframes drop{0%{translate:-50% -74%}70%,100%{translate:-50% -36%}}
.pic-menu{grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:var(--deep)}.pic-menu span{background:#3a1a70;color:#fff;border-radius:8px;padding:9px 4px;text-align:center;font-size:14px;font-weight:800}.pic-menu .on{background:var(--lime);color:var(--ink);outline:3px solid var(--yellow)}
.pic-play{background:repeating-conic-gradient(from 0deg at 50% 50%,#fff3a0 0 6deg,var(--yellow) 6deg 13deg)}.mini{width:100px;height:100px}.s7{right:10%;bottom:10%;font-size:42px;rotate:-8deg}
.alt{background:var(--lime);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 16px;margin:24px 0}
.videobox{max-width:860px;margin:26px auto 12px}.videobox video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink)}
.fine{font-size:14px;font-weight:600}.note{text-align:center}
.compat{margin-top:40px}.compatbox{display:flex;align-items:center;gap:22px;padding:16px 26px 22px}.compatbox .bang{margin:12px 0 4px;font-size:clamp(30px,5vw,50px)}.hsbig{flex:none;width:170px;height:102px}.models{color:#fff;margin:0;font-size:20px}.models b{color:var(--lime)}
footer{margin-top:60px;background:var(--ink);color:#fff;padding:22px 0 26px}footer a{color:var(--frost);margin-right:14px}footer p{margin:6px 0}.only{font:400 26px Bangers,Impact,sans-serif;letter-spacing:.04em;color:var(--lime)}
/* home */
.homehero{background:radial-gradient(900px 500px at 50% 0%,#3e1670,#120728 72%);padding:14px 0 18px;border-bottom:6px solid var(--ink);text-align:center}
.lockup{position:relative;width:min(68vw,380px);aspect-ratio:1;margin:0 auto -6px}.lockup img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lockup .logo{animation:hmLogo 1.4s .2s cubic-bezier(.22,.9,.3,1) both}.lockup .drop{transform-origin:51% 90%;animation:hmDrop 1.6s 1.5s cubic-bezier(.55,0,1,.45) both,hmSquash .42s 3.1s ease-out}
@keyframes hmLogo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes hmDrop{0%{opacity:0;transform:translateY(-48%)}6%{opacity:1;transform:translateY(-48%)}100%{opacity:1;transform:translateY(0)}}
@keyframes hmSquash{50%{transform:translateY(1.1%) scale(1.05,.93)}}
.creation{color:#cdb9e6;letter-spacing:.32em;font-size:14px;margin:0}
.homecard{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;margin-top:34px;text-decoration:none;color:var(--ink);min-height:380px}
.hc-art{position:relative;height:380px;overflow:hidden}.hc-art img{position:absolute;left:50%;top:6px;width:98%;height:auto;transform:translateX(-50%)}
.hc-text{padding:22px}.hc-text>img{width:100%;height:auto;display:block}.hc-text .say{position:relative;display:inline-block;margin:18px 0;font-size:20px}
/* privacy */
.paper{margin-top:30px}.policy{background:#fff;border:5px solid var(--ink);box-shadow:7px 7px 0 var(--ink);border-radius:6px;padding:22px 26px;max-width:800px;margin:0 auto}.policy h1{font-size:44px;margin:0 0 8px;color:var(--pink)}.policy h2{font-size:28px;margin:22px 0 4px}.policy p,.policy li{font-weight:500}
@media (max-width:860px){.coverin{grid-template-columns:1fr;padding-top:18px}.coverart{height:440px}.hero{width:360px;bottom:-110px}.strip{grid-template-columns:1fr 1fr}.strip .big,.strip .wide,.strip .slice{grid-column:span 2}.howto{grid-template-columns:1fr 1fr}.trio{grid-template-columns:1fr}.homecard{grid-template-columns:1fr}}
@media (max-width:520px){nav{gap:10px}nav a{font-size:13px}.strip{grid-template-columns:1fr}.strip .big,.strip .wide,.strip .slice{grid-column:span 1}.strip .wide{height:300px}.aj,.luca{width:50%}.sayaj{left:30%;top:14px;font-size:22px}.sayluca{right:26%;bottom:14px;font-size:20px}.levels{grid-template-columns:1fr 1fr}.howto{grid-template-columns:1fr}.compatbox{flex-direction:column;text-align:center}.flying{width:150px;height:150px;right:6%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}html{scroll-behavior:auto}}

#round,#add-songs{scroll-margin-top:84px}