/* ============================================================
   Introducing Zara - product animation showcase
   Three compound acts, one persistent workspace per act.
   ============================================================ */

.zara-showcase{
  --z-bg:#0b0b0a;
  --z-panel:#141412;
  --z-panel-2:#1a1a17;
  --z-line:rgba(250,249,246,0.09);
  --z-line-strong:rgba(250,249,246,0.16);
  --z-text:#faf9f6;
  --z-dim:#8f8c81;
  --z-dim-2:#c8c4b8;
  --c-cyan:#3ad0d6;
  --c-blue:#5a93ea;
  --c-violet:#a78bfa;
  --c-green:#4fd08a;
  --c-amber:#f2b13f;
  --c-coral:#f0766a;
  --accent:var(--c-amber);
  --accent-glow:rgba(242,177,63,0.16);

  position:relative;
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(250,249,246,0.05), transparent 60%),
    var(--z-bg);
  color:var(--z-text);
  min-height:100svh;
  max-height:900px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(74px,9vh,116px) 0 clamp(26px,4vh,52px);
  overflow:hidden;
}
.zara-showcase-wrap{display:flex;flex-direction:column;gap:clamp(14px,2.4vh,32px);width:100%;}

/* ---------- Header ---------- */
.zara-showcase-header{max-width:none;}
.zara-showcase-header .eyebrow{color:var(--z-dim-2);margin-bottom:16px;}
.zara-showcase-header .eyebrow::before{background:var(--z-dim);}
.zara-showcase-header h2{
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.02;
  max-width:20ch;
}
.zara-showcase-copy{
  margin-top:14px;
  font-size:clamp(0.95rem,1.3vw,1.08rem);
  line-height:1.5;
  color:var(--z-dim-2);
  max-width:56ch;
}

/* ---------- Animation shell + frame ---------- */
.zara-animation-shell{height:clamp(400px,54vh,540px);}

.zara-product-frame{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,224px) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"core work" "rail rail";
  gap:1px;
  background:var(--z-line);
  border:1px solid var(--z-line-strong);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 120px -50px rgba(0,0,0,0.85),inset 0 1px 0 rgba(250,249,246,0.04);
}

/* ---------- Zone 1: Zara core (persistent, unchanged) ---------- */
.zara-core{
  grid-area:core;
  background:linear-gradient(180deg,var(--z-panel-2),var(--z-panel));
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
}
.zc-head{display:flex;align-items:center;gap:10px;}
.zc-pulse{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:zcPulse 2.4s ease-out infinite;
  transition:background .6s var(--ease);
}
@keyframes zcPulse{0%{box-shadow:0 0 0 0 var(--accent-glow);}70%{box-shadow:0 0 0 10px rgba(0,0,0,0);}100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}}
.zc-name{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:1.7rem;letter-spacing:-0.01em;}

.zc-status{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 11px;border:1px solid var(--z-line-strong);border-radius:100px;
  background:rgba(250,249,246,0.03);}
.zc-status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:zcBlink 1.6s ease-in-out infinite;transition:background .6s var(--ease);}
@keyframes zcBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.zc-status-label{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;color:var(--z-dim-2);}

.zc-obj{margin-top:2px;}
.zc-obj-k{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--z-dim);margin-bottom:8px;}
.zc-obj-v{font-size:0.9rem;line-height:1.45;color:var(--z-dim-2);}

.zc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--z-line);}
.zc-phase{font-size:0.78rem;color:var(--z-text);font-weight:500;line-height:1.3;transition:color .5s var(--ease);}
.zc-progress{position:relative;width:44px;height:44px;flex-shrink:0;}
.zc-ring{width:44px;height:44px;transform:rotate(-90deg);}
.zc-ring-bg{fill:none;stroke:var(--z-line-strong);stroke-width:2.5;}
.zc-ring-fg{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:119.38;transition:stroke-dashoffset .7s var(--ease),stroke .6s var(--ease);}
.zc-step{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:0.66rem;color:var(--z-dim-2);}
.zc-step b{color:var(--z-text);}
.zc-step i{margin:0 1px;color:var(--z-dim);font-style:normal;}

