*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#102934;color:#edf7f8}button,input{font:inherit}.app-shell{position:relative;width:100vw;height:100vh}.hud{position:absolute;top:12px;left:12px;display:grid;grid-template-columns:1fr;gap:6px;width:min(205px,calc(100vw - 24px));max-height:calc(100vh - 24px);pointer-events:none}.metric{display:grid;grid-template-columns:22px minmax(54px,1fr) auto;align-items:center;min-height:34px;gap:7px;padding:7px 9px;border:1px solid rgba(189,231,238,.22);border-radius:6px;background:#081a22b8;box-shadow:0 10px 34px #00000038;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.metric-icon{display:flex;color:#9be8f6}.metric-label{min-width:0;color:#a8c8cf;font-size:11px;text-transform:uppercase}.metric strong{min-width:0;color:#fff;font-size:12px;text-align:right;overflow-wrap:anywhere;text-transform:capitalize}.controls{position:absolute;top:12px;right:12px;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:12px;border:1px solid rgba(189,231,238,.22);border-radius:8px;background:#081a22c2;box-shadow:0 18px 44px #0000004d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.control-header{display:grid;grid-template-columns:24px 1fr 34px;align-items:center;gap:8px;margin-bottom:12px;color:#fff;font-weight:700}.icon-button{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(189,231,238,.22);border-radius:6px;color:#edf7f8;background:#ffffff14;cursor:pointer}.icon-button:hover{background:#ffffff29}.control-group{padding:9px 0;border-top:1px solid rgba(189,231,238,.14)}.control-group-title{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:#9be8f6;font-size:12px;font-weight:700;text-transform:uppercase}.slider-row{display:grid;grid-template-columns:52px 1fr 54px;align-items:center;gap:9px;min-height:30px;color:#d4e7ea;font-size:12px}.slider-row input{width:100%;accent-color:#49c7d9}.slider-row strong{text-align:right;color:#fff;font-size:12px}.toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0 0;border-top:1px solid rgba(189,231,238,.14)}.toggle-row label{display:flex;align-items:center;gap:7px;color:#d4e7ea;font-size:12px}.keys{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}.keys span{padding:5px 7px;border-radius:5px;background:#ffffff12;color:#b9d4d9;font-size:11px;text-align:center}canvas{display:block}@media(max-width:760px){.hud{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{inset:auto 10px 10px;width:auto;max-height:44vh}.metric{grid-template-columns:20px 42px 1fr;padding:6px 7px}}