/* Agent / Automation v2 — cinematic GSAP/SVG scenes */
.agent-cinema {
  --cinema-accent:#9b7cff;
  --cinema-pink:#c9658c;
  --cinema-orange:#d98245;
  --cinema-green:#6f8e72;
  margin-top:clamp(76px,9vw,132px);
}
.agent-cinema-head {
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);
  gap:clamp(24px,4vw,72px);
  align-items:start;
  padding-bottom:clamp(28px,3vw,42px);
  border-bottom:1px solid var(--line);
}
.agent-cinema-eyebrow,
.agent-film-kicker,
.agent-film-class,
.agent-film-status,
.agent-film-control,
.scene-mono {
  font-family:var(--mono);
  text-transform:uppercase;
}
.agent-cinema-eyebrow {
  font-size:9px;
  letter-spacing:.15em;
  line-height:1.5;
  color:var(--cinema-accent);
}
.agent-cinema-head h5 {
  max-width:18ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(36px,4.6vw,66px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.032em;
  color:var(--ink);
}
.agent-cinema-head p {
  max-width:68ch;
  margin:16px 0 0;
  font-size:12.5px;
  line-height:1.82;
  color:var(--ink-2);
}
.agent-cinema-grid {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);
  gap:clamp(18px,2.5vw,30px);
  padding-top:clamp(30px,4vw,56px);
}
.agent-film {
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:clamp(22px,2.6vw,34px);
}
.agent-film--hero,
.agent-film--wide {
  grid-column:1 / -1;
}
.agent-film--validation {
  grid-column:1 / -1;
}
.agent-film--unsloth {
  grid-column:1 / -1;
}
.agent-film-copy {
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);
  gap:clamp(18px,3vw,52px);
  align-items:start;
  margin-bottom:18px;
}
.agent-film-kicker {
  display:block;
  font-size:8px;
  letter-spacing:.13em;
  line-height:1.5;
  color:var(--cinema-accent);
}
.agent-film-copy h6 {
  max-width:24ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(27px,3vw,44px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.024em;
  color:var(--ink);
}
.agent-film-copy p {
  max-width:64ch;
  margin:12px 0 0;
  font-size:11.5px;
  line-height:1.75;
  color:var(--ink-2);
}
.agent-film-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin-top:14px;
}
.agent-film-class {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border:1px solid color-mix(in srgb,var(--cinema-accent) 34%,var(--line));
  border-radius:999px;
  font-size:7px;
  letter-spacing:.1em;
  color:var(--ink-3);
}
.agent-film-note {
  font-family:var(--mono);
  font-size:7.5px;
  line-height:1.55;
  letter-spacing:.04em;
  color:var(--ink-4);
}
.agent-film-stage {
  position:relative;
  isolation:isolate;
  min-height:420px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb,var(--cinema-accent) 10%,transparent), transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--paper) 96%,var(--cinema-accent) 4%),var(--paper));
  box-shadow:0 32px 80px -64px rgba(62,43,76,.7);
}
.agent-film--hero .agent-film-stage { aspect-ratio:16 / 9; min-height:460px; }
.agent-film--hermes .agent-film-stage { aspect-ratio:4 / 3; min-height:430px; }
.agent-film--mcp .agent-film-stage { aspect-ratio:5 / 6; min-height:430px; }
.agent-film--validation .agent-film-stage { aspect-ratio:16 / 7; min-height:360px; }
.agent-film--unsloth .agent-film-stage { aspect-ratio:16 / 10; min-height:440px; }
.agent-film-stage::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 70%,transparent);
  z-index:60;
}
.scene-camera {
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  will-change:transform;
}
.scene-grid {
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg,var(--line) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 86%);
}
.scene-paper {
  background:color-mix(in srgb,var(--paper) 97%,white 3%);
  border:1px solid var(--line-2);
  box-shadow:0 20px 44px -30px rgba(34,28,43,.45);
}
.scene-mono {
  font-size:7px;
  line-height:1.4;
  letter-spacing:.1em;
  color:var(--ink-3);
}
.scene-screen {
  border:1px solid color-mix(in srgb,var(--cinema-accent) 20%,var(--line));
  background:color-mix(in srgb,var(--paper) 91%,var(--cinema-accent) 9%);
  box-shadow:0 20px 44px -34px rgba(65,42,86,.5);
}
.scene-line {
  height:5px;
  border-radius:99px;
  background:color-mix(in srgb,var(--ink-3) 38%,transparent);
}
.agent-film-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
  padding-top:12px;
}
.agent-film-status {
  max-width:68ch;
  min-height:2.8em;
  font-size:7.5px;
  line-height:1.55;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.agent-film-controls {
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.agent-film-control {
  min-width:44px;
  min-height:44px;
  padding:0 13px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font-size:7.5px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:transform 220ms var(--ease),border-color 220ms var(--ease),background 220ms var(--ease);
}
.agent-film-control:hover,
.agent-film-control:focus-visible {
  border-color:var(--cinema-accent);
  background:color-mix(in srgb,var(--cinema-accent) 7%,transparent);
}
.agent-film-control:focus-visible {
  outline:2px solid var(--cinema-accent);
  outline-offset:3px;
}
.agent-film-control:active { transform:translateY(1px); }
.agent-film-control:disabled { cursor:default; opacity:.48; }
.agent-film.is-playing .agent-film-stage {
  border-color:color-mix(in srgb,var(--cinema-accent) 36%,var(--line));
}

/* Scene 01 — Orchestration Studio */
.orch-desk {
  position:absolute;
  left:4%;
  right:4%;
  bottom:4%;
  height:31%;
  border-radius:18px 18px 28px 28px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 92%,#c9b8df 8%),color-mix(in srgb,var(--paper) 78%,#bfa8d9 22%));
  border:1px solid var(--line);
  box-shadow:0 32px 60px -42px rgba(48,34,61,.55);
}
.orch-monitor {
  position:absolute;
  left:34%;
  top:18%;
  width:32%;
  height:47%;
  border-radius:16px;
  padding:12px;
}
.orch-monitor::after {
  content:"";
  position:absolute;
  left:45%;
  top:100%;
  width:10%;
  height:35%;
  border-left:2px solid var(--line-2);
  border-right:2px solid var(--line-2);
}
.orch-monitor-bar,
.orch-browser-bar {
  display:flex;
  align-items:center;
  gap:5px;
  height:21px;
  border-bottom:1px solid var(--line);
}
.orch-monitor-dot,
.orch-browser-dot {
  width:5px;height:5px;border-radius:50%;background:var(--ink-4);
}
.orch-monitor-title {
  margin-left:auto;
  font-family:var(--mono);
  font-size:6px;
  letter-spacing:.08em;
  color:var(--ink-4);
}
.orch-monitor-core {
  position:absolute;
  left:50%;
  top:51%;
  width:64px;
  height:64px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--cinema-accent) 55%,var(--line));
  background:radial-gradient(circle,color-mix(in srgb,var(--cinema-accent) 26%,var(--paper)),var(--paper));
  box-shadow:0 0 0 12px color-mix(in srgb,var(--cinema-accent) 6%,transparent);
}
.orch-monitor-core::before,
.orch-monitor-core::after {
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid color-mix(in srgb,var(--cinema-accent) 38%,transparent);
  border-radius:36% 64% 46% 54%;
  transform:rotate(35deg);
}
.orch-monitor-core::after { inset:18px; transform:rotate(-20deg); }
.orch-brief {
  position:absolute;
  left:8%;
  top:23%;
  width:20%;
  min-height:42%;
  padding:18px 16px;
  border-radius:4px 12px 4px 4px;
  transform-origin:70% 50%;
}
.orch-brief::after {
  content:"";
  position:absolute;
  right:0;top:0;
  border-style:solid;
  border-width:0 0 24px 24px;
  border-color:transparent transparent color-mix(in srgb,var(--cinema-accent) 12%,var(--paper)) transparent;
}
.orch-brief h7 {
  display:block;
  margin:20px 0 18px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--ink);
}
.orch-brief-item {
  display:flex;
  align-items:center;
  gap:8px;
  margin:9px 0;
  font-family:var(--mono);
  font-size:7px;
  color:var(--ink-2);
}
.orch-brief-item::before {
  content:"";
  width:7px;height:7px;border-radius:50%;
  border:1px solid var(--cinema-accent);
}
.orch-token {
  position:absolute;
  z-index:8;
  padding:7px 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--cinema-accent) 45%,var(--line));
  background:var(--paper);
  font-family:var(--mono);
  font-size:6px;
  letter-spacing:.07em;
  color:var(--ink-2);
}
.orch-token.t1 { left:40%;top:37%; }
.orch-token.t2 { left:52%;top:43%; }
.orch-token.t3 { left:43%;top:52%; }
.orch-code {
  position:absolute;
  left:12%;
  bottom:8%;
  width:31%;
  height:30%;
  border-radius:12px;
  padding:10px;
  z-index:10;
}
.orch-code-inner {
  display:grid;
  grid-template-columns:30% 1fr;
  height:calc(100% - 22px);
  padding-top:8px;
}
.orch-filetree {
  border-right:1px solid var(--line);
  padding-right:8px;
}
.orch-file {
  margin:6px 0;
  font-family:var(--mono);
  font-size:6px;
  color:var(--ink-4);
}
.orch-file.is-current {
  color:var(--cinema-accent);
}
.orch-code-lines { padding-left:10px; }
.orch-code-lines .scene-line { margin:6px 0; transform-origin:left center; }
.orch-browser {
  position:absolute;
  right:6%;
  top:21%;
  width:28%;
  height:50%;
  border-radius:14px;
  padding:10px;
  z-index:9;
}
.orch-browser-view {
  position:relative;
  height:calc(100% - 22px);
  overflow:hidden;
  border-radius:8px;
  background:linear-gradient(135deg,#f8f5fb,#e6ddf3);
  transform-origin:center;
}
.orch-browser-view::before {
  content:"AI LAB";
  position:absolute;
  left:12%;top:16%;
  font-family:var(--serif);
  font-size:28px;
  color:#282332;
}
.orch-browser-view::after {
  content:"ComfyUI   Agent / Automation";
  position:absolute;
  left:12%;top:46%;
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.08em;
  color:#655a75;
}
.orch-browser.is-dark .orch-browser-view {
  background:linear-gradient(135deg,#23212a,#36303f);
}
.orch-browser.is-dark .orch-browser-view::before { color:#eee8f6; }
.orch-browser.is-dark .orch-browser-view::after { color:#b7a8ca; }
.orch-signal {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.orch-signal path {
  fill:none;
  stroke:var(--cinema-accent);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-dasharray:7 6;
  opacity:.6;
}
.orch-qa {
  position:absolute;
  right:7%;
  bottom:7%;
  z-index:18;
  width:25%;
  padding:14px;
  border-radius:11px;
}
.orch-qa-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:6px 0;
  font-family:var(--mono);
  font-size:6px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.orch-qa-row b { color:var(--cinema-green);font-weight:500; }
.orch-validated {
  display:inline-block;
  margin-top:9px;
  padding:5px 7px;
  border:1px solid var(--cinema-accent);
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.12em;
  color:var(--cinema-accent);
  transform-origin:center;
}

/* Scene 02 — Hermes production room */
.hermes-floor {
  position:absolute;
  inset:10% 7% 8%;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(30deg,transparent 48%,var(--line) 49%,var(--line) 51%,transparent 52%) 0 0/28px 28px,
    linear-gradient(150deg,transparent 48%,var(--line) 49%,var(--line) 51%,transparent 52%) 0 0/28px 28px,
    color-mix(in srgb,var(--paper) 96%,var(--cinema-pink) 4%);
  transform:perspective(900px) rotateX(2deg);
}
.hermes-table {
  position:absolute;
  left:42%;
  top:39%;
  width:16%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--cinema-pink) 46%,var(--line));
  background:var(--paper);
  box-shadow:0 18px 34px -25px rgba(48,36,58,.45);
}
.hermes-station {
  position:absolute;
  width:26%;
  min-height:26%;
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--paper) 95%,var(--cinema-pink) 5%);
  box-shadow:0 16px 34px -28px rgba(46,32,55,.55);
}
.hermes-station.s1 { left:9%;top:15%; }
.hermes-station.s2 { right:9%;top:15%; }
.hermes-station.s3 { left:9%;bottom:13%; }
.hermes-station.s4 { right:9%;bottom:13%; }
.hermes-station-label {
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.12em;
  color:var(--cinema-pink);
}
.hermes-screen {
  margin-top:10px;
  height:58px;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 89%,#9a7bac 11%);
}
.hermes-risk {
  display:inline-flex;
  margin:3px 3px 0 0;
  padding:3px 5px;
  border:1px solid var(--line-2);
  border-radius:999px;
  font-family:var(--mono);
  font-size:5px;
  color:var(--ink-3);
}
.hermes-timeline {
  display:grid;
  gap:4px;
  margin-top:7px;
}
.hermes-track {
  position:relative;
  height:7px;
  border-radius:2px;
  background:color-mix(in srgb,var(--cinema-accent) 12%,var(--paper));
  overflow:hidden;
}
.hermes-holdbar {
  position:absolute;
  left:20%;
  top:0;
  bottom:0;
  width:25%;
  background:color-mix(in srgb,var(--cinema-accent) 58%,var(--paper));
  transform-origin:left center;
}
.hermes-sheet {
  position:absolute;
  z-index:20;
  left:18%;
  top:31%;
  width:19%;
  min-height:22%;
  padding:13px 11px;
  border-radius:4px;
  transform:rotate(-5deg);
}
.hermes-sheet-title {
  min-width:0;
  margin-top:14px;
  font-family:var(--serif);
  font-size:16px;
  line-height:1.05;
  overflow-wrap:anywhere;
  color:var(--ink);
}
.hermes-sheet-lines .scene-line { margin-top:5px;height:3px; }
.hermes-stamp {
  position:absolute;
  z-index:30;
  right:15%;
  bottom:24%;
  padding:8px 10px;
  border:2px solid var(--cinema-pink);
  transform:rotate(-12deg);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--cinema-pink);
}
.hermes-pass { color:var(--cinema-green);border-color:var(--cinema-green);right:13%;bottom:11%; }

