/* GENERATED by cloud/studio/tools/build_viewer_css.py from code/lab/static/app.css: do not edit.
   The lab's styles scoped under .v3d-host for the lab's WebGL viewer inside the Studio. */
.v3d-host {--stage-dark: #3e3e3e;
  --stage: #5e5e5e;
  --rail: 23rem;          
  --chrome: 11.2rem;      
  --stage-light: #8b8b8b;

  
  --on-stage-fg: #f2f2f2;
  --on-stage-dim: #c8c8c8;
  --on-stage-scrim: #1a1a1a;

  
  --bg: #f2f1ee;
  --panel: #fbfaf8;
  --panel-2: #ebe9e4;
  --well: #e4e2dc;
  --line: #cdc9c1;
  --line-2: #8e8a80;
  --shadow: 0 1px 2px rgb(40 34 26 / 7%), 0 8px 24px -14px rgb(40 34 26 / 22%);

  
  --fg: #1c1a17;
  --fg-dim: #4f4b45;
  
  --fg-label: #615c54;
  --fg-mute: #68635a;

  
  --accent: #2a6570;
  --accent-hi: #1f4e57;
  --accent-fg: #ffffff;
  --accent-soft: #dbe7e9;

  
  --good: #2f6042;
  --good-soft: #dde9e0;
  --warn: #8a5a12;
  --warn-soft: #f2e7d2;
  --bad: #95331f;
  --bad-soft: #f4dfd9;

  
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
  --fs-xs: 0.68rem;
  --fs-sm: 0.78rem;
  --fs-md: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.16rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --lh-tight: 1.2;
  --lh: 1.55;

  
  --r1: 2px;
  --r2: 4px;
  --pad: 0.85rem;
  --gap: 0.85rem;
  --shell: 82rem;

  color-scheme: light;}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .v3d-host {--bg: #171717;
    --panel: #1e1e1e;
    --panel-2: #272726;
    --well: #101010;
    --line: #3a3a38;
    --line-2: #6f6d6a;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 26px -14px rgb(0 0 0 / 70%);

    --fg: #eae8e4;
    --fg-dim: #a5a29c;
    --fg-label: #93908a;
    --fg-mute: #918e89;

    --accent: #74b6c0;
    --accent-hi: #95d1da;
    --accent-fg: #0d1113;
    --accent-soft: #1d2e31;

    --good: #6fae86;
    --good-soft: #1b2a20;
    --warn: #d3a05a;
    --warn-soft: #2e2415;
    --bad: #d8836e;
    --bad-soft: #301c17;

    color-scheme: dark;}
}
:root[data-theme="dark"] .v3d-host {--bg: #171717;
  --panel: #1e1e1e;
  --panel-2: #272726;
  --well: #101010;
  --line: #3a3a38;
  --line-2: #6f6d6a;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 26px -14px rgb(0 0 0 / 70%);

  --fg: #eae8e4;
  --fg-dim: #a5a29c;
  --fg-label: #93908a;
  --fg-mute: #918e89;

  --accent: #74b6c0;
  --accent-hi: #95d1da;
  --accent-fg: #0d1113;
  --accent-soft: #1d2e31;

  --good: #6fae86;
  --good-soft: #1b2a20;
  --warn: #d3a05a;
  --warn-soft: #2e2415;
  --bad: #d8836e;
  --bad-soft: #301c17;

  color-scheme: dark;}
.v3d-host * {box-sizing: border-box;}
.v3d-host [hidden] {display: none !important;}
.v3d-host {-webkit-text-size-adjust: 100%;}
.v3d-host {margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;}
.v3d-host img, .v3d-host canvas, .v3d-host svg {max-width: 100%;}
.v3d-host img {height: auto; display: block;}
.v3d-host a {color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px;}
.v3d-host a:hover {color: var(--accent-hi);}
.v3d-host :focus-visible {outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);}
.v3d-host :focus:not(:focus-visible) {outline: none;}
.v3d-host ::selection {background: var(--accent-soft); color: var(--fg);}
.v3d-host .shell {max-width: var(--shell); margin: 0 auto; padding: 0 1.1rem;}
.v3d-host .topbar {position: sticky;
  top: 0;
  z-index: 40;
  background: var(--panel);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);}
.v3d-host .topbar-in {max-width: var(--shell);
  margin: 0 auto;
  padding: 0.6rem 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;}
.v3d-host .brand {display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-right: auto;
  text-decoration: none;
  color: inherit;}
.v3d-host .brand b {font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;}
.v3d-host .brand small {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);}
.v3d-host .counts {display: flex; gap: 0.9rem; flex-wrap: wrap;}
.v3d-host .count {font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-label);
  letter-spacing: 0.06em;
  white-space: nowrap;}
.v3d-host .count b {color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;}
.v3d-host main {display: block; padding: 1.4rem 0 5rem;}
.v3d-host .stack {display: flex; flex-direction: column; gap: var(--gap);}
.v3d-host .stack.tight {gap: 0.4rem;}
.v3d-host .stack.loose {gap: 1.6rem;}
.v3d-host .row {display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center;}
.v3d-host .row.tight {gap: 0.4rem;}
.v3d-host .spread {display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: baseline;
  justify-content: space-between;}
.v3d-host .grid2, .v3d-host .grid3 {display: grid; gap: var(--gap);}
.v3d-host .grid2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.v3d-host .grid3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 720px) {
.v3d-host .grid2, .v3d-host .grid3 {grid-template-columns: minmax(0, 1fr);}
}
.v3d-host .sidebar {display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.1rem; align-items: start;}
@media (max-width: 900px) {
.v3d-host .sidebar {grid-template-columns: minmax(0, 1fr);}
}
.v3d-host .sep {height: 1px; background: var(--line); border: 0; margin: 0;}
.v3d-host .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;}
.v3d-host .panel {background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  min-width: 0;}
.v3d-host .panel-h {display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.6rem var(--pad);
  border-bottom: 1px solid var(--line);}
.v3d-host .panel-h h2, .v3d-host .panel-h h3 {margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);}
.v3d-host .panel-h .right {margin-left: auto; display: flex; gap: 0.4rem; align-items: center;}
.v3d-host .panel-b {padding: var(--pad); min-width: 0;}
.v3d-host .panel-b > * + * {margin-top: var(--gap);}
.v3d-host .well {background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r1);}
.v3d-host .figure {margin: 0;}
.v3d-host .figure > .figure-media {position: relative;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  overflow: hidden;
  display: grid;
  place-items: center;}
