:root{--bg-dark:#0a0b10;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--neon-green:#2ecc71;--neon-yellow:#f1c40f;--neon-orange:#e67e22;--neon-cyan:#0ff;--text-main:#ecf0f1;--text-muted:#7f8c8d}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}html,body{height:100%;margin:0;overflow:hidden}body{background-color:var(--bg-dark);color:var(--text-main);grid-template-rows:8vh 1fr;grid-template-columns:25vw 1fr;display:grid}header{background:var(--glass-bg);border-bottom:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);grid-column:1/-1;justify-content:center;align-items:center;gap:3vw;font-family:Courier New,Courier,monospace;font-size:2.2vh;display:flex}.hud-item span{color:var(--neon-cyan);font-weight:700}aside{background:var(--glass-bg);border-right:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;gap:2vh;padding:2vh 1.5vw;display:flex;overflow-y:auto}.control-group{margin-bottom:1vh}.control-group h3{color:var(--neon-yellow);cursor:pointer;border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;margin-bottom:1.5vh;padding-bottom:1vh;font-size:2.2vh;display:flex}.accordion-content{flex-direction:column;display:none}.accordion-content.active{display:flex}.slider-container{margin-bottom:2vh;position:relative}.slider-header{justify-content:space-between;margin-bottom:1vh;font-size:1.8vh;display:flex}input[type=range]{-webkit-appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:linear-gradient(to right, var(--track-color,var(--neon-cyan)) var(--val,0%), #333 var(--val,0%));border-radius:.4vh;width:100%;height:.8vh}input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;background:#fff;border-radius:50%;width:1.6vh;height:1.6vh;margin-top:-.4vh;box-shadow:0 0 5px #00000080}.slider-actions{justify-content:flex-end;gap:.5vw;margin-top:.5vh;display:flex}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.8vh;transition:color .2s}.icon-btn:hover{color:var(--neon-yellow)}.help-text{color:var(--text-muted);border-left:2px solid var(--neon-yellow);background:#00000080;border-radius:.4vh;margin-top:1vh;padding:1.5vh;font-size:1.8vh;line-height:1.4;display:none}.help-text.show{display:block}select{font-size:1.8vh}main{grid-template-rows:repeat(4,minmax(0,1fr));gap:2vh;height:100%;min-height:0;padding:2vh;display:grid;overflow:hidden}.canvas-wrapper{border:1px solid var(--glass-border);background:#000;border-radius:.8vh;min-height:0;position:relative;overflow:hidden}canvas{width:100%;height:100%;display:block}.canvas-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1vw;z-index:10;align-items:center;gap:1vw;font-size:1.5vh;display:flex;position:absolute;top:1vh;left:1vw}.canvas-label select{color:var(--neon-cyan);border:1px solid var(--glass-border);background:#111;padding:.2vh .5vw;font-size:1.5vh}
