/* claude-as-cad interactive hero
   Palette + type after skills.wheresryan.sh/anatomy: Inter 450 on #fafafa, grey ink, hairline
   rules, white cards, EB Garamond italic for small accents. The viewer has no frame or background
   of its own: the arm and its shadow sit directly on the page. */
.cac-hero {
  --cac-ground: transparent; /* the page shows through; set to the page colour if it isn't */
  --cac-ink: #171717;
  --cac-text-2: #525252;
  --cac-muted: #8f8f8f;
  --cac-faint: #bdbdbd;
  --cac-rule: #ebebeb;
  --cac-well: #f1f1f1;
  --cac-well-2: #e7e7e7;
  --cac-card: #ffffff;
  --cac-accent: #e0312b; /* click ring + marker only */
  --cac-cyan: #22c4f0; /* the viewer's face highlight */
  --cac-sans: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cac-serif: "EB Garamond", Georgia, serif;
  --cac-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  color: var(--cac-ink);
  font: 450 14px/20.5px var(--cac-sans);
}
.cac-hero [hidden] { display: none !important; }
.cac-window { position: relative; background: var(--cac-ground); }

/* header row: what this is, in the page's own voice (no fake browser chrome) */
.cac-titlebar {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  padding: 0 0 10px; border-bottom: 1px solid var(--cac-rule);
}
.cac-dots { display: none; }
.cac-app { flex: none; font-weight: 550; color: var(--cac-ink); }
.cac-url {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cac-muted);
}
.cac-tag { flex: none; font: italic 400 16px/1 var(--cac-serif); color: var(--cac-text-2); }

.cac-body { display: flex; gap: 20px; height: clamp(380px, 46vw, 580px); padding-top: 14px; }
.cac-viewer { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cac-viewer::before { content: ""; position: absolute; inset: 0; background: var(--cac-poster, none) center / cover no-repeat; pointer-events: none; }
.cac-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; outline: none; }
/* feather the canvas edges so parts cropped by the frame dissolve into the page instead of being cut */
.cac-canvas, .cac-viewer::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 56px), transparent 100%);
  mask-composite: intersect;
}
.cac-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cac-muted); }