.v3d-host .figure img, .v3d-host .figure canvas {display: block; width: 100%; height: auto;}
.v3d-host .figure figcaption {margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-label);}
.v3d-host .viewport {position: relative;
  aspect-ratio: 4 / 3;
  
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  overflow: hidden;}
.v3d-host .viewport.square {aspect-ratio: 1 / 1;}
.v3d-host .viewport.tall {aspect-ratio: 3 / 4;}
.v3d-host .viewport > canvas {display: block; width: 100%; height: 100%;}
.v3d-host .viewport > img {position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;}
.v3d-host .viewport.short {aspect-ratio: auto; height: min(62vh, 560px);}
.v3d-host .workspace {display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap);
  height: calc(100vh - var(--chrome));
  min-height: 28rem;}
.v3d-host .work-main {display: flex; flex-direction: column; min-width: 0; min-height: 0;}
.v3d-host .work-main > .tabs {flex: 0 0 auto;}
.v3d-host .work-panels {flex: 1 1 auto; min-height: 0; overflow: auto;}
.v3d-host .work-main {position: relative;}
.v3d-host .work-main::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.75rem; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, var(--bg), transparent);
  transition: opacity 0.18s ease;}
.v3d-host .work-main.has-more::after {opacity: 1;}
@media (prefers-reduced-motion: reduce) {
.v3d-host .work-main::after {transition: none;}
}
.v3d-host .work-panels::-webkit-scrollbar, .v3d-host .work-rail::-webkit-scrollbar {width: 10px;}
.v3d-host .work-panels::-webkit-scrollbar-thumb, .v3d-host .work-rail::-webkit-scrollbar-thumb {background: var(--line); border-radius: 5px;
  border: 3px solid transparent; background-clip: content-box;}
.v3d-host .work-panels::-webkit-scrollbar-thumb:hover, .v3d-host .work-rail::-webkit-scrollbar-thumb:hover {background: var(--fg-label); background-clip: content-box;}
@supports not selector(::-webkit-scrollbar) {
.v3d-host .work-panels, .v3d-host .work-rail {scrollbar-width: thin; scrollbar-color: var(--line) transparent;}
}
.v3d-host .work-panels > [data-tab="3d"] {height: 100%; display: flex; flex-direction: column;}
.v3d-host .work-panels > [data-tab="3d"] > .stack {flex: 1 1 auto; min-height: 0;}
.v3d-host .viewport.fill {aspect-ratio: auto; height: 100%; max-height: none; min-height: 18rem;}
.v3d-host .work-panels > [data-tab="3d"] > .vstack {display: flex; flex-direction: column; min-height: 0;}
.v3d-host .work-panels > [data-tab="3d"] > .vstack > .vhost {flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;}
.v3d-host .work-panels .vhost > .stack {flex: 1 1 auto; min-height: 0;}
.v3d-host .work-panels .vhost .viewport.fill {flex: 1 1 auto; height: auto; min-height: 12rem;}
.v3d-host .work-panels .vhost p {flex: 0 0 auto;}
.v3d-host .vbar {display: flex; align-items: center; gap: 0.7rem; min-width: 0;}
.v3d-host .vbar > .seg {flex: 0 0 auto;}
.v3d-host .vnote {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
         white-space: nowrap;}
.v3d-host .work-panels > [data-tab="3d"] > .vstack > .vbar {flex: 0 0 auto;}
.v3d-host .work-panels > [data-tab="3d"] > .vstack > .hint {margin-top: 0.35rem;}
.v3d-host .work-panels > [data-tab="3d"] > .vstack > .seg, .v3d-host .work-panels > [data-tab="3d"] > .vstack > .hint {flex: 0 0 auto;}
.v3d-host .work-rail {display: flex; flex-direction: column; gap: var(--gap); min-height: 0; overflow: auto;}
.v3d-host .work-rail > * {flex: 0 0 auto;}
.v3d-host .work-rail > .seg {display: flex;}
.v3d-host .work-rail > .seg > button {flex: 1 1 0;}
.v3d-host .readings {width: 100%; border-collapse: collapse;}
.v3d-host .readings th {text-align: left; font: inherit; font-size: 0.74rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-label); font-weight: 600;
  padding: 0.5rem 0 0.25rem;}
.v3d-host .readings td {padding: 0.16rem 0; vertical-align: baseline;}
.v3d-host .readings td.k {color: var(--fg-label); font-size: 0.82rem;}
.v3d-host .readings td.v {text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--mono); white-space: nowrap;}
.v3d-host .readings td.src {padding-left: 0.55rem; font-size: 0.7rem; color: var(--fg-label);
  white-space: nowrap;}
.v3d-host .readings tr.is-absent td.v {color: var(--fg-label);}
.v3d-host .readings td.src.ok {color: var(--accent); font-weight: 600;}
.v3d-host .readings td.src.bad {color: #d98080; font-weight: 700;}
.v3d-host .readings td.src.warn {color: var(--warn); font-weight: 700;}
.v3d-host .readings td.wide {white-space: normal; font-size: 0.82rem; line-height: 1.4;
  padding: 0.3rem 0 0.2rem;}
.v3d-host .readings tr.typeref-row + tr.typeref-row td.wide {border-top: 1px dashed var(--line);}
.v3d-host .typeref-h {display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: baseline;}
.v3d-host .typeref-h a {font-weight: 600;}
.v3d-host .typeref-issue {font-variant-numeric: tabular-nums;}
.v3d-host .typeref-notes ul {margin: 0.15rem 0 0.35rem; padding-left: 1.1rem;}
.v3d-host .typeref-notes li {margin: 0.05rem 0;}
.v3d-host .typeref-side {margin-top: 0.35rem;}
.v3d-host .typeref-lettering {font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-mute);
  padding-left: 0.6rem; border-left: 2px solid var(--line);}
.v3d-host .typeref-warn {margin-top: 0.35rem; padding: 0.2rem 0.5rem;
  border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--fg);}
.v3d-host .typeref-status {margin-bottom: 0.3rem;}
.v3d-host .guess {border-left: 3px solid var(--accent); background: var(--panel);
  padding: 0.6rem 0.8rem; border-radius: 0 var(--r1) var(--r1) 0;}
.v3d-host .guess > * + * {margin-top: 0.35rem;}
.v3d-host .replaybar {border: 1px solid var(--warn); border-left-width: 3px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--fg); border-radius: var(--r1);
  padding: 0.4rem 0.7rem; font-size: var(--fs-sm); flex: 0 0 auto;}
.v3d-host .replaybar code {font-family: var(--mono); font-size: 0.92em;}
.v3d-host .guess .hpill {font-size: var(--fs-xs);}
.v3d-host .modal-b textarea {width: 100%; font-family: var(--mono); font-size: var(--fs-sm);}
.v3d-host .modal-b input[type="file"] {font-size: var(--fs-xs); color: var(--fg-label);}
.v3d-host .hpill {display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600;
  padding: 0.1rem 0.45rem; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;}
