@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}.outdoor-screen{background:#48d;position:relative;overflow:hidden}.outdoor-screen:after{content:"";z-index:1;background:#3a4;height:48px;position:absolute;bottom:0;left:0;right:0}.outdoor-screen>*{z-index:2;position:relative}.sky-clouds{z-index:1;pointer-events:none;position:absolute;inset:0}.pixel-cloud{image-rendering:pixelated;background:#f4f4f4;position:absolute}.pixel-cloud:before,.pixel-cloud:after{content:"";background:#f4f4f4;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}}.bounce{animation:.6s infinite bounce}.blink{animation:1s step-end infinite blink}