:root{--bg-color: #030305;--glass-bg: rgba(10, 15, 30, .4);--glass-border: rgba(255, 255, 255, .1);--text-primary: #f0f4f8;--text-secondary: #9aa8b8;--accent-color: #00d2ff;--accent-glow: rgba(0, 210, 255, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);color:var(--text-primary);overflow:hidden;width:100vw;height:100vh}#app{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#ui-overlay{position:absolute;top:2rem;left:2rem;z-index:10;max-width:380px;display:flex;flex-direction:column;gap:1.5rem;animation:slideInFade 1s cubic-bezier(.2,.8,.2,1) forwards}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;padding:2rem;box-shadow:0 8px 32px #00000080}h1{font-size:2.2rem;font-weight:600;background:linear-gradient(90deg,#fff,#aebbc8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;letter-spacing:-.5px}p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.controls{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}.control-group{display:flex;flex-direction:column;gap:.5rem}label{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}input[type=range]{-webkit-appearance:none;width:100%;background:#ffffff0d;height:6px;border-radius:4px;outline:none;margin:10px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent-color);cursor:pointer;box-shadow:0 0 10px var(--accent-glow);transition:transform .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.glow-btn{background:linear-gradient(135deg,#ffffff1a,#fff0);border:1px solid var(--glass-border);color:var(--text-primary);padding:12px 24px;border-radius:8px;font-family:inherit;font-size:1rem;font-weight:400;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.glow-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:all .5s ease}.glow-btn:hover{background:#ffffff0d;border-color:#ffffff4d;box-shadow:0 0 15px #ffffff1a}.glow-btn:hover:before{left:100%}.stats{margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.stats span{color:var(--accent-color);font-weight:600;font-variant-numeric:tabular-nums}@keyframes slideInFade{0%{opacity:0;transform:translateY(-20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}#commentary-overlay{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);z-index:10;max-width:600px;width:90%;text-align:center;animation:fadeIn 1.5s ease forwards;transition:opacity .5s ease;padding:1.5rem 2rem}#commentary-text{font-size:1.1rem;line-height:1.6;color:var(--text-primary);font-weight:300;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.5);transition:opacity .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:600px){#ui-overlay{bottom:8rem;top:auto;left:1rem;right:1rem;max-width:none}#commentary-overlay{bottom:1rem;padding:1rem}#commentary-text{font-size:.95rem}}