:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #02050a; color: #a9bbc9; }
body { overflow: hidden; }
#app { position: relative; width: 100vw; height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #09131e, #02050a 68%); }
#canvas-mount canvas { display: block; max-width: 100vw; max-height: 100vh; width: auto !important; height: auto !important; box-shadow: 0 0 80px #000; }
#controls { position: fixed; top: 16px; right: 16px; width: min(300px, calc(100vw - 32px)); padding: 16px; border: 1px solid #7796a62e; background: #071019e8; backdrop-filter: blur(12px); box-shadow: 0 12px 50px #0008; font-size: 11px; transition: opacity .2s, transform .2s; }
#controls.hidden { opacity: 0; transform: translateX(110%); pointer-events: none; }
header { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; color: #69808e; letter-spacing: .18em; }
header strong { color: #c3d7df; font-size: 15px; font-weight: 500; }
label { display: grid; grid-template-columns: 1fr 114px; align-items: center; gap: 10px; margin: 8px 0; }
label span { color: #d4e3e8; text-align: right; }
input[type="range"] { width: 100%; accent-color: #6fa4b3; }
input[type="number"], select { width: 100%; min-width: 0; padding: 5px; border: 1px solid #68808e55; background: #050b11; color: #c8d9df; font: inherit; }
button { border: 1px solid #65829255; background: #0b1821; color: #b9cbd3; padding: 7px 9px; font: inherit; cursor: pointer; }
button:hover { border-color: #89bdcb99; background: #10232e; }
#panel-toggle { position: fixed; z-index: 2; right: 16px; bottom: 16px; }
.buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
details { margin-top: 12px; padding-top: 8px; border-top: 1px solid #7796a622; }
details label { display: flex; }
summary { cursor: pointer; color: #8299a4; }
output { display: block; margin-top: 12px; color: #658291; }
.shortcuts { margin: 12px 0 0; color: #627783; font-size: 10px; line-height: 1.5; }
@media (max-width: 700px) { #controls { max-height: calc(100vh - 72px); overflow: auto; } }