.v3d-host .hv-ok {color: var(--accent);}
.v3d-host .hv-warn {color: var(--warn, #9a6b1f);}
.v3d-host .hv-fail {color: var(--bad, #a34a42);}
.v3d-host .hv-none {color: var(--fg-label); border-style: dashed;}
.v3d-host .hsum {display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;}
.v3d-host .hsum .hpill {font-size: var(--fs-sm); padding: 0.22rem 0.7rem;}
.v3d-host .hcount {font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-label);}
.v3d-host .hcount b {color: var(--fg); font-weight: 600;}
.v3d-host .panel--alert {border-color: var(--bad, #a34a42);}
.v3d-host .hdrift + .hdrift {margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-2);}
.v3d-host .btn--alert {color: var(--bad, #a34a42); border-color: var(--bad, #a34a42); font-weight: 600;}
.v3d-host .hscan {border: 1px solid var(--line); border-radius: var(--r1); background: var(--panel);}
.v3d-host .hscan + .hscan {margin-top: 0.4rem;}
.v3d-host .hscan > summary {display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
  padding: 0.45rem 0.7rem; list-style: none;}
.v3d-host .hscan > summary::-webkit-details-marker {display: none;}
.v3d-host .hscan > summary:focus-visible {outline: 2px solid var(--accent); outline-offset: -2px;}
.v3d-host .hscan-id {font-family: var(--mono); font-size: var(--fs-sm);}
.v3d-host .hscan-run {font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-label); margin-left: auto;}
.v3d-host .hscan > .tblwrap {padding: 0 0.7rem 0.6rem;}
.v3d-host .hsent td.gate {font-family: var(--mono); font-size: 0.7rem; color: var(--fg-label);
  white-space: nowrap; padding-left: 0.6rem;}
.v3d-host .hsent td.verdict {text-align: right; vertical-align: top;}
.v3d-host .hsent td.src {white-space: normal; line-height: 1.4; max-width: 30rem;
  padding-top: 0.1rem;}
.v3d-host .hsent td.k, .v3d-host .hsent td.v, .v3d-host .hsent td.gate {vertical-align: top;}
.v3d-host .hsent td.k {white-space: nowrap;}
@media (max-width: 60rem) {
.v3d-host .workspace {grid-template-columns: minmax(0, 1fr); height: auto;}
.v3d-host .work-main {min-height: 60vh;}
.v3d-host .work-rail {overflow: visible;}
}
.v3d-host .viewport.native {max-width: max(var(--native-w, 520px), 520px);}
.v3d-host .viewport .draggable, .v3d-host canvas.draggable {cursor: grab; touch-action: none;}
.v3d-host .viewport .draggable:active, .v3d-host canvas.draggable:active {cursor: grabbing;}
.v3d-host .check {display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--fg);
  cursor: pointer;
  padding: .35rem 0;}
.v3d-host .check input[type="checkbox"] {margin-top: .15rem; flex: none; accent-color: var(--accent);}
.v3d-host .check input:disabled + span {color: var(--fg-mute);}
.v3d-host .check:has(input:disabled) {cursor: default;}
.v3d-host .overlay {position: absolute; inset: 0; pointer-events: none;}
.v3d-host .busy {position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgb(0 0 0 / 45%);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 3;}
.v3d-host .busy.on {display: grid;}
.v3d-host .scrollx {overflow-x: auto; overscroll-behavior-x: contain;}
.v3d-host h1, .v3d-host h2, .v3d-host h3, .v3d-host h4 {font-family: var(--serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  margin: 0;}
.v3d-host h1, .v3d-host .h1 {font-size: clamp(1.55rem, 3.4vw, var(--fs-2xl)); font-family: var(--serif); font-weight: 600; line-height: var(--lh-tight);}
.v3d-host h2, .v3d-host .h2 {font-size: var(--fs-xl);}
.v3d-host h3, .v3d-host .h3 {font-size: var(--fs-lg);}
.v3d-host .eyebrow {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-label);}
.v3d-host .prose {max-width: 44rem;}
.v3d-host .prose p {margin: 0 0 0.7rem;}
.v3d-host .prose p:last-child {margin-bottom: 0;}
.v3d-host .mono {font-family: var(--mono); font-size: var(--fs-sm);}
.v3d-host .num {font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);}
.v3d-host .dim {color: var(--fg-dim);}
.v3d-host .mute {color: var(--fg-mute);}
.v3d-host .strong {color: var(--fg); font-weight: 600;}
.v3d-host .kv {display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin: 0;}
.v3d-host .kv dt {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-label);}
.v3d-host .kv dd {margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg);}
.v3d-host .hint {font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-label);
  line-height: 1.4;}
.v3d-host .err {color: var(--bad); font-family: var(--mono); font-size: var(--fs-sm);}
.v3d-host .err-block {background: var(--bad-soft);
  border: 1px solid var(--bad);
  border-radius: var(--r1);
  padding: 0.6rem 0.7rem;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-sm);}
.v3d-host button, .v3d-host input, .v3d-host select, .v3d-host textarea {font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--fg);
  font-variant-numeric: tabular-nums;}
.v3d-host input[type="text"], .v3d-host input[type="search"], .v3d-host input[type="number"], .v3d-host input[type="url"], .v3d-host select, .v3d-host textarea {width: 100%;
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  min-width: 0;}
.v3d-host input:hover, .v3d-host select:hover, .v3d-host textarea:hover {border-color: var(--line-2);}
.v3d-host input:focus-visible, .v3d-host select:focus-visible, .v3d-host textarea:focus-visible {border-color: var(--accent);}
.v3d-host textarea {resize: vertical; min-height: 4.5rem; line-height: 1.45;}
.v3d-host input::placeholder, .v3d-host textarea::placeholder {color: var(--fg-mute);}
.v3d-host input[type="range"] {width: 100%; accent-color: var(--accent); margin: 0;}
.v3d-host input[type="checkbox"] {accent-color: var(--accent); width: auto;}
.v3d-host select {appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%),
                    linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.55rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.6rem;}
.v3d-host .btn {display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;}
.v3d-host .btn:hover {background: var(--well); border-color: var(--fg-mute); color: var(--fg);}
.v3d-host .btn--primary {background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;}
.v3d-host .btn--primary:hover {background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-fg);}
.v3d-host .btn--ghost {background: transparent; border-color: var(--line); color: var(--fg-dim);}
.v3d-host .btn--ghost:hover {background: var(--panel-2); color: var(--fg);}
.v3d-host .btn--danger {background: transparent; border-color: var(--bad); color: var(--bad);}
.v3d-host .btn--danger:hover {background: var(--bad-soft); color: var(--bad);}
.v3d-host .btn--sm {padding: 0.24rem 0.5rem; font-size: var(--fs-xs);}
.v3d-host .btn--icon {padding: 0.35rem 0.45rem;}
.v3d-host .btn[disabled], .v3d-host .btn[aria-disabled="true"] {opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;}
.v3d-host .btn.is-busy {color: var(--fg-mute);}
.v3d-host .btn-row {display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; align-items: center;}
.v3d-host .seg {display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r1); overflow: hidden;}
.v3d-host .seg > button {padding: 0.36rem 0.7rem;
  background: var(--panel-2);
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  letter-spacing: 0.05em;
  color: var(--fg-dim);}
