*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{font-family:system-ui,sans-serif;overflow:hidden;background:#0a1628}canvas{display:block}#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#controls{position:absolute;bottom:20px;left:20px;background:#0a1628d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(100,180,255,.2);border-radius:12px;padding:16px 20px;pointer-events:auto;color:#c8ddf0;min-width:240px;max-width:320px}#controls h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#64c8ffcc}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.control-row label{font-size:12px;color:#8ab4d8;flex-shrink:0;width:80px}.control-row input[type=range]{flex:1;margin:0 8px;accent-color:#4aa8e0;height:4px}.control-row .value{font-size:11px;color:#6a9ec0;width:32px;text-align:right}#btn-pause{width:100%;padding:8px 12px;margin-top:4px;background:#4aa8e033;border:1px solid rgba(74,168,224,.4);border-radius:6px;color:#a0d8f0;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:background .2s}#btn-pause:hover{background:#4aa8e059}#label-identity{position:absolute;top:16px;right:16px;background:#0a1628b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(100,180,255,.15);border-radius:8px;padding:6px 12px;pointer-events:auto;color:#a0d2f0b3;font-size:11px;letter-spacing:.5px}#fps-counter{position:absolute;top:16px;left:16px;color:#a0d2f080;font-size:11px;font-family:monospace;pointer-events:none}@media(max-width:600px){#controls{bottom:12px;left:12px;right:12px;min-width:unset;max-width:unset;padding:12px 14px}#label-identity{top:10px;right:10px;font-size:10px}}