:root{--bg-color: #1a1a1a;--text-color: #ffffff;--accent-color: #4a9eff;--panel-bg: #222}body,html{margin:0;padding:0;width:100%;height:100%;background-color:var(--bg-color);overflow:hidden;touch-action:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text-color)}#app{display:flex;flex-direction:column;height:100%;width:100%}#sim-container{flex:1;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;background:#000}canvas{display:block;image-rendering:pixelated;box-shadow:0 0 20px #00000080}.instructions-overlay{position:absolute;top:20px;background:#0009;padding:8px 16px;border-radius:20px;font-size:14px;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);color:#eee}#ui-panel{position:absolute;bottom:0;left:0;width:100%;height:35%;max-height:300px;background:#222222f2;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;z-index:100;transition:transform .3s ease-in-out}#ui-panel.hidden{transform:translateY(100%)}.menu-toggle{position:absolute;top:20px;right:20px;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:20px;cursor:pointer;z-index:50;font-weight:700;text-transform:uppercase;font-size:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s}.menu-toggle:hover{background:var(--accent-color);color:#111}.tab-bar{display:flex;overflow-x:auto;background:#0000004d;padding:0 5px;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.tab-btn{background:none;border:none;color:#888;padding:15px 20px;font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:color .2s;border-bottom:3px solid transparent}.tab-btn.active{color:var(--accent-color);border-bottom:3px solid var(--accent-color)}.tab-content{flex:1;padding:20px;overflow-y:auto}.tab-pane{display:none;height:100%}.tab-pane.active{display:block}.control-row{display:flex;justify-content:center;gap:40px;align-items:center;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;align-items:center;gap:10px}.control-group label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#ccc;font-weight:700}.tool-select{width:100%;margin-bottom:5px}.tool-buttons{display:flex;gap:5px;background:#ffffff0d;padding:4px;border-radius:6px;flex-wrap:wrap;justify-content:center}.tool-btn{background:none;border:none;color:#888;padding:8px 12px;font-size:11px;text-transform:uppercase;font-weight:700;cursor:pointer;border-radius:4px;transition:all .2s}.tool-btn:hover{color:#fff;background:#ffffff1a}.tool-btn.active{background:var(--accent-color);color:#111;box-shadow:0 2px 4px #0003}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:200px;height:6px;background:#ffffff1a;border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0000004d;border:2px solid white}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0000004d;border:2px solid white}@media(max-width:600px){input[type=range]{width:140px}.control-row{gap:20px}}