.v3d-host .seg > button:last-child {border-right: 0;}
.v3d-host .seg > button:hover {background: var(--well); color: var(--fg);}
.v3d-host .seg > button[aria-pressed="true"] {background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;}
.v3d-host .seg > button:focus-visible {outline-offset: -2px;}
.v3d-host .v3d-color {padding: 0.36rem 0.5rem;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  color: var(--fg-dim);
  font: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;}
.v3d-host .v3d-color:hover {background: var(--well); color: var(--fg);}
.v3d-host .toggle {display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;}
.v3d-host .toggle:hover {border-color: var(--line-2); color: var(--fg);}
.v3d-host .field {display: flex; flex-direction: column; gap: 0.28rem; min-width: 0;}
.v3d-host .field > label {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-label);}
.v3d-host .field > .seg, .v3d-host .field > .sideswitch, .v3d-host .field > .btn-row {align-self: flex-start;}
.v3d-host .field.inline {flex-direction: row; align-items: center; gap: 0.45rem;}
.v3d-host .field.inline > label {text-transform: none; letter-spacing: 0.02em; font-size: var(--fs-sm); color: var(--fg-dim);}
.v3d-host .form {display: grid; gap: 0.7rem var(--gap);}
.v3d-host .form.cols2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.v3d-host .form.cols3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.v3d-host .form .span2 {grid-column: span 2;}
.v3d-host .form .span-all {grid-column: 1 / -1;}
@media (max-width: 720px) {
.v3d-host .form.cols2, .v3d-host .form.cols3 {grid-template-columns: minmax(0, 1fr);}
.v3d-host .form .span2, .v3d-host .form .span-all {grid-column: auto;}
}
.v3d-host .searchbox {position: relative; flex: 1 1 16rem; min-width: 12rem;}
.v3d-host .searchbox input {padding-left: 1.9rem;
  background: var(--panel);}
.v3d-host .searchbox::before {content: "";
  position: absolute;
  left: 0.62rem;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: -0.42rem;
  border: 1.5px solid var(--fg-mute);
  border-radius: 50%;
  pointer-events: none;}
.v3d-host .searchbox::after {content: "";
  position: absolute;
  left: 1.14rem;
  top: 50%;
  width: 0.34rem;
  height: 1.5px;
  background: var(--fg-mute);
  transform: rotate(45deg);
  margin-top: 0.16rem;
  pointer-events: none;}
.v3d-host .ctrl {display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) 4rem; gap: 0.5rem; align-items: center;}
.v3d-host .ctrl > label {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);}
.v3d-host .ctrl > output {font-family: var(--mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--fg);}
.v3d-host .chips {display: flex; flex-wrap: wrap; gap: 0.3rem;}
.v3d-host .chip {display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.44rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;}
.v3d-host button.chip {cursor: pointer;}
.v3d-host button.chip:hover {border-color: var(--line-2); color: var(--fg);}
.v3d-host .chip.on {background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg);}
.v3d-host .chip--ghost {background: transparent; color: var(--fg-mute); border-style: dashed;}
.v3d-host .chip--good {background: var(--good-soft); border-color: var(--good); color: var(--fg);}
.v3d-host .chip--warn {background: var(--warn-soft); border-color: var(--warn); color: var(--fg);}
.v3d-host .chip--bad {background: var(--bad-soft); border-color: var(--bad); color: var(--fg);}
.v3d-host .badge {display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg);}
.v3d-host .badge em {font-style: normal;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9em;}
.v3d-host .badge--good {background: var(--good-soft); border-color: var(--good);}
.v3d-host .badge--warn {background: var(--warn-soft); border-color: var(--warn);}
.v3d-host .badge--bad {background: var(--bad-soft); border-color: var(--bad);}
.v3d-host .badge--accent {background: var(--accent-soft); border-color: var(--accent);}
.v3d-host .badge--mute {background: transparent; border-color: var(--line); color: var(--fg-mute);}
.v3d-host .facets {display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-end;}
.v3d-host .facet {display: flex; flex-direction: column; gap: 0.25rem; min-width: 8.5rem;}
.v3d-host .facet > span {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-label);}
.v3d-host .cards {display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--gap);}
.v3d-host .card {display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;}
.v3d-host .card:hover {border-color: var(--line-2);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  color: inherit;}
.v3d-host .card:focus-visible {outline-offset: 1px;}
.v3d-host .card-thumb {position: relative;
  aspect-ratio: 1 / 1;
  background: var(--well);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;}
.v3d-host .card-thumb {background: var(--stage);}
.v3d-host .card-thumb img {width: 100%; height: 100%; object-fit: contain;}
.v3d-host .card-empty {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  
  color: var(--on-stage-fg);
  background: color-mix(in srgb, var(--on-stage-scrim) 72%, transparent);
  border-radius: var(--r2);
  text-align: center;
  padding: 0.3rem 0.7rem;
  line-height: 1.5;}
.v3d-host .card-body {padding: 0.7rem var(--pad) 0.55rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 auto;}
.v3d-host .card-title {font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;}
.v3d-host .card-sub {font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;}
.v3d-host .card-meta {font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-label);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;}
.v3d-host .card-foot {margin-top: auto;
  padding: 0.5rem var(--pad) 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;}
.v3d-host .tablewrap {overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--panel);}
.v3d-host .table {width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-sm);}
.v3d-host .table th, .v3d-host .table td {padding: 0.4rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;}
.v3d-host .table thead th {font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-label);
  background: var(--panel-2);
  position: sticky;
  top: 0;}
.v3d-host .table tbody tr:last-child td {border-bottom: 0;}
.v3d-host .table tbody tr:hover {background: var(--panel-2);}
.v3d-host .table td.num, .v3d-host .table th.num {text-align: right;
  font-variant-numeric: tabular-nums;}
.v3d-host .table--compact th, .v3d-host .table--compact td {padding: 0.24rem 0.55rem; font-size: var(--fs-xs);}
.v3d-host .tabs {display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;}
.v3d-host .tab {padding: 0.45rem 0.8rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;}
.v3d-host .tab:hover {color: var(--fg);}
.v3d-host .assess-status {display: flex; gap: 0.5rem; flex-wrap: wrap;}
.v3d-host .pill {font-family: var(--mono); font-size: var(--fs-xs);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.2rem 0.7rem; color: var(--fg-mute);}
.v3d-host .pill-ok {color: var(--accent); border-color: var(--accent);}
.v3d-host .pill-bad {color: #d98080; border-color: #d98080; font-weight: 600;}
.v3d-host .assess-h {font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute);
  margin: 0.5rem 0 0.15rem;}
