/* ===========================================================================
   site.css , shared interior primitives for aihd.studio (v3 , editorial pass)
   Layered on aihd.css (token spine). Same class vocabulary as v2 so it drops
   straight into the Astro pages, but: more air, a larger editorial type scale,
   and a proper motion system , staggered page-load rise, drawn nav underlines,
   refined index hovers, and route-transition fades. Austere, one Klein blue.

   PORTING MAP (where each block goes in the Astro project):
     · :root additions, .rise/.reveal, .route-veil, base resets   -> Base.astro <style is:global>
     · .nav / .mobile-menu / .foot / search-*                     -> Base.astro <style is:global>
     · everything else (bands, heroes, idx, cards, diagrams...)   -> public/styles/site.css
   =========================================================================== */

/* ---- extra tokens this pass leans on ------------------------------------- */
:root{
  --shell:1840px;              /* generous cap so ultra-wide keeps a measure, but rarely bites */
  --pad:clamp(22px, 4.5vw, 120px); /* side gutter scales with viewport width */
  --rule:1px solid var(--line);
  --rule-ink:1px solid var(--ink);
  --dur-xslow:.9s;
  --ease-rise:cubic-bezier(.2,.7,.2,1);
}

/* ---- base resets / shell ------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; min-height:100dvh; -webkit-font-smoothing:antialiased;
  background:var(--paper); color:var(--ink); font-family:var(--font)}
a{color:inherit}
.wrap{max-width:var(--shell); margin:0 auto; padding:0 var(--pad)}
@media(max-width:760px){ :root{--pad:20px} }

/* ---- rhythm , more generous, gallery-grade air --------------------------- */
.band{padding:132px 0; border-top:var(--rule); position:relative}
.band.tight{padding:84px 0}
.band.last{border-bottom:var(--rule)}
.lead-body{color:var(--ink-2); line-height:1.64; max-width:60ch; margin:0 0 18px; font-size:1.02rem}
.lead-body a,.prose a{color:var(--accent); text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 1px;
  background-position:0 100%; background-repeat:no-repeat; padding-bottom:1px;
  transition:background-size var(--dur) var(--ease-out)}
.lead-body a:hover,.prose a:hover{background-size:100% 1px}

/* ===========================================================================
   MOTION SYSTEM
   =========================================================================== */

/* ---------------------------------------------------------------------------
   MOTION , frozen-safe by design.
   Entrances animate TRANSFORM ONLY (never opacity from 0), so content is always
   legible even if the animation/transition timeline is paused; on a real browser
   they play as a clean staggered rise. Hover/interaction transitions are applied
   at rest-correct states. Everything stands down under reduced-motion.
   ------------------------------------------------------------------------- */

/* page-load choreography , elements marked .rise settle up, staggered by --i.
   CSS-animation driven (fill:both) , always resolves to the visible end-state. */
.rise{animation:riseUp var(--dur-xslow) var(--ease-rise) both;
  animation-delay:calc(var(--i, 0) * 70ms)}
@keyframes riseUp{from{transform:translateY(24px)} to{transform:none}}

/* scroll reveal , sections settle up as they enter (IntersectionObserver).
   Only shifted once JS has booted (html.js); opacity is never touched, so a
   paused timeline or JS failure can never hide copy. */
html.js .reveal{transform:translateY(22px); transition:transform var(--dur-slow) var(--ease-rise)}
html.js .reveal.in{transform:none}
/* grouped children stagger inside a revealed block */
html.js .reveal.stagger.in > *{animation:riseUp var(--dur-slow) var(--ease-rise) both}
html.js .reveal.stagger.in > *:nth-child(2){animation-delay:.06s}
html.js .reveal.stagger.in > *:nth-child(3){animation-delay:.12s}
html.js .reveal.stagger.in > *:nth-child(4){animation-delay:.18s}
html.js .reveal.stagger.in > *:nth-child(5){animation-delay:.24s}

/* route transition , a thin veil fades the page OUT on internal nav. Default
   hidden, so a JS failure never covers the page. */
.route-veil{position:fixed; inset:0; z-index:300; background:var(--paper);
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease-out)}
body.leaving .route-veil{opacity:1}

@media (prefers-reduced-motion:reduce){
  .rise,.reveal{animation:none !important; transform:none !important; transition:none !important}
  html.js .reveal.stagger.in > *{animation:none !important}
  .route-veil{display:none}
}

/* ===========================================================================
   NAV , glass, austere, drawn underline on hover
   =========================================================================== */
.nav{position:sticky; top:0; z-index:50; border-bottom:var(--rule);
  background:var(--glass); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
.brand{font-family:var(--font-display); font-weight:600; font-size:1.34rem; letter-spacing:-.03em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:baseline; line-height:1}
.brand .ii{position:relative; display:inline-block}
.brand .ii::after{content:""; position:absolute; left:50%; transform:translateX(-50%); width:.15em; height:.15em; border-radius:50%; background:var(--accent); top:.04em}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{position:relative; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:2px 0; transition:color var(--dur-fast) var(--ease-out)}
.nav-links a:not(.cta)::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease-out)}
.nav-links a:not(.cta):hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a.cta{font-family:var(--font-display); font-weight:600; font-size:.84rem; letter-spacing:-.01em; text-transform:none; color:#fff; background:var(--accent); padding:8px 16px; border-radius:7px; transition:background var(--dur-fast) var(--ease-out)}
.nav-links a.cta::after{display:none}
.nav-links a.cta:hover{background:var(--accent-press); color:#fff}
.nav-burger{display:none; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:40px; height:40px; background:var(--panel); border:var(--rule); border-radius:9px; cursor:pointer; padding:0}
.nav-burger span{display:block; width:17px; height:1.5px; background:var(--ink); transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{display:none; position:fixed; top:var(--nav-h); left:0; right:0; z-index:49;
  background:var(--glass-2); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border-bottom:var(--rule); box-shadow:0 24px 44px rgba(20,21,26,.14); padding:8px 20px 20px; flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu a,.mobile-menu .mm-search{font-family:var(--font-display); font-weight:500; font-size:1.18rem; letter-spacing:-.015em; color:var(--ink);
  text-decoration:none; text-align:left; padding:15px 2px; border:0; border-bottom:var(--rule); background:none; cursor:pointer; width:100%}
.mobile-menu .mm-search{color:var(--muted); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:0}
@media(max-width:820px){
  .nav-links a:not(.cta),.nav-links .nav-search{display:none}
  .nav-burger{display:flex}
}

/* ===========================================================================
   FOOTER
   =========================================================================== */
.foot{border-top:var(--rule); margin-top:0; background:var(--paper-2)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; justify-content:space-between; padding-top:44px; padding-bottom:56px}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 24px}
.foot-links a{position:relative; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color var(--dur-fast) var(--ease-out)}
.foot-links a:hover{color:var(--ink)}
.foot .mono{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.foot .av{display:flex; align-items:center; gap:12px}

/* ===========================================================================
   COORDINATE RUNNING HEAD , the connective tissue
   =========================================================================== */
.sec-head{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:baseline;
  padding-bottom:16px; border-bottom:var(--rule-ink); margin:0 0 64px}
.sec-head .code,.sec-head .name,.sec-head .fol{font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase}
.sec-head .code{color:var(--accent)}
.sec-head .name{color:var(--ink)}
.sec-head .fol{color:var(--muted); text-align:right}

/* ===========================================================================
   CORNER-ANCHORED PAGE HERO (interior pages)
   =========================================================================== */
.page-hero{position:relative; padding:64px 0 52px; overflow:hidden; border-bottom:var(--rule)}
.page-hero .reg{color:var(--ink)}
.ph-stage{position:relative; z-index:2; width:100%; display:grid;
  grid-template-columns:1.5fr 1fr; grid-template-rows:auto 1fr auto; gap:30px;
  min-height:clamp(400px, 60vh, 620px)}
.ph-eyebrow{grid-column:1; grid-row:1; align-self:start; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0}
.ph-meta{grid-column:2; grid-row:1; justify-self:end; align-self:start; text-align:right; display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.ph-title{grid-column:1; grid-row:2; align-self:center; margin:.2em 0 0; font-family:var(--font-display); font-weight:600; letter-spacing:-.038em; line-height:1.0;
  font-size:clamp(2.3rem,5.4vw,5rem); max-width:16ch}
.ph-title .bluedot{display:inline-block; width:.13em; height:.13em; border-radius:50%; background:var(--accent); margin-left:.06em; margin-bottom:.06em}
.ph-lede{grid-column:1; grid-row:3; align-self:end; color:var(--ink-2); max-width:56ch; line-height:1.6; font-size:1.04rem; margin:0}
.ph-foot{grid-column:2; grid-row:3; justify-self:end; align-self:end; text-align:right; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0}

/* ===========================================================================
   NUMBERED INDEX / LIST GRAMMAR , the core content layout
   =========================================================================== */
.idx{list-style:none; margin:0; padding:0}
.idx-row{position:relative; border-top:var(--rule)}
.idx-row:last-child{border-bottom:var(--rule)}
.idx-row::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent); transition:width var(--dur-slow) var(--ease-out)}
.idx-row:hover::after{width:100%}
.idx-row .r{display:grid; grid-template-columns:clamp(60px,7vw,110px) 1fr auto auto; gap:28px; align-items:baseline;
  padding:30px 0; text-decoration:none; color:inherit; transition:padding-left var(--dur) var(--ease-out)}
.idx-row a.r:hover{padding-left:20px}
.idx-row .no{font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.2vw,2.8rem); letter-spacing:-.03em; color:var(--ink-2); line-height:.88; transition:color var(--dur) var(--ease-out)}
.idx-row a.r:hover .no{color:var(--accent)}
.idx-row .ti{font-family:var(--font-display); font-weight:600; font-size:clamp(1.08rem,1.8vw,1.42rem); letter-spacing:-.015em; color:var(--ink)}
.idx-row .note{font-family:var(--body); font-size:.95rem; color:var(--muted); line-height:1.5; max-width:46ch}
.idx-row .meta{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); align-self:center; white-space:nowrap; transition:color var(--dur) var(--ease-out)}
.idx-row a.r:hover .meta{color:var(--ink)}

/* ===========================================================================
   CARDS
   =========================================================================== */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{border:var(--rule); border-radius:12px; background:var(--panel); padding:26px; display:flex; flex-direction:column; gap:10px;
  transition:transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}
.card:hover{transform:translateY(-3px); border-color:var(--hair); box-shadow:0 18px 40px rgba(20,21,26,.08)}
.card .kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card h3{font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:-.015em; line-height:1.12; margin:0}
.card p{color:var(--ink-2); line-height:1.55; margin:0; font-size:.95rem}
.card.accent{border-color:var(--accent); background:var(--accent-soft)}
.card.accent .kick{color:var(--accent)}
.card.metal{background:var(--chrome); border-color:var(--silver-edge); position:relative; overflow:hidden}
.card.metal::after{content:""; position:absolute; inset:0; background:var(--brush); mix-blend-mode:overlay; opacity:.8; pointer-events:none}
.card.metal>*{position:relative; z-index:2}

/* ---- callout ---- */
.callout{border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:12px; padding:24px 26px}
.callout .kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
.callout h3{font-family:var(--font-display); font-weight:600; font-size:1.16rem; letter-spacing:-.015em; margin:0 0 6px}
.callout p{color:var(--ink-2); margin:0; line-height:1.5}

/* ---- cross-link CTA card ---- */
.cta-card{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
  border:1px solid var(--accent); background:var(--accent-soft); border-radius:14px; padding:32px 34px;
  transition:box-shadow var(--dur) var(--ease-out)}
.cta-card:hover{box-shadow:0 20px 46px rgba(29,43,212,.14)}
.cta-card .ct-h{font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.02em; margin:0; max-width:30ch}
.cta-card .ct-k{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}

/* section intro line */
.sec-intro{color:var(--ink-2); line-height:1.62; max-width:62ch; margin:-40px 0 44px; font-size:1.02rem}

/* ===========================================================================
   SEARCH , glass command palette
   =========================================================================== */
.nav-search{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:var(--rule); border-radius:99px; padding:6px 11px; background:var(--panel); cursor:pointer; transition:var(--dur-fast) var(--ease-out)}
.nav-search:hover{color:var(--ink); border-color:var(--hair)}
.nav-search kbd{font-family:var(--mono); font-size:.9em; background:var(--paper-2); border:var(--rule); border-radius:4px; padding:1px 5px; color:var(--muted)}
.search-overlay{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; padding:14vh 20px 20px;
  background:rgba(20,21,26,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.search-overlay.open{display:flex}
.search-modal{width:min(600px,100%); background:var(--glass-2); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-hi); border-radius:16px; box-shadow:0 30px 80px rgba(20,21,26,.32); overflow:hidden}
.search-top{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:var(--rule)}
.search-input{flex:1; border:0; background:transparent; font-family:var(--font); font-size:1.05rem; color:var(--ink); outline:none}
.search-top .esc{font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:var(--rule); border-radius:5px; padding:3px 7px}
.search-results{max-height:52vh; overflow-y:auto; padding:8px}
.search-hit{display:block; text-decoration:none; color:inherit; padding:12px 14px; border-radius:10px; transition:background var(--dur-fast)}
.search-hit:hover,.search-hit.sel{background:var(--accent-soft)}
.search-hit .ht{font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-.01em; margin:0 0 3px}
.search-hit .hp{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 3px}
.search-hit .hd{font-size:.86rem; color:var(--muted); margin:0; line-height:1.4}
.search-empty{padding:26px 16px; text-align:center; font-size:.9rem; color:var(--muted)}

/* ---- responsive ---- */
@media(max-width:880px){
  .band{padding:96px 0}
  .ph-stage{grid-template-columns:1fr; grid-template-rows:none; gap:22px; min-height:0}
  .ph-eyebrow,.ph-meta,.ph-title,.ph-lede,.ph-foot{grid-column:1; grid-row:auto; justify-self:start; text-align:left}
  .ph-title{align-self:start}
  .ph-meta{flex-direction:row; flex-wrap:wrap; gap:8px 16px}
  .cards.three{grid-template-columns:1fr}
  .sec-intro{margin-top:-24px}
}
@media(max-width:560px){
  .idx-row .r{grid-template-columns:44px 1fr; gap:14px; row-gap:6px; padding:24px 0}
  .idx-row .note{grid-column:2}
  .idx-row .meta{grid-column:2; justify-self:start}
  .sec-head{margin-bottom:44px}
}

/* ===========================================================================
   INTERIOR-PAGE PRIMITIVES , shared across guide / tips / about / animations /
   downloads. Carried from v2, kept on-system so every page reads as one thing.
   =========================================================================== */

/* ---- numbered steps ---- */
.steps{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.step{background:var(--panel); padding:28px; display:grid; grid-template-columns:clamp(48px,5vw,76px) 1fr; gap:22px; align-items:start}
.step.accent{background:var(--accent-soft)}
.step .sno{font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.4vw,2.1rem); letter-spacing:-.03em; color:var(--ink-2); line-height:.9}
.step.accent .sno{color:var(--accent)}
.step h3{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; margin:0 0 8px}
.step p{color:var(--ink-2); line-height:1.55; margin:0 0 12px; font-size:.95rem; max-width:62ch}
.step p:last-child{margin-bottom:0}

/* ---- code block ---- */
.codeblock{position:relative; background:var(--grey-5); border-radius:9px; margin:10px 0; overflow:hidden}
.codeblock pre{margin:0; padding:15px 54px 15px 16px; overflow-x:auto; font-family:var(--mono); font-size:.82rem; line-height:1.5; color:#e8eaee; white-space:pre}
.codeblock .copy{position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:5px; padding:5px 8px; cursor:pointer; transition:var(--dur-fast)}
.codeblock .copy:hover{color:#fff; background:rgba(255,255,255,.16)}
.codeblock .copy.done{color:#8fa0ff; border-color:#8fa0ff}
code.inline{font-family:var(--mono); font-size:.86em; background:var(--paper-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink)}

/* ---- pipeline chips ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 26px}
.chip{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line); border-radius:99px; padding:6px 12px; background:var(--panel)}
.chip.on{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.chip-sep{color:var(--muted); font-family:var(--mono); font-size:.7rem}

/* ---- video grid ---- */
.vidgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.vidcard{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.vidcard.wide{grid-column:1 / -1}
.vidcard .frame{background:var(--grey-5); position:relative; aspect-ratio:16/9; display:block}
.vidcard video{display:block; width:100%; height:100%; object-fit:cover; background:var(--grey-5)}
.vidcard .cap{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:16px 18px}
.vidcard .cap .t{font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:-.01em; margin:0 0 4px}
.vidcard .cap .d{font-family:var(--body); font-size:.9rem; color:var(--muted); line-height:1.45; margin:0; max-width:48ch}
.vidcard .cap .fn{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; align-self:flex-start}

/* ---- two-column prose + sidebar ---- */
.split-prose{display:grid; grid-template-columns:1.4fr .9fr; gap:56px; align-items:start}
.prose p{color:var(--ink-2); line-height:1.68; margin:0 0 18px; font-size:1.06rem; max-width:60ch}
.sidecard{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:24px; margin-bottom:16px}
.sidecard .kick{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.sidecard .row{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; padding:9px 0; border-top:1px solid var(--line)}
.sidecard .row:first-of-type{border-top:0}
.sidecard .row .k{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sidecard .row .v{font-size:.92rem; color:var(--ink); line-height:1.4}
.sidecard ol{margin:0; padding-left:0; list-style:none; counter-reset:s}
.sidecard ol li{counter-increment:s; padding:8px 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--ink); display:flex; gap:12px}
.sidecard ol li:first-child{border-top:0}
.sidecard ol li::before{content:"0" counter(s); font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.06em}

/* ---- computer-screen frame ---- */
.screen{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:0 14px 40px rgba(20,21,26,.10)}
.screen-bar{display:flex; align-items:center; gap:12px; padding:11px 15px; border-bottom:1px solid var(--line);
  background:var(--glass); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%)}
.screen-dots{display:flex; gap:7px}
.screen-dots i{width:11px; height:11px; border-radius:50%; background:var(--grey-3); box-shadow:inset 0 0 0 1px rgba(20,21,26,.06)}
.screen-dots i:nth-child(1){background:#e0726a} .screen-dots i:nth-child(2){background:#e5b95a} .screen-dots i:nth-child(3){background:#7fb37a}
.screen-fn{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.screen-body{position:relative; background:var(--grey-5); display:block}
.screen-body.paper{background:var(--paper)}

/* ---- glass play button ---- */
.playbtn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%;
  background:var(--glass-2); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--glass-hi); box-shadow:0 10px 26px rgba(20,21,26,.28), inset 0 1px 0 rgba(255,255,255,.8);
  display:grid; place-items:center; cursor:pointer; z-index:4; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.playbtn::after{content:""; width:0; height:0; border-left:17px solid var(--ink); border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px}
.playbtn:hover{transform:translate(-50%,-50%) scale(1.06)}
.screen.playing .playbtn{opacity:0; pointer-events:none}

/* ---- pop-up glass panel ---- */
.popcard{background:var(--glass-2); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-hi); border-radius:14px; box-shadow:0 22px 54px rgba(20,21,26,.20); padding:20px 22px; z-index:5; position:relative}
.popcard .kick{font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
.popcard h4{font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:-.015em; margin:0 0 6px}
.popcard p{color:var(--ink-2); font-size:.9rem; line-height:1.5; margin:0}
.popcard .pin{position:absolute; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:.66rem; top:-11px; left:-11px; box-shadow:0 4px 12px rgba(29,43,212,.4)}

/* ---- flow diagram: node primitives ---- */
.node{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:9px 14px; text-align:center; white-space:nowrap}
.node.dark{background:var(--grey-5); color:#fff; border-color:var(--grey-5)}
.node.accent{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.conn{width:1px; background:var(--hair)}
.conn.h{height:1px; width:24px}
.stack{display:flex; flex-direction:column; align-items:center; gap:0; padding:8px 0}
.stack .conn{height:14px}
.stack .rowset{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.branch{display:flex; flex-direction:column; align-items:center}
.branch .top{margin-bottom:4px}
.branch .stem{width:1px; height:16px; background:var(--hair)}
.branch .bar{width:min(560px,80%); height:1px; background:var(--hair)}
.branch .drops{width:min(560px,80%); display:flex; justify-content:space-around}
.branch .drops span{width:1px; height:16px; background:var(--hair)}
.branch .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; margin-top:2px}
.loop{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:26px 22px; position:relative}
.loop .row{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.loop .arw{color:var(--muted); font-family:var(--mono)}
.loop .lbl{text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:16px}
.loop .lbl b{color:var(--accent); font-weight:500}
.diagram{margin:8px 0 28px}
.diagram .cap{font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:12px}

@media(max-width:880px){
  .vidgrid{grid-template-columns:1fr}
  .split-prose{grid-template-columns:1fr; gap:28px}
}
@media(max-width:560px){
  .branch .cols{grid-template-columns:1fr; gap:10px}
  .branch .bar,.branch .drops{display:none}
  .step{grid-template-columns:38px 1fr; gap:14px; padding:22px}
}