.ui{position:absolute;inset:0;z-index:20;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(260px,320px) 1fr;grid-template-areas:"header header" ". panels" ". hint";gap:18px;padding:22px;align-content:start;pointer-events:none;font-feature-settings:"tnum" 1}.ui>*{pointer-events:auto}.ui__header{grid-area:header;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}.ui__brand{display:flex;align-items:center;gap:14px}.ui__mark{width:30px;height:30px;border:1px solid rgba(174,206,255,.45);transform:rotate(45deg);background:linear-gradient(135deg,#78aaff38,#ffffff05);box-shadow:0 0 26px #6094ff47}.ui__header h1{margin:0;font-size:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#eaf1ff}.ui__header p{margin:4px 0 0;font-size:11px;letter-spacing:.06em;color:#7c8aa6}.ui__stats{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.ui__stats span{padding:4px 9px;font-size:10.5px;letter-spacing:.08em;color:#9db0d0;border:1px solid rgba(140,170,220,.16);background:#0a101c8c;backdrop-filter:blur(12px);border-radius:999px}.panels{grid-area:panels;display:grid;gap:12px;align-content:start;justify-self:start;width:min(300px,32vw);max-height:calc(100vh - 190px);overflow-y:auto;padding-right:4px}.panels[hidden]{display:none}.ui button:focus-visible,.ui input:focus-visible{outline:2px solid #cfe0ff;outline-offset:4px}.scene-fallback{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px 24px 180px;text-align:center;color:#bdcce2}.scene-fallback svg{width:min(44vw,300px);min-width:150px;filter:drop-shadow(0 0 40px #6a8acb40)}.scene-fallback p{max-width:38ch;font-size:13px;line-height:1.6}.panel{padding:14px 16px 16px;border:1px solid rgba(140,170,220,.14);border-radius:14px;background:linear-gradient(180deg,#090e19c7,#060a129e);backdrop-filter:blur(18px);box-shadow:0 18px 44px #0000006b}.panel__title{margin:0 0 12px;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#6f7f9c}.control{display:block;margin-top:12px}.control__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}.control__label{font-size:11.5px;letter-spacing:.04em;color:#b9c8e2}.control__value{font-size:11px;color:#7fa8e8;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,#78aaff8c,#78aaff1f)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:#e8f0ff;border:1px solid rgba(120,170,255,.8);box-shadow:0 0 12px #78aaff99}input[type=range]::-moz-range-track{height:2px;background:#78aaff4d}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e8f0ff;border:1px solid rgba(120,170,255,.8)}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.preset{min-height:44px;padding:7px 4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9fb2d2;background:#10182899;border:1px solid rgba(140,170,220,.16);border-radius:8px;cursor:pointer;transition:color .16s ease,border-color .16s ease,background .16s ease}.preset:hover{color:#dce8ff;border-color:#8cbeff66}.preset--on{color:#04070d;background:linear-gradient(180deg,#cfe0ff,#8fb6f5);border-color:transparent;box-shadow:0 6px 18px #6ea0ff52}.toggles{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.toggle{min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;font-size:10.5px;letter-spacing:.06em;color:#8d9db9;background:#0e142299;border:1px solid rgba(140,170,220,.14);border-radius:999px;cursor:pointer;transition:color .16s ease,border-color .16s ease}.toggle__dot{width:6px;height:6px;border-radius:50%;background:#3d4b66}.toggle--on{color:#d8e6ff;border-color:#82b4ff6b}.toggle--on .toggle__dot{background:#86b6ff;box-shadow:0 0 10px #86b6ffe6}.ui__hint{grid-area:hint;justify-self:start;font-size:10.5px;letter-spacing:.08em;color:#5d6b85}@media(max-width:820px){.ui{grid-template-columns:1fr;grid-template-areas:"header" "." "panels";padding:14px;gap:12px}.panels{width:100%;max-width:360px;max-height:46vh}.ui__hint{display:none}.ui__stats{justify-content:flex-start}}