:root{--c-bg: #050505;--c-grid: #1a1a1a;--c-primary: #00f3ff;--c-secondary: #ff0055;--c-text: #e0e0e0;--c-dim: #555555;--c-panel: rgba(10, 10, 10, .9);--f-display: "Syncopate", sans-serif;--f-mono: "Space Mono", monospace}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--c-bg);color:var(--c-text);font-family:var(--f-mono);overflow:hidden;width:100vw;height:100vh}.noise{position:fixed;top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:50}#root{position:relative;z-index:10;height:100%;display:flex;flex-direction:column}.ui-layer{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;z-index:20;padding:2rem;display:flex;flex-direction:column;justify-content:space-between}.header{text-shadow:0 0 30px rgba(0,243,255,.2)}h1{font-family:var(--f-display);font-size:2.5rem;margin:0;letter-spacing:-1px;color:#fff}.subtitle{color:var(--c-primary);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;margin-top:.25rem}.controls-container{pointer-events:auto;width:300px;background:var(--c-panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #333;border-left:3px solid var(--c-primary);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.control-section h3{font-size:.7rem;text-transform:uppercase;color:var(--c-dim);margin:0 0 .75rem;letter-spacing:1px}.button-grid{display:flex;flex-direction:column;gap:4px}button{background:#ffffff05;border:1px solid #333;color:#888;padding:10px 12px;font-family:var(--f-mono);font-size:.75rem;text-align:left;cursor:pointer;transition:all .2s;position:relative}button:hover{border-color:#666;color:#fff;background:#ffffff0d}button.active{border-color:var(--c-primary);color:var(--c-primary);background:#00f3ff1a;font-weight:700}button.active:after{content:"●";position:absolute;right:12px;font-size:.6rem;top:50%;transform:translateY(-50%)}button.active-compare{border-color:var(--c-secondary);color:var(--c-secondary);background:#ff00551a}.stats-panel{position:absolute;top:2rem;right:2rem;text-align:right;pointer-events:none}.big-stat{font-size:3rem;font-weight:700;line-height:1;font-family:var(--f-display);margin-bottom:.5rem}.stat-row{font-size:.8rem;color:#888;margin-bottom:.25rem}.stat-row strong{color:#fff}.canvas-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:#050505;overflow:hidden;cursor:grab}.canvas-wrapper:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.reset-btn{margin-top:1rem;width:100%;text-align:center;border-color:#333;color:#555}.reset-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}.scanline{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 50%,rgba(0,243,255,.02) 51%,transparent 51%);background-size:100% 4px;pointer-events:none;z-index:15}.vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.8) 100%);pointer-events:none;z-index:16}.small-screen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--c-bg);z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}.small-screen-overlay .scanline,.small-screen-overlay .vignette{position:absolute;z-index:1}.small-screen-content{position:relative;z-index:10;text-align:center;padding:2rem;max-width:90%;animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.warning-icon{width:80px;height:80px;margin:0 auto 2rem;color:var(--c-primary);animation:pulse 2s ease-in-out infinite}.warning-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 20px rgba(0,243,255,.5))}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}.interstitial-title{font-family:var(--f-display);font-size:1.5rem;color:#fff;letter-spacing:3px;margin:0 0 1.5rem;text-shadow:0 0 30px rgba(0,243,255,.3)}.interstitial-divider{width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);margin:0 auto 1.5rem}.interstitial-message{font-family:var(--f-mono);font-size:.9rem;color:var(--c-text);line-height:1.6;margin:0 0 1rem}.interstitial-message .highlight{color:var(--c-primary);font-weight:700}.interstitial-submessage{font-family:var(--f-mono);font-size:.75rem;color:var(--c-dim);margin:0 0 2rem}.screen-size-indicator{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#00f3ff0d;border:1px solid rgba(0,243,255,.2);border-left:3px solid var(--c-primary);font-family:var(--f-mono);font-size:.7rem}.current-size{color:var(--c-secondary)}.required-size{color:var(--c-primary)}