html, body { margin:0; height:100%; overflow:hidden; }
/* Canvas stays under the dock so Tap / Pause / Reset can be clicked. */
canvas { position:fixed; inset:0; z-index:0; display:block; }

:root {
  --look-dock: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  --top-bar: 3.25rem;
  --cube-size: 128px;
  --cube-right: 0.25rem;
  --cube-gap: 0.5rem;
}

/* Cube and + share the right edge, tucked further right. + sits above the
   cube; actions stack up. inset:auto clears the full-screen canvas rule
   (top/left:0) or the cube sits under Numbers. */
#view-cube { position:fixed; inset:auto; right:var(--cube-right);
             bottom:calc(var(--look-dock) + 0.5rem);
             width:var(--cube-size); height:var(--cube-size);
             z-index:3; display:block; pointer-events:auto; }
#view-fab.fab { right:var(--cube-right); inset-inline-end:var(--cube-right);
                width:var(--cube-size); align-items:center;
                bottom:calc(var(--look-dock) + 0.5rem + var(--cube-size) + 0.5rem); }

#look { pointer-events:none; }
#look .dock, #keys, #keys-btn, #tune-body, #layer-list, #figure-body, .dock-fan, #touch-pad { pointer-events:auto; }
/* Daisy dock stays position:fixed full width. Daisy sizes the slots.
   Right pad holds meters so they are not a sixth act, and the cube sits above. */
#look .dock { z-index:2;
              padding-inline:calc(var(--cube-right) + var(--cube-size) + var(--cube-gap));
              justify-content:center; }
#look .dock > button { flex:0 1 7.5rem; }

/* Dock fan-outs: the view-FAB look (a column of pills, first child nearest
   the slot) as a popover anchored over its parent slot. One open at a time. */
.dock-fan[popover] { display:flex; flex-direction:column-reverse; align-items:center; gap:0.5rem;
                     margin:0 0 0.5rem; padding:0; border:0; background:none; overflow:visible; }
.dock-fan[popover]:not(:popover-open) { display:none; }
.dock-fan .btn { justify-content:flex-start; gap:0.5rem; min-width:7rem; }
/* Lit pill: the dock's own class, or `btn-active` from viewport (Camera ▸ Iso / First). */
.dock-fan .btn.dock-active, .dock-fan .btn.btn-active { --btn-color:var(--color-info); --btn-fg:var(--color-info-content); }
.dock-fan .dock-label { font-size:0.8125rem; }
/* A fan opened sideways from a pill (Player ▸ Camera) sits left of it, bottoms aligned. */
.dock-fan.dropdown-left[popover] { margin:0 0.5rem 0 0; }
@supports not (position-area: bottom) {
  .dock-fan[popover] { inset:auto auto var(--look-dock) 50%; transform:translate(-50%, 0); }
  .dock-fan.dropdown-left[popover] { inset:auto auto calc(var(--look-dock) + 6.5rem) 50%; transform:translate(-120%, 0); }
}

/* Daisy collapse titles are FAQ-tall (1rem pad + 3rem arrow gutter). Caption
   collapses share this override so Keys and Numbers are not a second HUD. */
.collapse > .collapse-title {
  min-height:0;
  padding:0.5rem 2rem 0.5rem 0.75rem;
}
.collapse > .collapse-content {
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding-inline:0.75rem;
  padding-bottom:0.75rem;
}
details.collapse::details-content {
  width:100%;
  min-width:0;
}

/* Top bar: one Daisy navbar, same neutral as the dock. Its menu is Daisy
   menu-horizontal with details submenus (Scene | Numbers | Settings | ⌨);
   panels that are not lists mirror Daisy's submenu box. Version at the end. */
#topbar { position:fixed; top:0; left:0; right:0; z-index:2; min-height:var(--top-bar);
          padding-block:0.25rem; }
