/* CathLabHub hub styles. Light mode (the apps keep their own styles). System font, one blue accent, one card, two buttons.
   Design pass 2026-10-24: one token set (type, space, radii, shadows, motion), contrast at least 4.5 to 1 for text, one page intro,
   one header and footer, the floating Ask panel. No external fonts or scripts. Order: tokens, base, header, intro, layout,
   buttons and pills, cards, pages (home, library, search, build, educators, prose), footer, Ask panel, motion. */
:root{
  /* color */
  --bg:#f6f7f9;--surface:#ffffff;--surface-2:#f0f2f5;--surface-3:#e4e8ee;
  --line:rgba(16,24,40,.09);--line-2:rgba(16,24,40,.16);--hairline:var(--line);
  --glass:rgba(246,247,249,.86);
  --text:#0f1620;--text-2:#3d4756;--text-3:#5d6675;
  --accent:#1d8fe0;--accent-strong:#1474c4;--accent-deep:#0f6fb8;--accent-ink:#ffffff;--accent-soft:rgba(29,143,224,.10);
  --gold:#8a5a12;--amber-soft:#fff3df;
  --k-guide:#2a5ea8;--k-guide-soft:rgba(42,94,168,.10);
  --brand:#2a5ea8; /* the Lab in the wordmark */
  --k-sop:#0d7a5f;--k-sop-soft:rgba(13,122,95,.10);
  --k-poster:#b3470c;--k-poster-soft:rgba(232,104,28,.11);
  --k-app:#5b3fc0;--k-app-soft:rgba(91,63,192,.10);
  /* type: 12 13 15 16 17 20 24 32 44 56 */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --t-caption:12px;--t-foot:13px;--t-small:15px;--t-body:16px;--t-head:17px;--t-title3:20px;--t-title2:24px;--t-title1:32px;--t-display:44px;--t-hero:56px;
  /* space: 4 8 12 16 20 24 32 48 64 */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:48px;--s-9:64px;
  --r-s:10px;--r-m:14px;--r-l:18px;--r-xl:24px;--r-pill:999px;
  --edge:inset 0 0 0 1px var(--line);
  --ring:0 0 0 1px var(--line);--ring-2:0 0 0 1px var(--line-2);
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 12px 32px -10px rgba(16,24,40,.18),0 2px 6px rgba(16,24,40,.05);
  --shadow-3:0 24px 60px -12px rgba(16,24,40,.28),0 4px 12px rgba(16,24,40,.08);
  --ease:cubic-bezier(.2,.7,.2,1);--dur-1:120ms;--dur-2:200ms;
  --max:1080px;--gutter:16px;--header-h:60px;
  color-scheme:light;
}
@media (min-width:760px){:root{--gutter:24px}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.skip{position:absolute;left:-999px;top:8px;z-index:90;padding:10px 14px;background:var(--accent-strong);color:#fff;font-weight:600;border-radius:var(--r-s)}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:var(--r-s)}
input:focus-visible,textarea:focus-visible{outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page{flex:1 0 auto;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) var(--s-8)}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--glass);-webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);box-shadow:0 1px 0 var(--line)}
.topbar .in{position:relative;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--header-h);padding:0 var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:var(--t-head);letter-spacing:-.015em;color:var(--text)}
.brand img{width:28px;height:28px;border-radius:7px;flex:none}
.nav{display:flex;align-items:center;gap:var(--s-1)}
.menu{position:relative}
.menu-btn,.nav-search-m{display:none}
.menu-list{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.menu-list>li{position:relative}
.menu-list>li>a,.menu-list>li>button{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-3);border:0;background:none;border-radius:var(--r-pill);color:var(--text-2);font:500 var(--t-small) var(--font);cursor:pointer;white-space:nowrap;transition:color var(--dur-1),background var(--dur-1)}
.menu-list>li>a:hover,.menu-list>li>button:hover,.has-sub.open>button{color:var(--text);background:rgba(16,24,40,.05)}
.has-sub>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform var(--dur-2) var(--ease)}
.has-sub.open>button::after{transform:rotate(225deg) translate(-1px,-1px)}
/* the current section: darker text and a short accent bar */
.menu-list>li>a[aria-current=page],.menu-list>li>button[aria-current=true]{color:var(--text);font-weight:600}
.menu-list>li>a[aria-current=page]::before,.menu-list>li>button[aria-current=true]::before{content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:5px;height:2px;border-radius:2px;background:var(--accent-strong)}
.has-sub>button[aria-current=true]::before{right:calc(var(--s-3) + 12px)}
.sub{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 4px);left:-6px;min-width:248px;background:var(--surface);border-radius:var(--r-m);box-shadow:var(--shadow-3),var(--ring);display:none;z-index:60}
.has-sub.open>.sub,.has-sub:hover>.sub{display:block;animation:drop var(--dur-2) var(--ease)}
.has-sub:hover>.sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.sub a{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:40px;padding:0 var(--s-3);border-radius:var(--r-s);color:var(--text);font-size:var(--t-small)}
.sub a[href]:hover{background:var(--surface-2)}
.sub a[aria-current=page]{background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.sub a[aria-disabled=true]{color:var(--text-3);cursor:default}
.sub small,.soon-tag{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gold);background:var(--amber-soft);padding:2px 8px;border-radius:var(--r-pill)}
.sub small::first-letter{text-transform:uppercase}
.nav-search{margin-left:var(--s-2);gap:var(--s-2) !important;min-width:132px;padding:0 var(--s-4) 0 var(--s-3) !important;background:var(--surface) !important;box-shadow:var(--ring-2);color:var(--text-3) !important}
.nav-search:hover{box-shadow:0 0 0 1px rgba(16,24,40,.28);color:var(--text) !important}
.nav-search[aria-current=page]{color:var(--text) !important}
.nav-search[aria-current=page]::before{display:none}
.nav-search svg,.nav-search-m svg,.menu-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (min-width:761px) and (max-width:960px){.menu-list>li>a,.menu-list>li>button{padding:0 9px;font-size:14px;gap:5px}.nav-search{min-width:0;margin-left:2px}.nav-search span{display:none}.menu-list>li>a[aria-current=page]::before,.menu-list>li>button[aria-current=true]::before{left:9px;right:9px}}
@media (max-width:760px){
  .menu{position:static}
  .nav-search-m{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--text-2)}
  .nav-search-m:hover,.nav-search-m[aria-current=page]{background:rgba(16,24,40,.06);color:var(--text)}
  .menu-btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4) 0 var(--s-3);border:0;background:var(--surface);box-shadow:var(--ring-2);border-radius:var(--r-pill);font:600 var(--t-small) var(--font);color:var(--text);cursor:pointer}
  .menu.open .menu-btn{background:var(--text);color:#fff;box-shadow:none}
  .menu-list{display:none;position:absolute;left:8px;right:8px;top:calc(100% + 6px);max-height:calc(100vh - var(--header-h) - 24px);max-height:calc(100dvh - var(--header-h) - 24px);overflow:auto;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow-3),var(--ring);padding:var(--s-2);z-index:60;overscroll-behavior:contain}
  .menu.open .menu-list{display:flex;animation:drop var(--dur-2) var(--ease)}
  .menu-list>li+li{border-top:1px solid var(--line)}
  .menu-list>li>a,.menu-list>li>button{width:100%;min-height:52px;justify-content:space-between;border-radius:var(--r-s);font-size:var(--t-head);color:var(--text)}
  .menu-list>li>a[aria-current=page]::before,.menu-list>li>button[aria-current=true]::before{left:0;right:auto;top:14px;bottom:14px;width:3px;height:auto}
  .nav-search{margin:0;min-width:0;padding:0 var(--s-3) !important;background:none !important;box-shadow:none;color:var(--text) !important;justify-content:flex-start !important}
  .nav-search:hover{box-shadow:none}
  .sub{position:static;box-shadow:none;padding:0 0 var(--s-2) var(--s-2);min-width:0;display:none;animation:none}
  .has-sub:hover>.sub{display:none}
  .has-sub.open>.sub{display:block;animation:none}
  .sub a{min-height:44px;font-size:var(--t-body);color:var(--text-2)}
}

/* ---------- page intro: banner, over line, title, lede, note, section tabs ---------- */
.banner{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--s-5);padding:var(--s-7) var(--s-5) var(--s-6);border-radius:var(--r-l);background:linear-gradient(135deg,var(--lib-tint,#e7f2fd) 0%,#f6f9fd 58%,#ffffff 100%);box-shadow:var(--ring)}
.banner::before{content:"";position:absolute;z-index:-1;right:-36px;top:-14px;width:min(62%,320px);aspect-ratio:900/420;background:var(--lib-accent,var(--accent));opacity:.08;-webkit-mask:url(brand/vessels.svg) no-repeat right top/contain;mask:url(brand/vessels.svg) no-repeat right top/contain;pointer-events:none}
.banner>*{position:relative}
@media (min-width:760px){.banner{margin-top:var(--s-6);padding:var(--s-8) var(--s-8) var(--s-7);border-radius:var(--r-xl)}.banner::before{right:-24px;top:-6px;width:min(44%,470px);opacity:.10}}
.lib-hero .over,.hero .over,.rd-kind{display:inline-flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lib-accent,var(--accent-deep))}
.lib-hero .over::before,.hero .over::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lib-hero h1,.rd-head h1{margin-top:var(--s-3);font-size:clamp(32px,5.2vw,var(--t-display));line-height:1.08;letter-spacing:-.028em;max-width:22ch}
.lib-hero .lede,.rd-head .lede{margin-top:var(--s-4);font-size:var(--t-head);line-height:1.55;color:var(--text-2);max-width:60ch}
.lib-note{margin-top:var(--s-5);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:rgba(255,255,255,.78);box-shadow:var(--ring);border-left:3px solid var(--lib-accent,var(--accent-strong));font-size:var(--t-small);line-height:1.5;color:var(--text);max-width:62ch}
.lib-note i{font-style:normal}
.smallnote{margin-top:var(--s-3);font-size:var(--t-foot);color:var(--text-3)}
.rd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);font-size:var(--t-foot);color:var(--text-3)}
.rd-crumb a{color:var(--text-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--dur-1)}
.rd-crumb a:hover{color:var(--text);text-decoration-color:currentColor}
.rd-crumb span{color:var(--text-3);opacity:.6}
.seg{display:flex;width:max-content;max-width:100%;gap:2px;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);box-shadow:var(--ring);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a,.seg button{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:transparent;font:600 var(--t-small) var(--font);color:var(--text-2);white-space:nowrap;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.seg a:hover,.seg button:hover{color:var(--text)}
.seg a[aria-current=page],.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.14),var(--ring)}
.subnav{margin-top:var(--s-6)}
.rd-head .rd-kind{display:block;line-height:1.5}
@media (max-width:760px){.seg a,.seg button{min-height:44px}}
@media (max-width:600px){.subnav{flex-wrap:wrap;width:auto;border-radius:var(--r-l)}.subnav a{flex:1 1 auto;justify-content:center;border-radius:var(--r-m)}}
.lib-hero .seg{max-width:100%}
.page-hero h1{max-width:24ch}

/* section accents: one per audience, every value at least 4.5 to 1 on white */
.lib-howto,.kit{--lib-accent:var(--k-guide);--lib-soft:var(--k-guide-soft);--lib-tint:#eceffd}
.lib-sops{--lib-accent:var(--k-sop);--lib-soft:var(--k-sop-soft);--lib-tint:#e4f5ed}
.lib-educators{--lib-accent:#8a5a12;--lib-soft:rgba(183,121,31,.13);--lib-tint:#fff0d9}
.lib-search{--lib-accent:var(--accent-deep);--lib-soft:rgba(29,111,208,.10);--lib-tint:#e6f1fd}

/* ---------- layout ---------- */
.sec{margin-top:var(--s-8)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.sec-h h2{font-size:var(--t-title3);letter-spacing:-.02em}
.sec-h .hint{font-size:var(--t-foot);color:var(--text-3)}
@media (min-width:760px){.sec{margin-top:var(--s-9)}.sec-h h2{font-size:var(--t-title2)}.sec-h{margin-bottom:var(--s-5)}}

/* ---------- buttons: primary and secondary ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--ring-2),var(--shadow-1);color:var(--text);font:600 var(--t-small) var(--font);cursor:pointer;white-space:nowrap;transition:background var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1) var(--ease),filter var(--dur-1)}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent-strong);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.12)}
.btn.primary:hover{background:var(--accent-deep)}
.lib .btn.primary{background:var(--lib-accent,var(--accent-strong))}
.lib .btn.primary:hover{background:var(--lib-accent,var(--accent-strong));filter:brightness(.9)}
.btn.quiet{background:var(--surface)}
.btn.quiet:hover{background:var(--surface-2)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.is-off,.btn[aria-disabled=true]{pointer-events:none;background:var(--surface-2);color:var(--text-3);box-shadow:none}
.cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.cta .btn{min-height:48px;padding:0 var(--s-6);font-size:var(--t-body)}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.85);box-shadow:var(--ring);font:500 14px var(--font);color:var(--text-2);cursor:pointer;transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.chip:hover{background:var(--surface);color:var(--lib-accent,var(--accent-deep));box-shadow:var(--ring-2)}

/* ---------- pills: kind (what it is) and status (soon, draft, version) ---------- */
.pill{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--t-caption);font-weight:600;letter-spacing:.01em;white-space:nowrap;background:var(--surface-2);color:var(--text-2)}
.pill.kind{background:var(--lib-soft,var(--accent-soft));color:var(--lib-accent,var(--accent-deep))}
.pill.k-protocol,.pill.k-proto,.pill.k-guide{background:var(--k-guide-soft);color:var(--k-guide)}
.pill.k-sop,.pill.k-checklist,.pill.k-policy{background:var(--k-sop-soft);color:var(--k-sop)}
.pill.k-poster{background:var(--k-poster-soft);color:var(--k-poster)}
.pill.k-app{background:var(--k-app-soft);color:var(--k-app)}
.pill.k-page{background:var(--surface-2);color:var(--text-2)}
.pill.ver,.pill.op{background:var(--surface-2);color:var(--text-2)}
.pill.ops{background:var(--lib-accent,var(--accent-strong));color:#fff}
.pill.soon{background:var(--amber-soft);color:var(--gold)}
.pill.draft{background:var(--amber-soft);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(138,90,18,.25)}

/* ---------- one card ---------- */
.card,.doc,.aud,.op-card,.kit-card,.sr-card,.ed-view,.cu-role,.ask-card,.sections a,.bp-steps li,.share-band,.note,.ct{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--ring),var(--shadow-1)}
a.card,.doc,.aud,.op-card,.ed-view,.sections a{transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
a.card:hover,.doc:hover,.aud:hover,.op-card:hover,.ed-view:hover,.sections a:hover{box-shadow:var(--ring-2),var(--shadow-2);transform:translateY(-2px)}
a.card:focus-visible,.aud:focus-visible,.op-card:focus-visible,.ed-view:focus-visible{outline-offset:2px;border-radius:var(--r-l)}

/* tool cards */
.grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-4)}}
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);min-height:176px;padding:var(--s-5)}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.card .glyph{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);background:var(--lib-soft,var(--accent-soft));color:var(--lib-accent,var(--accent-deep))}
.card .glyph svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.glyph.img{background:none;box-shadow:none;padding:0}.glyph.img img{width:48px;height:48px;border-radius:13px;display:block}
.card h3{font-size:var(--t-head);font-weight:650;letter-spacing:-.01em}
.card p{font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.card .foot{margin-top:auto;display:flex;align-items:center;gap:var(--s-2);padding-top:var(--s-2);font-size:var(--t-small);font-weight:600;color:var(--lib-accent,var(--accent-deep))}
.card .foot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2) var(--ease)}
a.card:hover .foot svg{transform:translateX(3px)}
.card.is-soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.card.is-soon .glyph{background:var(--surface-2);color:var(--text-3)}
.card.is-soon .foot{color:var(--text-3)}
.card.is-soon h3{color:var(--text-2)}
.featured h3{font-size:var(--t-title3)}
.empty{padding:var(--s-5);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3);font-size:var(--t-foot)}

/* loading skeletons and empty states */
.skel-card{min-height:176px;border-radius:var(--r-l);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%) 0 0/300% 100%;box-shadow:var(--ring);animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.doc-empty{grid-column:1/-1;display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-8) var(--s-5);border-radius:var(--r-l);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px var(--line);text-align:center;color:var(--text-3)}
.doc-empty>svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--lib-accent,var(--accent-deep));opacity:.8}
.doc-empty b{font-size:var(--t-head);color:var(--text)}
.doc-empty span{max-width:46ch;font-size:var(--t-small);line-height:1.5}
.doc-empty .btn{margin-top:var(--s-3)}
.doc-empty.is-loading{min-height:220px;align-content:center;background:linear-gradient(100deg,rgba(255,255,255,.7) 30%,var(--surface-2) 50%,rgba(255,255,255,.7) 70%) 0 0/300% 100%;box-shadow:inset 0 0 0 1px var(--line);animation:shimmer 1.4s linear infinite}
.doc-empty.is-loading b{color:var(--text-3);font-weight:500;font-size:var(--t-small)}

/* notes strip */
.notes{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:640px){.notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
.note{position:relative;padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 4px);overflow:hidden}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--n,var(--accent-strong))}
.note b{display:block;font-size:var(--t-small);font-weight:650;color:var(--text)}
.note span{display:block;margin-top:var(--s-1);font-size:14px;line-height:1.5;color:var(--text-2)}
.note.n-blue{--n:var(--accent-strong)}.note.n-green{--n:var(--k-sop)}.note.n-amber{--n:#c76b12}

/* ---------- home: one mark, the title, one sentence, one button and one link ---------- */
.hero{padding:var(--s-8) 0 var(--s-6)}
.hero-big{padding:var(--s-7) var(--s-5) var(--s-6)}
.hero-big.banner::before{width:min(70%,360px);right:-40px;top:-10px;opacity:.09}
@media (min-width:760px){.hero-big.banner::before{width:min(52%,560px);right:-24px;top:8px;opacity:.11}}
.hero-mark{display:block;width:40px;height:40px;margin-bottom:var(--s-5);border-radius:11px;box-shadow:0 6px 16px rgba(16,24,40,.16)}
.hero h1{font-size:clamp(36px,6.6vw,var(--t-hero));line-height:1.04;letter-spacing:-.035em;max-width:13ch}
.hero-big h1{font-size:clamp(32px,6.6vw,38px);max-width:none} /* Learn the angiogram. Run the lab. Share how you do it. */
.hero-big h1 span{display:inline-block}
.hero .lede,.hero p.lede{margin-top:var(--s-4);font-size:var(--t-head);line-height:1.55;color:var(--text-2);max-width:46ch}
.hero .cta{align-items:center;gap:var(--s-1) var(--s-6);margin-top:var(--s-6)}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--t-body);font-weight:600;color:var(--accent-deep)}
.text-link span{transition:transform var(--dur-2) var(--ease)}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.text-link:hover span{transform:translateX(3px)}
@media (min-width:760px){.hero-big{padding:var(--s-9) var(--s-8) var(--s-8)}.hero .cta{margin-top:var(--s-7)}.hero-mark{width:48px;height:48px;border-radius:13px;margin-bottom:var(--s-6)}.hero .lede{font-size:19px}}
/* audience tabs (home): one tab row, one panel in place, the active tab underlined in its audience color (--a, set below) */
.aud-tabs{margin-top:var(--s-7)}
.aud-tablist{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;border-bottom:1px solid var(--line);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
.aud-tablist::-webkit-scrollbar{display:none}
.aud-tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-4);border:0;background:none;border-radius:var(--r-s) var(--r-s) 0 0;font:600 var(--t-body) var(--font);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:color var(--dur-1),background var(--dur-1)}
.aud-tab:hover{color:var(--text);background:rgba(16,24,40,.04)}
.aud-tab i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--text-3);transition:background var(--dur-2),color var(--dur-2)}
.aud-tab svg{width:17px;height:17px}
.aud-tab::after{content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--a);transform:scaleX(0);transition:transform var(--dur-2) var(--ease)}
.aud-tab[aria-selected=true]{color:var(--text)}
.aud-tab[aria-selected=true]::after{transform:none}
.aud-tab[aria-selected=true] i{background:var(--a);color:#fff}
.aud-tab:focus-visible{outline-offset:-2px;border-radius:var(--r-s)}
@media (min-width:760px){.aud-tablist{margin:0;padding:0;gap:var(--s-2)}.aud-tab{padding:0 var(--s-5);font-size:var(--t-head)}}
.aud-panel{padding-top:var(--s-6)}
.aud-panel:focus-visible{outline-offset:6px}
.aud-panel[hidden]{display:none}
.aud-intro{margin-bottom:var(--s-5);font-size:var(--t-head);line-height:1.5;color:var(--text-2);max-width:60ch}
.hub-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:640px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
.hub-card{display:flex;align-items:center;gap:var(--s-4);min-width:0;min-height:84px;padding:var(--s-4) var(--s-5);background:var(--surface);border-radius:var(--r-l);box-shadow:var(--ring),var(--shadow-1);transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
a.hub-card:hover{box-shadow:var(--ring-2),var(--shadow-2);transform:translateY(-2px)}
a.hub-card:focus-visible{outline-offset:2px;border-radius:var(--r-l)}
.hub-card>i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--a-soft,var(--accent-soft));color:var(--a)}
.hub-card>i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hub-card>i.img{background:none}
.hub-card>i.img img{width:40px;height:40px;border-radius:11px;display:block}
.hub-t{display:grid;gap:2px;min-width:0}
.hub-t b{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--t-head);font-weight:650;letter-spacing:-.01em;color:var(--text)}
.hub-t>span{font-size:var(--t-small);line-height:1.45;color:var(--text-2)}
a.hub-card:hover .hub-t b{color:var(--a-text)}
.hub-card.is-soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.hub-card.is-soon>i{background:var(--surface-2);color:var(--text-3)}
.hub-card.is-soon .hub-t b{color:var(--text-2)}
.hub-t .pill{font-style:normal}
/* the apps strip under the audiences: two small links from tools.json */
.apps-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-7);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-5);border-radius:var(--r-l);background:rgba(255,255,255,.6);box-shadow:var(--ring)}
.apps-strip h2{font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.apps-strip .grid{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2)}
.apps-strip .card.app-link{flex-direction:row;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-pill);background:transparent;box-shadow:none;font-size:var(--t-small);font-weight:600;color:var(--text)}
.apps-strip .card.app-link:hover{background:var(--surface-2);box-shadow:none;transform:none}
.app-link img,.app-link svg{width:24px;height:24px;border-radius:7px;flex:none}
.app-link svg{fill:none;stroke:var(--accent-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-link small{font-size:var(--t-caption);font-weight:600;color:var(--text-3)}
.app-none{font-size:var(--t-foot);color:var(--text-3)}
.aud-trainees{--a:var(--accent-strong);--a-text:var(--accent-deep);--a-soft:rgba(29,143,224,.11)}
.aud-operators{--a:var(--k-guide);--a-text:var(--k-guide);--a-soft:var(--k-guide-soft)}
.aud-educators{--a:#8a5a12;--a-text:#8a5a12;--a-soft:rgba(183,121,31,.13)}
.aud-team{--a:var(--k-sop);--a-text:var(--k-sop);--a-soft:var(--k-sop-soft)}
.sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-3);margin-top:var(--s-7)}
.sections a{display:grid;gap:4px;padding:var(--s-4)}
.sections a[aria-disabled=true]{opacity:.55;pointer-events:none}
.sections b{font-size:var(--t-head);letter-spacing:-.01em}
.sections span{font-size:var(--t-foot);color:var(--text-3);line-height:1.4}

/* ---------- library pages (How I do it, SOPs, posters, operator, procedure) ---------- */
.lib-hero{padding-top:var(--s-7)}
.doc-tools{margin-bottom:var(--s-5)}
.doc-tools .doc-search{margin-bottom:0}
.seg-mode{margin-bottom:var(--s-3)}
@media (min-width:760px){.doc-tools{display:flex;align-items:center;gap:var(--s-3)}.doc-tools .seg-mode{flex:none;margin-bottom:0}.doc-tools .doc-search{flex:1}}
.doc-search{position:relative;display:flex;align-items:center;margin-bottom:var(--s-4)}
.doc-search>svg{position:absolute;left:16px;width:18px;height:18px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;pointer-events:none}
.doc-search input{width:100%;min-height:48px;padding:0 48px 0 44px;border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--ring-2),var(--shadow-1);font:400 var(--t-body) var(--font);color:var(--text);-webkit-appearance:none;appearance:none;transition:box-shadow var(--dur-1)}
.doc-search input::placeholder{color:var(--text-3)}
.doc-search input::-webkit-search-cancel-button{display:none}
.doc-search input:focus{outline:none;box-shadow:0 0 0 2px var(--lib-accent,var(--accent-strong)),0 0 0 6px var(--lib-soft,var(--accent-soft))}
.doc-search input:disabled{opacity:.6}
.doc-clear{position:absolute;right:4px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-3);cursor:pointer}
.doc-clear[hidden]{display:none}
.doc-clear:hover{background:var(--surface-2);color:var(--text)}
.doc-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.doc-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:640px){.doc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
@media (min-width:980px){.doc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.doc{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.doc-thumb{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(180deg,var(--lib-soft,var(--surface-2)),rgba(255,255,255,0));overflow:hidden;box-shadow:inset 0 -1px 0 var(--line)}
.doc-thumb img{position:absolute;left:50%;top:var(--s-4);width:78%;height:auto;min-height:120%;object-fit:cover;object-position:top;transform:translateX(-50%);border-radius:6px 6px 0 0;background:#fff;box-shadow:0 6px 20px rgba(16,24,40,.14),0 0 0 1px rgba(16,24,40,.06);transition:transform var(--dur-2) var(--ease)}
a.doc-thumb:hover img{transform:translateX(-50%) translateY(-3px)}
.doc-ph{display:none}
.doc-thumb.is-empty .doc-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--lib-accent,var(--accent-deep))}
.doc-ph svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.doc-body{display:flex;flex-direction:column;gap:var(--s-2);flex:1;padding:var(--s-4) var(--s-5) var(--s-5)}
.doc-tags{display:flex;flex-wrap:wrap;gap:6px}
.doc-tags:empty{display:none}
.doc h3{font-size:var(--t-head);font-weight:650;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.doc h3 .doc-title{color:inherit}
.doc h3 .doc-title:hover{color:var(--lib-accent,var(--accent-deep))}
.doc p{font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.doc-meta{font-size:var(--t-foot);color:var(--text-3)}
.doc-act{display:flex;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3)}
.doc-btn{flex:1;min-height:44px;padding:0 var(--s-3);font-size:var(--t-small)}
.doc-btn svg{width:17px;height:17px}
.lib .doc-btn.is-off{opacity:1;pointer-events:none;background:var(--surface-2);color:var(--text-3);box-shadow:none}
.doc-stack::before,.doc-stack::after{content:"";position:absolute;left:50%;top:calc(var(--s-4) - 8px);width:70%;height:100%;transform:translateX(-50%);border-radius:6px 6px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.06);opacity:.75}
.doc-stack::after{top:calc(var(--s-4) - 4px);width:74%;opacity:.9}
.doc-stack img{z-index:1}
.doc-other{color:var(--lib-accent,var(--accent-deep));font-weight:600}
.doc-other:hover{text-decoration:underline}
/* operators */
.op-grid{grid-template-columns:1fr}
@media (min-width:980px){.op-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.op-card{display:flex;align-items:center;gap:var(--s-4);min-width:0;padding:var(--s-5)}
.op-mono{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lib-soft,var(--accent-soft));color:var(--lib-accent,var(--accent-deep));font-weight:700;font-size:20px;letter-spacing:-.02em;box-shadow:inset 0 0 0 1.5px var(--lib-accent,var(--accent-strong))}
.op-mono.sm{width:40px;height:40px;font-size:16px}
.op-mono.lg{width:72px;height:72px;font-size:28px;background:#fff}
.op-text{display:grid;gap:4px;min-width:0;flex:1}
.op-text b{font-size:var(--t-head);font-weight:650}
.op-line{font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.op-meta{font-size:var(--t-foot);color:var(--text-3)}
.op-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface-2);color:var(--text-2);transition:background var(--dur-2),color var(--dur-2)}
.op-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-card:hover .op-go{background:var(--lib-accent,var(--accent-strong));color:#fff}
.op-invite{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.op-invite .op-mono{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--text-3);font-weight:500}
.op-invite b{color:var(--text-2)}
.op-invite:hover{background:var(--surface)}
.op-hero .rd-crumb{margin-top:0}
.op-id{display:flex;align-items:center;gap:var(--s-4)}
.op-id h1{margin-top:var(--s-2)}
.op-hero .lede{margin-top:var(--s-4)}
.op-hero .op-meta{margin-top:var(--s-2)}
.share-band{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6) var(--s-5);background:linear-gradient(135deg,var(--lib-tint,#eceffd) 0%,#ffffff 100%)}
.share-band h2{font-size:var(--t-title3)}
.share-band p{margin-top:var(--s-2);color:var(--text-2);max-width:60ch;line-height:1.55}
.share-band .btn{align-self:flex-start}
@media (min-width:760px){.share-band{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-7) var(--s-8)}.share-band h2{font-size:var(--t-title2)}.share-band .btn{align-self:center;flex:none}}

/* ---------- search and Ask on search.html ---------- */
.sr-hero .over{margin-top:0}
.sr-box{margin:var(--s-6) 0 0;max-width:640px}
.sr-box input{min-height:56px;font-size:var(--t-head);box-shadow:var(--ring-2),0 8px 24px -8px rgba(16,24,40,.12)}
.sr-start{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4);font-size:var(--t-foot);color:var(--text-3)}
.sr-start[hidden]{display:none}
.sr-layout{display:grid;gap:0}
@media (min-width:1000px){
  .sr-layout:has(>.sr-res:not([hidden])){grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-6);align-items:start}
  .sr-layout:has(>.sr-res:not([hidden])) .ask{position:sticky;top:calc(var(--header-h) + var(--s-4))}
  .sr-layout:has(>.sr-res:not([hidden])) .ask-card{padding:var(--s-5)}
  .sr-layout:has(>.sr-res:not([hidden])) .ask-form{flex-direction:column;align-items:stretch}
  .sr-layout:has(>.sr-res:not([hidden])) .ask-form .btn{align-self:flex-start}
  .sr-layout:has(>.sr-res:not([hidden])) .sr-ask-link{display:none}
}
.sr-head{margin-bottom:var(--s-3)}
.sr-res{margin-top:var(--s-7)}
.sr-res[hidden]{display:none}
.sr-res .sec-h{align-items:center}
.sr-list{display:grid;gap:var(--s-3)}
.sr-card{padding:var(--s-4) var(--s-5);min-width:0}
.sr-top{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.sr-sec{font-size:var(--t-caption);font-weight:600;color:var(--text-3);letter-spacing:.01em}
.sr-card h3{margin-top:var(--s-2);font-size:var(--t-head);font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere}
.sr-card h3 a:hover{color:var(--lib-accent)}
.sr-card p{margin-top:var(--s-1);font-size:var(--t-small);line-height:1.55;color:var(--text-2);overflow-wrap:anywhere;max-width:72ch}
.sr-card mark{background:rgba(29,111,208,.14);color:inherit;border-radius:3px;padding:0 1px}
.sr-parts{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:2px;border-top:1px solid var(--line)}
.sr-parts a{display:block;padding:var(--s-2) var(--s-2) var(--s-2);margin:0 calc(var(--s-2) * -1);border-radius:var(--r-s);transition:background var(--dur-1)}
.sr-parts a:hover{background:var(--surface-2)}
.sr-parts a:hover b{color:var(--lib-accent)}
.sr-parts b{display:block;font-size:var(--t-small);font-weight:600;color:var(--text)}
.sr-parts span{display:block;margin-top:2px;font-size:var(--t-foot);line-height:1.5;color:var(--text-3);overflow-wrap:anywhere;max-width:72ch}
.sr-ask-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-foot);font-weight:600;color:var(--lib-accent)}
.sr-ask-link:hover{text-decoration:underline}
.ask{margin-top:var(--s-7)}
.ask-card{padding:var(--s-5);box-shadow:var(--ring),var(--shadow-2)}
.ask-head{display:flex;gap:var(--s-3);align-items:flex-start}
.ask-head i,.ask-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--lib-soft,var(--accent-soft));color:var(--lib-accent,var(--accent-deep))}
.ask-head i svg,.ask-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ask-head h2{font-size:var(--t-title3)}
.ask-head p{margin-top:2px;font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.ask-form{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4)}
.ask-form textarea{width:100%;min-height:88px;padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-m);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-body)/1.5 var(--font);color:var(--text);resize:vertical;transition:box-shadow var(--dur-1),background var(--dur-1)}
.ask-form textarea::placeholder{color:var(--text-3)}
.ask-form textarea:focus{outline:none;box-shadow:0 0 0 2px var(--lib-accent,var(--accent-strong));background:var(--surface)}
.ask-form .btn{align-self:flex-start;min-width:120px}
.ask-form .btn:disabled{opacity:.55;cursor:default}
.ask-disc{margin-top:var(--s-3);font-size:var(--t-foot);line-height:1.5;color:var(--text-2)}
.ask-priv{margin-top:2px;font-size:var(--t-caption);line-height:1.5;color:var(--text-3)}
.ask-out{margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-m);background:var(--surface-2)}
.ask-out[hidden]{display:none}
.ask-out.is-answer{background:#f3f8fe;box-shadow:inset 0 0 0 1px rgba(29,111,208,.16)}
.ask-out.is-note{background:#fff8ee;box-shadow:inset 0 0 0 1px rgba(199,107,18,.28)}
.ask-text p,.ask-out>p{font-size:var(--t-body);line-height:1.6;color:var(--text)}
.ask-text p + p,.ask-text ul + p,.ask-text p + ul{margin-top:var(--s-2)}
.ask-text ul{margin:var(--s-2) 0 0;padding-left:1.2em}
.ask-text li{margin-top:4px;line-height:1.55}
.cite{display:inline-grid;place-items:center;min-width:20px;height:20px;margin:0 1px;padding:0 5px;border-radius:10px;background:var(--lib-soft,var(--accent-soft));color:var(--lib-accent,var(--accent-deep));font-size:11px;font-weight:700;vertical-align:2px}
.cite:hover{background:var(--lib-accent,var(--accent-strong));color:#fff}
.ask-src{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.ask-src b{font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ask-src ol{margin:var(--s-2) 0 0;padding-left:1.4em;font-size:var(--t-small);line-height:1.5}
.ask-src li{margin-top:6px}
.ask-src a{color:var(--lib-accent,var(--accent-deep));text-decoration:underline;text-decoration-color:rgba(29,111,208,.35);text-underline-offset:2px}
.ask-wait{display:flex;align-items:center;gap:6px;color:var(--text-2)}
.ask-wait .dot{width:7px;height:7px;border-radius:50%;background:var(--lib-accent,var(--accent-strong));animation:askdot 1s infinite ease-in-out}
.ask-wait .dot:nth-child(2){animation-delay:.15s}.ask-wait .dot:nth-child(3){animation-delay:.3s;margin-right:6px}
@keyframes askdot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@media (min-width:720px){.ask-card{padding:var(--s-6) var(--s-7)}.ask-form{flex-direction:row;align-items:flex-end}.ask-form textarea{flex:1}.ask-form .btn{align-self:auto}}

/* ---------- Build your program ---------- */
.bp-steps{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2);counter-reset:bp}
.bp-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s-3);align-items:start;padding:var(--s-4);counter-increment:bp}
.bp-steps li::before{content:counter(bp);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lib-accent,var(--accent-strong));color:#fff;font-weight:700;font-size:var(--t-small)}
.bp-steps li b{display:block;grid-column:2}.bp-steps li span{grid-column:2;color:var(--text-2);font-size:var(--t-foot);line-height:1.5}
.bp-grid{display:grid;gap:var(--s-4)}
.bp-card{padding:var(--s-5);display:grid;align-content:start;gap:var(--s-3);min-height:0}
.bp-head h3{margin:0 0 var(--s-1);font-size:var(--t-title3);letter-spacing:-.015em}.bp-head p{margin:0;color:var(--text-2);font-size:var(--t-small);line-height:1.5}
.bp-list{margin:0;padding:0;list-style:none;display:grid;gap:0}
.bp-list li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-3) 0;box-shadow:0 -1px 0 var(--line)}
.bp-list .bp-title{flex:1 1 240px;color:var(--text);font-weight:600;font-size:var(--t-small);line-height:1.4}.bp-list .bp-title:hover{color:var(--lib-accent,var(--accent-deep))}
.bp-links{display:inline-flex;gap:var(--s-1)}.bp-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font-size:var(--t-foot);font-weight:600;transition:background var(--dur-1),color var(--dur-1)}
.bp-links a:hover{background:var(--surface-3);color:var(--text)}
@media (max-width:760px){.bp-links a{min-height:44px;padding:0 var(--s-4)}}
.bp-foot{margin:0;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}.bp-foot a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.bp-card.is-soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}.bp-card.is-soon .pill{justify-self:start;margin-bottom:var(--s-1)}
.bp-card.is-soon h3{color:var(--text-2)}
@media (min-width:900px){.bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-steps{grid-template-columns:repeat(5,minmax(0,1fr))}.bp-steps li{grid-template-columns:1fr;align-content:start}.bp-steps li::before{margin-bottom:var(--s-1)}.bp-steps li b,.bp-steps li span{grid-column:1}}

/* ---------- contributor kit ---------- */
.kit-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.kit-cta .btn{min-height:48px}
.kit-grid{display:grid;gap:var(--s-3)}
@media (min-width:760px){.kit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
.kit-card{display:grid;align-content:start;gap:var(--s-2);padding:var(--s-5)}
.kit-card b{font-size:var(--t-head);font-weight:650}
.kit-card span{font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.kit-tag{justify-self:start;font-style:normal;font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lib-accent,var(--accent-deep))}
.kit-list{margin:0;padding:0;list-style:none;display:grid;gap:0;border-radius:var(--r-l);overflow:hidden;background:var(--surface);box-shadow:var(--ring),var(--shadow-1);counter-reset:kit}
.kit-list li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--s-3);padding:var(--s-4);counter-increment:kit}
.kit-list li+li{box-shadow:0 -1px 0 var(--line)}
.kit-list li::before{content:counter(kit);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lib-soft,var(--accent-soft));color:var(--lib-accent,var(--accent-deep));font-weight:700;font-size:14px}
.kit-list b{font-weight:600}
.kit-list span{font-size:var(--t-foot);color:var(--text-2);line-height:1.5}
.kit-fine{margin-top:var(--s-3);font-size:var(--t-foot);color:var(--text-3)}
.kit-fine a,.kit-terms a{color:var(--lib-accent,var(--accent-deep));font-weight:600;text-decoration:underline;text-underline-offset:2px}
.kit .bp-steps li{align-content:start}

/* ---------- Educators ---------- */
.lib-educators .card .glyph{background:var(--lib-soft);color:var(--lib-accent)}
.lib-educators .card .foot{color:var(--lib-accent)}
.ed-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:640px){.ed-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
.ed-card{min-height:0}
@media (min-width:900px){.ed-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ed-steps li{align-content:start}
.ed-p{max-width:70ch;color:var(--text-2);line-height:1.6;margin-bottom:var(--s-4)}
.ed-jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5)}
.ed-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--ring);font-size:14px;font-weight:500;color:var(--text-2);transition:color var(--dur-1),box-shadow var(--dur-1)}
.ed-jump a:hover{color:var(--lib-accent);box-shadow:var(--ring-2)}
.ed-sims{display:grid;gap:var(--s-4)}
@media (min-width:900px){.ed-sims{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ed-sim{padding:var(--s-5);gap:var(--s-3);min-width:0;scroll-margin-top:80px}
.ed-sim-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s-2) var(--s-3)}
.ed-sim-head>div{flex:1 1 240px;min-width:0}
.ed-sim-head h3{font-size:var(--t-title3);letter-spacing:-.015em}
.ed-sim-head p{margin-top:var(--s-1);font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.ed-open{font-size:var(--t-foot);line-height:1.5;color:var(--text-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--surface-2)}
.ed-open b{color:var(--text)}
.ed-time{margin:0;padding:0;list-style:none;display:grid;gap:0}
.ed-time li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) 0;box-shadow:0 -1px 0 var(--line)}
.ed-time li:first-child{box-shadow:none;padding-top:var(--s-1)}
.ed-min{font-size:var(--t-caption);font-weight:700;letter-spacing:.02em;color:var(--lib-accent);padding-top:2px;font-variant-numeric:tabular-nums}
.ed-time b{display:block;font-size:var(--t-small);font-weight:600}
.ed-time span:not(.ed-min){display:block;margin-top:2px;font-size:var(--t-foot);line-height:1.5;color:var(--text-2)}
.ed-links{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:auto;padding-top:var(--s-2)}
@media (max-width:420px){.ed-time li{grid-template-columns:1fr;gap:2px}}
.ed-roles{display:grid;gap:var(--s-4);align-items:start}
@media (min-width:960px){.ed-roles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cu-role{min-width:0;padding:var(--s-5) var(--s-4) var(--s-4);position:relative;overflow:hidden}
.cu-role::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cu,#1d8fe0)}
.cu-role.r-general{--cu:var(--accent-strong);--cu-soft:rgba(29,143,224,.10)}.cu-role.r-int{--cu:#c1352b;--cu-soft:rgba(214,69,59,.09)}.cu-role.r-adv{--cu:#5b3fc0;--cu-soft:rgba(111,78,242,.09)}
.cu-head{padding:0 var(--s-1) var(--s-3)}
.cu-head h3{font-size:var(--t-title3);letter-spacing:-.015em}
.cu-head h3 a:hover{color:var(--cu)}
.cu-head p{margin-top:var(--s-1);font-size:var(--t-foot);line-height:1.5;color:var(--text-2)}
.cu-meta{display:inline-block;margin-top:var(--s-2);font-size:var(--t-caption);font-weight:700;color:var(--cu)}
.cu-sec{margin-top:var(--s-3);padding-top:var(--s-3);box-shadow:0 -1px 0 var(--line)}
.cu-sec h4{margin:0;padding:0 var(--s-1);font-size:var(--t-head);font-weight:650;letter-spacing:-.01em}
.cu-sec h4 a:hover{color:var(--cu)}
.cu-sec>p{margin:2px 0 var(--s-2);padding:0 var(--s-1);font-size:var(--t-caption);color:var(--text-3);line-height:1.45}
.cu-units{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.cu-unit{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--s-2);align-items:start;padding:var(--s-2) var(--s-1);border-radius:var(--r-s);transition:background var(--dur-1)}
.cu-unit:hover{background:var(--cu-soft,var(--surface-2))}
.cu-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cu-soft,var(--surface-2));color:var(--cu);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.cu-t b{display:block;font-size:var(--t-small);font-weight:600;line-height:1.3}
.cu-boss{display:block;margin-top:2px;font-size:var(--t-caption);line-height:1.45;color:var(--text-3)}
.cu-boss i{font-style:normal;font-weight:600;color:var(--text-2)}
.cu-steps{padding-top:2px;font-size:var(--t-caption);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.ed-views{display:grid;gap:var(--s-2);grid-template-columns:1fr;margin-bottom:var(--s-4)}
@media (min-width:640px){.ed-views{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}}
@media (min-width:980px){.ed-views{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ed-view{position:relative;display:grid;gap:2px;padding:var(--s-3) calc(var(--s-4) + 24px) var(--s-3) var(--s-4);border-radius:var(--r-m)}
.ed-view b{font-size:var(--t-small);font-weight:600}
.ed-view span{font-size:var(--t-foot);color:var(--text-2);line-height:1.45}
.ed-view svg{position:absolute;right:var(--s-3);top:var(--s-3);width:16px;height:16px;fill:none;stroke:var(--lib-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ed-band{background:linear-gradient(135deg,#fff0d9 0%,#ffffff 100%)}

/* ---------- prose pages (about, feedback, privacy, terms, contributor terms) ---------- */
.prose{max-width:68ch}
.page>.prose,.page>.kit-terms{margin-top:var(--s-7)}
.prose h1{margin-top:var(--s-8);font-size:clamp(28px,5vw,38px);letter-spacing:-.022em}
.prose .lede{margin-top:var(--s-3);font-size:var(--t-head);color:var(--text-2);line-height:1.55}
.prose h2{margin-top:var(--s-7);font-size:var(--t-title3);letter-spacing:-.015em;scroll-margin-top:80px}
.prose>h2:first-child,.prose>.callout:first-child{margin-top:0}
.prose p{margin-top:var(--s-3);color:var(--text-2);line-height:1.65}
.prose p a,.prose li a{color:var(--accent-deep);text-decoration:underline;text-decoration-color:rgba(15,111,184,.35);text-underline-offset:2px}
.prose p a:hover,.prose li a:hover{text-decoration-color:currentColor}
.prose ul{margin:var(--s-3) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.prose li{position:relative;padding-left:var(--s-5);color:var(--text-2);line-height:1.6}
.prose li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--lib-accent,var(--accent-strong))}
.prose .ref{display:grid;gap:var(--s-2);margin-top:var(--s-3);padding:0}
.prose .ref li{padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--ring)}
.prose .ref li::before{display:none}
.prose .ref b{color:var(--text);font-weight:600}
.prose .share-links{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.prose .share-links .btn{min-height:44px}
.prose .share-links .btn.primary,.prose .btn.primary{color:#fff;text-decoration:none}
.prose .btn{text-decoration:none}
.prose h2[id]{scroll-margin-top:80px}
.callout{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--ring),var(--shadow-1);border-left:3px solid var(--lib-accent,var(--accent-strong))}
.callout p{color:var(--text);margin-top:0;line-height:1.6}
.callout p + p{margin-top:var(--s-2)}
.author{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--ring)}
.author .mono{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--accent-deep);font-weight:700;letter-spacing:.02em}
.author b{display:block;font-weight:600}
.author span{display:block;font-size:var(--t-foot);color:var(--text-3)}
.kit-terms h1{margin-top:var(--s-5)}
.counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:var(--s-5) 0 var(--s-6)}
@media (min-width:600px){.counters{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ct{position:relative;display:grid;align-content:start;gap:2px;padding:var(--s-4) var(--s-4) var(--s-4);text-align:left;overflow:hidden}
.ct b{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.ct span{font-size:var(--t-foot);line-height:1.4;color:var(--text-2)}
.ct::before{content:"";width:8px;height:8px;border-radius:50%;margin-bottom:var(--s-2);background:var(--c,var(--accent-strong))}
.ct-blue{--c:var(--accent-strong)}.ct-green{--c:var(--k-sop)}.ct-violet{--c:var(--k-app)}.ct-amber{--c:#c76b12}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin:var(--s-6) 0 var(--s-2)}
@media (min-width:700px){.stats{grid-template-columns:repeat(5,1fr)}}
.stats div{display:grid;gap:2px;padding:var(--s-4);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--ring);text-align:center}
.stats b{font-size:28px;letter-spacing:-.02em;color:var(--text)}
.stats span{font-size:var(--t-foot);color:var(--text-2)}
.tile{position:relative;padding-left:calc(var(--s-4) + 44px) !important;min-height:96px}
.tile i{position:absolute;left:var(--s-4);top:var(--s-4);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--accent-strong)}
.tile i svg{width:20px;height:20px}

/* ---------- footer ---------- */
.foot-bar{margin-top:var(--s-8);background:var(--surface);box-shadow:0 -1px 0 var(--line);color:var(--text-2)}
.foot-in{max-width:var(--max);margin:0 auto;padding:var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom))}
.foot-top{display:grid;gap:var(--s-2)}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-3)}
.foot-brand .brand{font-size:var(--t-small)}
.foot-brand .brand img{width:22px;height:22px;border-radius:6px}
.foot-brand p{font-size:var(--t-foot);color:var(--text-3)}
/* the link groups read as one row of plain links; the group names stay for screen readers */
.foot-cols{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
.foot-col{display:contents}
.foot-col b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.foot-col a[href$="app/#/views"],.foot-col a[href$="contribute/"],.foot-col a[href$="educators/curriculum.html"],.foot-col a[href$="search.html"]{display:none}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--text-2);transition:color var(--dur-1)}
.foot-col a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
.smallprint{margin:var(--s-3) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--t-caption);line-height:1.55;color:var(--text-3);max-width:none}
.smallprint b{font-weight:400;color:inherit}
.smallprint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:759px){.foot-cols{gap:0 var(--s-4)}.foot-col a{font-size:var(--t-foot)}.foot-in{padding-bottom:calc(var(--s-6) + 72px + env(safe-area-inset-bottom))}}
@media (min-width:760px){.foot-col a{min-height:36px}}

/* ---------- floating Ask CathLabHub (assist.js) ---------- */
.ask-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:70;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent-strong);color:#fff;box-shadow:0 10px 28px -6px rgba(20,116,196,.55),0 2px 6px rgba(16,24,40,.18);cursor:pointer;transition:transform var(--dur-2) var(--ease),background var(--dur-1),box-shadow var(--dur-2) var(--ease)}
.ask-fab:hover{background:var(--accent-deep);transform:translateY(-2px)}
.ask-fab:active{transform:scale(.96)}
.ask-fab:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:50%}
.ask-fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ask-fab .x{display:none}
.ask-fab[aria-expanded=true] .x{display:block}.ask-fab[aria-expanded=true] .q{display:none}
.ask-fab-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:6px 10px;border-radius:var(--r-s);background:var(--text);color:#fff;font:600 var(--t-foot) var(--font);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.ask-fab:hover .ask-fab-tip,.ask-fab:focus-visible .ask-fab-tip{opacity:1}
.ask-fab[aria-expanded=true] .ask-fab-tip{display:none}
body:has(.nav.menu.open) .ask-fab,body.menu-open .ask-fab{display:none}
.ask-panel{position:fixed;z-index:69;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 68px);width:min(400px,calc(100vw - 32px));height:min(580px,calc(100vh - var(--header-h) - 110px));height:min(580px,calc(100dvh - var(--header-h) - 110px));display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-3),var(--ring);overflow:hidden;transform-origin:bottom right;animation:panel-in var(--dur-2) var(--ease)}
.ask-panel[hidden]{display:none}
@keyframes panel-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ask-panel-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.ask-tabs{flex:1;display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--surface-2)}
.ask-tabs button{flex:1;min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:transparent;font:600 var(--t-small) var(--font);color:var(--text-2);cursor:pointer;transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.ask-tabs button:hover{color:var(--text)}
.ask-tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.14),var(--ring)}
.ask-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.ask-pane[hidden]{display:none}
.ask-panel-empty h2,.fb-form h2,.fb-done h2{font-size:var(--t-head);font-weight:700;letter-spacing:-.01em}
.ask-lead{margin:2px 0 var(--s-3);font-size:var(--t-foot);line-height:1.5;color:var(--text-2)}
.fb-form{display:grid;gap:var(--s-2)}
.fb-form[hidden]{display:none}
.fb-form h2{margin-bottom:var(--s-1)}
.fb-label{margin-top:var(--s-2);font-size:var(--t-foot);font-weight:600;color:var(--text)}
.fb-label span{font-weight:400;color:var(--text-3)}
.fb-form textarea,.fb-form input{width:100%;padding:12px var(--s-4);border:0;border-radius:var(--r-m);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-body)/1.45 var(--font);color:var(--text);transition:box-shadow var(--dur-1),background var(--dur-1)}
.fb-form textarea{min-height:120px;resize:vertical}
.fb-form input{min-height:48px}
.fb-form textarea:focus,.fb-form input:focus{outline:none;box-shadow:0 0 0 2px var(--accent-strong);background:var(--surface)}
.fb-form ::placeholder{color:var(--text-3)}
.fb-note{font-size:var(--t-caption);line-height:1.5;color:var(--text-3)}
.fb-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.fb-row .btn{min-height:48px;min-width:112px}
.fb-row .btn:disabled{opacity:.55;cursor:default}
.fb-status{flex:1 1 160px;font-size:var(--t-foot);line-height:1.45;color:var(--text-2)}
.fb-status.is-bad{color:#a4400b}
.fb-done{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-7) var(--s-3);text-align:center}
.fb-done[hidden]{display:none}
.fb-done:focus{outline:none}
.fb-done svg{width:44px;height:44px;fill:none;stroke:var(--k-sop);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fb-done p{font-size:var(--t-small);color:var(--text-2);max-width:32ch}
.fb-done .btn{margin-top:var(--s-3)}
.ask-panel-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-2);cursor:pointer}
.ask-panel-x:hover{background:var(--surface-2);color:var(--text)}
.ask-panel-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ask-panel-b{flex:1;overflow:auto;padding:var(--s-4) var(--s-5);overscroll-behavior:contain}
.ask-panel-b .ask-out{margin:0 0 var(--s-4)}
.ask-panel-b .ask-text p,.ask-panel-b .ask-out>p{font-size:var(--t-small)}
.ask-panel-b .ask-src ol{font-size:14px}
.ask-panel-empty{display:grid;gap:var(--s-2)}
.ask-panel-empty b{font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ask-panel-empty button{display:block;width:100%;min-height:44px;padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-m);background:var(--surface-2);text-align:left;font:500 14px/1.4 var(--font);color:var(--text);cursor:pointer;transition:background var(--dur-1)}
.ask-panel-empty button:hover{background:var(--surface-3)}
.ask-turn+.ask-turn{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.ask-you{margin:0 0 var(--s-2) auto;width:fit-content;max-width:88%;padding:var(--s-2) var(--s-3);border-radius:var(--r-m) var(--r-m) 4px var(--r-m);background:var(--accent-strong);color:#fff;font-size:var(--t-small);line-height:1.45;overflow-wrap:anywhere}
.ask-panel-b .ask-turn .ask-out{margin:0}
.ask-alt{margin-top:var(--s-2) !important;font-size:var(--t-foot) !important}
.ask-alt a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ask-panel-f{padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid var(--line);background:var(--surface)}
.ask-panel-f form{display:flex;align-items:flex-end;gap:var(--s-2)}
.ask-panel-f textarea{flex:1;min-height:48px;max-height:140px;padding:12px var(--s-4);border:0;border-radius:var(--r-m);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-body)/1.4 var(--font);color:var(--text);resize:none}
.ask-panel-f textarea::placeholder{color:var(--text-3)}
.ask-panel-f textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent-strong);background:var(--surface)}
.ask-panel-f .btn{min-height:48px;padding:0 var(--s-5)}
.ask-panel-f .btn:disabled{opacity:.55;cursor:default}
.ask-panel-f .ask-disc{margin-top:var(--s-2);font-size:var(--t-caption)}
@media (max-width:600px){
  .ask-panel{left:8px;right:8px;width:auto;bottom:8px;height:min(640px,calc(100vh - var(--header-h) - 16px));height:min(640px,calc(100dvh - var(--header-h) - 16px));border-radius:var(--r-xl);transform-origin:bottom center}
  .ask-panel-open .ask-fab{display:none}
}
@media print{.ask-fab,.ask-panel,.topbar,.foot-bar,.skip{display:none !important}}

/* ---------- motion: only where it helps, nothing with reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  a.hub-card:hover,a.card:hover,.doc:hover,.aud:hover,.op-card:hover,.ed-view:hover,.sections a:hover,.ask-fab:hover{transform:none}
  .skel-card,.doc-empty.is-loading{animation:none}
}

/* ---------- framed previews (images from tools/site_shots.mjs in shots/): a window, a phone, a tilted pair, a hover lift ---------- */
.frame{position:relative;margin:0;transition:transform var(--dur-2) var(--ease)}
.frame img{display:block;width:100%;height:auto}
.frame-window{overflow:hidden;padding-top:24px;border-radius:12px;background:linear-gradient(#f4f5f8,#eceef2) top/100% 24px no-repeat,#fff;box-shadow:0 28px 56px -22px rgba(16,24,40,.38),0 0 0 1px rgba(16,24,40,.10)}
.frame-window::before{content:"";position:absolute;left:11px;top:8px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:13px 0 0 #febc2e,26px 0 0 #28c840}
.frame-window.dark{background:linear-gradient(#232831,#1b2028) top/100% 24px no-repeat,#0b0e13}
.frame-phone{padding:6px;border-radius:34px;background:#11161d;box-shadow:0 26px 50px -18px rgba(16,24,40,.5),inset 0 0 0 1px rgba(255,255,255,.10)}
.frame-phone img{border-radius:28px}
.frame:hover{transform:translateY(-4px)}
.shot-pair{position:relative;padding-bottom:6%}
.shot-pair .frame-window{width:86%;transform:rotate(-1.2deg)}
.shot-pair .frame-phone{position:absolute;right:0;bottom:0;width:29%;transform:rotate(2.5deg)}
.shot-pair .frame-window:hover{transform:rotate(-1.2deg) translateY(-4px)}
.shot-pair .frame-phone:hover{transform:rotate(2.5deg) translateY(-6px)}
.shot-cap{margin-top:var(--s-3);font-size:var(--t-foot);line-height:1.45;color:var(--text-3)}
/* home hero: the words on the left, the app on the right; the vessel tree stays as a background tint */
.hero-big .shot-pair{margin-top:var(--s-7)}
@media (min-width:980px){
  .hero-big.has-shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:var(--s-8);align-items:center}
  .hero-big.has-shots>*{grid-column:1}
  .hero-big.has-shots>.shot-pair{grid-column:2;grid-row:1 / span 4;margin:0}
  .hero-big.has-shots h1{font-size:clamp(34px,3vw,40px)} /* three sentences, one per line beside the shots */
}
/* section pages: one framed shot in the hero, at the right on wide screens */
.hero-shot{margin-top:var(--s-6);max-width:520px}
@media (min-width:1100px){
  .lib-hero.has-shot{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:var(--s-8);align-items:start}
  .lib-hero.has-shot>*{grid-column:1}
  .lib-hero.has-shot>.hero-shot{grid-column:2;grid-row:1 / span 12;align-self:center;margin:0;max-width:none}
}
.hero-shot.frame-phone{max-width:220px}
.hero-shot.shot-pair{max-width:560px}
/* About: a row of framed shots */
.shot-row{display:grid;gap:var(--s-7) var(--s-6);grid-template-columns:1fr;align-items:end;margin:var(--s-5) 0 var(--s-6)}
@media (min-width:700px){.shot-row{grid-template-columns:1.3fr .7fr 1.3fr}}
.shot-row figure{margin:0}
.shot-row .frame-phone{max-width:200px;margin:0 auto}
.shot-row figcaption{margin-top:var(--s-3);font-size:var(--t-foot);line-height:1.45;color:var(--text-2);text-align:center}
.page>.shot-row-wrap{margin-top:var(--s-7)}
/* home panel cards: an image header where a shot exists, the audience icon on a tint where none does */
.hub-card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;min-height:0}
.hub-media{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--a-soft,var(--accent-soft)),rgba(255,255,255,.4));border-bottom:1px solid var(--line)}
.hub-media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s var(--ease)}
.hub-media.tall img{object-position:center 12%}
a.hub-card:hover .hub-media img{transform:scale(1.03)}
.hub-media>svg{width:44px;height:44px;fill:none;stroke:var(--a);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.hub-card.is-soon .hub-media{background:var(--surface-2)}
.hub-card.is-soon .hub-media>svg{stroke:var(--text-3);opacity:.6}
.hub-body{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5)}
@media (max-width:639px){
  .hub-card{flex-direction:row;align-items:center;gap:var(--s-3);padding:var(--s-3)}
  .hub-media{flex:none;width:104px;aspect-ratio:4/3;border-radius:var(--r-s);border:0;box-shadow:inset 0 0 0 1px var(--line)}
  .hub-media>svg{width:30px;height:30px}
  .hub-body{padding:0}
  .hub-body>i{display:none}
}
@media (prefers-reduced-motion:reduce){.frame:hover,.shot-pair .frame-window:hover,.shot-pair .frame-phone:hover,a.hub-card:hover .hub-media img{transform:none}.shot-pair .frame-window{transform:rotate(-1.2deg)}.shot-pair .frame-phone{transform:rotate(2.5deg)}}
@media (max-width:759px){.hero-shot{max-width:300px;margin-left:auto;margin-right:auto}.hero-shot.shot-pair{max-width:340px}.hero-shot.frame-phone{max-width:180px}}

/* popup viewer for preview images (owner, 2026-10-24: previews open in place, never on a bare image page) */
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:96vh;overflow:visible}
.lb::backdrop{background:rgba(10,14,22,.82)}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb img{display:block;max-width:min(96vw,1400px);max-height:84vh;width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb figcaption{color:#e5e7eb;font-size:14px}
.lb .lb-x{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#111;font-size:20px;line-height:36px;text-align:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
@media (max-width:759px){.lb .lb-x{top:-10px;right:-6px}}

/* ---------- opening splash (home) ----------
   html.sp gates everything: the splash is drawn and the hero, the audience tabs and the apps strip rise in behind it; nav.js drops
   the class on a repeat visit in the same session (sessionStorage), under reduced motion, and once the splash has faded.
   Timeline: tile 0 to .25 s, C traced .1 to .9 s, dot .7 to .9 s, wordmark .45 to .9 s, hold to 1.2 s, splash out 1.2 to 1.55 s,
   sections rise from 1.2 s at 60 ms steps (.2 s each). Everything is done by 1.55 s; the content is in the page from the start. */
.splash{display:none}
.sp .splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);pointer-events:none;animation:sp-out .35s var(--ease,ease) 1.2s both}
.sp-mark{display:block;width:80px;height:80px;border-radius:19px;box-shadow:0 10px 24px rgba(16,24,40,.18);animation:sp-tile .25s ease-out both}
.sp-tile{fill:#0f1620}
.sp-c{fill:none;stroke:#f5f7fa;stroke-width:20;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:112;animation:sp-draw .8s cubic-bezier(.4,0,.2,1) .1s both}
.sp-dot{fill:#8fd8ff;transform-box:fill-box;transform-origin:center;animation:sp-pop .2s ease-out .7s both}
.sp-word{font:700 26px/1 var(--font);letter-spacing:-.02em;color:var(--text);animation:sp-word .4s ease-out .45s both}
.sp-word b{font-weight:inherit;color:var(--brand)}
.sp .hero,.sp .aud-tabs,.sp .apps-strip{animation:sp-rise .2s ease-out 1.2s both}
.sp .aud-tabs{animation-delay:1.26s}
.sp .apps-strip{animation-delay:1.32s}
@keyframes sp-tile{from{opacity:0}to{opacity:1}}
@keyframes sp-draw{from{stroke-dashoffset:112}to{stroke-dashoffset:0}}
@keyframes sp-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes sp-word{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes sp-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes sp-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:759px){.sp-mark{width:64px;height:64px;border-radius:15px}.sp-word{font-size:22px}}
@media (prefers-reduced-motion:reduce){.sp .splash{display:none}.sp .hero,.sp .aud-tabs,.sp .apps-strip{animation:none}}
/* the wordmark: Lab in brand blue on every page (owner, 2026-10-24) */
.brand b{font-weight:inherit;color:var(--brand)}
/* one quiet note per page in place of the three colored cards (owner, 2026-10-24: landing page standard) */
.page-note{margin:var(--s-6) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line);max-width:72ch;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
/* category headings in the How I do it library */
.cat-h{grid-column:1 / -1;margin:var(--s-4) 0 0;font-size:var(--t-head);font-weight:650;letter-spacing:-.01em;color:var(--text)}
.cat-h:first-child{margin-top:0}