.v3d-host .assess-list {font-family: var(--mono); font-size: var(--fs-xs);
  margin: 0; padding-left: 1.1rem;}
.v3d-host .assess-list li {margin: 0.12rem 0;}
.v3d-host .tabdiv {align-self: center;
  margin: 0 0.3rem 0 0.9rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;}
.v3d-host .tab[aria-selected="true"] {color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;}
.v3d-host .tab:focus-visible {outline-offset: -2px;}
.v3d-host .tabpanel {padding-top: var(--gap); min-width: 0;}
.v3d-host .tabpanel[hidden] {display: none;}
.v3d-host .flip {perspective: 1400px;}
.v3d-host .flip-inner {position: relative;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.4, 0.1, 0.25, 1);}
.v3d-host .flip.is-back .flip-inner {transform: rotateY(180deg);}
.v3d-host .flip-face {backface-visibility: hidden;}
.v3d-host .flip-face--back {position: absolute;
  inset: 0;
  transform: rotateY(180deg);}
.v3d-host .sideswitch {display: inline-flex; align-items: center; gap: 0.5rem;}
.v3d-host .savebar {display: flex;
  align-items: center;
  gap: var(--gap);
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 0.2rem;}
.v3d-host .savestate {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-right: auto;}
.v3d-host .savestate.is-dirty {color: var(--warn);}
.v3d-host .savestate.is-saving {color: var(--fg-dim);}
.v3d-host .savestate.is-saved {color: var(--good);}
.v3d-host .savestate.is-error {color: var(--bad);}
.v3d-host .joblog {margin: 0;
  padding: 0.6rem 0.7rem;
  max-height: 16rem;
  overflow: auto;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;}
.v3d-host .progress {position: relative;
  height: 0.45rem;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;}
.v3d-host .progress > i {display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 220ms ease;}
.v3d-host .progress.is-error > i {background: var(--bad);}
.v3d-host .progress.is-done > i {background: var(--good);}
.v3d-host .progress.indet > i {width: 34%;
  animation: slide 1.15s ease-in-out infinite alternate;}
@keyframes slide { from { transform: translateX(-30%); } to { transform: translateX(220%); } }
.v3d-host .job {border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--panel-2);
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;}
.v3d-host .job-head {display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-dim);}
.v3d-host .job-head .grow {margin-left: auto;}
.v3d-host .state {font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.06rem 0.35rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  color: var(--fg-dim);}
.v3d-host .state--queued {color: var(--fg-mute);}
.v3d-host .state--running {color: var(--accent); border-color: var(--accent);}
.v3d-host .state--done {color: var(--good); border-color: var(--good);}
.v3d-host .state--error {color: var(--bad); border-color: var(--bad);}
.v3d-host .state--cancelled {color: var(--warn); border-color: var(--warn);}
.v3d-host .refbar {display: flex; flex-direction: column; gap: 0.3rem;}
.v3d-host .refbar-track {position: relative;
  height: 1.5rem;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r1);}
.v3d-host .refbar-mark, .v3d-host .refbar-you {position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--fg-mute);}
.v3d-host .refbar-you {width: 3px; background: var(--accent);}
.v3d-host .refbar-mark > span, .v3d-host .refbar-you > span {position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-mute);
  white-space: nowrap;}
.v3d-host .refbar-you > span {color: var(--accent);}
.v3d-host .empty {border: 1px dashed var(--line-2);
  border-radius: var(--r2);
  background: var(--panel);
  padding: 1.6rem var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;}
.v3d-host .empty h3 {font-size: var(--fs-lg);}
.v3d-host .empty .prose {color: var(--fg-dim);}
.v3d-host .spinner {display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
  vertical-align: -2px;}
@keyframes spin { to { transform: rotate(360deg); } }
.v3d-host .skeleton {background: linear-gradient(90deg, var(--well) 0%, var(--panel-2) 40%, var(--well) 80%);
  background-size: 250% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r1);
  min-height: 1rem;}
@keyframes shimmer { to { background-position: -150% 0; } }
.v3d-host .modal {position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: 3.5rem 1rem 2rem;
  background: rgb(10 14 18 / 55%);
  overflow: auto;
  backdrop-filter: blur(2px);}
.v3d-host .modal-box {width: min(38rem, 100%);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 5rem);}
.v3d-host .modal-h {display: flex;
  align-items: baseline;
  gap: var(--gap);
  padding: 0.75rem var(--pad);
  border-bottom: 1px solid var(--line);}
.v3d-host .modal-h h2 {font-size: var(--fs-lg); margin-right: auto;}
.v3d-host .modal-box > form {display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;}
.v3d-host .modal-b {padding: var(--pad);
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);}
.v3d-host .modal-f {padding: 0.7rem var(--pad);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;}
.v3d-host .modal-f .grow {margin-left: auto;}
.v3d-host .toast {position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 95;
  max-width: 24rem;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
  padding: 0.6rem 0.75rem;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--fg);}
.v3d-host .toast.is-error {border-left-color: var(--bad);}
.v3d-host .toast.is-good {border-left-color: var(--good);}
.v3d-host .gal-toolbar {display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-end;
  padding: var(--pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);}
.v3d-host .gal-result {font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg-label);
  font-variant-numeric: tabular-nums;}
.v3d-host .unassigned > summary {cursor: pointer;
  padding: 0.6rem var(--pad);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  list-style: none;
  display: flex;
  gap: 0.6rem;
  align-items: center;}
.v3d-host .unassigned > summary::-webkit-details-marker {display: none;}
.v3d-host .unassigned > summary::before {content: "▸";
  color: var(--fg-mute);
  transition: transform 140ms ease;
  display: inline-block;}
.v3d-host .unassigned[open] > summary::before {transform: rotate(90deg);}
.v3d-host .unassigned > summary:hover {color: var(--fg);}
.v3d-host .assign-row {display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) minmax(0, 1fr) 6.5rem 7.5rem auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);}
.v3d-host .assign-row:first-of-type {border-top: 0;}
@media (max-width: 900px) {
.v3d-host .assign-row {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}
.v3d-host .assign-id {font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg);
  overflow-wrap: anywhere;}
.v3d-host .assign-id small {display: block; color: var(--fg-mute);}
@media (prefers-reduced-motion: reduce) {
.v3d-host *, .v3d-host *::before, .v3d-host *::after {animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;}
.v3d-host .card:hover {transform: none;}
.v3d-host .flip-inner {transition: none;}
}
.v3d-host .cleanup .assign-row.pickrow {display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: center;
  padding: .25rem .4rem;
  border-radius: 6px;
  cursor: pointer;}