#menubar > li > details > summary { white-space:nowrap; }
#menubar > li > details > .menu-panel {
  position:absolute; margin-top:1rem; padding:0.75rem; z-index:3;
  background-color:var(--color-base-100); border-radius:var(--radius-box);
  box-shadow:0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1);
  width:max-content; max-width:min(26rem, calc(100vw - 20px)); cursor:auto;
}
#menubar > li > details > .menu-panel:hover { background-color:var(--color-base-100); }
#scene-list { width:14rem; }
#measure .menu-panel { min-width:16rem; }
#measure dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:1px 10px; }
#measure .menu-panel > dl + details { margin-top:0.5rem; }
#s-ver { margin:0; font-variant-numeric:tabular-nums; padding-inline:0.75rem; }
#s-mark { margin-right:0.6em; color:inherit; text-decoration:none; }
#s-mark:hover { text-decoration:underline; }
#measure dt { opacity:.7; }
#measure dd { margin:0; text-align:right; }

/* Keys: a square ⌨ just above the dock, bottom-left; the panel pops up and
   right from it and scrolls if the room between dock and top bar is short. */
/* Interact prompt — a caption, never a control: quiet, centred over the dock,
   and it must not take the pointer or shift anything (interact-prompt.md). */
#interact-hint { position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--look-dock) + 0.6rem); z-index:2; margin:0;
  pointer-events:none; opacity:.72; font-size:0.8125rem; white-space:nowrap; }
#interact-hint[hidden] { display:none; }

#keys-btn { position:fixed; left:10px; bottom:calc(var(--look-dock) + 0.35rem); z-index:2; }
#keys { width:max-content; max-width:min(26rem, calc(100vw - 20px)); margin:0 0 0.35rem;
        max-height:calc(100vh - var(--look-dock) - var(--top-bar) - 4rem); overflow:auto; }
#keys:not(:popover-open) { display:none; }
@supports not (position-area: bottom) {
  #keys[popover] { inset:auto auto calc(var(--look-dock) + 3.5rem) 10px; }
}
#keys p { margin:0; }
#keys p + p { margin-top:0.5rem; }
#keys b { opacity:.7; font-weight:600; margin-right:0.25rem; }

#layer-list { overflow: visible; }
@supports not (position-area: bottom) {
  #layer-list[popover] {
    margin: 0;
    inset: auto auto var(--look-dock) 50%;
    transform: translate(-55%, 0);
  }
  #tune-body[popover] {
    margin: 0;
    inset: auto 0.75rem var(--look-dock) auto;
  }
  #figure-body[popover] {
    margin: 0;
    inset: auto auto calc(var(--look-dock) + 3.5rem) 50%;
    transform: translate(-105%, 0);
  }
}

/* Utilities (`flex`) outrank Daisy's closed-popover display:none, leaving an
   invisible box that eats clicks; so the flex layout is set only while open. */
#tune-body { width:18rem; max-height:36vh; overflow:auto; margin:0 0.5rem 0 0; }
#tune-body:popover-open { display:flex; flex-direction:column; gap:0.5rem; }
#layer-list { margin:0 0.5rem 0 0; }
/* Settings reads as a table: label | toggle, small group headings. */
#settings-body { min-width:14rem; display:grid;
                 grid-template-columns:1fr auto; gap:0.35rem 1rem; align-items:center; }
#settings-body .group { grid-column:1 / -1; font-size:0.6875rem; opacity:.7; text-transform:uppercase;
                        letter-spacing:.04em; margin-top:0.35rem; }
#settings-body .group:first-child { margin-top:0; }
#settings-body label { cursor:pointer; }
#settings-body { max-height:calc(100vh - var(--top-bar) - var(--look-dock) - 2rem); overflow-y:auto; }
#settings-body .open { justify-self:end; }

.controls-dl { display:grid; grid-template-columns:1fr auto; gap:0.35rem 1rem; align-items:center; margin:0; }
.controls-dl dt { opacity:.85; }
.controls-dl dd { margin:0; text-align:right; }
/* Figure (Player ▸ Figure): the builder as a panel left of its pill — the same
   label | control grid; scrolls inside if the room between bar and dock is
   short. Grid only while open (a utility class would outrank display:none). */
