:root{--bg: #080808;--fg: #e0e0e0;--accent: #888;--font: "Courier New", Courier, monospace}body,html{margin:0;padding:0;width:100%;height:100%;background-color:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden}#canvas{display:block;width:100%;height:100%}#hud{position:absolute;top:20px;left:20px;width:280px;padding:15px;background:#0a0a0a99;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);border-radius:4px;pointer-events:none;-webkit-user-select:none;user-select:none}.hud-row{display:flex;align-items:center;margin-bottom:12px;font-size:11px;letter-spacing:.5px;pointer-events:auto}.label{width:70px;color:var(--accent);font-weight:600;letter-spacing:1px;text-transform:uppercase}.options{display:flex;gap:12px}.opt{cursor:pointer;opacity:.4;transition:all .2s ease;position:relative}.opt:hover{opacity:.8}.opt.active{opacity:1;font-weight:700;color:#fff}.opt.active:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:#fff}.slider-row input{flex:1;height:2px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#fff3;outline:none;cursor:pointer;transition:background .2s}.slider-row input:hover{background:#fff6}.slider-row input::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;background:var(--fg);border-radius:0;transform:rotate(45deg);cursor:pointer;transition:transform .1s}.slider-row input:active::-webkit-slider-thumb{transform:rotate(45deg) scale(1.2)}.info{margin-top:20px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;color:#666;display:flex;justify-content:space-between}