/* ============================================================
   interactive.css — living-diagram layer for husainalkhaldy.com/lectures
   Extends lecture.css tokens. All classes namespaced .ix-*
   Shared across every interactive lecture page.
   ============================================================ */
:root{
  --rbc:#e0736b; --rbc-deep:#c1554e; --danger:#ea6a61; --ok:#7fc8a0;
  --violet:#b79bd6; --lime:#c7d183; --pale:#f1d9b0;
}
.ix-badge{display:inline-flex;align-items:center;gap:.55em;font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(233,180,92,.4);border-radius:100px;padding:.4em .9em;background:rgba(233,180,92,.06)}
.ix-badge b{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:ixpulse 2.4s var(--ease) infinite}
@keyframes ixpulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* floating RBC field in hero */
.ix-hero-cells{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ix-hero-cells span{position:absolute;border-radius:50%;background:radial-gradient(circle at 38% 34%,rgba(224,115,107,.05),rgba(224,115,107,.22) 46%,rgba(193,85,78,.28) 62%,transparent 68%);box-shadow:inset 0 0 12px rgba(0,0,0,.25);animation:ixfloat linear infinite;opacity:.5}
@keyframes ixfloat{from{transform:translateY(20px)}to{transform:translateY(-40px)}}

/* ---------- scene scaffold ---------- */
.ix-flow{padding-bottom:clamp(20px,4vh,40px)}
.ix-scene{margin:clamp(46px,9vh,104px) 0;scroll-margin-top:96px}
.ix-kick{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7em;margin-bottom:1em}
.ix-kick::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.6}
.ix-kick.ice{color:var(--ice)}.ix-kick.ice::before{background:var(--ice)}
.ix-scene h3{font-family:"Fraunces",serif;font-weight:440;font-size:clamp(1.55rem,3.6vw,2.5rem);line-height:1.08;letter-spacing:-.028em;color:#f4f7ff;max-width:20ch;margin-bottom:.5em}
.ix-scene h3 em{font-style:italic;color:var(--accent)}
.ix-scene h3 em.ice{color:var(--ice)}
.ix-lede{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);max-width:60ch;line-height:1.6;margin-bottom:.4em}
.ix-lede + .ix-lede{margin-top:1em}
.ix-lede strong{color:var(--text);font-weight:600}
.ix-lede em{color:var(--ice);font-style:italic}

/* generic card / figure */
.ix-fig{margin-top:2em;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));padding:clamp(20px,3.4vw,40px);position:relative;overflow:hidden}
.ix-fig-t{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:1.4em;display:flex;align-items:center;gap:.7em}
.ix-fig-t::after{content:"";flex:1;height:1px;background:var(--line)}
.ix-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ix-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ix-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.ix-grid2,.ix-grid3,.ix-grid4{grid-template-columns:1fr}}
.ix-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:1.3em 1.4em;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.ix-card h4{font-family:"Fraunces",serif;font-weight:520;font-size:1.08rem;color:var(--text);letter-spacing:-.01em;margin-bottom:.5em;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.ix-card p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:.3em 0}
.ix-card ul{list-style:none;margin:.4em 0 0}
.ix-card li{color:var(--muted);font-size:.9rem;padding:.22em 0 .22em 1.2em;position:relative}
.ix-card li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ix-card.ice li::before{background:var(--ice)}
.ix-card strong{color:var(--text);font-weight:600}
.ix-hl{color:var(--accent)}.ix-hl-ice{color:var(--ice)}.ix-hl-red{color:var(--rbc)}.ix-hl-ok{color:var(--ok)}

/* pill toggles / segmented control */
.ix-toolbar{display:flex;justify-content:center;margin-bottom:1.6em}
.ix-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:100px;background:rgba(0,0,0,.2);flex-wrap:wrap}
.ix-seg button{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.04em;color:var(--muted);background:none;border:0;padding:.6em 1.15em;border-radius:100px;cursor:pointer;transition:.25s;white-space:nowrap}
.ix-seg button:hover{color:var(--text)}
.ix-seg button.on{background:var(--accent);color:#1a1205;font-weight:700}
.ix-seg button.on.cool{background:var(--ice);color:#08161f}

/* ---------- altitude hemoglobin gauge ---------- */
.ix-alt-read{display:flex;flex-wrap:wrap;gap:1.5em 2.4em;align-items:flex-end;margin-bottom:1.6em}
.ix-alt-read .b{display:flex;flex-direction:column;gap:.15em}
.ix-alt-read .k{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ix-alt-read .v{font-family:"Fraunces",serif;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1;color:#f4f7ff}
.ix-alt-read .v small{font-size:.5em;color:var(--muted);font-family:"Instrument Sans"}
.ix-alt-read .v.cut{color:var(--accent)}
.ix-alt-place{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--ice);letter-spacing:.04em}
.ix-scale{position:relative;height:64px;border-radius:12px;margin:1.2em 0 .4em;
  background:linear-gradient(90deg,rgba(234,106,97,.34),rgba(234,106,97,.14) 46%,rgba(127,200,160,.14) 54%,rgba(127,200,160,.28));border:1px solid var(--line)}
.ix-scale .zone-a{position:absolute;top:0;bottom:0;left:0;border-radius:12px 0 0 12px;background:repeating-linear-gradient(45deg,rgba(234,106,97,.16),rgba(234,106,97,.16) 7px,transparent 7px,transparent 14px);transition:width .12s linear}
.ix-scale .cut{position:absolute;top:-8px;bottom:-8px;width:3px;background:var(--accent);box-shadow:0 0 14px rgba(233,180,92,.8);transition:left .12s linear}
.ix-scale .cut::after{content:"CUTOFF";position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:"Space Mono",monospace;font-size:.56rem;letter-spacing:.14em;color:var(--accent)}
.ix-scale .lab{position:absolute;top:50%;transform:translateY(-50%);font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:#fff;opacity:.85;pointer-events:none}
.ix-scale .lab.a{left:14px}.ix-scale .lab.n{right:14px}
.ix-ticks{display:flex;justify-content:space-between;font-family:"Space Mono",monospace;font-size:.64rem;color:var(--faint);padding:0 2px}
input[type=range].ix-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ice),var(--accent));outline:none;margin:1.8em 0 .6em;cursor:pointer}
input[type=range].ix-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#f4f7ff;border:3px solid var(--accent);cursor:grab;box-shadow:0 3px 12px rgba(0,0,0,.5)}
input[type=range].ix-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#f4f7ff;border:3px solid var(--accent);cursor:grab}
.ix-range-ends{display:flex;justify-content:space-between;font-family:"Space Mono",monospace;font-size:.68rem;color:var(--faint)}

/* data table */
.ix-tbl{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.4em}
.ix-tbl th,.ix-tbl td{border:1px solid var(--line);padding:.6em .8em;text-align:left;vertical-align:top}
.ix-tbl thead th{background:var(--surface-2);color:var(--text);font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.ix-tbl td{color:var(--muted)}.ix-tbl td strong,.ix-tbl th strong{color:var(--text)}
.ix-tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.ix-tbl em{color:var(--ice);font-style:italic}
.ix-up{color:var(--danger);font-weight:700}.ix-dn{color:var(--ice);font-weight:700}

/* pictograph */
.ix-picto{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:360px;margin:0 auto}
.ix-picto i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background .5s var(--ease),transform .5s var(--ease)}
.ix-legend{display:flex;flex-wrap:wrap;gap:.7em 1.4em;margin-top:1.6em;justify-content:center}
.ix-legend span{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;color:var(--muted)}
.ix-legend span b{width:11px;height:11px;border-radius:50%;flex:none}
.ix-legend span em{color:var(--text);font-style:normal;font-family:"Space Mono",monospace;font-size:.8rem}

/* SVG diagram helpers */
.ix-svg{width:100%;height:auto;display:block}
.ix-svg text{font-family:"Space Mono",monospace;fill:var(--muted)}
.ix-cap{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--faint);text-align:center;margin-top:1em;letter-spacing:.03em;line-height:1.5}
.ix-cap.left{text-align:left}

/* two-state branch cards */
.ix-branch{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:1.4em}
@media(max-width:760px){.ix-branch{grid-template-columns:1fr}}
.ix-branch .arm{border:1px solid var(--line);border-radius:16px;padding:1.4em;background:var(--surface);opacity:.5;transition:.4s var(--ease);cursor:pointer}
.ix-branch .arm.on{opacity:1;border-color:var(--accent);background:rgba(233,180,92,.05);transform:translateY(-3px)}
.ix-branch .arm.cool.on{border-color:var(--ice);background:rgba(132,185,216,.06)}
.ix-branch .arm .tag{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ix-branch .arm h4{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--text);margin:.3em 0 .5em}
.ix-branch .arm.on h4{color:var(--accent)}
.ix-branch .arm.cool.on h4{color:var(--ice)}
.ix-branch .arm ul{list-style:none;margin-top:.6em}
.ix-branch .arm li{padding:.25em 0 .25em 1.2em;position:relative;color:var(--muted);font-size:.9rem}
.ix-branch .arm li::before{content:"•";position:absolute;left:0;color:var(--accent)}
.ix-branch .arm.cool li::before{color:var(--ice)}

/* MCV classifier */
.ix-mcv-stage{display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,64px);min-height:180px;margin:1em 0}
.ix-cell{border-radius:50%;background:radial-gradient(circle at 40% 36%,rgba(224,115,107,.15),var(--rbc) 52%,var(--rbc-deep) 74%,rgba(193,85,78,.5) 100%);box-shadow:inset 0 0 18px rgba(120,20,20,.5),0 6px 20px -6px rgba(0,0,0,.6);position:relative;transition:width .5s var(--ease),height .5s var(--ease),opacity .4s}
.ix-cell::after{content:"";position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,rgba(10,15,30,.5),transparent 70%)}
.ix-swap-panel{display:none}.ix-swap-panel.on{display:block;animation:ixfade .4s var(--ease)}
@keyframes ixfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* heme composition */
.ix-heme{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
@media(max-width:760px){.ix-heme{grid-template-columns:1fr}}
.ix-compose{display:flex;flex-direction:column;gap:10px}
.ix-block{border:1px solid var(--line);border-radius:12px;padding:.9em 1em;display:flex;align-items:center;gap:.8em;transition:.3s;background:var(--surface)}
.ix-block .dot{width:12px;height:12px;border-radius:3px;flex:none}
.ix-block .n{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.ix-block .d{font-size:.86rem;color:var(--muted)}
.ix-block.hot{border-color:var(--accent);background:rgba(233,180,92,.08);box-shadow:0 0 0 1px rgba(233,180,92,.3)}
.ix-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4em}
.ix-chip{font-family:"Space Mono",monospace;font-size:.74rem;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:.5em 1em;cursor:pointer;transition:.25s}
.ix-chip:hover{color:var(--text);border-color:var(--line-strong)}
.ix-chip.on{background:var(--accent);color:#1a1205;font-weight:700;border-color:var(--accent)}
.ix-chip small{opacity:.7}
.ix-path{list-style:none;font-family:"Space Mono",monospace;font-size:.78rem;color:var(--muted)}
.ix-path li{padding:.3em 0 .3em 1.4em;position:relative}
.ix-path li::before{content:"↓";position:absolute;left:.3em;color:var(--accent);opacity:.6}
.ix-path li:first-child::before{content:""}
.ix-path li.end{color:var(--accent)}

/* stage toggle diagram (hepcidin door / generic two-state svg) */
.ix-stage-status{text-align:center;margin-top:1.4em;font-size:.95rem;color:var(--muted);min-height:2.6em;line-height:1.55}
.ix-stage-status b{color:var(--text)}
.ix-cell-stage{max-width:560px;margin:0 auto}
.ix-door{transition:transform .6s var(--ease);transform-origin:right center}
.state-b .ix-door{transform:scaleX(.16)}
.ix-lock{opacity:0;transition:opacity .5s .3s}
.state-b .ix-lock{opacity:1}
.ix-fe{transition:.6s var(--ease)}
.ix-fe.out{opacity:0}.state-a .ix-fe.out{opacity:1}
.ix-fe.trap{opacity:0}.state-b .ix-fe.trap{opacity:1}

/* organ map */
.ix-organ{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center}
@media(max-width:760px){.ix-organ{grid-template-columns:1fr}}
.ix-hot{cursor:pointer}
.ix-hot circle{transition:.3s}
.ix-hot:hover circle,.ix-hot.on circle{fill:var(--accent);r:9}
.ix-organ-info{border:1px solid var(--line);border-radius:14px;padding:1.3em;background:var(--surface);min-height:140px}
.ix-organ-info .k{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.4em}
.ix-organ-info h4{font-family:"Fraunces",serif;font-size:1.2rem;color:var(--text);margin-bottom:.3em}
.ix-organ-info p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* alert */
.ix-alert{margin-top:1.6em;border:1px solid rgba(234,106,97,.4);border-left:3px solid var(--danger);border-radius:12px;background:rgba(234,106,97,.06);padding:1.1em 1.3em;display:flex;gap:1em;align-items:flex-start}
.ix-alert.warm{border-color:rgba(233,180,92,.4);border-left-color:var(--accent);background:rgba(233,180,92,.06)}
.ix-alert svg{width:26px;height:26px;flex:none;stroke:var(--danger);margin-top:2px}
.ix-alert.warm svg{stroke:var(--accent)}
.ix-alert b{color:var(--danger);font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.3em}
.ix-alert.warm b{color:var(--accent)}
.ix-alert p{color:var(--muted);font-size:.92rem;line-height:1.55}
.ix-alert em{color:var(--ice);font-style:italic}

/* physical signs / icon cards */
.ix-sign{text-align:center}
.ix-sign svg{width:96px;height:96px;margin:0 auto .6em}
.ix-sign h4{justify-content:center}
.ix-sign p{text-align:center}

/* case timeline */
.ix-timeline{position:relative;margin-top:.6em}
.ix-timeline::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--accent),var(--ice))}
.ix-step{position:relative;padding:0 0 1.6em 3.4em}
.ix-step:last-child{padding-bottom:0}
.ix-step .n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--bg-2);border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:"Space Mono",monospace;font-weight:700;font-size:.9rem}
.ix-step.cure .n{border-color:var(--ok);color:var(--ok)}
.ix-step h4{font-family:"Fraunces",serif;font-size:1.08rem;color:var(--text);margin-bottom:.2em}
.ix-step p{color:var(--muted);font-size:.9rem;line-height:1.5}
.ix-step strong{color:var(--text)}

/* case file card */
.ix-casefile{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:1.4em;position:relative}
.ix-casefile .lbl{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6em}
.ix-casefile h4{font-family:"Fraunces",serif;font-size:1.15rem;color:var(--text);margin-bottom:.5em}

/* summary numbered */
.ix-sum{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.ix-sum{grid-template-columns:1fr}}
.ix-sum .it{border:1px solid var(--line);border-radius:14px;padding:1.3em;background:var(--surface);position:relative;overflow:hidden}
.ix-sum .it .bn{font-family:"Fraunces",serif;font-size:2.6rem;color:rgba(233,180,92,.18);position:absolute;top:-.1em;right:.2em;line-height:1}
.ix-sum .it h4{font-family:"Fraunces",serif;font-size:1.12rem;color:var(--accent);margin-bottom:.3em}
.ix-sum .it p{color:var(--muted);font-size:.92rem;line-height:1.55}
.ix-quote{margin-top:2em;border-radius:18px;border:1px solid var(--line);background:linear-gradient(120deg,rgba(233,180,92,.08),rgba(132,185,216,.05));padding:2em clamp(1.4em,4vw,2.6em);text-align:center}
.ix-quote p{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(1.2rem,2.6vw,1.7rem);color:#f4f7ff;line-height:1.4;letter-spacing:-.01em}
.ix-quote .by{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;color:var(--faint);margin-top:1em;text-transform:uppercase}

/* end-of-part nav */
.ix-endnote{margin-top:2.4em;padding-top:2em;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.ix-endnote p{color:var(--faint);font-size:.9rem;max-width:46ch}

/* ============================================================
   Part 2 & 3 widgets
   ============================================================ */
/* lab marker panel */
.ix-labs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.ix-labs{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.ix-labs{grid-template-columns:1fr}}
.ix-lab{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:1.1em 1.1em 1.2em;text-align:center}
.ix-lab .arw{font-size:1.7rem;line-height:1;font-family:"Fraunces",serif}
.ix-lab .arw.up{color:var(--danger)}.ix-lab .arw.dn{color:var(--ice)}
.ix-lab .nm{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.05em;color:var(--text);margin:.4em 0 .2em}
.ix-lab .ds{font-size:.82rem;color:var(--muted);line-height:1.45}

/* urine tubes */
.ix-tubes{display:flex;justify-content:center;gap:clamp(24px,7vw,64px);flex-wrap:wrap;margin:1em 0}
.ix-tube{text-align:center;cursor:pointer}
.ix-tube svg{width:64px;height:150px;transition:transform .3s var(--ease)}
.ix-tube:hover svg{transform:translateY(-4px)}
.ix-tube .tt{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--text);margin-top:.6em}
.ix-tube .ts{font-size:.78rem;color:var(--muted);max-width:15ch;margin:.2em auto 0;line-height:1.4}

/* coombs step diagram */
.ix-coombs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.ix-coombs{grid-template-columns:1fr}}
.ix-steps{counter-reset:st;margin-top:.4em}
.ix-steps li{list-style:none;position:relative;padding:.5em 0 .5em 2.4em;color:var(--muted);font-size:.9rem}
.ix-steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:.5em;width:24px;height:24px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:"Space Mono",monospace;font-size:.72rem}

/* pentad ring */
.ix-pentad{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:.4em 0}
.ix-pentad span{border:1px solid var(--line-strong);border-radius:100px;padding:.55em 1.1em;font-family:"Space Mono",monospace;font-size:.78rem;color:var(--text);background:var(--surface)}

/* osmotic fragility interactive graph */
.ix-graph-wrap{max-width:560px;margin:0 auto}
.ix-og-read{text-align:center;font-family:"Space Mono",monospace;font-size:.8rem;color:var(--muted);margin-top:.6em}
.ix-og-read b{color:var(--accent)}

/* electrophoresis strip */
.ix-ep{display:flex;flex-direction:column;gap:10px;margin-top:.4em}
.ix-ep-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.ix-ep-row .lbl{font-family:"Space Mono",monospace;font-size:.76rem;color:var(--text)}
.ix-ep-track{position:relative;height:30px;border-radius:6px;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden}
.ix-ep-band{position:absolute;top:0;bottom:0;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:"Space Mono",monospace;font-size:.62rem;color:#08161f}
@media(max-width:520px){.ix-ep-row{grid-template-columns:1fr}}

/* flowchart node tree */
.ix-tree{display:flex;flex-direction:column;align-items:center;gap:0;font-family:"Instrument Sans"}
.ix-node{border:1px solid var(--line-strong);border-radius:12px;padding:.7em 1.1em;background:var(--surface);text-align:center;max-width:340px}
.ix-node.q{border-color:var(--accent);color:var(--text)}
.ix-node.dx{border-color:var(--ok);background:rgba(127,200,160,.07)}
.ix-node .nl{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.2em}
.ix-node strong{color:var(--text)}
.ix-conn{width:2px;height:22px;background:var(--line-strong)}
.ix-split{display:flex;gap:clamp(12px,4vw,40px);justify-content:center;flex-wrap:wrap}
.ix-limb{display:flex;flex-direction:column;align-items:center}
.ix-limb .edge{font-family:"Space Mono",monospace;font-size:.68rem;color:var(--accent);padding:.3em .7em;border:1px solid var(--line);border-radius:100px;background:var(--bg-2);margin-bottom:-11px;position:relative;z-index:2}

/* morphology gallery cell frame */
.ix-cells-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.ix-cellcard{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:1.1em;text-align:center;width:150px}
.ix-cellcard svg{width:96px;height:96px;margin:0 auto .5em}
.ix-cellcard .cn{font-family:"Fraunces",serif;font-size:1rem;color:var(--text)}
.ix-cellcard .cd{font-size:.78rem;color:var(--muted);line-height:1.4;margin-top:.2em}

/* gene deletion spectrum */
.ix-genes{display:flex;flex-direction:column;gap:10px}
.ix-gene-row{display:grid;grid-template-columns:150px auto 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.7em 1em;background:var(--surface)}
.ix-gene-boxes{display:flex;gap:5px}
.ix-gene-boxes i{width:16px;height:22px;border-radius:3px;border:1px solid var(--line-strong)}
.ix-gene-boxes i.on{background:var(--accent);border-color:var(--accent)}
.ix-gene-boxes i.off{background:repeating-linear-gradient(45deg,rgba(234,106,97,.3),rgba(234,106,97,.3) 3px,transparent 3px,transparent 6px)}
.ix-gene-row .gl{font-family:"Space Mono",monospace;font-size:.74rem;color:var(--text)}
.ix-gene-row .gd{font-size:.84rem;color:var(--muted)}
@media(max-width:600px){.ix-gene-row{grid-template-columns:1fr;gap:6px}}

/* sickle polymerization */
.ix-poly-cell{transition:1s var(--ease)}
.state-b .ix-poly-normal{opacity:0}
.ix-poly-sickle{opacity:0;transition:opacity 1s .2s}
.state-b .ix-poly-sickle{opacity:1}
.ix-fibers{opacity:0;transition:opacity 1s}
.state-b .ix-fibers{opacity:1}