/* ---------- Zone 2: active workspace ---------- */
.zara-active-workspace{grid-area:work;background:var(--z-panel);position:relative;overflow:hidden;}
.zara-active-workspace::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 85% at 50% -12%,var(--accent-glow),transparent 58%);
  transition:background .8s var(--ease);
}
.zw-inner{position:absolute;inset:0;}

/* Three compound act containers, crossfaded only at act boundaries. */
.zw-act{
  position:absolute;inset:0;
  padding:clamp(20px,3.2vh,34px) clamp(22px,3vw,38px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transform:scale(0.99);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s var(--ease);
}
.zw-act.active{opacity:1;visibility:visible;transform:none;}

/* Shared reveal primitive: sub-step content builds in place. */
.zw-r{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);}
.zw-r.is-in{opacity:1;transform:none;}
.zw-r.is-out{opacity:0;transform:translateX(-14px);pointer-events:none;}

.zw-title{
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  font-weight:600;letter-spacing:-0.01em;
  margin-bottom:clamp(12px,2vh,20px);
  color:var(--z-text);
  transition:color .4s var(--ease);
}

/* ============================================================
   ACT I: Plan + Search  (objective persists, plan compresses)
   ============================================================ */
.zw-act1{gap:clamp(8px,1.3vh,14px);padding-top:clamp(16px,2.4vh,26px);padding-bottom:clamp(14px,2vh,22px);}
.zw-act1 .zw-title{margin-bottom:clamp(6px,1vh,10px);}
.zw-act1 .zp-obj-v{font-size:clamp(0.92rem,1.25vw,1.04rem);line-height:1.35;}
.zw-act1 .zp-obj-k{margin-bottom:5px;}
.a1-obj{margin:0;}
.a1-plan{transition:transform .5s var(--ease),opacity .5s var(--ease);transform-origin:top left;}
.a1-plan.compact{flex-direction:row;flex-wrap:wrap;gap:8px 10px;}
.a1-plan.compact li{font-size:0.8rem;color:var(--z-dim-2);gap:9px;}
.a1-plan.compact .zp-step-n{
  width:19px;height:19px;font-size:0;
  background:rgba(79,208,138,0.13);border-color:rgba(79,208,138,0.4);color:var(--c-green);
  position:relative;
}
.a1-plan.compact .zp-step-n::after{
  content:"";position:absolute;left:6.5px;top:4px;width:3px;height:6.5px;
  border-right:1.6px solid var(--c-green);border-bottom:1.6px solid var(--c-green);transform:rotate(42deg);
}

.a1-search{display:none;grid-template-columns:minmax(0,1fr) minmax(0,200px);gap:20px;min-height:0;}
.a1-search.is-shown{display:grid;}

