:root {
  --bg: oklch(0.08 0 0);
  --surface: oklch(0.14 0.025 270);
  --surface-raised: oklch(0.19 0.04 270);
  --ink: oklch(0.96 0.01 270);
  --muted: oklch(0.7 0.035 270);
  --primary: oklch(0.72 0.16 270);
  --primary-fill: oklch(0.4 0.15 270);
  --signal: oklch(0.82 0.14 165);
  --danger: oklch(0.7 0.18 25);
  --cube: min(62vmin, 600px);
  --half: calc(var(--cube) / 2);
  --rx: -22deg;
  --ry: 34deg;
  --scale: 1;
  --face-opacity: 1;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

button,
a { font: inherit; }

body.is-dragging { cursor: grabbing; }

.shader-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.companion-gate {
  width: min(390px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 45%);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.companion-gate::backdrop { background: oklch(0.04 0 0 / .82); }
.companion-gate strong { display: block; font-size: 1rem; }
.companion-gate p,
.companion-gate output { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.companion-gate output { display: block; min-height: 2.25em; margin-top: 12px; }
.companion-gate button {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--primary-fill);
  color: white;
  cursor: pointer;
  font-weight: 700;
}
.companion-gate button:focus-visible,
.companion-gate a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.companion-gate nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.companion-gate a { color: var(--primary); font-size: .72rem; }

.hand-cursor {
  --hand-x: 50vw;
  --hand-y: 50vh;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in oklch, var(--primary), white 24%);
  border-radius: 50%;
  background: color-mix(in oklch, var(--surface), transparent 58%);
  transform: translate3d(var(--hand-x), var(--hand-y), 0) translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.hand-cursor::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--primary);
  transition: transform 150ms cubic-bezier(.25, 1, .5, 1), background-color 120ms ease;
}

.hand-cursor[data-state="pinching"] { border-color: var(--signal); }
.hand-cursor[data-state="pinching"]::before { background: var(--signal); transform: scale(1.55); }
.hand-cursor[data-state="grabbed"] { border-color: var(--signal); background: color-mix(in oklch, var(--signal), transparent 82%); }
.hand-cursor[data-state="grabbed"]::before { background: var(--signal); transform: scale(2.25); }
.hand-cursor[data-state="ineligible"] { border-color: var(--danger); }
.hand-cursor[data-state="ineligible"]::before { background: var(--danger); }
.hand-cursor[data-state="ineligible"]::after {
  content: "Open fingers";
  position: absolute;
  top: 36px;
  left: 50%;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 600 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  transform: translateX(-50%);
}
.hand-cursor[data-state="reacquiring"] { border-style: dashed; opacity: .46; }
.hand-cursor[hidden] { display: none; }

.masthead {
  position: fixed;
  z-index: 3;
  inset: 22px 24px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto;
}

.brand__cube {
  width: 31px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--primary), white 16%);
  background: color-mix(in oklch, var(--surface), transparent 10%);
  clip-path: polygon(50% 0, 94% 24%, 94% 72%, 50% 100%, 6% 72%, 6% 24%);
}

.brand__cube::after {
  content: "";
  display: block;
  width: 7px;
  aspect-ratio: 1;
  margin: 12px;
  border-radius: 50%;
  background: var(--signal);
}

.brand strong,
.brand small { display: block; }
.brand strong { font-size: .75rem; letter-spacing: .14em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: .7rem; }

.settings-button,
.settings-panel button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.settings-button {
  padding: 9px 11px;
  pointer-events: auto;
  font-size: .75rem;
  font-weight: 650;
}

.settings-button:hover,
.settings-panel button:hover { background: var(--surface-raised); color: var(--ink); }
.settings-button:focus-visible,
.settings-panel button:focus-visible,
.setting input:focus-visible,
.setting select:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.settings-panel {
  position: fixed;
  inset: 64px 24px auto auto;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 88px);
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 55%);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  pointer-events: auto;
}

.settings-panel::backdrop { background: transparent; }
.settings-panel header { display: flex; align-items: center; justify-content: space-between; }
.settings-panel header strong { font-size: .82rem; }
.settings-panel header button { padding: 7px 8px; font-size: .72rem; }

.setting { display: flex; margin-top: 18px; }
.setting--range { display: grid; gap: 10px; }
.setting--range span { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.setting--range output { color: var(--ink); font-variant-numeric: tabular-nums; }
.setting--range input { width: 100%; accent-color: var(--primary); }
.setting--toggle { align-items: center; justify-content: space-between; gap: 20px; }
.setting--toggle span { display: grid; gap: 4px; }
.setting--toggle strong { font-size: .75rem; }
.setting--toggle small { max-width: 24ch; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.setting--toggle input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--primary); }
.setting--toggle select {
  min-width: 0;
  max-width: 132px;
  padding: 6px 7px;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 62%);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.hand-preview {
  position: relative;
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 62%);
  border-radius: 8px;
  background: var(--bg);
}