.v3d-host .cleanup .assign-row.pickrow:hover {background: rgba(127, 127, 127, .12);}
.v3d-host .cleanup .stack.tight {max-height: 46vh;
  overflow-y: auto;
  padding-right: .3rem;}
.v3d-host .cleanup input.pickses {width: 1.05rem; height: 1.05rem;}
.v3d-host .v3d-ruler {position: absolute; left: .7rem; bottom: .7rem;
  display: flex; align-items: center; gap: .5rem;
  pointer-events: none; user-select: none;
  font: 600 11px/1 ui-monospace, Menlo, monospace;
  color: var(--on-stage-fg);
  background: color-mix(in srgb, var(--on-stage-scrim) 72%, transparent);
  padding: .12rem .4rem;
  border-radius: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);}
.v3d-host .v3d-ruler i {display: block; height: 6px;
  border: 1.5px solid rgba(235, 238, 245, .92);
  border-top: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .7);}
.v3d-host .align-stage {position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  overflow: hidden;}
.v3d-host .align-face {position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  
  max-width: none;
  transform-origin: 50% 50%;
  pointer-events: none;}
.v3d-host .align-b {will-change: transform;}
.v3d-host .align-dot {width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--fg-dim);
  cursor: pointer;
  font-variant-numeric: tabular-nums;}
.v3d-host .align-dot[aria-current="true"] {background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;}
.v3d-host .align-num {width: 5.5rem;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  color: var(--fg);
  font: inherit;
  padding: 0.15rem 0.35rem;
  font-variant-numeric: tabular-nums;}