/* ---------- Search components (reused) ---------- */
.zp-search-main{display:flex;flex-direction:column;gap:10px;min-width:0;}
.zp-activity{font-size:0.94rem;color:var(--z-text);}
.zp-sources{display:flex;gap:8px;flex-wrap:wrap;}
.zp-source{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.02em;
  padding:5px 12px;border-radius:100px;color:var(--c-blue);
  background:rgba(90,147,234,0.1);border:1px solid rgba(90,147,234,0.28);
}
.zp-papers{display:flex;flex-direction:column;gap:7px;margin-top:1px;}
.zp-paper{
  border:1px solid var(--z-line-strong);border-radius:9px;
  background:rgba(250,249,246,0.02);padding:9px 13px;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
}
.zp-paper-t{font-size:0.88rem;color:var(--z-text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zp-paper-m{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.03em;color:var(--z-dim);flex-shrink:0;}
.zp-search-summary{
  border-left:1px solid var(--z-line-strong);padding-left:20px;
  display:flex;flex-direction:column;gap:14px;align-self:start;
}
.zp-sum-row{display:flex;align-items:baseline;gap:9px;}
.zp-sum-row b{font-size:1.5rem;font-weight:600;color:var(--c-blue);}
.zp-sum-row span{font-size:0.8rem;color:var(--z-dim);}
.zp-method{
  margin-top:2px;font-size:0.82rem;line-height:1.4;color:var(--z-text);
  padding:10px 12px;border-radius:9px;
  background:rgba(90,147,234,0.09);border:1px solid rgba(90,147,234,0.24);
}

/* ---------- Objective + plan components (reused) ---------- */
.zp-objective{border-left:2px solid var(--accent);padding:2px 0 2px 16px;}
.zp-obj-k{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;}
.zp-obj-v{font-size:clamp(0.98rem,1.5vw,1.18rem);line-height:1.45;color:var(--z-text);}
.zp-steps{list-style:none;display:flex;flex-direction:column;gap:10px;}
.zp-steps li{display:flex;align-items:center;gap:14px;font-size:0.95rem;color:var(--z-dim-2);}
.zp-step-n{
  width:26px;height:26px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.75rem;
  background:rgba(242,177,63,0.12);color:var(--accent);
  border:1px solid rgba(242,177,63,0.28);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),width .4s var(--ease),height .4s var(--ease);
}

/* ============================================================
   ACT II: Dock + Collaborate + Evaluate
   Left readout crossfades; right docking viewport persists.
   ============================================================ */
.a2-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);gap:clamp(16px,2.4vw,30px);}
.a2-work{position:relative;min-width:0;display:flex;flex-direction:column;}
.a2-stack{position:relative;flex:1;min-height:0;}
.a2-dock,.a2-collab,.a2-eval{position:absolute;inset:0;}
.a2-dock{display:flex;flex-direction:column;gap:16px;}
.a2-collab{display:flex;flex-direction:column;justify-content:center;}
.a2-eval{display:flex;}

.a2-view{min-width:0;}
.a2-view .zp-dock-viewport{height:100%;}

/* ---------- Dock components (reused) ---------- */
.zp-agent-tag{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.04em;
  padding:6px 13px;border-radius:100px;color:var(--accent);
  background:rgba(58,208,214,0.08);border:1px solid rgba(58,208,214,0.3);
}
.zp-agent-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.zp-dock-lines{display:flex;flex-direction:column;gap:9px;}
.zp-dock-line{font-size:0.92rem;color:var(--z-dim-2);display:flex;align-items:center;gap:9px;}
.zp-dock-line::before{content:"";width:14px;height:1px;background:var(--z-dim);}
.zp-dock-ok{color:var(--c-green);}
.zp-dock-ok::before{background:var(--c-green);}
.zp-poses-n{font-size:0.86rem;color:var(--z-text);}

.zp-dock-viewport{
  position:relative;min-height:0;border-radius:14px;
  border:1px solid var(--z-line-strong);
  background:
    radial-gradient(80% 70% at 50% 55%,rgba(58,208,214,0.1),transparent 65%),
    rgba(250,249,246,0.02);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.zp-viewport-label{position:absolute;top:12px;left:14px;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--z-dim);}