/* Scene 03 — MCP patch bay */
.mcp-panel {
  position:absolute;
  inset:7%;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(155deg,color-mix(in srgb,var(--paper) 91%,#d2c3df 9%),var(--paper));
  box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--paper) 80%,transparent);
}
.mcp-router {
  position:absolute;
  left:50%;
  top:50%;
  width:112px;
  height:112px;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--cinema-orange) 40%,var(--line));
  border-radius:50%;
  background:radial-gradient(circle,var(--paper) 0 48%,color-mix(in srgb,var(--cinema-orange) 9%,var(--paper)) 49% 100%);
  z-index:10;
}
.mcp-knob {
  position:absolute;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  transform:translate(-50%,-50%) rotate(0deg);
  border-radius:50%;
  background:var(--ink);
}
.mcp-knob::after {
  content:"";
  position:absolute;
  left:50%;top:3px;
  width:2px;height:15px;
  background:var(--paper);
}
.mcp-router-label {
  position:absolute;
  left:50%;bottom:10px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:6px;
  color:var(--ink-3);
}
.mcp-port {
  position:absolute;
  width:29%;
  min-height:18%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.mcp-port.p1 { left:7%;top:10%; }
.mcp-port.p2 { right:7%;top:10%; }
.mcp-port.p3 { left:7%;top:41%; }
.mcp-port.p4 { right:7%;top:41%; }
.mcp-port.p5 { left:35.5%;bottom:7%; }
.mcp-port-label {
  font-family:var(--mono);
  font-size:6px;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.mcp-mini {
  margin-top:7px;
  height:38px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 92%,var(--cinema-orange) 8%);
}
.mcp-mini-line {
  width:70%;
  height:3px;
  margin:6px;
  background:var(--ink-4);
  border-radius:3px;
}
.mcp-port.is-live {
  border-color:color-mix(in srgb,var(--cinema-orange) 65%,var(--line));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--cinema-orange) 7%,transparent);
}
.mcp-request {
  position:absolute;
  z-index:20;
  left:50%;
  top:5%;
  width:46%;
  transform:translateX(-50%);
  padding:9px 12px;
  border-radius:10px;
  text-align:center;
  font-family:var(--mono);
  font-size:6px;
  line-height:1.5;
  color:var(--ink-2);
}
.mcp-cables {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
.mcp-cables path {
  fill:none;
  stroke:color-mix(in srgb,var(--cinema-orange) 72%,var(--line));
  stroke-width:2;
  stroke-linecap:round;
  opacity:.8;
}

/* Scene 04 — Validation X-Ray */
.qa-browser {
  position:absolute;
  left:8%;
  top:12%;
  width:58%;
  height:72%;
  border-radius:16px;
  padding:11px;
}
.qa-browser-view {
  position:relative;
  height:calc(100% - 22px);
  overflow:hidden;
  border-radius:9px;
  background:linear-gradient(135deg,#f3eff8,#ddd2ef);
}
.qa-browser-view::before {
  content:"Selected Works";
  position:absolute;
  left:8%;top:11%;
  font-family:var(--serif);
  font-size:30px;
  color:#292431;
}
.qa-card-a,
.qa-card-b {
  position:absolute;
  top:40%;
  width:35%;
  height:42%;
  border-radius:9px;
  background:#f8f5fa;
  border:1px solid rgba(35,29,44,.08);
}
.qa-card-a { left:8%; }
.qa-card-b { right:8%; overflow:hidden; }
.qa-bad-text {
  position:absolute;
  left:10%;bottom:11%;
  font-family:var(--mono);
  font-size:7px;
  color:#c5bdce;
}
.qa-cropped {
  position:absolute;
  right:-12%;
  top:20%;
  width:70%;
  height:58%;
  background:linear-gradient(135deg,#9d83ca,#f2a3ce);
}
.qa-scanner {
  position:absolute;
  z-index:25;
  left:7%;
  top:9%;
  width:60%;
  height:5px;
  background:linear-gradient(90deg,transparent,var(--cinema-pink),transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--cinema-pink) 45%,transparent);
}
.qa-pin {
  position:absolute;
  z-index:26;
  width:12px;height:12px;
  border-radius:50%;
  border:2px solid var(--cinema-pink);
  background:var(--paper);
}
.qa-pin.p1 { left:26%;top:68%; }
.qa-pin.p2 { left:56%;top:49%; }
.qa-fail {
  position:absolute;
  z-index:30;
  right:11%;
  top:18%;
  padding:9px 12px;
  border:2px solid var(--cinema-pink);
  transform:rotate(-8deg);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cinema-pink);
}
.qa-xray {
  position:absolute;
  right:5%;
  bottom:11%;
  width:33%;
  height:58%;
}
.qa-layer {
  position:absolute;
  inset:0;
  border-radius:11px;
  border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--paper) 88%,var(--cinema-accent) 12%);
}
.qa-layer.l2 { transform:translate(8px,-8px); }
.qa-layer.l3 { transform:translate(16px,-16px); }
.qa-layer.l4 { transform:translate(24px,-24px); }
.qa-layer-label {
  position:absolute;
  left:10px;top:9px;
  font-family:var(--mono);
  font-size:6px;
  color:var(--ink-3);
}
.qa-fix-strip {
  position:absolute;
  z-index:35;
  right:8%;
  bottom:10%;
  width:28%;
  padding:8px 10px;
  border:1px solid var(--cinema-accent);
  border-radius:8px;
  background:var(--paper);
  font-family:var(--mono);
  font-size:6px;
  color:var(--cinema-accent);
}
.qa-wipe {
  position:absolute;
  z-index:28;
  left:8%;
  top:12%;
  width:58%;
  height:72%;
  overflow:hidden;
  border-radius:16px;
  pointer-events:none;
}
.qa-wipe-fixed {
  position:absolute;
  inset:33px 11px 11px;
  border-radius:9px;
  background:linear-gradient(135deg,#292530,#4b3f5e);
}
.qa-wipe-fixed::before {
  content:"Selected Works";
  position:absolute;left:8%;top:10%;
  font-family:var(--serif);font-size:28px;color:#f3edf8;
}
.qa-accepted {
  position:absolute;
  z-index:40;
  right:7%;
  top:10%;
  padding:9px 11px;
  border:2px solid var(--cinema-green);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.09em;
  color:var(--cinema-green);
  transform:rotate(4deg);
}

/* Scene 05 — Unsloth workshop */
.lab-bench {
  position:absolute;
  left:5%;
  right:5%;
  bottom:7%;
  height:29%;
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 86%,#cab8e5 14%),color-mix(in srgb,var(--paper) 74%,#b9a2d9 26%));
  border:1px solid var(--line);
}
.lab-sample {
  position:absolute;
  width:13%;
  aspect-ratio:4 / 3;
  border-radius:7px;
  padding:8px;
  transform-origin:center;
}
.lab-sample::before {
  content:"";
  display:block;
  width:100%;
  height:60%;
  border-radius:4px;
  background:linear-gradient(135deg,#b5a0d6,#f0b8d7);
}
.lab-sample::after {
  content:"SAMPLE";
  display:block;
  margin-top:5px;
  font-family:var(--mono);
  font-size:5px;
  color:var(--ink-4);
}
.lab-sample.s1 { left:8%;top:18%;transform:rotate(-8deg); }
.lab-sample.s2 { left:17%;top:25%;transform:rotate(6deg); }
.lab-sample.s3 { left:11%;top:45%;transform:rotate(3deg); }
.lab-sample.s4 { left:24%;top:16%;transform:rotate(-3deg); }
.lab-model {
  position:absolute;
  left:40%;
  top:27%;
  width:21%;
  height:35%;
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--cinema-accent) 42%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,var(--paper) 86%,#a88dd1 14%),var(--paper));
  box-shadow:0 28px 50px -36px rgba(64,43,82,.65);
}
.lab-model::before {
  content:"BASE MODEL";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.08em;
  color:var(--ink-2);
}
.lab-model-light {
  position:absolute;
  inset:15%;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--cinema-accent) 35%,transparent);
}
.lab-adapter {
  position:absolute;
  z-index:14;
  left:31%;
  top:35%;
  width:13%;
  height:18%;
  border-radius:7px;
  border:1px solid var(--cinema-accent);
  background:color-mix(in srgb,var(--cinema-accent) 12%,var(--paper));
  font-family:var(--mono);
  font-size:6px;
  color:var(--cinema-accent);
  display:grid;
  place-items:center;
}
.lab-eval {
  position:absolute;
  right:9%;
  top:16%;
  width:23%;
  height:42%;
  border-radius:14px;
  padding:10px;
}
.lab-light {
  position:absolute;
  left:10%;right:10%;top:32%;height:48%;
  border-radius:8px;
  background:linear-gradient(135deg,#f6eefb,#dccff0);
}
.lab-magnifier {
  position:absolute;
  left:18%;top:38%;
  width:54px;height:54px;
  border:2px solid var(--cinema-accent);
  border-radius:50%;
}
.lab-magnifier::after {
  content:"";
  position:absolute;
  width:30px;height:3px;
  right:-23px;bottom:-11px;
  background:var(--cinema-accent);
  transform:rotate(45deg);
  transform-origin:left center;
}
.lab-drawer {
  position:absolute;
  bottom:8%;
  width:18%;
  height:13%;
  border:1px solid var(--line-2);
  border-radius:8px 8px 2px 2px;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.1em;
}
.lab-drawer.keep { right:27%;color:var(--cinema-green);border-color:color-mix(in srgb,var(--cinema-green) 55%,var(--line)); }
.lab-drawer.discard { right:7%;color:var(--cinema-pink);border-style:dashed; }
.lab-output {
  position:absolute;
  z-index:20;
  right:16%;
  top:50%;
  width:11%;
  aspect-ratio:4 / 3;
  border-radius:6px;
  border:1px solid var(--cinema-accent);
  background:linear-gradient(135deg,#d8cced,#f2bfdc);
}
.lab-research {
  position:absolute;
  left:6%;
  bottom:9%;
  z-index:30;
  max-width:27%;
  font-family:var(--mono);
  font-size:7px;
  line-height:1.55;
  letter-spacing:.08em;
  color:var(--cinema-accent);
}

/* Mobile recomposition */
@media (max-width:1100px) {
  .agent-cinema-grid { grid-template-columns:1fr; }
  .agent-film,
  .agent-film--hero,
  .agent-film--wide,
  .agent-film--validation,
  .agent-film--unsloth { grid-column:auto; }
  .agent-film--mcp .agent-film-stage { aspect-ratio:16 / 10; }
  .agent-film--validation .agent-film-stage { aspect-ratio:16 / 9; }
}
@media (max-width:760px) {
  .agent-cinema-head,
  .agent-film-copy { grid-template-columns:1fr; }
  .agent-film-stage,
  .agent-film--hero .agent-film-stage,
  .agent-film--hermes .agent-film-stage,
  .agent-film--mcp .agent-film-stage,
  .agent-film--validation .agent-film-stage,
  .agent-film--unsloth .agent-film-stage {
    aspect-ratio:auto;
    min-height:520px;
  }
  .agent-film-footer { align-items:flex-start; flex-direction:column; }
  .agent-film-controls { width:100%; }
  .agent-film-control { flex:1; }
  .orch-monitor { left:20%;top:10%;width:60%;height:34%; }
  .orch-brief { left:7%;top:48%;width:38%;min-height:35%; }
  .orch-code { left:51%;bottom:7%;width:42%;height:30%; }
  .orch-browser { right:7%;top:48%;width:42%;height:34%; }
  .orch-qa { right:7%;bottom:5%;width:42%; }
  .orch-token.t1 { left:29%;top:24%; }
  .orch-token.t2 { left:48%;top:28%; }
  .orch-token.t3 { left:39%;top:35%; }
  .hermes-floor { inset:5%; }
  .hermes-station { width:39%;min-height:21%; }
  .hermes-station.s1 { left:7%;top:8%; }
  .hermes-station.s2 { right:7%;top:8%; }
  .hermes-station.s3 { left:7%;bottom:8%; }
  .hermes-station.s4 { right:7%;bottom:8%; }
  .hermes-table { left:39%;top:40%;width:22%; }
  .hermes-sheet { width:30%;left:12%;top:36%; }
  .mcp-panel { inset:5%; }
  .mcp-port { width:35%; }
  .mcp-port.p1 { left:6%;top:12%; }
  .mcp-port.p2 { right:6%;top:12%; }
  .mcp-port.p3 { left:6%;top:56%; }
  .mcp-port.p4 { right:6%;top:56%; }
  .mcp-port.p5 { left:32.5%;bottom:5%; }
  .mcp-router { width:96px;height:96px; }
  .qa-browser { left:7%;top:8%;width:86%;height:52%; }
  .qa-scanner { left:7%;top:7%;width:86%; }
  .qa-wipe { left:7%;top:8%;width:86%;height:52%; }
  .qa-xray { left:10%;right:auto;bottom:7%;width:54%;height:29%; }
  .qa-fail { right:10%;top:62%; }
  .qa-fix-strip { right:8%;bottom:9%;width:34%; }
  .qa-accepted { right:8%;top:63%; }
  .lab-sample { width:20%; }
  .lab-sample.s1 { left:6%;top:10%; }
  .lab-sample.s2 { left:27%;top:16%; }
  .lab-sample.s3 { left:8%;top:35%; }
  .lab-sample.s4 { left:31%;top:34%; }
  .lab-model { left:54%;top:13%;width:35%;height:28%; }
  .lab-adapter { left:42%;top:23%;width:20%;height:12%; }
  .lab-eval { right:7%;top:48%;width:38%;height:28%; }
  .lab-drawer.keep { left:7%;right:auto;bottom:8%;width:28%; }
  .lab-drawer.discard { left:38%;right:auto;bottom:8%;width:28%; }
  .lab-output { right:20%;top:58%;width:17%; }
  .lab-research { left:7%;bottom:21%;max-width:40%; }
}
@media (max-width:460px) {
  .agent-film-stage,
  .agent-film--hero .agent-film-stage,
  .agent-film--hermes .agent-film-stage,
  .agent-film--mcp .agent-film-stage,
  .agent-film--validation .agent-film-stage,
  .agent-film--unsloth .agent-film-stage { min-height:500px; }
  .orch-browser-view::before { font-size:21px; }
  .orch-brief h7 { font-size:18px; }
  .qa-browser-view::before,
  .qa-wipe-fixed::before { font-size:20px; }
  .agent-film-status { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .agent-film-stage *,
  .agent-film-stage *::before,
  .agent-film-stage *::after {
    animation:none !important;
    transition:none !important;
  }
}
html[data-theme="dark"] .agent-film-stage {
  background:
    radial-gradient(circle at 78% 18%,rgba(155,124,255,.09),transparent 34%),
    linear-gradient(180deg,#211f27,#19181d);
  box-shadow:0 32px 80px -64px rgba(0,0,0,.95);
}
html[data-theme="dark"] .scene-paper,
html[data-theme="dark"] .scene-screen,
html[data-theme="dark"] .mcp-panel,
html[data-theme="dark"] .mcp-port,
html[data-theme="dark"] .hermes-station,
html[data-theme="dark"] .lab-drawer {
  background:#25222b;
}
html[data-theme="dark"] .orch-browser-view {
  filter:brightness(.85);
}
html[data-theme="dark"] .hermes-floor {
  background:
    linear-gradient(30deg,transparent 48%,rgba(255,255,255,.04) 49%,rgba(255,255,255,.04) 51%,transparent 52%) 0 0/28px 28px,
    linear-gradient(150deg,transparent 48%,rgba(255,255,255,.04) 49%,rgba(255,255,255,.04) 51%,transparent 52%) 0 0/28px 28px,
    #201e25;
}
html[data-theme="dark"] .qa-browser-view,
html[data-theme="dark"] .qa-wipe-fixed {
  filter:brightness(.78);
}