html,body{color:#d0e8f0;background-color:#000;width:100%;height:100%;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{position:relative;overflow:hidden}#stage{width:100%;height:100%}#hud{-webkit-backdrop-filter:blur(12px);pointer-events:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#63bbff40 transparent;background:#080c14d9;border:1px solid #63bbff26;border-radius:.6rem;width:260px;max-height:calc(100vh - 1.5rem);padding:0;font-size:.8rem;line-height:1.45;position:absolute;top:.75rem;left:.75rem;overflow-y:auto}#hud::-webkit-scrollbar{width:5px}#hud::-webkit-scrollbar-track{background:0 0}#hud::-webkit-scrollbar-thumb{background:#63bbff40;border-radius:3px}.panel-header-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.btn-icon{min-width:unset;flex-shrink:0;padding:.2rem .4rem;font-size:.85rem;line-height:1}.header-selects{gap:.5rem;margin-top:.2rem;display:flex}.header-selects .select-label{flex:1;min-width:0}#hud.collapsed #controls{display:none}#hud.collapsed .panel-header{border-bottom:none}.panel-section{border-bottom:1px solid #63bbff14;flex-direction:column;gap:.4rem;padding:.6rem .75rem;display:flex}.panel-section:last-child{border-bottom:none}.section-title{text-transform:uppercase;letter-spacing:.08em;color:#63bbff99;margin-bottom:.15rem;font-size:.65rem;font-weight:700}#status{color:#e8fafe;font-weight:600}#fps{color:#8ee7ff;font-size:.75rem}#perf-stats{color:#6db8d0;white-space:pre;font-family:Space Mono,monospace;font-size:.7rem}#walker-status{color:#8ee7ff;font-size:.75rem}#culling-status{color:#6db8d0;font-size:.75rem}#perf-stats:empty,#walker-status:empty,#culling-status:empty{display:none}.btn{color:#c8eeff;font:inherit;cursor:pointer;background:#63bbff1a;border:1px solid #63bbff40;border-radius:.3rem;padding:.35rem .65rem;font-size:.78rem;font-weight:500;transition:background .15s,border-color .15s}.btn:hover{background:#63bbff33;border-color:#63bbff73}.btn:active{background:#63bbff4d}.btn-sm{padding:.25rem .5rem;font-size:.75rem}.btn-muted{color:#8aa0a8;background:#ffffff0a;border-color:#ffffff1f}.btn-muted:hover{color:#b0c8d0;background:#ffffff14;border-color:#fff3}.btn-row{gap:.35rem;display:flex}.btn-row .btn{flex:1}.select-label{flex-direction:column;align-items:flex-start;gap:.2rem;font-weight:500;display:flex}.select-label span{color:#a0c8d8;font-size:.78rem}select{color:#d8f0ff;width:100%;font:inherit;cursor:pointer;appearance:none;text-overflow:ellipsis;background:#141c28cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .4rem center no-repeat;border:1px solid #63bbff33;border-radius:.3rem;outline:none;padding:.3rem 1.4rem .3rem .4rem;font-size:.78rem;transition:border-color .15s;overflow:hidden}select:hover{border-color:#63bbff66}select:focus{border-color:#63bbff80}select option{color:#d8f0ff;background:#0c1018}.check-label{cursor:pointer;color:#a0c8d8;align-items:center;gap:.4rem;font-size:.78rem;font-weight:500;transition:color .15s;display:flex}.check-label:hover{color:#d0eaf5}.check-label input[type=checkbox]{appearance:none;cursor:pointer;background:#141c28cc;border:1px solid #63bbff4d;border-radius:3px;flex-shrink:0;width:14px;height:14px;transition:background .15s,border-color .15s;position:relative}.check-label input[type=checkbox]:hover{border-color:#63bbff80}.check-label input[type=checkbox]:checked{background:#63bbff59;border-color:#63bbff99}.check-label input[type=checkbox]:checked:after{content:"";border:1.5px solid #c8eeff;border-width:0 1.5px 1.5px 0;width:4px;height:7px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}.toggle-grid{flex-direction:column;gap:.35rem;display:flex}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#63bbff1f;border:none;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#63bbff;border-radius:50%;width:12px;height:12px;transition:box-shadow .15s;box-shadow:0 0 4px #63bbff66}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 8px #63bbff99}input[type=range]::-moz-range-thumb{cursor:pointer;background:#63bbff;border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #63bbff66}input[type=range]::-moz-range-track{background:#63bbff1f;border:none;border-radius:2px;height:4px}input[type=number]{color:#d8f0ff;width:5.5rem;font:inherit;background:#141c28cc;border:1px solid #63bbff33;border-radius:.3rem;outline:none;padding:.25rem .4rem;font-size:.78rem;transition:border-color .15s}input[type=number]:hover{border-color:#63bbff59}input[type=number]:focus{border-color:#63bbff80}input[type=number]::placeholder{color:#a0c8d866}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.color-row{align-items:center;gap:.6rem;display:flex}.color-label{cursor:pointer;color:#a0c8d8;align-items:center;gap:.3rem;font-size:.75rem;display:flex}.color-label input[type=color]{appearance:none;cursor:pointer;background:0 0;border:1px solid #63bbff40;border-radius:4px;width:22px;height:22px;padding:1px;transition:border-color .15s}.color-label input[type=color]:hover{border-color:#63bbff80}.color-label input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-label input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.color-label input[type=color]::-moz-color-swatch{border:none;border-radius:2px}.inline-form{flex-direction:column;gap:.25rem;display:flex}.inline-form>label{color:#a0c8d8;font-size:.75rem;font-weight:500}.control-inputs{align-items:center;gap:.3rem;display:flex}.form-status{color:#6db8d0;min-height:0;font-size:.7rem}.form-status:empty{display:none}details.collapsible{border-bottom:1px solid #63bbff14}details.collapsible>summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.35rem;list-style:none;display:flex}details.collapsible>summary::-webkit-details-marker{display:none}details.collapsible>summary:before{content:"▸";color:#63bbff80;font-size:.7rem;transition:transform .15s}details.collapsible[open]>summary:before{transform:rotate(90deg)}.details-body{flex-direction:column;gap:.4rem;padding-top:.3rem;display:flex}.nav-link{color:#63bbffb3;padding:.5rem .75rem;font-size:.78rem;text-decoration:none;transition:color .15s;display:block}.nav-link:hover{color:#63bbff}#context-menu{-webkit-backdrop-filter:blur(12px);pointer-events:none;color:#c8f7ff;opacity:0;background:#080c14eb;border:1px solid #63bbff40;border-radius:.4rem;min-width:9rem;padding:.35rem .5rem;font-size:.8rem;transition:opacity .1s;position:absolute;transform:translate(-50%,.5rem);box-shadow:0 .5rem 1.5rem #00000080}#context-menu.visible{opacity:1;pointer-events:auto}#context-menu-content{flex-direction:column;gap:.25rem;display:flex}#context-menu-content .ctx-title{border-bottom:1px solid #63bbff26;margin-bottom:.1rem;padding-bottom:.15rem;font-weight:600}#context-menu-content button{color:#d0eaf5;width:100%;font:inherit;cursor:pointer;text-align:left;background:#63bbff14;border:1px solid #63bbff26;border-radius:.3rem;padding:.25rem .4rem;font-size:.78rem;transition:background .15s;display:block}#context-menu-content button:hover{background:#63bbff33}#context-menu[hidden]{display:none}#hud h2{color:#63bbff;margin:0;font-size:1rem;font-weight:700}#area-info{border-top:1px solid #63bbff14;max-height:250px;padding-top:.4rem;font-size:.78rem;overflow-y:auto}#area-info .label{color:#6db8d0}#legend{color:#6db8d0;border-top:1px solid #63bbff14;padding:.5rem .75rem;font-size:.75rem}#legend strong{color:#a0c8d8}#legend ul{margin:.25rem 0 0;padding-left:1rem}#legend li{margin:.15rem 0}#demo-preview-container{pointer-events:none;opacity:0;z-index:50;background:#0006;border:1px solid #63bbff40;border-radius:4px;transition:opacity .3s;position:absolute;top:.75rem;right:.75rem;overflow:hidden;box-shadow:0 2px 12px #0006}#demo-preview-bg{width:100%;height:100%;position:absolute}#demo-preview-pan{border:1px solid #63bbffb3;border-radius:2px;position:absolute}
