@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--pixel-red:#f44;--pixel-blue:#48f;--pixel-green:#4c4;--pixel-yellow:#fc0;--pixel-purple:#c4f;--pixel-bg:#0f0f23;--pixel-dark:#1a1a2e;--pixel-darker:#16213e;--pixel-white:#f0f0f0}body{background-color:var(--pixel-bg);color:var(--pixel-white);min-height:100vh;font-family:"Press Start 2P",monospace}.pixel-btn{cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:4px solid #000;padding:12px 20px;font-family:"Press Start 2P",monospace;font-size:10px;box-shadow:4px 4px #000}.pixel-btn:active{transform:translate(2px,2px);box-shadow:2px 2px #000}.pixel-btn-yellow{background-color:var(--pixel-yellow);color:#000}.pixel-btn-red{background-color:var(--pixel-red);color:#fff}.pixel-btn-green{background-color:var(--pixel-green);color:#000}.pixel-btn-blue{background-color:var(--pixel-blue);color:#fff}.pixel-btn-gray{color:#fff;background-color:#444}.pixel-input{color:var(--pixel-white);border:4px solid var(--pixel-yellow);background:#111;outline:none;width:100%;padding:10px 12px;font-family:"Press Start 2P",monospace;font-size:10px;box-shadow:4px 4px #000}.pixel-input:focus{border-color:var(--pixel-green)}.pixel-panel{background:var(--pixel-darker);border:4px solid var(--pixel-yellow);padding:20px;box-shadow:6px 6px #000}.pixel-title{color:var(--pixel-yellow);text-shadow:4px 4px #000;letter-spacing:4px;text-align:center;font-size:clamp(16px,4vw,32px)}.screen{background-color:var(--pixel-bg);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.sky-screen{position:relative;overflow:hidden}.sky-screen:before,.sky-screen:after{content:"";pointer-events:none;z-index:0;position:absolute}.sky-screen:before{background-image:repeating-conic-gradient(var(--sky-grain,#0000000f) 0% 25%, transparent 0% 50%);background-size:8px 8px;inset:0}.sky-screen:after{width:4px;height:4px;opacity:var(--star-glow,.8);background:0 0;animation:3.2s step-end infinite star-twinkle;top:0;left:0;box-shadow:7vw 9vh #fff,16vw 22vh #fff,24vw 6vh #fff,33vw 16vh #fff,41vw 9vh #fff,52vw 13vh #fff,61vw 5vh #fff,70vw 18vh #fff,78vw 8vh #fff,87vw 14vh #fff,93vw 24vh #fff,12vw 33vh #fff,27vw 29vh #fff,47vw 27vh #fff,58vw 31vh #fff,73vw 28vh #fff,85vw 35vh #fff,5vw 46vh #fff,20vw 43vh #fff,38vw 41vh #fff,55vw 44vh #fff,68vw 40vh #fff,90vw 47vh #fff,30vw 55vh #fff,50vw 58vh #fff,75vw 54vh #fff,10vw 60vh #fff,63vw 63vh #fff,84vw 66vh #fff,22vw 68vh #fff}.sky-screen>*{z-index:2;position:relative}.sky-sunset{--sky-grain:#3a125412;--star-glow:.75;background-color:#471670;background-image:repeating-conic-gradient(#471670 0% 25%,#0000 0% 50%),repeating-conic-gradient(#79209b 0% 25%,#0000 0% 50%),repeating-conic-gradient(#b62d92 0% 25%,#0000 0% 50%),repeating-conic-gradient(#ec5a78 0% 25%,#0000 0% 50%),repeating-conic-gradient(#ff8e5b 0% 25%,#0000 0% 50%),repeating-conic-gradient(#ffbf72 0% 25%,#0000 0% 50%),linear-gradient(#471670 0% 13%,#79209b 13% 26%,#b62d92 26% 39%,#ec5a78 39% 52%,#ff8e5b 52% 65%,#ffbf72 65% 80%,#ffe8c2 80% 100%);background-position:0 calc(13% + 2.08px),0 calc(26% + 4.16px),0 calc(39% + 6.24px),0 calc(52% + 8.32px),0 calc(65% + 10.4px),0 calc(80% + 12.8px),0 0;background-repeat:repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,no-repeat;background-size:16px 16px,16px 16px,16px 16px,16px 16px,16px 16px,16px 16px,100% 100%}.sky-dusk{--sky-grain:#0000001a;--star-glow:.9;--cloud:#c9a4e6;--cloud-shade:#9a6fc4;background-color:#120b30;background-image:repeating-conic-gradient(#120b30 0% 25%,#0000 0% 50%),repeating-conic-gradient(#261048 0% 25%,#0000 0% 50%),repeating-conic-gradient(#41145a 0% 25%,#0000 0% 50%),repeating-conic-gradient(#63185b 0% 25%,#0000 0% 50%),repeating-conic-gradient(#8a2046 0% 25%,#0000 0% 50%),repeating-conic-gradient(#ab3a31 0% 25%,#0000 0% 50%),linear-gradient(#120b30 0% 18%,#261048 18% 34%,#41145a 34% 50%,#63185b 50% 64%,#8a2046 64% 76%,#ab3a31 76% 87%,#b8512b 87% 100%);background-position:0 calc(18% + 2.88px),0 calc(34% + 5.44px),0 calc(50% + 8px),0 calc(64% + 10.24px),0 calc(76% + 12.16px),0 calc(87% + 13.92px),0 0;background-repeat:repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,no-repeat;background-size:16px 16px,16px 16px,16px 16px,16px 16px,16px 16px,16px 16px,100% 100%}.sky-night{--sky-grain:#ffffff08;--star-glow:1;--cloud:#39406e;--cloud-shade:#272d52;background-color:#04040f;background-image:repeating-conic-gradient(#04040f 0% 25%,#0000 0% 50%),repeating-conic-gradient(#0a0a23 0% 25%,#0000 0% 50%),repeating-conic-gradient(#101232 0% 25%,#0000 0% 50%),repeating-conic-gradient(#171c42 0% 25%,#0000 0% 50%),repeating-conic-gradient(#1f2752 0% 25%,#0000 0% 50%),linear-gradient(#04040f 0% 22%,#0a0a23 22% 40%,#101232 40% 56%,#171c42 56% 70%,#1f2752 70% 83%,#283360 83% 100%);background-position:0 calc(22% + 3.52px),0 calc(40% + 6.4px),0 calc(56% + 8.96px),0 calc(70% + 11.2px),0 calc(83% + 13.28px),0 0;background-repeat:repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,no-repeat;background-size:16px 16px,16px 16px,16px 16px,16px 16px,16px 16px,100% 100%}.pixel-sparkle{pointer-events:none;background:#fff;width:6px;height:6px;animation:2.4s steps(2,end) infinite sparkle-pop;position:absolute;box-shadow:0 -6px #fff,0 6px #fff,-6px 0 #fff,6px 0 #fff}.pixel-moon{clip-path:polygon(31.25% 0%,68.75% 0%,68.75% 6.25%,81.25% 6.25%,81.25% 12.5%,87.5% 12.5%,87.5% 18.75%,93.75% 18.75%,93.75% 31.25%,100% 31.25%,100% 68.75%,93.75% 68.75%,93.75% 81.25%,87.5% 81.25%,87.5% 87.5%,81.25% 87.5%,81.25% 93.75%,68.75% 93.75%,68.75% 100%,31.25% 100%,31.25% 93.75%,18.75% 93.75%,18.75% 87.5%,12.5% 87.5%,12.5% 81.25%,6.25% 81.25%,6.25% 68.75%,0% 68.75%,0% 31.25%,6.25% 31.25%,6.25% 18.75%,12.5% 18.75%,12.5% 12.5%,18.75% 12.5%,18.75% 6.25%,31.25% 6.25%);pointer-events:none;background:#fff7dd;width:96px;height:96px;position:absolute}.pixel-moon:before{content:"";background:#ecd9a8;width:14px;height:14px;position:absolute;top:30%;left:22%;box-shadow:28px 30px #ecd9a8}.pixel-moon:after{content:"";background:#ecd9a8;width:10px;height:10px;position:absolute;top:22%;right:22%}.pixel-title-3d{--t3d-side:#2c2150;--t3d-side-dark:#191238;--t3d-ink:#0d0a1f;color:#fff;letter-spacing:6px;text-shadow:-3px 0 var(--t3d-ink), 3px 0 var(--t3d-ink), 0 -3px var(--t3d-ink), 0 3px var(--t3d-ink), -2px -2px var(--t3d-ink), 2px -2px var(--t3d-ink), -2px 2px var(--t3d-ink), 2px 2px var(--t3d-ink), 3px 3px var(--t3d-side), 5px 5px var(--t3d-side), 7px 7px var(--t3d-side-dark), 9px 9px var(--t3d-side-dark), 13px 13px 0 #00000059;line-height:1.4}.pixel-title-3d-purple{--t3d-side:#8a5fc9;--t3d-side-dark:#50338c;--t3d-ink:#240f3e}.pixel-title-3d-red{color:#ff5d5d;--t3d-side:#7e1d2c;--t3d-side-dark:#4a0f1a;--t3d-ink:#1c060c}.sky-clouds{z-index:1;pointer-events:none;position:absolute;inset:0}.pixel-cloud{background:var(--cloud,#fff);box-shadow:inset 0 -6px 0 var(--cloud-shade,#bcd9f7);image-rendering:pixelated;position:absolute}.pixel-cloud:before,.pixel-cloud:after{content:"";background:var(--cloud,#fff);position:absolute}.pixel-cloud:before{width:50%;height:100%;top:-60%;left:15%}.pixel-cloud:after{width:35%;height:80%;top:-45%;right:15%}@keyframes cloud-drift{0%{transform:translate(-250px)}to{transform:translate(110vw)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes star-twinkle{0%,to{opacity:var(--star-glow,.8)}50%{opacity:.35}}@keyframes sparkle-pop{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.4)}}.bounce{animation:.6s infinite bounce}.blink{animation:1s step-end infinite blink}@media (prefers-reduced-motion:reduce){.pixel-sparkle,.sky-screen:after,.bounce{animation:none!important}.pixel-cloud{animation-play-state:paused!important}}