/* ===== Peptide Analysis v3: "Clinical Editorial" ===== */
:root{
  --bg:#edf2f2; --panel:#ffffff; --panel-2:#f5f8f8; --ink:#0d2a33; --ink-2:#4d6670; --ink-3:#86999f;
  --line:rgba(13,42,51,.09); --line-2:rgba(13,42,51,.16);
  --petrol:#0b3c49; --petrol-2:#0f4a59; --side-ink:#d8e6e8; --side-ink-2:#8fb0b6;
  --ocean:#0a84a8; --rasp:#d6336c; --ochre:#b98500;
  --t-ocean:#e1f0f5; --t-rasp:#fbe6ee; --t-ochre:#f6eed6; --t-mint:#e3f2ee;
  --s-approved:#0a84a8; --s-late:#d6336c; --s-pipe:#b98500;
  --good:#0b7a5a; --good-bg:#dff3ea; --warn:#8a5a00; --warn-bg:#f6eed6; --bad:#b4234f; --bad-bg:#fbe6ee;
  --shadow:0 1px 2px rgba(13,42,51,.04), 0 12px 32px -18px rgba(13,42,51,.18);
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono:"Inter", system-ui, sans-serif; --serif:"Inter", system-ui, sans-serif;
  --r:24px; --side:248px; color-scheme:light;
  --surface:var(--panel); --surface-2:var(--panel-2); --surface-3:#e4ecec; --rule:var(--line); --rule-2:var(--line-2); --accent:var(--ocean); --accent-ink:#076f8e; --accent-wash:var(--t-ocean);
  --art-fill:#ffffff;
}
:root[data-theme="dark"]{
  --bg:#0c1517; --panel:#13201f; --panel-2:#182827; --ink:#e7f0ef; --ink-2:#a8bdbe; --ink-3:#6f8a8c;
  --line:rgba(231,240,239,.08); --line-2:rgba(231,240,239,.15);
  --petrol:#081c21; --petrol-2:#0d2a31;
  --ocean:#1f97bf; --rasp:#e2477c; --ochre:#b08200;
  --t-ocean:rgba(31,151,191,.14); --t-rasp:rgba(226,71,124,.14); --t-ochre:rgba(176,130,0,.16); --t-mint:rgba(40,170,130,.13);
  --s-approved:#1f97bf; --s-late:#e2477c; --s-pipe:#b08200;
  --good:#6fd8b0; --good-bg:rgba(40,170,130,.15); --warn:#e6b54a; --warn-bg:rgba(176,130,0,.16); --bad:#f08aab; --bad-bg:rgba(226,71,124,.15);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 36px -20px rgba(0,0,0,.7);
  --surface-3:#1f3231; --accent-ink:#6cc3e0; --art-fill:#203331; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:24px; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"}
a{color:inherit; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ocean); outline-offset:2px; border-radius:8px}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; font-weight:600; letter-spacing:-.01em}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.muted{color:var(--ink-3)} .small{font-size:.85rem}

/* ---------- shell: sidebar + content ---------- */
.shell{display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh}
.side{position:sticky; top:0; height:100vh; background:var(--petrol); color:var(--side-ink); display:flex; flex-direction:column; padding:22px 16px; gap:22px; z-index:30}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-family:var(--display); font-size:1.45rem; letter-spacing:-.01em; line-height:1; padding:4px 8px}
.brand svg rect{fill:#fff} .brand svg path{stroke:var(--petrol)}
.brand small{display:none}
.nav{display:flex; flex-direction:column; gap:2px}
.nav a{display:flex; align-items:center; gap:12px; color:var(--side-ink); text-decoration:none; font-size:.92rem; font-weight:500; padding:10px 12px; border-radius:12px; transition:background .15s, color .15s}
.nav a svg{opacity:.7; flex:0 0 auto}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.on{background:rgba(255,255,255,.1); color:#fff}
.nav a.on svg{opacity:1}
.nav .nav-x{display:flex}
.side .tools{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.side-card{background:rgba(255,255,255,.06); border-radius:16px; padding:14px; font-size:.84rem; color:var(--side-ink-2)}
.side-card b{color:#fff; font-weight:600; display:block; margin-bottom:2px}
.side-card a{color:#fff}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--side-ink); cursor:pointer; font-size:.86rem; font-weight:500; text-decoration:none}
.iconbtn:hover{background:rgba(255,255,255,.06); color:#fff}
.menu-btn{display:none}
.est-btn{display:none}
.content{min-width:0; display:flex; flex-direction:column}
main{flex:1; padding:28px 40px 40px; max-width:1240px; width:100%}
main:focus{outline:none}
.wrap{max-width:none; margin:0; padding:0}
.tabs{display:none}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:sticky; height:auto; flex-direction:row; align-items:center; padding:10px 16px; gap:10px; background:var(--petrol)}
  .brand{font-size:1.25rem; padding:0}
  .side .tools{margin:0 0 0 auto; flex-direction:row}
  .side-card{display:none}
  .menu-btn{display:inline-flex}
  .nav{display:none; position:fixed; left:12px; right:12px; top:64px; background:var(--petrol-2); border-radius:22px; padding:10px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); max-height:calc(100vh - 160px); overflow:auto}
  .side.open .nav{display:flex}
  .nav a{padding:14px; font-size:1rem}
  body.menu-open::before{content:""; position:fixed; inset:0; background:rgba(8,20,24,.45); backdrop-filter:blur(4px); z-index:25}
  main{padding:20px 16px 110px}
  .tabs{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:28; background:var(--petrol); border-radius:20px; padding:6px; box-shadow:0 18px 40px -16px rgba(8,20,24,.55)}
  .tabs a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:14px; color:var(--side-ink-2); text-decoration:none; font-size:.7rem; font-weight:600}
  .tabs a.on{background:rgba(255,255,255,.1); color:#fff}
}

/* ---------- type ---------- */
.page-head{padding:12px 0 22px}
.eyebrow{font-size:.78rem; font-weight:600; color:var(--ocean); margin:0 0 10px; letter-spacing:.02em}
h1{font-family:var(--display); font-weight:400; font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.02; letter-spacing:-.015em; margin:0 0 14px; max-width:18ch}
h1 em{font-style:italic; color:var(--rasp)}
h2{font-family:var(--display); font-weight:400; font-size:1.75rem; line-height:1.1; letter-spacing:-.01em; margin:0 0 4px}
h3{font-size:1rem; font-weight:600; margin:0 0 6px}
.lede{font-size:1.06rem; color:var(--ink-2); max-width:60ch; margin:0}
p, .lede{text-wrap:pretty} h1,h2{text-wrap:balance}

/* ---------- panels ---------- */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .g2,.g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr 1fr} }
.card{background:var(--panel); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); min-width:0; position:relative; border:0}
.card-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:8px 16px; margin-bottom:18px}
.card-sub{color:var(--ink-3); font-size:.86rem; margin:4px 0 0}
.section{margin-top:16px} .section-lg{margin-top:16px} .sec-gap{margin-top:40px}
.link-more{font-size:.86rem; font-weight:600; color:var(--ocean); text-decoration:none; white-space:nowrap}
.link-more:hover{text-decoration:underline}
.section-title{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:0 0 14px}
@media (max-width:560px){ .card{padding:18px; border-radius:20px} h2{font-size:1.5rem} }

/* ---------- home: audience hero ---------- */
.aud{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:stretch}
.aud-main{background:var(--panel); border-radius:28px; padding:36px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.aud-main::after{content:""; position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, var(--t-rasp), transparent 70%)}
.seg{display:inline-flex; background:var(--panel-2); border-radius:14px; padding:4px; gap:2px; margin-bottom:22px; position:relative; z-index:1}
.seg button{border:0; background:transparent; padding:8px 16px; border-radius:10px; font-weight:600; font-size:.86rem; color:var(--ink-2); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(13,42,51,.12)}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--surface-3)}
.aud-main .lede, .aud-main h1{position:relative; z-index:1}
.aud-steps{display:grid; gap:10px; grid-template-rows:repeat(3,1fr)}
.step{display:grid; grid-template-columns:52px 1fr 20px; gap:14px; align-items:center; padding:18px 20px; border-radius:22px; text-decoration:none; color:var(--ink); transition:transform .18s}
.step:hover{transform:translateX(4px)}
.step .si{width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.75); display:grid; place-items:center}
:root[data-theme="dark"] .step .si{background:rgba(255,255,255,.07)}
.step b{display:block; font-size:1.02rem; font-weight:600; margin-bottom:2px}
.step span.d{display:block; color:var(--ink-2); font-size:.86rem; line-height:1.4}
.step .ar{font-size:1.1rem; color:var(--ink-3)}
.step.s1{background:var(--t-ocean)} .step.s1 .si{color:var(--ocean)}
.step.s2{background:var(--t-rasp)} .step.s2 .si{color:var(--rasp)}
.step.s3{background:var(--t-ochre)} .step.s3 .si{color:var(--ochre)}
@media (max-width:980px){ .aud{grid-template-columns:1fr} .aud-main{padding:26px 22px} }

/* key figures */
.figs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:16px}
.fig{background:var(--panel); border-radius:22px; padding:20px 22px; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:block}
.fig .k{font-size:.8rem; color:var(--ink-3); font-weight:500}
.fig .v{font-family:var(--display); font-size:2.8rem; line-height:1; margin:10px 0 6px}
.fig .v.t{font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.35; margin-top:12px}
.fig .d{font-size:.84rem; color:var(--ink-2)}
@media (max-width:820px){ .figs{grid-template-columns:1fr 1fr; gap:12px} .fig .v{font-size:2.2rem} }

/* ranking list */
.rank{display:grid}
.rk-row{display:grid; grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 56px; gap:16px; align-items:center; padding:14px 6px; border-top:1px solid var(--line); text-decoration:none; color:inherit; transition:background .15s}
.rk-row:first-child{border-top:0}
.rk-row:hover{background:var(--panel-2)}
.rk-n{font-family:var(--display); font-size:2rem; line-height:1; color:var(--ink-3); text-align:center}
.rk-row:first-child .rk-n{color:var(--rasp)}
.rk-name b{display:block; font-weight:600; font-size:.98rem; line-height:1.25}
.rk-name small{color:var(--ink-3); font-size:.8rem}
.meter .lbl{display:flex; justify-content:space-between; font-size:.76rem; color:var(--ink-3); margin-bottom:5px}
.meter .lbl b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.meter .bar{height:6px; border-radius:6px; background:var(--panel-2); overflow:hidden}
:root[data-theme="dark"] .meter .bar{background:var(--surface-3)}
.meter .bar i{display:block; height:100%; border-radius:6px}
.meter.wl i{background:var(--ocean)} .meter.bd i{background:var(--rasp)}
.rk-score{font-family:var(--display); font-size:2rem; line-height:1; text-align:right}
.rk-row.out{opacity:.55}
.rk-row.out .rk-score{font-family:var(--sans); font-size:.9rem; color:var(--ink-3)}
@media (max-width:820px){
  .rk-row{grid-template-columns:34px minmax(0,1fr) 46px; gap:4px 12px; padding:14px 2px}
  .rk-n{font-size:1.6rem; grid-row:span 2} .rk-score{grid-row:span 2; font-size:1.7rem}
  .rk-row .meter{grid-column:2}
  .rk-row .meter.bd{display:none}
}

/* status badges */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap}
.badge i{width:6px; height:6px; border-radius:50%}
.b-approved{background:var(--t-ocean); color:var(--ink)} .b-approved i{background:var(--s-approved)}
.b-late{background:var(--t-rasp); color:var(--ink)} .b-late i{background:var(--s-late)}
.b-pipe{background:var(--t-ochre); color:var(--ink)} .b-pipe i{background:var(--s-pipe)}
.b-plain{background:var(--panel-2); color:var(--ink-2)}
.b-good{background:var(--good-bg); color:var(--good)} .b-warn{background:var(--warn-bg); color:var(--warn)} .b-bad{background:var(--bad-bg); color:var(--bad)}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.8rem; color:var(--ink-3); margin-top:14px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:8px; height:8px; border-radius:50%; display:inline-block}
.legend .ln{width:18px; height:0; border-top:1.5px dashed var(--ink-3); border-radius:0}

/* leaderboard (methodology slider) */
.lb{display:grid; gap:2px}
.lb-row{display:grid; grid-template-columns:minmax(120px,210px) 1fr 50px; gap:14px; align-items:center; padding:8px 6px; border-radius:12px; text-decoration:none; color:inherit}
.lb-row:hover{background:var(--panel-2)}
.lb-name{display:grid; grid-template-columns:8px auto 1fr; column-gap:8px; align-items:baseline; font-weight:600; font-size:.9rem; line-height:1.25}
.lb-name small{grid-column:3; font-weight:400; color:var(--ink-3); font-size:.76rem}
.lb-row.out .lb-name{grid-template-columns:8px 1fr} .lb-row.out .lb-name small{grid-column:2}
.sdot{width:8px; height:8px; border-radius:50%; align-self:center}
.rkn{color:var(--ink-3); font-size:.8rem}
.lb-track{height:8px; background:var(--panel-2); border-radius:8px; overflow:hidden}
:root[data-theme="dark"] .lb-track{background:var(--surface-3)}
.lb-fill{height:100%; border-radius:8px; background:var(--ocean); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.lb-val{text-align:right; font-family:var(--display); font-size:1.4rem}
.lb-row.out{opacity:.55} .lb-row.out .lb-fill{background:repeating-linear-gradient(135deg,var(--ink-3) 0 3px,transparent 3px 6px)}
@media (max-width:560px){ .lb-row{grid-template-columns:minmax(0,1.4fr) minmax(50px,1fr) 34px; gap:10px} .lb-name small{display:none} }

/* scatter */
.chart{position:relative; width:100%}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.axis text{fill:var(--ink-3); font-size:11px; font-family:var(--sans)}
.grid-l{stroke:var(--line); stroke-width:1}
.axis-title{fill:var(--ink-3); font-size:11.5px; font-weight:500; font-family:var(--sans)}
.pt{cursor:pointer}
.pt .m{stroke:var(--panel); stroke-width:3}
.pt text{fill:var(--ink); font-size:12px; font-weight:600; font-family:var(--sans); paint-order:stroke; stroke:var(--panel); stroke-width:4px; stroke-linejoin:round}
.pt:hover .m, .pt:focus .m{stroke:var(--ink)}
.pareto{fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:3 5}
.quad{fill:var(--t-mint)}
.quad-l{fill:var(--good); font-size:11px; font-weight:600; font-family:var(--sans)}
.tip{position:absolute; pointer-events:none; z-index:5; background:var(--petrol); color:#fff; border-radius:14px; padding:10px 12px; font-size:.82rem; min-width:160px; box-shadow:0 18px 36px -12px rgba(8,20,24,.5); transform:translate(-50%, calc(-100% - 14px)); opacity:0; transition:opacity .12s}
.tip.on{opacity:1} .tip b{font-variant-numeric:tabular-nums} .tip .r{display:flex; justify-content:space-between; gap:14px}

/* coming up: horizontal cards */
.hscroll{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px; scrollbar-width:thin}
.ev{flex:0 0 250px; scroll-snap-align:start; background:var(--panel); border-radius:20px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit}
.ev .when{font-family:var(--display); font-size:1.7rem; line-height:1}
.ev .what{font-weight:600; font-size:.95rem; line-height:1.35}
.ev .conf{margin-top:auto; font-size:.78rem; color:var(--ink-3)}

/* timeline (pipeline page) */
.tl{position:relative; padding-left:26px}
.tl::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line-2); border-radius:2px}
.tl-item{position:relative; padding:0 0 18px}
.tl-item::before{content:""; position:absolute; left:-24px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--panel); border:3px solid var(--ocean)}
.tl-when{font-weight:600; font-size:.84rem; display:flex; gap:8px; align-items:center}
.tl-when .badge{font-size:.66rem}
.tl-what{font-weight:500; margin-top:2px}
.feed li{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-2)}
.feed li:first-child{border-top:0}
.feed time{color:var(--ink-3); font-size:.8rem; font-variant-numeric:tabular-nums; padding-top:2px}
.feed a{text-decoration:none} .feed a:hover{text-decoration:underline}
.feed .badge{font-size:.66rem; margin-right:4px}
@media (max-width:560px){ .feed li{grid-template-columns:1fr; gap:2px} }

/* research: editorial list */
.post-list{display:grid; gap:12px}
.post-card{display:grid !important; grid-template-columns:200px 1fr; gap:22px; align-items:center; background:var(--panel); border-radius:24px; padding:14px; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:transform .18s}
.post-card:hover{transform:translateY(-2px)}
.post-card .band{background:var(--panel-2); border-radius:18px; padding:10px 14px}
.post-card .band svg{display:block; width:100%; height:auto}
.post-card .body{padding:6px 10px 6px 0}
.post-card h3{font-family:var(--display); font-weight:400; font-size:1.55rem; line-height:1.12; margin:8px 0 6px}
.post-card p{margin:0 0 8px; color:var(--ink-2); font-size:.9rem}
@media (max-width:700px){ .post-card{grid-template-columns:1fr; gap:10px} .post-card .body{padding:0 6px 6px} .post-card h3{font-size:1.35rem} }

/* tables */
.tbl-wrap{overflow-x:auto; background:var(--panel); border-radius:var(--r); box-shadow:var(--shadow)}
table.t{border-collapse:separate; border-spacing:0; width:100%; font-size:.88rem; min-width:860px}
.t th, .t td{padding:14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap}
.t thead th{font-size:.74rem; font-weight:600; color:var(--ink-3); background:var(--panel); position:sticky; top:0}
.t thead th button{all:unset; cursor:pointer; display:inline-flex; gap:4px; align-items:center}
.t thead th button:hover{color:var(--ink)}
.t thead th[aria-sort="ascending"] button::after{content:"\2191"} .t thead th[aria-sort="descending"] button::after{content:"\2193"}
.t tbody tr:hover td{background:var(--panel-2)}
.t tbody tr:last-child td{border-bottom:0}
.t td.r, .t th.r{text-align:right}
.t td.wr{white-space:normal; color:var(--ink-2); line-height:1.35}
.t .nm a{font-weight:600; text-decoration:none}
.t .nm a:hover{color:var(--ocean)}
.t .nm small{display:block; color:var(--ink-3); font-size:.78rem}
.t td:first-child, .t th:first-child{position:sticky; left:0; background:var(--panel); z-index:1}
.t tbody tr:hover td:first-child{background:var(--panel-2)}
#db{table-layout:fixed; min-width:980px}
#db td{white-space:normal}
.na{color:var(--ink-3)}
.minibar{display:none}

/* filters */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 16px}
.search{flex:1 1 220px; max-width:340px; height:44px; border:0; border-radius:14px; background:var(--panel); box-shadow:var(--shadow); padding:0 16px; font:inherit; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{height:40px; border:0; background:var(--panel); box-shadow:var(--shadow); color:var(--ink-2); padding:0 16px; border-radius:12px; cursor:pointer; font-size:.86rem; font-weight:600}
.chip[aria-pressed="true"]{background:var(--petrol); color:#fff}
select{height:44px; border:0; border-radius:14px; background-color:var(--panel); box-shadow:var(--shadow); padding:0 40px 0 14px; font:inherit; color:var(--ink); appearance:none; -webkit-appearance:none; max-width:100%; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386999f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
.cmp-pick{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px}

/* slider */
.knob{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--panel-2); border-radius:16px; padding:12px 16px; margin:4px 0 14px}
.knob label{font-weight:600; font-size:.86rem}
.knob input[type=range]{flex:1 1 180px; accent-color:var(--rasp)}
.knob output{font-weight:700; font-variant-numeric:tabular-nums}
.formula{font-family:ui-monospace, Menlo, Consolas, monospace; white-space:pre; background:var(--panel-2); border-radius:16px; padding:16px 18px; font-size:.8rem; line-height:1.8; overflow-x:auto; color:var(--ink-2)}
.formula b{color:var(--ink); background:var(--t-ocean); padding:1px 5px; border-radius:6px}

/* compound page */
.c-head{background:var(--panel); border-radius:28px; padding:30px; box-shadow:var(--shadow); margin-bottom:16px; position:relative; overflow:hidden}
.c-head::after{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, var(--t-ocean), transparent 70%)}
.c-head .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; position:relative; z-index:1}
.c-head h1, .c-head .lede{position:relative; z-index:1}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:22px; position:relative; z-index:1}
.kpi{background:var(--panel-2); border-radius:18px; padding:14px 16px}
.kpi .k{font-size:.78rem; color:var(--ink-3)} .kpi .v{font-family:var(--display); font-size:2.2rem; line-height:1.05; margin-top:6px}
@media (max-width:820px){ .kpis{grid-template-columns:1fr 1fr} .c-head{padding:22px} }
.hero-c{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; align-items:start}
.hero-c .col{display:grid; gap:16px; min-width:0}
@media (max-width:980px){ .hero-c{grid-template-columns:1fr} }
.score-ring{display:flex; align-items:center; gap:16px}
.score-ring .big{font-family:var(--display); font-size:3.4rem; line-height:1}
dl.facts{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0; font-size:.9rem}
dl.facts dt{color:var(--ink-3)} dl.facts dd{margin:0; font-weight:600}
.metric-rows{display:grid; gap:14px}
.mr{display:grid; grid-template-columns:150px 1fr 64px; gap:12px; align-items:center; font-size:.88rem; color:var(--ink-2)}
.mr .track{height:8px; background:var(--panel-2); border-radius:8px; position:relative}
:root[data-theme="dark"] .mr .track{background:var(--surface-3)}
.mr .fill{position:absolute; inset:0 auto 0 0; border-radius:8px}
.mr .avg{position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:2px; background:var(--ink)}
.mr .num{color:var(--ink); text-align:right}
@media (max-width:560px){ .mr{grid-template-columns:104px 1fr 54px} }
ul.clean{list-style:none; padding:0; margin:0}
ul.notes li{padding:11px 0; border-top:1px solid var(--line); font-size:.92rem; color:var(--ink-2)}
ul.notes li:first-child{border-top:0}
.src li{font-size:.86rem; padding:5px 0}

/* compare */
.cmp-table{width:100%; border-collapse:collapse; font-size:.9rem}
.cmp-table th, .cmp-table td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.cmp-table thead th{font-family:var(--display); font-weight:400; font-size:1.4rem}
.cmp-table thead th a{text-decoration:none}
.cmp-table tbody th{color:var(--ink-3); font-weight:500; width:24%}
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td{border-bottom:0}
.best{background:var(--good-bg); color:var(--good); font-weight:700; border-radius:8px; padding:2px 8px}

/* peptides */
.pcard h3{font-family:var(--display); font-weight:400; font-size:1.5rem; margin:0}
.pcard .meta{font-size:.82rem; color:var(--ink-3); margin:2px 0 10px}
.pcard p{margin:0 0 12px; font-size:.9rem; color:var(--ink-2)}
.pcard dl{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:.82rem; margin:0; padding-top:10px; border-top:1px solid var(--line)}
.pcard dt{color:var(--ink-3)} .pcard dd{margin:0}

/* article */
.article{max-width:740px; margin-inline:auto}
.article .art{background:var(--panel); border-radius:var(--r); padding:22px 30px 12px; margin:18px 0 28px; box-shadow:var(--shadow)}
.article .art svg{display:block; width:100%; height:auto; max-height:230px}
.prose{font-size:1.06rem; line-height:1.78; color:var(--ink-2)}
.prose strong{color:var(--ink); font-weight:600}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:1.9rem; color:var(--ink); margin:1.6em 0 .4em}
.prose h3{font-size:1.1rem; color:var(--ink); margin:1.4em 0 .4em}
.prose .callout{font-size:.98rem; background:var(--t-ocean); border-radius:18px; padding:16px 20px; margin:1.5em 0; color:var(--ink)}
.prose .fine{font-size:.84rem; color:var(--ink-3)}
.prose .scroll{overflow-x:auto; margin:1.4em 0 .6em; border-radius:18px; background:var(--panel); box-shadow:var(--shadow)}
table.cmp{border-collapse:collapse; width:100%; min-width:520px; font-size:.9rem; line-height:1.45}
.cmp th, .cmp td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.cmp thead th{color:var(--ink)} .cmp tbody th{color:var(--ink-3); font-weight:500; width:30%} .cmp td{color:var(--ink)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px}

/* estimator */
.est{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:720px){ .est{grid-template-columns:1fr} }
.field{display:flex; gap:8px}
.est input, .est select{font:inherit; font-size:1rem; height:48px; padding:0 16px; border:0; border-radius:14px; background-color:var(--panel-2); box-shadow:none; color:var(--ink); width:100%}
.est .seg{margin:0; flex:0 0 auto}
.est .out{display:flex; flex-direction:column; justify-content:center; background:var(--t-ocean); border-radius:20px; padding:24px}
.est .out .n{font-family:var(--display); font-size:clamp(3rem,8vw,4.4rem); line-height:1}

/* brief */
.cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:var(--petrol); color:#fff; border-radius:28px; padding:30px}
.cta h2{color:#fff} .cta p{margin:4px 0 0; color:var(--side-ink-2); font-size:.92rem}
.cta a{background:#fff; color:var(--petrol); padding:12px 20px; border-radius:14px; font-weight:600; text-decoration:none}

footer{padding:24px 40px 40px; color:var(--ink-3); font-size:.84rem; max-width:1240px}
footer .cols{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:22px}
footer p{max-width:70ch; margin:0 0 8px}
footer a{color:var(--ink-2); text-decoration:none}
@media (max-width:980px){ footer{padding:12px 16px 120px} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }
@media (max-width:980px){ .tlabel{display:none} .side .iconbtn{border-color:rgba(255,255,255,.18); color:#fff} }
.post-list{grid-template-columns:1fr !important}
.rk-name small{display:block}
.meter .lbl{white-space:nowrap}
.ev .badge{align-self:flex-start}
.meter, .meter .lbl, .meter .bar, .rk-name{display:block} .meter .lbl{display:flex}

/* ===== v3 critic round 1 ===== */
@media (min-width:821px){ .rk-row{grid-template-columns:48px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 72px; gap:24px; padding:16px 10px} }
@media (max-width:820px){ .rk-row .meter.wl{grid-column:2; grid-row:2} .rk-row .rk-name{grid-column:2; grid-row:1} .rk-n{grid-column:1; grid-row:1 / span 2} .rk-score{grid-column:3; grid-row:1 / span 2; align-self:center} }
.rk-row.out .rk-score{font-size:.78rem; line-height:1.2}
.btn-soft{display:inline-flex; align-items:center; gap:8px; background:var(--t-ocean); color:var(--petrol); border:0; font-weight:600; height:40px; border-radius:12px; padding:0 16px; text-decoration:none}
:root[data-theme="dark"] .btn-soft{color:var(--ink)}
.btn-soft:hover{filter:brightness(.97)}
.article .art{background:var(--panel-2); box-shadow:none}
.chart-card{display:flex; flex-direction:column} .chart-card .chart{flex:1; display:flex; align-items:center}
@media (min-width:981px){ .hscroll{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); overflow:visible} .ev{flex:none} }
@media (max-width:980px){ .hscroll{margin:0 -16px; padding:2px 16px 10px; scroll-padding:16px} }
.card h3{font-family:var(--display); font-size:1.45rem; font-weight:400; margin-bottom:10px}
.cmp-table thead th .small{font-family:var(--sans); font-size:.78rem}
h1{font-size:clamp(2.4rem,4.2vw,3.4rem)}
.aud-main h1, .c-head h1{font-size:clamp(2.5rem,5vw,4rem)}
.aud-main::after{width:160px; height:160px; right:-40px; bottom:-40px; opacity:.7}
:root[data-theme="dark"] .aud-main::after{opacity:.35}
:root[data-theme="dark"]{--t-ocean:rgba(31,151,191,.10); --t-rasp:rgba(226,71,124,.08); --t-ochre:rgba(176,130,0,.08)}
@media (max-width:980px){ .sec-gap{margin-top:32px} .cta{padding:24px} footer{padding-bottom:110px} }

/* ===== v4 palette: Ink, Paper & Lime ===== */
:root{
  --bg:#f3f3ee; --panel:#ffffff; --panel-2:#f6f6f2; --ink:#111111; --ink-2:#55554f; --ink-3:#8b8b84;
  --line:rgba(17,17,17,.09); --line-2:rgba(17,17,17,.16);
  --petrol:#ffffff; --petrol-2:#ffffff; --side-ink:#3a3a36; --side-ink-2:#8b8b84;
  --lime:#c8f04a; --ultra:#3d4ef5; --amber:#d98a00; --teal:#0a9e96;
  --ocean:#3d4ef5; --rasp:#3d4ef5; --ochre:#d98a00;
  --t-ocean:#eceefe; --t-rasp:#f1f8d8; --t-ochre:#fbf1dc; --t-mint:#eef8e0;
  --s-approved:#3d4ef5; --s-late:#d98a00; --s-pipe:#0a9e96;
  --good:#1d7a3a; --good-bg:#e6f6d2; --accent-ink:#3d4ef5;
  --shadow:0 1px 2px rgba(17,17,17,.04), 0 10px 28px -18px rgba(17,17,17,.16);
}
:root[data-theme="dark"]{
  --bg:#0e0e0e; --panel:#171717; --panel-2:#1e1e1e; --ink:#f2f2ee; --ink-2:#b5b5ad; --ink-3:#7c7c75;
  --line:rgba(242,242,238,.08); --line-2:rgba(242,242,238,.15);
  --petrol:#121212; --petrol-2:#1a1a1a; --side-ink:#d6d6d0; --side-ink-2:#8b8b84;
  --ultra:#5b68ff; --amber:#c98000; --teal:#0f9c93; --ocean:#5b68ff; --rasp:#5b68ff; --ochre:#c98000;
  --t-ocean:rgba(91,104,255,.12); --t-rasp:rgba(200,240,74,.10); --t-ochre:rgba(201,128,0,.12); --t-mint:rgba(200,240,74,.08);
  --s-approved:#5b68ff; --s-late:#c98000; --s-pipe:#0f9c93; --good:#b8e64a; --good-bg:rgba(200,240,74,.12); --accent-ink:#8f99ff; --surface-3:#262626;
}
/* light sidebar */
.side{border-right:1px solid var(--line)}
.brand{color:var(--ink)}
.brand svg rect{fill:var(--ink)} .brand svg path{stroke:var(--lime)} .brand svg circle{fill:var(--lime)}
.nav a{color:var(--ink-2)}
.nav a:hover{background:var(--panel-2); color:var(--ink)}
.nav a.on{background:var(--ink); color:#fff}
:root[data-theme="dark"] .nav a.on{background:var(--lime); color:#111}
.nav a.on svg{color:var(--lime)} :root[data-theme="dark"] .nav a.on svg{color:#111}
.side-card{background:var(--panel-2); color:var(--ink-2)} .side-card b{color:var(--ink)} .side-card a{color:var(--ink)}
.iconbtn{border-color:var(--line-2); color:var(--ink)}
.iconbtn:hover{background:var(--panel-2); color:var(--ink)}
@media (max-width:980px){
  .side{background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-right:0; border-bottom:1px solid var(--line)}
  .side .iconbtn{border-color:var(--line-2); color:var(--ink)}
  .nav{background:var(--panel); border:1px solid var(--line)}
  body.menu-open::before{background:rgba(17,17,17,.25)}
  .tabs{background:var(--ink); }
  .tabs a{color:#a9a9a2} .tabs a.on{background:rgba(255,255,255,.12); color:var(--lime)}
}
/* hero */
.hero2{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:stretch}
.hero2 .main{background:var(--panel); border-radius:28px; padding:40px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.hero2 .main h1{font-size:clamp(2.6rem,5.2vw,4.4rem); max-width:14ch}
.hero2 .main h1 em{font-style:italic; color:var(--ink); background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding:0 .06em}
.hero2 .ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.btn-ink{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px; border-radius:14px; background:var(--ink); color:var(--bg); font-weight:600; text-decoration:none}
.btn-ink:hover{transform:translateY(-1px)}
.btn-line{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px; border-radius:14px; border:1px solid var(--line-2); color:var(--ink); font-weight:600; text-decoration:none; background:transparent}
.leader{background:var(--ink); color:#f2f2ee; border-radius:28px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; text-decoration:none}
:root[data-theme="dark"] .leader{background:#1e1e1e}
.leader .k{font-size:.8rem; color:#a9a9a2}
.leader .big{font-family:var(--display); font-size:6.5rem; line-height:.85; color:var(--lime)}
.leader .nm{font-family:var(--display); font-size:2.2rem; line-height:1.05}
.leader .sub{color:#b8b8b0; font-size:.9rem}
.leader .row{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.1); color:#d8d8d2; font-size:.9rem; text-decoration:none}
.leader .row b{font-weight:600; color:#fff}
@media (max-width:980px){ .hero2{grid-template-columns:1fr} .hero2 .main{padding:26px 22px} .leader .big{font-size:5rem} }
/* misc recolors */
.eyebrow{color:var(--ink-2)}
.link-more{color:var(--ink)} .link-more:hover{text-decoration:underline}
.rk-row:first-child .rk-n{color:var(--ink)}
.rk-row:first-child{background:linear-gradient(90deg, var(--t-rasp), transparent 70%); border-radius:16px}
.meter.wl i{background:var(--ultra)} .meter.bd i{background:var(--amber)}
.chip[aria-pressed="true"], .cmp-pick .chip[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.cta{background:var(--ink); color:#f2f2ee} .cta h2{color:#f2f2ee} .cta p{color:#a9a9a2} .cta a{background:var(--lime); color:#111}
:root[data-theme="dark"] .cta{background:#1e1e1e}
.lb-fill{background:var(--ultra)}
.knob input[type=range]{accent-color:var(--ink)}
.tl-item::before{border-color:var(--ink)}
.est .out{background:var(--t-rasp)}
.btn-soft{background:var(--lime); color:#111}
.quad{fill:var(--t-mint)} .quad-l{fill:#4d6b00} :root[data-theme="dark"] .quad-l{fill:var(--lime)}
.c-head::after{background:radial-gradient(circle, var(--t-rasp), transparent 70%)}
.prose .callout{background:var(--t-rasp)}
.formula b{background:var(--t-rasp)}
:focus-visible{outline-color:var(--ultra)}
.figs .fig:last-child{background:var(--lime); box-shadow:none} .figs .fig:last-child .k, .figs .fig:last-child .v{color:#111}

/* ===== v4 critic fixes ===== */
:root{--t-teal:#e0f4f2}
:root[data-theme="dark"]{--t-teal:rgba(15,156,147,.13)}
:root[data-theme="dark"] .hero2 .main h1 em{color:#111}
:root{--s-late:#0a9e96; --s-pipe:#8b8b84}
:root[data-theme="dark"]{--s-late:#0f9c93; --s-pipe:#7c7c75}
.b-late{background:var(--t-teal); color:var(--ink)} .b-late i{background:var(--s-late)}
.b-pipe{background:var(--panel-2); color:var(--ink-2)} .b-pipe i{background:var(--s-pipe)}
.rk-row:first-child{background:color-mix(in srgb, var(--lime) 16%, transparent); box-shadow:inset 3px 0 0 var(--lime)}
.c-head::after, .aud-main::after{display:none}
.leader{justify-content:space-between}
@media (max-width:980px){ .hero2 .ctas{display:grid; grid-template-columns:1fr 1fr} .hero2 .ctas .primary{grid-column:1/-1; justify-content:center} .hero2 .ctas a{justify-content:center} }
.article .art svg{max-height:220px}
.chart-card .chart{align-items:center}

/* ---------- v5: peptide profiles ---------- */
.ev-ladder{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-top:12px}
.ev-ladder span{display:flex; flex-direction:column; gap:6px; min-width:0}
.ev-ladder i{display:block; height:8px; border-radius:8px; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line)}
.ev-ladder span.on i{background:var(--ultra); box-shadow:none}
.ev-ladder em{font-style:normal; font-size:.72rem; color:var(--ink-3); line-height:1.25}
.ev-ladder span.on em{color:var(--ink)}
.ev-ladder.sm{display:inline-grid; width:90px; gap:3px; margin:0}
.ev-ladder.sm i{height:6px}
.ev-key{margin-top:4px}
.pcard{display:flex !important; flex-direction:column; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease}
.pcard:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.08)}
.pc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.pc-ev{display:flex; align-items:center; gap:10px; margin:0 0 12px; flex-wrap:wrap}
.pcard dl{margin-top:auto}
.pc-more{margin-top:12px; font-size:.84rem; font-weight:600; color:var(--ink)}
.kpi .v.t{font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.35}
ul.fx li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:.95rem}
ul.fx li .badge{flex-shrink:0}
.warn-card{background:var(--warn-bg); box-shadow:none}
.warn-card h2{color:var(--ink)}
.pep-nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-top:22px}
.pep-intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-bottom:16px}
.pep-explain p{color:var(--ink-2); margin:8px 0 0}
.pep-figs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px}
.pep-figs div{background:var(--panel-2); border-radius:16px; padding:12px 14px}
.pep-figs b{display:block; font-family:var(--display); font-weight:400; font-size:2.2rem; line-height:1}
.pep-figs span{font-size:.78rem; color:var(--ink-3)}
.pep-rows{display:grid}
.pep-row{display:grid; grid-template-columns:minmax(0,1fr) 90px 128px; gap:12px; align-items:center; padding:8px 4px; border-top:1px solid var(--line); text-decoration:none; color:inherit; font-size:.88rem}
.pep-row:hover{background:var(--panel-2)}
.pep-row .nm{font-weight:600}
.pep-row .lv{color:var(--ink-3); font-size:.8rem}
.pep-scroll .ev .when{font-size:1.5rem}
@media (max-width:980px){ .pep-intro{grid-template-columns:1fr} }
@media (max-width:560px){ .pep-figs{grid-template-columns:1fr 1fr} .pep-row{grid-template-columns:minmax(0,1fr) 80px} .pep-row .lv{display:none} .ev-ladder em{font-size:.62rem} ul.fx li{flex-direction:column; align-items:flex-start; gap:6px} .pep-nav a{flex:1 1 100%; justify-content:center} }
.pdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle; background:var(--ink-3)}
.pdot.allowed{background:var(--ultra)} .pdot.yes{background:var(--good)} .pdot.no{background:var(--bad)} .pdot.pending{background:var(--amber)}
.legend .pdot{margin-right:4px}
.ast{font-size:.62em; font-weight:700; color:var(--amber); margin-left:2px; vertical-align:super; line-height:0; font-family:var(--sans)}
.small-note{font-size:.8rem; color:var(--ink-2); margin:12px 0 0; padding:10px 14px; background:var(--warn-bg); border-radius:12px; line-height:1.5}
.small-note b{color:var(--ink)}
.small-flag{font-size:.78rem; color:var(--warn); margin-top:4px; font-weight:600}
.small-card{background:var(--warn-bg); box-shadow:none; margin-bottom:16px; font-size:.92rem; color:var(--ink-2)}
.small-card b{color:var(--ink)}
.small-tag{color:var(--warn); font-weight:600}
.hero2 .coverage{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-3)}
.hero2 .coverage b{color:var(--ink); font-weight:600; margin-right:3px}

/* GLP-1 Performance Index page: small-print methodology */
.ix-method{margin:34px 0 0; padding-top:14px; border-top:1px solid var(--line-2); font-size:.8rem; line-height:1.6; color:var(--ink-3); max-width:84ch}
.ix-method h3{font-size:.86rem; margin:0 0 6px; color:var(--ink-2); font-family:var(--sans)}
.ix-method p{margin:0 0 8px} .ix-method b{color:var(--ink-2)}
.ix-method a{color:var(--ink-2)}
/* chart tooltip + focus fix */
.tip{background:var(--ink); color:var(--panel)}
.tip div{color:inherit}
.pt:focus{outline:none}
.pt:focus-visible .m{stroke:var(--ink); stroke-width:3.5}
/* compound figure */
.fig-card{margin-top:18px}
.fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.fig img{width:100%; max-width:560px; height:auto; display:block; border-radius:14px; background:#fff; border:1px solid var(--rule, #e6e6e6)}
.fig figcaption{max-width:560px; margin:0; line-height:1.5}


/* ---------- pipeline map ---------- */
.pm-card{padding:24px 24px 20px}
.pm-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:14px 20px; margin-bottom:18px}
.pm-top h2{font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.05; margin:0}
.pm-ctrl{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.pm-ctrl .seg{margin:0}
.pm-ctrl select{height:40px; border:0; border-radius:12px; background:var(--panel-2); color:var(--ink); padding:0 12px; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer}
.pm-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 18px}
.pm-stat{background:var(--panel-2); border-radius:16px; padding:12px 14px}
.pm-stat b{display:block; font-family:var(--display); font-weight:400; font-size:1.9rem; line-height:1; color:var(--ink)}
.pm-stat span{font-size:.76rem; color:var(--ink-3); font-weight:600}
.pm-grid{display:grid; grid-template-columns:150px repeat(4,minmax(0,1fr)); border-radius:18px; overflow:hidden; background:var(--line)}
.pm-grid > *{background:var(--panel)}
.pm-head{padding:12px 12px 14px; position:relative; background:var(--panel-2) !important}
.pm-head h3{margin:0; font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.02em; color:var(--ink)}
.pm-head small{font-size:.72rem; color:var(--ink-3); font-weight:600}
.pm-head .trk{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sc)}
.pm-head .trk::after{content:""; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left:7px solid var(--sc)}
.pm-corner{background:var(--panel-2) !important; padding:12px; font-size:.72rem; color:var(--ink-3); font-weight:600; display:flex; align-items:flex-end}
.pm-lane{padding:12px; display:flex; flex-direction:column; justify-content:center; gap:4px}
.pm-lane b{font-size:.82rem; line-height:1.25}
.pm-lane .dots{display:flex; gap:3px}
.pm-lane .dots i{width:7px; height:7px; border-radius:50%; background:var(--line-2)}
.pm-lane .dots i.on{background:var(--ocean)}
.pm-cell{padding:10px; display:flex; flex-direction:column; gap:6px; min-height:58px}
.pm-chip{display:flex; align-items:center; gap:8px; text-decoration:none; background:var(--panel-2); border-radius:10px; padding:6px 8px 6px 10px; border-left:3px solid var(--sc); transition:transform .15s, box-shadow .15s, opacity .2s}
a.pm-chip:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.pm-chip .t{display:flex; flex-direction:column; min-width:0; flex:1}
.pm-chip .n{font-size:.8rem; font-weight:600; line-height:1.2; color:var(--ink)}
.pm-chip .co{font-size:.69rem; color:var(--ink-3); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pm-chip .nt{font-size:.66rem; color:var(--ink-2); font-weight:600}
.pm-chip svg{flex:none; color:var(--ink-3)}
.pm-chip.dim{opacity:.22}
.pm-chip.hi{box-shadow:0 0 0 2px var(--sc)}
.pm[data-f="oral"] .pm-chip:not([data-r~="oral"]), .pm[data-f="inj"] .pm-chip:not([data-r~="inj"]){display:none}
.pm-key{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:.76rem; color:var(--ink-3)}
.pm-key span{display:inline-flex; align-items:center; gap:6px}
.pm-key i{width:10px; height:10px; border-radius:3px; background:var(--sc)}
.pm-foot{margin-top:12px; font-size:.76rem; color:var(--ink-3)}
.pm-foot ul{display:inline}
.pm-src{margin-top:10px}
@media (max-width:900px){
  .pm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-grid{display:block; background:transparent; overflow:visible}
  .pm-grid > *{background:transparent}
  .pm-head, .pm-corner{display:none}
  .pm-lane{padding:16px 0 6px; border-top:1px solid var(--line); flex-direction:row; align-items:center; justify-content:space-between}
  .pm-lane:first-of-type{border-top:0}
  .pm-cell{padding:4px 0; min-height:0}
  .pm-cell::before{content:attr(data-stage); font-size:.7rem; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
  .pm-cell.empty{display:none}
}

/* ---------- evidence maps ---------- */
:root{--f1:#2a78d6; --f2:#eb6834; --f3:#1baf7a}
:root[data-theme="dark"]{--f1:#3987e5; --f2:#d95926; --f3:#199e70}
.ev-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:12px}
.ev-tile{display:flex; flex-direction:column; gap:6px; background:var(--panel); box-shadow:var(--shadow); border-radius:18px; padding:16px; text-decoration:none; transition:transform .15s}
.ev-tile:hover{transform:translateY(-2px)}
.ev-tile .k{font-family:var(--display); font-size:1.6rem; line-height:1; color:var(--ink-3)}
.ev-tile b{font-size:.92rem; line-height:1.25}
.ev-tile span{font-size:.78rem; color:var(--ink-3); line-height:1.4}
.ev-tile em{font-style:normal; font-size:.78rem; font-weight:600; color:var(--ocean); margin-top:auto}
@media (max-width:1100px){ .ev-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .ev-tiles{gap:8px} .ev-tile{padding:12px; border-radius:14px} .ev-tile .k{font-size:1.3rem} .ev-tile em{display:none} }
.ev-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.ev-jump button, .ev-jump a{height:38px; border:0; background:var(--panel); box-shadow:var(--shadow); color:var(--ink-2); padding:0 14px; border-radius:12px; cursor:pointer; font-size:.84rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.ev-jump b{font-family:var(--display); font-weight:400; font-size:1rem; color:var(--ink-3)}
.ev-sec{margin-top:16px; scroll-margin-top:16px}
.ev-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px 20px; margin-bottom:16px}
.ev-top h2{font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.05; margin:0}
.ev-num{font-family:var(--display); color:var(--ink-3); margin-right:6px}
.ev-ctrl{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:0 0 14px}
.ev-ctrl .seg{margin:0}
.ev-ctrl label.lbl{font-size:.74rem; font-weight:700; color:var(--ink-3); letter-spacing:.02em; margin-right:-4px}
.ev-ctrl select{height:40px; border:0; border-radius:12px; background:var(--panel-2); color:var(--ink); padding:0 10px; font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; max-width:100%}
.ev-ctrl .seg button{padding:8px 12px; font-size:.82rem}
.ev-reset{border:0; background:transparent; color:var(--ocean); font-weight:600; font-size:.84rem; cursor:pointer; padding:8px}
.ev-plot{position:relative; width:100%}
.ev-plot svg{display:block; width:100%; height:auto; overflow:visible}
.ev-plot .ax{stroke:var(--line-2); stroke-width:1}
.ev-plot .grid{stroke:var(--line); stroke-width:1}
.ev-plot .tick{fill:var(--ink-3); font-size:11px; font-family:var(--sans)}
.ev-plot .axt{fill:var(--ink-2); font-size:12px; font-weight:600; font-family:var(--sans)}
.ev-plot .lab{fill:var(--ink); font-size:11px; font-weight:600; font-family:var(--sans); paint-order:stroke; stroke:var(--panel); stroke-width:3px; stroke-linejoin:round}
.ev-plot .med{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 4; opacity:.7}
.ev-plot .zone{fill:var(--good-bg); opacity:.55}
.ev-plot .zt{fill:var(--good); font-size:11px; font-weight:700; font-family:var(--sans)}
.ev-plot .pt{stroke:var(--panel); stroke-width:2; transition:opacity .15s}
.ev-plot .pt.on{stroke:var(--ink); stroke-width:2.5}
.ev-plot .hit{fill:transparent; cursor:pointer}
.ev-plot.hov .pt:not(.hl){opacity:.35}
.ev-tip{position:absolute; z-index:5; pointer-events:none; background:var(--panel); color:var(--ink); box-shadow:0 8px 28px -8px rgba(0,0,0,.28), 0 0 0 1px var(--line); border-radius:12px; padding:10px 12px; font-size:.78rem; line-height:1.45; max-width:260px; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s}
.ev-tip.show{opacity:1; transform:none}
.ev-tip b{display:block; font-size:.86rem}
.ev-tip .r{display:flex; justify-content:space-between; gap:14px; color:var(--ink-2)}
.ev-tip .r span:last-child{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.ev-tip .m{color:var(--ink-3); font-size:.72rem; margin-top:4px}
.ev-legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.76rem; color:var(--ink-2); margin-top:10px; align-items:center}
.ev-legend span{display:inline-flex; align-items:center; gap:6px}
.ev-legend i{width:10px; height:10px; border-radius:50%; background:var(--c)}
.ev-legend i.dia{border-radius:2px; transform:rotate(45deg) scale(.85)}
.ev-legend i.sq{border-radius:2px}
.ev-legend i.ring{background:transparent; box-shadow:inset 0 0 0 2px var(--c)}
.ev-note{font-size:.76rem; color:var(--ink-3); margin:10px 0 0}
.ev-tbtn{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.ev-tbtn button{height:36px; border:0; border-radius:10px; background:var(--panel-2); color:var(--ink); padding:0 14px; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer}
.ev-tw{overflow-x:auto; margin-top:12px; border-radius:14px; box-shadow:0 0 0 1px var(--line)}
.ev-t{width:100%; border-collapse:collapse; font-size:.78rem; min-width:860px}
.ev-t th{position:sticky; top:0; background:var(--panel-2); text-align:left; font-weight:700; color:var(--ink-2); padding:8px 10px; white-space:nowrap; cursor:pointer; user-select:none}
.ev-t th[aria-sort="ascending"]::after{content:" \2191"} .ev-t th[aria-sort="descending"]::after{content:" \2193"}
.ev-t td{padding:7px 10px; border-top:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums}
.ev-t tr.hl td{background:var(--accent-wash, var(--t-ocean))}
.ev-t td.na{color:var(--ink-3)}
.ev-t .sw{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c); margin-right:6px}
/* arms */
.arms{display:flex; flex-direction:column; gap:2px}
.arm-g{margin-top:10px}
.arm-g h4{margin:0 0 4px; font-size:.74rem; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
.arm{display:grid; grid-template-columns:minmax(150px,230px) minmax(0,1fr) 56px; gap:10px; align-items:center; padding:3px 0; cursor:default}
.arm .nm{font-size:.8rem; font-weight:600; line-height:1.2; min-width:0}
.arm .nm small{display:block; font-weight:500; color:var(--ink-3); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.arm .tr{position:relative; height:14px; background:var(--panel-2); border-radius:4px}
.arm .bar{position:absolute; left:0; top:2px; bottom:2px; border-radius:0 4px 4px 0; background:var(--c)}
.arm .pb{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink-3); border-radius:1px}
.arm .v{font-size:.8rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.arm .v.na{color:var(--ink-3); font-weight:500}
.arm:hover .tr{box-shadow:0 0 0 2px var(--line-2)}
.arm-axis{display:grid; grid-template-columns:minmax(150px,230px) minmax(0,1fr) 56px; gap:10px; font-size:.7rem; color:var(--ink-3)}
.arm-axis div{position:relative; height:16px}
.arm-axis div span{position:absolute; transform:translateX(-50%)}
/* forest */
.fr{display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) 116px; gap:12px; align-items:center; padding:7px 0; border-top:1px solid var(--line)}
.fr:first-child{border-top:0}
.fr .nm{font-size:.82rem; font-weight:600; line-height:1.25}
.fr .nm small{display:block; color:var(--ink-3); font-weight:500; font-size:.7rem}
.fr .hr{font-size:.8rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.fr .hr small{display:block; color:var(--ink-3); font-weight:500; font-size:.7rem}
.fr svg{display:block; width:100%; height:22px; overflow:visible}
.fr-head{display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) 116px; gap:12px; font-size:.7rem; color:var(--ink-3); font-weight:600; padding-bottom:4px}
.fr-head .fv{display:flex; justify-content:space-between}
.ongo{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px}
.ongo div{background:var(--panel-2); border-radius:14px; padding:12px 14px; font-size:.8rem}
.ongo b{display:block; font-size:.86rem}
/* timeline */
.tl-wrap{position:relative}
.tl-list{display:none}
@media (max-width:900px){
  .ongo{grid-template-columns:1fr}
  .fr, .fr-head{grid-template-columns:minmax(110px,1fr) minmax(0,1.4fr) 84px; gap:8px}
  .arm, .arm-axis{grid-template-columns:minmax(110px,150px) minmax(0,1fr) 46px; gap:8px}
}
@media (max-width:640px){
  .fr{grid-template-columns:minmax(0,1fr) 84px; row-gap:2px}
  .fr .nm{grid-column:1/-1}
  .fr-head{grid-template-columns:minmax(0,1fr) 84px}
  .fr-head > span:first-child{display:none}
  .ev-ctrl .seg{max-width:100%; overflow-x:auto; scrollbar-width:none}
  .ev-ctrl .seg button{white-space:nowrap}
  .tl-wrap svg{display:none}
  .tl-list{display:block}
  .tl-y{margin-top:14px}
  .tl-y h4{margin:0 0 6px; font-family:var(--display); font-weight:400; font-size:1.3rem}
  .tl-e{display:grid; grid-template-columns:62px 1fr; gap:8px; padding:6px 0; border-top:1px solid var(--line); font-size:.8rem}
  .tl-e .d{color:var(--ink-3); font-weight:600; font-size:.74rem}
  .tl-e.fut .d::after{content:" (exp.)"}
}

/* ---------- dark theme fixes ---------- */
:root[data-theme="dark"] .brand svg rect{fill:var(--lime)}
:root[data-theme="dark"] .brand svg path{stroke:#111}
:root[data-theme="dark"] .brand svg circle{fill:#111}
:root[data-theme="dark"] h1 em, :root[data-theme="dark"] .hero2 .main h1 em{color:var(--lime); background:linear-gradient(transparent 74%, color-mix(in srgb, var(--lime) 30%, transparent) 74%, color-mix(in srgb, var(--lime) 30%, transparent) 94%, transparent 94%)}
:root[data-theme="dark"] .post-card .band, :root[data-theme="dark"] .article .art{background:#e9e8e1}
:root[data-theme="dark"] .tabs{background:#1c1c1c; box-shadow:0 0 0 1px var(--line-2), 0 18px 40px -16px rgba(0,0,0,.8)}

/* ---------- patent map ---------- */
:root{--pt-gen:#1baf7a; --pt-exp:#eda100; --pt-part:#eb6834; --pt-p1:#86b6ef; --pt-p2:#2a78d6; --pt-p3:#184f95; --pt-none:#e3e2dc; --pt-stroke:#ffffff}
:root[data-theme="dark"]{--pt-gen:#199e70; --pt-exp:#c98500; --pt-part:#d95926; --pt-p1:#5598e7; --pt-p2:#2a78d6; --pt-p3:#1c4f8f; --pt-none:#2b2b29; --pt-stroke:#171717}
.pt-map{position:relative; margin-top:6px}
.pt-map svg{display:block; width:100%; height:auto}
.pt-map path{stroke:var(--pt-stroke); stroke-width:.5; transition:opacity .12s}
.pt-map path.on{cursor:pointer}
.pt-map.hov path:not(.hl){opacity:.55}
.pt-map path.hl{stroke:var(--ink); stroke-width:1.2}
.pt-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:.78rem; color:var(--ink-2)}
.pt-legend span{display:inline-flex; align-items:center; gap:6px}
.pt-legend i{width:12px; height:12px; border-radius:3px; background:var(--c)}
.pt-keys{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:16px}
.pt-key{background:var(--panel-2); border-radius:16px; padding:14px 16px; border-left:4px solid var(--c)}
.pt-key b{display:block; font-size:.92rem}
.pt-key .yr{font-family:var(--display); font-size:1.6rem; line-height:1.1; margin:2px 0 4px}
.pt-key p{margin:0; font-size:.78rem; color:var(--ink-2); line-height:1.45}
.pt-key a{font-size:.72rem; color:var(--ink-3)}
.pt-tl{margin-top:8px}
.pt-row{display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line)}
.pt-row:first-child{border-top:0}
.pt-row .nm{font-size:.84rem; font-weight:600; line-height:1.25}
.pt-row .nm small{display:block; color:var(--ink-3); font-weight:500; font-size:.72rem}
.pt-track{position:relative; height:30px}
.pt-track .ln{position:absolute; left:0; right:0; top:14px; height:2px; background:var(--line-2)}
.pt-dot{position:absolute; top:7px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center}
.pt-dot i{width:16px; height:16px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--panel)}
.pt-dot span{font-size:.66rem; font-weight:600; color:var(--ink-2); white-space:nowrap; margin:2px 0; background:var(--panel); padding:0 4px; border-radius:4px; position:relative; z-index:1}
.pt-dot.al-start{transform:translateX(-8px); align-items:flex-start}
.pt-dot.al-end{transform:translateX(calc(-100% + 8px)); align-items:flex-end}
.pt-track{height:46px} .pt-track .ln{top:22px} .pt-dot{top:15px} .pt-dot.up{top:auto; bottom:16px; flex-direction:column-reverse}
.ev-top > *{min-width:0; max-width:100%}
.pt-list{display:none}
.pt-axis{display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; font-size:.7rem; color:var(--ink-3)}
.pt-axis div{position:relative; height:16px}
.pt-axis div span{position:absolute; transform:translateX(-50%)}
.pt-now{position:absolute; top:-4px; bottom:-4px; width:0; border-left:2px dashed var(--ink-3)}
@media (max-width:640px){ .pt-tl{display:none} .pt-list{display:block} .pt-list h4{margin:14px 0 4px; font-size:.86rem} .pt-list div{display:grid; grid-template-columns:52px 1fr; gap:8px; font-size:.8rem; padding:4px 0; border-top:1px solid var(--line)} .pt-list b{font-family:var(--display); font-weight:400; font-size:1.05rem} .pt-list i{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c); margin-right:6px} }

/* ---------- pricing & access ---------- */
.pr-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px}
.pr-tile{background:var(--panel); box-shadow:var(--shadow); border-radius:18px; padding:16px}
.pr-tile .k{font-size:.74rem; font-weight:600; color:var(--ink-3)}
.pr-tile .v{font-family:var(--display); font-size:2rem; line-height:1.1; margin:4px 0}
.pr-tile .d{font-size:.78rem; color:var(--ink-2); line-height:1.4}
.pr-rows{display:flex; flex-direction:column; gap:4px}
.pr-row{display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.pr-row:first-child{border-top:0}
.pr-row .nm{font-size:.86rem; font-weight:600; line-height:1.25}
.pr-row .nm small{display:block; font-weight:500; color:var(--ink-3); font-size:.72rem}
.pr-tr{position:relative; height:34px}
.pr-tr .base{position:absolute; left:0; right:0; top:16px; height:2px; background:var(--line)}
.pr-tr .cash{position:absolute; top:10px; height:14px; border-radius:7px; background:var(--f2); opacity:.9}
.pr-tr .mk{position:absolute; top:9px; width:16px; height:16px; margin-left:-8px; border-radius:50%; box-shadow:0 0 0 3px var(--panel)}
.pr-tr .mk.list{background:var(--ink)}
.pr-tr .mk.med{background:var(--f3); border-radius:3px; transform:rotate(45deg)}
.pr-tr .mk.ins{background:var(--f1)}
.pr-tr .lb{position:absolute; top:-6px; font-size:.68rem; font-weight:600; color:var(--ink-2); white-space:nowrap; transform:translateX(-50%)}
.pr-tr .lb.below{top:28px}
.pr-axis{display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; font-size:.7rem; color:var(--ink-3); margin-bottom:4px}
.pr-axis div{position:relative; height:16px}
.pr-axis div span{position:absolute; transform:translateX(-50%)}
.pr-chart svg{display:block; width:100%; height:auto; overflow:visible}
.pr-chart .grid{stroke:var(--line)} .pr-chart .tick{fill:var(--ink-3); font-size:11px; font-family:var(--sans)}
.pr-chart .lab{font-size:11.5px; font-weight:600; font-family:var(--sans); fill:var(--ink); paint-order:stroke; stroke:var(--panel); stroke-width:3px}
.pr-chart .now{stroke:var(--ink-3); stroke-dasharray:3 4}
.pr-log{display:flex; flex-direction:column}
.pr-ev{display:grid; grid-template-columns:96px 120px minmax(0,1fr); gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.84rem; align-items:baseline}
.pr-ev:first-child{border-top:0}
.pr-ev .dt{font-weight:600; color:var(--ink-2); font-size:.78rem}
.pr-ev.fut .dt::after{content:" (planned)"; font-weight:500; color:var(--ink-3)}
.pr-ev .tg{font-size:.72rem}
@media (max-width:900px){ .pr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .pr-row, .pr-axis{grid-template-columns:92px minmax(0,1fr); gap:8px} .pr-tr .lb{font-size:.6rem} .pr-ev{grid-template-columns:80px minmax(0,1fr)} .pr-axis span.odd{display:none} .pr-ev .tg{display:none} }

/* ---------- supply & manufacturing ---------- */
.su-chain{display:flex; flex-direction:column; gap:14px}
.su-lane h3{margin:0 0 8px; font-family:var(--sans); font-size:.86rem; font-weight:700}
.su-lane h3 small{font-weight:500; color:var(--ink-3)}
.su-steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; position:relative}
.su-steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.su-step{position:relative; background:var(--panel-2); border-radius:14px; padding:12px 12px 12px 14px; border-top:4px solid var(--c, var(--line-2)); min-height:96px}
.su-step b{display:block; font-size:.86rem}
.su-step span{display:block; font-size:.74rem; color:var(--ink-2); line-height:1.4; margin-top:3px}
.su-step em{display:inline-block; margin-top:6px; font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:999px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--ink)}
.su-step:not(:last-child)::after{content:""; position:absolute; right:-9px; top:50%; width:8px; height:2px; background:var(--line-2)}
.su-bars{display:flex; flex-direction:column; gap:6px}
.su-bar{display:grid; grid-template-columns:230px minmax(0,1fr) 60px; gap:12px; align-items:center}
.su-bar .nm{font-size:.82rem; font-weight:600; line-height:1.25}
.su-bar .nm small{display:block; font-weight:500; color:var(--ink-3); font-size:.71rem}
.su-bar .tr{height:16px; background:var(--panel-2); border-radius:4px; position:relative}
.su-bar .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; background:var(--c)}
.su-bar .v{font-size:.84rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.su-sh{margin-top:4px}
.su-shrow{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line)}
.su-shrow:first-child{border-top:0}
.su-shrow .nm{font-size:.86rem; font-weight:600}
.su-shrow .nm small{display:block; color:var(--ink-3); font-weight:500; font-size:.72rem}
.su-trk{position:relative; height:40px}
.su-trk .base{position:absolute; left:0; right:0; top:12px; height:2px; background:var(--line)}
.su-trk .sh{position:absolute; top:6px; height:14px; border-radius:7px; background:var(--pt-exp)}
.su-trk .cp{position:absolute; top:6px; height:14px; border-radius:0 7px 7px 0; background:repeating-linear-gradient(45deg, var(--pt-exp) 0 4px, transparent 4px 8px); opacity:.8}
.su-trk .ok{position:absolute; top:6px; height:14px; right:0; border-radius:7px; background:var(--pt-gen); opacity:.85}
.su-trk .tx{position:absolute; top:24px; font-size:.68rem; color:var(--ink-2); white-space:nowrap; font-weight:600}
.su-ax{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; font-size:.7rem; color:var(--ink-3)}
.su-ax div{position:relative; height:16px}
.su-ax div span{position:absolute; transform:translateX(-50%)}
.su-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.su-list{margin:8px 0 0; padding:0; list-style:none}
.su-list li{padding:8px 0; border-top:1px solid var(--line); font-size:.84rem; line-height:1.45}
.su-list li:first-child{border-top:0}
.su-list b{font-weight:600}
@media (max-width:900px){ .su-steps, .su-steps.four{grid-template-columns:1fr 1fr} .su-step:not(:last-child)::after{display:none} .su-cols{grid-template-columns:1fr} .su-bar{grid-template-columns:140px minmax(0,1fr) 48px} }
@media (max-width:640px){ .su-shrow, .su-ax{grid-template-columns:86px minmax(0,1fr); gap:8px} .su-trk .tx{display:none} .su-trk{height:26px} }

/* ===== footer + newsletter banner ===== */
footer.ft{padding:56px 40px 40px; max-width:1240px; color:var(--ink-3); font-size:.86rem}
.nl{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:center; background:#111; color:#f2f2ee; border-radius:28px; padding:44px 44px 64px}
:root[data-theme="dark"] .nl{background:#191919; box-shadow:inset 0 0 0 1px var(--line)}
.nl-art{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.nl-eyebrow{display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#111; background:#c8f04a; border-radius:999px; padding:4px 10px; margin-bottom:14px}
.nl h2{font-family:var(--display); font-weight:400; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.08; color:#f2f2ee; margin:0 0 10px; letter-spacing:-.01em}
.nl-copy p{margin:0; color:#b5b5ad; font-size:.95rem; max-width:52ch}
.nl-form{margin:0; justify-self:end; width:100%; max-width:440px}
.nl-row{display:flex; gap:8px; padding:6px; background:rgba(17,17,17,.55); border:1px solid rgba(255,255,255,.16); border-radius:16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.nl-row:focus-within{border-color:#c8f04a}
.nl-row input{flex:1; min-width:0; height:46px; border:0; outline:0; background:transparent; color:#f2f2ee; font:inherit; font-size:.95rem; padding:0 12px}
.nl-row input::placeholder{color:#8b8b84}
.nl-row button{height:46px; padding:0 22px; border:0; border-radius:12px; background:#c8f04a; color:#111; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap}
.nl-row button:hover{filter:brightness(1.05)} .nl-row button:disabled{opacity:.6; cursor:default}
.nl-msg{margin:10px 4px 0; font-size:.8rem; color:#8b8b84}
.nl-msg.ok{color:#c8f04a} .nl-msg.err{color:#ffb4a8}
.nl-sr,.nl-hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ft-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; padding:44px 4px 32px}
.ft-brand b{color:var(--ink); font-family:var(--display); font-weight:400; font-size:1.35rem}
.ft-brand p{margin:8px 0 0; max-width:34ch; line-height:1.55}
.ft-col h4{margin:4px 0 12px; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.ft-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ft-col a{color:var(--ink-2); text-decoration:none}
.ft-col a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.ft-legal{border-top:1px solid var(--line); padding:20px 4px 0}
.ft-legal p{margin:0 0 10px; max-width:90ch; line-height:1.55} .ft-legal p.ft-meta{max-width:none; margin:0}
.ft-meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px}
@media (max-width:980px){
  footer.ft{padding:40px 16px 120px}
  .nl{grid-template-columns:1fr; padding:30px 22px; gap:22px; border-radius:24px}
  .nl-form{justify-self:stretch; max-width:none}
  .nl-art g{display:none}
  .nl{padding-bottom:30px}
  .ft-grid{grid-template-columns:1fr 1fr; gap:28px 20px; padding:32px 2px 24px}
  .ft-brand{grid-column:1 / -1}
}
@media (max-width:420px){ .nl-row{flex-direction:column} .nl-row button{width:100%} }

/* footer purple wash */
footer.ft{max-width:none; position:relative; background:
  radial-gradient(90% 60% at 72% 100%, rgba(123,92,255,.30), transparent 72%),
  radial-gradient(55% 45% at 8% 100%, rgba(61,78,245,.20), transparent 70%),
  linear-gradient(to bottom, transparent 0%, rgba(110,90,250,.07) 55%, rgba(110,90,250,.16) 100%)}
footer.ft > *{max-width:1160px}
:root[data-theme="dark"] footer.ft{background:
  radial-gradient(90% 60% at 72% 100%, rgba(123,92,255,.26), transparent 72%),
  radial-gradient(55% 45% at 8% 100%, rgba(61,78,245,.18), transparent 70%),
  linear-gradient(to bottom, transparent 0%, rgba(110,90,250,.05) 55%, rgba(110,90,250,.12) 100%)}
.nl{background:linear-gradient(115deg,#121230 0%,#1e2170 38%,#3540d8 72%,#7456f2 100%)}
:root[data-theme="dark"] .nl{background:linear-gradient(115deg,#0f0f26 0%,#1a1c5e 38%,#2d37b8 72%,#5f45d6 100%)}
.nl-copy p{color:#c9cbe8} .nl-msg{color:#a9acd6}
.nl-row{background:rgba(10,10,40,.45); border-color:rgba(255,255,255,.22)}
.ft-legal, .ft-brand p{color:var(--ink-2)}

/* sidebar fit on short desktop screens */
@media (min-width:981px){
  .side{overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
  .side .tools{padding-bottom:2px}
}
@media (min-width:981px) and (max-height:940px){
  .side{gap:14px; padding:16px 14px}
  .nav{gap:1px}
  .nav a{padding:7px 12px; font-size:.88rem}
  .side-card{padding:10px 12px; font-size:.78rem; line-height:1.4}
  .side .tools{gap:8px}
}
@media (min-width:981px) and (max-height:800px){
  .side-card{display:none}
  .nav a{padding:6px 12px}
}
:root{--pr-wp:#1baf7a; --pr-fo:#8b5cf6}
:root[data-theme="dark"]{--pr-wp:#22b07d; --pr-fo:#9d7bf5}

/* peptide analysis article */
.pep-story{margin-top:16px; padding:28px 32px}
.pep-story h2{font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.15; margin:2px 0 14px; max-width:28ch}
.pep-story > p{max-width:72ch; line-height:1.7; color:var(--ink-2); margin:0 0 14px}
.pep-story > p.pep-view{color:var(--ink); background:var(--panel-2); border-left:3px solid var(--ultra, var(--ocean)); border-radius:0 12px 12px 0; padding:12px 16px}
.pep-story h3{font-family:var(--sans); font-weight:600; font-size:.9rem; margin:22px 0 8px}
.pep-cites{margin:0; padding-left:20px; font-size:.82rem; line-height:1.5; color:var(--ink-2); max-width:90ch}
.pep-cites li{margin-bottom:6px}
.pep-cites a{color:var(--ink-2)}
@media (max-width:980px){ .pep-story{padding:20px 18px} }

/* peptide evidence index */
.px-plot{margin-top:6px}
.px-plot a{text-decoration:none} .px-plot .px-pt{cursor:pointer} .px-plot .px-pt:hover circle{fill:var(--f2)}
.px-list{display:flex; flex-direction:column}
.px-row{display:grid; grid-template-columns:28px minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr) 52px; gap:16px; align-items:center; padding:12px 8px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
.px-row:first-child{border-top:0}
.px-row:hover{background:var(--panel-2); border-radius:12px}
.px-n{font-family:var(--display); font-size:1.4rem; color:var(--ink-3); text-align:center}
.px-name b{display:block; font-size:.95rem}
.px-name small{display:block; color:var(--ink-3); font-size:.78rem; line-height:1.4; margin-top:2px}
.px-lbl{display:flex; justify-content:space-between; font-size:.74rem; color:var(--ink-3); margin-bottom:5px}
.px-lbl b{color:var(--ink); font-weight:600}
.px-bar{display:block; height:6px; border-radius:6px; background:var(--panel-2); overflow:hidden}
.px-bar i{display:block; height:100%; border-radius:6px}
.px-score{font-family:var(--display); font-size:1.6rem; text-align:right}
.px-method{margin-top:16px; font-size:.84rem; color:var(--ink-2)}
.px-method summary{cursor:pointer; font-weight:600; color:var(--ink)}
.px-method p{max-width:90ch; line-height:1.6}
.px-chip{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:.84rem; color:var(--ink-2); background:var(--panel-2); border-radius:14px; padding:10px 14px; margin:0 0 16px}
.px-chip b{color:var(--ink)}
@media (max-width:820px){
  .px-row{grid-template-columns:24px minmax(0,1fr) 44px; gap:6px 12px}
  .px-row .px-m{grid-column:2}
  .px-score{grid-column:3; grid-row:1 / span 3; align-self:center}
  .px-name small{display:none}
}

/* the reddit index */
.rx{--rd:#ff4500; --rdw:rgba(255,69,0,.12)}
.rx-kicker{display:inline-flex; align-items:center; gap:8px; background:var(--rd); color:#fff; font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:5px 12px 5px 8px}
.rx h2{font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.1; margin:12px 0 6px}
.rx h2 span{color:var(--rd)}
.rx-hd, .rx-row{display:grid; grid-template-columns:64px minmax(0,1.9fr) minmax(0,.8fr) 124px; gap:18px; align-items:center}
.rx-hd{padding:18px 10px 8px; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line-2)}
.rx-row{padding:12px 10px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
.rx-list .rx-row:first-child{border-top:0}
.rx-row:hover{background:var(--panel-2); border-radius:12px}
.rx-rank{display:flex; flex-direction:column; align-items:center}
.rx-rank b{font-family:var(--display); font-weight:400; font-size:2.2rem; line-height:1; color:var(--rd)}
.rx-main{display:flex; flex-direction:column; gap:4px; min-width:0}
.rx-name{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rx-name b{font-size:1.02rem}
.rx-warn{font-size:.68rem; font-weight:700; color:#b4234f; background:rgba(180,35,79,.12); border-radius:999px; padding:2px 9px}
:root[data-theme="dark"] .rx-warn{color:#ff8fae}
.rx-q{font-size:.86rem; color:var(--ink-2); line-height:1.45}
.rx-q em{font-style:normal; color:var(--ink-3)}
.rx-sig{display:flex; flex-direction:column; gap:6px}
.rx-sig .rx-k{display:none; font-size:.7rem; color:var(--ink-3)}
.rx-sig b{font-size:.84rem; font-weight:600}
.rx-seg{display:flex; gap:3px}
.rx-seg i{display:block; height:8px; flex:1; border-radius:4px; background:var(--panel-2)}
.rx-seg i.on{background:var(--rd)}
.rx-pa{display:flex; align-items:center; justify-content:center; gap:10px; border-radius:14px; padding:10px 8px; background:color-mix(in srgb, var(--f1) 12%, transparent); color:var(--f1)}
.rx-pa b{font-family:var(--display); font-weight:400; font-size:2.2rem; line-height:1}
.rx-pa small{font-size:.66rem; font-weight:600; line-height:1.25}
.rx-foot{margin:14px 0 0; font-size:.8rem; color:var(--ink-3); max-width:100ch; line-height:1.55}
@media (max-width:820px){
  .rx-hd{display:none}
  .rx-row{grid-template-columns:44px minmax(0,1fr) 92px; gap:8px 12px}
  .rx-rank b{font-size:1.8rem}
  .rx-sig{grid-column:2; grid-row:2}
  .rx-sig .rx-k{display:block}
  .rx-pa{grid-column:3; grid-row:1 / span 2; flex-direction:column; gap:4px; text-align:center}
}

/* newsletter: banner artwork only */
.nl-art-only{display:block; min-height:170px; padding:0}
@media (max-width:980px){ .nl-art-only{min-height:110px; padding:0} }

/* overview link: mobile only */
@media (min-width:981px){ .nav-ov{display:none !important} }

/* ===== Peptide library ===== */
.lb-a{background:var(--t-ocean); color:var(--ink)} .lb-a i, .dot.lb-a{background:var(--s-approved)}
.lb-t{background:var(--t-rasp); color:var(--ink)} .lb-t i, .dot.lb-t{background:var(--rasp)}
.lb-w{background:var(--t-ochre); color:var(--ink)} .lb-w i, .dot.lb-w{background:var(--ochre)}
.lb-c{background:var(--t-mint); color:var(--ink)} .lb-c i, .dot.lb-c{background:var(--good)}
.lib .chip{display:inline-flex; align-items:center; gap:8px}
.lib .chip .n{opacity:.6; font-weight:500}
.lib .chip .dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.lib-legend{margin:0 0 18px}
.lib-map{margin:0 0 22px; padding:18px}
.lib-maphint{text-align:center; margin:4px 0 0}
.lib-ev{flex:0 1 240px; appearance:auto}
.lib-card .pc-top{display:flex; flex-direction:column-reverse; align-items:flex-start; gap:8px}
.lib-card .pc-ev{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
.lib-callout{border-left:4px solid var(--accent); margin:16px 0}
@media (max-width:640px){ .lib-ev{flex:1 1 100%; max-width:none} .lib-filters .search{max-width:none} }
.lib-countrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 12px}
.lib-clear{height:34px; padding:0 14px; font-size:.82rem; background:transparent; cursor:pointer}
.lib-clear[hidden]{display:none}

.lib-map{--organ:color-mix(in srgb, var(--accent) 24%, transparent); --wash:color-mix(in srgb, var(--accent) 9%, transparent)}
.lib-body2{display:block; width:100%; max-width:820px; height:auto; margin:0 auto}
.lib-body2 .bf1{stop-color:var(--panel)} .lib-body2 .bf2{stop-color:var(--panel-2)}
.lib-body2 .gl1{stop-color:var(--accent); stop-opacity:.07} .lib-body2 .gl2{stop-color:var(--accent); stop-opacity:0}
.lib-body2 .shadow{fill:var(--ink); opacity:.06}
.lib-body2 .body{fill:url(#bodyfill); stroke:var(--line-2); stroke-width:1.6; stroke-linejoin:round}
.lib-body2 .org path, .lib-body2 .org circle{fill:var(--organ); stroke:none; opacity:.55; transition:opacity .2s, fill .2s}
.lib-body2 .org .g{fill:none; stroke:var(--organ); stroke-width:2; stroke-linecap:round}
.lib-body2 .org .lung{fill:var(--organ); opacity:.25}
.lib-body2 .org.on path, .lib-body2 .org.on circle{fill:var(--accent); opacity:.85}
.lib-body2 .org.on .g{fill:none; stroke:var(--accent)} .lib-body2 .org.on .lung{opacity:.35}
.lib-spot{cursor:pointer; outline:none}
.lib-spot .pill{fill:var(--panel-2); stroke:var(--line); transition:fill .2s, stroke .2s}
.lib-spot .lead{fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:3 4; transition:stroke .2s}
.lib-spot .lab{font:600 14px var(--sans); fill:var(--ink)} .lib-spot .cnt{font:12.5px var(--sans); fill:var(--ink-3)}
.lib-spot .dot{fill:var(--accent); stroke:var(--panel); stroke-width:2.5}
.lib-spot .halo{fill:var(--accent); opacity:.18; transform-box:fill-box; transform-origin:center; animation:libpulse 2.4s ease-out infinite}
.lib-spot:hover .pill, .lib-spot:focus-visible .pill, .lib-spot.on .pill{fill:var(--wash); stroke:var(--accent)}
.lib-spot:hover .lead, .lib-spot.on .lead{stroke:var(--accent); stroke-dasharray:none}
.lib-spot.on .lab{fill:var(--accent)}
@keyframes libpulse{0%{transform:scale(1); opacity:.35} 100%{transform:scale(2.6); opacity:0}}
@media (prefers-reduced-motion:reduce){ .lib-spot .halo{animation:none} }
/* site green (--lime), used the same way as the rest of the site */
.lib{--accent:var(--lime); --accent-deep:#4d6b00}
:root[data-theme="dark"] .lib{--accent-deep:var(--lime)}
.lib h1 em{font-style:italic; color:var(--ink); background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding:0 .06em}
.lib-map{--organ:color-mix(in srgb, var(--lime) 45%, transparent); --wash:color-mix(in srgb, var(--lime) 28%, transparent)}
.lib-spot .dot{fill:var(--lime); stroke:var(--ink); stroke-width:2}
.lib-spot .halo{fill:var(--lime); opacity:.5}
.lib-spot:hover .lead, .lib-spot.on .lead{stroke:var(--accent-deep)}
.lib-spot:hover .pill, .lib-spot:focus-visible .pill, .lib-spot.on .pill{fill:var(--wash); stroke:var(--accent-deep)}
.lib-spot.on .lab{fill:var(--ink)}
.lib-body2 .org.on path, .lib-body2 .org.on circle{fill:var(--lime); opacity:1}
.lib-body2 .org.on .g{fill:none; stroke:var(--accent-deep)}
.lib-callout{border-left-color:var(--lime)}
/* organs keep the deeper green; everything else uses the site lime */
.lib-map{--organ-green:#4f8a12; --organ:color-mix(in srgb, var(--organ-green) 24%, transparent)}
:root[data-theme="dark"] .lib-map{--organ-green:#a6d12a}
.lib-body2 .org.on path, .lib-body2 .org.on circle{fill:var(--organ-green); opacity:.85}
.lib-body2 .org.on .g{fill:none; stroke:var(--organ-green)}
/* organs and dots in the site blue */
.lib-map{--organ-green:var(--ultra); --organ:color-mix(in srgb, var(--ultra) 22%, transparent)}
:root[data-theme="dark"] .lib-map{--organ-green:var(--ultra)}
.lib-spot .dot{fill:var(--ultra); stroke:var(--panel); stroke-width:2.5}
.lib-spot .halo{fill:var(--ultra); opacity:.3}
/* label boxes and connecting lines in the site blue when hovered or selected */
.lib-spot:hover .pill, .lib-spot:focus-visible .pill, .lib-spot.on .pill{fill:color-mix(in srgb, var(--ultra) 10%, transparent); stroke:var(--ultra)}
.lib-spot:hover .lead, .lib-spot:focus-visible .lead, .lib-spot.on .lead{stroke:var(--ultra); stroke-dasharray:none}
.lib-spot.on .lab{fill:var(--ultra)}
/* mobile body map */
.lib-mmap{display:none}
.lib-body-m .bf1{stop-color:var(--panel)} .lib-body-m .bf2{stop-color:var(--panel-2)}
.lib-body-m .shadow{fill:var(--ink); opacity:.06}
.lib-body-m .body{stroke:var(--line-2); stroke-width:1.6; stroke-linejoin:round}
.lib-body-m .org path, .lib-body-m .org circle{fill:var(--organ); stroke:none; opacity:.55; transition:opacity .2s, fill .2s}
.lib-body-m .org .g{fill:none; stroke:var(--organ); stroke-width:2; stroke-linecap:round}
.lib-body-m .org .lung{fill:var(--organ); opacity:.25}
.lib-body-m .org.on path, .lib-body-m .org.on circle{fill:var(--ultra); opacity:.85}
.lib-body-m .org.on .g{fill:none; stroke:var(--ultra)} .lib-body-m .org.on .lung{opacity:.35}
.lib-mspot{cursor:pointer; outline:none} .lib-mspot .hit{fill:transparent}
.lib-mspot .dot{fill:var(--ultra); stroke:var(--panel); stroke-width:2.5}
.lib-mspot .halo{fill:var(--ultra); opacity:.3; transform-box:fill-box; transform-origin:center; animation:libpulse 2.4s ease-out infinite}
.lib-mspot.on .dot{r:9}
.lib-mbtn{display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:12px; padding:7px 10px; font:inherit; cursor:pointer}
.lib-mbtn b{font-size:.8rem; font-weight:600; line-height:1.2}
.lib-mbtn .n{font-size:.72rem; color:var(--ink-3)}
.lib-mbtn.on{border-color:var(--ultra); background:color-mix(in srgb, var(--ultra) 10%, transparent)} .lib-mbtn.on b{color:var(--ultra)}
@media (max-width:640px){
  .lib-body2{display:none}
  .lib-map{padding:14px}
  .lib-mmap{display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:12px; align-items:center}
  .lib-body-m{display:block; width:100%; height:auto; max-height:420px}
  .lib-mgrid{display:grid; gap:6px}
  .lib-maphint{margin-top:10px}
}
/* no bottom tab bar on mobile */
.tabs{display:none !important}
@media (max-width:980px){ footer.ft{padding-bottom:32px} footer{padding-bottom:32px} }
@media (max-width:640px){ .lib .chips .chip{height:34px; padding:0 12px; font-size:.78rem; gap:6px} }
/* tighter space between page content and the footer banner */
main#app{padding-bottom:8px}
footer.ft{padding-top:20px}
@media (max-width:980px){ main#app{padding-bottom:4px} footer.ft{padding-top:16px} }
.ft-banner{margin:0 0 36px; border-radius:28px; overflow:hidden; background:#111; line-height:0}
.ft-banner img{display:block; width:100%; height:auto}
@media (max-width:640px){ .ft-banner{border-radius:18px; margin-bottom:24px} }