.zp-mol{width:min(78%,270px);height:auto;margin-bottom:34px;}
.zp-mol-ab{animation:zpRock 6s ease-in-out infinite;transform-box:view-box;transform-origin:110px 110px;}
@keyframes zpRock{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
.zp-mol-surface{fill:rgba(58,208,214,0.14);stroke:rgba(58,208,214,0.4);stroke-width:1.2;}
.zp-mol-ab line{stroke:var(--z-dim-2);stroke-width:2.4;stroke-linecap:round;}
.zp-mol-ab circle{fill:var(--z-panel);stroke:var(--z-text);stroke-width:2;}
.zp-mol-contact{fill:var(--c-cyan);animation:zpContact 2s ease-in-out infinite;}
.zp-mol-contact:nth-of-type(2){animation-delay:.6s;}
@keyframes zpContact{0%,100%{opacity:.5;r:4;}50%{opacity:1;r:5;}}

/* poses emerge inside the viewport and persist through the act */
.zp-pose-queue{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:min(72%,230px);
}
.zp-pose-queue span{
  height:20px;border-radius:5px;
  background:rgba(58,208,214,0.1);border:1px solid rgba(58,208,214,0.28);
  opacity:0;transition:background .5s var(--ease),border-color .5s var(--ease);
}
.zp-pose-queue.is-in span{animation:zpPose .4s var(--ease) both;}
.zp-pose-queue.is-in span:nth-child(1){animation-delay:.02s;}
.zp-pose-queue.is-in span:nth-child(2){animation-delay:.07s;}
.zp-pose-queue.is-in span:nth-child(3){animation-delay:.12s;}
.zp-pose-queue.is-in span:nth-child(4){animation-delay:.17s;}
.zp-pose-queue.is-in span:nth-child(5){animation-delay:.22s;}
.zp-pose-queue.is-in span:nth-child(6){animation-delay:.27s;}
.zp-pose-queue.is-in span:nth-child(7){animation-delay:.32s;}
.zp-pose-queue.is-in span:nth-child(8){animation-delay:.37s;}
.zp-pose-queue.is-in span:nth-child(9){animation-delay:.42s;}
.zp-pose-queue.is-in span:nth-child(10){animation-delay:.47s;}
.zp-pose-queue.is-in span:nth-child(11){animation-delay:.52s;}
.zp-pose-queue.is-in span:nth-child(12){animation-delay:.57s;}
.zp-pose-queue span.sel{background:rgba(79,208,138,0.24);border-color:rgba(79,208,138,0.55);box-shadow:0 0 0 3px rgba(79,208,138,0.14);}
@keyframes zpPose{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- Collaborate components (reused) ---------- */
.zp-collab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,40px);}
.zp-agent-card{
  border:1px solid var(--z-line-strong);border-radius:12px;padding:16px 18px;
  background:rgba(167,139,250,0.05);
  box-shadow:inset 0 1px 0 rgba(250,249,246,0.04);
}
.zp-agent-name{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.02em;color:var(--c-violet);margin-bottom:8px;}
.zp-agent-name .zp-agent-dot{background:var(--c-violet);}
.zp-agent-line{font-size:0.92rem;color:var(--z-dim-2);line-height:1.4;}
.zp-exchange{position:relative;width:clamp(60px,10vw,120px);height:2px;background:linear-gradient(90deg,rgba(167,139,250,0.15),rgba(167,139,250,0.5),rgba(167,139,250,0.15));}
.zp-bundle{position:absolute;top:50%;left:0;display:flex;gap:3px;padding:5px 7px;border-radius:7px;
  background:rgba(167,139,250,0.16);border:1px solid rgba(167,139,250,0.5);
  transform:translate(-50%,-50%);}
.a2-collab.is-in .zp-bundle{animation:zpBundle 2.6s var(--ease) .6s infinite;}
.zp-bundle span{width:5px;height:14px;border-radius:2px;background:var(--c-violet);}
@keyframes zpBundle{0%{left:0;opacity:0;}12%{opacity:1;}50%{left:100%;opacity:1;}62%{opacity:0;}63%{left:100%;}75%{left:50%;opacity:1;}100%{left:50%;opacity:1;}}
.zp-collab-note{margin-top:18px;text-align:center;font-family:var(--font-mono);font-size:0.76rem;letter-spacing:0.06em;color:var(--c-violet);}

