:root{--night:#17172e;--acid:#d8f474;--pink:#ed9ac7}body{background:#17172e}header{position:relative;z-index:3;max-width:none;padding:25px 5%;background:#17172e;color:#fff6ec;border-bottom:1px solid #ffffff12}.brandmark{background:#d8f474;color:#303640;font-family:Arial,sans-serif}header nav .sound{color:#f9f3e4;border-color:#ffffff35}#wonderCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.wonder-hero{background:radial-gradient(ellipse at 50% 60%,#2a2642,transparent 65%),#17172e;color:#fff8ec;min-height:770px;position:relative;text-align:center;overflow:hidden;padding:65px 20px 0}.wonder-hero>*{position:relative;z-index:5}.hero-topline{font-size:10px;letter-spacing:3px;font-weight:600;color:#c8c6dc}.live-dot{display:inline-block;background:#d8f474;width:6px;height:6px;border-radius:50%;margin-right:8px;box-shadow:0 0 15px #d8f4aa}.wonder-hero h1{font-size:clamp(52px,6.4vw,90px);line-height:1;letter-spacing:-4px;margin:27px auto 23px;font-weight:500;pointer-events:none}.wonder-hero h1 span{color:#d8f474}.wonder-hero p{font-size:15px;line-height:1.8;color:#b8b6ce;pointer-events:none}.smash-start{font-size:17px;font-weight:700;color:#232738;background:#d8f474;border:0;border-radius:18px;padding:20px 32px;margin-top:12px;box-shadow:0 6px 0 #9bb34d,0 12px 50px #bddd6230;transform:rotate(-2deg);transition:transform .2s}.smash-start span{font-size:23px;margin-left:30px}.smash-start:hover{transform:rotate(1deg) scale(1.04)}.smash-start:active{transform:translateY(5px)}.start-hint{font-size:11px;color:#9896b1;margin:22px 0 25px}.world-picker{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.world-picker button,.world-tools button{border:1px solid #ffffff20;background:#ffffff06;color:#c5c4d7;border-radius:30px;padding:10px 16px;font-size:11px}.world-picker button.selected{border-color:#d8f47488;color:#e0f6a6;background:#d8f4740d}.magic-keyboard{width:min(630px,95%);margin:28px auto 20px;display:flex;flex-direction:column;align-items:center;gap:6px}.key-row{display:flex;gap:5px;justify-content:center;width:100%}.magic-key{width:45px;height:38px;border:1px solid #ffffff25;border-radius:9px;background:#ffffff08;color:#bbb9d1;font-size:13px;box-shadow:0 3px 0 #08081a55;transition:background .1s,transform .1s}.magic-key:hover{background:#ffffff22}.magic-key.down{background:var(--acid);color:#242639;transform:translateY(3px);box-shadow:0 0 25px #d8f47455}.magic-key.wide{width:140px;font-size:10px;letter-spacing:1.5px}.hero-bottom{border-top:1px solid #ffffff13;margin:35px auto 0;padding:22px 0;max-width:1160px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1.5px;color:#9692b0}.ribbon{position:relative;z-index:5;background:#e8ecd8}.games-section,.parents,footer{position:relative;z-index:3}.new-art{background:#23233d;display:flex;align-items:center;justify-content:center;gap:15px}.new-art i{position:absolute;bottom:19px;color:#ffffff80;font-size:8px;letter-spacing:2px;font-style:normal}.paint-art>span{font-size:170px;color:#b29ee8;transform:rotate(-25deg);text-shadow:12px 10px 0 #e39ac5,-10px -10px 0 #d8f474}.paint-art>b{position:absolute;right:45px;top:40px;font-size:40px;color:#d8f474}.band-art span{width:64px;height:80px;background:#c4a5ed;border-radius:45% 45% 25% 25%;color:#23233d;font-size:20px;text-align:center;padding-top:18px;box-shadow:inset 0 -7px 0 #0001}.band-art span:after{content:'◡';display:block;font-size:25px;line-height:.8}.band-art span:nth-child(2){background:#d8f474;height:105px;transform:rotate(-8deg)}.band-art span:nth-child(3){background:#ef9aba;transform:rotate(10deg)}.catch-art span{font:600 45px Outfit,sans-serif;background:#e4a75c;color:#35304b;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;box-shadow:-15px -18px 0 #e4a75c15,-30px -36px 0 #e4a75c08}.catch-art span:nth-child(2){background:#a7d2d9;margin-top:-50px;transform:rotate(-15deg)}.catch-art span:nth-child(3){background:#c0a6e2;margin-top:30px;transform:rotate(15deg)}body.wonder-active{overflow:hidden;background:var(--night)}body.wonder-active>header,body.wonder-active>main{visibility:hidden}body.wonder-active #wonderCanvas{z-index:10;pointer-events:auto;touch-action:none}#wonderUI{position:fixed;inset:0;z-index:11;pointer-events:none;color:#f9f5eb;display:flex;flex-direction:column;justify-content:space-between}#wonderUI[hidden]{display:none}#wonderUI button,#wonderUI select,#wonderUI label{pointer-events:auto}.wonder-toolbar{padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px}.wonder-toolbar button{border:1px solid #ffffff24;color:#dedce9;background:#202036aa;border-radius:25px;padding:10px 15px;font-size:12px;backdrop-filter:blur(10px)}.wonder-toolbar>div:last-child{display:flex;gap:8px}.wonder-brand{font:500 24px Outfit,sans-serif;letter-spacing:-1px;color:#d8f474}.wonder-brand small{display:block;color:#aaa7bd;font:9px 'DM Sans',sans-serif;letter-spacing:2px;text-align:center;margin-top:4px}.world-tools{position:absolute;top:88px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;gap:10px}.world-tools #playWorlds{display:flex;gap:7px}.world-tools label{font-size:10px;color:#bbb8ce;display:flex;gap:10px;align-items:center}.world-tools select{background:#202036;color:#eee7f8;border:1px solid #ffffff30;border-radius:18px;padding:9px;font:11px 'DM Sans',sans-serif}#playPrompt{position:absolute;top:155px;left:20px;right:20px;text-align:center;font-size:13px;color:#b3acc8;pointer-events:none}.wonder-bottom{padding:0 10px 12px;text-align:center;background:linear-gradient(transparent,#17172e99)}.wonder-bottom .magic-keyboard{margin:15px auto 8px}.wonder-bottom p{font-size:9px;color:#9690ab;margin:12px 0 0}.wonder-score{display:flex;gap:8px;align-items:baseline;justify-content:center;font-size:11px;color:#bcb7cd}.wonder-score>b{font:500 28px Outfit;color:#dcf59d}.wonder-score #lastKey{margin-left:15px;color:#e7dfed}.world-tools button.selected{border-color:#d8f474;color:#d8f474}#bandPads{position:absolute;left:5%;right:5%;top:31%;display:flex;justify-content:center;gap:18px;pointer-events:none}#bandPads[hidden]{display:none}.buddy-pad{pointer-events:auto!important;position:relative;width:min(150px,22vw);height:160px;border:0;background:var(--buddy);border-radius:45% 45% 30% 30%;font-family:Outfit;color:#28243d;box-shadow:inset 0 -12px 0 #0001;transition:transform .15s;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:10px;padding:24px 5px}.buddy-pad .eyes{font-size:30px;letter-spacing:20px;padding-left:20px;line-height:.6}.buddy-pad .mouth{font-size:36px;line-height:.7}.buddy-pad small{font-size:10px;margin-top:12px}.buddy-pad.boop{transform:translateY(-25px) rotate(-8deg) scale(1.08)}body.wonder-active dialog{z-index:30}#settings input[type=range]{width:150px;accent-color:#526a3c}body[data-world=reef] .wonder-hero{background:radial-gradient(ellipse at 50% 60%,#1e525e,transparent 70%),#102d40}body[data-world=bloom] .wonder-hero{background:radial-gradient(ellipse at 50% 60%,#403e42,transparent 70%),#212a29}@media(max-width:650px){.wonder-hero{padding-top:44px;min-height:725px}.wonder-hero h1{font-size:56px;letter-spacing:-2.8px}.wonder-hero p{font-size:13px}.hero-topline{font-size:8px;letter-spacing:2px}.hero-bottom{font-size:7px;gap:12px}.magic-key{width:8vw;max-width:45px;height:33px;border-radius:7px;font-size:11px}.key-row{gap:3px}.wonder-toolbar{padding:14px 10px}.wonder-brand{font-size:18px}.wonder-brand small{font-size:7px}.wonder-toolbar button{font-size:10px;padding:9px}.wonder-toolbar .sound{font-size:10px;padding:9px}.world-tools{top:80px;left:10px;right:10px;flex-wrap:wrap}.world-tools button{padding:8px 10px;font-size:9px}.world-tools label{font-size:9px}.world-tools label select{padding:6px}.world-tools #playWorlds{width:100%;justify-content:center}#playPrompt{top:165px;font-size:11px}.wonder-score{font-size:9px}.wonder-score #lastKey{margin-left:4px}.wonder-bottom{padding-bottom:15px}.buddy-pad{height:135px}#bandPads{gap:10px;left:3%;right:3%;top:34%}.buddy-pad .eyes{letter-spacing:10px;padding-left:10px;font-size:24px}.buddy-pad small{font-size:8px}}@media(max-height:650px){.wonder-bottom .magic-keyboard{gap:3px;margin-top:6px}.wonder-bottom .magic-key{height:25px}.wonder-bottom p{display:none}.world-tools{top:62px}#playPrompt{top:115px}.buddy-pad{height:110px}#bandPads{top:29%}}

body.wonder-active>footer{visibility:hidden}.wonder-active[data-mode=band] #sequencer{top:calc(22% + 185px);bottom:auto}
@media(max-width:720px){.wonder-active[data-mode=band] #sequencer{top:calc(23% + 145px)}.wonder-active[data-mode=paint] #playPrompt{top:165px}}
@media(max-height:650px) and (min-width:650px){.wonder-active[data-mode=band] #sequencer{top:24%;bottom:auto}}
@media(max-height:620px) and (max-width:649px){.wonder-active[data-mode=band] #bandPads{top:20%}.wonder-active[data-mode=band] .buddy-pad{height:88px}.wonder-active[data-mode=band] #sequencer{top:calc(20% + 105px);padding:10px}.beat-row .beat{height:24px}.loop-tools{margin-top:9px}}
/* Complete game controls. Kept with the engine, independent of page styles. */
body{background:#17172e;color:#fff7ec}header{z-index:8}.brandmark{line-height:1;font-size:29px}.world-tools select{width:auto;margin:0}.wonder-active[data-mode=paint] #playKeyboard,.wonder-active[data-mode=band] #playKeyboard,.wonder-active[data-mode=sail] #playKeyboard{display:none}.wonder-toolbar{flex-shrink:0}.wonder-bottom{margin-top:auto}.wonder-score #lastKey{max-width:350px}
#creativeTools{position:absolute;bottom:85px;left:16px;right:16px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;pointer-events:auto}#creativeTools button,#sequencer button{border:1px solid #ffffff30;border-radius:12px;padding:10px 14px;background:#292541;color:#fff7ec;font:12px Outfit,Arial}#creativeTools button[aria-pressed=true]{outline:2px solid #d8f474;outline-offset:2px}#creativeTools .swatch{width:34px;height:34px;padding:0;border-radius:50%;background:var(--swatch);border:3px solid transparent}#creativeTools .swatch[aria-pressed=true]{border-color:#fff;outline:2px solid #17172e;outline-offset:-5px}
.wonder-active[data-mode=band] .world-tools{display:none}.wonder-active[data-mode=band] #playPrompt{top:90px}.wonder-active[data-mode=band] #bandPads{top:22%;gap:18px}.wonder-active[data-mode=band] .buddy-pad{height:140px;width:min(135px,20vw)}#sequencer{position:absolute;top:calc(22% + 175px);bottom:auto;left:50%;transform:translateX(-50%);width:min(600px,92%);padding:18px;border:1px solid #ffffff24;border-radius:20px;background:#1d1b33ed;pointer-events:auto}.beat-row{display:grid;grid-template-columns:60px repeat(8,minmax(0,1fr));align-items:center;gap:6px;margin:7px 0}.beat-row>span{font-size:11px;color:#cdc3dd}.beat-row .beat{height:32px;padding:0!important;border-radius:7px!important;background:#ffffff09!important;border:1px solid #ffffff25!important}.beat-row .beat[aria-pressed=true]{background:var(--beat)!important;border-color:var(--beat)!important}.beat-row .beat.current{outline:2px solid #fff;outline-offset:2px}.loop-tools{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:15px;flex-wrap:wrap}#sequencer #loopPlay{background:#d8f474;color:#252438}.loop-tools label{display:flex;align-items:center;gap:7px;font-size:11px}#sequencer select{width:auto;margin:0;padding:9px;font-size:11px}#sailorHUD{position:absolute;top:200px;left:20px;right:20px;display:flex;justify-content:center;align-items:center;gap:20px;font-size:12px;color:#d2c8df}#sailorHUD strong{font-size:18px;color:#d8f474;font-weight:500}
@media(max-width:720px){.wonder-toolbar{gap:5px}.wonder-brand{font-size:16px}.wonder-brand small{font-size:6px;letter-spacing:1px}.wonder-toolbar>div:last-child{gap:4px}.wonder-toolbar button{padding:9px 7px;font-size:9px}.wonder-active[data-mode=band] #bandPads{top:23%;gap:8px}.wonder-active[data-mode=band] .buddy-pad{height:100px}.wonder-active[data-mode=band] #sequencer{top:calc(23% + 125px);padding:12px}.beat-row{grid-template-columns:38px repeat(8,minmax(0,1fr));gap:5px}.beat-row>span{font-size:9px}.beat-row .beat{height:29px}.loop-tools{gap:6px;margin-top:12px}#sequencer button{font-size:10px;padding:10px}.world-tools{top:75px}.world-tools select{padding:7px}.wonder-active[data-mode=paint] #playPrompt,.wonder-active[data-mode=sail] #playPrompt{top:155px}#sailorHUD{top:200px;gap:10px;font-size:10px}#creativeTools{bottom:85px;gap:7px;left:12px;right:12px}#creativeTools button{font-size:10px;padding:10px}#creativeTools .swatch{width:30px;height:30px}.wonder-score #lastKey{max-width:165px;font-size:9px}.wonder-hero h1{font-size:clamp(45px,12vw,60px)}}
@media(max-height:650px) and (min-width:650px){.wonder-active[data-mode=band] #bandPads{top:29%;left:3%;right:auto;width:43%;gap:10px}.wonder-active[data-mode=band] .buddy-pad{width:85px;height:120px}.wonder-active[data-mode=band] #sequencer{top:25%;left:auto;right:3%;width:47%;transform:none}.beat-row{grid-template-columns:35px repeat(8,minmax(0,1fr));gap:4px}.beat-row .beat{height:26px}#sailorHUD{top:175px}}
@media(max-height:620px) and (max-width:649px){.wonder-active[data-mode=band] #bandPads{top:24%}.wonder-active[data-mode=band] .buddy-pad{height:80px;padding:15px 4px;gap:6px}.wonder-active[data-mode=band] #sequencer{top:calc(24% + 95px);padding:9px}.beat-row .beat{height:24px}.loop-tools{margin-top:8px}.wonder-active[data-mode=band] #playPrompt{top:85px}}
@media(max-width:720px){.wonder-active[data-mode=band] .buddy-pad{padding:12px 4px;gap:5px;justify-content:center}.buddy-pad .eyes{font-size:20px;line-height:1}.buddy-pad .mouth{font-size:26px;line-height:.7}.buddy-pad small{margin-top:6px}}
body.wonder-active .skip-link{display:none}