.cac-marker {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--cac-accent); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none; z-index: 4;
}
/* the viewer's own "Copied to clipboard" toast stays dark: it is the app's UI, not the page's */
.cac-toast {
  position: absolute; z-index: 6; max-width: min(330px, 72%);
  background: var(--cac-ink); color: #fff; border: 1px solid var(--cac-cyan); border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.cac-toast, .cac-marker { transition: opacity 0.4s ease; }
.cac-hero .cac-fade { opacity: 0; }
.cac-toast-title { font: 550 12px/1.3 var(--cac-sans); margin-bottom: 3px; }
.cac-toast-body { font: 11px/1.5 var(--cac-mono); color: #9fd8ec; word-break: break-word; }

.cac-chips { position: absolute; left: 0; bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 3; pointer-events: none; }
.cac-chips span {
  font: 450 12px/1 var(--cac-sans); padding: 5px 8px; border-radius: 6px;
  color: var(--cac-faint); border: 1px solid var(--cac-rule); background: rgba(255, 255, 255, 0.6);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cac-chips span.cac-chip-on { background: var(--cac-ink); color: #fff; border-color: var(--cac-ink); }
.cac-hint {
  position: absolute; right: 0; top: 0; z-index: 3; pointer-events: none; max-width: 100%;
  font: 450 12px/18px var(--cac-sans); color: var(--cac-muted); text-align: right;
}
.cac-hint.cac-hint-zoom { color: var(--cac-text-2); }

/* the agent panel: a card like the page's code blocks */
.cac-panel {
  position: relative; flex: 0 0 clamp(280px, 34%, 400px); min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cac-card); border: 1px solid var(--cac-rule); border-radius: 12px;
  color: var(--cac-ink); font: 12px/19px var(--cac-mono);
}
.cac-panel-head {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px 6px;
  font: 450 12px/18px var(--cac-sans); color: var(--cac-muted);
}
.cac-pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--cac-accent); }
.cac-log {
  flex: 1 1 auto; overflow: hidden; padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 9px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.cac-line { white-space: pre-wrap; word-break: break-word; }
.cac-meta { color: var(--cac-muted); }
.cac-user { color: var(--cac-ink); }
.cac-dim { color: var(--cac-muted); }
.cac-bullet { color: var(--cac-ink); }
.cac-dim .cac-bullet { color: var(--cac-faint); }
.cac-ok { color: #3f9a5a; }
.cac-tool-out { color: var(--cac-muted); padding-left: 14px; font-size: 11px; }
.cac-thinking { color: var(--cac-muted); }
.cac-spin { display: inline-block; width: 1.2em; color: var(--cac-accent); }
.cac-think-t { color: var(--cac-faint); }
/* pasted references read like the page's inline code */
.cac-ref { color: var(--cac-text-2); background: var(--cac-well); border-radius: 4px; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cac-input {
  margin: 6px 12px 4px; padding: 8px 10px; border: 1px solid var(--cac-rule); border-radius: 8px; background: #fafafa;
  color: var(--cac-ink); max-height: 46%; overflow: hidden; word-break: break-word; transition: border-color 0.2s;
}
.cac-input.cac-input-active { border-color: var(--cac-faint); }
.cac-prompt { color: var(--cac-muted); margin-right: 6px; }
.cac-caret {
  display: inline-block; width: 7px; height: 13px; margin-left: 1px; vertical-align: -2px;
  background: var(--cac-ink); animation: cac-blink 1s steps(1) infinite;
}
.cac-shortcuts { padding: 0 16px 12px; color: var(--cac-faint); font: 450 11px/16px var(--cac-sans); }
.cac-keycap {
  position: absolute; right: 16px; bottom: 64px; z-index: 5; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 10px 12px 8px; background: var(--cac-card); border: 1px solid var(--cac-rule); border-radius: 10px;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.25);
}
.cac-keys { display: flex; gap: 6px; }
.cac-keycap kbd {
  min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  background: var(--cac-well); border: 1px solid var(--cac-well-2); border-bottom-width: 3px; color: var(--cac-ink);
  font: 550 14px var(--cac-sans);
}
.cac-keylabel { font: 450 11px var(--cac-sans); color: var(--cac-muted); }
.cac-key-press kbd { animation: cac-press 0.33s ease-out; }

.cac-ring {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 19;
  border: 2.5px solid var(--cac-accent); border-radius: 50%; opacity: 0; pointer-events: none;
}
.cac-ring.cac-ring-on { animation: cac-ring 0.65s ease-out; }
.cac-vcursor { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; margin: -2px 0 0 -3px; }
.cac-vcursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.cac-play {
  position: absolute; left: 0; top: 46px; z-index: 8; cursor: pointer;
  font: 550 13px var(--cac-sans); color: #fff; background: var(--cac-ink);
  border: 0; border-radius: 8px; padding: 9px 14px;
}
.cac-play:focus-visible { outline: 2px solid var(--cac-accent); outline-offset: 2px; }
.cac-fallback video, .cac-fallback img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--cac-rule); }

/* ---------------------------------------------------------------- pane 2: primitive editor */
.cac-vcursor .cac-scrub-icon { display: none; }
.cac-vcursor.cac-vcursor-scrub svg:first-child { display: none; }
.cac-vcursor.cac-vcursor-scrub .cac-scrub-icon { display: block; margin: -6px 0 0 -10px; }
.cac-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.cac-leaders line { stroke-width: 1.4; }
.cac-leaders .good { stroke: var(--cac-ink); fill: var(--cac-ink); }
.cac-leaders .bad { stroke: var(--cac-accent); fill: var(--cac-accent); }
.cac-callout {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; white-space: nowrap;
  font: 550 12px/1 var(--cac-sans); padding: 6px 9px; border-radius: 6px; background: var(--cac-card);
  border: 1px solid var(--cac-rule); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.3); color: var(--cac-ink);
}
.cac-callout-bad { color: var(--cac-accent); border-color: rgba(224, 49, 43, 0.35); }
.cac-pe {
  position: absolute; right: 0; top: 26px; z-index: 6; width: 226px; padding: 10px 12px 10px;
  background: var(--cac-card); border: 1px solid var(--cac-rule); border-radius: 10px;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.3); font: 450 11px/1.35 var(--cac-sans); color: var(--cac-text-2);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cac-pe.cac-pe-gone { opacity: 0; transform: translateX(14px); pointer-events: none; }