/* ---------- Evaluate components (reused) ---------- */
.zp-eval{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;width:100%;}
.zp-eval-head{font-size:0.88rem;color:var(--z-dim-2);}
.zp-eval-head i{font-style:normal;color:var(--z-dim);margin:0 4px;}
.zp-eval-table{display:flex;flex-direction:column;gap:5px;}
.zp-eval-hrow,.zp-row{display:grid;grid-template-columns:66px 1fr 1fr 1fr 78px;align-items:center;gap:10px;}
.zp-eval-hrow{padding:0 2px 4px;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--z-dim);border-bottom:1px solid var(--z-line);}
.zp-row{padding:8px 2px;border-bottom:1px solid var(--z-line);transition:opacity .6s var(--ease);}
.zp-cand{font-family:var(--font-mono);font-size:0.82rem;color:var(--z-text);}
.zp-metric{height:6px;border-radius:100px;background:rgba(250,249,246,0.06);overflow:hidden;}
.zp-metric i{display:block;height:100%;border-radius:100px;background:var(--c-green);transform:scaleX(0);transform-origin:left;}
.zp-row.is-in .zp-metric i{animation:zpBar .8s var(--ease) .1s both;}
@keyframes zpBar{from{transform:scaleX(0);}to{transform:scaleX(var(--v,1));}}
.zp-verdict{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.04em;color:var(--z-dim-2);text-align:right;}
.zp-verdict.ok{color:var(--c-green);}
.zp-verdict.no{color:var(--c-coral);}
.zp-row-sel{background:rgba(79,208,138,0.07);border:1px solid rgba(79,208,138,0.3);border-radius:9px;padding:9px 8px;margin:0 -6px;}
.zp-row.fail .zp-metric i{background:var(--c-coral);}
.zp-row.is-dim{opacity:.42;}
.zp-eval-select{margin-top:auto;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--c-green);display:flex;align-items:center;gap:9px;padding-top:6px;}
.zp-eval-select::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 4px rgba(79,208,138,0.16);}

/* ============================================================
   ACT III: Learn + Cite + Report
   Report card persists + assembles; right side crossfades.
   ============================================================ */
.a3-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);gap:clamp(16px,2.4vw,30px);align-items:start;}
.a3-report{transition:transform .6s var(--ease),opacity .6s var(--ease);transform-origin:top left;}
.a3-report.is-compact{transform:scale(.84);opacity:.6;}
.a3-side{position:relative;min-height:0;height:100%;}
.a3-learn,.a3-cite{position:absolute;inset:0;}

/* ---------- Reinforcement learning components (reused) ---------- */
.zp-rl{display:flex;flex-direction:column;gap:14px;}
.zp-rl-sub{font-size:0.95rem;color:var(--z-text);}
.zp-rl-loop{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:16px 12px;border-radius:12px;border:1px solid var(--z-line-strong);background:rgba(250,249,246,0.02);}
.zp-rl-node{font-family:var(--font-mono);font-size:0.74rem;padding:7px 12px;border-radius:8px;color:var(--z-dim-2);background:rgba(242,177,63,0.1);border:1px solid rgba(242,177,63,0.28);}
.zp-rl-node.zp-rl-reward{color:var(--c-green);background:rgba(79,208,138,0.1);border-color:rgba(79,208,138,0.32);}
.zp-rl-arrow{width:20px;height:1px;background:var(--z-dim);position:relative;}
.zp-rl-arrow::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-top:1px solid var(--z-dim);border-right:1px solid var(--z-dim);transform:rotate(45deg);}
.zp-rl-rewards{list-style:none;display:flex;flex-direction:column;gap:7px;}
.zp-rl-rewards li{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:0.86rem;color:var(--z-dim-2);padding-bottom:7px;border-bottom:1px solid var(--z-line);}
.zp-rl-rewards b{font-family:var(--font-mono);font-size:0.82rem;}
.zp-rl-rewards b.pos{color:var(--c-green);}
.zp-rl-rewards b.neg{color:var(--c-coral);}
.zp-rl-policy{display:flex;align-items:center;gap:14px;}
.zp-rl-policy-k{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--z-dim);white-space:nowrap;}
.zp-rl-policy-bar{flex:1;height:6px;border-radius:100px;background:rgba(250,249,246,0.06);overflow:hidden;}
.zp-rl-policy-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--c-amber),var(--c-green));transform:scaleX(.55);transform-origin:left;}
.zp-rl-policy.is-in .zp-rl-policy-bar i{animation:zpPolicy 1.4s var(--ease) .2s both;}
@keyframes zpPolicy{from{transform:scaleX(.55);}to{transform:scaleX(.86);}}
.a3-policy{margin-top:16px;}