#figure-body { min-width:16rem; margin:0 0.5rem 0 0;
               max-height:calc(100vh - var(--top-bar) - var(--look-dock) - 6rem); overflow-y:auto; }
#figure-body:popover-open { display:grid; grid-template-columns:1fr auto; gap:0.35rem 1rem; align-items:center; }
#figure-body label { cursor:pointer; }
#figure-body .sub { grid-column:1 / -1; font-size:0.6875rem; opacity:.55; text-transform:uppercase;
                    letter-spacing:.04em; margin-top:0.25rem; }
#figure-body .slide { display:flex; align-items:center; gap:0.5rem; }
#figure-body .slide .range { width:7rem; }
#figure-body .slide .val { min-width:2.4rem; text-align:right; font-variant-numeric:tabular-nums; }
#figure-body > .btn { grid-column:1 / -1; justify-self:start; margin-top:0.25rem; }

#tune-body .row { display:grid; grid-template-columns:1fr auto; gap:0 8px;
                  align-items:center; margin-top:.35rem; }
#tune-body .row label { grid-column:1 / -1; }
#tune-body .val { font-variant-numeric:tabular-nums; }

#status { position:fixed; right:0.75rem; bottom:0; z-index:2;
          height:var(--look-dock); padding-bottom:env(safe-area-inset-bottom, 0px);
          display:flex; flex-direction:column; justify-content:center; gap:2px;
          pointer-events:none; }
#status label { display:flex; align-items:center; gap:6px; font-size:12px; }
#status progress { width:56px; height:0.5rem; }
#status progress.overflow::-webkit-progress-value,
#status progress.overflow::-moz-progress-bar {
  background-image: repeating-linear-gradient(-45deg, currentColor 0 5px, transparent 5px 10px);
  background-size: 14px 14px;
  animation: meter-overflow 0.55s linear infinite;
}
@keyframes meter-overflow { to { background-position: 14px 0; } }
@media (prefers-reduced-motion: reduce) {
  #status progress.overflow::-webkit-progress-value,
  #status progress.overflow::-moz-progress-bar { animation: none; }
}

#err { position:fixed; top:calc(var(--top-bar) + 10px); left:10px; right:10px; z-index:4; max-height:34%;
       overflow:auto; white-space:pre-wrap; }
#boot { position:fixed; inset:var(--top-bar) 0 var(--look-dock) 0; z-index:1; pointer-events:none; }
#boot progress { width:16rem; }
#boot.hidden, #err.hidden { display:none; }

/* Phone / tablet walk: two sticks and A B X Y L R above the dock. Quiet. */
.touch-pad { position:fixed; inset:0; z-index:2; pointer-events:none; }
.touch-stick, .touch-faces { pointer-events:auto; touch-action:none; }
.touch-stick { position:absolute; width:7.5rem; height:7.5rem; border-radius:999px;
               background:color-mix(in oklab, var(--color-neutral) 55%, transparent);
               bottom:calc(var(--look-dock) + 0.75rem); }
.touch-move { left:max(0.75rem, env(safe-area-inset-left, 0px));
              bottom:calc(var(--look-dock) + 3.25rem); }
.touch-look { right:calc(var(--cube-size) + 1.25rem); }
.touch-knob { position:absolute; left:50%; top:50%; width:2.5rem; height:2.5rem; margin:-1.25rem;
              border-radius:999px; background:var(--color-neutral-content); opacity:.45; }
.touch-faces { position:absolute; right:calc(var(--cube-size) + 1.25rem);
               bottom:calc(var(--look-dock) + 8.5rem); display:grid;
               grid-template-columns:repeat(3, 2.75rem); gap:0.4rem; justify-items:center; }
.touch-face { width:2.75rem; height:2.75rem; min-height:2.75rem; }

/* No text selection or macOS force-click Look Up on the picture and its chrome. */
body, canvas, #look, #topbar, .dock-fan { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select { -webkit-user-select:auto; user-select:auto; }