/* RKH Labs takeover styles. Loads on EVERY page after main.css (the nav .labs-logo-btn
   and body.labs-open live here). --g1/--g2 must stay on :root — the gradient shuffle JS
   writes them on documentElement and the nav logo gradient reads them outside the portal.
   Any NEW labs-only token must be --lab-* prefixed to avoid colliding with main.css. */
  :root{--g1:#ff2360;--g2:#ffc8ff;--g1-ink:#fff; /* --g1-ink flips dark/white for contrast; JS keeps it in sync with the shuffle */
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
    --lab-bg:#15151b;--lab-grid:rgba(255,255,255,.022);--lab-grid2:rgba(255,255,255,.04)}
  body.labs-open{overflow:hidden}
  .portal :focus-visible,.labs-logo-btn:focus-visible{outline:2px solid var(--g2);outline-offset:3px;border-radius:4px}

  /* ---- the door: the Labs logo itself, sitting in the nav ---- */
  .labs-logo-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px;display:block}
  .labs-logo-btn svg{height:42px;width:auto;display:block;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.18));
    transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s,height .4s ease}
  .labs-logo-btn:hover svg{transform:scale(1.09) rotate(-2deg);
    filter:drop-shadow(0 3px 10px color-mix(in srgb,var(--g1) 20%,transparent))}
  .labs-logo-btn .pulse{position:absolute;top:0;right:-3px;width:10px;height:10px;border-radius:50%;
    background:var(--g1);border:2px solid var(--bg);
    box-shadow:0 0 0 0 rgba(255,35,96,.55);animation:lab-pulse 1.6s infinite}
  /* the pulse is a homepage-only attractor — everywhere else the logo sits quiet */
  body:not([data-page="home"]) .labs-logo-btn .pulse{display:none}
  @keyframes lab-pulse{
    0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,35,96,.55)}
    45%{opacity:.25}
    70%{opacity:1;box-shadow:0 0 0 10px rgba(255,35,96,0)}}

  /* ---- portal shell: a dark screen in a frosted bezel — the site glows through the border ---- */
  .portal{position:fixed;inset:clamp(3px,.45vw,6px);border-radius:24px;z-index:600;visibility:hidden;
    transform-origin:50% 50%;--bez:clamp(9px,1.3vw,15px);
    background:rgba(244,241,234,.42);
    -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
    box-shadow:0 50px 140px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.35) inset,0 0 0 1px rgba(0,0,0,.3)}
  .portal.open{visibility:visible;animation:lab-crt-back .6s cubic-bezier(.2,.7,.3,1.15) forwards}
  .portal.closing{visibility:visible;animation:lab-crt .42s cubic-bezier(.75,0,.95,.4) forwards}
  /* bezel status lights */
  .portal::after{content:"";position:absolute;right:calc(var(--bez) + 14px);bottom:calc(var(--bez)/2);
    transform:translateY(50%);width:7px;height:7px;border-radius:50%;background:var(--g1);
    box-shadow:-16px 0 0 rgba(0,0,0,.18);z-index:8}

  /* ---- boot log: lifts away like a shutter once the bench is ready ---- */
  /* boot-clip pins the shutter to the screen rect so it vanishes at the screen edge
     instead of sliding on through the frosted bezel */
  .boot-clip{position:absolute;inset:var(--bez);border-radius:18px 0 0 18px;overflow:hidden;
    z-index:5;pointer-events:none}
  .lab-boot{position:absolute;inset:0;border-radius:inherit;display:grid;place-items:center;
    overflow:hidden;background:var(--lab-bg);pointer-events:none;
    transition:transform .8s cubic-bezier(.76,0,.19,1) .08s}
  .lab-boot::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
    background:linear-gradient(100deg,var(--g1),var(--g2))}
  .portal.settled .lab-boot{transform:translateY(calc(-100% - 24px))}
  .boot-inner{min-width:min(480px,86vw);max-width:86vw}
  .boot-logo{height:52px;width:auto;display:block;margin-bottom:28px;
    filter:drop-shadow(0 8px 24px color-mix(in srgb,var(--g1) 22%,transparent))}
  .lab-boot pre{font-family:var(--mono);font-size:clamp(0.8125rem,1.5vw,0.9688rem);line-height:2;color:var(--fg-2);
    white-space:pre-wrap;overflow-wrap:break-word}
  .lab-boot .cmd{color:var(--fg);font-weight:600}
  .lab-boot .ok{color:var(--g2)} .lab-boot .hx{color:var(--g1)}
  .lab-boot .caret,.lterm .caret{display:inline-block;width:9px;height:1.1em;background:var(--g1);
    vertical-align:text-bottom;animation:lab-blink .7s steps(1) infinite}
  @keyframes lab-blink{50%{opacity:0}}

  /* ---- the bench surface: homepage off-black + faint drafting grid, framed like a screen ---- */
  /* right corners square so the scrollbar gutter meets the frame cleanly */
  .surface{position:absolute;inset:var(--bez);border-radius:18px 0 0 18px;border:1px solid rgba(0,0,0,.3);
    box-shadow:0 12px 44px -14px rgba(50,25,0,.25);
    z-index:1;overflow-y:auto;overflow-x:hidden;color:var(--fg);
    background:
      radial-gradient(100% 55% at 82% -6%,color-mix(in srgb,var(--g1) 20%,transparent),transparent 62%),
      radial-gradient(70% 40% at 8% 30%,color-mix(in srgb,var(--g2) 8%,transparent),transparent 60%),
      var(--lab-bg);
    }
  /* no grid — the gradient blobs are the hero's only atmosphere */
  /* scrollbars are part of the mode split: glass mode gets a sleek modern thumb,
     tube (degauss) mode gets the full Win95 treatment.
     NB: scrollbar-color/width live in the Firefox-only block — in Chrome the standard
     properties DISABLE ::-webkit-scrollbar styling and force a rounded native thumb */
  @supports (-moz-appearance:none){
    .surface{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
    .lchat{scrollbar-width:thin;scrollbar-color:rgba(20,20,25,.3) transparent}
    .portal.tube .surface{scrollbar-width:auto;scrollbar-color:#c0c0c0 #dcdcdc}
    .portal.tube .lchat{scrollbar-color:#c0c0c0 #ece8df}
  }
  /* glass mode: barely-there modern scrollbar */
  .surface::-webkit-scrollbar{width:10px}
  .surface::-webkit-scrollbar-track{background:transparent}
  .surface::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px;
    border:3px solid transparent;background-clip:padding-box}
  .surface::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36);background-clip:padding-box}
  .surface::-webkit-scrollbar-button{display:none}
  .lchat::-webkit-scrollbar{width:8px}
  .lchat::-webkit-scrollbar-track{background:transparent}
  .lchat::-webkit-scrollbar-thumb{background:rgba(20,20,25,.28);border-radius:999px;
    border:2px solid transparent;background-clip:padding-box}
  /* tube mode: gloriously old-school — square Win95 bevels, 1px dithered track, chunky buttons */
  .portal.tube .surface::-webkit-scrollbar{width:16px}
  .portal.tube .surface::-webkit-scrollbar-track{border-radius:0;
    background-image:conic-gradient(#fff 25%,#c0c0c0 0 50%,#fff 0 75%,#c0c0c0 0);
    background-size:2px 2px}
  .portal.tube .surface::-webkit-scrollbar-thumb{background:#c0c0c0;border-radius:0;border-width:1px;
    border-style:solid;border-color:#dfdfdf #0a0a0a #0a0a0a #dfdfdf;background-clip:border-box;
    box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #808080}
  .portal.tube .surface::-webkit-scrollbar-thumb:active{
    border-color:#0a0a0a #dfdfdf #dfdfdf #0a0a0a;
    box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #fff}
  .portal.tube .surface::-webkit-scrollbar-button:single-button{display:block;width:16px;height:16px;border-radius:0;
    background-color:#c0c0c0;border:1px solid;border-color:#dfdfdf #0a0a0a #0a0a0a #dfdfdf;
    box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #808080;
    background-repeat:no-repeat;background-position:center}
  .portal.tube .surface::-webkit-scrollbar-button:single-button:active{
    border-color:#0a0a0a #dfdfdf #dfdfdf #0a0a0a;
    box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #fff;background-position:center 1px}
  .portal.tube .surface::-webkit-scrollbar-button:single-button:vertical:decrement{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 1.5 7 6H1z' fill='%23141419'/%3E%3C/svg%3E")}
  .portal.tube .surface::-webkit-scrollbar-button:single-button:vertical:increment{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 6.5 1 2h6z' fill='%23141419'/%3E%3C/svg%3E")}
  /* mini retro version inside the chat card, tube mode only */
  .portal.tube .lchat::-webkit-scrollbar{width:12px}
  .portal.tube .lchat::-webkit-scrollbar-track{border-radius:0;
    background-image:conic-gradient(#f8f6f0 25%,#cfccc2 0 50%,#f8f6f0 0 75%,#cfccc2 0);
    background-size:2px 2px}
  .portal.tube .lchat::-webkit-scrollbar-thumb{background:#c0c0c0;border-radius:0;border-width:1px;
    border-style:solid;border-color:#f8f6f0 #55555e #55555e #f8f6f0;background-clip:border-box;
    box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #8a8a92}

  /* ---- CRT mode (toggled by the DEGAUSS button): scanlines, rgb stripe, vignette,
     rolling refresh band, tube shading, faint phosphor flicker ---- */
  /* .crt-glass doubles as the shared screen-fx layer — each non-glass mode
     lights it up with its own overlay (scanlines / grain / cell grid / bleed) */
  .crt-glass{display:none;position:absolute;inset:var(--bez);border-radius:18px 0 0 18px;z-index:65;
    pointer-events:none;overflow:hidden}
  .portal.tube .crt-glass{display:block;
    background:
      repeating-linear-gradient(0deg,rgba(0,0,0,.17) 0 1px,transparent 1px 3px),
      repeating-linear-gradient(90deg,rgba(255,35,96,.028) 0 1px,rgba(51,209,207,.02) 1px 2px,transparent 2px 3px),
      radial-gradient(115% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.42) 100%)}
  /* squarer screen corners in tube mode — glass stays soft and rounded */
  .portal.tube .surface,.portal.tube .boot-clip,.portal.tube .alarm,
  .portal.tube .crt-glass,.portal.tube .crt-glass::after{border-radius:6px 0 0 6px}
  /* tube mode: the frosted bezel becomes chunky black monitor plastic, squared off like the old days */
  .portal.tube{border-radius:4px;background:linear-gradient(160deg,#34343b,#1e1e24 50%,#101014);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 50px 140px -30px rgba(0,0,0,.95),
      inset 0 1px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.65),0 0 0 1px #000}
  .portal.tube::before{content:"RKH · CRT-5000 · 31kHz";position:absolute;left:50%;bottom:calc(var(--bez)/2);
    transform:translate(-50%,50%);font-family:var(--mono);font-size:0.5625rem;font-weight:600;
    letter-spacing:.34em;color:#8b8b95;z-index:8;white-space:nowrap}
  .portal.tube .crt-glass::before{content:"";position:absolute;left:0;right:0;height:130px;top:-25%;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.05),transparent);
    animation:crt-roll 6.5s linear infinite}
  @keyframes crt-roll{to{top:120%}}
  .portal.tube .crt-glass::after{content:"";position:absolute;inset:0;border-radius:18px 0 0 18px;
    box-shadow:inset 0 0 90px rgba(0,0,0,.5),inset 0 0 8px rgba(0,0,0,.65)}
  /* :not(.degaussing) keeps the flicker from out-ranking the degauss thunk mid-wobble */
  .portal.tube.settled:not(.degaussing) .surface{animation:crt-flicker 3.4s steps(71) infinite}
  @keyframes crt-flicker{0%,100%{opacity:1}7%{opacity:.985}23%{opacity:1}31%{opacity:.99}56%{opacity:.982}70%{opacity:1}}
  /* the degauss thunk: push-switch — labs.js clones the outgoing monitor (.dg-ghost,
     old display still on its face) and the incoming one shoves it off the top while
     riding in from the bottom. Both run the SAME motion curve offset by one screen
     height, so the 48px gap between them never changes and they read as one physical
     push. Shared shape: anticipation dip, hard launch, decelerating arrival with an
     8px overshoot. lab-crt-back is repeated verbatim from .portal.open so it keeps
     its identity and doesn't restart when the degaussing class drops */
  .portal.dg-ghost{pointer-events:none;animation:degauss-out .65s linear forwards}
  .portal.open.degaussing{animation:lab-crt-back .6s cubic-bezier(.2,.7,.3,1.15) forwards,
    degauss-in .65s linear}
  @keyframes degauss-out{
    0%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.6,1)}
    10%{transform:translateY(16px);animation-timing-function:cubic-bezier(.7,0,.2,1)}
    88%{transform:translateY(calc(-100vh - 56px));animation-timing-function:cubic-bezier(.3,0,.5,1)}
    100%{transform:translateY(calc(-100vh - 48px))}}
  @keyframes degauss-in{
    0%{transform:translateY(calc(100vh + 48px));animation-timing-function:cubic-bezier(.4,0,.6,1)}
    10%{transform:translateY(calc(100vh + 64px));animation-timing-function:cubic-bezier(.7,0,.2,1)}
    88%{transform:translateY(-8px);animation-timing-function:cubic-bezier(.3,0,.5,1)}
    100%{transform:translateY(0)}}

  /* ---- E-INK mode: matte reader plastic, greyscale panel, paper grain — and nothing
     moves, because e-ink can't. DEGAUSS becomes the full-refresh flash ---- */
  .portal.eink{border-radius:18px;background:linear-gradient(165deg,#efece5,#d8d4cb);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 50px 140px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(0,0,0,.22)}
  .portal.eink::before{content:"RKH · E-INK-KALEIDO · 0.5Hz";position:absolute;left:50%;bottom:calc(var(--bez)/2);
    transform:translate(-50%,50%);font-family:var(--mono);font-size:0.5625rem;font-weight:600;
    letter-spacing:.34em;color:#8b8578;z-index:8;white-space:nowrap}
  .portal.eink .surface,.portal.eink .boot-clip,.portal.eink .alarm,
  .portal.eink .crt-glass{border-radius:10px 0 0 10px}
  /* colour e-ink, not full grayscale — the gradient should ghost through the paper */
  .portal.eink .surface{filter:saturate(.28) contrast(.86) brightness(1.12) sepia(.1)}
  .portal.eink .crt-glass{display:block;opacity:.35;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .53 0 0 0 0 .48 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* park the decorative loops only — reveals/chat use fill:both animations and
     transitions, pausing those would leave content stuck invisible */
  .portal.eink :is(.blob,.lgr,.caret,.ap-arr){animation-play-state:paused}
  .portal.eink.degaussing .surface{animation:eink-refresh .8s linear}
  @keyframes eink-refresh{
    0%,24%{filter:grayscale(1) invert(1) contrast(1.15) brightness(.95)}
    25%,49%{filter:saturate(.28) contrast(.86) brightness(1.12)}
    50%,74%{filter:grayscale(1) invert(1) contrast(1.15) brightness(.95)}
    75%,100%{filter:saturate(.28) contrast(.86) brightness(1.12) sepia(.1)}}

  /* ---- PLASMA mode: gas-discharge amber monochrome, coarse cell grid, warm bloom ---- */
  .portal.plasma{border-radius:12px;background:linear-gradient(160deg,#31281f,#1b1510 55%,#0d0a06);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 50px 140px -30px rgba(0,0,0,.95),
      inset 0 1px 0 rgba(255,190,120,.12),inset 0 -2px 0 rgba(0,0,0,.65),0 0 0 1px #000}
  .portal.plasma::before{content:"RKH · PLASMA-640 · GAS DISCHARGE";position:absolute;left:50%;bottom:calc(var(--bez)/2);
    transform:translate(-50%,50%);font-family:var(--mono);font-size:0.5625rem;font-weight:600;
    letter-spacing:.34em;color:#a97f4e;z-index:8;white-space:nowrap}
  .portal.plasma .surface,.portal.plasma .boot-clip,.portal.plasma .alarm,
  .portal.plasma .crt-glass{border-radius:5px 0 0 5px}
  /* warm amber cast, not a remap — the day's gradient stays legible under the glow */
  .portal.plasma .surface{filter:sepia(.3) hue-rotate(-8deg) saturate(1.4) contrast(1.03) brightness(.93)}
  .portal.plasma .crt-glass{display:block;
    background:
      repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
      repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
      radial-gradient(115% 90% at 50% 50%,transparent 55%,rgba(12,4,0,.5) 100%),
      linear-gradient(rgba(255,140,35,.06),rgba(255,140,35,.06));
    box-shadow:inset 0 0 140px rgba(255,130,30,.16)}
  .portal.plasma.settled:not(.degaussing) .surface{animation:crt-flicker 2.6s steps(47) infinite}
  .portal.plasma .degauss-btn .lamp{background:#ffa02f;box-shadow:0 0 9px #ffa02f}

  /* ---- TFT mode: silver office plastic, washed blacks, corner backlight bleed —
     and one stuck subpixel, as tradition demands ---- */
  .portal.lcd{border-radius:12px;background:linear-gradient(165deg,#dcdde0,#b9bbc0 55%,#a3a5ab);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 50px 140px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(0,0,0,.3)}
  .portal.lcd::before{content:"RKH · TFT-1024 · 60Hz · A-Si";position:absolute;left:50%;bottom:calc(var(--bez)/2);
    transform:translate(-50%,50%);font-family:var(--mono);font-size:0.5625rem;font-weight:600;
    letter-spacing:.34em;color:#5c5f66;z-index:8;white-space:nowrap}
  .portal.lcd .surface,.portal.lcd .boot-clip,.portal.lcd .alarm,
  .portal.lcd .crt-glass{border-radius:4px 0 0 4px}
  .portal.lcd .surface{filter:contrast(.85) brightness(1.1) saturate(.95)}
  .portal.lcd .crt-glass{display:block;
    background:
      radial-gradient(42% 30% at 0% 100%,rgba(185,205,255,.16),transparent 70%),
      radial-gradient(36% 26% at 100% 0%,rgba(185,205,255,.12),transparent 70%),
      radial-gradient(30% 22% at 100% 100%,rgba(185,205,255,.1),transparent 70%),
      linear-gradient(180deg,rgba(0,0,0,.1),transparent 30%,transparent 78%,rgba(255,255,255,.05))}
  .portal.lcd .crt-glass::before{content:"";position:absolute;left:71%;top:33%;width:2px;height:2px;background:#f31}
  .portal.lcd .degauss-btn .lamp{background:#3ec3ff;box-shadow:0 0 9px #3ec3ff}

  /* front-panel buttons, simplified: flat pills, an LED lamp each — no chassis plastic */
  .ltop-actions{display:flex;align-items:center;gap:12px}
  .degauss-btn,.lclose{display:inline-flex;align-items:center;gap:9px;height:36px;box-sizing:border-box;
    font-family:var(--mono);font-size:0.6875rem;font-weight:600;letter-spacing:.16em;color:var(--fg-2);
    padding:0 14px;border-radius:12px;cursor:pointer;flex:none;
    background:rgba(255,255,255,.03);border:1px solid #3c3c46;
    transition:color .2s,border-color .2s,background .2s}
  .degauss-btn:hover,.lclose:hover{color:var(--fg);border-color:#50505c;background:rgba(255,255,255,.06)}
  .degauss-btn .lamp,.lclose::before{width:7px;height:7px;border-radius:50%;flex:none}
  .degauss-btn .lamp{background:#4a4a54;transition:background .2s,box-shadow .2s}
  .portal.tube .degauss-btn .lamp{background:#35d07f;box-shadow:0 0 9px #35d07f}
  /* close lamp is always lit green — the labs is powered on; this is the off switch */
  .lclose::before{content:"";background:#35d07f;box-shadow:0 0 9px rgba(53,208,127,.8)}
  .lclose svg{width:13px;height:13px;display:block}
  @media(max-width:700px){.degauss-btn{padding:0 11px;letter-spacing:.08em}}

  /* ---- labs topbar ---- */
  .ltop{position:sticky;top:0;z-index:20;background:rgba(15,15,19,.9);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
  .ltop .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
  .llogo{background:none;border:none;cursor:pointer;padding:0;display:block}
  .llogo svg{height:38px;width:auto;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .llogo:hover svg{transform:scale(1.05) rotate(-2deg)}
  .readout{display:flex;gap:26px;font-family:var(--mono);font-size:0.75rem;color:var(--fg-2);letter-spacing:.03em}
  .readout .v,.ctx .v{color:var(--fg)}
  /* context digest: the labs "reads" each section as you scroll past it */
  .ctx{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:0.75rem;
    color:var(--fg-2);flex:1;min-width:0;max-width:360px;
    border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:rgba(255,255,255,.03)}
  .ctx-k{color:var(--g2);flex:none}
  .ctx-clip{flex:1;min-width:0;overflow:hidden;height:1.5em}
  .ctx-lines{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .ctx-lines div{height:1.5em;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ctx-pct{flex:none}
  @media(max-width:1100px){.ctx{display:none}}
  @media(max-width:760px){.readout .hide-s{display:none}}
  @media(max-width:700px){.readout{display:none}}

  /* ---- reveals + shared bits ---- */
  .lrv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .lrv.lin{opacity:1;transform:none}
  .lfig{font-family:var(--mono);font-size:0.8125rem;letter-spacing:.08em;color:var(--cyan);margin-bottom:24px;
    display:flex;align-items:center;gap:14px}
  .lfig::after{content:"";flex:1;max-width:120px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
  .lgr{background:linear-gradient(100deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---- labs hero: animated gradient wash + rotating seal ---- */
  .lhero{position:relative;overflow:hidden;padding:clamp(48px,6.5vh,84px) 0 56px}
  .lab-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .blob{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;will-change:transform}
  .blob.b1{width:clamp(440px,58vw,920px);aspect-ratio:1;top:-24%;right:-10%;opacity:.5;
    background:radial-gradient(circle,var(--g1),transparent 66%);animation:lab-drift1 15s ease-in-out infinite alternate}
  .blob.b2{width:clamp(360px,48vw,780px);aspect-ratio:1;bottom:-34%;left:-14%;opacity:.34;
    background:radial-gradient(circle,var(--g2),transparent 66%);animation:lab-drift2 19s ease-in-out infinite alternate}
  .blob.b3{width:clamp(280px,34vw,540px);aspect-ratio:1;top:16%;left:30%;opacity:.1;
    background:radial-gradient(circle,var(--cyan),transparent 66%);animation:lab-drift3 23s ease-in-out infinite alternate}
  @keyframes lab-drift1{to{transform:translate(-12vw,14vh) scale(1.18)}}
  @keyframes lab-drift2{to{transform:translate(10vw,-10vh) scale(1.12)}}
  @keyframes lab-drift3{to{transform:translate(9vw,8vh) scale(1.28)}}
  /* the workbench monitor: heading asks the question, one big terminal answers it.
     Stats sit top-right like a readout; the terminal takes the full stage below. */
  /* headline holds the left, the session terminal is the workbench monitor on the right —
     it gets the full column height instead of squatting under the copy */
  .lhero-grid{position:relative;z-index:1;display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(30px,4vw,64px);align-items:stretch}
  .lhero-copy{display:flex;flex-direction:column;justify-content:center}
  @media(max-width:980px){.lhero-grid{grid-template-columns:1fr}}
  .lab-seal .ring{position:absolute;inset:0;width:100%;height:100%;animation:lab-spin 24s linear infinite;
    transform-origin:center;will-change:transform}
  /* JS drives the labs rings via rAF so hover speed-ups ease instead of jumping */
  html.js .lab-seal .ring,html.js .press-ring{animation:none}
  .lab-seal text{font-family:var(--mono);font-weight:600;font-size:0.5938rem;letter-spacing:.3em;
    text-transform:uppercase;fill:var(--fg)}
  .lab-seal .tick,.press-ring .tick{fill:var(--g1)}
  .lab-core{position:absolute;inset:21%;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 38% 30%,#232331,#15151b);border:1px solid var(--line);
    box-shadow:inset 0 0 44px rgba(0,0,0,.55),0 20px 50px -24px rgba(0,0,0,.45)}
  .lab-core svg{width:66%;height:auto}
  @keyframes lab-spin{to{transform:rotate(360deg)}}
  /* the admin headline runs longer than the old two-worder — a touch smaller, one ch wider */
  .lhero h1{font-family:var(--sans);font-weight:700;font-size:clamp(2.375rem,4.7vw,4.25rem);
    letter-spacing:-0.035em;line-height:1.02;max-width:14ch}
  .lgr{background-size:220% 100%;animation:lab-gradshift 7s ease-in-out infinite alternate}
  @keyframes lab-gradshift{to{background-position:100% 0}}
  .lhero .lsub{margin-top:26px;font-size:clamp(0.9375rem,1.35vw,1.125rem);color:var(--fg-2);max-width:56ch;line-height:1.65}
  .lhero .lsub b{color:var(--fg);font-weight:600}
  /* the stats block, distilled: one quiet readout line instead of four shouting numbers */
  .lhero-read{margin-top:30px;font-family:var(--mono);font-size:0.8125rem;letter-spacing:.04em;
    color:var(--fg-2);border-top:1px dashed rgba(255,255,255,.18);padding-top:16px;max-width:56ch}
  /* hero terminal: labs explains itself in its own voice, typed on entry.
     Height is LOCKED — typed output scrolls inside the pre, it never grows the page */
  .lterm{display:flex;flex-direction:column;height:clamp(460px,58vh,640px);
    border-radius:18px;overflow:hidden;
    border:1px solid color-mix(in srgb,var(--g1) 40%,rgba(255,255,255,.2));
    background:rgba(9,9,13,.78);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    /* the monitor glows in today's gradient — it should read even on a dull panel */
    box-shadow:0 34px 80px -34px rgba(0,0,0,.7),
      0 0 44px -8px color-mix(in srgb,var(--g1) 22%,transparent),
      0 0 100px -20px color-mix(in srgb,var(--g2) 16%,transparent);
    cursor:text}
  .lterm-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
    background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.12)}
  .lterm-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.24)}
  .lterm-bar i:nth-child(1){background:var(--g1)}
  .lterm-bar .t{margin-left:auto;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.12em;
    color:rgba(255,255,255,.62)}
  .lterm pre{margin:0;padding:24px 30px 18px;flex:1;min-height:0;overflow-y:auto;
    font-family:var(--mono);font-size:1rem;line-height:2;color:#dcd8cf;
    white-space:pre-wrap;overscroll-behavior:contain}
  .lterm .dim{color:rgba(255,255,255,.58)}
  /* the prompt: type a command, or don't — it's an easter egg, not a gate */
  .lterm-in{display:flex;align-items:center;gap:12px;padding:14px 30px 18px;
    border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono)}
  .lterm-in .ps{color:var(--g1);font-weight:700;font-size:1rem}
  .lterm-in input{flex:1;background:none;border:none;color:var(--fg);
    font-family:var(--mono);font-size:1rem}
  .lterm-in input::placeholder{color:rgba(255,255,255,.6)}
  /* idle blinking cursor says "you can type here"; it hands over to the native caret on focus */
  .lterm-in .caret{flex:none}
  .lterm-in:focus-within .caret{display:none}
  .lterm-in input{caret-color:var(--g1)}
  /* the text caret is the focus indicator here — a ring around a terminal input reads as a form */
  .portal .lterm-in input:focus-visible{outline:none}
  .lterm-in:focus-within .ps{color:var(--g2)}
  .lterm pre::-webkit-scrollbar{width:8px}
  .lterm pre::-webkit-scrollbar-track{background:transparent}
  .lterm pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px;
    border:2px solid transparent;background-clip:padding-box}
  .lterm .cmd{color:var(--cyan)}
  .lterm b{color:var(--fg);font-weight:600}
  @media(max-width:980px){.lterm{margin-top:34px;height:400px}
    .lterm pre{font-size:0.875rem;line-height:1.85}}

  /* perf: ambience parks itself while its section is scrolled out of view */
  .anim-off .blob{animation-play-state:paused}

  .lsec{padding:clamp(66px,8.5vw,104px) 0}
  .lsec h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.75rem,3.8vw,3.25rem);letter-spacing:-0.03em;max-width:22ch}
  /* offset panel: every other dark section lifts a step so the blacks stop blending */
  .lsec.loff{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
    border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}

  /* ---- the toolkit: model-agnostic chips ---- */
  /* the cycling word sits in a fixed-width blank (JS measures the longest name) so the
     heading never re-wraps; the dashed baseline makes the spare space read as a blank */
  .lrobot{display:inline-block;white-space:nowrap;will-change:transform,opacity;text-align:left;
    border-bottom:3px dashed color-mix(in srgb,var(--g1) 45%,transparent);padding-bottom:.04em}
  /* this heading runs wider + a touch smaller so "which <name>" holds one line */
  #labToolkit h2{max-width:none;font-size:clamp(1.625rem,3.4vw,2.875rem)}
  .ltool-sub{font-family:var(--mono);font-size:0.8125rem;color:var(--fg-2);margin-top:16px}
  /* same keyline treatment as the field notes / homepage stat grids:
     shared 1px hairlines, dot top, model name mid, vendor pinned to the cell foot */
  .ltools{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;
    border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .ltool{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    min-height:132px;padding:22px 24px;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transition:background .3s ease}
  .ltool:hover{background:rgba(255,255,255,.045)}
  .ltool .dot{width:8px;height:8px;border-radius:50%;flex:none}
  .ltool .nm{font-family:var(--sans);font-weight:700;font-size:1.25rem;letter-spacing:-0.015em}
  .ltool .by{font-family:var(--mono);font-size:0.6875rem;color:var(--fg-2);letter-spacing:.06em;margin-top:auto}
  .ltool.kettle .nm{background:linear-gradient(100deg,var(--g1),var(--g2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  @media(max-width:640px){.ltools{grid-template-columns:1fr 1fr}
    .ltool{min-height:108px;padding:18px}}
  /* ---- the offer: a horizontal rail of service cards — the same pattern as the
     homepage work rail (fixed-width cards, edge-bleed track, progress bar + prev/next
     on desktop, snap + dots pager on mobile). The peeking next card is the affordance ---- */
  /* the <br> controls this heading's shape — the generic 22ch clamp would orphan "first." */
  #labBench h2{max-width:none}
  .lsec-sub{font-size:1.125rem;color:var(--fg-2);max-width:52ch;line-height:1.6}
  .arail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
    margin-top:18px;flex-wrap:wrap}
  .arail-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
  .arail-progress{width:130px;height:3px;background:rgba(255,255,255,.14);border-radius:4px;overflow:hidden}
  .arail-progress span{display:block;height:100%;width:100%;
    background:linear-gradient(90deg,var(--g1),var(--g2));transform:scaleX(0);transform-origin:left}
  .lbnav{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;
    color:var(--fg);font-size:1.125rem;cursor:pointer;display:grid;place-items:center;
    transition:border-color .2s,color .2s,opacity .2s,transform .2s}
  .lbnav:hover{border-color:var(--g1);color:var(--g2);transform:translateY(-2px)}
  .lbnav:disabled{opacity:.3;cursor:default;transform:none;border-color:var(--line);color:var(--fg)}
  /* the rail: full-bleed scroll viewport; the track's padding formula mirrors .blog-track
     but uses % (the surface is inset from the viewport, so 100vw would overshoot) */
  .arail{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-top:clamp(30px,3.5vw,46px)}
  .arail::-webkit-scrollbar{display:none}
  .arows{display:flex;gap:22px;width:max-content;
    padding-inline:max(var(--pad),calc((100% - 1400px)/2 + var(--pad)))}
  .arow{flex:none;width:clamp(300px,27vw,400px);display:flex;flex-direction:column;align-items:stretch}
  .a-im{position:relative;flex:none;border-radius:18px;overflow:hidden;aspect-ratio:16/11;
    margin-bottom:20px;border:1px solid rgba(255,255,255,.15);box-shadow:0 24px 60px -36px rgba(0,0,0,.55)}
  .a-im .ph{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .arow:hover .a-im .ph{transform:scale(1.04)}
  .a-im::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(13,13,17,.5))}
  .lexp-id{position:absolute;top:16px;left:16px;z-index:1;
    font-family:var(--mono);font-size:0.75rem;font-weight:600;letter-spacing:.1em;color:var(--fg);
    background:rgba(15,15,19,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16)}
  .a-tag{font-family:var(--mono);font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;
    background:linear-gradient(100deg,var(--g1),var(--g2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .arow h3{margin-top:12px;font-family:var(--sans);font-weight:700;
    font-size:clamp(1.375rem,1.8vw,1.75rem);letter-spacing:-0.02em;line-height:1.1}
  /* text column fills the card so the proof line sits on a shared baseline across the rail */
  .arow > div:last-child{display:flex;flex-direction:column;flex:1}
  .arow .desc{margin:14px 0 20px;font-size:0.9375rem;line-height:1.6;color:var(--fg-2)}
  .arow .desc b{color:var(--fg);font-weight:600}
  .a-proof{margin-top:auto;padding-top:16px;border-top:1px dashed rgba(255,255,255,.22);
    font-family:var(--mono);font-size:0.7812rem;line-height:1.6;color:var(--fg-2)}
  .a-proof b{font-weight:600;color:var(--g2)}
  .arail-pager{display:none}
  @keyframes ap-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
  @media(max-width:820px){
    .arail{scroll-snap-type:x mandatory;margin-top:14px}
    .arow{width:min(78vw,400px);scroll-snap-align:center}
    .arail-nav{display:none}
    .arail-pager{display:flex;align-items:center;gap:14px;margin-top:26px;
      font-family:var(--mono);font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
    .ap-arr{display:inline-block;animation:ap-nudge 1.6s ease-in-out infinite}
    .ap-dots{display:flex;gap:7px}
    .ap-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
      transition:background .3s,transform .3s}
    .ap-dots i.on{background:var(--g1);transform:scale(1.3)}
    .ap-idx{margin-left:auto;color:var(--fg)}}

  .btn-panel{position:relative;border-radius:18px;padding:34px 32px 30px;text-align:center;overflow:hidden;
    background:var(--bg-2);border:1px solid var(--line)}
  .btn-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(80% 60% at 50% 0%,rgba(255,35,96,.1),transparent 65%)}
  .btn-panel .pid{font-family:var(--mono);font-size:0.8125rem;font-weight:600;letter-spacing:.1em;color:var(--g1);
    display:block;margin-bottom:6px}
  .btn-panel h3{font-family:var(--sans);font-weight:700;font-size:1.5rem;letter-spacing:-0.02em;margin-bottom:8px}
  .btn-panel .purpose{font-family:var(--mono);font-size:0.8125rem;color:var(--fg-2);margin-bottom:48px}
  .bigred-wrap{position:relative;width:126px;height:126px;margin:0 auto}
  .press-ring{position:absolute;inset:-42px;width:210px;height:210px;pointer-events:none;
    animation:lab-spin 16s linear infinite reverse;transform-origin:center;will-change:transform}
  .press-ring text{font-family:var(--mono);font-size:0.6875rem;font-weight:600;letter-spacing:.26em;
    text-transform:uppercase;fill:var(--fg-2)}
  .press-ring .tick{fill:#ff2360}
  .bigred{position:relative;width:126px;height:126px;border-radius:50%;display:block;
    border:none;cursor:pointer;
    background:radial-gradient(circle at 34% 28%,#ff6d95,#ff2360 55%,#a80038);
    box-shadow:0 13px 0 #7c0030,0 22px 44px -12px rgba(255,35,96,.36),inset 0 3px 10px rgba(255,255,255,.35);
    transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1),filter .18s}
  /* hover: the button rises to meet the finger — daring you. Press still slams it down */
  .bigred:hover,.bigred:focus-visible{transform:translateY(-3px);filter:brightness(1.07) saturate(1.06);
    box-shadow:0 16px 0 #7c0030,0 30px 54px -12px rgba(255,35,96,.48),inset 0 3px 10px rgba(255,255,255,.4)}
  .bigred:active{transform:translateY(9px);transition-duration:.08s;filter:none;
    box-shadow:0 4px 0 #7c0030,0 12px 26px -12px rgba(255,35,96,.4),inset 0 3px 10px rgba(255,255,255,.3)}
  .bigred span{font-family:var(--mono);font-size:0.6875rem;font-weight:600;letter-spacing:.14em;color:#3d0016}
  .btn-log{font-family:var(--mono);font-size:0.8125rem;color:var(--fg-2);margin-top:50px;min-height:1.6em}
  .btn-log .warn{color:var(--g1)}

  /* alarm + fake shutdown */
  .alarm{position:absolute;inset:var(--bez);border-radius:18px 0 0 18px;overflow:hidden;z-index:7;display:grid;
    place-items:center;text-align:center;
    background:rgba(16,6,10,.94);opacity:0;pointer-events:none;transition:opacity .2s}
  .alarm.on{opacity:1}
  .alarm.on .alarm-strobe{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 70% at 50% 50%,rgba(255,35,96,.22),transparent 75%);
    animation:lab-strobe .46s steps(2) infinite}
  @keyframes lab-strobe{50%{opacity:.15}}
  .alarm-head{position:relative;font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;
    font-size:clamp(1.625rem,4vw,3.25rem);color:#ff2360;margin-bottom:22px}
  .alarm pre{position:relative;font-family:var(--mono);font-size:clamp(0.8125rem,1.5vw,0.9688rem);line-height:2;
    color:var(--fg-2);text-align:left;min-width:min(430px,84vw);min-height:12em}
  .alarm pre .ok{color:var(--g2)}
  .portal.crt{clip-path:none !important;transform-origin:50% 50%;
    animation:lab-crt .5s cubic-bezier(.75,0,.95,.4) forwards}
  @keyframes lab-crt{0%{transform:scale(1);filter:brightness(1)}
    55%{transform:scale(1,.012);filter:brightness(2.6)}
    82%{transform:scale(.6,.006);filter:brightness(4)}
    100%{transform:scale(.001,.003);filter:brightness(6)}}
  .portal.crt-back{animation:lab-crt-back .45s cubic-bezier(.2,.7,.3,1.2) forwards}
  @keyframes lab-crt-back{0%{transform:scale(.001,.003);filter:brightness(6)}
    45%{transform:scale(1,.012);filter:brightness(2.6)}
    100%{transform:scale(1);filter:brightness(1)}}

  /* ---- light break: the human-bit band goes cream, like the homepage manifesto ---- */
  .lband{background:var(--paper-2);color:#141419}
  /* the human bit: statement + copy left, the Big Red Button panel keeps it company right */
  .lhb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);
    align-items:center;margin-top:8px}
  .lhuman-sub{font-size:clamp(0.9375rem,1.35vw,1.125rem);line-height:1.65;max-width:46ch;
    margin:22px 0 0;color:#4a463f}
  @media(max-width:860px){.lhb-grid{grid-template-columns:1fr;gap:44px}
    .lhb-grid .btn-panel{max-width:420px}}
  /* the labs gradient's pale end vanishes on cream — run it dark on light bands */
  .lband .lgr{background-image:linear-gradient(100deg,var(--pink-d),var(--violet-d))}
  .lband .lfig{color:var(--violet-d)}
  .lband .lfig::after{background:linear-gradient(90deg,var(--violet-d),transparent)}
  .lband .btn-panel{background:#fff;border-color:rgba(0,0,0,.06);
    box-shadow:0 34px 80px -55px rgba(50,25,0,.25)}
  .lband .btn-panel::before{background:radial-gradient(80% 60% at 50% 0%,rgba(255,35,96,.07),transparent 65%)}
  .lband .btn-panel .purpose,.lband .btn-log{color:#6e6960}
  .lband .btn-log .warn{color:#d1004f}
  .lband .press-ring text{fill:#4a453d}

  /* ---- CTA + footer ---- */
  .lcta{text-align:center;padding-top:clamp(76px,9vw,110px);padding-bottom:clamp(80px,10vw,120px)}
  .lcta .bird-big{width:clamp(84px,8vw,120px);height:auto;margin:0 auto 24px;display:block;
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.32))}
  .lcta h2{font-family:var(--sans);font-weight:700;font-size:clamp(2.25rem,5.4vw,4.5rem);letter-spacing:-0.035em;
    line-height:1;max-width:16ch;margin:0 auto 18px}
  .lcta p{color:var(--fg-2);max-width:48ch;margin:0 auto 38px;font-size:clamp(0.9375rem,1.3vw,1.0625rem)}
  .lcta-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
  .btn-grad{--cap-nudge:0.167em;font-family:var(--sans);font-weight:600;font-size:0.9375rem;
    padding:calc(15px + var(--cap-nudge)) 30px calc(15px - var(--cap-nudge));border-radius:12px;
    background:linear-gradient(100deg,var(--g1),var(--g2));color:#141419;display:inline-block;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
  .btn-grad:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px color-mix(in srgb,var(--g1) 38%,transparent)}
  .btn-ghost-l{font-family:var(--mono);font-size:0.875rem;padding:15px 26px;border-radius:12px;background:none;cursor:pointer;
    border:1px solid var(--line);color:var(--fg-2);transition:color .25s,border-color .25s}
  .btn-ghost-l:hover{color:var(--fg);border-color:var(--fg-2)}
  /* ---- experiment proposal form ---- */
  .lcta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,5vw,80px);align-items:center;text-align:left}
  @media(max-width:880px){.lcta-grid{grid-template-columns:1fr}}
  .lcta-grid .bird-big{margin:0 0 26px}
  .lcta-grid h2{margin:0 0 18px}
  .lcta-grid p{margin:0 0 32px}
  .lform{position:relative;background:var(--paper-2);border:1px solid var(--line-d);border-radius:18px;padding:30px;
    color:#141419;box-shadow:0 32px 70px -40px rgba(0,0,0,.45)}
  .lform-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
    font-family:var(--mono);font-size:0.75rem;flex-wrap:wrap;gap:10px}
  .lform-head .st{color:rgba(20,20,25,.55);letter-spacing:.12em;text-transform:uppercase}
  .lform-head .fdot{width:9px;height:9px;border-radius:50%;background:linear-gradient(100deg,var(--g1),var(--g2));
    box-shadow:0 0 0 4px color-mix(in srgb,var(--g1) 18%,transparent)}
  .lchat{display:flex;flex-direction:column;gap:10px;height:340px;overflow-y:auto;
    padding:4px 2px 10px;margin-bottom:14px;scroll-behavior:smooth;overscroll-behavior:contain}
  .lmsg{max-width:86%;padding:10px 15px;border-radius:18px;font-size:0.9375rem;line-height:1.5;
    animation:lmsg-in .3s cubic-bezier(.2,.8,.3,1.1) both}
  @keyframes lmsg-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  .lmsg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line-d);
    border-bottom-left-radius:5px;color:#141419}
  .lmsg.bot b{background:linear-gradient(100deg,var(--g1),var(--g2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .lmsg.me{align-self:flex-end;background:linear-gradient(100deg,var(--g1),var(--g2));
    border-bottom-right-radius:5px;color:#141419;font-weight:500}
  .lmsg.typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
  .lmsg.typing i{width:6px;height:6px;border-radius:50%;background:rgba(20,20,25,.45);
    animation:lblink 1s infinite}
  .lmsg.typing i:nth-child(2){animation-delay:.18s}
  .lmsg.typing i:nth-child(3){animation-delay:.36s}
  @keyframes lblink{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
  .lqr{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:92%;
    animation:lmsg-in .3s cubic-bezier(.2,.8,.3,1.1) both}
  .lqr button{font-family:var(--mono);font-size:0.75rem;padding:8px 14px;border-radius:999px;
    border:1px solid rgba(20,20,25,.22);background:none;color:rgba(20,20,25,.6);
    cursor:pointer;user-select:none;transition:.2s}
  .lqr button:hover{border-color:#141419;color:#141419}
  .lqr button:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
  .lchat-bar{display:flex;gap:10px}
  .lchat-bar input{flex:1;font-family:var(--body);font-size:0.9375rem;padding:13px 15px;border-radius:999px;
    border:1px solid var(--line-d);background:#fff;color:#141419;transition:border-color .2s,box-shadow .2s}
  .lchat-bar input::placeholder{color:rgba(20,20,25,.35)}
  .lchat-bar input:focus{outline:none;border-color:var(--g1);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--g1) 20%,transparent)}
  .lchat-bar input:disabled{opacity:.45}
  .lchat-send{width:48px;height:48px;flex:none;border:none;border-radius:50%;cursor:pointer;
    font-size:1.125rem;color:#141419;background:linear-gradient(100deg,var(--g1),var(--g2));
    transition:transform .2s,box-shadow .2s}
  .lchat-send:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--g1) 42%,transparent)}
  .lchat-send:disabled{opacity:.45;transform:none;box-shadow:none;cursor:default}
  .lform-note{font-family:var(--mono);font-size:0.75rem;color:rgba(20,20,25,.5);margin-top:12px}
  /* mode toggle: bench_bot ⇄ classic form */
  .lmode{display:flex;gap:4px;padding:3px;border-radius:999px;border:1px solid rgba(20,20,25,.18);
    margin-left:auto;margin-right:14px}
  .lmode button{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.04em;padding:5px 12px;
    border-radius:999px;border:none;background:none;color:rgba(20,20,25,.55);cursor:pointer;transition:.2s}
  .lmode button:hover{color:#141419}
  .lmode button.on{background:#141419;color:var(--paper-2)}
  .lmode button:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
  /* the classic form, for people who'd rather not chat to a robot about robots */
  .cform{display:grid;gap:15px}
  .cfield{display:flex;flex-direction:column;gap:7px}
  .cfield label,.cfield-label{font-family:var(--mono);font-size:0.75rem;color:rgba(20,20,25,.55)}
  .cfield input,.cfield textarea{font-family:var(--body);font-size:0.9375rem;padding:13px 15px;border-radius:12px;
    border:1px solid var(--line-d);background:#fff;color:#141419;transition:border-color .2s,box-shadow .2s}
  .cfield input::placeholder,.cfield textarea::placeholder{color:rgba(20,20,25,.35)}
  .cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--g1);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--g1) 20%,transparent)}
  .cfield textarea{min-height:96px;resize:vertical}
  .crow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.crow2{grid-template-columns:1fr}}
  .cpills{display:flex;flex-wrap:wrap;gap:8px}
  .cpills input{position:absolute;opacity:0;width:0;height:0}
  .cpills label{font-family:var(--mono);font-size:0.75rem;padding:8px 14px;border-radius:999px;
    border:1px solid rgba(20,20,25,.22);color:rgba(20,20,25,.6);cursor:pointer;user-select:none;transition:.2s}
  .cpills label:hover{border-color:#141419;color:#141419}
  .cpills input:checked+label{background:linear-gradient(100deg,var(--g1),var(--g2));
    border-color:transparent;color:#141419;font-weight:600}
  .cpills input:focus-visible+label{outline:2px solid var(--g2);outline-offset:2px}
  .cform .csend{border:none;cursor:pointer;justify-self:start;margin-top:4px}
  .lerr{border-color:#ff2360 !important;box-shadow:0 0 0 3px rgba(255,35,96,.16) !important}
  .cform-done{text-align:center;padding:42px 18px;font-family:var(--mono)}
  .cform-done .fx{font-size:2.375rem;margin-bottom:14px}
  .cform-done .exp-no{font-size:1.125rem;font-weight:600;color:#141419;margin-bottom:10px}
  .cform-done .exp-no b{background:linear-gradient(100deg,var(--g1),var(--g2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .cform-done p{color:rgba(20,20,25,.6);font-size:0.8125rem;margin:0}

  .lfoot{border-top:1px solid var(--line);padding:26px 0 34px;font-family:var(--mono);font-size:0.75rem;color:var(--fg-2)}
  .lfoot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .lfoot .g{background:linear-gradient(100deg,var(--g1),var(--g2));-webkit-background-clip:text;
    background-clip:text;color:transparent;font-weight:600}

  /* toast (shown on the homepage after a "shutdown") */
  .labs-toast{position:fixed;left:50%;bottom:30px;z-index:640;transform:translate(-50%,16px);opacity:0;
    pointer-events:none;font-family:var(--mono);font-size:0.8125rem;color:var(--fg);text-align:center;
    background:rgba(22,22,28,.94);border:1px solid rgba(255,255,255,.14);border-radius:12px;
    padding:14px 22px;box-shadow:0 20px 50px -20px rgba(0,0,0,.55);max-width:min(520px,88vw);
    transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
  .labs-toast.show{opacity:1;transform:translate(-50%,0)}

  /* flying gradient birds */
  .lab-fly{position:fixed;top:0;left:0;width:62px;height:62px;z-index:650;pointer-events:none;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.32))}
  .lab-fly svg{width:100%;height:100%;overflow:visible}

  @media(prefers-reduced-motion:reduce){
    .lrv{opacity:1;transform:none}
    .ap-arr{animation:none}
    .labs-logo-btn .pulse{animation:none}
    .portal.open,.portal.closing{animation:none;transform:none}
    .portal.crt,.portal.crt-back{animation:none}
    .blob,.lab-seal .ring,.press-ring,.lgr{animation:none}
    .portal.tube .crt-glass::before,.portal.degaussing .surface,.portal.degaussing .crt-glass,
    .portal.eink.degaussing .surface,
    .portal.tube.settled:not(.degaussing) .surface,.portal.plasma.settled:not(.degaussing) .surface{animation:none}
  }