/* ---------- Citation components (reused) ---------- */
.zp-cite{display:flex;flex-direction:column;gap:14px;}
.zp-claims{display:flex;flex-direction:column;gap:10px;}
.zp-claim{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:0.94rem;color:var(--z-text);
  padding:12px 15px;border-radius:10px;
  border:1px solid var(--z-line-strong);background:rgba(250,249,246,0.02);
}
.zp-cite-mark{
  font-family:var(--font-mono);font-size:0.72rem;flex-shrink:0;
  padding:3px 8px;border-radius:6px;color:var(--c-blue);
  background:rgba(90,147,234,0.12);border:1px solid rgba(90,147,234,0.34);
}
.zp-claim.is-in .zp-cite-mark{animation:zpMark .5s var(--ease) .25s both;}
@keyframes zpMark{0%{opacity:0;transform:scale(.6);}60%{transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
.zp-cite-foot{margin-top:2px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.zp-cite-meta{font-family:var(--font-mono);font-size:0.76rem;letter-spacing:0.03em;color:var(--c-blue);}
.zp-cite-meta i{font-style:normal;color:var(--z-dim);margin:0 4px;}
.zp-bib-tile{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:0.78rem;color:var(--z-text);
  padding:10px 14px;border-radius:10px;
  background:rgba(90,147,234,0.09);border:1px solid rgba(90,147,234,0.3);
}
.zp-bib-icon{width:12px;height:15px;border-radius:2px;border:1.5px solid var(--c-blue);position:relative;flex-shrink:0;}
.zp-bib-icon::after{content:"";position:absolute;top:3px;left:2px;right:2px;height:1.5px;background:var(--c-blue);box-shadow:0 3px 0 var(--c-blue),0 6px 0 var(--c-blue);}

/* ---------- Report components (reused) ---------- */
.zp-report-card{
  width:100%;border:1px solid var(--z-line-strong);border-radius:14px;
  padding:clamp(18px,2.6vh,28px) clamp(20px,2.6vw,32px);
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(79,208,138,0.1),transparent 55%),
    linear-gradient(180deg,var(--z-panel-2),var(--z-panel));
  box-shadow:inset 0 1px 0 rgba(250,249,246,0.05);
}
.zp-report-title{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-0.01em;}
.zp-report-abstract{margin-top:10px;font-size:0.96rem;line-height:1.5;color:var(--z-dim-2);max-width:62ch;}
.zp-report-artifacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.zp-report-artifacts span{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.02em;color:var(--z-dim-2);
  padding:6px 12px;border-radius:100px;
  background:rgba(250,249,246,0.03);border:1px solid var(--z-line-strong);
}
.zp-report-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--z-line);}
.zp-report-status{display:inline-flex;align-items:center;gap:10px;font-size:0.9rem;font-weight:500;color:var(--c-green);}
.zp-check{width:18px;height:18px;border-radius:50%;background:var(--c-green);position:relative;flex-shrink:0;}
.zp-check::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border-right:2px solid var(--z-bg);border-bottom:2px solid var(--z-bg);transform:rotate(42deg);}
.zp-report-conf{font-family:var(--font-mono);font-size:0.76rem;color:var(--z-dim);}
.zp-report-conf b{color:var(--c-green);}

