/* PARALLAX / LIVE LAB — scoped styles, no external dependencies */
.live-lab { margin-top:clamp(85px,10vw,160px); color:#141711; }
.lab-overline { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #22282140; padding:23px 0 0; }
.lab-overline .mono { color:#62675c; }
.lab-overline-right { display:flex; align-items:center; gap:9px; }
.lab-overline-right::before { content:""; width:6px; height:6px; background:#567b27; border-radius:50%; animation:pulse 2.4s infinite; }
.lab-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(210px,.45fr); align-items:end; gap:40px; padding:35px 0 35px; }
.lab-intro h3 { font-size:clamp(48px,6.3vw,105px); line-height:.91; letter-spacing:-.084em; font-weight:660; margin:0; }
.lab-intro h3 em { font-weight:450; color:#7f9c48; }
.lab-intro p { max-width:320px; font-size:14px; line-height:1.75; color:#62675d; margin:0 0 2px; }
.lab-machine { --lab-primary:#c5fd69; --lab-secondary:#9f8dff; color:#e8ece7; background:#090c10; border:1px solid #181e1d; box-shadow:0 35px 95px #0c0d0929; position:relative; isolation:isolate; }
.lab-machine:fullscreen { display:flex; flex-direction:column; background:#080b10; overflow:auto; }
.lab-machine:fullscreen .lab-screen { flex:1; min-height:350px; max-height:none; }
.lab-toolbar { min-height:72px; padding:12px 25px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #ffffff17; }
.lab-machine-brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.lab-machine-glyph { display:grid;place-items:center;width:27px;height:27px;color:var(--lab-primary);border:1px solid color-mix(in srgb,var(--lab-primary) 52%,transparent);transform:rotate(-13deg);font:16px var(--mono) }
.lab-machine-brand b { font:600 11px var(--mono); letter-spacing:.15em; }
.lab-machine-brand small { color:#778084; font:9px var(--mono); letter-spacing:.13em; }
.lab-tabs { display:flex; align-items:center; gap:3px; background:#ffffff09; padding:4px; border:1px solid #ffffff12; border-radius:4px; }
.lab-tabs button { color:#878e92; border:0; padding:11px 15px; background:none; font:10px var(--mono); letter-spacing:.1em; cursor:pointer; border-radius:2px; white-space:nowrap; }
.lab-tabs button:hover { color:#e4e8e4; }
.lab-tabs button[aria-pressed="true"] { background:var(--lab-primary); color:#10130e; }
.lab-tabs button span { font-size:8px; opacity:.55; margin-right:8px; }
.lab-screen { position:relative; aspect-ratio:1.85; min-height:360px; overflow:hidden; background:radial-gradient(ellipse at 50% 53%,#171824,#0a0c13 52%,#07090d 95%); cursor:crosshair; touch-action:pan-y; }
.lab-screen::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px); background-size:calc(100% / 12) calc(100% / 8); mask-image:linear-gradient(transparent,black 25%,black 80%,transparent); opacity:.5; }
.lab-screen::after { content:""; position:absolute; inset:16px; border:1px solid #ffffff0b; pointer-events:none; z-index:3; }
#lab-canvas { display:block; width:100%; height:100%; position:absolute; inset:0; }
.lab-overlay { position:absolute; z-index:4; pointer-events:none; font:10px var(--mono); letter-spacing:.12em; }
.lab-overlay.top-left { left:35px; top:29px; }
.lab-overlay.top-left strong { color:#eef2ef; display:block; font:650 clamp(17px,2.3vw,26px) var(--sans); letter-spacing:-.05em; margin-top:10px; }
.lab-overlay.top-left span { color:var(--lab-primary); }
.lab-overlay.top-right { right:35px; top:30px; text-align:right; color:#87919c; }
.lab-overlay.bottom-left { bottom:29px; left:35px; color:#8b9895; display:flex; gap:14px; }
.lab-overlay.bottom-right { bottom:29px; right:35px; color:#b2b9b4; }
.lab-coordinates { display:inline-block; min-width:102px; text-align:right; color:var(--lab-primary); }
.lab-scope { display:block; width:170px; height:57px; margin-left:auto; margin-top:9px; opacity:.95; }
.lab-corner { position:absolute; width:15px;height:15px;z-index:5;pointer-events:none; }
.lab-corner.a { top:16px;left:16px;border-top:1px solid var(--lab-primary);border-left:1px solid var(--lab-primary) }
.lab-corner.b { top:16px;right:16px;border-top:1px solid var(--lab-primary);border-right:1px solid var(--lab-primary) }
.lab-corner.c { bottom:16px;left:16px;border-bottom:1px solid var(--lab-primary);border-left:1px solid var(--lab-primary) }
.lab-corner.d { bottom:16px;right:16px;border-bottom:1px solid var(--lab-primary);border-right:1px solid var(--lab-primary) }
.lab-info { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:15px 26px; border-top:1px solid #ffffff14; border-bottom:1px solid #ffffff14; background:#0e1218; }
.lab-readouts { display:flex; flex-wrap:wrap; gap:30px; align-items:center; }
.lab-readout { font:10px var(--mono); letter-spacing:.1em; color:#7b8387; }
.lab-readout strong { color:#eaf1e7; margin-left:10px; font:500 12px var(--mono); }
.lab-readout strong.acid { color:var(--lab-primary); }
.lab-signal { display:flex; gap:8px; align-items:center; color:var(--lab-primary); font:9px var(--mono); letter-spacing:.13em; }
.lab-signal::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 11px currentColor; animation:pulse 2.4s infinite; }
.lab-console { padding:31px 30px; display:grid; grid-template-columns:minmax(190px,.55fr) minmax(0,1.45fr); gap:30px; }
.lab-console-heading .mono { color:var(--lab-primary); }
.lab-console-heading h4 { font-size:25px; letter-spacing:-.05em; font-weight:560; margin:10px 0; }
.lab-console-heading p { color:#8f9996; font-size:12px; line-height:1.7; max-width:225px; margin:0; }
.lab-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.lab-setting { min-width:0; }
.lab-setting label { display:flex; justify-content:space-between; color:#a3aaa8; font:9px var(--mono); letter-spacing:.11em; gap:8px; margin-bottom:24px; }
.lab-setting output { color:var(--lab-primary); }
.lab-setting input[type="range"] { appearance:none;-webkit-appearance:none; width:100%; height:2px; background:linear-gradient(90deg,var(--lab-primary) 55%,#3f4846 55%); cursor:pointer; display:block; border:0; padding:0; margin:0; accent-color:var(--lab-primary); }
.lab-setting input[type="range"]::-webkit-slider-thumb { appearance:none; width:11px;height:11px;border-radius:50%;background:var(--lab-primary);border:2px solid #0c1110;box-shadow:0 0 0 1px var(--lab-primary); }
.lab-setting input[type="range"]::-moz-range-thumb { width:8px;height:8px;border-radius:50%;background:var(--lab-primary);border:1px solid #121713; }
.lab-setting .setting-extents { display:flex; justify-content:space-between; color:#66706c; font:9px var(--mono); margin-top:15px; }
.lab-actions { display:flex; flex-wrap:wrap; gap:9px; padding:0 30px 27px; align-items:center; }
.lab-action { display:inline-flex; justify-content:center; align-items:center; gap:10px; border:1px solid #ffffff32; background:transparent; color:#edf1ef; cursor:pointer; min-height:43px; padding:0 17px; font:10px var(--mono); letter-spacing:.075em; transition:background .22s,border-color .22s,color .22s; }
.lab-action:hover { border-color:var(--lab-primary); color:var(--lab-primary); background:#ffffff05; }
.lab-action.primary { background:var(--lab-primary);color:#141911;border-color:var(--lab-primary);font-weight:700; }
.lab-action.primary:hover { background:#efffc1;border-color:#efffc1;color:#141911; }
.lab-action svg { flex-shrink:0; }
.lab-action[aria-pressed="true"] { color:var(--lab-primary);border-color:var(--lab-primary); }
.lab-shortcuts { margin-left:auto;color:#66716c;font:9px var(--mono);letter-spacing:.08em;text-align:right; }
.lab-footnote { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid #22282140; padding:20px 0; color:#5e665a; }
.lab-footnote strong { font:10px var(--mono); letter-spacing:.14em; color:#343d32; }
.lab-footnote span { font:10px var(--mono); letter-spacing:.06em; }
.lab-footnote i { font-style:normal; color:#738d47; margin:0 9px; }
@media(max-width:1120px) {
  .lab-toolbar { gap:12px; }
  .lab-machine-brand small { display:none; }
  .lab-tabs button { padding:11px; }
  .lab-console { grid-template-columns:1fr;gap:27px; }
  .lab-console-heading p { max-width:520px; }
}
@media(max-width:720px) {
  .live-lab { margin-top:85px; }
  .lab-intro { grid-template-columns:1fr;gap:23px; }
  .lab-intro h3 { font-size:clamp(52px,11vw,83px); }
  .lab-intro p { max-width:450px; }
  .lab-toolbar { padding:15px; }
  .lab-machine-brand { width:100%; }
  .lab-tabs { width:100%; }
  .lab-tabs button { flex:1; font-size:9px;padding:12px 5px; }
  .lab-screen { aspect-ratio:auto;height:420px;min-height:300px; }
  .lab-overlay.top-left { left:24px; top:23px; }
  .lab-overlay.top-right { right:23px;top:23px; }
  .lab-scope { width:100px; height:43px; }
  .lab-overlay.bottom-left { left:24px; bottom:23px; }
  .lab-overlay.bottom-left span:last-child { display:none; }
  .lab-overlay.bottom-right { right:24px; bottom:23px; }
  .lab-readouts { gap:10px 19px; }
  .lab-info { padding:15px 17px; }
  .lab-signal { width:100%; }
  .lab-console { padding:25px 19px; }
  .lab-settings { gap:23px 12px; }
  .lab-setting label { flex-direction:column;gap:8px; margin-bottom:18px; }
  .lab-actions { padding:0 19px 24px; }
  .lab-actions .lab-action { flex:1 1 auto; padding:0 11px; }
  .lab-shortcuts { display:none; }
  .lab-footnote { align-items:start;flex-direction:column;gap:12px; }
}
@media(max-width:430px) {
  .lab-screen { height:370px; }
  .lab-overlay.top-right { font-size:8px; }
  .lab-overlay.bottom-left { font-size:8px; }
  .lab-overlay.bottom-right { font-size:8px; }
  .lab-settings { grid-template-columns:1fr; gap:20px; }
  .lab-setting label { flex-direction:row; }
}
@media(prefers-reduced-motion:reduce) { .lab-signal::before,.lab-overline-right::before { animation:none; } }

.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}