*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#020611;color:#eef4ff;font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
#viewer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 285px;height:100%;transition:grid-template-columns .2s ease}
#viewer.controls-hidden{grid-template-columns:minmax(0,1fr) 0}
#viewer.is-loading{display:block}
#stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#020611}
#viewer.is-loading #stage{height:100%}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}
#viewer.is-loading canvas,#viewer.is-loading #labels,#viewer.is-loading #controls-toggle,#viewer.is-loading #controls{visibility:hidden;pointer-events:none}
#controls{overflow:auto;padding:16px;background:rgba(8,14,26,.97);border-left:1px solid rgba(255,255,255,.09);transition:opacity .16s ease}
#viewer.controls-hidden #controls{visibility:hidden;opacity:0;padding-inline:0;border:0;pointer-events:none}
section{margin:0 0 18px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.045)}
strong{display:block;margin-bottom:10px;font-size:16px}
.buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.focus-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
.layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
.layer-buttons button:last-child{grid-column:1/-1}
.buttons button,#play,#controls-toggle{min-height:42px;border:0;border-radius:8px;background:#2c7df0;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.buttons button{margin:0;padding:8px 6px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18)}
.buttons button:hover,.buttons button:focus-visible,#play:hover,#play:focus-visible,#controls-toggle:hover,#controls-toggle:focus-visible{filter:brightness(1.1)}
.buttons button[aria-pressed=true]{background:#2c7df0;border-color:#2c7df0}
#play{width:100%;padding:9px 12px}
#play:disabled{cursor:wait;opacity:.72}
#controls-toggle{position:absolute;z-index:5;top:12px;right:12px;display:flex;align-items:center;gap:7px;width:auto;padding:8px 11px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
#controls-toggle span[aria-hidden=true]{font-size:18px}
#fullscreen{position:absolute;z-index:6;left:14px;bottom:14px;width:48px;min-height:48px;margin:0;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:rgba(8,14,26,.9);color:#fff;font-size:27px;line-height:1;box-shadow:0 8px 22px rgba(0,0,0,.3);cursor:pointer}
#fullscreen:hover,#fullscreen:focus-visible{filter:brightness(1.15)}
.toggles{display:grid;gap:10px}
.toggles label{display:flex;align-items:center;gap:9px;min-height:34px;font-weight:700;cursor:pointer}
.toggles input{width:18px;height:18px;accent-color:#2c7df0}
small,p{color:#b8c3d9;line-height:1.45}
small{display:block;margin-top:7px}
#labels{position:absolute;inset:0;pointer-events:none}
.label{position:absolute;transform:translate(-50%,-115%);padding:3px 7px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(5,9,17,.68);font-size:12px;font-weight:700;white-space:nowrap;text-shadow:0 1px 3px #000}
.label.rover{color:#d7e3ff}
#status,#fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:440px;padding:12px 16px;border-radius:8px;background:rgba(5,10,20,.88);text-align:center}
#fallback{color:#fff3cd;background:#7c2d12}
.model-error{color:#fecaca}
@media(max-width:760px){
  #viewer{grid-template-columns:1fr;grid-template-rows:minmax(330px,1fr) auto}
  #viewer.controls-hidden{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 0}
  #controls{border-left:0;border-top:1px solid rgba(255,255,255,.09);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;max-height:45vh}
  #viewer.controls-hidden #controls{padding-block:0}
  #controls section{margin:0}
  #controls>p,#data-state{grid-column:1/-1;margin:2px}
  .buttons button{font-size:.85rem;padding:5px}
  .toggles{align-content:start}
}
@media(max-width:480px){
  #controls{grid-template-columns:1fr}
  .buttons{grid-template-columns:repeat(3,1fr)}
  .focus-buttons{grid-template-columns:repeat(2,1fr)}
  .layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
  #controls>p,#data-state{grid-column:1}
  #controls-toggle .toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}