/* ---------- Zone 3: phase rail (8 stages, unchanged) ---------- */
.zara-phase-rail{grid-area:rail;background:var(--z-panel-2);padding:16px clamp(20px,3vw,34px) 15px;position:relative;}
.zr-track{position:absolute;left:clamp(20px,3vw,34px);right:clamp(20px,3vw,34px);top:23px;height:2px;background:var(--z-line);border-radius:2px;overflow:hidden;}
.zr-fill{height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease),background .6s var(--ease);}
.zr-list{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);position:relative;}
.zr-list li{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;}
.zr-dot{width:11px;height:11px;border-radius:50%;background:var(--z-panel-2);border:2px solid var(--z-line-strong);transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);z-index:1;}
.zr-label{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.04em;color:var(--z-dim);transition:color .4s var(--ease);}
.zr-list li.done .zr-dot{background:var(--accent);border-color:var(--accent);}
.zr-list li.done .zr-label{color:var(--z-dim-2);}
.zr-list li.active .zr-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);}
.zr-list li.active .zr-label{color:var(--z-text);}

/* ---------- Pause looping motion when offscreen ---------- */
.zara-showcase.paused .zc-pulse,
.zara-showcase.paused .zc-status-dot,
.zara-showcase.paused .zp-mol-ab,
.zara-showcase.paused .zp-mol-contact,
.zara-showcase.paused .zp-bundle{animation-play-state:paused;}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .zara-product-frame{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"core" "work" "rail";}
  .zara-core{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 18px;}
  .zc-head{gap:8px;}
  .zc-name{font-size:1.3rem;}
  .zc-obj{flex:1;min-width:200px;order:3;margin:0;}
  .zc-obj-k{display:none;}
  .zc-obj-v{font-size:0.82rem;}
  .zc-foot{margin:0 0 0 auto;padding:0;border:0;gap:14px;order:2;}
  .zara-animation-shell{height:clamp(460px,64vh,540px);}
}
@media(max-width:720px){
  .zara-showcase{min-height:auto;max-height:none;padding:96px 0 48px;}
  .zara-animation-shell{height:auto;}
  .zara-product-frame{height:auto;}
  .zara-active-workspace{min-height:66svh;}
  .zc-obj{display:none;}
  .a1-search{grid-template-columns:1fr;gap:14px;}
  .a1-search.is-shown{display:grid;}
  .zp-search-summary{border-left:0;border-top:1px solid var(--z-line-strong);padding-left:0;padding-top:14px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px;}
  .a2-grid{grid-template-columns:1fr;gap:14px;grid-template-rows:180px minmax(0,1fr);}
  .a2-view{order:-1;}
  .a2-view .zp-dock-viewport{height:180px;}
  .zp-collab{grid-template-columns:1fr;gap:16px;}
  .zp-exchange{width:2px;height:40px;justify-self:center;background:linear-gradient(180deg,rgba(167,139,250,0.15),rgba(167,139,250,0.5),rgba(167,139,250,0.15));}
  .a2-collab.is-in .zp-bundle{animation:none;}
  .zp-bundle{position:static;transform:none;}
  .a3-grid{grid-template-columns:1fr;gap:14px;align-items:stretch;}
  .a3-side{height:auto;min-height:220px;}
  .zp-eval-hrow,.zp-row{grid-template-columns:56px 1fr 1fr 68px;}
  .zp-eval-hrow span:nth-child(4),.zp-row .zp-metric:nth-of-type(3){display:none;}
  .zr-label{display:none;}
  .zr-track{top:50%;transform:translateY(-50%);}
  .zara-phase-rail{padding:16px clamp(18px,4vw,24px);}
}
@media(max-width:560px){
  .zw-act{padding:18px 18px;}
  .zp-report-abstract{font-size:0.88rem;}
}

/* ---------- Reduced motion: static staged composition ---------- */
@media(prefers-reduced-motion:reduce){
  .zc-pulse,.zc-status-dot,.zp-mol-ab,.zp-mol-contact,.zp-bundle{animation:none !important;}
  .zw-r,.zw-act,.zp-metric i,.zp-rl-policy-bar i,.a1-plan,.a3-report{transition:none !important;}
}