.lab-page { min-height:100vh; background:#080b10; }
.lab-hero { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; padding:76px 0 48px; }
.lab-hero h1 { max-width:820px; margin:0; font-size:clamp(2.7rem,6vw,5.8rem); line-height:.93; letter-spacing:0; }
.lab-hero > p { max-width:520px; margin:0; color:var(--muted); }
.motion-workspace { display:grid; grid-template-columns:270px minmax(0,1fr) 250px; min-height:650px; border:1px solid var(--line); background:#0d121a; }
.control-panel,.validation-panel { padding:24px; background:#111722; }
.control-panel { border-right:1px solid var(--line); }
.validation-panel { border-left:1px solid var(--line); }
.control-head { margin-bottom:28px; }
.control-head span,.handoff-card > span { display:block; color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.control-head strong { display:block; margin-top:6px; font-size:18px; }
.control-panel label { display:flex; justify-content:space-between; gap:14px; margin:20px 0 8px; color:#c7cfda; font-size:11px; font-weight:700; text-transform:uppercase; }
.control-panel output { color:var(--accent); }
.control-panel textarea { width:100%; min-height:105px; resize:vertical; border:1px solid #303948; border-radius:5px; padding:12px; color:#e8edf5; background:#090d14; font:500 12px/1.55 ui-monospace,monospace; }
.control-panel input[type="range"] { width:100%; accent-color:var(--accent); }
.preset-row { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:12px; }
.preset-row button,.lab-button { min-height:38px; border:1px solid #303948; border-radius:4px; color:#bbc4d1; background:#0a0f17; font:700 11px/1 inherit; cursor:pointer; }
.preset-row button:hover,.preset-row button:focus-visible,.preset-row .is-selected { color:#100b07; border-color:var(--accent); background:var(--accent); }
.control-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:25px; }
.lab-button-primary { color:#110b06; border-color:var(--accent); background:var(--accent); }
.stage-panel { position:relative; min-width:0; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; background:radial-gradient(circle at 50% 44%,#1c2736 0,#0a0e15 64%); }
.stage-toolbar { display:flex; justify-content:space-between; gap:20px; padding:15px 18px; border-bottom:1px solid var(--line); color:#818c9d; font:700 9px/1 ui-monospace,monospace; letter-spacing:.1em; }
.stage-toolbar span:first-child { color:var(--accent); }
[data-motion-canvas] { display:block; width:100%; height:100%; min-height:520px; }
.timeline { position:relative; display:flex; justify-content:space-between; padding:15px 18px; border-top:1px solid var(--line); color:#6e7989; font:700 9px ui-monospace,monospace; }
.timeline::before { content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:#313a48; }
.timeline i { position:absolute; left:18px; top:-5px; width:2px; height:11px; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.validation-list { margin:0; }
.validation-list div { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #2a3240; }
.validation-list dt { color:#8e99a9; font-size:11px; }
.validation-list dd { margin:0; color:#57d4aa; font-size:11px; font-weight:800; }
.validation-list dd.is-review { color:#ffd071; }
.handoff-card { margin-top:28px; border:1px solid #303948; padding:17px; background:#0a0f16; }
.handoff-card strong { display:block; margin:8px 0 14px; }
.handoff-card ul { margin:0; padding-left:17px; color:#8e99a9; font-size:11px; }
.handoff-card li + li { margin-top:6px; }
.pipeline-readout { display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr; align-items:center; padding:46px 0; }
.pipeline-node { min-height:96px; border:1px solid var(--line); padding:16px; color:#737f90; background:#0d121a; }
.pipeline-node span { color:var(--accent); font-size:9px; }
.pipeline-node strong,.pipeline-node small { display:block; }
.pipeline-node strong { margin-top:15px; color:#bdc5d0; }
.pipeline-node small { margin-top:3px; }
.pipeline-node.is-active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.pipeline-node.is-done { border-color:#3a8f79; }
.pipeline-link { height:1px; background:#394352; }
.lab-boundary { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; padding:86px 0; border-top:1px solid var(--line); }
.lab-boundary h2 { max-width:540px; margin:0; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:0; }
.lab-boundary > p { color:var(--muted); }
@media (max-width:1050px) {
  .motion-workspace { grid-template-columns:240px minmax(0,1fr); }
  .validation-panel { grid-column:1/-1; border-top:1px solid var(--line); border-left:0; }
  .validation-list { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
  .validation-list div { display:block; }
  .validation-list dd { margin-top:6px; }
}
@media (max-width:760px) {
  .lab-hero,.lab-boundary { grid-template-columns:1fr; gap:28px; }
  .motion-workspace { grid-template-columns:1fr; }
  .control-panel { border-right:0; border-bottom:1px solid var(--line); }
  [data-motion-canvas] { min-height:430px; }
  .pipeline-readout { grid-template-columns:1fr; gap:6px; }
  .pipeline-link { width:1px; height:18px; margin-left:24px; }
  .validation-list { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }