/* ===== 00-base.css ===== */
/* ravi.bot "One Loop" — shared foundation.
   Rule of the house: the authored HTML is the final state. Every hidden starting state is
   written under html.motion (or set by GSAP inside a builder), never as a plain rule. */

/* ---------- 1. tokens (spec 1.2) ---------- */
:root{
  --bg:#0d0d0d; --bg-raised:#131313; --bg-soft:#171717;
  --line:#2c2c2c; --line-strong:#3a3a3a;
  --text:#f3f2ef; --muted:#b8b7b1;
  --quiet:#8a8983; --quiet-deco:#7b7a74;
  --mint:#b7f6d1; --sand:#f3d18a; --teal-dk:#2f9a8a;
  --p-bg:#fbfcfd; --p-ink:#17202a; --p-muted:#5f6f80; --p-line:#d8e0e7; --p-soft:#f5f8fb;
  --p-teal:#14635a; --p-teal-wash:#e9f3f1; --p-rust:#b45d28; --p-rust-wash:#fdf3ec;
  --p-code:#10201e; --p-code-text:#ecf8f4; --p-code-hi:#7fd6c4;
  --a-reception:#f3d18a; --a-dev:#b7f6d1; --a-ops:#2f9a8a; --a-other:#b8b7b1;
  --grid:72px; --gutter:clamp(16px,4vw,48px); --maxw:1440px;
  --font-sans:'Sora',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* derived layout tokens */
  --hdr:64px; --bar:0px; --px:var(--gutter); --sec-pad:clamp(96px,13vh,152px);
  --stage-w:936px; --copy-w:360px; --col-gap:48px;
  /* light status chips (Bases option colors) */
  --st-req:#fdf3c7; --st-app:#dcf3e3; --st-ord:#dde9fb; --st-rec:#eceff3; --st-dec:#fbdcdc;
}
@media (min-width:1280px){ :root{ --px:48px; } }
@media (max-width:1023px){ :root{ --hdr:52px; --bar:36px; --sec-pad:88px; } }
@media (max-width:599px){ :root{ --sec-pad:72px; } }

*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;
  /* focus and #links never land under the sticky header (and the phone loop bar) */
  scroll-padding-top:calc(var(--hdr) + var(--bar) + 16px);scroll-padding-bottom:16px}
@media (min-width:1024px){ html{scroll-padding-bottom:96px} }   /* clear of the loop ring in the bottom-left corner */
body{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.55;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;
  padding-top:var(--hdr)}   /* room for the fixed header (section 5), so the page sits where a sticky one left it */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);opacity:.45;
  -webkit-mask-image:linear-gradient(#000 0,#000 40%,transparent 75%);mask-image:linear-gradient(#000 0,#000 40%,transparent 75%)}
main,footer{position:relative;z-index:1}
main:focus{outline:none}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd,pre,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
code,kbd,pre,samp{font-family:var(--font-mono)}
svg{display:block}
img{max-width:100%;display:block}
::selection{background:var(--text);color:var(--bg)}
[hidden]{display:none!important}
b,strong{font-weight:600}

/* focus rings (spec 0: mint on dark, teal on light) */
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.light :focus-visible,.sk-win :focus-visible,.rb-browser :focus-visible,.light-panel :focus-visible{outline-color:var(--p-teal)}

/* ---------- 2. type ---------- */
.hl{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:-.06em;line-height:.86;
  font-size:clamp(3.4rem,7.2vw,7.5rem);color:var(--text)}
.hl--hero{font-size:clamp(4.2rem,11vw,9.5rem)}
.mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mask>.in{display:block}
.eyebrow{font-family:var(--font-mono);font-weight:500;font-size:13px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);white-space:pre}
.eyebrow b{color:var(--sand);font-weight:500}
.lead,.intro{font-size:17px;line-height:1.55;color:var(--muted);max-width:40em;text-wrap:pretty}
.note{font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--quiet)}
.fine{font-size:14px;line-height:1.55;color:var(--quiet);max-width:52em}
.label{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
@media (max-width:599px){
  body{font-size:16px}
  .hl{font-size:40px}
  .hl--hero{font-size:clamp(36px,10.7vw,44px);line-height:.88}
  .lead,.intro{font-size:16px}
}

/* ---------- 3. layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--px)}
.sec{position:relative;padding-block:var(--sec-pad);scroll-margin-top:-16px}
.sec-head{display:grid;gap:24px;margin-bottom:56px}
.sec-head .hl{margin-top:2px}
@media (max-width:599px){.sec-head{gap:18px;margin-bottom:40px}}

/* ---------- 4. utilities & motion gating ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.no-js .js-only{display:none!important}
html:not(.motion) .motion-only{display:none!important}
html.motion .static-only{display:none!important}
html.js .no-js-only{display:none!important}
.nw{white-space:nowrap}
/* generic on-enter reveals (core plays them; hidden only under html.motion) */
html.motion .hl .in{transform:translateY(110%)}
html.motion [data-reveal]{opacity:0;transform:translateY(24px)}
html.motion [data-reveal="fade"]{transform:none}
html.motion [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
html.motion [data-reveal="pop"]{transform:scale(.9)}
.wc-on{will-change:transform}

/* ---------- 5. header, sheet, skip link ---------- */
.skip-link{position:fixed;left:16px;top:12px;z-index:100;transform:translateY(-200%);background:var(--text);color:var(--bg);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:12px 14px;border-radius:4px}
.skip-link:focus{transform:none}
/* The header is fixed, not sticky: with scroll-padding-top on html, the browser scrolls the page to "clear" a
   focused element inside a sticky header (opening or closing the menu, or Tab into the header, moved the page
   by 45-530px). A fixed element is never scrolled into view, the same as the fixed loop indicator. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);background:rgba(13,13,13,.92);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr{background:rgba(13,13,13,.98)} }
.hdr-in{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--text)}
.brand-mark{width:26px;height:26px;border-radius:5px;box-shadow:0 0 0 1px var(--line-strong)}
.hdr-nav{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.hdr-nav a,.sheet a{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.hdr-nav a{display:inline-flex;align-items:center;min-height:44px}
.hdr-nav a:hover,.sheet a:hover{color:var(--text)}
.hdr-menu{display:none;min-width:44px;height:44px;padding:0 12px;margin-right:-12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.sheet{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--px) 16px;
  max-height:calc(100vh - var(--hdr));max-height:calc(100dvh - var(--hdr));overflow-y:auto;overscroll-behavior:contain}
.sheet a{display:flex;align-items:center;height:48px;border-bottom:1px solid var(--line);color:var(--text);font-size:13px}
.sheet a:last-child{border-bottom:0}
@media (max-width:1023px){
  .hdr-nav{display:none}
  .hdr-menu{display:inline-flex;align-items:center;justify-content:center}
  html.no-js .hdr{position:relative;height:auto}
  html.no-js body{padding-top:0}
  html.no-js .hdr-in{height:auto;min-height:52px;flex-wrap:wrap;row-gap:0;padding-block:4px 6px}
  html.no-js .hdr-nav{display:flex;flex-wrap:wrap;gap:0 20px;width:100%}
}
@media (min-width:1024px){.sheet{display:none!important}}

/* ---------- 6. pinned scaffold ---------- */
/* <section class="sec sec--pin"> <header class="wrap sec-head">…</header>
     <div class="stage-wrap"><div class="scene"> .scene-copy(.scene-title,.beats) · .frames · .skip-scene · .stage </div></div> … */
.sec--pin{padding-bottom:0}
.sec--pin>.sec-head{margin-bottom:40px}
.stage-wrap{position:relative}
.scene{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--px);
  display:grid;grid-template-columns:var(--copy-w) minmax(0,1fr);column-gap:var(--col-gap);align-items:start}
.scene>.scene-copy{grid-column:1;grid-row:1/span 3}
.scene>.frames{grid-column:2;grid-row:1}
.scene>.stage,.scene>.skip-scene{grid-column:2;grid-row:2}
.scene>.after{grid-column:2;grid-row:3}
.stage{position:relative;min-width:0}
.scene-copy{position:relative;min-width:0}
.scene-title{font-family:var(--font-mono);font-size:13px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin-bottom:20px}
.scene-title b{color:var(--sand);font-weight:500}
.beats{display:grid;gap:6px;counter-reset:beat}
.beat{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;width:100%;text-align:left;padding:10px 0;border-top:1px solid var(--line);color:var(--text);min-height:44px}
.beat-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--sand)}
.beat-t{display:block;font-size:17px;line-height:1.45}
.beat .mask{padding-bottom:0;margin-bottom:0}
.beat:hover .beat-t{color:var(--text)}
.beat{cursor:default}
.beat[role="button"]{cursor:pointer}
html.motion .beat{opacity:.6;transition:opacity .3s}
html.motion .beat.is-current{opacity:1}
html.motion .beat:focus-visible{opacity:1}
.skip-scene{position:relative;z-index:6;justify-self:end;align-self:start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 10px;margin:-6px -10px 0 0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(13,13,13,.8);border-radius:4px}
.skip-scene:hover{color:var(--mint)}
html:not(.motion) .skip-scene{display:none}
@media (max-width:1023px),(pointer:coarse){.skip-scene{min-height:44px}}
html:not(.motion) .scene-title{display:none}
/* static (no motion, reduced, frames-mode): numbered list beside the frames, sticky on desktop */
html:not(.motion) .sec--pin .scene{padding-bottom:var(--sec-pad)}
@media (min-width:1280px){ html:not(.motion) .sec--pin .scene>.scene-copy{position:sticky;top:calc(var(--hdr) + 32px)} }
html:not(.motion) .sec--pin .frames~.stage{margin-top:40px}
/* data-static="frames" on the section: the static view is the frames strip plus the beat list, no stage */
html:not(.motion) .sec--pin[data-static="frames"] .scene>.stage{display:none!important}

/* desk motion: the stage-wrap is a 100vh pinned frame under the header */
@media (min-width:1024px) and (min-height:640px){
  html.motion .sec--pin .stage-wrap{height:100vh}
  html.motion .sec--pin .scene{height:100%;padding-top:calc(var(--hdr) + 20px);padding-bottom:24px;grid-template-rows:auto minmax(0,1fr) auto}
  html.motion .sec--pin .scene>.stage{height:100%;min-height:0}
  /* the skip link gets its own row above the stage, level with the rail title, so it never covers a mock */
  html.motion .sec--pin .scene>.skip-scene{grid-row:1;margin:-6px -10px 10px 0}
  /* the copy column keeps 72px clear at the bottom for the fixed loop indicator ring */
  html.motion .sec--pin .scene>.scene-copy{grid-row:1/span 3;align-self:stretch;display:flex;flex-direction:column;min-height:0;padding-bottom:72px}
  html.motion .sec--pin .beats{flex:1 1 auto;align-content:start}
  /* dense / rail mode: only the current beat shows (core adds .scene-copy--dense when beats overflow) */
  html.motion .scene-copy--dense .beats{display:grid;grid-template-areas:"b";gap:0}
  html.motion .scene-copy--dense .beats>li{grid-area:b}
  html.motion .scene-copy--dense .beat{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  html.motion .scene-copy--dense .beat.is-current,html.motion .scene-copy--dense .beats:not(.has-current) .beat.is-first{opacity:1;visibility:visible;transition:opacity .3s}
}
/* compact desktop 1024–1279: stage stacked, caption rail under it */
@media (min-width:1024px) and (max-width:1279px) and (min-height:640px){
  html.motion .sec--pin .scene{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;max-width:calc(min(100vw - 2*var(--gutter),960px) + 2*var(--px))}
  html.motion .sec--pin .scene>.stage{grid-column:1;grid-row:2}
  html.motion .sec--pin .scene>.skip-scene{grid-column:1;grid-row:1}
  html.motion .sec--pin .scene>.after{grid-column:1;grid-row:3}
  /* the rail text starts right of the fixed loop ring (x 24–88) whatever the window width */
  html.motion .sec--pin .scene>.scene-copy{grid-column:1;grid-row:4;display:grid;grid-template-columns:minmax(0,1fr);padding:14px 0 0 max(0px,calc(104px - (100vw - min(100vw - 2 * var(--gutter),960px)) / 2));border-top:1px solid var(--line);margin-top:14px}
  html.motion .sec--pin .scene-title{margin-bottom:6px}
  html.motion .sec--pin .beats{display:grid;grid-template-areas:"b";gap:0}
  html.motion .sec--pin .beats>li{grid-area:b}
  html.motion .sec--pin .beat{border-top:0;padding:0;min-height:0;grid-template-columns:30px minmax(0,1fr);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  html.motion .sec--pin .beat-t{font-size:18px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
  html.motion .sec--pin .beat.is-current,html.motion .sec--pin .beats:not(.has-current) .beat.is-first{opacity:1;visibility:visible;transition:opacity .3s}
}
/* touch (≤1023): no stage-wrap pin; builders add short pins on .pin-panel. Beats list follows the stage. */
@media (max-width:1023px){
  .scene{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .scene>.scene-copy,.scene>.frames,.scene>.stage,.scene>.skip-scene,.scene>.after{grid-column:1;grid-row:auto}
  html.motion .scene>.scene-copy{order:5}
  html.motion .scene>.skip-scene{order:1;justify-self:start;margin:0}
  html.motion .scene>.stage{order:2}
  html.motion .scene>.after{order:6}
  html.motion .beat{opacity:1}
  html.motion .scene-title{display:none}
  html.motion [data-phone-beats="hide"] .scene>.scene-copy{display:none}
  .stage{max-width:640px;width:100%;margin-inline:auto}
  /* static phone view: the strip first, then the stage (if shown), then the numbered beats */
  html:not(.motion) .scene>.frames{order:1}
  html:not(.motion) .scene>.stage{order:2}
  html:not(.motion) .scene>.after{order:3}
  html:not(.motion) .scene>.scene-copy{order:4}
}
.pin-panel{position:relative;height:calc(100svh - var(--hdr) - var(--bar));min-height:420px;display:flex;flex-direction:column;justify-content:center;gap:16px}
html:not(.motion) .pin-panel{height:auto;min-height:0}

/* ---------- 7. frames strip (static storyboard) ---------- */
.frames{display:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
html:not(.motion) .frames,html.frames-mode .frames{display:grid}
.frame{position:relative;display:grid;gap:12px;align-content:start;min-width:0}
.frame>figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
@media (max-width:1023px){.frames{grid-template-columns:1fr}}

/* ---------- 8. buttons, links, copy ---------- */
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.lnk:hover{color:var(--text);border-color:var(--line-strong)}
.lnk--go{color:var(--mint)}
.lnk--go:hover{color:var(--mint);border-color:var(--mint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:4px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:transparent;transition:color .18s,border-color .18s}
.btn:hover,.btn:focus-visible{color:var(--mint);border-color:var(--mint)}
.btn[aria-pressed="true"]{border-color:var(--mint);color:var(--mint)}
.btn--light{border-color:var(--p-line);color:var(--p-ink);background:#fff}
.btn--light:hover,.btn--light:focus-visible{color:var(--p-teal);border-color:var(--p-teal)}
.btn--teal{background:var(--p-teal);border-color:var(--p-teal);color:#fff}
.btn--teal:hover,.btn--teal:focus-visible{color:#fff;border-color:var(--p-ink)}
.btn--teal-o{border-color:var(--p-teal);color:var(--p-teal);background:#fff}
.btn--teal-o:hover,.btn--teal-o:focus-visible{color:#fff;background:var(--p-teal);border-color:var(--p-teal)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.copy{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:0 6px;margin:-3px -6px -3px 8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--mint);white-space:nowrap;border-radius:3px;background:var(--bg-raised)}
.copy:hover{color:var(--text)}
.copy.is-done{color:var(--sand)}
@media (pointer:coarse){.copy{height:44px;margin-block:-11px}}

/* ---------- 9. .term dark terminal ---------- */
.term{position:relative;background:var(--bg-raised);border:1px solid var(--line);border-radius:8px;font-family:var(--font-mono);font-size:14px;line-height:22px;color:var(--text);min-width:0}
.term--line{padding:12px 16px}
.ln{display:flex;align-items:baseline;width:max-content;min-width:100%;white-space:pre}
.ln>code{font:inherit;white-space:pre}
.ln .copy{margin-left:auto;margin-right:0;padding-left:16px;position:sticky;right:0}
.ln.cmd>.p,.p{color:var(--quiet-deco)}
.ln.cmd>.p{margin-right:.6em}
.caret{display:inline-block;flex:none;width:.47em;height:1em;background:var(--mint);vertical-align:-.12em;margin-left:2px;align-self:center}
.type{display:inline-block;white-space:pre}
@media (max-width:599px){
  .term{font-size:12px;line-height:19px}
  .ln{width:auto;flex-wrap:wrap;white-space:pre-wrap}
  .ln>code{white-space:pre-wrap;overflow-wrap:anywhere;flex:0 1 auto;max-width:100%;min-width:0}
  .ln.cmd{flex-wrap:nowrap}
  .ln.cmd>.p{flex:none}
  .ln .copy{position:static}
}

/* ---------- 10. agent chip, tags ---------- */
.chip{--lit:0;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;font-family:var(--font-mono);font-size:12px;color:var(--text);white-space:nowrap;background:var(--bg-raised)}
.chip>i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot,var(--a-other))}
.chip>i::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,var(--dot,var(--mint)) 0,transparent 68%);opacity:calc(var(--lit) * .6)}
.chip.is-lit{--lit:1}
.chip--dim{opacity:calc(.62 + .38 * var(--lit))}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 8px;border:1px solid currentColor;border-radius:4px;font-family:var(--font-mono);font-size:12px;line-height:1.3;white-space:nowrap;background:rgba(13,13,13,.85)}
.tag--sand{color:var(--sand)} .tag--mint{color:var(--mint)} .tag--teal{color:var(--teal-dk)} .tag--rust{color:#e08a57}
.tag--light{background:#fff}
.tag--light.tag--teal{color:var(--p-teal)} .tag--light.tag--rust{color:var(--p-rust)} .tag--light.tag--sand{color:#8a6a1f}
.pill-code{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--p-code);color:var(--mint);font-family:var(--font-mono);font-size:13px;white-space:nowrap}

/* ---------- 11. light world: avatars, .sk-win, .bk ---------- */
.light{color:var(--p-ink);font-family:var(--font-sans)}
.av{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1;background:var(--p-soft);color:var(--p-ink)}
.av--ana{background:#e9f3f1;color:var(--p-ink)}
.av--bruno{background:#fdf3ec;color:var(--p-rust)}
.av--carla{background:#e7eef7;color:var(--p-ink)}
.av--rec{background:var(--sand);color:var(--p-ink)}
.av--ops{background:var(--p-teal);color:#fff}
.av--sm{width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:500}
.sk-win{position:relative;display:flex;background:var(--p-bg);border:1px solid var(--p-line);border-radius:8px;color:var(--p-ink);font-family:var(--font-sans);font-size:15px;line-height:1.45;min-width:0;isolation:isolate}
.sk-win::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 24px 60px rgba(23,32,42,.08);opacity:var(--lift,1);z-index:-1;pointer-events:none}
.sk-win.is-lifted::before{box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sk-rail{flex:none;width:196px;background:var(--p-soft);border-right:1px solid var(--p-line);border-radius:8px 0 0 8px;padding:14px 0;font-size:14px}
.sk-ws{padding:0 16px 12px;font-weight:600;font-size:15px;border-bottom:1px solid var(--p-line);margin-bottom:10px}
.sk-group{padding:8px 16px 4px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--p-muted)}
.sk-rail li{display:flex;align-items:center;gap:8px;height:30px;padding:0 16px;color:var(--p-muted)}
.sk-rail li.is-active{background:var(--p-teal-wash);color:var(--p-ink);font-weight:600}
.sk-rail .sq{width:16px;height:16px;border-radius:4px;display:inline-grid;place-items:center;font-size:12px;font-weight:600}
.sk-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.sk-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 18px;border-bottom:1px solid var(--p-line);font-weight:600;font-size:15px;flex:none}
.sk-hd span{font-weight:400;font-size:13px;color:var(--p-muted)}
.sk-msgs{display:grid;gap:4px;padding:12px 0;align-content:start}
.sk-msg{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:8px 18px;align-items:start}
.sk-meta{display:flex;align-items:center;gap:8px;font-size:15px;line-height:20px;margin-bottom:2px}
.sk-meta b{font-weight:600}
.sk-meta time{font-size:12px;color:var(--p-muted)}
.app{display:inline-flex;align-items:center;height:18px;padding:0 4px;border:1px solid var(--p-line);border-radius:3px;font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--p-muted);letter-spacing:.04em}
.sk-text{font-size:15px;line-height:1.45}
.sk-thread{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:var(--p-teal)}
.bk{display:grid;gap:10px;font-size:15px;line-height:1.45;color:var(--p-ink);min-width:0}
.bk-header{font-weight:600;font-size:17px;line-height:1.35}
.bk-section{white-space:pre-line;overflow-wrap:anywhere}
.bk-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;white-space:normal}
.bk-fields b{display:block}
.bk-actions{display:flex;flex-wrap:wrap;gap:8px}
.bk-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--p-line);border-radius:4px;background:#fff;color:var(--p-ink);font-family:var(--font-sans);font-size:14px;font-weight:600;white-space:nowrap;transform-origin:50% 50%}
.bk-btn--primary{background:var(--p-teal);border-color:var(--p-teal);color:#fff}
.bk-btn--danger{border-color:var(--p-rust);color:var(--p-rust)}
button.bk-btn:hover{border-color:var(--p-ink)}
button.bk-btn--primary:hover{background:#0f4f48}
.bk-btn[aria-disabled="true"]{cursor:default}
@media (pointer:coarse){button.bk-btn{height:44px}}
.bk-context{font-size:12px;line-height:1.4;color:var(--p-muted)}
.bk-select{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;height:32px;min-width:150px;padding:0 10px;border:1px solid var(--p-line);border-radius:4px;background:#fff;font-size:14px;color:var(--p-muted)}
.bk-final{display:grid;gap:2px}
@media (max-width:1279px){.sk-win--rail-opt .sk-rail{display:none}}

/* ---------- 12. light browser .rb-browser ---------- */
.rb-browser{position:relative;background:var(--p-bg);border:1px solid var(--p-line);border-radius:8px;overflow:hidden;color:var(--p-ink);font-family:var(--font-sans);min-width:0;isolation:isolate}
.rb-chrome{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;background:var(--p-soft);border-bottom:1px solid var(--p-line)}
.rb-dots{display:flex;gap:6px;flex:none}
.rb-dots i{width:10px;height:10px;border-radius:50%;background:var(--p-line)}
.rb-reload{flex:none;color:var(--p-muted);font-size:16px;line-height:1;display:inline-block}
.rb-url{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 12px;background:#fff;border:1px solid var(--p-line);border-radius:15px;font-family:var(--font-mono);font-size:13px;color:var(--p-ink)}
.rb-url>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rb-lock{flex:none;width:10px;height:12px;color:var(--p-muted)}
.rb-private{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid var(--p-teal);border-radius:10px;color:var(--p-teal);font-family:var(--font-mono);font-size:12px}
.rb-page{padding:20px}
.rb-mark{flex:none;width:32px;height:32px;border-radius:6px;background:var(--p-teal);color:#fff;display:grid;place-items:center;font-weight:600;font-size:17px}
.rb-title{font-weight:500;font-size:18px;line-height:1.2}
.rb-sub{font-size:13px;color:var(--p-muted)}
.rb-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
.rb-col{background:var(--p-soft);border-radius:8px;padding:10px;min-height:120px;display:grid;gap:8px;align-content:start;min-width:0}
.rb-col>h4,.rb-col>.rb-col-h{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--p-muted)}
.rb-col .n{font-family:var(--font-mono);font-size:12px;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:6px;background:#fff;border:1px solid var(--p-line)}
.rb-card{position:relative;background:#fff;border:1px solid var(--p-line);border-radius:8px;padding:10px 12px;box-shadow:0 1px 2px rgba(23,32,42,.05);display:grid;gap:8px;min-width:0}
.rb-card .nm{font-weight:500;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.rb-card .row{display:flex;align-items:center;gap:8px}
.rb-card .val{font-family:var(--font-mono);font-size:13px;color:var(--p-teal)}
.rb-card .av--sm{margin-left:auto}
.stc{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:500;color:var(--p-ink);white-space:nowrap;background:var(--st-rec)}
.stc--req{background:var(--st-req)} .stc--app{background:var(--st-app)} .stc--ord{background:var(--st-ord)} .stc--rec{background:var(--st-rec)} .stc--dec{background:var(--st-dec)}
@media (max-width:599px){
  .rb-chrome{height:40px;gap:10px}
  .rb-board{grid-template-columns:1fr}
  .rb-col{min-height:0}
}

/* ---------- 13. .code panel ---------- */
.code{position:relative;background:var(--p-code);color:var(--p-code-text);font-family:var(--font-mono);font-size:12.5px;line-height:20px;border-radius:6px;padding:14px 16px;white-space:pre;overflow-x:auto;min-width:0;scrollbar-width:thin}
.code .k{color:var(--p-code-hi)}
.code .s{color:var(--p-code-text)}
.code .hi{color:var(--mint);text-decoration:underline;text-decoration-color:var(--p-code-hi);text-underline-offset:3px}
@media (max-width:599px){.code{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}}

/* ---------- 14. packets + wires ---------- */
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.wires path,.wire{fill:none;stroke:var(--line-strong);stroke-width:1}
.pk{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--mint);pointer-events:none;z-index:5}
.pk::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,currentColor 0,transparent 70%);opacity:.35}
.pk--read{background:var(--mint);color:var(--mint)}
.pk--write{background:var(--teal-dk);color:var(--teal-dk)}

/* ---------- 15. cursor ---------- */
.cur{position:absolute;left:0;top:0;width:24px;pointer-events:none;z-index:8}
.cur svg{width:24px;height:34px;overflow:visible}
.cur path{fill:var(--p-ink);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.cur-name{position:absolute;left:14px;top:30px;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;font-family:var(--font-sans);font-size:12px;font-weight:600;white-space:nowrap;background:var(--p-ink);color:#fff}
.cur--bruno .cur-name{background:var(--sand);color:var(--p-ink)}
.cur--carla .cur-name{background:var(--p-teal);color:#fff}
.cur--ana .cur-name{background:var(--p-ink);color:#fff}
.cur-ripple{position:absolute;left:-14px;top:-14px;width:32px;height:32px;border:2px solid var(--p-teal);border-radius:50%;opacity:0;transform:scale(.2)}

/* ---------- 16. gate, skeleton, toast, caution ---------- */
.gate{width:360px;max-width:100%;margin-inline:auto;padding:24px;border:1px solid var(--p-line);border-radius:8px;background:#fff;text-align:center;display:grid;gap:8px;justify-items:center;box-shadow:0 12px 32px rgba(23,32,42,.08);color:var(--p-ink)}
.gate p{font-size:15px}
.gate .btn--teal{margin-top:8px}
.skel{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.skel-col{background:var(--p-soft);border-radius:8px;padding:10px;display:grid;gap:8px;align-content:start;min-height:120px}
.skel-col i{display:block;height:48px;border:2px dashed var(--p-line);border-radius:8px}
.shimmer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.shimmer::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-100%)}
html.motion .shimmer.is-on::before{animation:shimmer 1.2s linear infinite}
.shimmer.is-paused::before{animation-play-state:paused}
@keyframes shimmer{to{transform:translateX(260%)}}
@media (max-width:599px){.skel{grid-template-columns:1fr}}
.toast{position:absolute;right:16px;bottom:16px;z-index:7;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:6px;background:var(--p-ink);color:#fff;font-family:var(--font-mono);font-size:12px;white-space:nowrap}
.caution{padding:4px 0 4px 16px;border-left:2px solid var(--sand);font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- 17. segmented controls (radios, work with JS off) ---------- */
/* <div class="seg" role="radiogroup" aria-label="…"><input type="radio" name="g" id="g-a" checked><label for="g-a">A</label>…</div> */
.seg{display:inline-flex;flex-wrap:wrap;gap:0;padding:3px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg-raised)}
.seg>input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg>label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:4px;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s,background-color .2s;white-space:nowrap}
.seg>label:hover{color:var(--text)}
.seg>input:checked+label{background:var(--text);color:var(--bg)}
.seg>input:focus-visible+label{outline:2px solid var(--mint);outline-offset:2px}
.seg>input:disabled+label{opacity:.4;cursor:not-allowed}
.seg--tabs{padding:0;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:none;gap:4px}
.seg--tabs>label{border-radius:0;min-height:44px;padding:0 14px;position:relative}
.seg--tabs>input:checked+label{background:none;color:var(--text)}
.seg--tabs>input:checked+label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mint)}
@media (pointer:coarse),(max-width:599px){.seg>label{min-height:44px}}
@media (max-width:599px){.seg--full{display:flex;width:100%}.seg--full>label{flex:1 1 0;padding:0 8px}}

/* ---------- 18. loop indicator (desktop ring / phone bar). JS + motion only. ---------- */
.loopind{display:none}
html.motion.js .loopind.is-ready{display:block}
.loopind{position:fixed;z-index:40;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.loopind.is-on{opacity:1;visibility:visible;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.li-tick span{display:none}
@media (min-width:1024px){
  .loopind{left:24px;bottom:24px;width:64px;height:64px}
  .li-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
  .li-track{fill:rgba(13,13,13,.86);stroke:var(--line-strong);stroke-width:2}
  .li-arc{fill:none;stroke:var(--mint);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
  .li-ticks{position:absolute;inset:0}
  /* five ticks at 72° steps sit 30px apart, so each 24px target stands clear of its neighbours */
  .li-tick{position:absolute;left:32px;top:32px;width:24px;height:24px;margin:-12px 0 0 -12px;display:grid;place-items:center;
    transform:rotate(var(--a,0deg)) translateY(-26px) rotate(calc(-1 * var(--a,0deg)))}
  .li-tick.is-current{z-index:1}
  .li-tick i{width:8px;height:8px;background:var(--bg-raised);border:1px solid var(--line-strong)}
  .li-tick.is-current i{background:var(--mint);border-color:var(--mint)}
  .li-tick.is-done i{border-color:var(--mint)}
  .li-tick:focus-visible{outline-offset:0}
  .li-name{position:absolute;left:76px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted);white-space:nowrap;padding:3px 7px;background:rgba(13,13,13,.86);border-radius:3px}
  .li-name b{color:var(--sand);font-weight:500}
  .li-prog{display:none}
  .loopind{transform-origin:0 100%}
  .loopind.is-mini{transform:translate(-16px,16px) scale(.5)}
  .li-name{transition:opacity .2s}
  .loopind.is-mini .li-name{opacity:0}
  /* mini ring: too small to aim at a tick, so the ticks take no clicks until the ring grows back to full size
     on hover or keyboard focus (it grows from its own corner, so the pointer stays on it) */
  .loopind.is-mini .li-tick{pointer-events:none}
  .loopind.is-mini:hover,.loopind.is-mini:focus-within{transform:translate(-16px,16px)}
  .loopind.is-mini:hover .li-tick,.loopind.is-mini:focus-within .li-tick{pointer-events:auto}
  .loopind.is-mini:hover .li-name,.loopind.is-mini:focus-within .li-name{opacity:1}
}
/* compact desktop: the caption rail already names the station, and the label would sit on the rail */
@media (min-width:1024px) and (max-width:1279px){ .li-name{display:none} }
@media (max-width:1023px){
  .loopind{left:0;right:0;top:var(--hdr);height:36px;background:rgba(13,13,13,.94);border-bottom:1px solid var(--line);transform:translateY(-36px);
    -webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9)}
  .loopind.is-on{transform:none}
  .li-ring{display:none}
  /* each tick owns a 44px cell (no overlapping hit areas); the first square stays near the page gutter */
  .li-ticks{position:absolute;left:max(0px,calc(var(--px) - 19px));top:0;height:36px;display:flex;align-items:center;gap:0}
  .li-tick{position:relative;display:grid;place-items:center;width:44px;height:36px}
  .li-tick i{display:block;width:6px;height:6px;background:var(--line-strong)}
  .li-tick.is-done i{background:var(--quiet)}
  .li-tick.is-current i{background:var(--mint)}
  .li-name{position:absolute;right:var(--px);top:0;height:36px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
  .li-name b{color:var(--sand);font-weight:500}
  .li-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0)}
}

/* ---------- 19. footer ---------- */
.foot{min-height:70vh;display:flex;align-items:center;border-top:1px solid var(--line);padding-block:96px 48px;overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--grid) var(--grid);background-position:-1px -1px}
.foot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.55),rgba(13,13,13,.92) 70%);pointer-events:none}
.foot-in{position:relative;display:grid;gap:32px}
.foot-head{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,32px)}
.foot-sq{flex:none;width:20px;height:20px;background:var(--mint);margin-top:.18em;margin-top:clamp(10px,1.6vw,22px)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 32px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.foot-links a:hover{color:var(--mint)}
.foot-small{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--quiet)}
html.motion .foot-sq{transform:scale(0)}
html.motion .foot-links,html.motion .foot-small{opacity:0;transform:translateY(12px)}
@media (max-width:599px){
  .foot{min-height:60svh;padding-block:72px 40px}
  .foot .hl--hero{font-size:clamp(34px,10.2vw,40px);line-height:.88}
  .foot-sq{margin-top:6px;width:16px;height:16px}
  .foot-links{flex-direction:column;gap:0}
}

/* ---------- 20. reduced motion: belt and braces ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
html.motion .shimmer.is-on.is-paused::before{animation-play-state:paused}

/* ===== 00-top.css ===== */
/* 00 · #top hero */
.sec--top{padding-top:clamp(28px,5vh,56px);padding-bottom:clamp(72px,10vh,120px)}
#top .hl--hero{margin-top:20px}
.top-row{display:grid;grid-template-columns:minmax(0,1fr) 640px;column-gap:48px;margin-top:40px;align-items:start}
.top-copy{display:grid;gap:22px;align-content:start;padding-top:6px;min-width:0}
.top-say,.top-go{display:grid;align-content:start;min-width:0}
.top-say{gap:14px}
.top-go{gap:22px}
.top-lead{max-width:40em}
.top-links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:-6px}
.top-vis{position:relative;min-width:0}
.tv-cap{margin-top:14px}

/* who sets it up: right under the lead, in body type, so it is read before the first scroll */
.top-setup{max-width:36rem;padding-left:14px;border-left:1px solid var(--line-strong);font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* examples (they took the old install slot, under the links) */
.top-ex{display:grid;gap:12px;margin-top:2px;min-width:0;container-type:inline-size}
.top-ex-l{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--quiet)}
.top-ex-list{display:flex;flex-wrap:wrap;gap:8px}
/* one row when all five fit (≥1440); otherwise a balanced 3 + 2 instead of a lone last chip */
@container (max-width:647px){.top-ex-list{max-width:420px}}
#top .top-ex .chip{height:32px;padding:0 13px;font-size:13px;color:var(--text);transform-origin:50% 60%}

/* the composition: 640×560 box, absolute geometry shared with the SVG path */
.tv{position:relative;width:640px;height:560px}
.tv-loop{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.tv-loop--h{width:640px;height:560px;z-index:2}
.tv-loop--v,.tv-loop-css{display:none}
.tv-path{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tv-pk{fill:var(--mint)}
/* the packet's glow: the outer sits on the packet (JS moves it; static: on 01), the inner breathes while it waits */
.tv-glow{position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none;transform:translate(192px,238px)}
.tv-glow-in{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--mint);opacity:.18}
.tv-glow.is-breathing .tv-glow-in{animation:tv-breathe 1.4s cubic-bezier(.39,.575,.565,1) infinite}
@keyframes tv-breathe{from{transform:scale(1);opacity:.18}to{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.tv-glow.is-breathing .tv-glow-in{animation:none}}
.tv-card{position:absolute;z-index:3;background:var(--p-bg);border-radius:0 8px 8px 8px;color:var(--p-ink);font-family:var(--font-sans)}
.tv-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 24px 60px rgba(0,0,0,.45);z-index:-1;pointer-events:none}
.tv-tab{position:absolute;left:0;bottom:100%;height:22px;padding:0 8px;display:flex;align-items:center;background:var(--bg-raised);border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;
  font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--quiet);white-space:nowrap}
.tv-slack{left:0;top:238px;width:270px;height:170px}
.tv-base{left:210px;top:24px;width:256px;height:150px}
.tv-page{left:350px;top:238px;width:290px;height:170px}

/* the agents strip: where they run, who they are */
.tv-bar{position:absolute;z-index:1;left:0;top:470px;width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px 16px;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:6px}
.tv-bar-l{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.08em;color:var(--quiet)}
.tv-chips{display:flex;flex-wrap:wrap;gap:8px}
.tv-role{color:var(--quiet)}
#top .tv-chips .chip{position:relative}
/* agent ring: its opacity follows --lit while the packet is in that agent's stretch of the loop */
#top .tv-chips .chip::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--dot);opacity:var(--lit);pointer-events:none}

/* mini Slack */
.tv-sk{height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit}
.tv-sk-hd{flex:none;height:34px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--p-line);font-size:14px}
.tv-sk-hd b{font-weight:600}
.tv-sk-msg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 14px 0}
.tv-sk-msg .av{width:28px;height:28px;border-radius:6px;font-size:13px}
.tv-sk-msg p{font-size:13px;line-height:1.4}
.tv-sk-msg b{display:block;font-weight:600;font-size:13px}
.tv-sk-compose{display:block;margin:auto 14px 12px;height:26px;border:1px solid var(--p-line);border-radius:6px;background:#fff}

/* mini table */
.tv-tbl{width:100%;border-collapse:collapse;font-size:12px;line-height:1.3;white-space:nowrap}
.tv-tbl th{text-align:left;font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--p-muted);padding:9px 10px 8px;border-bottom:1px solid var(--p-line)}
.tv-tbl td{padding:10px 4px 0;vertical-align:middle}
.tv-tbl td:first-child{padding-left:10px}
.tv-tbl td:last-child{padding-right:10px;text-align:right}
.tv-tbl .num{font-family:var(--font-mono);text-align:right;color:var(--p-teal)}
.tv-tbl .stc{transform-origin:100% 50%}

/* mini page (board outline) */
.tv-br{height:100%;display:flex;flex-direction:column;border-radius:inherit;overflow:hidden}
.tv-br-chrome{flex:none;height:24px;display:flex;align-items:center;gap:5px;padding:0 10px;background:var(--p-soft);border-bottom:1px solid var(--p-line)}
.tv-br-chrome i{width:6px;height:6px;border-radius:50%;background:var(--p-line)}
.tv-br-chrome b{margin-left:8px;flex:1;height:10px;border-radius:5px;background:#fff;border:1px solid var(--p-line)}
.tv-br-board{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px}
.tv-col{background:var(--p-soft);border-radius:5px;padding:6px;display:grid;gap:6px;align-content:start}
.tv-col-h{display:block;height:5px;width:70%;border-radius:3px;background:var(--p-line)}
.tv-bc{display:block;height:30px;border-radius:4px;background:#fff;border:1px solid var(--p-line);position:relative}
.tv-bc::after{content:"";position:absolute;left:5px;top:6px;width:60%;height:4px;border-radius:2px;background:var(--p-line)}
.tv-bc::before{content:"";position:absolute;left:5px;bottom:6px;width:30%;height:4px;border-radius:2px;background:var(--p-teal);opacity:.55}

/* stations: the anchor's origin is the square's center */
.st{position:absolute;z-index:4;width:0;height:0;display:block;color:var(--quiet)}
.st-sq{position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:var(--bg-raised);border:1px solid var(--line-strong)}
.st.is-current .st-sq{background:var(--mint);border-color:var(--mint)}
/* the station lights while the packet passes (JS tweens --on; 0 at rest) */
.st-sq::after{content:"";position:absolute;inset:-1px;background:var(--mint);opacity:var(--on,0)}
.st-l{position:absolute;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 4px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;white-space:nowrap;color:var(--quiet);transition:color .18s}
.st-l b{color:var(--sand);font-weight:500}
.st:hover .st-l,.st:focus-visible .st-l{color:var(--text)}
.st:focus-visible{outline:none}
.st:focus-visible .st-l{outline:2px solid var(--mint);outline-offset:1px;border-radius:2px}
.st-l::before{content:"";position:absolute;inset:-10px -6px}
.st--01{left:192px;top:238px} .st--01 .st-l{left:8px;bottom:4px}
.st--02{left:210px;top:110px} .st--02 .st-l{right:24px;top:-12px}
.st--03{left:548px;top:238px} .st--03 .st-l{left:8px;bottom:4px}
.st--04{left:420px;top:470px} .st--04 .st-l{left:8px;bottom:4px}
.st--05{left:226px;top:470px} .st--05 .st-l{left:8px;bottom:4px}

/* short desks (a 1280×720 laptop, a browser window under 780px tall): the headline is capped by the viewport
   height and the top spacing tightens, so the lead and the setup line end above the fold. Taller desks keep
   the clamp (17vh is above it from 1440×900 and 1100×800 up). */
@media (min-width:1024px){ #top .hl--hero{font-size:min(clamp(4.2rem,11vw,9.5rem),17vh)} }
@media (min-width:1024px) and (max-height:780px){
  .sec--top{padding-top:20px}
  #top .hl--hero{margin-top:12px}
  .top-row{margin-top:28px}
}

/* compact desktop + tablet: copy row above, composition centered below */
@media (max-width:1279px){
  .top-row{grid-template-columns:minmax(0,1fr)}
  .top-copy{grid-template-columns:minmax(0,1fr) minmax(300px,400px);column-gap:56px}
  .top-lead{max-width:34rem}
  .top-setup{max-width:34rem}
  .top-vis{margin-top:64px;justify-self:center}
}
@media (max-width:1023px){
  .top-copy{grid-template-columns:minmax(0,1fr)}
}

/* phone (<720): the visual is rebuilt vertically, loop line down the left edge.
   The agents strip sits in flow under the three cards, so its height follows the chips. */
@media (max-width:719px){
  .top-vis{justify-self:stretch;margin-top:44px}
  .tv{width:100%;height:auto;padding:510px 0 44px 28px}
  .tv-loop--h{display:none}
  .tv-glow{display:none}
  .tv.is-vbuilt .tv-glow{display:block}
  .tv-loop-css{display:block;position:absolute;z-index:1;left:7.25px;top:4px;right:4px;bottom:4px;border:1.5px solid var(--mint);border-radius:14px}
  .tv.is-vbuilt .tv-loop-css{display:none}
  .tv.is-vbuilt .tv-loop--v{display:block;z-index:1;width:100%;height:100%}
  .tv-card{left:28px;right:0;width:auto;border-radius:8px 0 8px 8px}
  .tv-tab{left:auto;right:0;border-radius:4px 4px 0 0}
  .tv-slack{top:40px;height:120px}
  .tv-base{top:200px;height:110px}
  .tv-page{top:350px;height:120px}
  .tv-bar{position:relative;z-index:3;left:auto;top:auto;width:auto;padding:12px}
  .tv-sk-hd{height:30px}
  .tv-sk-msg{padding-top:10px}
  .tv-sk-compose{display:none}
  .tv-tbl th{padding:7px 10px 6px}
  .tv-tbl td{padding-top:5px}
  .st--01,.st--02,.st--03,.st--04,.st--05{left:8px}
  .st--01{top:28px} .st--02{top:188px} .st--03{top:338px} .st--04{top:498px} .st--05{top:auto;bottom:20px}
  .st .st-l,.st--02 .st-l{left:12px;right:auto;top:-12px;bottom:auto}
}
@media (max-width:599px){
  #top .top-ex .chip{height:30px;padding:0 11px;font-size:12px}
  .top-setup{padding-left:12px;font-size:15px}
}

/* load choreography, copy part: CSS keyframes that start at first paint. Transform and opacity only, so the
   compositor runs them even while the other sections are being built; the timing does not change across
   breakpoints, so a rebuild never restarts them. Final state without .motion (reduced, frames, no JS, GSAP failed). */
@keyframes top-rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes top-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes top-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
html.motion #top .hl .in{transform:none;animation:top-rise .65s cubic-bezier(.16,1,.3,1) .1s both}
html.motion #top .hl .mask:nth-child(2) .in{animation-delay:.22s}
html.motion #top .hl .mask:nth-child(3) .in{animation-delay:.34s}
html.motion #top .top-lead{animation:top-up .5s cubic-bezier(.33,1,.68,1) .45s both}
html.motion #top .top-setup{animation:top-up .5s cubic-bezier(.33,1,.68,1) .6s both}
html.motion #top .top-links{animation:top-up .5s cubic-bezier(.33,1,.68,1) .75s both}
html.motion #top .top-ex-l{animation:top-up .4s cubic-bezier(.33,1,.68,1) .95s both}
html.motion #top .top-ex .chip{animation:top-pop .45s cubic-bezier(.34,1.7,.64,1) 1.07s both}
html.motion #top .top-ex .chip:nth-child(2){animation-delay:1.13s}
html.motion #top .top-ex .chip:nth-child(3){animation-delay:1.19s}
html.motion #top .top-ex .chip:nth-child(4){animation-delay:1.25s}
html.motion #top .top-ex .chip:nth-child(5){animation-delay:1.31s}

/* hidden starting states of the composition (GSAP plays them when it scrolls into view) */
html.motion #top .tv-card{opacity:0;transform:translateY(30px)}
html.motion #top .tv-bar{clip-path:inset(0 100% 0 0)}
html.motion #top .tv-path{stroke-dasharray:1;stroke-dashoffset:1}
html.motion #top .st-sq{transform:scale(0)}
html.motion #top .st-l{opacity:0}
html.motion #top .tv-pk,html.motion #top .tv-glow{opacity:0}
html.motion #top .tv-cap{opacity:0}
html.motion #top .tv-loop-css{opacity:0}

/* ===== 01-ask.css ===== */
/* 01 · #ask (PIN 1): it starts as a Slack message.
   Authored HTML = final state. Hidden starting states only under html.motion (both builders clear them). */

/* ---------- the Slack window ---------- */
#ask .ak-stage{display:flex;flex-direction:column;gap:12px;min-width:0}
#ask .ak-win{flex:0 0 auto;transform-origin:50% 40%}
#ask .ak-rail{overflow:hidden}
#ask .ak-rows{display:grid}
#ask .ak-sq-rec{background:var(--sand);color:var(--p-ink)}
#ask .ak-sq-ops{background:var(--p-teal);color:#fff}
#ask .sk-hd b{font-weight:600}
#ask .ak-msgs{display:block;padding:0}
#ask .ak-feed{position:relative;display:grid;gap:4px;padding:12px 0}
#ask .ak-words>span{display:inline-block}
#ask .ak-panel{position:relative}
#ask .ak-pvp{position:relative}
/* positioned, so it is always an offset root for the card measurements (touch scrolls it with y) */
#ask .ak-recm{position:relative}
#ask .ak-caps{display:none}

/* ---------- the plan card (Block Kit) ---------- */
#ask .ak-rec-b{min-width:0}
#ask .ak-card{position:relative;isolation:isolate;display:block;width:min(100%,600px);margin-top:8px;padding:14px 16px 16px}
#ask .ak-req{display:grid;gap:10px}
#ask .ak-card-bg{position:absolute;z-index:-1;left:0;right:0;top:0;bottom:12px;background:#fff;border:1px solid var(--p-line);border-bottom:0;border-radius:8px 8px 0 0}
#ask .ak-card-btm{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:12px;background:#fff;border:1px solid var(--p-line);border-top:0;border-radius:0 0 8px 8px}
#ask .ak-card--static{background:#fff;border:1px solid var(--p-line);border-radius:8px;display:grid;gap:10px}
#ask .bk-header .mask{padding-bottom:0;margin-bottom:0}
#ask .ak-plan{white-space:normal;font-size:14px;line-height:20px}
#ask .ak-ln{display:block;width:fit-content;max-width:100%}
#ask .bk-actions{align-items:center}
#ask .bk-actions .tag{margin-left:4px}
#ask .ak-final{position:absolute;left:16px;right:16px;top:14px;display:grid;gap:4px;font-size:15px;line-height:1.45}
#ask .ak-card--static .bk-final{position:static;display:grid;gap:4px}
#ask .bk-final b{font-weight:600}
#ask .ak-final .mask{padding-bottom:0;margin-bottom:0}
#ask .ak-l2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#ask .ak-l2 .mask{display:inline-block}
#ask .ak-note{max-width:62em}

/* ---------- the agent strip: chips on a wire, the handoff ticket, the return arrow ---------- */
#ask .ak-rt{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px;padding:16px;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:8px;transform-origin:50% 50%}
#ask .ak-rt-l{font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:.14em;color:var(--quiet)}
#ask .ak-role{color:var(--muted)}
#ask .ak-chips .chip{gap:8px}

/* vertical diagram: the static AFTER frame and touch. Fixed geometry, so the authored SVG in the
   frame matches it with no JS: rec 0–28 · ride band · dev 136–164 · pill 172–196 · ops 208–236 */
#ask .ak-dia{position:relative;height:236px;min-width:0}
#ask .ak-dia>svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1}
#ask .ak-dia .wires{width:100%;height:100%}
#ask .ak-dia .pk{z-index:2}
#ask .ak-chips{position:absolute;inset:0;z-index:3}
#ask .ak-chips>.chip{position:absolute;left:0;width:200px}
#ask .ak-c-rec{top:0}
#ask .ak-c-ops{top:208px}
#ask .ak-sp{display:none}
#ask .ak-devw{position:absolute;left:0;top:136px;width:200px;height:28px;z-index:4}
#ask .ak-devw>.chip{width:100%}
#ask .ak-st{position:absolute;left:30px;top:calc(100% + 8px);min-height:24px}
#ask .ak-ticket{position:absolute;left:30px;bottom:calc(100% + 10px);display:block;z-index:2}
#ask .ak-tk-in{display:grid;gap:2px;padding:7px 12px 8px;background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-line);border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);white-space:nowrap;transform-origin:0 0}
#ask .ak-tk-in>b{font-family:var(--font-sans);font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.01em}
#ask .ak-tk-in>span{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--p-muted)}
#ask .ak-ret-l{position:absolute;right:calc(100% - 224px);top:41px;z-index:3;padding:0 6px;font-family:var(--font-mono);font-size:12px;line-height:18px;color:var(--quiet);white-space:nowrap;background:var(--bg-raised)}
#ask .ak-dia .ak-wire{stroke:var(--mint);stroke-width:1.5;opacity:.8}
#ask .ak-ret{fill:none;stroke:var(--quiet-deco);stroke-width:1.25;stroke-dasharray:3 4;stroke-linecap:round}
#ask .ak-ret-h{fill:none;stroke:var(--quiet);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
/* the stage copy: the trail and the mask that draws the arrow (Ravi.draw on pathLength=1) */
#ask .ak-stage .ak-wire{stroke-dasharray:1;stroke-dashoffset:0}
#ask .ak-ret-mp{fill:none;stroke:#fff;stroke-width:8;stroke-dasharray:1;stroke-dashoffset:0}

/* horizontal diagram on the desk stage (≥1024; the stage is hidden in every static mode) */
@media (min-width:1024px){
  #ask .ak-stage .ak-rt{padding:14px 20px 12px;row-gap:0}
  #ask .ak-stage .ak-dia{height:auto;padding:76px 0 36px}
  #ask .ak-stage .ak-chips{position:relative;inset:auto;display:flex;align-items:center}
  #ask .ak-stage .ak-chips>.chip{position:relative;top:auto;width:auto}
  #ask .ak-stage .ak-devw{position:relative;top:auto;width:auto;height:auto;display:inline-flex}
  #ask .ak-stage .ak-sp{display:block;flex:1 1 0;min-width:40px}
  #ask .ak-stage .ak-sp:last-of-type{flex-grow:.6}
  #ask .ak-stage .ak-st{left:0;right:0;width:max-content;margin-inline:auto}
  #ask .ak-stage .ak-ticket{left:0;right:0;width:max-content;margin-inline:auto}
  #ask .ak-stage .ak-tk-in{transform-origin:50% 100%}
  #ask .ak-stage .ak-ret-l{left:0;right:auto;top:0}
}

/* ---------- small print under the pin ---------- */
#ask .ak-small{padding-top:36px}
/* static views: the scene already ends with its own bottom padding */
html:not(.motion) #ask .ak-small{padding-top:0}
@media (min-width:1280px){ #ask .ak-small .fine{margin-left:calc(var(--copy-w) + var(--col-gap))} }

/* ---------- static storyboard (reduced motion, no JS, frames mode) ---------- */
/* data-static="frames": the frames strip and the numbered beats replace the stage. The base rule
   (html:not(.motion) .sec--pin[data-static] .scene>.stage) loses to #ask .ak-stage{display:flex}, so restate it here */
html:not(.motion) #ask .scene>.ak-stage{display:none}
#ask .ak-frames{align-items:start}
#ask .ak-fwin .sk-msgs{padding:8px 0 10px}
#ask .frame .ak-note{margin-top:2px}
#ask .ak-rt--static{margin-top:12px}
@media (max-width:1279px){ #ask .ak-frames{grid-template-columns:minmax(0,1fr)} }

/* ---------- desk pin (≥1024 and ≥640 tall) ---------- */
@media (min-width:1024px) and (min-height:640px){
  html.motion #ask .ak-stage{gap:10px}
  html.motion #ask .ak-win{flex:1 1 auto;min-height:0}
  html.motion #ask .ak-win .sk-main{min-height:0}
  html.motion #ask .ak-msgs{flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
  /* a little tighter than the static mock, so the whole card fits under Ana's message at 900px */
  html.motion #ask .ak-feed{padding:8px 0}
  html.motion #ask .ak-feed>.sk-msg{padding-top:6px;padding-bottom:6px}
  html.motion #ask .ak-card{padding-top:12px}
  html.motion #ask .ak-final{top:12px}
  html.motion #ask .ak-plan{line-height:19px}
  html.motion #ask .ak-note--stage,html.motion #ask .ak-rt{flex:none}
  /* docked strip (short stages, set by the desk builder): the bands above and below the chip row
     (the label, the ticket's lane, the pill and the return arrow) fold away until the handoff, so
     the window gets their room; then the window's bottom edge rises and the strip opens to its full height */
  html.motion #ask .ak-stage.ak-dock .ak-rt{margin-top:calc(-1 * var(--ak-dock-t, 0px));margin-bottom:calc(-1 * var(--ak-dock, 0px));
    clip-path:inset(var(--ak-dock-t, 0px) 0 var(--ak-dock, 0px) 0 round 8px)}
}
/* short desk windows: tighter card type so the card still fits its window */
@media (min-width:1024px) and (min-height:640px) and (max-height:820px){
  html.motion #ask .ak-plan{line-height:18.5px}
  html.motion #ask .ak-req{gap:8px}
  html.motion #ask .ak-card{padding:12px 16px 14px}
  html.motion #ask .ak-final{top:12px}
  html.motion #ask .ak-feed{padding:8px 0}
}

/* ---------- touch (≤1023): the window in flow, a short pin on the card ---------- */
@media (max-width:1023px){
  /* never taller than the room under the header and loop bar, or the pin plays half off screen
     (landscape phones): the card scrolls inside .ak-pvp instead */
  html.motion #ask .ak-panel{display:flex;flex-direction:column;justify-content:flex-start;gap:14px;height:calc(100svh - var(--hdr) - var(--bar));min-height:0;background:var(--p-bg);border-radius:0 0 8px 8px}
  html.motion #ask .ak-pvp{flex:1 1 auto;min-height:0;overflow:hidden}
  /* the touch pin is the panel inside the stage: core's will-change on the stage would make it the
     containing block of the fixed panel, so the stage keeps none here */
  html.motion #ask .ak-stage.wc-on{will-change:auto}
  html.motion #ask .ak-caps{display:grid;flex:none;margin:0 14px 14px}
  #ask .ak-cap{grid-area:1/1;padding:12px 14px;border-radius:6px;background:var(--bg-raised);color:var(--text);font-size:15px;line-height:1.45}
  #ask .ak-cap b{font-family:var(--font-mono);font-weight:500;font-size:12px;color:var(--sand);margin-right:6px;letter-spacing:.08em}
}
/* tablets and landscape phones (600–1023 wide): the panel is only as tall as the whole card plus the
   caption (capped at the room on screen), so the caption sits right under the card; the builder pins
   it in the middle of that room. The bottom padding keeps Bruno's name tag off the caption. */
@media (min-width:600px) and (max-width:1023px){
  html.motion #ask .ak-panel{height:auto;max-height:calc(100svh - var(--hdr) - var(--bar))}
  html.motion #ask .ak-pvp{flex:0 1 auto;padding-bottom:24px}
}
/* 600–1023 wide the window's own white would fill the pin's whole length (the pin spacer is inside it), leaving a
   white column around the pinned panel. So only the parts that hold something are white: the header, Ana's message
   and the panel, which stays a white card on the dark page while the header and Ana's message scroll away. Ana's
   message reaches 24px under the panel, so the panel's rounded top corners show white until the pin parts them.
   The builder closes the panel in on the outcome after the collapse (its clip-path). */
@media (min-width:600px) and (max-width:1023px){
  html.motion #ask .ak-win{background:none;border-color:transparent}
  html.motion #ask .ak-win::before{box-shadow:none}
  html.motion #ask .ak-hd{background:var(--p-bg);border:1px solid var(--p-line);border-radius:8px 8px 0 0}
  html.motion #ask .ak-feed{gap:0;padding:0 0 12px}
  html.motion #ask .ak-ana{background:var(--p-bg);border:solid var(--p-line);border-width:0 1px;border-radius:0 0 8px 8px;padding-top:20px;padding-bottom:36px;margin-bottom:-24px}
  html.motion #ask .ak-panel{z-index:1;border:1px solid var(--p-line);border-top:0;clip-path:inset(0px 0px 0px 0px round 8px)}
}
/* short touch screens (landscape phones): tighter caption, so the card keeps most of the room */
@media (max-width:1023px) and (max-height:520px){
  html.motion #ask .ak-panel{gap:8px}
  html.motion #ask .ak-pvp{padding-bottom:20px}
  html.motion #ask .ak-caps{margin:0 10px 8px}
  #ask .ak-cap{padding:8px 12px;font-size:14px;line-height:1.4}
}
@media (max-width:599px){
  #ask .ak-feed{padding:8px 0}
  #ask .sk-msg{padding:8px 12px;column-gap:10px}
  #ask .ak-recm{align-items:center}
  #ask .ak-recm .ak-rec-b{display:contents}
  #ask .ak-recm .ak-card{grid-column:1/-1;width:100%;margin-top:6px;padding:12px 12px 14px}
  #ask .ak-recm .ak-final{left:12px;right:12px;top:12px}
  #ask .ak-plan{font-size:13px;line-height:18px}
  #ask .ak-req{gap:8px}
  #ask .bk-header{font-size:16px}
  #ask .bk-actions .tag{margin-left:0}
  #ask .ak-card--static{padding:12px}
  #ask .ak-cap{font-size:14px;padding:10px 12px}
}

/* ---------- hidden starting states (motion only; desk + touch builders set them with fromTo) ---------- */
html.motion #ask .ak-ana,html.motion #ask .ak-recm .av,html.motion #ask .ak-rec-meta,html.motion #ask .ak-card,
html.motion #ask .ak-final .in,html.motion #ask .ak-tag-ok,html.motion #ask .ak-tag-ign,
html.motion #ask .ak-stage .cur,html.motion #ask .ak-pk,
html.motion #ask .ak-stage .ak-ticket,html.motion #ask .ak-stage .ak-ret-l,html.motion #ask .ak-stage .ak-ret-h{opacity:0}
html.motion #ask .ak-stage .ak-st{clip-path:inset(0 100% 0 0)}
html.motion #ask .ak-stage .ak-wire,html.motion #ask .ak-ret-mp{stroke-dashoffset:1}

/* ===== 02-build.css ===== */
/* 02 · #build: first the table, then the page.
   Authored HTML = final state. One set of pieces serves three views:
   - static (reduced motion, no JS, frames): BUILDING frame, the split, READY frame (the stage is hidden);
   - desk motion (≥1024 × ≥640): dev's status bar stays put on top; below it the table + rules, the split,
     the page and the done inset replace each other in one cell;
   - touch motion (≤1023): every block in a column under a sticky status bar, each plays on enter. */

/* ================= shared pieces ================= */

/* ---------- dev status card ---------- */
#build .bd-agent{position:relative;z-index:2;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who st" "tk tk" "chk chk";align-items:center;gap:14px 14px;
  padding:16px 16px 20px;background:var(--bg-raised);border:1px solid var(--line);border-radius:12px;color:var(--text)}
#build .bd-who{grid-area:who;display:flex;align-items:center;gap:12px;min-width:0}
#build .bd-av{width:40px;height:40px;border-radius:10px;background:var(--a-dev);color:var(--bg);font-size:17px}
#build .bd-nm{display:grid;gap:1px;min-width:0}
#build .bd-nm b{font-size:17px;line-height:1.2;font-weight:600}
#build .bd-nm span{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.06em;color:var(--quiet);white-space:nowrap}
/* the #ask ticket, docked on dev's card */
#build .bd-tk{grid-area:tk;justify-self:start;flex:none;display:grid;gap:2px;min-width:0;max-width:100%;padding:6px 12px 7px;background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-line);border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);transform-origin:0 0}
#build .bd-tk b{font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#build .bd-tk span{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* status pill */
#build .bd-st{grid-area:st;justify-self:end;display:flex;align-items:center;gap:9px;min-height:30px;padding:4px 12px 4px 10px;border:1px solid var(--line-strong);border-radius:999px;
  font-family:var(--font-mono);font-size:12px;line-height:20px;color:var(--text);white-space:nowrap;background:var(--bg)}
/* the text rolls from one phrase to the next (whole words only; see statusAt in the JS) */
#build .bd-st-t{display:inline-block}
#build .bd-st-d{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--sand)}
#build .bd-st-d::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--sand);opacity:0}
#build .bd-st[data-st="done"]{border-color:rgba(183,246,209,.55);color:var(--mint)}
#build .bd-st[data-st="done"] .bd-st-d{background:var(--mint)}
html.motion #build .bd-agent.is-vis .bd-st:not([data-st="done"]) .bd-st-d::after{animation:bdPing 1.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes bdPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.7);opacity:0}}
/* checklist */
#build .bd-chk{grid-area:chk;display:flex;flex-wrap:wrap;gap:6px 18px}
#build .bd-chk li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;color:var(--text);white-space:nowrap}
#build .bd-ck{flex:none;width:18px;height:18px;overflow:visible}
#build .bd-ck circle{fill:none;stroke:var(--line-strong);stroke-width:1.5}
#build .bd-ck path{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
/* progress bar (no text) along the card's bottom edge */
#build .bd-prog{position:absolute;left:16px;right:16px;bottom:8px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
#build .bd-prog i{position:absolute;inset:0;border-radius:inherit;background:var(--mint);transform-origin:0 50%}

@media (min-width:600px){
  #build .bd-agent{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"who tk st" "chk chk chk";gap:14px 20px;padding:16px 18px 22px}
  #build .bd-tk{justify-self:start}
  #build .bd-st{font-size:13px;min-width:184px}
  #build .bd-prog{left:18px;right:18px}
}
/* one row: on the desk stage, and in the static frames when they are wide */
@media (min-width:1280px){
  #build .bd-frames .bd-agent{display:flex;align-items:center;gap:20px;padding:16px 20px 22px}
  #build .bd-frames .bd-chk{margin-left:auto;flex-wrap:nowrap;gap:14px}
  #build .bd-frames .bd-prog{left:20px;right:20px}
}
@media (min-width:1024px) and (min-height:640px){
  html.motion #build .stage .bd-agent{display:flex;align-items:center;gap:20px;padding:16px 20px 22px}
  html.motion #build .stage .bd-chk{margin-left:auto;flex-wrap:nowrap;gap:14px}
  html.motion #build .stage .bd-prog{left:20px;right:20px}
}

/* ---------- table card (Ravi Bases) ---------- */
#build .bd-card{position:relative;min-width:0;border-radius:10px}
#build .bd-base{--cols:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.45fr) minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.95fr);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;padding:14px 16px 16px;
  background:var(--p-bg);border:1px solid var(--p-line);box-shadow:0 24px 60px rgba(0,0,0,.35);container-type:inline-size}
#build .bd-tab{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--p-teal-wash);color:var(--p-teal);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;white-space:nowrap}
#build .bd-ttl{font-size:18px;line-height:1.25;font-weight:500;color:var(--p-ink);min-width:0}
/* narrow (phone, tablet, narrow frames): one row per column, header left, hint right */
#build .bd-ths{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);margin-top:12px;border:1px solid var(--p-line);border-radius:6px;background:#fff;overflow:hidden}
#build .bd-th{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);min-width:0;border-top:1px solid var(--p-line)}
#build .bd-th:first-child{border-top:0}
#build .bd-th>b{position:relative;display:block;padding:9px 10px;background:var(--p-soft);border-right:1px solid var(--p-line);font-size:13px;line-height:18px;font-weight:600;color:var(--p-ink)}
#build .bd-th>b::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:1px;background:var(--p-teal);transform:scaleX(var(--ul,1));transform-origin:0 50%;opacity:0}
html.motion #build .bd-th--by>b::after,html.motion #build .bd-th--sup>b::after{opacity:1}
#build .bd-hint{display:block;align-self:center;padding:9px 10px;font-family:var(--font-mono);font-size:12px;line-height:17px;color:var(--p-muted)}
#build .bd-stcs{display:flex;flex-wrap:wrap;align-content:center;gap:4px;padding:8px 10px}
#build .bd-stcs .stc{height:22px}
#build .bd-rows{display:none}
/* wide (desk stage, wide frames): a real header row, a row of hints under it, then empty rows */
@container (min-width:720px){
  #build .bd-ths{grid-template-columns:var(--cols);grid-template-rows:auto auto;border-radius:6px 6px 0 0}
  #build .bd-th{grid-row:span 2;grid-template-columns:none;grid-template-rows:subgrid;border-top:0;border-left:1px solid var(--p-line)}
  #build .bd-th:first-child{border-left:0}
  #build .bd-th>b{border-right:0;border-bottom:1px solid var(--p-line);padding:9px 10px 10px}
  #build .bd-th>b::after{bottom:3px}
  #build .bd-hint{align-self:start;padding:10px}
  #build .bd-stcs{align-content:start;padding:10px}
  #build .bd-rows{grid-column:1/-1;display:grid;grid-template-columns:var(--cols);border:1px solid var(--p-line);border-top:0;border-radius:0 0 6px 6px;background:#fff;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
  #build .bd-rows i{display:block;height:28px;border-top:1px solid var(--p-line);border-left:1px solid var(--p-line)}
  #build .bd-rows i:nth-child(7n+1){border-left:0}
}
@container (min-width:720px) and (max-width:899px){
  #build .bd-ths,#build .bd-rows{--cols:minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1.95fr) minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,.85fr)}
}

/* ---------- rules card ---------- */
#build .bd-vcard{padding:14px 16px 14px;background:var(--p-bg);border:1px solid var(--p-line);border-left:3px solid var(--p-teal);box-shadow:0 24px 60px rgba(0,0,0,.35);color:var(--p-ink);container-type:inline-size}
#build .bd-vt{font-family:var(--font-mono);font-size:12px;line-height:18px;letter-spacing:.16em;color:var(--p-teal)}
#build .bd-vrows{display:grid;margin:10px 0 0}
#build .bd-vr{display:grid;gap:3px;padding:9px 0;border-top:1px solid var(--p-line)}
#build .bd-vr dt{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.1em;color:var(--p-muted)}
#build .bd-vr dd{margin:0;font-size:15px;line-height:1.4;color:var(--p-ink)}
#build .bd-vk{display:inline-block}
#build .bd-vd{display:inline-block;max-width:100%;vertical-align:top}
#build .bd-lk{flex:none;width:10px;height:12px;color:var(--p-teal)}
#build .bd-vr--auto{position:relative}
#build .bd-vr--auto::before{content:"";position:absolute;inset:0 -8px;z-index:-1;border-radius:4px;background:var(--p-teal-wash);opacity:0}
html.motion #build .bd-vr--auto::before{opacity:var(--hi,1)}
#build .bd-vr--no dt{color:var(--p-rust)}
#build .bd-vr--no .bd-lk{color:var(--p-rust)}
#build .bd-vfoot{margin-top:4px;padding-top:9px;border-top:1px solid var(--p-line);font-family:var(--font-mono);font-size:12px;line-height:1.45;color:var(--p-muted)}
@container (min-width:560px){
  #build .bd-vr{grid-template-columns:216px minmax(0,1fr);gap:16px;align-items:baseline;padding:8px 0}
  #build .bd-vr dt{align-self:baseline}
}
@container (min-width:860px){
  #build .bd-vr{grid-template-columns:232px minmax(0,1fr)}
}

/* the rules' wires (FILLED IN FOR YOU → Requested by, Supervisor) and the NOBODY ghost: motion only */
#build .bd-cards{position:relative;display:grid;gap:14px;min-width:0}
#build .bd-slot{position:relative;min-width:0}
#build .bd-rw{z-index:6}
#build .bd-rw path{stroke:var(--p-teal);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
#build .bd-ghost-at{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0}
#build .bd-ghost{position:relative;box-shadow:0 8px 20px rgba(23,32,42,.18)}
#build .bd-strike{position:absolute;left:5px;right:5px;top:50%;width:calc(100% - 10px);height:10px;margin-top:-5px;overflow:visible}
#build .bd-strike path{fill:none;stroke:var(--p-rust);stroke-width:1.75;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
html:not(.motion) #build .bd-ghost-at,html:not(.motion) #build .bd-rw{display:none}

/* ---------- the two-way split ---------- */
#build .bd-split{position:relative;min-width:0;container-type:inline-size}
#build .bd-split-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
#build .bd-sl,#build .bd-sr{display:flex;align-items:flex-end;min-height:180px;padding:26px 20px}
#build .bd-sl{background:var(--bg);padding-bottom:64px}
#build .bd-sr{background:var(--p-bg);padding-top:64px;align-items:flex-start}
#build .bd-sh{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:-.06em;line-height:.86;font-size:min(60px,calc((100cqi - 40px) / 7.4))}
#build .bd-sl .bd-sh{color:var(--text)}
#build .bd-sr .bd-sh{color:var(--p-ink)}
#build .bd-sl .bd-sh .mask:first-child{color:var(--mint)}
#build .bd-sr .bd-sh .mask:first-child{color:var(--p-teal)}
#build .bd-seam{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--line-strong)}
#build .bd-swire{z-index:3}
#build .bd-swire path{stroke:var(--teal-dk);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
#build .bd-split .pk{z-index:4;opacity:0}
#build .bd-pk-r{box-shadow:0 0 0 2px var(--p-code)}
#build .bd-pillwrap{position:absolute;top:50%;z-index:5}
#build .bd-pillwrap--r{left:14px;margin-top:-34px}
#build .bd-pillwrap--w{right:14px;margin-top:6px}
#build .bd-pill{display:inline-flex;box-shadow:0 0 0 1px var(--line-strong),0 10px 24px rgba(0,0,0,.3)}
#build .bd-pill--w{background:var(--p-teal);color:#fff}
/* side by side when there is room: the seam turns vertical, the pills sit on it, one above the other */
@container (min-width:720px){
  #build .bd-split-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #build .bd-split-in{--sf:min(72px,calc((50cqi - 60px) / 6.2),9.5vh)}
  #build .bd-sl,#build .bd-sr{min-height:300px;padding:120px 30px 30px;align-items:flex-end}
  #build .bd-sh{font-size:var(--sf)}
  #build .bd-seam{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;margin:0 0 0 -.5px}
  #build .bd-pillwrap--r,#build .bd-pillwrap--w{left:50%;right:auto;transform:translateX(-50%)}
  /* the pills keep to the band above the headlines (three lines of --sf plus the bottom padding) */
  #build .bd-pillwrap--r{top:min(40%,calc(100% - 2.58 * var(--sf) - 120px));margin-top:-14px}
  #build .bd-pillwrap--w{top:min(60%,calc(100% - 2.58 * var(--sf) - 72px));margin-top:-14px}
}

/* ---------- the page (Ravi Pages) ---------- */
#build .bd-br{container-type:inline-size;box-shadow:0 30px 80px rgba(0,0,0,.45)}
#build .bd-urlt{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#build .bd-pg{position:relative;padding:20px}
/* the pointer that tries "Make it public": motion only, out of sight between its moves */
html:not(.motion) #build .bd-cur{display:none}
html.motion #build .bd-cur{opacity:0}
#build .bd-ph{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 16px}
#build .bd-ph-t{flex:1 1 160px;min-width:0}
#build .bd-ph-t .mask{padding-bottom:.08em;margin-bottom:-.08em}
#build .bd-pubw{flex:0 1 auto;display:grid;justify-items:end;gap:8px;max-width:300px}
#build .bd-pubsw{display:inline-flex;align-items:center;gap:9px;font-size:13px;line-height:20px;color:var(--p-ink);white-space:nowrap}
#build .bd-sw{position:relative;flex:none;width:34px;height:20px;border-radius:10px;background:var(--p-line)}
#build .bd-sw-on{position:absolute;inset:0;border-radius:inherit;background:var(--p-teal);opacity:0}
#build .bd-sw-k{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(23,32,42,.3)}
#build .bd-ptag{white-space:normal;text-align:left;line-height:1.4;padding:4px 9px;transform-origin:100% 0}
#build .bd-pbar{display:flex;margin:16px 0 12px}
#build .bd-new{min-height:36px;padding:0 14px;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
#build .bd-board5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
#build .bd-col{display:grid;gap:10px;align-content:start;min-width:0;min-height:150px;padding:10px;border-radius:8px;background:var(--p-soft)}
#build .bd-colh{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--p-muted)}
#build .bd-col::after{content:"";display:block;height:52px;border:2px dashed var(--p-line);border-radius:8px}
/* phone: drop the window dots and the reload glyph (as #share does) so the whole link fits in the bar */
@container (max-width:420px){
  #build .bd-br .rb-dots,#build .bd-br .rb-reload{display:none}
  #build .bd-br .rb-chrome{gap:10px;padding:0 10px}
  #build .bd-br .rb-url{gap:6px;padding-left:10px;font-size:12px}
}
@container (max-width:560px){
  #build .bd-pg{padding:16px}
  #build .bd-pubw{flex-basis:100%;max-width:none;justify-items:start}
  #build .bd-ptag{transform-origin:0 0}
  #build .bd-board5{grid-template-columns:minmax(0,1fr);gap:6px}
  #build .bd-col{grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:0;padding:6px 8px 6px 10px}
  #build .bd-col::after{height:24px;border-radius:6px}
}

/* ---------- done inset: dev tells reception, reception posts in #office ---------- */
#build .bd-done{display:grid;gap:18px;justify-items:center;min-width:0}
#build .bd-hrow{position:relative;width:100%;max-width:640px;display:flex;justify-content:space-between;align-items:flex-end;padding:104px 6% 0}
#build .bd-c-dev,#build .bd-c-rec{--lit:1}
#build .bd-hw{z-index:2}
#build .bd-hw path{stroke:var(--mint);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.3}
#build .bd-pk-ans{z-index:5;opacity:0}
#build .bd-hand-at{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;opacity:0}
#build .bd-hand{position:absolute;left:0;bottom:12px;background:var(--bg)}
#build .bd-sk{width:100%;max-width:640px}
#build .bd-sk .sk-hd{height:40px}
#build .bd-sk .sk-msgs{padding:8px 0 10px}
#build .bd-sk .sk-text{overflow-wrap:anywhere}
#build .bd-rm{display:block;overflow:hidden;padding-bottom:2px;margin-bottom:-2px}
#build .bd-ri{display:block}
/* the address is two unbreakable pieces, so on a phone it breaks once, after the host, and the full stop stays with it */
#build .bd-url{color:var(--p-teal)}
#build .bd-up{position:relative;isolation:isolate;display:inline-block;max-width:100%;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
#build .bd-url-hl{position:absolute;inset:-1px -3px;z-index:-1;border-radius:3px;background:var(--p-teal-wash);transform-origin:0 50%}
#build .bd-up:first-child .bd-url-hl{right:0;border-radius:3px 0 0 3px}
#build .bd-up:last-child .bd-url-hl{left:0;right:0;border-radius:0 3px 3px 0}
@media (max-width:599px){
  #build .bd-hrow{flex-direction:column;align-items:flex-start;gap:72px;padding:6px 0 0}
  #build .bd-c-rec{align-self:flex-end}
}

/* ================= static view (reduced motion, no JS, frames) ================= */
#build .bd-frames{grid-template-columns:minmax(0,1fr);gap:32px}
#build .bd-fr{gap:14px}
#build .bd-fr-grid{display:grid;gap:14px;min-width:0}
#build .bd-fr--b .bd-sk{justify-self:start}
#build .bd-split--fr .bd-sl,#build .bd-split--fr .bd-sr{min-height:200px}

/* ================= touch motion (≤1023): a column under a sticky status bar ================= */
@media (max-width:1023px){
  html.motion #build .bd-board{display:flex;flex-direction:column;gap:28px}
  html.motion #build .bd-area{display:flex;flex-direction:column;gap:28px;min-width:0}
  html.motion #build .stage .bd-agent{position:sticky;top:calc(var(--hdr) + var(--bar) + 8px);z-index:8;box-shadow:0 12px 32px rgba(0,0,0,.55)}
}
/* a phone on its side: the card would cover half the view, so it scrolls with the scene (landscape only, so a
   portrait phone whose toolbars come and go never flips between the two) */
@media (max-width:1023px) and (max-height:500px) and (orientation:landscape){
  html.motion #build .stage .bd-agent{position:relative;top:auto}
}
/* phone: one compact row (about 56px) under the header: avatar, name, pill. The three checks become markers on the
   progress bar (their labels stay for screen readers). The ticket is a passing note: it lands beside the avatar
   before the name and the pill come in, then drops into the avatar, so it never covers them. */
@media (max-width:599px){
  html.motion #build .stage .bd-agent{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px 15px}
  html.motion #build .stage .bd-who{flex:1 1 auto;gap:8px}
  html.motion #build .stage .bd-av{width:30px;height:30px;border-radius:8px;font-size:15px}
  html.motion #build .stage .bd-nm b{font-size:15px;line-height:16px}
  html.motion #build .stage .bd-nm span{line-height:15px;letter-spacing:0}
  html.motion #build .stage .bd-st{flex:none;margin-left:auto;min-height:26px;gap:6px;padding:2px 9px 2px 7px}
  html.motion #build .stage .bd-tk{position:absolute;left:46px;top:50%;margin-top:-26px;z-index:3;pointer-events:none}
  html.motion #build .stage .bd-prog{left:10px;right:10px;bottom:6px}
  html.motion #build .stage .bd-chk{position:absolute;z-index:1;left:10px;right:10px;bottom:7.5px;height:0;display:block}
  html.motion #build .stage .bd-chk li{position:absolute;top:0;left:33.333%;transform:translate(-50%,-50%)}
  html.motion #build .stage .bd-chk li:nth-child(2){left:66.667%}
  html.motion #build .stage .bd-chk li:nth-child(3){left:100%;transform:translate(-100%,-50%)}
  html.motion #build .stage .bd-chk span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html.motion #build .stage .bd-ck{width:14px;height:14px}
  html.motion #build .stage .bd-ck circle{fill:var(--bg-raised)}
}

/* ================= desk motion (≥1024 × ≥640): one bar on top, one cell below ================= */
@media (min-width:1024px){
  /* the stage stays closed until the iris opens it (the builder takes over) */
  html.motion #build .stage{clip-path:circle(0px at 50% 50%)}
}
@media (min-width:1024px) and (min-height:640px){
  html.motion #build .bd-board{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr);gap:16px}
  html.motion #build .bd-area{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}
  html.motion #build .bd-area>*{grid-column:1;grid-row:1;min-height:0}
  html.motion #build .bd-cards{align-self:center}
  /* folded (short screens, set by the builder): top-aligned, and the rules slot sits over the table's hint row */
  html.motion #build .bd-cards--fold{align-self:start}
  html.motion #build .bd-cards--fold .bd-slot+.bd-slot::before{display:none}
  html.motion #build .bd-slot::before{content:"";position:absolute;inset:0;border:1px dashed var(--line-strong);border-radius:10px}
  html.motion #build .bd-split{align-self:stretch}
  html.motion #build .bd-split-in{height:100%}
  html.motion #build .bd-sl,html.motion #build .bd-sr{min-height:0}
  html.motion #build .bd-br{align-self:center}
  html.motion #build .bd-done{align-self:center}
  html.motion #build .bd-hrow{max-width:720px}
}
/* shorter screens: tighter cards so the table and the rules fit together */
@media (min-width:1024px) and (min-height:640px) and (max-height:840px){
  html.motion #build .stage .bd-agent{padding-block:12px 18px}
  html.motion #build .stage .bd-av{width:36px;height:36px}
  html.motion #build .stage .bd-tk{padding-block:4px 5px}
  html.motion #build .bd-board{gap:12px}
  html.motion #build .bd-cards{gap:10px}
  html.motion #build .bd-base{padding:10px 14px 12px}
  html.motion #build .bd-ths{margin-top:8px}
  html.motion #build .bd-th>b{padding-block:6px 7px}
  html.motion #build .bd-hint,html.motion #build .bd-stcs{padding-block:6px}
  html.motion #build .bd-rows i{height:20px}
  html.motion #build .bd-vcard{padding:10px 14px 10px}
  html.motion #build .bd-vrows{margin-top:6px}
  html.motion #build .bd-vr{padding:5px 0}
  html.motion #build .bd-vr dd{font-size:14px}
  html.motion #build .bd-vfoot{padding-top:6px;margin-top:2px}
  html.motion #build .bd-pg{padding:16px 18px}
  html.motion #build .bd-pbar{margin:10px 0 8px}
  html.motion #build .bd-col{min-height:112px}
  html.motion #build .bd-col::after{height:40px}
}
@media (min-width:1024px) and (min-height:640px) and (max-height:740px){
  html.motion #build .bd-rows{display:none}
  html.motion #build .bd-ths{border-radius:6px}
  html.motion #build .bd-tk span{display:none}
  html.motion #build .bd-vfoot{border-top:0;padding-top:2px}
}
/* 1280–1419: the stage is narrower than the bar's one row (936px at 1440), so the checks take a second row */
@media (min-width:1280px) and (max-width:1419px) and (min-height:640px){
  html.motion #build .stage .bd-agent{display:grid;gap:10px 20px}
  html.motion #build .stage .bd-chk{margin-left:0}
}
/* compact desktop (1024–1279): the stage is shorter (the caption rail sits under it) */
@media (min-width:1024px) and (max-width:1279px) and (min-height:640px){
  html.motion #build .bd-rows{display:none}
  html.motion #build .bd-ths{border-radius:6px}
  html.motion #build .bd-tk span{display:none}
  html.motion #build .bd-hrow{padding-top:92px}
}

/* ===== 03-share.css ===== */
/* 03 · #share: one link for the whole team (unpinned, scripted run + controls).
   .sh-try: the Viewing as switch, four captions and one light browser. The switch drives the board
   through data attributes on .sh-try (JS, every mode) or through :has() (no JS).
   .sh-end: the fine line, the recap chips and the bridge line with its wire down to 04. */

#share{--sh-dot-req:#c9a227;--sh-dot-app:#3c9a5f;--sh-dot-ord:#3b6fc4;--sh-dot-rec:#7d8794;--sh-dot-dec:#c4473f}
#share .sec-head{margin-bottom:64px}
#share .sh-acct{max-width:46em;margin-top:-6px;font-size:13px;color:var(--muted)}
#share .sh-bh{display:flex;align-items:flex-start;text-wrap:balance;gap:12px;font-family:var(--font-mono);font-weight:500;font-size:13px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
#share .sh-bh::before{content:"";flex:none;width:8px;height:8px;margin-top:5px;background:var(--sand)}

/* ================= the board block ================= */
#share .sh-try{position:relative;display:grid;grid-template-columns:var(--copy-w) minmax(0,1fr);column-gap:var(--col-gap);align-items:start;
  grid-template-areas:"bh main" "ctl main" "caps main";grid-template-rows:auto auto 1fr;overflow-anchor:none}
#share .sh-bh--a{grid-area:bh;padding-top:6px}

/* Viewing as: a control of this demo, outside the page */
#share .sh-ctl{grid-area:ctl;display:grid;gap:10px;margin-top:24px}
#share .sh-va-l{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.08em;color:var(--quiet)}
#share .sh-vseg{display:flex;width:100%;flex-wrap:nowrap}
#share .sh-vseg>label{flex:1 1 auto;min-height:44px;padding:0 12px;font-family:var(--font-sans);font-size:14px;letter-spacing:0;text-transform:none;white-space:nowrap}
#share .sh-vseg>label[for="sh-v-carla"]{flex-grow:2}
#share .sh-vhint{font-size:12px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* captions: the current one reads while the run plays */
#share .sh-caps{grid-area:caps;display:grid;gap:0;margin-top:36px}
#share .sh-caps li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
#share .sh-cap-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--sand)}
#share .sh-caps p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
#share .sh-caps li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--mint);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* desk run only (the script sets data-capdim): captions not yet reached stay readable, about 5.8:1 */
html.motion #share .sh-try[data-capdim="1"] .sh-caps li{opacity:.75;transition:opacity .35s}
html.motion #share .sh-try[data-capdim="1"] .sh-caps li.is-on{opacity:1}
html.motion #share .sh-try[data-capdim="1"] .sh-caps li.is-on::before{transform:scaleX(1)}
html.motion #share .sh-try[data-capdim="1"] .sh-caps li.is-on p{color:var(--text)}

#share .sh-main{grid-area:main;position:relative;min-width:0}
#share .sh-later{margin-bottom:16px}
#share .sh-frames{margin-bottom:22px}

/* HUD: what stays the same, at the browser's top edge */
#share .sh-hud{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:0 2px 10px;font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--muted)}
#share .sh-hud li{position:relative;white-space:nowrap}
#share .sh-hud b{font-weight:500;letter-spacing:.12em;color:var(--quiet)}
#share .sh-hud li::after{content:"";position:absolute;left:4px;top:calc(100% + 2px);width:1px;height:8px;background:var(--line-strong)}

/* ---------- the browser ---------- */
#share .sh-br{display:flex;flex-direction:column;height:520px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
#share .sh-br .rb-chrome{flex:none}
#share .sh-url{max-width:460px}
#share .sh-rl{display:inline-block}
#share .sh-page{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:18px 20px 20px}
#share .sh-head{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:14px}
#share .sh-head .rb-mark{width:30px;height:30px}
#share .sh-ttl{min-width:0;margin-right:auto}
#share .sh-ttl .rb-title{font-size:17px}

/* the 30-second dial */
#share .sh-every{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--p-muted);white-space:nowrap}
#share .sh-dial{width:18px;height:18px;flex:none;overflow:visible}
#share .sh-dial-o{fill:none;stroke:var(--p-line);stroke-width:2}
#share .sh-dial-a{fill:none;stroke:var(--p-teal);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
#share .sh-dial-h{fill:none;stroke:var(--p-ink);stroke-width:1.6;stroke-linecap:round}
#share .sh-dial-c{fill:var(--p-teal)}

#share .sh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;min-height:36px}
#share .sh-filter{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:3px 12px 3px 10px;border:1px solid var(--p-line);border-radius:15px;background:#fff;
  font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--p-ink);min-width:0}
#share .sh-filter svg{flex:none;width:13px;height:13px;fill:var(--p-muted)}
#share .sh-fx{min-width:0}
#share .sh-fx>span{white-space:pre-wrap}
#share .sh-fx-t{display:none}
html.js #share .sh-try[data-viewer="carla"] .sh-fx-o{display:none}
html.js #share .sh-try[data-viewer="carla"] .sh-fx-t{display:inline}
#share .sh-page .btn{font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;min-height:36px;padding:0 14px}
#share .sh-new{flex:none}
#share span.sh-new{cursor:default}
#share span.btn--teal-o:hover{color:var(--p-teal);background:#fff}

/* board */
#share .sh-board{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch;overflow-anchor:none}
#share .sh-col{align-content:start;min-height:0}
/* column titles: plain paragraphs (a picture of a page, not part of the site outline), styled as the shared .rb-col>h4 */
#share .sh-col-h{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--p-muted)}
#share .sh-col>.sh-col-h{margin-bottom:2px}
#share .sh-ch{display:inline-flex;align-items:center;gap:6px;letter-spacing:.06em}
#share .sh-dot{flex:none;width:7px;height:7px;border-radius:2px;background:var(--sh-dot-req)}
#share [data-st="app"] .sh-dot{background:var(--sh-dot-app)}
#share [data-st="ord"] .sh-dot{background:var(--sh-dot-ord)}
#share [data-st="rec"] .sh-dot{background:var(--sh-dot-rec)}
#share [data-st="dec"] .sh-dot{background:var(--sh-dot-dec)}
#share .sh-card{transform-origin:50% 0}
#share .sh-card .row{min-height:20px}
#share .sh-card--new{padding-left:10px;padding-right:10px;border-color:var(--p-teal);box-shadow:0 0 0 1px var(--p-teal-wash);overflow:hidden}
#share .sh-own{display:block;justify-self:start;min-width:0;max-width:100%;padding:3px 5px;font-family:var(--font-sans);font-size:12px;font-weight:500;line-height:1.35;letter-spacing:-.01em;white-space:normal}
#share .sh-flash{position:absolute;inset:0;border-radius:inherit;background:var(--p-teal-wash);opacity:0;pointer-events:none}
#share .sh-skel{position:absolute;inset:0;z-index:3;display:none;background:var(--p-bg)}
#share .sh-skel .skel{height:100%}
#share .sh-try[data-load="1"] .sh-skel{display:block}
/* off screen the loading shimmer stops (the script sets .is-paused); base's .shimmer.is-paused loses to the animation shorthand on .is-on */
html.motion #share .shimmer.is-on.is-paused::before{animation-play-state:paused}
#share .sh-toast{left:0;right:auto;bottom:0;margin:0;z-index:5}
#share .sh-toast svg{width:14px;height:14px;fill:none;stroke:var(--p-code-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Carla's window (desktop: floats over the last two columns) */
#share .sh-inset{position:absolute;right:20px;bottom:20px;z-index:4;width:calc((100% - 80px) * .4 + 10px);background:#fff;border:1px solid var(--p-line);border-radius:8px;overflow:hidden;isolation:isolate}
#share .sh-inset::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 18px 44px rgba(23,32,42,.18);z-index:-1;pointer-events:none}
/* the window's bar: the link, then who is signed in; the name drops to its own row when the window is narrow (the link is never cut) */
#share .sh-in-chrome{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:32px;padding:6px 10px;background:var(--p-soft);border-bottom:1px solid var(--p-line);font-family:var(--font-mono);font-size:12px;line-height:1.35;color:var(--p-muted)}
#share .sh-in-url{flex:0 1 auto;white-space:nowrap}
#share .sh-in-who{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--p-ink);white-space:nowrap}
#share .sh-in-col{position:relative;display:grid;gap:8px;padding:10px;margin:10px;border-radius:8px;background:var(--p-soft)}
#share .sh-in-col>.sh-col-h{gap:0}
#share .sh-in-col .n{font-family:var(--font-mono);font-size:12px;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:6px;background:#fff;border:1px solid var(--p-line)}
#share .sh-in-slot{display:grid;place-items:center;min-height:52px;padding:8px;border:2px dashed #e3cf9b;border-radius:8px}
#share .sh-in-tag{display:inline-block;padding:4px 8px;border:1px solid #d9b45c;border-radius:4px;background:#fdf6e3;color:#6f5210;font-size:12px;line-height:1.4;text-align:center;text-wrap:balance}
#share .sh-in-skel{position:absolute;inset:34px 10px 10px;border-radius:8px;background:var(--p-soft);opacity:0;pointer-events:none}

/* drawer (desktop: 320px from the right, over the board) */
#share .sh-drawer{position:absolute;top:0;right:0;bottom:0;z-index:7;width:320px;max-width:100%;background:#fff;border-left:1px solid var(--p-line);overflow:auto}
#share .sh-drawer::before{content:"";position:absolute;inset:0;box-shadow:-18px 0 40px rgba(23,32,42,.12);pointer-events:none}
#share .sh-dw-in{position:relative;display:grid;gap:14px;padding:20px}
#share .sh-dw-t{font-size:16px;font-weight:600;line-height:1.3;color:var(--p-ink)}
#share .sh-fld{display:grid;gap:6px}
#share .sh-fl{font-size:13px;line-height:1.3;color:var(--p-muted)}
#share .sh-fv{display:flex;align-items:center;justify-content:space-between;gap:8px;height:38px;padding:0 12px;border:1px solid var(--p-line);border-radius:6px;background:#fff;font-size:14px;color:var(--p-ink)}
#share .sh-fv--m{font-family:var(--font-mono);font-size:13px}
#share .sh-fv--sel>span:last-child{color:var(--p-muted)}
#share .sh-ft{display:inline-block;white-space:pre}
#share .sh-dw-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
#share .sh-hint{font-size:12px;line-height:1.4;color:var(--p-muted)}

/* sign-in gate (desk motion) */
#share .sh-gate{position:absolute;inset:0;z-index:8;display:none;place-items:center;background:var(--p-soft)}
#share .sh-gcard p:first-child{font-weight:500}
#share .sh-gcard p+p{color:var(--p-muted);font-size:14px}
#share .sh-cur{opacity:0}

/* ---------- static frames (reduced motion, no JS, frames mode) ---------- */
#share .sh-fr{display:grid;align-content:center;gap:8px;min-height:148px;padding:12px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-bg);color:var(--p-ink)}
#share .sh-fr-gate{display:grid;justify-items:center;gap:4px;text-align:center;font-size:13px;line-height:1.45}
#share .sh-fr-gate p:first-child{font-weight:500}
#share .sh-fr-gate p+p{color:var(--p-muted)}
#share .sh-fr-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;margin-top:6px;border-radius:4px;background:var(--p-teal);color:#fff;font-size:13px;font-weight:500}
#share .sh-fr-fx{justify-self:start;padding:2px 10px;border:1px solid var(--p-line);border-radius:12px;background:#fff;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--p-ink)}
#share .sh-fr-rows{display:grid;gap:6px;align-content:start}
#share .sh-fr-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 8px;border:1px solid var(--p-line);border-radius:6px;background:#fff}
#share .sh-fr-nm{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;white-space:nowrap}
#share .sh-fr-r{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
#share .sh-fr-rows .val{font-family:var(--font-mono);font-size:12px;color:var(--p-teal)}

/* touch motion: the gate and loading mini strip */
#share .sh-mini{display:none}
#share .sh-mf{position:relative;overflow:hidden;display:grid;align-content:center;min-height:132px;padding:12px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-bg);color:var(--p-ink)}
/* the strip is a sketch of the gate, not a control: its Sign in is drawn dashed, so it doesn't read as a button to tap */
#share .sh-mini .sh-fr-btn{background:transparent;color:var(--p-teal);border:1px dashed var(--p-teal)}
#share .sh-mskel{display:grid;gap:8px}
#share .sh-mskel i{display:block;height:20px;border:2px dashed var(--p-line);border-radius:6px;background:var(--p-soft)}
#share .sh-mskel i:nth-child(2){width:72%}
#share .sh-mskel i:nth-child(4){width:56%}

/* ---------- state: which cards, which counts ---------- */
/* authored default (no JS, no :has): viewing as Bruno right after filing */
#share .sh-card{display:none}
#share .sh-card[data-v~="bruno"]{display:grid}
#share .sh-col .n>[data-c]{display:none}
#share .sh-col .n>[data-c="bruno"]{display:inline}

/* JS (every mode): data attributes on .sh-try mirror the switch */
html.js #share .sh-try .sh-card{display:none}
html.js #share .sh-try[data-viewer="ana"] .sh-card[data-v~="ana"],
html.js #share .sh-try[data-viewer="bruno"] .sh-card[data-v~="bruno"],
html.js #share .sh-try[data-viewer="carla"] .sh-card[data-v~="carla"]{display:grid}
html.js #share .sh-try[data-filed="0"] .sh-card.sh-card--new{display:none!important}
html.js #share .sh-try .sh-col .n>[data-c]{display:none}
html.js #share .sh-try[data-viewer="ana"] .sh-col .n>[data-c="ana"],
html.js #share .sh-try[data-viewer="bruno"] .sh-col .n>[data-c="bruno"],
html.js #share .sh-try[data-viewer="carla"] .sh-col .n>[data-c="carla"]{display:inline}
html.js #share .sh-try:not([data-viewer="bruno"]) .sh-new,
html.js #share .sh-try:not([data-viewer="bruno"][data-inset="1"]) .sh-inset,
html.js #share .sh-try:not([data-viewer="bruno"][data-toast="1"]) .sh-toast{display:none}
@media (min-width:1024px){
  html.motion #share .sh-try[data-gate="1"] .sh-gate{display:grid}
}
html.motion #share .sh-try[data-phase="pre"] .sh-board .sh-card{opacity:0}

/* no JS, with :has(): the switch swaps the board directly */
html.no-js #share .sh-try:has(input:checked) .sh-card{display:none}
html.no-js #share .sh-try:has(#sh-v-ana:checked) .sh-card[data-v~="ana"],
html.no-js #share .sh-try:has(#sh-v-bruno:checked) .sh-card[data-v~="bruno"],
html.no-js #share .sh-try:has(#sh-v-carla:checked) .sh-card[data-v~="carla"]{display:grid}
html.no-js #share .sh-try:has(input:checked) .sh-col .n>[data-c]{display:none}
html.no-js #share .sh-try:has(#sh-v-ana:checked) .sh-col .n>[data-c="ana"],
html.no-js #share .sh-try:has(#sh-v-bruno:checked) .sh-col .n>[data-c="bruno"],
html.no-js #share .sh-try:has(#sh-v-carla:checked) .sh-col .n>[data-c="carla"]{display:inline}
html.no-js #share .sh-try:has(#sh-v-carla:checked) .sh-fx-o{display:none}
html.no-js #share .sh-try:has(#sh-v-carla:checked) .sh-fx-t{display:inline}
html.no-js #share .sh-try:has(#sh-v-ana:checked) :is(.sh-new,.sh-inset,.sh-toast),
html.no-js #share .sh-try:has(#sh-v-carla:checked) :is(.sh-new,.sh-inset,.sh-toast){display:none}

/* motion: a sliding pill under the checked segment (clip-path, set by the section script) */
#share .sh-seg{position:relative}
#share .sh-pill{display:none}
html.motion #share .sh-seg.has-pill>.sh-pill{display:block;position:absolute;inset:3px;border-radius:4px;background:var(--text);pointer-events:none;z-index:0;clip-path:inset(0 100% 0 0 round 4px)}
html.motion #share .sh-seg.has-pill>label{z-index:1;background:transparent}
html.motion #share .sh-seg.has-pill>input:checked+label{background:transparent;color:var(--text)}
/* the labels invert where the pill is (light text on dark, dark text on the pill), so every name stays readable while it slides */
html.motion #share .sh-seg.has-pill>label{mix-blend-mode:difference}

/* ================= after the board: fine line, recap, bridge ================= */
#share .sh-end{display:grid;grid-template-columns:var(--copy-w) minmax(0,1fr);column-gap:var(--col-gap);align-items:start;margin-top:28px}
#share .sh-fine{grid-column:2;max-width:46em;padding-left:14px;border-left:2px solid var(--line-strong)}
#share .sh-sum{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(72px,10vh,112px)}
#share .sh-chip{height:auto;min-height:36px;padding:6px 14px 6px 10px;font-size:13px;line-height:1.35;white-space:normal;color:var(--text);border-color:var(--line-strong);transform-origin:16px 50%}
#share .sh-chk{flex:none;width:16px;height:16px;padding:2px;border-radius:50%;background:rgba(183,246,209,.12);overflow:visible}
#share .sh-chk path{fill:none;stroke:var(--mint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#share .sh-bridge-w{grid-column:1/-1;position:relative;margin-top:28px}
#share .sh-bridge{max-width:25em;font-size:clamp(22px,2.3vw,32px);line-height:1.25;font-weight:400;letter-spacing:-.01em;color:var(--text)}
#share .sh-bridge .mask+.mask .in{color:var(--muted)}
#share .sh-bridge .in{text-wrap:balance}
#share .sh-bw-end{position:relative;display:inline-block;width:0;height:1em;vertical-align:baseline}
/* no JS: the wire hangs from the end of the line in CSS (the masks stay open) */
html.no-js #share .sh-bridge .mask{overflow:visible}
html.no-js #share .sh-bw{display:none}
html.no-js #share .sh-bw-end{--bw-l:92px}
html.no-js #share .sh-bw-end::before{content:"";position:absolute;left:5.25px;top:calc(100% + 12px);width:1.5px;height:var(--bw-l);background:repeating-linear-gradient(to bottom,var(--mint) 0 4px,transparent 4px 9px)}
html.no-js #share .sh-bw-end::after{content:"";position:absolute;left:3px;top:calc(100% + 9px + var(--bw-l));width:6px;height:6px;border-radius:50%;background:var(--mint)}
@media (max-width:1279px){html.no-js #share .sh-bw-end{--bw-l:78px}}
@media (max-width:1023px){html.no-js #share .sh-bw-end{--bw-l:60px}}
@media (max-width:599px){html.no-js #share .sh-bw-end{--bw-l:46px}}
/* the wire: authored as a short drop under the line's start; the script moves it to the line's end */
#share .sh-bw{position:absolute;left:4px;top:calc(100% + 12px);width:12px;height:120px;pointer-events:none}
#share .sh-bw-svg{position:absolute;left:0;top:0;overflow:visible}
#share .sh-bw-m{fill:none;stroke:#fff;stroke-width:8;stroke-dasharray:1;stroke-dashoffset:0}
#share .sh-bw-p{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
#share .sh-bw-dot{fill:var(--mint)}
#share .sh-bw-pk{opacity:0}

html.motion #share .sh-chip{opacity:0;transform:scale(.8)}
html.motion #share .sh-chk path{stroke-dashoffset:1}
html.motion #share .sh-bridge .in{transform:translateY(110%)}
html.motion #share .sh-bw-m{stroke-dashoffset:1}
html.motion #share .sh-bw-dot{opacity:0}

/* narrow wide-desk: the three HUD items no longer fit on one row */
@media (min-width:1280px) and (max-width:1359px){
  #share .sh-hud{justify-content:flex-start;gap:4px 28px}
  #share .sh-hud li::after{display:none}
}

/* ================= compact desktop 1024–1279 and below ================= */
@media (max-width:1279px){
  #share .sh-try{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;row-gap:0}
  #share .sh-try>*{grid-area:auto}
  #share .sh-main{display:contents}
  /* the story strip first (tag, then the static frames or the touch mini strip), then the board heading, and the
     Viewing as switch right above the HUD and the browser it drives, so a tap on it changes what's on screen */
  #share .sh-later{order:1;justify-self:start}
  #share .sh-frames{order:2}
  #share .sh-mini{order:3}
  #share .sh-bh--a{order:4;margin-top:20px}
  #share .sh-ctl{order:5;max-width:560px;margin-bottom:24px}
  #share .sh-hud{order:6}
  #share .sh-br{order:7}
  #share .sh-caps{order:8;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  #share .sh-end{grid-template-columns:minmax(0,1fr)}
  #share .sh-fine{grid-column:1;margin-top:8px}
}

/* ================= touch and phone ≤1023 ================= */
@media (max-width:1023px){
  #share .sec-head{margin-bottom:44px}
  #share .sh-ctl{margin-top:16px;margin-bottom:20px}
  #share .sh-bh--a{margin-top:16px}
  #share .sh-caps{grid-template-columns:minmax(0,1fr);margin-top:28px}
  html.motion #share .sh-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  #share .sh-hud{justify-content:flex-start;gap:4px 16px;padding-bottom:10px}
  #share .sh-hud li{white-space:normal}
  #share .sh-hud li::after{display:none}

  #share .sh-br{height:auto}
  #share .sh-page{overflow:visible;padding:16px 14px}
  #share .sh-bar{flex-wrap:wrap}
  #share .sh-page .btn{min-height:44px}
  #share .sh-board{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  #share .sh-col{min-height:0;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
  #share .sh-col>.sh-col-h{grid-column:1/-1}
  #share .sh-skel .skel{grid-template-columns:1fr}
  #share .sh-skel .skel-col{min-height:56px}
  #share .sh-toast{position:relative;left:auto;right:auto;bottom:auto;justify-self:end}
  #share .sh-inset{position:relative;right:auto;bottom:auto;width:auto;margin-top:14px}
  #share .sh-drawer{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:0 0 14px;border:1px solid var(--p-line);border-radius:8px;overflow:visible}
  #share .sh-drawer::before{display:none}
  #share .sh-dw-in{padding:14px}
  #share .sh-sum{margin-top:64px}
}
@media (max-width:599px){
  #share .sec-head{margin-bottom:36px}
  #share .sh-br .rb-dots,#share .sh-br .sh-rl{display:none}
  #share .sh-url{gap:6px;font-size:12px}
  #share .sh-br .rb-chrome{gap:10px;padding:0 10px}
  #share .sh-url{padding-left:10px}
  #share .sh-col{grid-template-columns:minmax(0,1fr)}
  #share .sh-vseg>label{padding:0 8px;font-size:13px}
  #share .sh-sum{flex-direction:column;align-items:flex-start;margin-top:56px}
  #share .sh-bridge{font-size:22px}
}
@media (pointer:coarse){
  #share .sh-page .btn{min-height:44px}
}

/* ===== 04-wake.css ===== */
/* 04 · #wake (PIN 3): nobody has to forward it.
   Authored HTML = final state. One DOM, three layouts:
   - static (reduced, no JS, frames): two frames. ARRIVES = the pipeline as a column (the page, Ravi, what ops
     watches for, ops) with Bruno's ticket docked beside the watch card; POSTED = ops's work card and #finance.
   - touch motion (≤1023): ARRIVES is a full-height pinned panel; the nodes keep to the left and the ticket rides
     down a lane on the right, then docks beside the watch card. POSTED follows in the flow and plays on enter.
   - desk motion (≥1024 × ≥640): a band across the top (page · Ravi · watch card · ops); the ticket hangs under
     the wire on its way, then drops into ops's work card (bottom left); #finance sits bottom right.
     .wk-cam frames the band alone first, then pans so the bottom row is in view. */

/* ---------- shared pieces ---------- */
#wake .wk-stage{min-width:0}
#wake .wk-cam{position:relative;display:flex;flex-direction:column;gap:32px;min-width:0}
#wake .wk-ev,#wake .wk-cd{min-width:0}

/* dark pipeline nodes */
#wake .wk-pipe{position:relative;min-width:0}
#wake .wk-node{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-width:100%;padding:8px 14px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg-raised);font-family:var(--font-mono);font-size:12px;line-height:17px;color:var(--text);text-align:center}
#wake .wk-k{position:relative;display:inline-block;color:var(--quiet);letter-spacing:.08em;white-space:nowrap}
#wake .wk-k1{position:absolute;left:0;top:0;color:var(--mint)}
/* the " ·" after a label shows only where the label and its value share a line (short touch screens) */
#wake .wk-sep{display:none}
#wake .wk-v{color:var(--text)}
#wake .wk-n-ravi{flex-direction:row;gap:10px;text-align:left}
#wake .wk-n-ravi .wk-v{display:block;max-width:16ch}
#wake .wk-txt{display:block;min-width:0}
#wake .wk-dial{flex:none;width:22px;height:22px;overflow:visible}
#wake .wk-dial-o{fill:none;stroke:var(--line-strong);stroke-width:1.2}
#wake .wk-dial-arc{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;opacity:.6}
#wake .wk-hand line{stroke:var(--mint);stroke-width:1.6;stroke-linecap:round}
#wake .wk-hand circle{fill:var(--mint)}
#wake .wk-n-ops{padding:0;border:0;background:none}
#wake .wk-ops{height:30px;transform-origin:50% 50%}

/* the watch card (light): what ops is set up to watch for */
#wake .wk-watch{align-items:stretch;padding:12px 10px 10px;width:max-content;max-width:100%;background:#fff;border-color:var(--p-line);border-radius:8px;
  color:var(--p-ink);text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.35)}
#wake .wk-glow{position:absolute;inset:-1px;border:1px solid var(--mint);border-radius:9px;box-shadow:0 0 0 4px rgba(183,246,209,.16),0 0 28px rgba(183,246,209,.18);opacity:0;pointer-events:none}
#wake .wk-wh{padding:0 8px 8px;font-size:12px;line-height:16px;letter-spacing:.12em;color:var(--p-muted);text-wrap:balance}
#wake .wk-cls{display:grid;gap:2px}
#wake .wk-cl{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:8px;padding:4px 10px 4px 6px;border-radius:5px;
  font-family:var(--font-sans);font-size:14px;line-height:20px;color:var(--p-ink)}
#wake .wk-chk{position:relative;z-index:1;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--p-teal);color:#fff;font-size:12px;line-height:1;transform-origin:50% 50%}
#wake .wk-clt{position:relative;z-index:1;text-wrap:balance}
#wake .wk-cl-hi{position:absolute;inset:0;border-radius:5px;background:var(--p-teal-wash);box-shadow:inset 2px 0 0 var(--p-teal);opacity:0;pointer-events:none}

/* Bruno's ticket (light, the packet's payload) */
#wake .wk-ticket{position:relative;z-index:2;display:grid;gap:2px;width:200px;max-width:100%;padding:10px 14px 11px 17px;border:1px solid var(--p-line);border-radius:8px;
  background:var(--p-bg);color:var(--p-ink);box-shadow:inset 3px 0 0 var(--teal-dk),0 14px 34px rgba(0,0,0,.4)}
#wake .wk-tk-h{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.12em;color:var(--p-teal)}
#wake .wk-tk-t{font-weight:600;font-size:15px;line-height:1.35}
#wake .wk-tk-s{font-size:13px;line-height:1.4;color:var(--p-muted)}
#wake .wk-tk-d{font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--p-muted);white-space:nowrap}

/* ops's work card (dark). Its box is two pieces, so motion can end it just under any block (--cut, set by the
   builders) without a height tween: ::before clips from the bottom, ::after (the 12px bottom edge) rides up by the
   same amount. --cut is 0 in every static view, so the whole card shows. */
#wake .wk-work{--cut:0px;position:relative;isolation:isolate;display:grid;gap:12px;align-content:start;min-width:0;padding:14px 16px 16px}
#wake .wk-work::before,#wake .wk-work::after{content:"";position:absolute;z-index:-1;left:0;right:0;border:1px solid var(--line-strong);background:var(--bg-raised);pointer-events:none}
#wake .wk-work::before{top:0;bottom:11px;border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 24px 60px rgba(0,0,0,.35);clip-path:inset(-80px -80px var(--cut) -80px)}
#wake .wk-work::after{bottom:0;height:12px;border-top:0;border-radius:0 0 10px 10px;transform:translateY(calc(-1 * var(--cut)))}
#wake .wk-whd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
#wake .wk-wchip{height:30px}
#wake .wk-wst{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid var(--line-strong);border-radius:13px;font-family:var(--font-mono);font-size:12px;
  color:var(--muted);white-space:nowrap;transform-origin:100% 50%}
#wake .wk-wst-d{flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal-dk)}
#wake .wk-wst.is-done{border-color:rgba(183,246,209,.45);color:var(--mint)}
#wake .wk-wst.is-done .wk-wst-d{background:var(--mint)}
#wake .wk-wst-c{display:inline-grid}
#wake .wk-wst-c>span{grid-area:1/1}
#wake .wk-wst-z{visibility:hidden}
#wake .wk-wslot{display:none}
#wake .wk-wlh{font-size:13px;line-height:1.4;color:var(--quiet)}
#wake .wk-wl{display:grid;border-top:1px solid var(--line)}
#wake .wk-wr{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px;padding:9px 6px;border-bottom:1px solid var(--line)}
#wake .wk-wr-hi{position:absolute;inset:0;background:rgba(183,246,209,.08);box-shadow:inset 2px 0 0 var(--mint);opacity:0;pointer-events:none}
#wake .wk-wn{position:relative;font-size:14px;line-height:1.4;color:var(--text);min-width:0}
#wake .wk-ws{position:relative;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap}
#wake .wk-sv{color:var(--mint)}
#wake .wk-sv.is-none{color:var(--muted)}
#wake .wk-svd{flex:none;width:7px;height:7px;border-radius:50%;background:#e08a57;opacity:0}
#wake .wk-wnote{font-size:13px;line-height:1.45;color:var(--muted)}
#wake .wk-wcard{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding-top:12px;border-top:1px solid var(--line)}
#wake .wk-mini{width:56px;height:40px;overflow:visible}
#wake .wk-mk{fill:none;stroke:#fff;stroke-width:4;stroke-dasharray:1;stroke-dashoffset:0}
#wake .wk-mo{fill:none;stroke:var(--mint);stroke-width:1.2;stroke-dasharray:3 2.4}
#wake .wk-mi rect{fill:var(--line-strong)}
#wake .wk-mi .wk-mi-h{fill:var(--muted)}
#wake .wk-mi .wk-mi-a{fill:var(--teal-dk)}
#wake .wk-mi .wk-mi-d{fill:none;stroke:#e08a57;stroke-width:1}
#wake .wk-wct{font-size:14px;line-height:1.4;color:var(--text);min-width:0}
#wake .wk-wcs{display:inline-flex;font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap;transform-origin:100% 50%}
#wake .wk-wcs.is-done{color:var(--mint)}

/* #finance */
#wake .wk-fin{min-width:0;width:100%;max-width:480px}
#wake .wk-fin .sk-hd{height:40px}
#wake .wk-fin .sk-msgs{padding:8px 0 12px}
#wake .wk-fin .sk-msg{padding:6px 16px}
#wake .wk-bk{gap:10px}
#wake .wk-bk .bk-fields{gap:10px 16px}
#wake .wk-bk .bk-fields p{min-width:0;overflow-wrap:anywhere}
#wake .wk-fmsg{min-width:0}

/* wires and the packet: under the nodes, so the packet passes behind them */
#wake .wk-wires{z-index:1}
#wake .wk-wires .wk-w{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
#wake .wk-wires .wk-w3{stroke-dasharray:1;stroke:var(--teal-dk);opacity:.7}
#wake .wk-pk{z-index:2}

/* ---------- static (reduced, no JS, frames): two frames ---------- */
html:not(.motion) #wake .wk-cam{gap:48px}
html:not(.motion) #wake .wk-pipe{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:28px}
html:not(.motion) #wake .wk-node+.wk-node::before{content:"";position:absolute;left:50%;bottom:calc(100% + 1px);width:1px;height:26px;background:var(--line-strong)}
html:not(.motion) #wake .wk-node+.wk-node::after{content:"";position:absolute;left:50%;bottom:calc(100% + 1px);margin-left:-3.5px;border:4px solid transparent;border-bottom:0;border-top:5px solid var(--line-strong)}
html:not(.motion) #wake .wk-ticket::after{content:"";position:absolute;left:50%;bottom:calc(100% + 1px);width:1px;height:26px;background:var(--teal-dk)}
html:not(.motion) #wake .wk-cd{gap:20px}
@media (min-width:600px){
  /* the ticket sits beside the watch card, tied to it by a short line */
  html:not(.motion) #wake .wk-pipe{grid-template-columns:max-content max-content;justify-content:center;column-gap:40px}
  html:not(.motion) #wake .wk-node{grid-column:1}
  html:not(.motion) #wake .wk-ticket{grid-column:2;grid-row:3;align-self:center}
  html:not(.motion) #wake .wk-ticket::after{left:auto;right:calc(100% + 1px);bottom:auto;top:50%;width:40px;height:1px}
}
@media (min-width:1280px){
  html:not(.motion) #wake .wk-cd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start}
  html:not(.motion) #wake .wk-cd>figcaption{grid-column:1/-1}
}

/* ---------- touch motion (≤1023): ARRIVES is a pinned full-height panel ---------- */
@media (max-width:1023px){
  html.motion #wake .wk-cam{gap:28px}
  html.motion #wake .wk-ev{display:block;position:relative;height:calc(100svh - var(--hdr) - var(--bar));min-height:480px}
  /* the nodes keep to the left; the ticket's lane is the right-hand strip */
  html.motion #wake .wk-pipe{--lane:clamp(160px,38%,236px);position:static;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:8px var(--lane) 8px 0}
  html.motion #wake .wk-ticket{position:absolute;left:0;top:0;width:min(200px,calc(var(--lane) - 10px));transform-origin:50% 50%}
  html.motion #wake .wk-wires .wk-w3{stroke-dasharray:1;opacity:1}
  html.motion #wake .wk-pk{display:none}
  html.motion #wake .wk-cd{display:grid;gap:20px}
}
@media (max-width:599px){
  html.motion #wake .wk-ev{min-height:460px}
  html.motion #wake .wk-ticket{padding:9px 10px 10px 13px}
  html.motion #wake .wk-tk-t{font-size:14px}
  html.motion #wake .wk-watch{padding:10px 6px 8px}
  html.motion #wake .wk-wh{padding:0 6px 6px}
  html.motion #wake .wk-cl{column-gap:6px;padding:4px 6px 4px 4px;font-size:13px}
  #wake .wk-wr{padding:9px 4px}
}
/* under 380px the node column gets a little more room, so Ravi's lines and the watch lines keep their breaks */
@media (max-width:379px){
  html.motion #wake .wk-pipe{--lane:156px}
  html.motion #wake .wk-n-ravi{gap:8px;padding-inline:8px}
  html.motion #wake .wk-watch{padding-inline:4px}
  html.motion #wake .wk-cl{column-gap:5px;padding:4px 4px 4px 3px}
}
/* short touch screens (landscape phones): the panel is just the visible height; labels share a line with their value */
@media (max-width:1023px) and (max-height:540px){
  html.motion #wake .wk-ev{min-height:0}
  html.motion #wake .wk-pipe{padding-block:2px}
  html.motion #wake .wk-node{padding:5px 12px}
  html.motion #wake .wk-n-ops{padding:0}
  html.motion #wake .wk-n-page{flex-direction:row;flex-wrap:wrap;column-gap:.6ch}
  html.motion #wake .wk-sep{display:inline}
  html.motion #wake .wk-n-ravi{gap:8px}
  html.motion #wake .wk-n-ravi .wk-v{display:inline;max-width:none}
  html.motion #wake .wk-txt{text-wrap:balance}
  html.motion #wake .wk-dial{width:18px;height:18px}
  html.motion #wake .wk-watch{padding:7px 8px 5px}
  html.motion #wake .wk-wh{padding:0 6px 3px}
  html.motion #wake .wk-cls{gap:0}
  html.motion #wake .wk-cl{padding:2px 6px 2px 4px;font-size:13px;line-height:18px}
  html.motion #wake .wk-chk{width:16px;height:16px}
  html.motion #wake .wk-ticket{padding:7px 10px 8px 13px;gap:0}
  html.motion #wake .wk-tk-t{font-size:14px}
}

/* ---------- desk motion (≥1024 × ≥640) ---------- */
@media (min-width:1024px){
  /* the stage stays closed until the iris opens it (the builder takes over) */
  html.motion #wake .stage{clip-path:circle(0px at 50% 50%)}
}
@media (min-width:1024px) and (min-height:640px){
  html.motion #wake .wk-stage{height:100%;overflow:hidden;overflow:clip;overflow-clip-margin:20px}
  html.motion #wake .wk-cam{min-height:100%;justify-content:center;gap:24px}
  html.motion #wake .wk-ev{display:contents;position:static}
  html.motion #wake .wk-cd{position:relative;z-index:2}

  /* band: page · Ravi · watch card · ops, centred on one wire; the lane under it is where the ticket rides */
  html.motion #wake .wk-pipe{position:static;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:86px}
  html.motion #wake .wk-n-page .wk-k,html.motion #wake .wk-n-ravi .wk-k{display:block}
  html.motion #wake .wk-n-page .wk-k{display:inline-block}
  /* the page and ops keep their size; Ravi and the watch card give way (their lines wrap) on narrower desks */
  html.motion #wake .wk-n-page,html.motion #wake .wk-n-ops{flex:none}
  html.motion #wake .wk-n-page .wk-v{white-space:nowrap}
  html.motion #wake .wk-ticket{position:absolute;left:0;top:0;transform-origin:50% 0}
  /* the string the ticket hangs from, up to the packet on the wire */
  html.motion #wake .wk-ticket::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:var(--str,0px);background:var(--teal-dk);opacity:var(--stro,0)}

  /* bottom row: ops's work card left, #finance right */
  html.motion #wake .wk-cd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  html.motion #wake .wk-work{grid-column:1;grid-row:1}
  html.motion #wake .wk-fin{grid-column:2;grid-row:1;justify-self:end;max-width:440px}
  html.motion #wake .wk-wslot{display:block;height:var(--slot,96px);border:1px dashed var(--line-strong);border-radius:8px}
}
@media (min-width:1024px) and (max-width:1279px) and (min-height:640px){
  /* compact: mono 13px */
  html.motion #wake .wk-node{font-size:13px;line-height:18px}
  html.motion #wake .wk-ops{font-size:13px}
  html.motion #wake .wk-pipe{gap:16px}
}
@media (min-width:1024px) and (min-height:640px) and (max-height:820px){
  html.motion #wake .wk-work{gap:9px;padding:12px 14px 13px}
  html.motion #wake .wk-wr{padding:7px 6px}
  html.motion #wake .wk-wcard{padding-top:9px}
  html.motion #wake .wk-fin .sk-msgs{padding:4px 0 8px}
}

/* ===== 05-click.css ===== */
/* 05 · #click: one click closes the loop (unpinned, interactive).
   Authored HTML = the final state. One DOM, three layouts:
   - desk motion (≥1024): three columns at ≥1280 (card + steps · ops's card + caution · Bruno's page),
     two at 1024–1279; a mint loop line runs from Bruno's card back up into the Slack window
   - touch motion (≤1023): one column, max 640: card, ops's card, page, LOOP CLOSED (short underline), steps, caution
   - static (reduced, no JS, frames): three captioned frames CARD · OPS · RESULT, all decided, then the steps.
     With JS, Play it again sets #click.is-try (the card's buttons, ops waiting, the page before) and a press decides again.
   Motion resting states: html.motion #click:not(.is-done) = waiting for a click; #click.is-done = after the branch.
   GSAP only animates between them and clears its inline styles at rest. ops's pill reads #click[data-ost]. */

#click .ck-stage{position:relative;min-width:0}
#click .ck-col{display:flex;flex-direction:column;gap:16px;min-width:0}
#click .ck-cap{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}

/* ---------- the #finance window ---------- */
#click .ck-win,#click .ck-rwin{min-width:0}
#click .ck-win .sk-hd,#click .ck-rwin .sk-hd{height:40px}
#click .ck-msg{min-width:0}
#click .ck-bks{position:relative;display:grid;grid-template-areas:"s";min-width:0}
#click .ck-bks>.bk{grid-area:s;align-self:start;min-width:0}
#click .ck-done{outline-offset:4px;border-radius:2px}
#click .ck-done:focus:not(:focus-visible){outline:none}
#click .ck-acts{align-items:center}
#click .ck-open[aria-disabled="true"]{cursor:default}
#click button.ck-open[aria-disabled="true"]:hover{border-color:var(--p-line)}
#click .ck-open-w{position:relative;display:inline-flex}
#click .ck-tip{display:none;position:absolute;right:0;bottom:calc(100% + 8px);z-index:9;width:max-content;max-width:230px;padding:6px 10px;border-radius:6px;
  background:var(--p-ink);color:#fff;font-family:var(--font-mono);font-size:12px;line-height:1.45;white-space:normal;pointer-events:none}
#click .ck-open-w:hover .ck-tip,#click .ck-open:focus+.ck-tip{display:block}
#click .ck-open-w.is-off .ck-tip{display:none}
#click .ck-men{padding:0 3px;border-radius:3px;background:var(--p-teal-wash);color:var(--p-teal);font-weight:500}

/* the prompt bubble: a sand pill whose beak points down at Approve */
#click .ck-bub{position:relative;justify-self:start;margin:0 0 4px;transform-origin:44px 100%}
#click .ck-bub-in{display:inline-flex;align-items:center;min-height:30px;padding:5px 14px;border-radius:999px;background:var(--sand);color:var(--p-ink);font-size:14px;font-weight:500;line-height:1.35}
#click .ck-bub::after{content:"";position:absolute;left:37px;bottom:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--sand)}

/* the result and its thread */
#click .ck-thr{display:grid;gap:6px;justify-items:start}
#click .ck-thr-l{margin-top:2px;transform-origin:0 50%}
#click .ck-thr-av{width:20px;height:20px;border-radius:5px;font-size:12px}
#click .ck-reply{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0 2px 12px;border-left:2px solid var(--p-line)}
#click .ck-rav{width:24px;height:24px;border-radius:6px;font-size:12px}
#click .ck-rbody{min-width:0}
#click .ck-reply .sk-meta{font-size:14px;line-height:18px;margin-bottom:2px}
#click .ck-reply .sk-text{font-size:14px;line-height:1.45}

/* Decline confirm: the window dims, the dialog pops over the message */
#click .ck-dim{position:absolute;inset:0;z-index:6;border-radius:inherit;background:rgba(23,32,42,.45);opacity:0;visibility:hidden}
#click .ck-win.is-dlg .ck-dim{opacity:1;visibility:visible}
#click .ck-dlg{position:absolute;inset:0;z-index:7;margin:auto;width:min(340px,calc(100% - 32px));height:fit-content;display:grid;gap:6px;padding:20px 20px 16px;
  background:#fff;border-radius:8px;box-shadow:0 18px 48px rgba(23,32,42,.28);color:var(--p-ink);text-align:left}
#click .ck-dlg-h{font-weight:600;font-size:17px;line-height:1.35}
#click .ck-dlg-t{font-size:15px;line-height:1.45}
#click .ck-dlg-b{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}
#click .ck-confirm{background:var(--p-rust);border-color:var(--p-rust);color:#fff}
#click button.ck-confirm:hover{background:#9a4e21;border-color:#9a4e21}

/* ---------- steps + caution ---------- */
#click .ck-steps{display:grid;min-width:0}
#click .ck-step{--on:0;position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
#click .ck-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--mint);transform:scaleX(var(--on));transform-origin:0 50%}
#click .ck-sn{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--sand)}
#click .ck-st{font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
#click .ck-caut{max-width:36em;text-wrap:pretty}

/* ---------- ops's card ---------- */
#click .ck-ops{position:relative;display:grid;gap:14px;align-content:start;min-width:0;padding:16px 18px 8px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--bg-raised);box-shadow:0 24px 60px rgba(0,0,0,.35)}
#click .ck-oglow{position:absolute;inset:-1px;border:1px solid var(--mint);border-radius:11px;box-shadow:0 0 0 4px rgba(183,246,209,.12),0 0 28px rgba(183,246,209,.14);opacity:0;pointer-events:none}
#click .ck-ohd{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
#click .ck-oav{width:32px;height:32px;border-radius:8px;font-size:14px}
#click .ck-ochip{height:30px;transform-origin:0 50%}
#click .ck-ost{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid rgba(183,246,209,.45);border-radius:14px;
  font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--mint);white-space:nowrap;transform-origin:0 50%}
#click .ck-ost-d{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mint)}
#click .ck-ost-x{display:none}
#click:not([data-ost]) .ck-ost-done,#click[data-ost="done"] .ck-ost-done,#click[data-ost="work"] .ck-ost-work,#click[data-ost="wait"] .ck-ost-wait{display:inline}
#click[data-ost="wait"] .ck-ost,#click[data-ost="work"] .ck-ost{border-color:var(--line-strong);color:var(--muted)}
#click[data-ost="wait"] .ck-ost-d{background:var(--teal-dk)}
#click[data-ost="work"] .ck-ost-d{background:var(--sand)}
#click .ck-ols{display:grid;border-top:1px solid var(--line)}
#click .ck-ol{--ph:0;position:relative;display:block;min-height:44px;padding:11px 2px;border-bottom:1px solid var(--line)}
#click .ck-ol:last-child{border-bottom:0}
/* an empty line slot, shown only while ops waits */
#click .ck-ol::before{content:"";position:absolute;left:2px;top:19px;width:58%;height:6px;border-radius:3px;background:var(--line-strong);opacity:calc(var(--ph) * .7);pointer-events:none}
#click .ck-ol:nth-child(2)::before{width:44%}
#click .ck-ol:nth-child(3)::before{width:50%}
#click .ck-olt{position:relative;display:block;font-size:14px;line-height:1.5;color:var(--text);text-wrap:pretty}
#click .ck-ok{display:inline-block;color:var(--mint);transform-origin:50% 60%}

/* ---------- RESULT: Bruno's page ---------- */
#click .ck-br{min-width:0}
#click .ck-page{padding:14px 16px 16px}
#click .ck-ph{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
#click .ck-ph .rb-mark{width:28px;height:28px;font-size:15px}
#click .ck-pt{flex:1 1 auto;min-width:0}
#click .ck-ph .rb-title{font-size:16px}
#click .ck-va{display:flex;align-items:center;gap:5px}
#click .ck-dial{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--p-line);border-radius:13px;background:#fff;
  font-family:var(--font-mono);font-size:12px;color:var(--p-muted);white-space:nowrap}
#click .ck-dial-g{width:14px;height:14px;overflow:visible;fill:none;stroke:var(--p-teal);stroke-width:1.4}
#click .ck-hand{stroke-linecap:round}
#click .ck-dial-c{fill:var(--p-teal);stroke:none}
#click .ck-board{grid-template-columns:repeat(2,minmax(0,1fr))}
#click .ck-board .rb-col{min-height:0}
#click .ck-colh{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--p-muted)}
#click .ck-ch{display:inline-flex;align-items:center;gap:6px;min-width:0}
#click .ck-dot{flex:none;width:8px;height:8px;border-radius:2px}
#click .ck-dot--req{background:#d6a94a}
#click .ck-dot--out{background:var(--p-teal)}
#click .ck-dot--dec,#click[data-outcome="decline"] .ck-dot--out{background:var(--p-rust)}
#click .ck-slot{position:relative;min-height:70px;border:2px dashed var(--p-line);border-radius:8px}
#click .ck-slot>.rb-card{position:relative;z-index:1;margin:-2px}
#click .ck-bc-req{visibility:hidden}
#click .ck-res2{display:grid;gap:12px;margin-top:8px}
/* the refresh ring: lit for a moment when the click reaches Bruno's page (motion only; at rest it is not shown) */
#click .ck-bring{position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--teal-dk),inset 0 0 22px rgba(47,154,138,.22);opacity:0;pointer-events:none}

/* ---------- the end row: LOOP CLOSED, Play it again; loop line, packet, cursor ---------- */
#click .ck-end{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;min-height:56px}
#click .ck-lc{position:relative;z-index:6;display:inline-grid;gap:7px;justify-items:start;margin:0;font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.22em;color:var(--mint);white-space:nowrap}
#click .ck-ul{display:block;width:100%;height:2px;background:var(--mint);transform-origin:0 50%}
#click .ck-again{flex:none}
#click .ck-wires{z-index:5}
#click .ck-wpk{stroke:var(--teal-dk);stroke-width:1.5;stroke-dasharray:3 5;opacity:0}
#click .ck-wloop{stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#click .ck-lsq{position:absolute;left:0;top:0;z-index:6;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--mint);pointer-events:none}
#click .ck-pk{opacity:0;visibility:hidden;z-index:7}
#click .ck-cur{opacity:0;visibility:hidden;z-index:8}
#click .ck-cur .cur-name{white-space:nowrap}

/* ---------- motion: the waiting state (cleared by .is-done after the branch) ---------- */
html.motion #click.is-done .ck-wait{visibility:hidden}
/* once the card has become the result, the waiting blocks leave the flow so the window fits the result (JS animates the change) */
html.motion #click.is-res .ck-wait{position:absolute;left:0;right:0;top:0}
html.motion #click:not(.is-done) .ck-done{visibility:hidden}
html.motion #click:not(.is-done) .ck-ochip{--lit:0}
html.motion #click:not(.is-done) .ck-ol{--ph:1}
html.motion #click:not(.is-done) .ck-olt{opacity:0}
html.motion #click:not(.is-done) .ck-ok{opacity:0;transform:scale(.4)}
html.motion #click:not(.is-done) .ck-bc-req{visibility:visible}
html.motion #click:not(.is-done) .ck-bc-out{visibility:hidden}
html.motion #click .ck-step{--on:1}
html.motion #click:not(.is-done) .ck-step{--on:0}
html.motion #click .ck-step.is-lit .ck-sn{color:var(--mint)}
html.motion #click .ck-step.is-lit .ck-st{color:var(--text)}
html.motion #click:not(.is-done) .ck-wloop{stroke-dashoffset:1}
html.motion #click:not(.is-done) .ck-lsq{transform:scale(0)}
html.motion #click:not(.is-done) .ck-lc{opacity:0}
html.motion #click:not(.is-done) .ck-ul{transform:scaleX(0)}
html.motion #click:not(.is-done) .ck-again{visibility:hidden;opacity:0}
/* while the branch plays, Play it again can take keyboard focus (not a pointer); it shows as soon as it has focus */
html.motion #click.is-run:not(.is-done) .ck-again{visibility:visible;pointer-events:none}
html.motion #click.is-again:not(.is-done) .ck-again{visibility:visible;opacity:1;pointer-events:auto}

/* ---------- desk motion ≥1280: three columns ---------- */
@media (min-width:1280px){
  html.motion #click .ck-stage{display:grid;grid-template-columns:minmax(0,460fr) minmax(0,350fr) minmax(0,436fr);column-gap:40px;row-gap:20px;align-items:start}
  html.motion #click .ck-c2{padding-top:28px}
  html.motion #click .ck-end{grid-column:1/-1}
}
/* compact desk 1024–1279: two columns (card + steps · ops's card, caution, Bruno's page) */
@media (min-width:1024px) and (max-width:1279px){
  html.motion #click .ck-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;row-gap:16px;align-items:start;
    grid-template-areas:"c1 ops" "c1 caut" "c1 br" "end end"}
  html.motion #click .ck-c1{grid-area:c1}
  html.motion #click .ck-c2,html.motion #click .ck-c3{display:contents}
  html.motion #click .ck-ops{grid-area:ops}
  html.motion #click .ck-caut{grid-area:caut}
  html.motion #click .ck-br{grid-area:br;margin-top:8px}
  html.motion #click .ck-end{grid-area:end}
}
@media (min-width:1024px){
  /* the label sits on the loop line's bottom run (JS sets left/top/size on whole pixels), the line replaces the underline */
  html.motion #click .ck-lc{position:absolute;left:0;top:0;padding:4px 12px;background:var(--bg)}
  html.motion #click .ck-ul{display:none}
  html.motion #click .ck-end{justify-content:flex-start}
}
@media (max-width:1023px){
  #click .ck-wires .ck-wloop,#click .ck-lsq{display:none}
}

/* ---------- touch motion ≤1023: one column ---------- */
@media (max-width:1023px){
  html.motion #click .ck-stage{display:flex;flex-direction:column;gap:16px;max-width:640px;margin-inline:auto}
  html.motion #click .ck-col{display:contents}
  html.motion #click .ck-win{order:1}
  html.motion #click .ck-ops{order:2;margin-top:28px}
  html.motion #click .ck-br{order:3;margin-top:28px}
  html.motion #click .ck-end{order:4}
  html.motion #click .ck-steps{order:5;margin-top:8px}
  html.motion #click .ck-caut{order:6}
}

/* ---------- static (reduced motion, no JS, frames): CARD · OPS · RESULT ---------- */
html:not(.motion) #click .ck-col{display:contents}
html:not(.motion) #click .ck-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:640px;margin-inline:auto;
  grid-template-areas:"cap1" "card" "cap2" "ops" "caut" "cap3" "br" "res2" "end" "steps"}
html:not(.motion) #click .ck-cap1{grid-area:cap1}
html:not(.motion) #click .ck-win{grid-area:card}
html:not(.motion) #click .ck-cap2{grid-area:cap2}
html:not(.motion) #click .ck-ops{grid-area:ops}
html:not(.motion) #click .ck-caut{grid-area:caut}
html:not(.motion) #click .ck-cap3{grid-area:cap3}
html:not(.motion) #click .ck-br{grid-area:br}
html:not(.motion) #click .ck-res2{grid-area:res2}
html:not(.motion) #click .ck-end{grid-area:end}
html:not(.motion) #click .ck-steps{grid-area:steps}
html:not(.motion) #click .ck-res2>*{grid-area:auto}
html:not(.motion) #click .ck-cap2,html:not(.motion) #click .ck-cap3{margin-top:24px}
html:not(.motion) #click .ck-end{justify-content:flex-start}
html:not(.motion) #click:not(.is-try) .ck-wait{display:none}
html:not(.motion) #click.is-try .ck-done{display:none}
html:not(.motion) #click.is-try .ck-ochip{--lit:0}
html:not(.motion) #click.is-try .ck-ol{--ph:1}
html:not(.motion) #click.is-try .ck-olt{visibility:hidden}
html:not(.motion) #click.is-try .ck-bc-req{visibility:visible}
html:not(.motion) #click.is-try .ck-bc-out{visibility:hidden}
html:not(.motion) #click.is-try .ck-lc,html:not(.motion) #click.is-try .ck-again{visibility:hidden}
/* ≥1024: the card column stacks on its own (card, steps), so it never inherits the other columns' row heights;
   1024–1279: OPS beside it, RESULT underneath in two columns; ≥1280: CARD · OPS · RESULT side by side */
@media (min-width:1024px){
  html:not(.motion) #click .ck-stage{max-width:none;column-gap:40px;row-gap:16px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:"c1 cap2" "c1 ops" "c1 caut" "c1 ." "cap3 ." "br end"}
  /* no JS: the two outcomes side by side, each caption over its own frames */
  html.no-js #click .ck-stage{grid-template-areas:"c1 cap2" "c1 ops" "c1 caut" "c1 ." "cap3 cap4" "br rw2" ". br2" "end end"}
  html:not(.motion) #click .ck-c1{grid-area:c1;display:flex;flex-direction:column;gap:16px;min-width:0}
  html:not(.motion) #click .ck-cap2{margin-top:0}
  html:not(.motion) #click .ck-cap3{margin-top:24px}
  html:not(.motion) #click .ck-steps{grid-template-columns:minmax(0,1fr);margin-top:8px}
}
@media (min-width:1024px) and (max-width:1279px){
  html.no-js #click .ck-res2{display:contents}
  html.no-js #click .ck-res2>.ck-cap{grid-area:cap4;margin-top:24px}
  html.no-js #click .ck-res2>.ck-rwin{grid-area:rw2}
  html.no-js #click .ck-res2>.ck-br{grid-area:br2}
}
@media (min-width:1280px){
  /* the last row takes up the card column's extra height (taller while the buttons show), so OPS and RESULT keep their places */
  html:not(.motion) #click .ck-stage{grid-template-columns:minmax(0,460fr) minmax(0,350fr) minmax(0,436fr);grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:"c1 cap2 cap3" "c1 ops br" "c1 caut end" "c1 . ."}
  html.no-js #click .ck-stage{grid-template-areas:"c1 cap2 cap3" "c1 ops br" "c1 caut res2" "c1 . end"}
  html:not(.motion) #click .ck-cap3{margin-top:0}
  html:not(.motion) #click .ck-res2{margin-top:8px}
}

/* ---------- phone ---------- */
@media (max-width:599px){
  #click .ck-acts .bk-btn{height:44px}
  #click .ck-dlg .bk-btn{height:44px}
  #click .ck-tip{left:0;right:auto;top:calc(100% + 8px);bottom:auto}
  #click .ck-ops{padding:14px 14px 6px}
  #click .ck-st{font-size:15px}
  #click .ck-page{padding:12px}
  #click .ck-board{grid-template-columns:minmax(0,1fr)}
  #click .ck-dial{padding:0 8px}
  #click .ck-ph{flex-wrap:wrap}
  #click .ck-br .rb-chrome{padding-inline:10px}
  #click .ck-br .rb-dots,#click .ck-br .rb-reload{display:none}
  #click .ck-br .rb-url{gap:6px;padding-left:10px;font-size:12px}
}
@media (pointer:coarse){#click .ck-acts button.bk-btn,#click .ck-dlg .bk-btn{height:44px}}

/* ===== 06-blockkit.css ===== */
/* 06 · #blockkit: Slack buttons, forms and cards (unpinned, hands-on). Prefix gk- (bk- belongs to the shared Block Kit classes).
   Authored HTML is the final state: the tabs are CSS radios that work with JS off, and each "What happens next"
   panel shows a worked example. JS (06-blockkit.js) adds .gk-js, resets the panels to "waiting" and takes over
   the tabs. Every hidden starting state sits under html.motion and is cleared by the builder (.gk-in). */

/* ---------- head ---------- */
#blockkit .gk-hl{font-size:clamp(3.4rem,6.3vw,7.5rem)}
#blockkit .gk-hrow{display:block}
#blockkit .gk-hrow>.mask{display:inline-block;vertical-align:top}
@media (max-width:719px){ #blockkit .gk-hl{font-size:clamp(40px,10.4vw,64px)} }

/* ---------- gallery shell + tab row ---------- */
#blockkit .gk-gal{position:relative}
#blockkit .gk-tabbar{position:relative;margin-bottom:28px}
#blockkit .gk-tabs{position:relative;z-index:1;display:flex;flex-wrap:wrap;border-bottom:0}
#blockkit .gk-tabs>label{padding:0 16px}
#blockkit .gk-tabs>input:checked+label::after{bottom:0}
#blockkit .gk-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-strong);transform-origin:0 50%}
#blockkit .gk-ind{position:absolute;left:0;bottom:0;z-index:2;display:none;width:100px;height:2px;background:var(--mint);transform-origin:0 50%;pointer-events:none}
#blockkit.gk-indon .gk-ind{display:block}
#blockkit.gk-indon .gk-tabs>input:checked+label::after{display:none}

/* tabs: with JS the script owns .is-on; without JS the checked radio picks the tab */
#blockkit .gk-tabpanels{position:relative}
#blockkit.gk-js .gk-tab:not(.is-on){display:none}
@supports selector(:has(*)){
  #blockkit:not(.gk-js) .gk-tab{display:none}
  #blockkit:not(.gk-js):has(#gk-t-msg:checked) .gk-tab--msg,
  #blockkit:not(.gk-js):has(#gk-t-modal:checked) .gk-tab--modal,
  #blockkit:not(.gk-js):has(#gk-t-appr:checked) .gk-tab--appr,
  #blockkit:not(.gk-js):has(#gk-t-canvas:checked) .gk-tab--canvas,
  #blockkit:not(.gk-js):has(#gk-t-wo:checked) .gk-tab--wo{display:block}
}
#blockkit .gk-cap{margin-top:20px;max-width:62em;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- Slack window + panel, side by side from 1024 ---------- */
#blockkit .gk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:stretch}
#blockkit .gk-fr{position:relative;min-height:500px}
#blockkit .gk-fr .sk-msgs{padding:14px 0}
/* an empty composer at the foot of the window, as in the hero */
#blockkit .gk-compose{display:block;flex:none;height:38px;margin:auto 18px 16px;border:1px solid var(--p-line);border-radius:8px;background:#fff}
#blockkit .gk-mb{min-width:0}
#blockkit .gk-bk{max-width:560px}
/* JS reserves the space of a reply that has not been posted yet, so nothing jumps when it appears */
#blockkit .gk-later{visibility:hidden}

/* Slack buttons and the select */
#blockkit .gk-acts{position:relative;z-index:3;align-items:center}
#blockkit button.bk-btn[disabled],#blockkit button.bk-select[disabled]{cursor:default}
#blockkit .gk-sel{position:relative;display:inline-flex}
#blockkit .gk-selbtn{gap:16px}
#blockkit .gk-selbtn.is-set .gk-selv{color:var(--p-ink)}
#blockkit .gk-caret{font-size:12px;color:var(--p-muted)}
#blockkit .gk-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:6;display:grid;min-width:100%;padding:4px 0;background:#fff;border:1px solid var(--p-line);border-radius:6px;box-shadow:0 12px 32px rgba(23,32,42,.16)}
#blockkit .gk-menu.is-up{top:auto;bottom:calc(100% + 4px)}
#blockkit .gk-opt{display:flex;align-items:center;min-height:36px;padding:0 14px;font-size:14px;color:var(--p-ink);cursor:pointer;outline:none}
#blockkit .gk-opt:hover,#blockkit .gk-opt:focus{background:var(--p-teal-wash)}
#blockkit .gk-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--p-teal)}
#blockkit .gk-opt[aria-selected="true"]{font-weight:600}
#blockkit .gk-thr{margin-top:8px;transform-origin:0 50%}
#blockkit .gk-thr .av--sm{background:var(--p-teal);color:#fff}

/* dim + confirm + modal (overlays sit inside the window) */
#blockkit .gk-dlg,#blockkit .gk-modal,#blockkit .gk-menu,#blockkit .gk-apcard,#blockkit .gk-dsec{scroll-margin:0 0 16px}
#blockkit .gk-dim{position:absolute;inset:0;z-index:5;border-radius:inherit;background:rgba(23,32,42,.42)}
#blockkit .gk-dlg{position:absolute;inset:0;z-index:6;margin:auto;height:fit-content;width:min(380px,calc(100% - 32px));display:grid;gap:10px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 24px 60px rgba(23,32,42,.28);color:var(--p-ink)}
#blockkit .gk-dlg-t{font-weight:600;font-size:17px;line-height:1.3}
#blockkit .gk-dlg-b{font-size:15px}
#blockkit .gk-dlg-f,#blockkit .gk-md-ft{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
#blockkit .gk-dlg-f{margin-top:6px}
#blockkit .gk-cf-yes{background:var(--p-rust);border-color:var(--p-rust);color:#fff}
#blockkit button.gk-cf-yes:hover{background:#9a4d20;border-color:#9a4d20}
#blockkit .gk-modal{display:grid;max-width:420px;margin:6px 18px 10px 66px;background:#fff;border:1px solid var(--p-line);border-radius:8px;box-shadow:0 18px 44px rgba(23,32,42,.16);color:var(--p-ink)}
#blockkit.gk-js .gk-modal{position:absolute;inset:0;z-index:6;margin:auto;height:fit-content;width:min(420px,calc(100% - 32px));box-shadow:0 24px 60px rgba(23,32,42,.24)}
#blockkit.gk-js .gk-modal:not(.is-open){display:none}
#blockkit .gk-md-hd{padding:14px 20px;border-bottom:1px solid var(--p-line);font-weight:600;font-size:17px;line-height:1.3}
#blockkit .gk-md-bd{display:grid;gap:12px;padding:16px 20px 18px}
#blockkit .gk-md-f{display:grid;gap:5px;min-width:0}
#blockkit .gk-md-l{font-weight:600;font-size:14px;line-height:1.3}
#blockkit .gk-md-in{width:100%;height:36px;padding:0 12px;border:1px solid var(--p-line);border-radius:6px;background:#fff;font-family:var(--font-sans);font-size:15px;color:var(--p-ink)}
#blockkit .gk-md-in:focus{outline:none;border-color:var(--p-teal);box-shadow:0 0 0 3px rgba(20,99,90,.22)}
#blockkit .gk-md-sw{position:relative;display:block}
#blockkit .gk-md-sel{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
#blockkit .gk-md-sw .gk-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}
#blockkit .gk-md-ft{padding:12px 20px 14px;border-top:1px solid var(--p-line)}
#blockkit .gk-thx{transform-origin:0 0}

/* ---------- "What happens next": the agent's side of every click ---------- */
#blockkit .gk-next{position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 22px 22px;background:var(--bg-raised);border:1px solid var(--line);border-radius:8px;
  scroll-margin:0 0 12px}
#blockkit .gk-nhd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
#blockkit .gk-nh{font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1.4;letter-spacing:.16em;color:var(--quiet)}
#blockkit .gk-nst{gap:8px;padding:2px 10px;transform-origin:100% 50%}
#blockkit .gk-nst-dot{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
#blockkit .gk-nst[data-st="waiting"]{color:var(--quiet)}
#blockkit .gk-nst[data-st="working"],#blockkit .gk-nst[data-st="still"]{color:var(--sand)}
#blockkit .gk-nst[data-st="done"],#blockkit .gk-nst[data-st="go"]{color:var(--mint)}
#blockkit .gk-nst[data-st="stop"]{color:#e08a57}
/* the agent sits in the middle of the card like a hub: two faint rings, a halo and a glow that answer each click */
#blockkit .gk-agent{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto 0;padding:52px 0 40px;text-align:center}
#blockkit .gk-avw{position:relative;flex:none;width:56px;height:56px}
#blockkit .gk-nav{position:relative;z-index:1;width:56px;height:56px;border-radius:14px;font-size:22px}
#blockkit .gk-orb{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
#blockkit .gk-orb--1{width:104px;height:104px;margin:-52px 0 0 -52px;border:1px dashed var(--line-strong)}
#blockkit .gk-orb--2{width:156px;height:156px;margin:-78px 0 0 -78px;border:1px solid var(--line)}
#blockkit .gk-halo{position:absolute;inset:-7px;border:1.5px solid var(--mint);border-radius:19px;opacity:0;pointer-events:none}
#blockkit .gk-glow{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;background:radial-gradient(circle,rgba(183,246,209,.2) 0,rgba(183,246,209,.06) 40%,transparent 68%);opacity:0;pointer-events:none}
#blockkit .gk-who{position:relative;z-index:1;padding:0 10px;background:var(--bg-raised);font-size:16px;line-height:1.35;color:var(--muted)}
#blockkit .gk-who b{color:var(--text);font-weight:600}
#blockkit .gk-ex{margin-bottom:12px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--sand)}
#blockkit .gk-log{position:relative;display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
/* the rail behind the three markers */
#blockkit .gk-log::before{content:"";position:absolute;left:6px;top:31px;bottom:10px;width:1px;background:var(--line)}
#blockkit .gk-ll{position:relative;display:grid;grid-template-columns:13px minmax(0,1fr);gap:12px;min-height:20px;font-family:var(--font-mono);font-size:13px;line-height:20px;color:var(--text)}
#blockkit .gk-ll::before{content:"";position:relative;width:7px;height:7px;margin:7px 0 0 3px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--bg-raised)}
#blockkit .gk-lt{min-width:0;overflow-wrap:anywhere}
#blockkit .gk-ll.is-old{opacity:.6}
#blockkit .gk-ll.is-cur::before{background:var(--sand)}
#blockkit .gk-ll.is-hint{color:var(--quiet)}
#blockkit .gk-ll.is-hint::before{background:var(--quiet)}
#blockkit .gk-ll.is-empty::before{background:var(--bg-raised);border:1px solid var(--line-strong)}
#blockkit .gk-ll.is-empty .gk-lt::before{content:"";display:block;width:var(--gw,58%);height:0;margin-top:10px;border-top:1px dashed var(--line-strong)}
#blockkit .gk-ll:nth-child(3).is-empty .gk-lt::before{--gw:38%}
/* a stopped card (nobody decided) marks its line in rust */
#blockkit .gk-next:has(.gk-nst[data-st="stop"]) .gk-ll:not(.is-empty)::before{background:#e08a57}

/* ---------- approval card ---------- */
#blockkit .gk-apcard{position:relative;max-width:560px;margin-top:4px;padding:14px 16px 16px;background:#fff;border:1px solid var(--p-line);border-radius:8px}
#blockkit .gk-ap-pend{display:grid;gap:10px}
#blockkit .gk-ap-body{font-size:15px;line-height:1.45}
#blockkit .gk-ap-acts{align-items:center}
#blockkit .gk-ap-ign .tag,#blockkit .gk-ap-l2 .tag{white-space:normal}
#blockkit .gk-ap-ok[aria-disabled="true"]{opacity:.5;cursor:default}
#blockkit .gk-ap-fin{display:grid;gap:6px;font-size:15px;line-height:1.45}
#blockkit .gk-ap-fin b{font-weight:600;font-size:17px}
#blockkit .gk-ap-l2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#blockkit .gk-ring{display:inline-flex;align-items:center;gap:8px;margin-left:4px}
#blockkit .gk-ring svg{flex:none;width:32px;height:32px;transform:rotate(-90deg)}
#blockkit .gk-ring-t{fill:none;stroke:var(--p-line);stroke-width:3}
#blockkit .gk-ring-a{fill:none;stroke:var(--p-teal);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0}
#blockkit .gk-ring-n{min-width:3.4ch;font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--p-ink)}
#blockkit .gk-ring-l{font-family:var(--font-mono);font-size:12px;color:var(--p-muted)}
#blockkit .gk-cur{opacity:0}
#blockkit:not(.gk-js) .gk-cur{display:none}

/* page controls above a tab (Approval: who presses; Canvas: ops updates it) */
#blockkit .gk-ctrls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 32px;margin-bottom:20px}
#blockkit .gk-ctl{display:grid;gap:8px;min-width:0}
#blockkit .gk-ctl-l{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
#blockkit .gk-whorow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#blockkit .gk-wseg>label{min-width:84px}
#blockkit .gk-again{flex:none}
#blockkit .gk-editbtn{border-color:var(--teal-dk);transform-origin:50% 50%}

/* no JS: the three approval outcomes as three small frames */
#blockkit .gk-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
#blockkit .gk-out{display:grid;gap:10px;align-content:start;min-width:0}
#blockkit .gk-out figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
#blockkit .gk-ocard{display:grid;gap:10px;justify-items:start;padding:14px 16px;background:#fff;border:1px solid var(--p-line);border-radius:8px;color:var(--p-ink);font-size:15px;line-height:1.45}
#blockkit .gk-ocard .bk-header{font-size:16px}
#blockkit .gk-ocard .tag{white-space:normal}

/* ---------- Canvas document ---------- */
#blockkit .gk-docwrap{flex:1 1 auto;padding:18px;background:var(--p-soft);border-radius:0 0 8px 8px}
#blockkit .gk-doc{position:relative;isolation:isolate;display:grid;gap:14px;align-content:start;max-width:560px;margin-inline:auto;padding:26px 28px 30px;background:#fff;border:1px solid var(--p-line);border-radius:8px;box-shadow:0 8px 24px rgba(23,32,42,.06)}
#blockkit .gk-d1{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
#blockkit .gk-dp{font-size:15px}
#blockkit .gk-n{position:relative;--fl:0;font-variant-numeric:tabular-nums}
#blockkit .gk-n::before{content:"";position:absolute;inset:-2px -4px;z-index:-1;border-radius:3px;background:rgba(20,99,90,.16);opacity:var(--fl);pointer-events:none}
#blockkit .gk-dt{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4}
#blockkit .gk-dt th,#blockkit .gk-dt td{padding:8px 10px;border:1px solid var(--p-line);text-align:left}
#blockkit .gk-dt th{background:var(--p-soft);font-weight:600}
#blockkit .gk-dt th:last-child,#blockkit .gk-dt td:last-child{text-align:right;font-variant-numeric:tabular-nums}
#blockkit .gk-dsec{position:relative;isolation:isolate;display:grid;gap:8px;margin:0 -12px;padding:10px 12px;border-radius:6px}
#blockkit .gk-dwash{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--p-teal-wash);opacity:0}
#blockkit .gk-d2{font-size:19px;line-height:1.25;font-weight:600}
#blockkit .gk-dul{padding-left:22px;list-style:disc;font-size:15px}
#blockkit .gk-dul>li+li{margin-top:2px}
/* the list before and after "ops updates it" share one cell: the new list wipes in over the old one, and the old one
   keeps its row (visibility only), so the Canvas does not shrink under the reader */
#blockkit .gk-wcell{display:grid;justify-self:start}
#blockkit .gk-wcell>.gk-dul{grid-area:1/1}

/* ---------- task card ---------- */
#blockkit .gk-wo{display:grid;gap:8px;max-width:460px;margin-top:6px;padding:12px 14px 14px;background:#fff;border:1px solid var(--p-line);border-radius:8px;box-shadow:0 1px 2px rgba(23,32,42,.05)}
#blockkit .gk-wo-p{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--p-muted)}
#blockkit .gk-wo-p b{font-weight:600;color:var(--p-ink)}
#blockkit .gk-wo-mk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--p-teal);color:#fff;font-size:12px;font-weight:600}
#blockkit .gk-wo-ty::before{content:"·";margin-right:8px}
#blockkit .gk-wo-t{font-size:17px;line-height:1.3;font-weight:600}
#blockkit .gk-wo-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
#blockkit .gk-tagw{position:relative;display:inline-flex}
#blockkit .gk-wotag{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:4px;font-family:var(--font-sans);font-size:13px;font-weight:600;transform-origin:50% 50%}
#blockkit .gk-wotag::before{content:"";position:absolute;inset:-10px -4px}
#blockkit .gk-wotag--blue{background:#e3edfb;color:#1f4f99}
#blockkit .gk-wotag--red{background:#fbe6e6;color:#a12d2d}
#blockkit .gk-wotag:hover,#blockkit .gk-tagw.is-on .gk-wotag{box-shadow:0 0 0 2px currentColor}
#blockkit .gk-tip{position:absolute;left:50%;top:calc(100% + 8px);z-index:4;padding:5px 9px;border-radius:5px;background:var(--p-ink);color:#fff;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(-50%,-4px)}
#blockkit .gk-tip::after{content:"";position:absolute;left:50%;bottom:100%;margin-left:-5px;border:5px solid transparent;border-bottom-color:var(--p-ink)}
#blockkit .gk-tagw:hover .gk-tip,#blockkit .gk-wotag:focus-visible+.gk-tip,#blockkit .gk-tagw.is-on .gk-tip{opacity:1;transform:translate(-50%,0)}
#blockkit .gk-wo-u{font-family:var(--font-mono);font-size:12px;color:var(--p-muted);overflow-wrap:anywhere}

/* ---------- packets, wires and the click ripple ---------- */
#blockkit .gk-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:7}
#blockkit .gk-wire{fill:none;stroke:var(--teal-dk);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#blockkit .gk-pk{z-index:8;opacity:0;box-shadow:0 0 0 2px rgba(20,99,90,.6)}
#blockkit .gk-pk2{box-shadow:0 0 0 2px rgba(183,246,209,.5)}
#blockkit .gk-rip{position:absolute;left:0;top:0;z-index:8;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid var(--p-teal);border-radius:50%;opacity:0;pointer-events:none}

/* ---------- below desk: window on top, panel under it ---------- */
@media (max-width:1279px){
  #blockkit .gk-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px}
  #blockkit .gk-next{padding:18px 18px 20px}
}
@media (max-width:1023px){
  #blockkit .gk-gal{max-width:640px;margin-inline:auto}
  #blockkit .gk-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  #blockkit .gk-fr{min-height:0}
  #blockkit .gk-fr--modal{min-height:470px}
  #blockkit .gk-agent{margin:0;padding:44px 0 34px}
  #blockkit .gk-outs{grid-template-columns:minmax(0,1fr)}
}

/* ---------- phone ---------- */
@media (max-width:599px){
  #blockkit .gk-tabbar{margin-bottom:20px;padding-bottom:14px}
  #blockkit .gk-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  #blockkit .gk-tabs>label{grid-column:span 2;min-width:0;padding:0 6px;border:1px solid var(--line-strong);border-radius:4px}
  #blockkit .gk-tabs>label:nth-of-type(n+4){grid-column:span 3}
  #blockkit .gk-tabs>input:checked+label{background:var(--text);border-color:var(--text);color:var(--bg)}
  #blockkit .gk-tabs>input:checked+label::after{display:none}
  #blockkit.gk-indon .gk-ind{display:none}
  #blockkit .gk-fr .sk-hd{padding:0 14px}
  #blockkit .gk-compose{display:none}
  #blockkit .gk-fr .sk-msg{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:8px 12px}
  #blockkit .gk-fr .sk-msg>.av{width:32px;height:32px}
  /* the form keeps to two columns on a phone, so the window stays short enough to show the reply and the panel together */
  #blockkit .gk-fr--modal{min-height:370px}
  #blockkit .gk-modal{margin:6px 12px 10px}
  #blockkit .gk-md-bd{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #blockkit .gk-md-hd{padding:12px 16px}
  #blockkit .gk-md-bd{padding:14px 16px 16px}
  #blockkit .gk-md-ft{padding:10px 16px 12px}
  #blockkit .gk-apcard{padding:12px}
  #blockkit .gk-next{padding:16px 16px 18px}
  #blockkit .gk-agent{gap:12px;padding:50px 0 32px}
  #blockkit .gk-avw,#blockkit .gk-nav{width:48px;height:48px}
  #blockkit .gk-nav{border-radius:12px;font-size:19px}
  #blockkit .gk-orb--1{width:88px;height:88px;margin:-44px 0 0 -44px}
  #blockkit .gk-orb--2{width:128px;height:128px;margin:-64px 0 0 -64px}
  #blockkit .gk-ctrls{display:grid;gap:14px}
  #blockkit .gk-whorow{display:grid;grid-template-columns:minmax(0,1fr) auto}
  #blockkit .gk-wseg{display:flex}
  #blockkit .gk-wseg>label{flex:1 1 0;min-width:0;padding:0 6px}
  #blockkit .gk-editbtn{justify-self:start}
  #blockkit .gk-docwrap{padding:12px}
  #blockkit .gk-doc{padding:18px 16px 20px}
  #blockkit .gk-d1{font-size:22px}
}
/* 44px controls on touch (and on phone widths) */
@media (pointer:coarse),(max-width:599px){
  #blockkit .gk-fr button.bk-btn,#blockkit .gk-selbtn,#blockkit .gk-dlg .bk-btn,#blockkit .gk-modal .bk-btn{height:44px}
  #blockkit .gk-opt{min-height:44px}
  #blockkit .gk-md-in{height:44px}
}

/* ---------- hidden starting states (motion only; the builder clears them with .gk-in) ---------- */
html.motion #blockkit:not(.gk-in) .gk-rule{transform:scaleX(0)}
html.motion #blockkit:not(.gk-in) .gk-ind{opacity:0}
html.motion #blockkit:not(.gk-in) .gk-tab--msg .gk-frame .gk-blk,
html.motion #blockkit:not(.gk-in) .gk-tab--msg .gk-next>*{opacity:0;transform:translateY(10px)}

/* ===== 07-scale.css ===== */
/* 07 · #scale: one person or the whole org (unpinned, toggle).
   Motion (desk/touch): one panel at a time, chosen by .sc[data-view] (JS mirrors the radios); a thumb slides
   under the toggle; the bar counters count. Static (reduced, frames, no JS): both panels one after the other,
   each with its heading and its own counters; the checked radio puts its panel first (:has, plus data-view with JS). */

#scale{--sc-copy:clamp(320px,25vw,360px);--sc-node:clamp(340px,24vw,360px);--sc-gap:24px}
#scale .sc{position:relative}

/* ---------- control bar ---------- */
#scale .sc-bar{display:grid;grid-template-columns:calc(var(--sc-copy) + 24px) minmax(0,1fr);column-gap:var(--sc-gap);align-items:end;padding-bottom:28px;margin-bottom:40px;border-bottom:1px solid var(--line)}
#scale .sc-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:360px}
#scale .sc-seg>label{position:relative;z-index:1;min-height:44px;padding:0 10px}
#scale .sc-thumb{display:none}
html.motion #scale .sc-thumb{display:block;font-style:normal;position:absolute;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:4px;background:var(--text);z-index:2;pointer-events:none;overflow:hidden}
html.motion #scale .sc-thumb-in{position:absolute;left:0;top:0;bottom:0;width:200%;display:grid;grid-template-columns:1fr 1fr}
html.motion #scale .sc-thumb-in>b{display:flex;align-items:center;justify-content:center;padding:0 10px;font:inherit;font-family:var(--font-mono);font-size:12px;font-style:normal;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);white-space:nowrap}
html.motion #scale .sc[data-view="org"] .sc-thumb-in{transform:translateX(-50%)}
html.motion #scale .sc[data-view="org"] .sc-thumb{transform:translateX(100%)}
html.motion #scale .sc-seg>input:checked+label{background:transparent;color:var(--muted)}

/* ---------- counters ---------- */
#scale .sc-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
#scale .sc-k{display:grid;gap:8px;align-content:start;min-width:0;padding:2px 0 2px 16px;border-left:1px solid var(--line-strong)}
#scale .sc-k dt{font-family:var(--font-mono);font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
#scale .sc-k dd{margin:0;font-family:var(--font-sans);font-weight:500;font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--sand);font-variant-numeric:tabular-nums}

/* ---------- panels (≥1280: copy column + a 936px stage) ---------- */
#scale .sc-panel{position:relative;display:grid;column-gap:var(--sc-gap);row-gap:28px;align-items:start}
#scale .sc-panel--me{grid-template-columns:calc(var(--sc-copy) + 24px) var(--sc-node) minmax(0,1fr);grid-template-areas:"copy node login" "copy tiles tiles"}
#scale .sc-panel--org{grid-template-columns:calc(var(--sc-copy) + 24px) minmax(0,1fr);grid-template-areas:"copy map" "copy tiles";row-gap:44px}
#scale .sc-ph{grid-area:ph}
#scale .sc-hud--panel{grid-area:hud;align-self:center}
#scale .sc-copy{grid-area:copy;margin-right:24px;min-width:0}
#scale .sc-node{grid-area:node;align-self:center}
#scale .sc-login{grid-area:login}
#scale .sc-mapw{grid-area:map;min-width:0}
#scale .sc-tiles--me,#scale .sc-tilefig{grid-area:tiles}
html.motion #scale .sc-panel{display:none}
html.motion #scale .sc[data-view="me"] .sc-panel--me,
html.motion #scale .sc[data-view="org"] .sc-panel--org{display:grid}
/* in motion the panel heading is for screen readers only (the toggle names the panel on screen) */
html.motion #scale .sc-ph{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- copy ---------- */
#scale .sc-p{font-size:17px;line-height:1.55;color:var(--muted);text-wrap:pretty}
#scale .sc-copy--me .sc-p{padding-top:14px;border-top:1px solid var(--line)}
#scale .sc-copy--org{display:grid;gap:16px}
#scale .sc-copy--org .sc-p{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);padding-top:14px;border-top:1px solid var(--line);font-size:16px}
#scale .sc-pn{font-family:var(--font-mono);font-size:12px;line-height:25px;letter-spacing:.08em;color:var(--sand)}
#scale .sc-p1{color:var(--text)}

/* ---------- node (Just me) and channel → agent map (The whole org) ---------- */
#scale .sc-row{position:relative;display:grid;grid-template-columns:92px minmax(40px,1fr) auto;column-gap:8px;align-items:center;min-height:28px}
#scale .sc-src{grid-column:1;grid-row:1;justify-self:start}
#scale .sc-wire{grid-column:2;grid-row:1;position:relative;height:28px}
#scale .sc-own{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;padding:0 8px;min-height:22px}
#scale .sc-dst{grid-column:3;grid-row:1;justify-self:start;display:inline-flex}
#scale .sc-ln{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--line-strong);transform-origin:0 50%}
#scale .sc-dot{position:absolute;left:0;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(183,246,209,.6);opacity:0}
#scale .sc-dot--ign{background:var(--sand);box-shadow:0 0 10px rgba(243,209,138,.5)}
#scale .sc-ch{display:inline-flex;align-items:center;height:28px;padding:0 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--bg-raised);font-family:var(--font-mono);font-size:12px;color:var(--text);white-space:nowrap}
#scale .sc-who{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 5px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg-raised);font-size:14px;font-weight:500;color:var(--text);white-space:nowrap}
#scale .sc-av{width:22px;height:22px;border-radius:5px;font-size:12px}
#scale .sc-un{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px dashed var(--line-strong);border-radius:999px;font-family:var(--font-mono);font-size:12px;color:var(--quiet);white-space:nowrap}
/* dev: no channel of its own, so a dashed source and a dashed wire (no message runs along it) */
#scale .sc-nc{display:inline-flex;align-items:center;height:28px;padding:0 9px;border:1px dashed var(--line-strong);border-radius:4px;font-family:var(--font-mono);font-size:12px;color:var(--quiet);white-space:nowrap}
#scale .sc-row--nc .sc-ln{background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 8px)}
#scale .sc-row--me{grid-template-columns:auto minmax(40px,1fr) auto;column-gap:10px}
#scale .sc-node{position:relative;padding:24px 0}
#scale .sc-node::before{content:"";position:absolute;left:-12px;right:-12px;top:50%;height:120px;margin-top:-60px;border-radius:50%;background:radial-gradient(closest-side,rgba(183,246,209,.07),transparent);pointer-events:none}
#scale .sc-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:14px 48px;align-content:start}
#scale .sc-mapnote{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);max-width:56em}

/* wires drawn by JS on desk (Just me: agent → calendar; whole org: paragraph 04 → dashboard) */
#scale .sc-cwires,#scale .sc-fwires{display:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#scale .sc-fwires{z-index:4}
#scale .sc-cw,#scale .sc-fw{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
#scale .sc-fw{stroke:var(--mint);stroke-opacity:.45}
#scale .sc-pk{opacity:0;z-index:3}
@media (min-width:1024px){ html.motion #scale .sc-cwires,html.motion #scale .sc-fwires{display:block} }
@media (max-width:1023px){ #scale .sc-pk{display:none} }

/* ---------- sign-in card (light) ---------- */
#scale .sc-login{align-self:center;justify-self:start;width:100%;max-width:400px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;padding:20px 22px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-bg);color:var(--p-ink);font-family:var(--font-sans);box-shadow:0 18px 44px rgba(0,0,0,.28)}
#scale .sc-lg-mk{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--p-teal);color:#fff;font-weight:600;font-size:19px;line-height:1}
#scale .sc-lg-body{display:grid;min-width:0}
#scale .sc-lg-a,#scale .sc-lg-b{grid-area:1/1;display:grid;gap:10px;justify-items:start;align-content:center;min-width:0}
/* the "Sign in" face is a starting state that only plays; the authored card is signed in */
#scale .sc-lg-a{visibility:hidden;opacity:0}
#scale .sc-lg-t{font-size:16px;font-weight:600;line-height:1.3}
#scale .sc-lg-btn{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 18px;border-radius:6px;background:var(--p-teal);color:#fff;font-size:14px;font-weight:600;line-height:1}
#scale .sc-lg-btn .cur-ripple{left:50%;top:50%;margin:-16px 0 0 -16px;border-color:#fff}
#scale .sc-lg-ok{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;line-height:1.3}
#scale .sc-lg-ck{flex:none;width:20px;height:20px;overflow:visible}
#scale .sc-lg-ck circle{fill:var(--p-teal-wash);stroke:var(--p-teal);stroke-width:1.2}
#scale .sc-lg-ck path{fill:none;stroke:var(--p-teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#scale .sc-lg-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--p-teal);border-radius:12px;color:var(--p-teal);background:#fff;font-family:var(--font-mono);font-size:12px;line-height:1;white-space:nowrap}
#scale .sc-lg-chip svg{flex:none;width:9px;height:11px;fill:none;stroke:currentColor;stroke-width:1.3}

/* ---------- light tiles ---------- */
#scale .sc-tilefig{display:grid;gap:22px;min-width:0}
#scale .sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
#scale .sc-tiles>li{position:relative;display:flex;min-width:0}
#scale .sc-tile{position:relative;display:flex;flex-direction:column;gap:10px;flex:1 1 auto;width:100%;min-height:208px;padding:14px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-bg);color:var(--p-ink);font-family:var(--font-sans);box-shadow:0 18px 44px rgba(0,0,0,.28);overflow:hidden}
#scale .sc-t-hd{display:flex;align-items:center;gap:8px;min-height:22px}
#scale .sc-t-lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;line-height:1.25;color:var(--p-ink)}
#scale .sc-tags{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none}
#scale .sc-vis{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid var(--p-teal);border-radius:10px;color:var(--p-teal);font-family:var(--font-mono);font-size:12px;line-height:1;background:#fff}
#scale .sc-vis--pub{border-color:var(--p-rust);color:var(--p-rust)}
#scale .sc-cnt{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:var(--p-teal-wash);color:var(--p-teal);font-family:var(--font-mono);font-size:12px;line-height:1;white-space:nowrap}
#scale .sc-t-art{position:relative;flex:1 1 auto;min-height:0}
#scale .sc-t-url{align-self:flex-start;max-width:100%;display:inline-block;height:22px;padding:0 9px;border:1px solid var(--p-line);border-radius:11px;background:var(--p-soft);font-family:var(--font-mono);font-size:12px;line-height:20px;color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scale .sc-tnote{margin:2px -15px -15px;padding:10px 15px 12px;background:var(--p-ink);color:#fff;font-family:var(--font-mono);font-size:12px;line-height:1.5}

/* calendar */
#scale .sc-cal{display:grid;gap:6px;align-content:center}
#scale .sc-cal>li{display:flex;align-items:center;min-width:0;height:30px;padding:0 10px;border-radius:5px;border-left:3px solid var(--p-teal);background:var(--p-teal-wash);font-size:13px;line-height:1;color:var(--p-ink);white-space:nowrap;overflow:hidden;transform-origin:0 50%}
#scale .sc-cal-d{flex:none;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--p-teal)}
#scale .sc-cal-s{flex:none;white-space:pre;color:var(--p-muted)}
/* kanban */
#scale .sc-kb{display:flex;gap:6px;align-items:stretch}
#scale .sc-kb-col{flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:5px;padding:6px 4px 4px;border-radius:5px;background:var(--p-soft);border-top:3px solid var(--kb,#9aa5b1)}
#scale .sc-kb--req{--kb:#d9a92b} #scale .sc-kb--app{--kb:#2f9a8a;flex:2.6 1 0;background:var(--p-teal-wash)} #scale .sc-kb--ord{--kb:#4a78c2} #scale .sc-kb--rec{--kb:#9aa5b1} #scale .sc-kb--dec{--kb:#c2554d}
#scale .sc-kb-col>i{display:block;height:12px;border-radius:3px;background:#fff;border:1px solid var(--p-line)}
#scale .sc-kb-h{font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.02em;color:var(--p-teal);padding:0 1px 1px}
#scale .sc-kb-card{display:block;padding:5px 6px;border-radius:4px;background:#fff;border:1px solid #b9d9d3;font-size:12px;font-weight:600;line-height:1.25;color:var(--p-ink);box-shadow:0 2px 6px rgba(20,99,90,.12)}
/* dashboard: four bars with their totals */
#scale .sc-dash{display:grid;grid-template-rows:auto 1fr auto;gap:8px}
#scale .sc-dash>.sc-cnt{justify-self:start}
#scale .sc-bars{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:6px 8px;align-content:center;align-items:center}
#scale .sc-bars>li{display:contents}
#scale .sc-bl{font-size:12px;line-height:16px;color:var(--p-muted);white-space:nowrap}
#scale .sc-bt{position:relative;height:10px;min-width:0}
#scale .sc-bt>i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);border-radius:2px;background:var(--p-teal);transform-origin:0 50%}
#scale .sc-bars>li:nth-child(2) .sc-bt>i{background:#2f8a7e} #scale .sc-bars>li:nth-child(3) .sc-bt>i{background:#4f9f93} #scale .sc-bars>li:nth-child(4) .sc-bt>i{background:#6fb3a8}
#scale .sc-bn{font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:16px;text-align:right;color:var(--p-ink);font-variant-numeric:tabular-nums}
#scale .sc-foot{font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--p-muted);text-wrap:balance}
/* the CSV chip, docked under the dashboard tile (the desk flight ends here) */
#scale .sc-sheet{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 9px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg-raised);font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--text);white-space:nowrap}
#scale .sc-li--dash>.sc-sheet{position:absolute;left:14px;top:calc(100% + 11px);z-index:2}
#scale .sc-li--dash>.sc-sheet::before{content:"";position:absolute;left:14px;bottom:100%;width:1px;height:12px;background:var(--line-strong)}
#scale .sc-grid{flex:none;display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:repeat(2,4px);gap:1px}
#scale .sc-grid>i{display:block;background:var(--mint);opacity:.85}
#scale .sc-grid>i:nth-child(-n+3){opacity:1;background:var(--sand)}
#scale .sc-rows{font-weight:500;color:var(--sand);font-variant-numeric:tabular-nums}
#scale .sc-sheet--fly{position:absolute;left:0;top:0;z-index:6;visibility:hidden;opacity:0;pointer-events:none;box-shadow:0 12px 32px rgba(0,0,0,.5)}
/* form */
#scale .sc-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-content:center}
#scale .sc-field{grid-column:1/-1;height:18px;border:1px solid var(--p-line);border-radius:4px;background:#fff}
#scale .sc-field--lg{grid-column:1;height:26px}
#scale .sc-send{grid-column:2;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:4px;background:var(--p-teal);color:#fff;font-size:12px;font-weight:600}
/* funnel */
#scale .sc-funw{display:grid;grid-template-rows:auto 1fr;gap:6px}
#scale .sc-funw>.sc-cnt{justify-self:start}
#scale .sc-fun{display:grid;gap:4px;align-content:center}
#scale .sc-fun>li{position:relative;display:grid;place-items:center;height:20px}
#scale .sc-fun>li>i{position:absolute;top:0;bottom:0;left:calc((1 - var(--w)) * 50%);right:calc((1 - var(--w)) * 50%);border-radius:3px;background:var(--p-teal)}
/* bars 2 and 3 stay dark enough for their white labels (5.7:1 and 4.8:1) */
#scale .sc-fun>li:nth-child(2)>i{background:#1d7266} #scale .sc-fun>li:nth-child(3)>i{background:#287f72}
#scale .sc-fun>li>span{position:relative;font-size:12px;font-weight:500;line-height:1;color:#fff;white-space:nowrap}
/* canvas */
#scale .sc-cv{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--p-line);border-radius:6px;overflow:hidden;background:#fff}
#scale .sc-cv-tabs{display:flex;align-items:stretch;gap:12px;height:28px;padding:0 10px;border-bottom:1px solid var(--p-line);background:var(--p-soft)}
#scale .sc-cv-tabs>i{align-self:center;width:34px;height:6px;border-radius:3px;background:var(--p-line)}
#scale .sc-cv-tab{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--p-ink);box-shadow:inset 0 -2px 0 var(--p-teal);white-space:nowrap}
#scale .sc-cv-tab>b{width:9px;height:11px;border:1.5px solid var(--p-teal);border-radius:2px}
#scale .sc-cv-doc{display:grid;gap:6px;align-content:start;padding:10px}
#scale .sc-cv-doc>i{display:block;height:5px;border-radius:3px;background:var(--p-line)}
#scale .sc-cv-doc>i.m{width:46%;height:9px;margin-bottom:2px;background:#c9d4de}
#scale .sc-cv-doc>i.s{width:58%}
/* snapshot */
#scale .sc-snap{display:grid;align-content:center;gap:4px;padding:8px 14px;border:1px solid var(--p-line);border-radius:6px;background:#fff}
#scale .sc-snap-n{font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.03em;color:var(--p-ink);font-variant-numeric:tabular-nums}
#scale .sc-snap>span{font-size:13px;line-height:1.3;color:var(--p-muted)}

#scale .sc-cap{font-size:15px;line-height:1.55;color:var(--muted);max-width:46em}

/* ---------- static view (reduced, frames, no JS): both panels, the chosen one first ---------- */
html:not(.motion) #scale .sc-bar{border-bottom:0;padding-bottom:0}
html:not(.motion) #scale .sc-panels{display:grid;row-gap:88px}
html:not(.motion) #scale .sc-panel{padding-top:40px;border-top:1px solid var(--line)}
html:not(.motion) #scale .sc[data-view="org"] .sc-panel--org{order:-1}
@supports selector(:has(*)){
  html:not(.motion) #scale .sc:has(#sc-r-org:checked) .sc-panel--org{order:-1}
  html:not(.motion) #scale .sc:has(#sc-r-me:checked) .sc-panel--org{order:0}
}
html:not(.motion) #scale .sc-panel--me{grid-template-areas:"ph hud hud" "copy node login" "copy tiles tiles"}
html:not(.motion) #scale .sc-panel--org{grid-template-areas:"ph hud" "copy map" "copy tiles"}
#scale .sc-ph{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-weight:500;font-size:24px;line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--text)}
#scale .sc-ph::before{content:"";flex:none;width:10px;height:10px;background:var(--sand)}

/* ---------- compact desktop 1024–1279: copy above, stage stacked ---------- */
@media (min-width:1024px) and (max-width:1279px){
  #scale .sc-bar{grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:40px}
  #scale .sc-panel--me{grid-template-columns:var(--sc-node) minmax(0,1fr);grid-template-areas:"copy copy" "node login" "tiles tiles"}
  #scale .sc-panel--org{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "map" "tiles";row-gap:36px}
  html:not(.motion) #scale .sc-panel--me{grid-template-areas:"ph ph" "hud hud" "copy copy" "node login" "tiles tiles"}
  html:not(.motion) #scale .sc-panel--org{grid-template-areas:"ph" "hud" "copy" "map" "tiles"}
  #scale .sc-copy{margin-right:0;margin-bottom:4px}
  #scale .sc-copy--me .sc-p{max-width:46em;border-top:0;padding-top:0}
  #scale .sc-copy--org{display:block;columns:2;column-gap:40px}
  #scale .sc-copy--org .sc-p{break-inside:avoid;margin-bottom:18px}
}

/* ---------- touch layouts ≤1023: one column ---------- */
@media (max-width:1023px){
  #scale .sc{max-width:640px;margin-inline:auto}
  #scale .sc-bar{grid-template-columns:minmax(0,1fr);row-gap:24px;padding-bottom:24px;margin-bottom:28px}
  #scale .sc-seg{max-width:none}
  #scale .sc-hud{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;column-gap:16px}
  #scale .sc-panel{row-gap:28px}
  #scale .sc-panel--me,#scale .sc-panel--org{grid-template-columns:minmax(0,1fr)}
  #scale .sc-panel--me{grid-template-areas:"copy" "node" "login" "tiles"}
  #scale .sc-panel--org{grid-template-areas:"copy" "map" "tiles";row-gap:36px}
  html:not(.motion) #scale .sc-panel--me{grid-template-areas:"ph" "hud" "copy" "node" "login" "tiles"}
  html:not(.motion) #scale .sc-panel--org{grid-template-areas:"ph" "hud" "copy" "map" "tiles"}
  html:not(.motion) #scale .sc-panels{row-gap:64px}
  html:not(.motion) #scale .sc-panel{padding-top:32px}
  #scale .sc-copy{margin-right:0}
  #scale .sc-node{padding:8px 0}
  #scale .sc-login{max-width:none}
  #scale .sc-map{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;row-gap:14px}
  #scale .sc-map>.sc-row--own:nth-child(5),#scale .sc-map>.sc-row--nc{margin-top:10px}
  #scale .sc-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 16px}
  #scale .sc-tilefig{gap:18px}
}
@media (max-width:599px){
  #scale .sc-hud{column-gap:16px}
  #scale .sc-k{padding-left:12px}
  #scale .sc-p{font-size:16px}
  #scale .sc-copy--org{gap:14px}
  #scale .sc-copy--org .sc-p{grid-template-columns:30px minmax(0,1fr);padding-top:12px}
  #scale .sc-ph{font-size:20px}
  #scale .sc-row--me{column-gap:8px}
  #scale .sc-login{padding:18px 16px;column-gap:14px}
  #scale .sc-tiles{grid-template-columns:minmax(0,1fr)}
  #scale .sc-tile{min-height:0;padding:16px}
  #scale .sc-tnote{margin:2px -17px -17px;padding:10px 17px 12px}
  #scale .sc-t-art{min-height:96px}
  #scale .sc-li--dash>.sc-sheet{left:16px}
}
@media (max-width:359px){
  #scale .sc-row--me{grid-template-columns:auto minmax(24px,1fr) auto}
  #scale .sc-row--me .sc-chip{padding:0 10px 0 8px}
}

/* ===== 08-skills.css ===== */
/* 08 · #skills: they show you the plan first (unpinned).
   One row: the plan card (light, Block Kit look) with the closing note under it, beside six dark tiles.
   ≥1280: the plan in the 360px copy column at x=48, the tiles 3 × 2 in the 936px stage column.
   1024–1279: plan beside the tiles, tiles 2 × 3.  ≤1023: one column (plan, note, tiles).
   Each tile's answer is a small light card, the same card that flies out of the plan on desk. */
#skills .sec-head .intro{max-width:44em}

#skills .pb-grid{position:relative;display:grid;grid-template-columns:var(--copy-w) minmax(0,1fr);column-gap:var(--col-gap);align-items:start}
#skills .pb-side{display:grid;gap:22px;min-width:0}

/* ---------- plan card ---------- */
#skills .pb-plan{position:relative;display:grid;gap:4px;padding:18px 20px 14px 23px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-bg);color:var(--p-ink);font-family:var(--font-sans);box-shadow:0 18px 44px rgba(0,0,0,.28);overflow:hidden}
#skills .pb-plan::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--p-teal)}
#skills .pb-plan-h{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:6px;font-size:17px;line-height:1.35}
#skills .pb-ph-in{display:block}
#skills .pb-lines{display:grid}
#skills .pb-ln{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start;padding:9px 0}
#skills .pb-ln+.pb-ln{border-top:1px solid #e8edf2}
#skills .pb-ln-n{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--p-teal-wash);color:var(--p-teal);font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1}
#skills .pb-ln-t{display:block;min-width:0;font-size:14px;line-height:22px;color:var(--p-ink);text-wrap:pretty}
#skills .pb-note{max-width:34em;padding-left:2px}

/* ---------- six tiles ---------- */
#skills .pb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#skills .pb-tiles>li{display:flex;min-width:0}
#skills .pb-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;padding:20px 18px 16px;border-radius:8px;color:var(--text)}
#skills .pb-tf{--pb-hit:0;position:absolute;inset:0;z-index:0;border:1px solid var(--line);border-radius:8px;background:var(--bg-raised)}
#skills .pb-tf::after{content:"";position:absolute;inset:-1px;border:1px solid var(--mint);border-radius:8px;opacity:var(--pb-hit);box-shadow:0 0 24px rgba(183,246,209,.14)}
#skills .pb-tile:hover .pb-tf::after,#skills .pb-tile:focus-visible .pb-tf::after{opacity:1}
#skills .pb-tq{position:relative;z-index:1;display:block;align-self:stretch;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
#skills .pb-tq-in{display:block;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
/* the answer: a small light card, as it sits in the plan */
#skills .pb-ta,#skills .pb-ghost{display:block;padding:8px 11px 8px 12px;border-radius:6px;border-left:3px solid var(--p-teal);background:var(--p-bg);color:var(--p-ink);font-family:var(--font-sans);font-size:14px;line-height:1.45;text-wrap:pretty}
#skills .pb-ta{position:relative;z-index:1;align-self:stretch}
#skills .pb-ghost{position:absolute;left:0;top:0;z-index:5;margin:0;pointer-events:none;transform-origin:0 0;box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden}
/* the station chip */
#skills .pb-tl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:28px;margin-top:auto;padding:0 12px 0 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg);font-family:var(--font-mono);font-size:12px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);white-space:nowrap;transform-origin:0 50%}
#skills .pb-tl b{color:var(--sand);font-weight:500}
#skills .pb-tl>span[aria-hidden]{display:inline-block;transition:transform .2s}
#skills .pb-tile:hover .pb-tl>span[aria-hidden],#skills .pb-tile:focus-visible .pb-tl>span[aria-hidden]{transform:translateX(3px)}
#skills .pb-tile:hover .pb-tl,#skills .pb-tile:focus-visible .pb-tl{border-color:var(--mint)}

/* ---------- compact desktop 1024–1279: plan beside two columns of tiles ---------- */
@media (min-width:1024px) and (max-width:1279px){
  #skills .pb-grid{grid-template-columns:minmax(280px,320px) minmax(0,1fr);column-gap:40px}
  #skills .pb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- touch layouts ≤1023: one column ---------- */
@media (max-width:1023px){
  #skills .pb-grid{grid-template-columns:minmax(0,1fr);row-gap:36px;max-width:640px;margin-inline:auto}
  #skills .pb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  #skills .pb-grid{row-gap:28px}
  #skills .pb-plan{padding:16px 16px 12px 19px}
  /* phone: the station chip sits beside the question, the answer card under both */
  #skills .pb-tiles{grid-template-columns:minmax(0,1fr);gap:12px}
  #skills .pb-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q l" "a a";gap:12px;align-items:start;padding:16px}
  #skills .pb-tq{grid-area:q}
  #skills .pb-tq-in{font-size:16px}
  #skills .pb-ta{grid-area:a}
  #skills .pb-tl{grid-area:l;margin:-3px 0 0;transform-origin:100% 50%}
}

/* ---------- motion: hidden starting states ---------- */
/* desk and touch builders both clear these */
html.motion #skills .pb-plan{opacity:0;transform:translateY(24px)}
html.motion #skills .pb-ln{opacity:0}
html.motion #skills .pb-tiles>li{opacity:0;transform:translateY(24px)}
html.motion #skills .pb-note{opacity:0;transform:translateY(12px)}
/* desk only (≥1024): the plan types, then each answer flies into its tile */
@media (min-width:1024px){
  html.motion #skills .pb-ph-in{transform:translateY(110%)}
  html.motion #skills .pb-ln{opacity:1}
  html.motion #skills .pb-ln-n{opacity:0;transform:scale(.4)}
  html.motion #skills .pb-ln-t{clip-path:inset(0 100% 0 0)}
  html.motion #skills .pb-tq-in{transform:translateY(110%)}
  html.motion #skills .pb-ta{opacity:0}
  html.motion #skills .pb-tl{opacity:0;transform:scale(.4)}
}

/* ===== 08s-sdk.css ===== */
/* 08s · #sdk: for builders (unpinned).
   The figure: one Ravi (the hub) wired to three apps, a dashboard (TypeScript), a Mac app and an iPhone app (Swift).
     ≥1280      dash | hub | mac (low) | phone (high), the language chips under the hub.
     1024–1279  the hub on top, the three apps in a row under it (dash | phone | mac), chips last.
     ≤1023      the hub, the chips, then the apps stacked on a spine down the left edge (max 640, centred),
                so the iPhone app sits right above the code line.
   --sd-lay tells the JS which wire geometry to draw. With no JS the .sd-nj lines stand in for the wires.
   Under the figure: the one code line, the zero-drift stamp and claim, the fine print and the buttons.
   No html.motion hidden rules: the builder sets every starting state with fromTo. */
#sdk .sec-head{margin-bottom:72px}
#sdk .sd-hl .mask{display:inline-block;vertical-align:top}
#sdk .sd-br-p{display:none}

/* ---------- the figure ---------- */
#sdk .sd-fig{
  --sd-lay:wide; --sd-g:clamp(56px,5vw,80px); --sd-mac:272px; --sd-g2:28px;
  --sd-ph-w:220px; --sd-ph-h:440px; --sd-lab:40px; --sd-hub:168px;
  position:relative;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) var(--sd-g) var(--sd-hub) var(--sd-g) var(--sd-mac) var(--sd-g2) var(--sd-ph-w);
  grid-template-areas:"dash . hub . mac . phone" ". . langs . . . .";
}
#sdk .sd-hubc,#sdk .sd-app,#sdk .sd-langs{position:relative;z-index:1;min-width:0}
#sdk .sd-hubc{grid-area:hub;align-self:center;display:flex;justify-content:center}
#sdk .sd-app--dash{grid-area:dash;align-self:center;justify-self:end;width:100%;max-width:480px}
/* the Mac app sits low: its top clears the phone's wire, its window still meets the hub's lower port */
#sdk .sd-app--mac{grid-area:mac;margin-top:calc((var(--sd-lab) + var(--sd-ph-h)) / 2 - var(--sd-hub) * .2 + 18px)}
#sdk .sd-app--phone{grid-area:phone}
#sdk .sd-langs{grid-area:langs;justify-self:center;width:max-content;margin-top:48px}

/* the hub: a dark 168px rounded square, a ring of 24 mint dots (JS turns it, 40 s a turn) */
#sdk .sd-hub{position:relative;display:grid;place-items:center;width:var(--sd-hub);height:var(--sd-hub);border-radius:30px;
  background:radial-gradient(circle at 50% 42%,#18201d 0,#111 62%);border:1px solid var(--line-strong);
  box-shadow:0 0 0 6px rgba(183,246,209,.04),0 24px 64px rgba(0,0,0,.45)}
#sdk .sd-ring{position:absolute;inset:4px;pointer-events:none}
#sdk .sd-ring svg{width:100%;height:100%;overflow:visible}
#sdk .sd-dots circle{fill:var(--mint);opacity:.5}
#sdk .sd-dots .sd-dot--b{opacity:1}
#sdk .sd-hub-t{position:relative;display:grid;justify-items:center;gap:3px;text-align:center}
#sdk .sd-mark{font-family:var(--font-sans);font-weight:600;font-size:20px;line-height:1.1;letter-spacing:.2em;margin-right:-.2em;color:var(--text)}
#sdk .sd-n{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
#sdk .sd-num{font-family:var(--font-sans);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.02em;color:var(--sand);font-variant-numeric:tabular-nums}
#sdk .sd-plus{display:inline-block;margin-left:-5px;font-family:var(--font-sans);font-weight:500;font-size:22px;line-height:1.15;color:var(--sand)}
#sdk .sd-unit{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
#sdk .sd-sub{max-width:108px;font-family:var(--font-mono);font-size:12px;line-height:15px;color:var(--quiet)}
/* ports where the wires meet the hub */
#sdk .sd-port{position:absolute;width:7px;height:7px;background:var(--bg);border:1px solid var(--mint)}
#sdk .sd-port--a{left:-4px;top:calc(50% - 4px)}
#sdk .sd-port--b{right:-4px;top:calc(30% - 4px)}
#sdk .sd-port--c{right:-4px;top:calc(70% - 4px)}

/* app labels and windows */
#sdk .sd-app-l{display:flex;align-items:center;gap:10px;height:28px;margin-bottom:12px;white-space:nowrap}
#sdk .sd-app-l b{font-size:14px;font-weight:600;color:var(--text)}
#sdk .sd-tag{color:var(--sand)}
#sdk .sd-app--dash .sd-tag{color:var(--mint)}
#sdk .sd-win{box-shadow:0 18px 48px rgba(0,0,0,.4)}

/* team dashboard (light ravi.page surface in a browser) */
#sdk .sd-dash .rb-chrome{height:36px}
#sdk .sd-dash-pg{padding:18px 22px 22px}
#sdk .sd-dash-t{font-size:13px;line-height:1.4;color:var(--p-muted)}
#sdk .sd-dash-n{margin:2px 0 16px;font-family:var(--font-sans);font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.03em;color:var(--p-ink);font-variant-numeric:tabular-nums}
#sdk .sd-bars{display:grid;gap:12px}
#sdk .sd-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px;font-size:13px;line-height:1.3}
#sdk .sd-bar-l{color:var(--p-ink)}
#sdk .sd-bar-v{color:var(--p-muted);font-variant-numeric:tabular-nums}
#sdk .sd-bar-tr{grid-column:1/-1;display:block;height:8px;border-radius:4px;background:var(--p-soft);box-shadow:inset 0 0 0 1px var(--p-line);overflow:hidden}
#sdk .sd-bar-f{display:block;width:calc(var(--w) * 100%);min-width:6px;height:100%;border-radius:4px;background:var(--p-teal);transform-origin:0 50%}

/* Mac app: a window with traffic lights */
#sdk .sd-mac{background:var(--p-bg);border:1px solid var(--p-line);border-radius:10px;overflow:hidden}
#sdk .sd-mac-bar{position:relative;display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;background:linear-gradient(#f3f5f8,#e9edf1);border-bottom:1px solid var(--p-line)}
#sdk .sd-tl{position:absolute;left:12px;top:50%;display:flex;gap:6px;transform:translateY(-50%)}
#sdk .sd-tl i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
#sdk .sd-tl i:nth-child(2){background:#febc2e}
#sdk .sd-tl i:nth-child(3){background:#28c840}
#sdk .sd-mac-t{font-size:13px;font-weight:600;color:var(--p-ink)}
#sdk .sd-rows{padding:4px 0}
#sdk .sd-row{display:flex;align-items:center;flex-wrap:wrap;row-gap:4px;min-height:44px;padding:8px 14px;font-size:13px;line-height:1.35;color:var(--p-ink);white-space:pre}
#sdk .sd-row+.sd-row{border-top:1px solid var(--p-line)}
#sdk .sd-r-nm{font-weight:500}
#sdk .sd-r-s,#sdk .sd-r-v{color:var(--p-muted);font-variant-numeric:tabular-nums}

/* iPhone app: a 220×440 phone */
#sdk .sd-phone{position:relative;width:var(--sd-ph-w);height:var(--sd-ph-h);padding:7px;border-radius:38px;background:#1d1f1f;border:1px solid #333}
#sdk .sd-ph-scr{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:31px;background:var(--p-bg)}
#sdk .sd-ph-isl{position:absolute;left:50%;top:9px;width:60px;height:18px;margin-left:-30px;border-radius:9px;background:#0d0d0d}
#sdk .sd-ph-hd{display:flex;align-items:center;justify-content:center;gap:7px;padding:36px 12px 10px;border-bottom:1px solid var(--p-line);background:#fff}
#sdk .sd-ph-hd b{font-size:13px;font-weight:600}
#sdk .sd-ph-msgs{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 10px}
#sdk .sd-bub{max-width:84%;padding:8px 11px;border-radius:16px;font-size:13px;line-height:1.4}
#sdk .sd-bub--me{align-self:flex-end;border-bottom-right-radius:5px;background:var(--p-teal);color:#fff}
#sdk .sd-bub--ops{position:relative;align-self:flex-start;border-bottom-left-radius:5px;background:#fff;border:1px solid var(--p-line);color:var(--p-ink)}
#sdk .sd-wait{position:absolute;left:11px;top:12px;display:flex;gap:4px;opacity:0;pointer-events:none}
#sdk .sd-wait i{width:6px;height:6px;border-radius:50%;background:var(--p-muted)}
#sdk .sd-ph-in{display:flex;align-items:center;justify-content:space-between;height:32px;margin:0 10px 14px;padding:0 4px 0 12px;border:1px solid var(--p-line);border-radius:16px;background:#fff}
#sdk .sd-ph-in span{width:56%;height:6px;border-radius:3px;background:var(--p-soft);box-shadow:inset 0 0 0 1px var(--p-line)}
#sdk .sd-ph-in i{width:24px;height:24px;border-radius:50%;background:var(--p-teal)}

/* language chips */
#sdk .sd-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
#sdk .sd-lc{background:var(--bg-raised)}

/* wires and packets */
#sdk .sd-wires{z-index:0}
#sdk .sd-w{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;opacity:.7}
#sdk .sd-pk{z-index:3;opacity:0}

/* no JS: straight lines stand in for the drawn wires (hidden once the JS draws) */
#sdk.sd-js .sd-nj{display:none}
#sdk .sd-nj{position:absolute;display:block;pointer-events:none}
#sdk .sd-nj--a,#sdk .sd-nj--b,#sdk .sd-nj--c{height:1.5px;background:var(--mint);opacity:.7}
#sdk .sd-nj--a{right:100%;top:50%;width:var(--sd-g)}
#sdk .sd-nj--b{left:100%;top:30%;width:calc(var(--sd-g) + var(--sd-mac) + var(--sd-g2))}
/* the lower port steps down to the Mac window's middle (about 81px below the port at every wide width) */
#sdk .sd-nj--c{left:100%;top:calc(70% - .75px);width:var(--sd-g);height:82px;background:none;opacity:1}
#sdk .sd-nj--c::before,#sdk .sd-nj--c::after{content:"";position:absolute;height:calc(50% + .75px);border:0 solid #84b096}
#sdk .sd-nj--c::before{left:0;top:0;width:calc(50% + .75px);border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:8px}
#sdk .sd-nj--c::after{left:calc(50% - .75px);right:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:8px}
#sdk .sd-nj--hub,#sdk .sd-nj--bus,#sdk .sd-nj--app{display:none}

/* ---------- under the figure ---------- */
#sdk .sd-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-areas:"code claim" "fine end";column-gap:72px;row-gap:56px;align-items:start;margin-top:104px}
#sdk .sd-codeblk{grid-area:code;min-width:0}
#sdk .sd-claim{grid-area:claim}
#sdk .sd-fine{grid-area:fine}
#sdk .sd-end{grid-area:end}
#sdk .sd-codebox{position:relative;border:1px solid rgba(127,214,196,.22);border-radius:8px;background:var(--p-code)}
#sdk .sd-line{padding:18px 92px 18px 20px;background:none;font-size:13px;line-height:22px;white-space:normal;overflow:visible}
/* soft wrap at the argument boundaries, continuation lines hang by 2ch */
#sdk .sd-line>code{display:block;padding-left:2ch;text-indent:-2ch}
#sdk .sd-p{display:inline-block;text-indent:0;white-space:pre}
#sdk .sd-caret{height:1.05em;margin-left:3px;vertical-align:-.15em}
#sdk .sd-copy{position:absolute;top:6px;right:8px;height:44px;margin:0;padding:0 10px;background:none}
#sdk .sd-copy:hover{color:var(--text)}
#sdk .sd-toast{right:8px;bottom:auto;top:calc(100% + 8px);background:var(--mint);color:var(--p-ink)}
#sdk .sd-cap{margin-top:16px;max-width:44em;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}

#sdk .sd-claim{display:grid;gap:22px;justify-items:start}
#sdk .sd-stamp{display:inline-flex;align-items:center;height:46px;padding:0 18px;border:2px solid var(--mint);border-radius:6px;
  font-family:var(--font-mono);font-weight:500;font-size:16px;letter-spacing:.24em;color:var(--mint);white-space:nowrap;
  box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px rgba(183,246,209,.4);transform:rotate(-4deg)}
#sdk .sd-stamp-t{margin-right:-.24em}
#sdk .sd-claim-t{max-width:30em;font-size:17px;line-height:1.55;color:var(--muted);text-wrap:pretty}

#sdk .sd-fine{max-width:52em}
#sdk .sd-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
#sdk .sd-btns{gap:12px}
#sdk .sd-btn{min-height:48px;text-transform:none;letter-spacing:.02em}

/* ---------- 1024–1279: the hub on top, the apps in a row ---------- */
@media (max-width:1279px){
  #sdk .sd-fig{
    --sd-lay:row;
    max-width:1040px;margin-inline:auto;column-gap:32px;
    grid-template-columns:minmax(0,1fr) var(--sd-ph-w) minmax(0,1fr);
    grid-template-areas:". hub ." "bus bus bus" "dash phone mac" ". langs .";
  }
  #sdk .sd-hubc{margin-bottom:36px}
  #sdk .sd-app{margin-top:36px}
  #sdk .sd-app--dash{max-width:none;justify-self:stretch;align-self:start}
  #sdk .sd-app-l{justify-content:center}
  #sdk .sd-port--a,#sdk .sd-port--c{display:none}
  #sdk .sd-port--b{left:calc(50% - 4px);right:auto;top:auto;bottom:-4px}
  #sdk .sd-under{grid-template-columns:minmax(0,1fr);grid-template-areas:"code" "claim" "fine" "end";max-width:960px;margin-inline:auto;row-gap:44px;margin-top:88px}
  #sdk .sd-sub,#sdk .sd-unit{font-size:13px}
  /* no JS: hub stem → bus → app stems */
  #sdk .sd-nj--a,#sdk .sd-nj--b,#sdk .sd-nj--c{display:none}
  #sdk:not(.sd-js) .sd-nj--hub{display:block;left:calc(50% - .75px);top:100%;width:1.5px;height:36px;background:var(--mint);opacity:.7}
  #sdk:not(.sd-js) .sd-nj--bus{display:block;position:relative;grid-area:bus;height:1.5px;margin-inline:calc((100% - var(--sd-ph-w) - 64px) / 4);background:var(--mint);opacity:.7}
  #sdk:not(.sd-js) .sd-nj--app{display:block;left:calc(50% - .75px);bottom:100%;width:1.5px;height:36px;background:var(--mint);opacity:.7}
}
@media (min-width:1024px) and (max-width:1279px){
  #sdk .sd-langs{width:auto;justify-self:stretch;grid-column:1/-1}
}

/* ---------- ≤1023: the hub, the chips, then the apps stacked on a spine ---------- */
@media (max-width:1023px){
  #sdk .sec-head{margin-bottom:56px}
  #sdk .sd-fig{
    --sd-lay:stack;
    max-width:640px;column-gap:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hub" "bus" "langs" "dash" "mac" "phone";
  }
  #sdk .sd-hubc{margin-bottom:0}
  #sdk .sd-app{margin-top:44px;padding-left:28px}
  #sdk .sd-app--dash{max-width:none}
  #sdk .sd-app-l{justify-content:flex-start}
  #sdk .sd-langs{grid-column:auto;justify-self:stretch;width:auto;justify-content:flex-start;margin-top:44px;padding-left:28px}
  #sdk .sd-under{margin-top:72px;max-width:640px}
  #sdk .sd-sub,#sdk .sd-unit{font-size:12px}
  /* no JS: the stem leaves the hub, turns left to the spine; each app hangs off the spine */
  #sdk:not(.sd-js) .sd-nj--hub{left:10px;right:50%;top:100%;width:auto;height:22px;background:none;
    border-right:1.5px solid rgba(183,246,209,.7);border-bottom:1.5px solid rgba(183,246,209,.7);opacity:1}
  #sdk:not(.sd-js) .sd-nj--bus{display:none}
  #sdk:not(.sd-js) .sd-nj--app{left:10px;top:-44px;bottom:auto;width:18px;height:106px;background:none;
    border-left:1.5px solid rgba(183,246,209,.7);border-bottom:1.5px solid rgba(183,246,209,.7);opacity:1}
  #sdk:not(.sd-js) .sd-app--phone .sd-nj--app{height:148px}
  /* the spine runs past the chips, from the hub's turn down to the first app */
  #sdk:not(.sd-js) .sd-langs::before{content:"";position:absolute;left:10px;top:-22px;bottom:0;border-left:1.5px solid rgba(183,246,209,.7)}
  /* …and alongside every app but the last */
  #sdk:not(.sd-js) .sd-app--dash::before,#sdk:not(.sd-js) .sd-app--mac::before{content:"";position:absolute;left:10px;top:0;bottom:0;border-left:1.5px solid rgba(183,246,209,.7)}
}
@media (max-width:599px){
  #sdk .sec-head{margin-bottom:40px}
  #sdk .sd-br-p{display:inline}
  #sdk .sd-br-d{display:none}
  #sdk .sd-app{margin-top:40px;padding-left:24px}
  #sdk .sd-langs{padding-left:24px}
  #sdk .sd-lc--oa{height:auto;min-height:28px;padding-block:5px;white-space:normal;line-height:1.35}
  #sdk:not(.sd-js) .sd-nj--app{top:-40px;width:14px;height:102px}
  #sdk:not(.sd-js) .sd-app--phone .sd-nj--app{height:144px}
  #sdk .sd-dash-n{font-size:34px}
  #sdk .sd-under{row-gap:36px;margin-top:64px}
  #sdk .sd-line{padding:14px 14px 6px;font-size:12px;line-height:20px}
  #sdk .sd-copy{position:static;display:flex;justify-content:flex-start;width:100%;padding:0 14px;margin:0}
  #sdk .sd-toast{right:14px;top:auto;bottom:6px}
  #sdk .sd-claim-t{font-size:16px}
  #sdk .sd-end{gap:16px}
  #sdk .sd-btns{flex-direction:column;align-items:stretch;width:100%}
  #sdk .sd-btn{width:100%}
}

/* ===== 09-install.css ===== */
/* 09 · #install: try it in your Slack (unpinned).
   Three plain steps: three columns on desk, stacked below 1024. One copy box (step 01), the fine print, two buttons.
   No html.motion hidden rules: the builder sets the starting states. */
#install{padding-bottom:clamp(96px,14vh,160px)}
#install .sec-head{margin-bottom:72px}
#install .ins-pass{display:inline-flex;align-items:center;justify-self:start;gap:10px;margin-top:-4px;padding:4px 0 4px 14px;border-left:2px solid var(--mint);font-size:13px;color:var(--muted)}

/* ---------- the steps ---------- */
#install .ins-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
#install .ins-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding-top:28px;border-top:1px solid var(--line)}
/* a short mint rule on each step's top edge (it wipes in on enter) */
#install .ins-rule{position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--mint);transform-origin:0 50%}
#install .ins-n{font-family:var(--font-mono);font-weight:500;font-size:14px;line-height:20px;letter-spacing:.16em;color:var(--sand);font-variant-numeric:tabular-nums}
#install .ins-t{margin-top:-4px;font-family:var(--font-sans);font-weight:500;font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--text)}
#install .ins-d{max-width:34em;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* the copy box: one line, '$', a caret, [Copy] */
#install .ins-box{align-self:stretch;max-width:420px;padding:6px 8px 6px 16px}
#install .ins-box .ln{align-items:center;width:auto;min-width:0;min-height:44px}
#install .ins-box .ln>code{flex:0 1 auto;min-width:0}
#install .ins-caret{margin-left:4px}
#install .ins-copy{position:static;height:44px;margin:0 0 0 auto;padding:0 10px;background:none}
#install .ins-copy:hover{color:var(--text)}
#install .ins-toast{right:0;bottom:calc(100% + 8px);background:var(--mint);color:var(--p-ink)}

/* ---------- fine print and buttons ---------- */
#install .ins-fine{margin-top:72px}
#install .ins-btns{margin-top:32px;gap:12px}
#install .ins-btn{min-width:132px;min-height:48px;text-transform:none;letter-spacing:.02em}

@media (min-width:1024px) and (max-width:1279px){
  #install .ins-steps{column-gap:36px}
  #install .ins-t{font-size:24px}
  #install .ins-box{font-size:13px;padding-left:14px}
}

/* ---------- ≤1023: stacked ---------- */
@media (max-width:1023px){
  #install .sec-head{margin-bottom:56px}
  #install .ins-steps{grid-template-columns:minmax(0,1fr);row-gap:40px;max-width:640px}
  #install .ins-step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:0;row-gap:14px;align-items:start}
  #install .ins-step>*:not(.ins-n):not(.ins-rule){grid-column:2}
  #install .ins-n{grid-row:1;padding-top:6px}
  #install .ins-t{grid-row:1;margin-top:0;font-size:24px}
  #install .ins-box{justify-self:stretch}
  #install .ins-fine{margin-top:56px}
}
@media (max-width:599px){
  #install .sec-head{margin-bottom:40px}
  #install .ins-step{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding-top:22px}
  #install .ins-n{padding-top:0}
  #install .ins-t{font-size:22px}
  #install .ins-box{padding:4px 4px 4px 12px}
  #install .ins-box .ln{flex-wrap:nowrap}
  #install .ins-d{font-size:15px}
  #install .ins-fine{margin-top:48px}
  #install .ins-btns{flex-direction:column;margin-top:28px}
  #install .ins-btn{width:100%}
}