.has-hand-control .hand-preview { display: block; }
#hand-video { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.hand-preview figcaption {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border-radius: 4px;
  background: oklch(0.08 0 0 / .78);
  color: var(--ink);
  font: 600 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.panel header i {
  display: inline-block;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--signal);
}

.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 3400px;
  perspective-origin: 50% 49%;
  touch-action: none;
}

.rig {
  position: relative;
  width: var(--cube);
  height: var(--cube);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
  transform-style: preserve-3d;
  transition: filter 180ms cubic-bezier(.25, 1, .5, 1);
}

.rig.is-moving { will-change: transform; }

.panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 38px 1fr;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 35%);
  border-radius: 10px;
  background: oklch(0.14 0.025 270 / var(--face-opacity));
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.panel::after {
  content: attr(data-face);
  position: absolute;
  right: 16px;
  bottom: 12px;
  color: color-mix(in oklch, var(--primary), transparent 82%);
  font: 800 clamp(2.5rem, 8vmin, 5rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}

.panel header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--primary), transparent 68%);
  color: var(--ink);
  font: 650 .68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.panel header span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.panel header strong,
.panel header b,
.panel header i { flex: none; }
.panel header span small { overflow: hidden; color: var(--muted); font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.panel header b { color: var(--muted); font-weight: 700; }
.panel header i { background: var(--muted); }
.panel[data-agent-status="working"] header i { background: var(--primary); }
.panel[data-agent-status="working"] header b { color: var(--primary); }
.panel[data-agent-status="blocked"] header i { background: var(--danger); }
.panel[data-agent-status="blocked"] header b { color: var(--danger); }
.panel[data-agent-status="done"] header i { background: var(--signal); }
.panel[data-agent-status="done"] header b { color: var(--signal); }

.terminal-surface {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: oklch(0.08 0 0 / calc(var(--face-opacity) * .96));
  pointer-events: none;
}

.panel.is-focused {
  border-color: var(--signal);
  outline: 2px solid color-mix(in oklch, var(--signal), transparent 62%);
  outline-offset: 3px;
}
.panel.is-focused .terminal-surface { pointer-events: auto; }
.rig.is-translucent .panel { backface-visibility: visible; }

.panel--front { transform: translateZ(var(--half)); }
.panel--back { transform: rotateY(180deg) translateZ(var(--half)); }
.panel--right { transform: rotateY(90deg) translateZ(var(--half)); }
.panel--left { transform: rotateY(-90deg) translateZ(var(--half)); }
.panel--top { transform: rotateX(90deg) translateZ(var(--half)); }
.panel--bottom { transform: rotateX(-90deg) translateZ(var(--half)); }

.xterm,
.xterm-screen,
.xterm-viewport { height: 100%; }
.xterm { width: 100%; user-select: text; }
.xterm .xterm-viewport { scrollbar-width: thin; }

.dock {
  position: fixed;
  z-index: 4;
  left: 24px;
  top: 50%;
  width: 136px;
  transform: translateY(-50%);
}

.dock nav { display: grid; gap: 5px; }

.port-button {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.port-button::before {
  content: attr(data-index);
  color: color-mix(in oklch, var(--primary), white 12%);
  font: 700 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.port-button span { display: grid; gap: 2px; min-width: 0; }
.port-button strong { color: inherit; font-size: .74rem; font-weight: 650; }
.port-button small { overflow: hidden; color: inherit; font: .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .7; text-overflow: ellipsis; white-space: nowrap; }
.port-button:hover { background: color-mix(in oklch, var(--surface-raised), transparent 18%); color: var(--ink); }
.port-button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.port-button.is-active { background: var(--primary-fill); color: white; }
.port-button.is-active::before { color: white; }

.controls {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  display: flex;
  gap: 20px;
  transform: translateX(-50%);
  color: var(--muted);
  font: .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.controls b { color: var(--ink); font-weight: 650; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  :root { --cube: min(77vmin, 510px); }
  .dock {
    inset: auto 12px 60px;
    width: auto;
    transform: none;
    overflow-x: auto;
  }
  .dock nav { display: flex; justify-content: center; }
  .port-button { grid-template-columns: 12px 1fr; width: auto; min-width: 78px; }
  .port-button small { display: none; }
  .controls { display: none; }
}

@media (max-width: 520px) {
  :root { --cube: min(82vmin, 420px); }
  .masthead { inset: 14px 16px auto; }
  .settings-panel { inset: 56px 16px auto; width: auto; }
  .dock nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .rig,
  .hand-cursor,
  .hand-cursor::before { transition-duration: 1ms !important; }
}