.v3d-host .align-guides {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;}
.v3d-host .align-guides .guide-lines line {stroke: var(--accent); stroke-width: 1.5; opacity: 0.75;}
.v3d-host .align-guides .guide-diag line {stroke: var(--fg-mute); stroke-width: 1; opacity: 0.35; stroke-dasharray: 8 10;}
.v3d-host .align-guides .guide-ring-a {fill: none; stroke: #e0483a; stroke-width: 2; opacity: 0.85;}
.v3d-host .align-guides .guide-ring-b {fill: none; stroke: #2fa84f; stroke-width: 2; opacity: 0.85; stroke-dasharray: 7 6;}
.v3d-host .align-guides .guide-dot-a {fill: #e0483a;}
.v3d-host .align-guides .guide-dot-b {fill: #2fa84f;}
.v3d-host .align-guides .guide-link {stroke: var(--warn); stroke-width: 2.5;}
.v3d-host img.zoomable {cursor: zoom-in;}
.v3d-host .lightbox {position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 11, 13, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overscroll-behavior: contain;}
.v3d-host .lightbox-stage {flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden;}
.v3d-host .lightbox-img {max-width: 96vw; max-height: 88vh;
  image-rendering: pixelated;          
  transform-origin: center center;
  cursor: grab; touch-action: none; user-select: none;}
.v3d-host .lightbox-img:active {cursor: grabbing;}
.v3d-host .lightbox-hint {flex: 0 0 auto; margin: 0; padding: 10px 0 16px;
  color: #9fb0b8; font-size: 0.82rem; letter-spacing: 0.04em;}
@media (prefers-reduced-motion: reduce) {
.v3d-host .lightbox-img {transition: none;}
}
.v3d-host .viewport > canvas.overlay {position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;}
.v3d-host .tool-row {display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.45rem;}
.v3d-host .tool-row .readout {font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg);}
.v3d-host .btn[aria-pressed="true"].tool {outline: 2px solid var(--accent, #1f7a73); outline-offset: 1px;}
.v3d-host .viewport .fsbtn {position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; padding: 0; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--on-stage-fg) 22%, transparent);
  border-radius: var(--r1);
  background: color-mix(in srgb, var(--on-stage-scrim) 78%, transparent);
  color: var(--on-stage-fg); cursor: pointer; touch-action: manipulation;
  -webkit-appearance: none; appearance: none;}
.v3d-host .viewport .fsbtn:hover {background: color-mix(in srgb, var(--on-stage-scrim) 92%, transparent);}
.v3d-host .viewport .fsbtn:focus-visible {outline: 2px solid var(--on-stage-fg); outline-offset: 1px;}
.v3d-host .viewport.fs {position: fixed; inset: 0; z-index: 1000; aspect-ratio: auto;
  max-height: none !important; border: 0; border-radius: 0;
  background: var(--well);}
.v3d-host .viewport.fs > canvas {width: 100%; height: 100%;}
.v3d-host .viewport:fullscreen, .v3d-host .viewport:-webkit-full-screen {background: var(--well);}
.v3d-host .viewport:fullscreen > canvas, .v3d-host .viewport:-webkit-full-screen > canvas {width: 100%; height: 100%;}
.v3d-host .viewport > .vrail {position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; display: flex; flex-direction: column; gap: 0.35rem;}
.v3d-host .viewport > .vrail > .fsbtn {position: static;}
.v3d-host .viewport > .vrail > .fsbtn[aria-pressed="true"] {background: var(--accent); color: var(--on-stage-fg); border-color: transparent;}
.v3d-host .viewport > .vhud {position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 3; max-width: calc(100% - 4rem);
  padding: 0.3rem 0.55rem; border-radius: var(--r1);
  border: 1px solid color-mix(in srgb, var(--on-stage-fg) 18%, transparent);
  background: color-mix(in srgb, var(--on-stage-scrim) 82%, transparent);
  color: var(--on-stage-fg);
  font-family: var(--mono); font-size: var(--fs-xs); pointer-events: none;}
.v3d-host .viewport > .vpop {position: absolute; top: 0.5rem; left: 0.5rem; right: 3.2rem; bottom: 0.5rem; z-index: 4;
  overflow: auto; border-radius: var(--r1);
  border: 1px solid color-mix(in srgb, var(--on-stage-fg) 18%, transparent);
  background: color-mix(in srgb, var(--on-stage-scrim) 95%, transparent);
  color: var(--on-stage-fg);
  padding: 0.6rem 0.7rem; max-width: 34rem;}
.v3d-host .viewport > .vpop label, .v3d-host .viewport > .vpop .hint {color: var(--on-stage-dim);}
.v3d-host .viewport > .vpop .btn--ghost, .v3d-host .viewport > .vpop .ctrl > output, .v3d-host .viewport > .vpop output, .v3d-host .viewport > .vpop .num, .v3d-host .viewport > .vpop select, .v3d-host .viewport > .vpop input {color: var(--on-stage-fg);}
.v3d-host .viewport > .vpop .btn--ghost {border-color: color-mix(in srgb, var(--on-stage-fg) 30%, transparent); background: transparent;}
.v3d-host .viewport > .vpop .btn--ghost:hover {background: color-mix(in srgb, var(--on-stage-fg) 12%, transparent);}
.v3d-host .viewport > .vpop .seg {flex-wrap: wrap;}
.v3d-host .viewport > .vpop .vpop-head {display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 0.4rem;}
.v3d-host .viewport > .vpop .vpop-body {display: grid; gap: 0.6rem;}
.v3d-host .v3d-profile {margin-top: 6px;
  border: 1px solid var(--line, #2a2d33);
  border-radius: 6px;
  background: var(--on-stage-scrim);
  overflow: hidden;}
.v3d-host .v3d-profile > canvas {display: block;
  width: 100%;
  height: 150px;}
.v3d-host .v3d-profile-bar {display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-top: 1px solid var(--line, #2a2d33);
  flex-wrap: wrap;}
.v3d-host .v3d-profile-bar .readout {font: 12px ui-monospace, Menlo, monospace;
  color: var(--fg-dim, #aeb4bb);}
.v3d-host .chopgrid {display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gap);}
.v3d-host .chopgrid.compact {grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));}
.v3d-host .chopcard {border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); overflow: hidden; display: flex; flex-direction: column;}
.v3d-host .chopcard[data-status="confirmed"] {border-color: var(--good);}
.v3d-host .chopcard[data-status="rejected"] {opacity: 0.55;}
.v3d-host .chopcard-media {aspect-ratio: 1 / 1; background: #111; display: grid; place-items: center; cursor: pointer;}
.v3d-host .chopcard-media img.chop-thumb {width: 100%; height: 100%; object-fit: contain; image-rendering: auto; display: block;}
.v3d-host .chopcard-body {padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;}
.v3d-host .chopcard-body .row {display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;}
.v3d-host .chopcard-body .grow {flex: 1;}
.v3d-host .chopcard-body input.chop-label {flex: 1 1 7rem; min-width: 0; font-size: var(--fs-sm);}
.v3d-host .chopcard-body select.chop-cat {flex: 0 1 7rem; min-width: 0; font-size: var(--fs-sm);}
.v3d-host .identify-drop {border: 2px dashed var(--line); border-radius: var(--r2); padding: 1.2rem; text-align: center; cursor: pointer;}
.v3d-host .identify-drop.is-over {border-color: var(--accent); background: var(--well);}
.v3d-host .identify-drop img {max-width: 100%; max-height: 22rem; display: block; margin: 0.5rem auto 0;}
.v3d-host .matchrow {display: grid; grid-template-columns: 5rem 5rem 1fr; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--line);}
.v3d-host .matchrow img {width: 5rem; height: 5rem; object-fit: contain; background: #111; border-radius: 4px;}
.v3d-host .matchrow.is-hit {background: color-mix(in srgb, var(--good) 12%, transparent);}
.v3d-host .chop-controls {display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;}
.v3d-host .chop-thr-field {display: flex; gap: 0.45rem; align-items: center; flex: 1 1 16rem; min-width: 12rem;}
.v3d-host .chop-thr-field input.chop-thr {flex: 1; min-width: 6rem; accent-color: var(--accent);}
.v3d-host .chopcanvas-wrap {border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--well); line-height: 0;}
.v3d-host .chopcanvas {display: block; width: 100%; height: auto; cursor: crosshair;}
.v3d-host .chop-select {border-color: var(--accent);}
.v3d-host .chop-select-top {display: flex; gap: var(--gap); align-items: flex-start; flex-wrap: wrap;}
.v3d-host .chop-select-media {flex: 0 0 auto; width: 160px; height: 160px; background: #111; border-radius: var(--r1); overflow: hidden;}
.v3d-host .chop-select-media img {width: 100%; height: 100%; object-fit: contain; cursor: pointer;}
.v3d-host .solvefail {display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.1rem 1.2rem; border: 1px solid var(--bad, #a34a42);
  border-radius: var(--r1); background: var(--panel); max-width: 46rem;}
.v3d-host .solvefail h3 {margin: 0; font-size: 1.05rem; color: var(--bad, #a34a42);}
.v3d-host .solvefail .readings td.src {white-space: normal; line-height: 1.4; max-width: 26rem;}
.v3d-host .solvefail .readings td.k, .v3d-host .solvefail .readings td.v, .v3d-host .solvefail .readings td.gate {vertical-align: top;}
.v3d-host .interlockbar {border: 1px solid var(--bad, #a34a42); border-left-width: 3px;
  border-radius: var(--r1); background: color-mix(in srgb, var(--bad, #a34a42) 8%, transparent);
  padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; line-height: 1.45;}
.v3d-host .interlockbar strong {color: var(--bad, #a34a42);}
.v3d-host .interlockbar code {font-family: var(--mono); font-size: 0.86em;}
.v3d-host .interlockbar .hint {margin: 0.5rem 0 0;}
.v3d-host .work-panels > [data-tab="3d"] > .exam3d {flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--gap);}
.v3d-host .exam3d-stage {display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 0.3rem;}
.v3d-host .exam3d-stage > .vhost {flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;}
.v3d-host .exam3d-stage > .vbar, .v3d-host .exam3d-stage > .row {flex: 0 0 auto;}
.v3d-host .exam3d-side {min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.8rem; padding-right: 2px;}
.v3d-host .stage-label {font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap;}
.v3d-host .feat-list h3 {margin: 0 0 0.2rem;}
.v3d-host .feat-side {font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-label);
             margin: 0.55rem 0 0.15rem;}
.v3d-host button.feat {display: flex; width: 100%; align-items: center; gap: 0.4rem; text-align: left; padding: 0.36rem 0.5rem;
              border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg);
              cursor: pointer; font: inherit;}
.v3d-host button.feat:hover {background: var(--panel-2);}
.v3d-host button.feat[aria-pressed="true"] {background: var(--accent-soft); border-color: var(--accent);}
.v3d-host .feat-name {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.v3d-host .feat-tag {flex: 0 0 auto; font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 4px;
            background: var(--good-soft); color: var(--good);}
.v3d-host .feat-tag--weak {background: var(--warn-soft); color: var(--warn);}
.v3d-host .feat-tag--draft {background: var(--panel-2); color: var(--fg-dim);}
.v3d-host .sel-panel {border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem; display: flex;
             flex-direction: column; gap: 0.5rem; background: var(--panel);}
.v3d-host .sel-title {font-size: 1.1rem; font-weight: 600;}
.v3d-host .sel-status {margin: 0; padding-left: 1.1rem; font-size: 0.86rem;}
.v3d-host .feat-more > summary, .v3d-host .sel-details > summary {cursor: pointer; color: var(--fg-dim);}
.v3d-host .sel-details table {font-size: 0.8rem;}
.v3d-host .workspace.rail-min {grid-template-columns: minmax(0, 1fr) 2.6rem;}
.v3d-host .workspace.rail-min .work-rail > :not(.rail-toggle) {display: none;}
.v3d-host .rail-toggle {flex: 0 0 auto; font: inherit; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
               border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg-dim);
               padding: 0.35rem 0.4rem; cursor: pointer;}
.v3d-host .workspace.rail-min .rail-toggle {writing-mode: vertical-rl; padding: 0.6rem 0.25rem;}
@media (max-width: 900px) {
.v3d-host .work-panels > [data-tab="3d"] > .exam3d {grid-template-columns: minmax(0, 1fr);}
}
.v3d-host .hdr-menu {position: relative;}
.v3d-host .hdr-menu > summary {list-style: none; cursor: pointer;}
.v3d-host .hdr-menu > summary::-webkit-details-marker {display: none;}
.v3d-host .hdr-menu-list {position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex;
                 flex-direction: column; gap: 0.35rem; padding: 0.5rem; min-width: 12rem; border: 1px solid var(--line);
                 border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,0.25);}
.v3d-host .hdr-menu-list > .btn {width: 100%; justify-content: flex-start;}
.v3d-host .scan-maint > summary {cursor: pointer; color: var(--fg-dim); padding: 0.4rem 0;}
.v3d-host .feat-sub {font-size: 0.7rem; color: var(--fg-mute); margin: 0.35rem 0 0.1rem 0.5rem;}
.v3d-host button.feat.feat--draft {padding-left: 1rem; color: var(--fg-dim);}
.v3d-host .clip-warning {border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--fg); padding: 0.4rem 0.5rem;
                border-radius: 4px; font-size: 0.85rem;}
.v3d-host .clip-note {border-left: 3px solid var(--line-2); padding: 0.25rem 0.5rem; font-size: 0.8rem; color: var(--fg-dim);}
.v3d-host .cmp-block {display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid var(--line); border-radius: 6px;
             padding: 0.5rem;}
.v3d-host .cmp-src > summary {cursor: pointer; color: var(--fg-dim); font-size: 0.82rem;}
.v3d-host .feat-tag--warn {background: var(--warn-soft); color: var(--warn); font-weight: 600;}
.v3d-host button.feat.feat--nested {padding-left: 1.2rem; font-size: 0.88rem; color: var(--fg-dim);}
.v3d-host .feat-nest > summary {cursor: pointer; font-size: 0.72rem; color: var(--fg-mute); margin-left: 0.6rem;}
.v3d-host .inv-host {display: flex; flex-direction: column; gap: 0.5rem;}
.v3d-host .inv-box {border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.6rem; background: var(--panel);}
.v3d-host .inv-box > summary {cursor: pointer; font-weight: 600;}
.v3d-host .inv-box > .hint {margin: 0.3rem 0;}
.v3d-host .inv-count {font-size: 0.8rem; font-weight: 600; margin: 0.4rem 0 0.2rem;}
.v3d-host .inv-filter {display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.2rem 0 0.4rem;}
.v3d-host .inv-filter select, .v3d-host .inv-filter input {font: inherit; font-size: 0.78rem; padding: 0.15rem 0.3rem; border: 1px solid var(--line);
                                        border-radius: 4px; background: var(--panel-2); color: var(--fg);}
.v3d-host .inv-filter input {width: 5.5rem;}
.v3d-host .inv-tree {display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem;}
.v3d-host .inv-group {border-left: 2px solid var(--line); margin-left: 0.15rem;}
.v3d-host .inv-group[open] {border-left-color: var(--line-2);}
.v3d-host summary.inv-g {display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; cursor: pointer; padding: 0.22rem 0.35rem;
                border-radius: 4px; list-style: none;}
.v3d-host summary.inv-g::before {content: "▸"; color: var(--fg-mute); font-size: 0.7rem; flex: 0 0 auto;}
.v3d-host .inv-group[open] > summary.inv-g::before {content: "▾";}
.v3d-host summary.inv-g::-webkit-details-marker {display: none;}
.v3d-host summary.inv-g:hover {background: var(--panel-2);}
.v3d-host summary.inv-g[aria-pressed="true"] {background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent);}
.v3d-host .inv-g-title {font-weight: 600;}
.v3d-host .inv-g-n {color: var(--fg-mute); font-size: 0.72rem;}
.v3d-host .inv-flag {font-size: 0.64rem;}
.v3d-host .inv-flag--unresolved, .v3d-host .inv-flag--missing {background: var(--warn-soft); color: var(--warn);}
.v3d-host .inv-flag--proposed {background: var(--panel-2); color: var(--fg-dim);}
.v3d-host button.inv-g-show {margin-left: auto; font: inherit; font-size: 0.68rem; padding: 0.05rem 0.4rem; border: 1px solid var(--line-2);
                    border-radius: 4px; background: var(--panel-2); color: var(--fg-dim); cursor: pointer;}
.v3d-host button.inv-g-show:hover {background: var(--well); color: var(--fg);}
.v3d-host .inv-g-body {padding: 0 0 0.2rem 0.5rem;}
.v3d-host .inv-g-sub {font-size: 0.72rem; color: var(--fg-mute); margin: 0.05rem 0 0.2rem 0.35rem;}
.v3d-host button.inv-el {display: flex; flex-wrap: wrap; width: 100%; align-items: baseline; gap: 0 0.3rem; text-align: left;
                padding: 0.14rem 0.35rem; border: 1px solid transparent; border-radius: 4px; background: transparent;
                color: var(--fg); cursor: pointer; font: inherit; font-size: 0.72rem; line-height: 1.25;}
.v3d-host button.inv-el:hover {background: var(--panel-2);}
.v3d-host button.inv-el[aria-pressed="true"] {background: var(--accent-soft); border-color: var(--accent);}
.v3d-host .inv-el-kind {flex: 0 0 2.9rem; color: var(--fg-dim);}
.v3d-host .inv-el-band {flex: 0 0 3.2rem; color: var(--fg-mute);}
.v3d-host .inv-el-area {flex: 0 0 3.9rem; font-variant-numeric: tabular-nums;}
.v3d-host .inv-el-clock {flex: 0 0 auto; margin-left: auto; text-align: right; color: var(--fg-mute); font-variant-numeric: tabular-nums;}
.v3d-host .inv-el-cls {flex: 1 1 100%; order: 9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              font-size: 0.72rem; color: var(--fg-dim);}
.v3d-host .inv-el-cls > small {color: var(--fg-mute); font-size: 0.66rem;}
.v3d-host .inv-sel {border: 1px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.6rem; margin: 0.3rem 0; display: flex;
           flex-direction: column; gap: 0.35rem; background: var(--panel);}