.cac-pe-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--cac-ink); }
.cac-pe-head b { font-weight: 550; font-size: 12px; }
.cac-pe-badge { font-size: 10px; color: var(--cac-accent); background: #fdecea; border-radius: 4px; padding: 1px 5px; }
.cac-pe-badge.cac-pe-badge-ok { color: #3f9a5a; background: #e8f5ec; }
.cac-pe-hide { margin-left: auto; color: var(--cac-faint); }
.cac-pe-frame { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 10px; color: var(--cac-muted); }
.cac-pe-frame span { margin-right: 4px; }
.cac-pe-frame i { font-style: normal; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--cac-rule); }
.cac-pe-frame i.on { background: var(--cac-ink); color: #fff; border-color: var(--cac-ink); }
.cac-pe-empty { color: var(--cac-muted); margin: 4px 0 8px; }
.cac-pe-name { font: 450 12px/1 var(--cac-mono); color: var(--cac-ink); border: 1px solid var(--cac-faint); border-radius: 5px; padding: 5px 6px; min-height: 24px; }
.cac-pe-caret { display: inline-block; width: 1px; height: 12px; background: var(--cac-ink); vertical-align: -2px; margin-left: 1px; animation: cac-blink 1s steps(1) infinite; }
.cac-pe-sub { font-size: 10px; color: var(--cac-muted); margin: 3px 0 6px; }
.cac-pe-label { font-size: 9.5px; letter-spacing: 0.02em; color: var(--cac-muted); margin: 6px 0 3px; }
.cac-pe-xyz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cac-pe-xyz span { display: flex; align-items: center; gap: 4px; color: var(--cac-faint); font-size: 10px; }
.cac-pe-xyz b {
  flex: 1; font: 450 11px/1 var(--cac-mono); color: var(--cac-ink); text-align: right; padding: 4px 5px;
  background: var(--cac-well); border-radius: 4px; transition: background 0.2s; cursor: ew-resize;
}
.cac-pe-xyz b.cac-pe-active { background: #fde9d6; }
.cac-pe-del { display: table; color: var(--cac-accent); margin: 8px 0 2px; } /* shrink to the label so the click lands on it */
.cac-pe-add { display: inline-block; margin: 8px 0 2px; padding: 4px 8px; border: 1px solid var(--cac-rule); border-radius: 6px; color: var(--cac-ink); }
.cac-pe-edits { font: 450 10.5px/1.5 var(--cac-mono); color: var(--cac-text-2); min-height: 4px; }
.cac-pe-edits .cac-pe-cube { color: #c46a17; }
.cac-pe-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 10.5px; color: var(--cac-muted); }
.cac-pe-save { color: #fff; background: var(--cac-ink); border-radius: 6px; padding: 4px 8px; }
.cac-pe-revert { color: var(--cac-accent); }
.cac-pe-note { font-size: 9.5px; color: var(--cac-faint); margin-top: 6px; }
.cac-pe-saved { font-size: 10px; color: #3f9a5a; margin-top: 4px; }
.cac-pane-editor .cac-body { height: clamp(400px, 46vw, 580px); }

/* ---------------------------------------------------------------- pane 3: hierarchical notes */
.cac-nt-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; padding-top: 14px; height: clamp(420px, 40vw, 520px); }
.cac-nt-tree, .cac-nt-preview { background: var(--cac-card); border: 1px solid var(--cac-rule); border-radius: 12px; overflow: auto; }
.cac-nt-tree { position: relative; padding: 14px 16px; font: 450 12.5px/22px var(--cac-mono); }
.cac-nt-row { display: flex; align-items: center; width: max-content; max-width: 100%; border-radius: 4px; cursor: pointer; outline: none; padding-right: 6px; transition: background 0.15s, color 0.15s; }
.cac-nt-row:hover, .cac-nt-row:focus-visible { background: var(--cac-well); }
.cac-nt-elbow { color: var(--cac-faint); width: 14px; flex: none; }
.cac-nt-dir .cac-nt-name { color: var(--cac-ink); font-weight: 550; }
.cac-nt-file .cac-nt-name { color: var(--cac-text-2); }
.cac-nt-dir:not(.cac-nt-open) .cac-nt-name::after { content: " …"; color: var(--cac-faint); font-weight: 450; }
.cac-nt-row.cac-nt-mark { background: #fdecea; }
.cac-nt-row.cac-nt-mark .cac-nt-name { color: var(--cac-accent); }
.cac-nt-row.cac-nt-shown .cac-nt-name { color: var(--cac-accent); }
.cac-nt-row.cac-nt-pinned { background: #fdecea; }
.cac-nt-tag {
  position: absolute; left: 190px; z-index: 2; white-space: nowrap; pointer-events: none;
  font: 550 11px/1 var(--cac-sans); color: #fff; background: var(--cac-accent); border-radius: 5px; padding: 5px 8px;
}
.cac-nt-preview { padding: 14px 18px 18px; display: flex; flex-direction: column; min-height: 0; }
.cac-nt-path { flex: none; font: 450 11.5px var(--cac-mono); color: var(--cac-accent); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--cac-rule); }
.cac-nt-doc { flex: 1 1 auto; overflow: auto; font: 450 12.5px/1.6 var(--cac-mono); color: var(--cac-ink); }
.cac-nt-doc h3, .cac-nt-doc h4, .cac-nt-doc h5 { font: 550 12.5px/1.5 var(--cac-mono); margin: 12px 0 4px; }
.cac-nt-doc h3:first-child { margin-top: 0; }
.cac-nt-doc p { margin: 0 0 6px; color: var(--cac-text-2); }
.cac-nt-li { color: var(--cac-text-2); text-indent: -12px; }
.cac-nt-doc code { font: inherit; background: var(--cac-well); border-radius: 4px; padding: 0 3px; color: var(--cac-ink); }
.cac-nt-doc pre { margin: 6px 0; padding: 8px 10px; background: #fafafa; border: 1px solid var(--cac-rule); border-radius: 6px; overflow-x: auto; font: 450 11.5px/1.5 var(--cac-mono); color: var(--cac-text-2); }
.cac-nt-doc pre.cac-nt-code { border: 0; background: none; padding: 0; margin: 0; color: var(--cac-ink); }

/* ---------------------------------------------------------------- pane 4: multi-agent */
.cac-ma-body { display: grid; grid-template-columns: 206px minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding-top: 14px; height: clamp(460px, 42vw, 580px); }
.cac-ma-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cac-ma-stage {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; cursor: pointer; outline: none;
  background: var(--cac-card); border: 1px solid var(--cac-rule); border-radius: 10px; transition: background 0.25s, border-color 0.25s;
}
.cac-ma-stage:hover, .cac-ma-stage:focus-visible { border-color: var(--cac-faint); }
.cac-ma-stage b { font: 550 11px/1.3 var(--cac-mono); color: var(--cac-ink); white-space: nowrap; }
.cac-ma-stage small { font: 450 11px/1.35 var(--cac-sans); color: var(--cac-muted); }
.cac-ma-n { font: italic 400 14px/1 var(--cac-serif); color: var(--cac-muted); }
.cac-ma-state { position: absolute; right: 10px; top: 10px; font: 450 10.5px var(--cac-sans); color: #3f9a5a; }
.cac-ma-stage.cac-ma-on { background: #fdecea; border-color: rgba(224, 49, 43, 0.45); }
.cac-ma-stage.cac-ma-on .cac-ma-n { color: var(--cac-accent); }
.cac-ma-stage.cac-ma-on::after { content: ""; position: absolute; right: 12px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--cac-accent); }
.cac-ma-arrow { flex: 1 1 auto; min-height: 14px; display: flex; justify-content: center; }
.cac-ma-arrow i { width: 1px; background: var(--cac-faint); position: relative; }
.cac-ma-arrow i::after { content: ""; position: absolute; left: -4px; bottom: 0; border: 4px solid transparent; border-top-color: var(--cac-faint); border-bottom: 0; }
.cac-ma-arrow.cac-ma-arrow-done i, .cac-ma-arrow.cac-ma-arrow-pulse i { background: var(--cac-accent); }
.cac-ma-arrow.cac-ma-arrow-done i::after, .cac-ma-arrow.cac-ma-arrow-pulse i::after { border-top-color: var(--cac-accent); }
.cac-ma-arrow.cac-ma-arrow-pulse i { animation: cac-pulse 0.65s ease-in-out infinite alternate; }
.cac-ma-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; min-width: 0; }
.cac-ma-shot { position: relative; flex: none; max-width: 100%; border-radius: 8px; overflow: hidden; background: #0b0b0c; border: 1px solid var(--cac-rule); }
.cac-ma-shot video, .cac-ma-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cac-ma-label {
  position: absolute; left: 10px; top: 10px; font: 550 10.5px/1 var(--cac-mono); padding: 4px 7px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.92); color: var(--cac-ink);
}
.cac-ma-dark .cac-ma-label { background: rgba(23, 23, 23, 0.85); color: #fff; }
.cac-ma-note { position: absolute; right: 10px; bottom: 10px; font: 450 10.5px var(--cac-sans); color: #fff; background: rgba(0, 0, 0, 0.55); padding: 3px 6px; border-radius: 4px; }
.cac-ma-chat { flex: none; }
.cac-ma-tabs { flex: none; display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--cac-rule); overflow-x: auto; scrollbar-width: none; }
.cac-ma-tab {
  flex: none; display: flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer;
  font: 450 11px/1 var(--cac-mono); color: var(--cac-muted); padding: 7px 8px; border-radius: 6px 6px 0 0;
}
.cac-ma-tab:hover { color: var(--cac-ink); }
.cac-ma-tab.cac-ma-tab-on { color: var(--cac-ink); background: var(--cac-well); }
.cac-ma-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cac-faint); }
.cac-ma-tab-on .cac-ma-dot { background: var(--cac-accent); }
.cac-ma-tab.cac-ma-ping .cac-ma-dot { background: var(--cac-accent); animation: cac-pulse 0.6s ease-in-out infinite alternate; }
.cac-ma-cwd { flex: none; font: 450 11px var(--cac-mono); }
.cac-ma-sent { color: var(--cac-accent); font-size: 11px; }
.cac-ma-chat .cac-input { margin-bottom: 12px; }

@keyframes cac-pulse { from { opacity: 1; } to { opacity: 0.25; } }
/* ---------------------------------------------------------------- pane 5: whole-arm build */
.cac-ab-step {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  font: italic 400 15px/18px var(--cac-serif); color: var(--cac-text-2);
}
.cac-ab-beats { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 0; }
.cac-ab-beat {
  flex: none; display: flex; align-items: baseline; gap: 5px; cursor: pointer; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  font: 450 11.5px/1 var(--cac-sans); color: var(--cac-muted); background: var(--cac-card); border: 1px solid var(--cac-rule); border-radius: 999px; padding: 5px 10px;
}
.cac-ab-beat span { font: italic 400 13px/1 var(--cac-serif); color: var(--cac-faint); }
.cac-ab-beat:hover { color: var(--cac-ink); border-color: var(--cac-faint); }
.cac-ab-beat.cac-ab-done span { color: #3f9a5a; }
.cac-ab-beat.cac-ab-on { color: var(--cac-ink); border-color: rgba(224, 49, 43, 0.45); background: #fdecea; }
.cac-ab-beat.cac-ab-on span { color: var(--cac-accent); }
.cac-ab-keys { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; display: flex; gap: 6px; pointer-events: none; }
.cac-ab-keys kbd {
  min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 7px; background: var(--cac-card);
  border: 1px solid var(--cac-well-2); border-bottom-width: 3px; color: var(--cac-ink); font: 550 14px var(--cac-sans); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.3);
}
.cac-pane-armbuild .cac-pe { top: 24px; }
.cac-pane-armbuild .cac-play { top: 96px; }
.cac-vcursor.cac-vcursor-grab svg { transform: scale(0.88); transform-origin: 3px 2px; }

/* ---------------------------------------------------------------- gallery: CAD | real */
.cac-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px 18px; }
.cac-gal-card { margin: 0; min-width: 0; }
.cac-gal-pair {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--cac-rule); background: #f4f4f5;
}
.cac-gal-cad { position: relative; min-width: 0; }
.cac-gal-cad canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.cac-gal-cad canvas:active { cursor: grabbing; }
.cac-gal-real { position: relative; min-width: 0; border-left: 3px solid #fff; }
.cac-gal-real img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cac-gal-tag {
  position: absolute; z-index: 1; left: 8px; bottom: 8px; pointer-events: none; font: 450 10.5px/1 var(--cac-sans); color: var(--cac-muted);
  background: rgba(255, 255, 255, 0.8); padding: 3px 6px; border-radius: 4px;
}
.cac-gal-tag-real { color: var(--cac-ink); }
.cac-gal-card figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 0; }
.cac-gal-name { font: 550 13px/1.35 var(--cac-sans); color: var(--cac-ink); }
.cac-gal-desc { font: 450 12.5px/1.45 var(--cac-sans); color: var(--cac-muted); white-space: pre-line; }
.cac-gal-desc:empty { display: none; }

@keyframes cac-blink { 50% { opacity: 0; } }
@keyframes cac-ring { 0% { transform: scale(0.35); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes cac-press { 0% { transform: translateY(0); } 40% { transform: translateY(2px); background: var(--cac-well-2); } 100% { transform: translateY(0); } }

@media (max-width: 760px) {
  .cac-body { flex-direction: column; height: auto; gap: 12px; }
  .cac-viewer { height: 300px; flex: none; }
  .cac-panel { flex: none; height: 250px; font-size: 11px; line-height: 17px; }
  .cac-url { display: none; }
  .cac-hint { display: none; }
  .cac-keycap { bottom: 50px; }
  .cac-chips span { font-size: 11px; padding: 4px 6px; }
  .cac-pane-editor .cac-viewer { height: 360px; }
  .cac-nt-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cac-nt-tree { max-height: 300px; }
  .cac-nt-preview { height: 320px; }
  .cac-nt-tag { left: auto; right: 10px; }
  .cac-ma-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cac-ma-flow { flex-direction: row; gap: 4px; overflow-x: auto; }
  .cac-ma-stage { flex: 1 0 120px; padding: 8px; }
  .cac-ma-stage small { display: none; }
  .cac-ma-arrow { display: none; }
  .cac-ma-media { height: 300px; }
  .cac-ma-chat { height: 300px; }
  .cac-pe { transform: scale(0.74); transform-origin: top right; top: 4px; width: 210px; }
  .cac-pe.cac-pe-gone { transform: scale(0.74) translateX(14px); }
  .cac-pe-frame, .cac-pe [data-group="rot"], .cac-pe-note, .cac-pe-hide { display: none !important; }
}
@media (pointer: coarse) {
  /* phones: vertical swipes scroll the page, horizontal drags orbit */
  .cac-canvas { touch-action: pan-y !important; } /* beats OrbitControls' inline touch-action:none */
}
@media (prefers-reduced-motion: reduce) {
  .cac-caret { animation: none; }
}