/* Original CSS illustrations. Cute and HUD looks share identical motion keyframes. */
body{--paper:#f8f2e6;--stage-ink:#394343;--pink:#ed8eaa;--mint:#98cebd;--purple:#a79dd5;--yellow:#f4ce72;--outline:#394343;--soft-shadow:#39434318;--stage-line:#39434315}
body[data-look=cool]{--paper:#142336;--stage-ink:#dcf5f5;--pink:#65e1ee;--mint:#a6f576;--purple:#8a9ffc;--yellow:#d0fa78;--outline:#71dbe5;--soft-shadow:#65e1ee20;--stage-line:#65e1ee18}
.hero{max-width:none;position:relative;padding-right:350px;min-height:600px}.hero::before{content:'✦';position:absolute;right:70px;top:125px;font-size:130px;color:var(--pink);transform:rotate(-12deg);text-shadow:14px 16px 0 #ed8eaa15}.hero::after{content:'MAKE IT\A MOVE.';white-space:pre;position:absolute;right:20px;top:340px;font-size:42px;font-weight:900;line-height:1.1;letter-spacing:-2px;color:var(--mint);transform:rotate(5deg);border:2px solid var(--mint);padding:18px 24px;border-radius:25px}.intro{color:#f4ce72}.cards{gap:24px}.card{border-radius:20px;box-shadow:0 12px 35px #0002;transition:border-color .2s}.card:hover{border-color:var(--pink)}.card-body{padding:22px}.demo.designed{height:230px;background-color:var(--paper);background-image:radial-gradient(var(--stage-line) 1px,transparent 1px);background-size:18px 18px;color:var(--stage-ink);isolation:isolate}.demo.designed::before{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:var(--purple);opacity:.09;right:-50px;top:-50px}.demo.designed::after{content:'';position:absolute;inset:15px;border:1px solid var(--stage-line);border-radius:12px;pointer-events:none}.demo.designed .object{background:transparent;box-shadow:none;border-radius:0;width:auto;height:auto;color:var(--stage-ink);font-size:24px}.scene-caption{position:absolute;bottom:16px;left:22px;font-size:10px;letter-spacing:2px;font-weight:800;color:var(--stage-ink);opacity:.6}.scene-decor{position:absolute;inset:0;pointer-events:none}.scene-star{position:absolute;font-size:23px;color:var(--pink);line-height:1}.scene-star.one{top:42px;left:35px;transform:rotate(-15deg)}.scene-star.two{top:62px;right:38px;font-size:32px;color:var(--purple)}.scene-dot{position:absolute;left:58px;bottom:65px;width:7px;height:7px;border:2px solid var(--mint);border-radius:50%}.ground-shadow{position:absolute;left:50%;top:170px;transform:translateX(-50%);width:90px;height:9px;background:var(--soft-shadow);border-radius:50%;filter:blur(2px)}
.look-switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}.look-switch>span{font-size:11px;letter-spacing:2px;color:var(--muted);margin-right:8px}.look-switch p{width:100%;margin:0;font-size:12px;color:var(--muted)}.look-switch button[aria-pressed=true]{background:var(--pink);border-color:var(--pink);color:#142336;font-weight:700}
.buddy{display:block;width:78px;height:72px;border-radius:42% 42% 40% 40%;background:var(--mint);border:2px solid var(--outline);position:relative;box-shadow:inset 0 -7px 0 #0000000c,0 6px 0 var(--soft-shadow)}.buddy i{position:absolute;display:block}.buddy .ear{width:23px;height:34px;top:-24px;border:2px solid var(--outline);border-bottom:0;background:var(--mint);border-radius:50% 50% 0 0;z-index:-1}.buddy .ear.left{left:5px;transform:rotate(-14deg)}.buddy .ear.right{right:5px;transform:rotate(14deg)}.buddy .eye{width:5px;height:9px;top:28px;background:var(--outline);border-radius:5px}.buddy .eye.left{left:23px}.buddy .eye.right{right:23px}.buddy .cheek{width:12px;height:7px;top:40px;background:var(--pink);border-radius:50%}.buddy .cheek.left{left:9px}.buddy .cheek.right{right:9px}.buddy .mouth{width:10px;height:6px;border:2px solid var(--outline);border-top:0;border-radius:0 0 10px 10px;left:32px;top:39px}.squash .buddy{background:var(--pink)}.squash .buddy .ear{display:none}.anticipation .buddy{background:var(--yellow)}.anticipation .buddy .ear{background:var(--yellow)}
.mini-window{width:190px;display:flex;flex-direction:column;border:2px solid var(--outline);border-radius:14px;background:var(--paper);padding:12px 16px;box-shadow:5px 6px 0 var(--mint);gap:8px;font-size:17px}.window-dots{font-size:9px;letter-spacing:3px;color:var(--purple);padding-bottom:6px;border-bottom:1px solid var(--stage-line)}.message-line{width:75%;height:5px;background:var(--stage-line);border-radius:5px}.tiny-button{font-size:10px;align-self:flex-end;background:var(--pink);color:#394343;padding:3px 10px;border-radius:8px}.quest{display:flex;gap:12px;align-items:center;width:235px;background:var(--paper);border:2px solid var(--outline);border-radius:13px;box-shadow:5px 5px 0 var(--purple);padding:15px 12px;font-size:12px}.quest small{display:block;letter-spacing:2px;font-size:9px;color:var(--stage-ink)}.quest-symbol{font-size:32px;color:var(--pink)}.level{display:flex;align-items:center;flex-direction:column;width:110px;background:var(--yellow);border:2px solid var(--outline);border-radius:24px;padding:8px;box-shadow:5px 5px 0 var(--pink);color:#394343}.level small{font-size:10px;letter-spacing:1px}.level strong{font-size:48px;line-height:1.2}.level>span{font-size:13px;letter-spacing:7px;margin-left:7px}.collect-card{display:flex;flex-direction:column;align-items:center;width:115px;height:150px;background:var(--purple);color:#273238;border:2px solid var(--outline);border-radius:13px;padding:13px 6px;box-shadow:6px 6px 0 var(--soft-shadow)}.collect-card small{font-size:8px;letter-spacing:1px}.collect-card .gem{font-size:60px;line-height:1.6;color:var(--paper);text-shadow:3px 4px 0 #39434322}.collect-card strong{font-size:8px;letter-spacing:1px}.rare{background:var(--mint);box-shadow:4px 4px 0 var(--yellow)}.demo.shine .object{border-radius:13px}.demo.shine .shine{opacity:0;background:linear-gradient(105deg,transparent 30%,#ffffffb0 50%,transparent 70%)}
.scene-card{width:180px;height:130px;position:relative;overflow:hidden;border-radius:14px;border:2px solid var(--outline);display:block;background:#354562}.moon{position:absolute;right:27px;top:20px;width:27px;height:27px;border-radius:50%;background:var(--yellow);box-shadow:0 0 30px #f4ce7240}.stars{position:absolute;top:15px;left:17px;font-size:24px;color:#ffffffaa}.hill{position:absolute;left:-12px;right:-12px;height:95px;bottom:-45px;border-radius:50%;background:var(--mint);transform:rotate(-12deg)}.scene-card strong{position:absolute;bottom:16px;left:17px;font-size:10px;letter-spacing:3px;color:#354562}.heart{font-size:95px;line-height:1;color:var(--pink);text-shadow:3px 6px 0 var(--soft-shadow);-webkit-text-stroke:2px var(--outline)}.input-line{border:1px solid var(--outline);border-radius:6px;display:block;font-size:19px;padding:0 8px;color:var(--pink);letter-spacing:5px}.input-line b{float:right;font-size:14px}.error{box-shadow:5px 5px 0 var(--pink);font-size:15px}.start-button{width:175px;height:66px;border-radius:16px;border:2px solid var(--outline);background:var(--mint);box-shadow:0 7px 0 var(--outline);display:block;padding:6px 18px;font-size:24px;color:#394343}.start-button small{display:block;letter-spacing:3px;font-size:8px;padding-left:27px}.envelope{display:grid;place-items:center;width:110px;height:75px;background:var(--paper);border:2px solid var(--outline);border-radius:10px;box-shadow:5px 5px 0 var(--purple);position:relative}.envelope::before{content:'';position:absolute;top:-2px;width:73px;height:50px;border:2px solid var(--outline);clip-path:polygon(0 0,100% 0,50% 100%);background:var(--yellow)}.envelope span{position:relative;color:var(--pink);font-size:28px;top:5px;-webkit-text-stroke:1px var(--outline)}
.checkpoint{width:56px;height:56px;display:grid;place-items:center;background:var(--purple);color:var(--paper);border:2px solid var(--outline);border-radius:50%;font-size:28px}.demo .ring{border-color:var(--purple);z-index:1}.save-orb{display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--outline);border-radius:50%;background:var(--mint);box-shadow:0 0 0 10px var(--soft-shadow),0 0 35px var(--mint)}.save-orb span{font-size:35px;color:var(--paper)}.demo.spinner .object{width:90px;height:90px;border:2px dashed var(--purple);border-top:2px solid var(--purple);border-radius:50%}.orbit-dot{position:absolute;top:-7px;left:34px;display:block;width:14px;height:14px;border-radius:50%;background:var(--pink);border:2px solid var(--outline)}.orbit-center{position:absolute;font-size:35px;color:var(--purple);z-index:0}.demo.progress .object{width:180px;height:18px;border:1px solid var(--outline);background:var(--mint);border-radius:5px;overflow:hidden;transform-origin:left}.energy-stripes{position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 12px,#ffffff60 12px 19px)}.energy-track{width:190px;height:28px;position:absolute;border:2px solid var(--outline);border-radius:9px;background:var(--paper);box-shadow:4px 4px 0 var(--purple)}.energy-track small{position:absolute;top:-30px;left:0;font-size:10px;letter-spacing:2px}.energy-track b{position:absolute;bottom:-30px;right:0;font-size:10px;letter-spacing:3px}.demo.typewriter .object{width:10ch;font:20px monospace;color:var(--stage-ink);height:26px;border-right-color:var(--pink);margin-top:12px}.dialogue-frame{position:absolute;width:215px;height:100px;border:2px solid var(--outline);border-radius:12px;background:var(--paper);box-shadow:5px 5px 0 var(--yellow)}.dialogue-frame small{position:absolute;top:12px;left:17px;font-size:9px;letter-spacing:2px;color:var(--stage-ink)}
.demo.parallax .back{width:200px;height:120px;border-radius:50%;background:var(--purple);opacity:.65;top:45px;clip-path:polygon(0 100%,35% 20%,58% 60%,78% 0,100% 100%)}.foreground-island{display:block;position:relative;width:160px;height:48px;background:var(--mint);border:2px solid var(--outline);border-radius:50%;margin-top:55px;box-shadow:0 12px 0 var(--soft-shadow)}.tiny-house{position:absolute;width:42px;height:36px;left:40px;bottom:25px;background:var(--paper);border:2px solid var(--outline)}.tiny-house::before{content:'';position:absolute;left:-7px;top:-25px;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:24px solid var(--pink)}.tiny-house i{position:absolute;width:10px;height:18px;bottom:0;left:13px;background:var(--purple)}.little-tree{position:absolute;bottom:30px;right:28px;width:7px;height:42px;background:var(--outline)}.little-tree::before{content:'';position:absolute;width:35px;height:40px;left:-14px;top:-22px;background:var(--mint);border:2px solid var(--outline);border-radius:45%}
body[data-look=cool] .demo.designed{background-image:linear-gradient(var(--stage-line) 1px,transparent 1px),linear-gradient(90deg,var(--stage-line) 1px,transparent 1px);background-size:24px 24px}body[data-look=cool] .mini-window,body[data-look=cool] .quest,body[data-look=cool] .start-button,body[data-look=cool] .collect-card,body[data-look=cool] .dialogue-frame{border-radius:4px;box-shadow:4px 4px 0 var(--soft-shadow),0 0 20px var(--soft-shadow)}body[data-look=cool] .scene-caption{letter-spacing:3px}body[data-look=cool] .scene-star{color:var(--mint)}
@media(max-width:900px){.hero{padding-right:220px}.hero::before{font-size:90px;right:30px}.hero::after{font-size:30px;right:0}}@media(max-width:620px){.hero{padding-right:0;min-height:auto}.hero::before{font-size:40px;top:37px;right:5px}.hero::after{display:none}.demo.designed{height:230px}.look-switch>span{width:100%}.look-switch button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}