/* CardiaNova CAD kit, shared by every CAD page on the site (/public/cad-kit/).
   Brand tokens from /dropin/brandbook.md. Theme: light by default, dark from
   the system, and the toggle in the bar stamps data-theme on <html>, which
   wins in both directions. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Poppins-400-latin.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Poppins-500-latin.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Poppins-600-latin.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Poppins-700-latin.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/PlayfairDisplay-700-latin.woff2) format("woff2")}
:root{
  --cn-purple:#5E319A; --cn-purple-900:#2E0B6D; --cn-purple-950:#1C0450;
  --cn-purple-300:#9768B8; --cn-purple-100:#D9C5EA; --cn-purple-50:#F3F1F6;
  --cn-red:#CE191E; --cn-blue:#055AD0; --cn-cream:#F1E0CC;
  --cn-ink:#1C0450; --cn-ink-muted:#6B5B87;
  --cn-surface:#FDFDFD; --cn-surface-alt:#F8F8FA; --cn-line:#E4E0EC;
  --cn-stage:#EDEAF3; --accent:#5E319A; --accent-ink:#FFFFFF;
  --panel:rgba(253,253,253,.94); --shadow:0 2px 14px rgba(28,4,80,.14);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --r:10px;
  --bar-h:46px; --status-h:30px; --tree-w:252px; --insp-w:328px; --bounded:#7B4BC0; --bounded-ink:#fff; --bounded-bg:rgba(123,75,192,.10); --assumed:#CE191E; --assumed-ink:#fff; --assumed-bg:rgba(206,25,30,.10); --assumed-bg2:rgba(206,25,30,.18); --derived:#055AD0; color-scheme:light;
}
:root[data-theme=dark]{--cn-surface:#0C1014; --cn-surface-alt:#141A22; --cn-line:#2A3442;
  --cn-ink:#EEF0F4; --cn-ink-muted:#A3ADBD; --cn-purple-50:#161D27;
  --cn-purple-100:#2A2140; --cn-purple-300:#B2A1D4; --cn-stage:#151B24;
  --accent:#B2A1D4; --accent-ink:#1C0450; --panel:rgba(20,26,34,.94);
  --shadow:0 2px 14px rgba(0,0,0,.45); --bounded:#C9A6F5; --bounded-ink:#1A0A2E; --bounded-bg:rgba(201,166,245,.16); --assumed:#FF8A8D; --assumed-ink:#1A0304; --assumed-bg:rgba(255,138,141,.16); --assumed-bg2:rgba(255,138,141,.26); --derived:#6FA8FF; color-scheme:dark;}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--cn-surface:#0C1014; --cn-surface-alt:#141A22; --cn-line:#2A3442;
  --cn-ink:#EEF0F4; --cn-ink-muted:#A3ADBD; --cn-purple-50:#161D27;
  --cn-purple-100:#2A2140; --cn-purple-300:#B2A1D4; --cn-stage:#151B24;
  --accent:#B2A1D4; --accent-ink:#1C0450; --panel:rgba(20,26,34,.94);
  --shadow:0 2px 14px rgba(0,0,0,.45); --bounded:#C9A6F5; --bounded-ink:#1A0A2E; --bounded-bg:rgba(201,166,245,.16); --assumed:#FF8A8D; --assumed-ink:#1A0304; --assumed-bg:rgba(255,138,141,.16); --assumed-bg2:rgba(255,138,141,.26); --derived:#6FA8FF; color-scheme:dark;}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{display:flex;flex-direction:column;background:var(--cn-surface);color:var(--cn-ink);
  font-family:"Poppins",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.cn-nav{padding-top:.4rem!important;padding-bottom:.4rem!important;flex:none}
@media (max-width:34rem){.cn-nav-brand span{display:none}.cn-nav{gap:.3rem!important}}

.app{flex:1;min-height:0;display:grid;grid-template-rows:var(--bar-h) minmax(0,1fr) var(--status-h)}

/* ---- app bar ---- */
.bar{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);border-bottom:1px solid var(--cn-line);background:var(--cn-surface-alt);position:relative;z-index:30;min-width:0}
.seg{display:flex;border:1px solid var(--cn-line);border-radius:8px;overflow:hidden;flex:none}
.seg button{border:0;background:transparent;padding:0 12px;height:32px;cursor:pointer;font-size:.8rem;font-weight:500;white-space:nowrap}
.seg button+button{border-left:1px solid var(--cn-line)}
.seg button[aria-checked=true]{background:var(--cn-purple);color:#fff;font-weight:600}
.seg small{opacity:.75;font-weight:400;margin-left:4px}
.menus{display:flex;gap:2px;margin-left:var(--s2)}
.mbtn{border:0;background:transparent;height:32px;padding:0 10px;border-radius:6px;cursor:pointer;font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap}
.mbtn:hover,.mbtn[aria-expanded=true]{background:var(--cn-purple-50);color:var(--accent)}
.mbtn svg{width:10px;height:10px;opacity:.6}
.bar .sp{flex:1}
.tog{border:1px solid var(--cn-line);background:var(--cn-surface);height:32px;padding:0 10px;border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:500;display:flex;align-items:center;gap:6px;white-space:nowrap}
.tog[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--cn-purple-50)}
.tog kbd{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;opacity:.6}
.burger{display:none}
.pop{position:absolute;top:calc(var(--bar-h) - 4px);min-width:236px;background:var(--cn-surface);border:1px solid var(--cn-line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;z-index:60}
.pop[hidden]{display:none}
.mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:0 10px;min-height:34px;border-radius:6px;cursor:pointer;font-size:.82rem;text-decoration:none;color:var(--cn-ink)}
.mi:hover,.mi:focus-visible{background:var(--cn-purple-50);outline:none;color:var(--accent)}
.mi .ck{width:16px;flex:none;text-align:center;color:var(--accent);font-weight:700}
.mi .kb{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:.68rem;color:var(--cn-ink-muted)}
.mi[aria-disabled=true]{opacity:.45;pointer-events:none}
.msep{height:1px;background:var(--cn-line);margin:5px 4px}
.mhead{font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cn-ink-muted);padding:6px 10px 2px}

/* ---- stage ---- */
.stage{position:relative;overflow:hidden;background:var(--cn-stage)}
.stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.fallback{position:absolute;inset:0;display:none;place-items:center;padding:32px;text-align:center;color:var(--cn-ink-muted)}
.stage.failed .fallback{display:grid}
.stitle{position:absolute;top:10px;left:calc(var(--tree-w) + 22px);right:150px;font-size:.76rem;font-weight:600;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cn-ink-muted)}
.tree-closed .stitle{left:14px}
.banner{position:absolute;top:34px;left:50%;transform:translateX(-50%);background:var(--cn-red);color:#fff;border-radius:8px;padding:6px 12px;font-size:.78rem;font-weight:600;z-index:25;max-width:90%}

.panel{position:absolute;top:8px;bottom:8px;background:var(--panel);backdrop-filter:blur(6px);border:1px solid var(--cn-line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0;overflow:hidden;z-index:20}
.panel[hidden]{display:none}
.phead{display:flex;align-items:center;gap:8px;padding:8px 10px 6px 12px;border-bottom:1px solid var(--cn-line);flex:none}
.phead h2{font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cn-ink-muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x{border:0;background:transparent;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:1.05rem;line-height:1;color:var(--cn-ink-muted);flex:none}
.x:hover{background:var(--cn-purple-50);color:var(--accent)}

/* model tree */
.tree{left:8px;width:var(--tree-w);bottom:auto;max-height:calc(100% - 16px)}
.tsub{display:flex;gap:6px;padding:8px 10px 0;flex:none}
.tsub button{flex:1;border:1px solid var(--cn-line);background:var(--cn-surface);border-radius:6px;height:28px;cursor:pointer;font-size:.74rem}
.tsub button[aria-pressed=true]{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff;font-weight:600}
.tsearch{margin:8px 10px 4px;flex:none;position:relative}
.tsearch input{width:100%;height:30px;border:1px solid var(--cn-line);border-radius:6px;background:var(--cn-surface);padding:0 8px 0 28px;font-size:.78rem}
.tsearch svg{position:absolute;left:8px;top:8px;width:14px;height:14px;opacity:.5}
.tbody{flex:0 1 auto;min-height:0;overflow:hidden;padding:2px 6px 8px}
.cat{border-radius:6px}
.chead{display:flex;align-items:center;gap:6px;min-height:32px;padding:0 4px}
.chead>button.cname{flex:1;display:flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;text-align:left;height:32px;font-size:.8rem;font-weight:600;min-width:0}
.chead .cnt{font-size:.66rem;font-weight:600;color:var(--cn-ink-muted);border:1px solid var(--cn-line);border-radius:999px;padding:0 6px;margin-left:auto}
.chev{width:9px;height:9px;flex:none;transition:transform .15s}
.cat.open .chev{transform:rotate(90deg)}
.eye{border:0;background:transparent;width:26px;height:26px;border-radius:6px;cursor:pointer;display:grid;place-items:center;color:var(--cn-ink-muted);flex:none}
.eye:hover{background:var(--cn-purple-50);color:var(--accent)}
.eye svg{width:15px;height:15px}
.eye[aria-pressed=false]{opacity:.45}
.rows{display:none;padding:0 0 4px 12px}
.cat.open .rows{display:block}
.row{display:flex;align-items:center;gap:6px;min-height:28px;border-radius:6px;padding-right:2px}
.row:hover{background:var(--cn-purple-50)}
.row.sel{background:var(--cn-purple-100)}
.row>button.rname{flex:1;min-width:0;display:flex;align-items:center;gap:7px;border:0;background:transparent;cursor:pointer;text-align:left;height:28px;font-size:.76rem}
.row .sw{width:11px;height:11px;border-radius:3px;border:1px solid rgba(28,4,80,.25);flex:none}
.row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .num{flex:none;display:inline-grid;place-items:center;min-width:19px;height:17px;border-radius:999px;background:var(--cn-purple);color:#fff;font-size:.62rem;font-weight:600;padding:0 4px}
.row.hidden .nm{opacity:.45;text-decoration:line-through}

/* inspector */
.insp,.spec{right:8px;width:var(--insp-w)}
.ihead{padding:10px 12px 8px;border-bottom:1px solid var(--cn-line);flex:none}
.ihead .t{display:flex;gap:8px;align-items:flex-start}
.ihead .t b.n{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:999px;background:var(--cn-purple);color:#fff;font-size:.78rem;flex:none}
.ihead h3{font-size:.95rem;font-weight:600;line-height:1.25;flex:1}
.ihead .meta{font-size:.7rem;color:var(--cn-ink-muted);margin-top:4px}
.iacts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chip{border:1px solid var(--cn-line);background:var(--cn-surface);border-radius:999px;height:28px;padding:0 10px;font-size:.72rem;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed=true]{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff}
.tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--cn-line);flex:none;overflow:hidden}
.tab{border:0;background:transparent;height:30px;padding:0 10px;font-size:.74rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;color:var(--cn-ink-muted)}
.tab[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.pg{flex:1;min-height:0;display:flex;flex-direction:column}
.pgbody{flex:1;min-height:0;overflow:hidden;padding:10px 12px}
.pgnav{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:4px 10px 8px;flex:none;font-size:.72rem;color:var(--cn-ink-muted)}
.pgnav[hidden]{display:none}
.pgnav button{border:1px solid var(--cn-line);background:var(--cn-surface);border-radius:6px;width:30px;height:26px;cursor:pointer}
.pgnav button:disabled{opacity:.35;cursor:default}
.blk{margin-bottom:10px;font-size:.8rem;line-height:1.55}
.blk h4{font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cn-ink-muted);margin-bottom:3px}
.blk ul{padding-left:1.1em}
.blk li{margin-bottom:2px}
.conn{background:var(--cn-purple-50);border-left:3px solid var(--cn-purple);padding:5px 8px;border-radius:4px}
.src{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--accent)}
/* provenance chips. A citation key is a button that opens the citation;
   DERIVED opens the calculation; ASSUMED is a guess and is painted red with
   the background so it can never read as a published number. */
button.src{border:0;background:transparent;padding:0 2px;cursor:pointer;font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--accent);border-radius:3px;text-decoration:underline dotted;text-underline-offset:2px}
button.src:hover,button.src:focus-visible{background:var(--cn-purple-50);outline:none}
.src.assumed,mark.src.assumed{background:var(--assumed);color:var(--assumed-ink);font-weight:700;padding:0 5px;border-radius:3px;text-decoration:none;letter-spacing:.02em}
.src.bounded,mark.src.bounded{background:var(--bounded);color:var(--bounded-ink);font-weight:700;padding:0 5px;border-radius:3px;text-decoration:none;letter-spacing:.02em}
.src.design,mark.src.design{background:transparent;color:var(--cn-ink);box-shadow:inset 0 0 0 1.5px var(--bounded);font-weight:700;padding:0 5px;border-radius:3px;text-decoration:none;letter-spacing:.02em}
tr.bounded td{background:var(--bounded-bg)}
tr.bounded td:first-child{box-shadow:inset 3px 0 0 var(--bounded)}
.blk.bounded{background:var(--bounded-bg);border-left:3px solid var(--bounded);padding:5px 8px;border-radius:4px}
.src.assumed.unsourced{filter:saturate(1.3)}
.src.derived,.src.calibrated{color:var(--derived);font-weight:600;text-decoration:underline dotted;text-underline-offset:2px}
.src.derived.nob{text-decoration:none;font-size:.6rem;letter-spacing:.06em;margin-left:4px}
.src.ok{color:var(--cn-ink-muted);font-weight:600;font-size:.64rem;letter-spacing:.05em}
b.red,.red{color:var(--assumed)}
.chip.red[aria-pressed=false]{color:var(--assumed);border-color:var(--assumed)}
.chip.red[aria-pressed=true]{background:var(--assumed);border-color:var(--assumed)}
tr.assumed td{background:var(--assumed-bg)}
tr.assumed td:first-child{box-shadow:inset 3px 0 0 var(--assumed)}
tr.assumed.more:hover td{background:var(--assumed-bg2)}
tr.derived td:first-child{box-shadow:inset 3px 0 0 var(--derived)}
.blk.assumed{background:var(--assumed-bg);border-left:3px solid var(--assumed);padding:5px 8px;border-radius:4px}
.blk.num{display:flex;gap:7px;align-items:flex-start;margin-bottom:6px;padding:4px 6px;border-radius:5px}
.blk.num>span:not(.pdot){flex:1;min-width:0}
.blk.num.assumed,.blk.num.unsourced{background:var(--assumed-bg);border-left:3px solid var(--assumed)}
.blk.num.derived{border-left:3px solid var(--derived)}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.provline{display:flex;gap:6px;align-items:center;font-size:.72rem;margin-bottom:8px}
.provline .pdot{margin-top:0}
.cp{border:0;background:transparent;color:var(--cn-ink-muted);cursor:pointer;font-size:.9rem;line-height:1;padding:2px 4px;border-radius:4px;flex:none}
.cp:hover{color:var(--accent);background:var(--cn-purple-50)}
.provlegend{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--cn-line);border-radius:999px;box-shadow:var(--shadow);padding:5px 14px;font-size:.7rem;z-index:16;white-space:nowrap}
.provlegend[hidden]{display:none}
.provlegend b{font-weight:600}
.provlegend span{display:inline-flex;align-items:center;gap:5px}
.provlegend i{width:11px;height:11px;border-radius:3px;display:inline-block}
/* citation and calculation cards inside the popover */
.tip h4{font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cn-ink-muted);margin:6px 0 3px}
.tip .cite{font-size:.76rem;line-height:1.45}
.tip .tier{font-family:Poppins,sans-serif;font-weight:500;text-transform:none;letter-spacing:0;color:var(--cn-ink)}
.tip .small,.small{font-size:.7rem;color:var(--cn-ink-muted);line-height:1.45}
.tip .warn,.warn{color:var(--assumed);font-weight:500}
.tip .row2{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tip .row2 .chip,.blk .chip{height:26px;font-size:.68rem;display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.deriv{margin-top:6px;border-top:1px solid var(--cn-line);padding-top:4px}
.eq{font-size:.78rem;margin:2px 0}
.eq.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--cn-ink);line-height:1.6}
.chk{font-family:Poppins,sans-serif;font-size:.66rem;font-weight:600;padding:0 6px;border-radius:999px;margin-left:4px}
.chk.ok{background:var(--cn-purple-50);color:var(--accent)}
.chk.bad{background:var(--assumed);color:var(--assumed-ink)}
.inputs{padding-left:1.1em;font-size:.72rem;line-height:1.5;margin:0}
.hl{margin-top:6px}
.hlc{width:100%;height:120px;display:block;border:1px solid var(--cn-line);border-radius:6px;background:var(--cn-surface-alt)}
.cites{margin-top:6px;border-top:1px solid var(--cn-line);padding-top:4px}
.cites p{margin:2px 0}
.dimlbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);background:#055AD0;color:#fff;font-size:.66rem;font-weight:600;border-radius:999px;padding:1px 7px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* a walkthrough's own measurement, point to point. Plain ones read as ink on
   the surface; a clearance the device is up against takes the single accent. */
.dimlbl.cal{background:var(--cn-surface);color:var(--cn-ink);border:1px solid var(--cn-purple-100);font-weight:700;padding:2px 8px;box-shadow:0 1px 4px rgba(28,4,80,.20)}
.dimlbl.cal.stream{font-weight:600;font-size:.62rem;opacity:.92}
.dimlbl.cal.tight{background:var(--assumed);color:var(--assumed-ink);border-color:transparent}
.meas{border:1px solid var(--cn-line);border-left:3px solid #055AD0;border-radius:6px;padding:6px 8px}
.mt{table-layout:auto;font-size:.76rem;margin:2px 0 4px}.mt td{border:0;padding:1px 0}.mt td.v{text-align:right;font-weight:600;color:var(--cn-ink)}
.mnote{font-size:.68rem;color:var(--cn-ink-muted);line-height:1.45}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:var(--cn-ink-muted)}

/* view cube + tool strip */
.cube-wrap{position:absolute;top:10px;right:14px;width:84px;height:84px;perspective:300px;z-index:15}
.cube-wrap.shift{right:calc(var(--insp-w) + 22px)}
.cube{position:absolute;inset:14px;transform-style:preserve-3d}
.face{position:absolute;inset:0;display:grid;place-items:center;font-size:.56rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:rgba(243,241,246,.92);color:#2E0B6D;border:1px solid #9768B8;cursor:pointer;backface-visibility:hidden;user-select:none}
.face:hover{background:#5E319A;color:#fff}
.tools{position:absolute;left:50%;top:36px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--cn-line);border-radius:999px;box-shadow:var(--shadow);padding:4px 12px;z-index:16;font-size:.74rem;white-space:nowrap}
.tools[hidden]{display:none}
.tools label{display:flex;align-items:center;gap:6px;font-weight:600}
.tools input[type=range]{width:130px;accent-color:var(--cn-purple)}
.tools .grp[hidden]{display:none}

/* labels over the canvas (ported from heart-models.src.html) */
.labels{position:absolute;inset:0;pointer-events:none;z-index:10}
.xl{position:absolute;left:0;top:0;pointer-events:auto;font-size:.7rem;font-weight:600;display:flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;border:1px solid var(--cn-purple-100);background:var(--cn-surface);color:var(--cn-ink);cursor:pointer;white-space:nowrap;box-shadow:0 1px 3px rgba(28,4,80,.18);transform:translate(-50%,-50%)}
.xl b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--cn-purple);color:#fff;font-size:.68rem}
.xl.dim{opacity:.35}
.xl.on{border-color:var(--cn-purple);background:var(--cn-purple);color:#fff}
.xl.on b{background:#fff;color:var(--cn-purple)}
.cl{position:absolute;left:0;top:0;font-size:.64rem;line-height:1.25;max-width:220px;background:var(--cn-surface);border:1px solid var(--cn-line);border-radius:6px;padding:3px 7px;box-shadow:0 1px 3px rgba(28,4,80,.14)}
.cl u{position:absolute;width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cn-purple);border:1px solid #fff}
.cl s{position:absolute;height:1px;background:var(--cn-purple-300);transform-origin:0 50%;z-index:-1}
.cl b{display:block;font-weight:600}
.cl span{display:block;color:var(--cn-ink-muted)}
.cl.tube{border-left:3px solid var(--cn-purple)}
.cl.tube b{color:var(--accent)}
.cl.vessel{white-space:nowrap;max-width:none}
.cl.vessel u{background:var(--cn-ink-muted)}
.cl.vessel span{display:inline;font-weight:400}

/* data drawer */
.dtop{display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--cn-line);padding-right:6px;flex:none}
.dtop .tabs{border-bottom:0;flex:1;min-width:0;flex-wrap:wrap;row-gap:2px}   /* ten tabs do not fit one row on a 1280 screen: wrap rather than cut them off */
.dtop .x{margin-bottom:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.drawer{position:absolute;left:calc(var(--tree-w) + 16px);right:8px;bottom:8px;height:min(70%,540px);background:var(--panel);backdrop-filter:blur(6px);border:1px solid var(--cn-line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;z-index:22;overflow:hidden}
.drawer[hidden]{display:none}
.tree-closed .drawer{left:8px}
.insp-open .drawer{right:calc(var(--insp-w) + 16px)}
.dtools{display:flex;gap:6px;align-items:center;padding:8px 12px 0;flex:none;flex-wrap:wrap}
.dtools input[type=search]{height:28px;border:1px solid var(--cn-line);border-radius:6px;background:var(--cn-surface);padding:0 8px;font-size:.76rem;width:180px}
.dtools .note{font-size:.72rem;color:var(--cn-ink-muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtools select{height:28px;border:1px solid var(--cn-line);border-radius:6px;background:var(--cn-surface);padding:0 6px;font-size:.76rem;max-width:260px}
table{border-collapse:collapse;width:100%;font-size:.74rem;table-layout:fixed}
th,td{padding:5px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--cn-line)}
th{background:var(--cn-purple);color:#fff;font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
td.v{font-variant-numeric:tabular-nums;white-space:nowrap}
td .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
tr.more{cursor:pointer}
tr.more:hover td{background:var(--cn-purple-50)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-content:start}
.card{background:var(--cn-surface-alt);border:1px solid var(--cn-line);border-radius:8px;padding:8px 12px;font-size:.78rem;line-height:1.5}
.card h3{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.sim{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;height:100%}
.sums{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-content:start;min-width:0}
.sums div{min-width:0;overflow:hidden;background:var(--cn-surface-alt);border:1px solid var(--cn-line);border-radius:6px;padding:3px 8px;cursor:default}
.sums b{display:block;font-size:.9rem;color:var(--accent);font-variant-numeric:tabular-nums}
.sums span{display:block;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cn-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:0;height:100%}
.plot{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;background:var(--cn-surface-alt);border:1px solid var(--cn-line);border-radius:6px;padding:4px 8px}
.plot h4{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.plot h4 i{display:inline-block;width:14px;height:0;border-top:2px solid;vertical-align:middle;margin:0 3px 0 6px}
.plot h4 i.d{border-top-style:dashed}
.plot canvas{flex:1 1 0;height:0;min-height:0;width:100%;min-width:0;display:block}
.simsw{display:none}

/* status bar */
.status{display:flex;align-items:center;gap:12px;padding:0 12px;border-top:1px solid var(--cn-line);background:var(--cn-surface-alt);font-size:.7rem;color:var(--cn-ink-muted);white-space:nowrap;overflow:hidden;min-width:0}
.status .cav{color:var(--cn-ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0}
.status .cav b{color:var(--assumed)}
.status button{border:1px solid var(--cn-line);background:var(--cn-surface);border-radius:999px;height:22px;padding:0 8px;font-size:.68rem;cursor:pointer;flex:none}
.status .r{margin-left:auto;display:flex;gap:12px;flex:none}
.status .r b{color:var(--cn-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* popover + dialog */
.tip{position:fixed;z-index:80;max-width:min(420px,92vw);background:var(--cn-surface);border:1px solid var(--cn-line);border-left:3px solid var(--cn-purple);border-radius:8px;box-shadow:var(--shadow);padding:8px 12px;font-size:.78rem;line-height:1.5}
.tip[hidden]{display:none}
dialog{margin:auto;max-width:min(620px,92vw);border:1px solid var(--cn-line);border-radius:12px;padding:18px 20px;background:var(--cn-surface);color:var(--cn-ink);box-shadow:var(--shadow);font-size:.84rem;line-height:1.6}
dialog::backdrop{background:rgba(28,4,80,.35)}
dialog h2{font-family:"Playfair Display",Georgia,serif;font-size:1.2rem;margin-bottom:8px}
dialog p+p{margin-top:8px}
dialog .row2{display:flex;justify-content:flex-end;margin-top:14px}

/* ---- narrow screens: panels become bottom sheets, one at a time ---- */
@media (max-width:760px){
  :root{--bar-h:44px;--status-h:28px}
  .status .r{display:none}
  .seg button{padding:0 9px}
  .seg small{display:none}
  .panel.tree,.panel.insp,.panel.spec,.drawer{left:6px;right:6px;top:auto;bottom:6px;width:auto;height:min(64%,520px)}
  .drawer{height:min(72%,600px)}
  .dtop .tabs{overflow-x:hidden;flex-wrap:wrap}
  .panel.tree{height:auto;max-height:min(70%,560px)}
  .tog kbd{display:none}
  .tog .lbl{display:inline!important}
  .tog{padding:0 8px}
  .insp-open .drawer{right:6px}
  .stitle{left:12px!important;right:110px}
  .cube-wrap{width:70px;height:70px;right:8px!important}
  .cube{inset:12px}
  .tools{top:auto;bottom:10px;max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center;border-radius:12px}
  .tools input[type=range]{width:96px}
  .sim{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .simsw{display:flex}
  .plots{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .plots .plot{display:none}
  .plots .plot.show{display:flex}
  .sums{grid-template-columns:1fr 1fr}
  .pop{left:6px!important;right:6px;min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* theme toggle */
.themebtn{border:1px solid var(--cn-line);background:var(--cn-surface);width:34px;height:32px;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:var(--cn-ink);flex:none}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
.themebtn svg{width:17px;height:17px}
/* connection dots: labels stay hidden until hovered, tapped or ticked */
.cdot{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:auto;cursor:help;display:grid;place-items:center;background:transparent;border:0;padding:0}
.cdot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--cn-purple);border:2px solid #fff;box-shadow:0 0 0 1px rgba(28,4,80,.35)}
.cdot.vessel::after{background:var(--cn-ink-muted);width:7px;height:7px}
.cdot:hover::after,.cdot.on::after{transform:scale(1.35)}
.hovertip{position:absolute;left:0;top:0;pointer-events:none;z-index:12;background:var(--cn-purple-950);color:#fff;font-size:.7rem;font-weight:500;padding:3px 8px;border-radius:6px;white-space:nowrap;transform:translate(12px,12px)}
.pop.cols{columns:2;column-gap:8px;min-width:520px}
.pop.cols .mi,.pop.cols .mhead,.pop.cols .msep{break-inside:avoid}
.pop.cols .mhead{break-after:avoid}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--cn-ink-muted);font-size:.84rem;z-index:5}
@media (max-width:760px){
  .pop.cols{columns:1;min-width:0}
  .seg button{padding:0 7px}
  .tog{padding:0 6px}
  .bar{gap:5px;padding:0 8px}
  .themebtn{width:30px}
}

/* walkthrough: full-screen overlay, spotlight, caption card, keyframe timeline */
.tourbtn{border:1px solid var(--cn-purple);background:var(--cn-purple);color:#fff;height:32px;padding:0 12px 0 9px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;white-space:nowrap;flex:none}
.tourbtn:hover{background:var(--cn-purple-900);border-color:var(--cn-purple-900)}
.tourbtn svg{width:14px;height:14px}
.toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:26;display:flex;align-items:center;gap:8px;background:var(--cn-surface);border:1px solid var(--cn-line);border-left:4px solid var(--cn-purple);border-radius:10px;box-shadow:var(--shadow);padding:8px 10px 8px 14px;font-size:.8rem;max-width:calc(100% - 24px)}
.chip.on{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff}
.tour{position:fixed;inset:0;z-index:90}
.tback{position:absolute;inset:0}
.tspot{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax rgba(10,6,28,.68);outline:2px solid rgba(241,224,204,.9);outline-offset:2px;pointer-events:none;transition:left .4s ease,top .4s ease,width .4s ease,height .4s ease}
.tour.nospot .tspot{left:50%!important;top:40%!important;width:0!important;height:0!important;outline:0}
/* A walkthrough whose subject IS the model (CFG.tourDim false) keeps the
   screen undimmed: the spotlight's 200vmax shadow is what greys the canvas,
   and on those pages the card's own surface is contrast enough. */
.tour.nodim .tspot{box-shadow:none;outline:0}
.tcard{position:fixed;left:0;top:0;width:min(420px,calc(100vw - 24px));background:var(--cn-surface);color:var(--cn-ink);border-radius:14px;border-top:4px solid var(--cn-purple);box-shadow:0 10px 40px rgba(0,0,0,.35);padding:12px 16px 10px;transition:left .4s ease,top .4s ease}
.tour.nospot .tcard{width:min(560px,calc(100vw - 24px))}
.tchap{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ttitle{font-family:"Playfair Display",Georgia,serif;font-size:1.2rem;line-height:1.2;margin:3px 0 6px}
.tbody{font-size:.84rem;line-height:1.55}
.tbody p+p{margin-top:6px}
.tbody .small{font-size:.72rem;color:var(--cn-ink-muted)}
.tbar{display:flex;align-items:center;gap:6px;margin-top:10px}
.tsp{flex:1}
.tbtn{border:1px solid var(--cn-line);background:var(--cn-surface-alt);color:var(--cn-ink);border-radius:8px;height:32px;padding:0 11px;font-size:.76rem;font-weight:600;cursor:pointer;white-space:nowrap}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.tbtn.tplay{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff;min-width:86px}
.tbtn.tx{background:transparent}
.ttimeline{position:fixed;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:12px;background:rgba(12,8,30,.9);color:#F1E0CC;border:1px solid rgba(241,224,204,.18);border-radius:999px;padding:4px 16px;font-size:.72rem;font-variant-numeric:tabular-nums}
.ttrack{position:relative;flex:1;height:30px;cursor:pointer;touch-action:none}
.ttrack:focus-visible{outline:2px solid #F1E0CC;outline-offset:2px;border-radius:6px}
.trail{position:absolute;left:0;right:0;top:14px;height:3px;border-radius:2px;background:rgba(241,224,204,.22)}
.tfill{position:absolute;left:0;top:14px;height:3px;border-radius:2px;background:#F1E0CC;width:0}
.tkeys{position:absolute;inset:0}
.tkey{position:absolute;top:10px;width:11px;height:11px;margin-left:-5.5px;transform:rotate(45deg);border:1.5px solid #B2A1D4;background:#1C0450;padding:0;cursor:pointer;border-radius:2px}
.tkey.chap{top:8.5px;width:14px;height:14px;margin-left:-7px;border-color:#F1E0CC;background:#5E319A}
.tkey.done{background:#B2A1D4}
.tkey.chap.done{background:#F1E0CC}
.tkey.cur{box-shadow:0 0 0 3px rgba(241,224,204,.55);background:#F1E0CC}
.tkey:hover{transform:rotate(45deg) scale(1.3)}
.tkeytip{position:absolute;bottom:32px;left:0;white-space:nowrap;background:#F1E0CC;color:#1C0450;font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:6px;pointer-events:none}
body.touring .toast{display:none}
@media (max-width:760px){
  .tourbtn{padding:0 8px}
  .tourbtn .lbl{display:none}
  .tcard{padding:10px 12px 8px}
  .ttitle{font-size:1.05rem}
  .tbody{font-size:.8rem}
  .tbtn{padding:0 8px}
  .ttimeline{left:6px;right:6px;bottom:6px;padding:2px 10px;gap:8px}
  .toast{flex-wrap:wrap;bottom:8px}
}
@media (min-width:761px) and (max-width:1180px){
  .tourbtn{padding:0 9px}
  .tourbtn .lbl{display:none}
  .tog kbd{display:none}
  .mbtn{padding:0 8px}
}
@media (max-width:380px){
  .bar{gap:3px;padding:0 5px}
  .seg button{padding:0 6px}
  .tog{padding:0 5px;font-size:.74rem}
  .themebtn,.tourbtn{width:30px;padding:0;justify-content:center}
}
@media (max-width:900px){
  .menus{display:none}
  .burger{display:flex}
}
@media (max-width:340px){
  .tourbtn{display:none}
}

/* ---- heart page: stations, body outline, person panel, entry form ---- */
.cdot.station{width:24px;height:24px;margin:-12px 0 0 -12px;cursor:pointer;font:600 .66rem Poppins,sans-serif;color:#fff}
.cdot.station::after{display:none}
.cdot.station{background:var(--cn-purple);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(28,4,80,.35)}
.cdot.station:hover,.cdot.station.on{transform:scale(1.2);background:var(--cn-purple-900)}
.cl.station{border-left:3px solid var(--cn-purple)}
.cl.station b{color:var(--accent)}
.cl.station.on{border-color:var(--cn-purple);background:var(--cn-purple-50)}
.stage.backdrop{background-color:var(--cn-stage)}
.stage.backdrop::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-repeat:no-repeat;background-position:50% 50%;background-size:auto 118%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 620' fill='none' stroke='%239768B8' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'><circle cx='200' cy='58' r='40'/><path d='M180 96v18M220 96v18M120 140q-40 6-62 34l-34 92q-6 22 14 30l2 0q16 4 22-14l26-70v-38'/><path d='M280 140q40 6 62 34l34 92q6 22-14 30l-2 0q-16 4-22-14l-26-70v-38'/><path d='M120 140q80-30 160 0'/><path d='M120 140q-10 90 6 180v130q0 24 20 24h108q20 0 20-24v-130q16-90 6-180'/><path d='M146 300h108'/><path d='M200 148v152'/></svg>")}
.stage.backdrop>canvas{position:relative;z-index:1}
.stage.backdrop .labels{z-index:10}
.tree .row .num.st{background:var(--cn-purple-900)}
.pchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--cn-line);background:var(--cn-surface);cursor:pointer;font-size:.74rem;font-weight:500;white-space:nowrap}
.pchip:hover{border-color:var(--accent);color:var(--accent)}
.pchip svg{width:15px;height:15px}
.pchip[hidden]{display:none}
.pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 18px;align-items:start;margin-bottom:8px}
.pf .f{display:flex;flex-direction:column;gap:4px}
.pf label{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cn-ink-muted)}
.pf .val{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.pf input[type=range]{width:100%;accent-color:var(--cn-purple);height:28px}
.pf .seg2{display:flex;gap:6px}
.pf .seg2 .chip[aria-pressed=true]{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.prow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--cn-line);font-size:.78rem}
.prow .v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.prow .lbl{min-width:0}
.prow .st{white-space:nowrap}
.prow .small{grid-column:1/-1;margin-top:-2px}
.ef{display:grid;gap:8px}
.ef label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted);margin-bottom:2px}
.ef input[type=text],.ef input[type=url],.ef input[type=password],.ef select,.ef textarea{width:100%;min-height:40px;border:1px solid var(--cn-line);border-radius:8px;background:var(--cn-surface-alt);padding:8px 10px;font:inherit;font-size:.82rem;color:inherit}
.ef textarea{min-height:64px;resize:vertical}
.ef .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ef .seg2{display:flex;gap:6px;flex-wrap:wrap}
.ef .seg2 .chip[aria-pressed=true]{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff}
.ef .seg2 .chip.red[aria-pressed=true]{background:var(--assumed);border-color:var(--assumed);color:var(--assumed-ink)}
.ef .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ef .btnp{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--cn-purple);background:var(--cn-purple);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ef .btnp:disabled{opacity:.5;cursor:default}
.ef .lockrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--cn-purple-50);border-radius:8px;padding:6px 8px;font-size:.74rem}
.ef .lockrow input{flex:1;min-width:120px;min-height:34px}
.ef .warnbox{background:var(--assumed-bg);border-left:3px solid var(--assumed);padding:6px 8px;border-radius:6px;font-size:.74rem}
.filed{border:1px solid var(--cn-line);border-left:3px solid var(--cn-purple);border-radius:6px;padding:6px 9px;font-size:.76rem;margin-bottom:6px}
.filed.assumed{border-left-color:var(--assumed)}
.filed b{display:block}
.filed span{color:var(--cn-ink-muted);font-size:.7rem}
.filed a{color:var(--accent)}

.sym{font-family:"Poppins",system-ui,sans-serif;font-style:italic;font-size:.86rem}
.sym sub{font-style:normal;font-size:.68em;line-height:0;vertical-align:-.28em;letter-spacing:.02em}
.eq.mono .sym{font-size:.8rem}

/* the kit has its own toggle in the app bar; the site bar's would be a second one */
.cn-nav .cn-nav-links .cn-theme{display:none!important}
/* pressure target bands (/public/heart) */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:0 18px;align-items:start}
.blk.band canvas.bandc{display:block;width:100%;height:100px;margin:4px 0 2px}
.blk.band .blist{margin:0;padding:0;list-style:none;font-size:12px;line-height:1.4}
.blk.band h4 .small{text-transform:none;letter-spacing:0;font-weight:400}
.blk.band .blist li{padding:2px 0;cursor:pointer}
.blk.band .blist .bk{display:inline-block;width:14px;height:8px;margin-right:6px;vertical-align:middle;background:var(--accent);opacity:.3;border-radius:2px}
.blk.band .blist .bk.max,.blk.band .blist .bk.min{background:none;opacity:1;border-top:2px dashed var(--cn-ink-muted);height:0;border-radius:0}
.blk.band .bverd{display:block;font-size:11.5px;color:var(--cn-ink-muted)}
.blk.band .bverd.warn{color:var(--assumed)}
/* documents with page links, and failure modes (/public/cad) */
a.pgl{color:inherit;text-decoration:underline dotted;text-underline-offset:2px}
.blk.docs{margin-bottom:0}
.blk.docs .doclist{list-style:none;margin:0;padding:3px 0;font-size:12px;line-height:1.45}
.blk.docs .dw{color:var(--cn-ink-muted);font-size:11.5px}
.blk.docs .dopen{white-space:nowrap;font-weight:500;color:var(--accent);text-decoration:none;margin-left:2px}
.blk.docs .dopen:hover{text-decoration:underline}
.blk.docs+.blk:not(.docs){margin-top:10px}
.blk.fsec{margin:0;padding:2px 0 4px 10px;border-left:2px solid var(--accent)}
.blk.fsec.first{margin-top:12px;padding-top:0}
.blk.fsec>h4{font-size:.78rem;letter-spacing:.01em;text-transform:none;color:inherit;margin-bottom:2px}
.blk.fsec h5{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cn-ink-muted);margin:0}
.blk.fsec p{margin:0;font-size:12px;line-height:1.45}
.blk.fsec .fparts a{margin-right:8px;white-space:nowrap}
.blk.fsec .blk.docs,.blk.docs.fsec .doclist{padding-top:1px}
#itabs{flex-wrap:wrap}
/* the What can fail button and the causes */
.failbtn{border:1px solid var(--cn-purple);background:transparent;color:var(--cn-purple);height:32px;padding:0 11px 0 9px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;white-space:nowrap;flex:none}
.failbtn:hover{background:var(--cn-purple);color:#fff}
.failbtn svg{width:15px;height:15px}
[data-theme="dark"] .failbtn{color:#CDBFE8;border-color:#8D6CC8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .failbtn{color:#CDBFE8;border-color:#8D6CC8}}
@media (max-width:900px){.failbtn{padding:0 8px}.failbtn .lbl{display:none}}
.blk.fsec.cause .cg{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted);margin-right:4px}
.blk.fsec.cause .leads{font-size:11.5px;color:var(--cn-ink-muted)}
.blk.findex{margin-bottom:0}
.blk.findex+.blk.fsec.first{margin-top:14px}
/* the blood path values on /public/cad */
.blk.stn h4{font-size:.78rem;letter-spacing:.01em;text-transform:none;color:inherit;display:flex;align-items:baseline;gap:7px}
.blk.stn h4 .n{background:var(--cn-purple);color:#fff;border-radius:5px;padding:0 6px;font-size:.72rem;font-weight:600}
:root[data-theme=dark] .blk.stn h4 .n{background:var(--accent);color:#0C1014}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .blk.stn h4 .n{background:var(--accent);color:#0C1014}}
.blk.stn h5{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cn-ink-muted);margin:0 0 2px}
.blk.stn.first{margin-top:14px}
.blk.stn.num{flex-wrap:wrap}
.blk.stn.num h5{flex-basis:100%}
.blk.stn p{font-size:12px;line-height:1.45;margin:0}
.blk.stn a{margin-right:10px;white-space:nowrap}
/* the mechanical values tab */
.blk.mech{margin-bottom:8px;padding:2px 0 4px 10px;border-left:2px solid var(--cn-line)}
.blk.mech.head{border-left:0;padding-left:0;margin-top:14px}
.blk.mech.head h4{font-size:.78rem;text-transform:none;letter-spacing:.01em;color:inherit;display:flex;gap:7px;align-items:baseline}
.blk.mech.head h4 .n{background:var(--cn-purple);color:#fff;border-radius:5px;padding:0 6px;font-size:.7rem;font-weight:600}
:root[data-theme=dark] .blk.mech.head h4 .n{background:var(--accent);color:#0C1014}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .blk.mech.head h4 .n{background:var(--accent);color:#0C1014}}
.blk.mech h5{font-size:.74rem;font-weight:600;text-transform:none;letter-spacing:0;color:inherit;margin-bottom:2px}
.blk.mech h5 .mn{display:inline-block;min-width:18px;color:var(--cn-ink-muted);font-variant-numeric:tabular-nums}
.blk.mech p{font-size:12px;line-height:1.45;margin:1px 0}
.blk.mech .mh{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted);margin-right:4px}
.blk.mech .mstate{font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted)}
.blk.mech .mstate.warn{color:var(--assumed)}
.blk.mech .mchk{font-size:11.5px;color:var(--cn-ink-muted)}
.blk.mech .mchk.warn{color:var(--assumed);font-weight:500}
.blk.mech.sourced{border-left-color:var(--cn-purple-300)}
.blk.mech.derived{border-left-color:var(--derived)}
.blk.mech.assumed,.blk.mech.unsourced{border-left-color:var(--assumed)}
/* the blood at a part: the chain, the opening it passes, its values (run 40) */
.blk.flow{margin-bottom:6px}
.blk.flow.first{margin-top:14px}
.blk.flow h4{font-size:.78rem;letter-spacing:.01em;text-transform:none;color:inherit}
.blk.flow p{font-size:12px;line-height:1.45;margin:2px 0 0}
.blk.flow p.mnote{font-size:11.5px;color:var(--cn-ink-muted);margin-top:4px}
.blk.flow select{max-width:100%}
.blk.flow.step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;align-items:baseline;padding:3px 0 3px 10px;border-left:2px solid var(--cn-line);margin-bottom:0}
.blk.flow.step .sn{grid-row:1;font-size:.66rem;font-weight:600;color:var(--cn-ink-muted);text-align:right}
.blk.flow.step a{font-weight:600}
.blk.flow.step p{grid-column:2;margin:0}
.blk.flow.step.here{border-left-color:var(--accent);background:var(--cn-purple-50)}
.blk.flow.step .hn{font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-left:6px}
.blk.flow.sim table.mt{margin-top:3px}
.blk.flow.assumed{border-left:2px solid var(--assumed);padding-left:10px}
/* the pressure at the point a part sits, in the overview (run 40) */
.blk.pt{margin-bottom:6px}
.blk.pt.first{margin-top:10px}
.blk.pt h4{font-size:.78rem;letter-spacing:.01em;text-transform:none;color:inherit}
.blk.pt h5{font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted);margin:0 0 2px;flex-basis:100%}
.blk.pt p{font-size:12px;line-height:1.45;margin:2px 0 0}
.blk.pt.num{flex-wrap:wrap;font-size:12px;line-height:1.45}
.blk.pt.assumed{border-left:2px solid var(--assumed);padding-left:10px}
/* the record behind an ASSUMED number: what was searched (run 40) */
.src.why{background:none;border:1px solid var(--assumed);color:var(--assumed);border-radius:5px;padding:0 5px;font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.src.why:hover{background:var(--assumed-bg)}
.deriv.why ul.inputs li{margin-bottom:4px}
.deriv.why h4{margin-top:8px}

/* ---- Search everything, and the key to the colours.
   An overlay rather than another drawer tab: the point is to reach a value
   without first knowing which of fourteen tabs holds it. It scrolls inside
   itself, so the page behind it still never scrolls. */
.pal{position:absolute;inset:0;background:rgba(12,6,28,.34);z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--bar-h) + 24px) 16px 16px}
.pal[hidden]{display:none}
.palbox{width:min(680px,100%);max-height:min(72vh,620px);background:var(--cn-surface);border:1px solid var(--cn-line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.palbox>input{border:0;border-bottom:1px solid var(--cn-line);background:transparent;color:var(--cn-ink);font:inherit;font-size:15px;padding:13px 15px;outline:none;flex:0 0 auto}
.palres{overflow:auto;padding:5px}
.palrow{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:7px 9px;color:var(--cn-ink);font:inherit;cursor:pointer}
.palrow:hover,.palrow.on{background:var(--cn-purple-50)}
.palkind{flex:0 0 96px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--cn-ink-muted)}
.pallab{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palsub{flex:1 1 auto;min-width:0;font-size:12px;color:var(--cn-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palst{flex:0 0 auto;margin-left:auto}
.palhint{margin:10px 11px;font-size:13px;color:var(--cn-ink-muted);line-height:1.5}
.palkey{margin:4px 11px 12px;font-size:13px}
.palkey>b{display:block;margin-bottom:7px}
.palkeyrow{display:flex;gap:9px;align-items:baseline;margin-bottom:6px;line-height:1.45}
.palkeyrow>span{flex:1 1 auto;color:var(--cn-ink-muted)}
.palkeyrow .src{flex:0 0 92px;text-align:center}
@media (max-width:720px){.palkind{flex-basis:70px}.palsub{display:none}}

/* ---- "What's new": the tutorial you drive.
   Deliberately not modal. The dimmed layer and the ring are both
   pointer-events:none, so every control stays clickable underneath and the
   step can wait for you to really use it. Only the card takes clicks. */
.coach{position:fixed;inset:0;z-index:96;pointer-events:none}
.coach[hidden]{display:none}
.cspot{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax rgba(10,6,28,.58);outline:2px solid var(--cn-purple);outline-offset:2px;pointer-events:none;transition:left .32s ease,top .32s ease,width .32s ease,height .32s ease}
.coach.nospot .cspot{left:50%!important;top:45%!important;width:0!important;height:0!important;outline:0}
.ccard{position:fixed;left:50%;top:auto;bottom:24px;width:min(400px,calc(100vw - 24px));pointer-events:auto;background:var(--cn-surface);color:var(--cn-ink);border:1px solid var(--cn-line);border-top:4px solid var(--cn-purple);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.35);padding:11px 15px 9px;transition:left .32s ease,top .32s ease}
.coach.nospot .ccard{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 24px))}
.chead{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.cstep{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--cn-ink-muted)}
.ctick{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--cn-purple);color:#fff;padding:1px 7px;border-radius:9px}
.ctitle{margin:0 0 5px;font-size:17px;line-height:1.25}
.cbody p{margin:0 0 6px;font-size:13.5px;line-height:1.5}
.cbody p.small{font-size:12.5px;color:var(--cn-ink-muted)}
.cbody p.do{background:var(--cn-purple-50);border-left:3px solid var(--cn-purple);border-radius:0 5px 5px 0;padding:6px 9px;font-weight:500}
.cbody kbd{font:600 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--cn-line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--cn-surface-alt)}
.cdots{display:flex;gap:5px;margin:8px 0 7px}
.cdot{width:16px;height:3px;border-radius:2px;background:var(--cn-line)}
.cdot.past{background:var(--cn-purple);opacity:.45}
.cdot.on{background:var(--cn-purple)}
.cbar{display:flex;align-items:center;gap:7px}
.csp{flex:1 1 auto}
.cbtn{font:inherit;font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--cn-line);background:transparent;color:var(--cn-ink);cursor:pointer}
.cbtn:hover:not(:disabled){background:var(--cn-purple-50)}
.cbtn:disabled{opacity:.4;cursor:default}
.cbtn.on{background:var(--cn-purple);border-color:var(--cn-purple);color:#fff;font-weight:600}
.cbtn.cx{color:var(--cn-ink-muted)}
@media (max-width:720px){
  .ccard{left:8px!important;right:8px;width:auto;top:auto!important;bottom:10px}
  .coach.nospot .ccard{left:8px!important;top:auto!important;bottom:10px;transform:none;width:auto}
}

/* the walkthrough chooser: two versions, anchored under the Walkthrough button */
.tourpick{position:fixed;inset:0;z-index:88;background:rgba(12,6,28,.28)}
.tourpick[hidden]{display:none}
.tpk{position:fixed;width:min(400px,calc(100vw - 24px));background:var(--cn-surface);color:var(--cn-ink);border:1px solid var(--cn-line);border-top:4px solid var(--cn-purple);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.35);padding:12px 14px 10px}
.tpk h3{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;margin:0 0 8px}
.tpopt{display:block;width:100%;text-align:left;background:var(--cn-surface-alt);color:var(--cn-ink);border:1px solid var(--cn-line);border-radius:10px;padding:10px 12px;margin:0 0 8px;cursor:pointer;font:inherit;min-height:44px}
.tpopt b{display:block;font-size:.86rem;margin-bottom:2px}
.tpopt span{display:block;font-size:.76rem;line-height:1.45;color:var(--cn-ink-muted)}
.tpopt:hover,.tpopt:focus-visible{border-color:var(--cn-purple);background:var(--cn-purple-50)}
.tpopt:focus-visible{outline:2px solid var(--cn-blue);outline-offset:2px}
.tprow{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:2px}
.tprow .tbtn{min-height:36px}
@media (prefers-reduced-motion:no-preference){.tpopt{transition:background .15s,border-color .15s}}

/* status chips in the answers walkthrough: text carries the meaning, colour only helps */
.tst{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:999px;margin:0 6px 6px 0;border:1px solid transparent}
.tst.yes{background:var(--cn-purple);color:#fff}
.tst.part{background:var(--cn-blue);color:#fff}
.tst.no{background:var(--cn-red);color:#fff}
.tst.who{background:transparent;color:var(--cn-ink-muted);border-color:var(--cn-line)}

/* a walkthrough step about the drawer: the drawer yields its right strip to the card */
body.tour-side .drawer{left:8px;right:calc(min(420px,100vw - 24px) + 20px)}

/* operating conditions tab */
.blk.ops.role{padding:4px 0 0}
.blk.ops.role h5{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cn-ink-muted);margin:6px 0 2px}
.blk.ops.role.peer{border-top:1px dashed var(--cn-line);margin-top:8px;padding-top:8px}
.blk.stn.num.ops.peer{opacity:.92}
.blk.ops h4 a{font-weight:500;margin-left:8px}

/* operating conditions: charts first, then the spec cards */
.opsvg{width:100%;height:auto;display:block;font-family:"Poppins",system-ui,sans-serif}
.opsvg .ct{font-size:12px;font-weight:600;fill:var(--cn-ink)}
.opsvg .ca,.opsvg .cs{font-size:10px;fill:var(--cn-ink-muted)}
.opsvg .cn{font-size:11px;font-weight:700;fill:var(--cn-ink)}
.opsvg .cv{font-size:9.5px;font-weight:600}
.opsvg .cb{font-size:9px;fill:var(--cn-ink-muted)}
.opsvg .cg{stroke:var(--cn-line);stroke-width:1}
.opsvg .cl{stroke-width:1.2;stroke-dasharray:4 3}
.blk.ops.chart{padding:6px 0 4px}
.csrc{margin:4px 0 0;color:var(--cn-ink-muted)}
.opks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:6px}
.opk{background:var(--cn-surface-alt);border:1px solid var(--cn-line);border-left:3px solid var(--cn-purple);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.opk.ex{border-left-color:var(--cn-blue)}
.opk.peer{border-left-color:#6B5B87;border-style:dashed}
.opk b{font-size:1.3rem;line-height:1.1;color:var(--cn-ink);font-variant-numeric:tabular-nums}
.opk .u{font-size:.7rem;color:var(--cn-ink-muted)}
.opk .l{font-size:.72rem;color:var(--cn-ink);margin-top:2px}
.opk .k{font-size:.68rem}
.opst{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0 2px}
.opst th{text-align:left;font-weight:600;color:var(--cn-ink-muted);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;padding:4px 6px;border-bottom:1px solid var(--cn-line)}
.opst tr.role th{padding-top:8px;color:var(--cn-purple);text-transform:none;font-size:11px;letter-spacing:0;border-bottom:0}
.opst tr.role.peer th{color:#6B5B87;border-top:1px dashed var(--cn-line)}
.opst td{padding:4px 6px;border-bottom:1px solid var(--cn-line);vertical-align:top}
.opst td.qn{width:34%;color:var(--cn-ink-muted)}
.opst td.vl b{font-size:13px;color:var(--cn-ink)}
.opst tr.assumed td.vl b{color:var(--assumed)}
.opst tr.peer td{color:var(--cn-ink-muted)}
.opsfull{margin-top:6px}
.opsfull summary{cursor:pointer;font-size:12px;color:var(--cn-purple);font-weight:600;min-height:32px;display:flex;align-items:center}

.opsh{font-size:.84rem;font-weight:600;margin:0 0 2px;color:var(--cn-ink)}
.oplg{margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--cn-ink-muted)}
.opsw{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.opsw i{display:inline-block;width:12px;height:12px;border-radius:3px}
.blk.ops.grp{padding:0 0 4px}
.opst thead th.role{padding-top:6px;color:var(--cn-purple);text-transform:none;font-size:11.5px;letter-spacing:0;border-bottom:1px solid var(--cn-line)}
.opst thead th.role.peer{color:#6B5B87;font-weight:500}

/* the pager breaks a page on any horizontal overflow, so nothing here may be wider than the drawer */
.opst{table-layout:fixed}
.opst td,.opst th{overflow-wrap:anywhere;word-break:break-word}
.opst td.src{width:32%}
.opst td.src .src{white-space:normal}
.opscroll{overflow-x:auto;overflow-y:hidden;max-width:100%}
@media (max-width:760px){.opscroll .opsvg{min-width:680px}.opst td.qn{width:30%}.opst td.src{width:30%}}

/* the working envelope panel */
.spec{width:min(420px,calc(100vw - 16px))}
.spechead,.specfoot{padding:6px 12px 4px;font-size:12px;flex:none}
.spechead .chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.spechead .chips .chip{min-width:32px;justify-content:center}
.spechead h3{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;margin:2px 0 4px}
.spechead .must{margin:0 0 2px;color:var(--cn-ink);font-size:12px;line-height:1.45}
.specfoot .note{color:var(--cn-ink-muted);margin:2px 0 6px;font-size:10.5px;line-height:1.4}
.tenv{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.tenv th{text-align:left;font-weight:600;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--cn-ink-muted);padding:3px 4px;border-bottom:1px solid var(--cn-line)}
.tenv td{padding:4px 4px;border-bottom:1px solid var(--cn-line);vertical-align:top;overflow-wrap:anywhere}
.tenv td.lb{width:38%}
.tenv td.lb .w{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--cn-purple);font-weight:600}
.tenv td.n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--cn-ink);font-size:13px;width:13%}
.tenv td.na{color:var(--cn-ink-muted);font-size:10.5px;width:13%}
.tenv td.u{color:var(--cn-ink-muted);font-size:10.5px;width:9%}
.tenv tr.ex td.n{color:var(--cn-blue)}
.tenv tr.peer td{color:var(--cn-ink-muted)}
.tenv tr.peer td.n{color:#6B5B87}
.tenv tr.sep th{padding-top:8px;text-transform:none;letter-spacing:0;color:#6B5B87;border-bottom:1px dashed var(--cn-line)}
.tour .tenv{margin:6px 0 2px}
.tour .tenv td.lb{width:44%}

.tenv td.lb{width:34%;line-height:1.3}
.tenv td.lb .w{display:block;font-size:9px;letter-spacing:.03em}
.tenv td.n .mn{display:block;font-weight:500;font-size:10.5px;color:var(--cn-ink-muted)}
.tenv.brief td.lb{width:46%}
.tenv.brief td.n{width:40%;font-size:13px}
.tenv td.src{font-size:10px;line-height:1.5}
.tenv td.src .src{white-space:normal}
.spec #spg{padding:0 12px}
.spec #spg .pgbody table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11.5px}
.tenv td.lb{width:27%}
.tenv td.src{width:27%;font-size:10px}
.tenv td.src .src{white-space:nowrap;margin:0 3px 2px 0}
.tenv td.na{font-size:10px}

.tenv td.lb{width:31%;overflow-wrap:normal;word-break:normal}
.tenv td.src{width:24%}
@media (max-width:760px){.spechead .must,.specfoot .note{display:none}.spechead{padding:4px 10px 0}.specfoot{padding:2px 10px 6px}.spec #spg{padding:0 8px}.tenv td.src{width:22%}}
/* these tables sit on the panel surface: no purple header band, so the muted header text keeps its contrast */
.tenv th,.opst th,.tenv tr.sep th,.opst tr.role th,.opst thead th.role{background:transparent}
.tenv th{color:var(--cn-ink-muted)}
/* the walkthrough card never runs under the timeline: it caps its height to the room above the bar and scrolls its body instead */
.tcard{display:flex;flex-direction:column;max-height:calc(100dvh - 96px);box-sizing:border-box}
.tcard .tbody{flex:1 1 auto;min-height:0;overflow:auto}
.tcard .tbar{flex:none}

/* the primer: four small physics animations over the stage */
.primer{position:absolute;left:24px;top:calc(var(--bar-h) + 44px);width:min(620px,calc(100% - 48px));background:var(--panel);backdrop-filter:blur(6px);border:1px solid var(--cn-line);border-radius:var(--r);box-shadow:var(--shadow);z-index:23;display:flex;flex-direction:column;overflow:hidden}
.primer[hidden]{display:none}
.primer .phead{gap:8px}
.primer .phead .tabs{flex:1 1 auto;margin:0 6px;display:flex;gap:2px;flex-wrap:wrap}
.primer .pbody{padding:8px 12px 10px;font-size:12px;line-height:1.45}
.primer canvas{width:100%;height:auto;display:block;background:var(--cn-surface);border:1px solid var(--cn-line);border-radius:8px}
.primer .pctl{display:flex;align-items:center;gap:10px;margin:8px 0 4px;flex-wrap:wrap}
.primer .pctl label{flex:0 0 auto;font-size:11px;color:var(--cn-ink-muted)}
.primer .pctl input[type=range]{flex:1 1 160px;min-height:32px;accent-color:var(--cn-purple)}
.primer .pval{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}
.primer .pread{margin:4px 0 6px;padding:6px 8px;border-radius:8px;background:var(--cn-surface-alt)}
.primer .ptone{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:999px;margin-right:6px;color:#fff;background:var(--cn-purple)}
.primer .ptone.mid{background:var(--cn-blue)}
.primer .ptone.bad{background:var(--cn-red)}
.primer .pmeas p{margin:3px 0;color:var(--cn-ink)}
@media (max-width:760px){.primer{left:6px;right:6px;width:auto;top:calc(var(--bar-h) + 8px);max-height:min(36%,calc(100% - var(--bar-h) - 60px))}.primer .pbody{overflow:auto;min-height:0;padding:6px 10px 8px}.primer canvas{max-height:96px;object-fit:contain}.primer .pmeas{display:none}}
@media (max-width:760px){.tcard{max-height:min(34dvh,calc(100dvh - 96px))}}

/* operating charts: series colours as tokens with their own dark steps; hatch and dash as the second code */
:root{--ops-inlet:#055AD0;--ops-outlet:#5E319A;--ops-ex:#7B4BC0;--ops-peer:#6B5B87;--ops-limit:#CE191E}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ops-inlet:#5C9CFF;--ops-outlet:#B48CFF;--ops-ex:#9E7BE0;--ops-peer:#A79ABF;--ops-limit:#E17C7F}}
:root[data-theme=dark]{--ops-inlet:#5C9CFF;--ops-outlet:#B48CFF;--ops-ex:#9E7BE0;--ops-peer:#A79ABF;--ops-limit:#E17C7F}
.opsvg .pbg{fill:var(--ops-inlet);opacity:.35}.opsvg .pln{stroke:var(--ops-inlet);stroke-width:2}
.opsvg .pbg.ex{fill:var(--ops-ex);opacity:.3}.opsvg .pln.ex{stroke:var(--ops-ex);stroke-width:2}
.opsvg g.bar{cursor:pointer;outline:none}
.opsvg g.bar .hit{fill:transparent}
.opsvg g.bar .mk{stroke-width:1.5}
.opsvg g.s-inlet .mk{stroke:var(--ops-inlet)}
.opsvg g.s-outlet .mk{fill:var(--ops-outlet);stroke:var(--ops-outlet)}
.opsvg g.s-ex .mk{stroke:var(--ops-ex)}
.opsvg g.s-peer .mk{fill:none;stroke:var(--ops-peer)}
.opsvg g.s-inlet .pt{stroke:var(--ops-inlet);stroke-width:3}.opsvg g.s-outlet .pt{stroke:var(--ops-outlet);stroke-width:3}.opsvg g.s-ex .pt{stroke:var(--ops-ex);stroke-width:3}.opsvg g.s-peer .pt{stroke:var(--ops-peer);stroke-width:3}
.opsvg g.bar .mean{stroke:#fff;stroke-width:1.5}
.opsvg g.s-inlet .cv,.opsvg g.s-inlet .off{fill:var(--ops-inlet)}.opsvg g.s-outlet .cv,.opsvg g.s-outlet .off{fill:var(--ops-outlet)}.opsvg g.s-ex .cv,.opsvg g.s-ex .off{fill:var(--ops-ex)}.opsvg g.s-peer .cv,.opsvg g.s-peer .off{fill:var(--ops-peer)}
.opsvg g.bar:hover .mk,.opsvg g.bar:focus-visible .mk,.opsvg g.bar.on .mk{stroke-width:3;filter:brightness(1.12)}
.opsvg g.bar:hover .pt,.opsvg g.bar:focus-visible .pt,.opsvg g.bar.on .pt{stroke-width:5}
.opsvg g.bar:focus-visible .hit{stroke:var(--cn-blue);stroke-width:2;stroke-dasharray:4 3}
.opsvg .cl.limit{stroke:var(--ops-limit)}.opsvg .cb.limit{fill:var(--ops-limit)}
.oplg .opsw{border:1px solid var(--cn-line);background:var(--cn-surface);color:var(--cn-ink);border-radius:999px;padding:3px 9px 3px 6px;font:inherit;font-size:11.5px;cursor:pointer;min-height:28px}
.oplg .opsw:hover{border-color:var(--cn-purple)}
.oplg .opsw:focus-visible{outline:2px solid var(--cn-blue);outline-offset:2px}
.oplg .opsw.off{opacity:.5;text-decoration:line-through}
.oplg .opsw i{width:14px;height:12px;border-radius:3px;border:1.5px solid transparent}
.oplg .opsw.s-inlet i{background:repeating-linear-gradient(45deg,var(--ops-inlet) 0 2px,transparent 2px 5px);border-color:var(--ops-inlet)}
.oplg .opsw.s-outlet i{background:var(--ops-outlet)}
.oplg .opsw.s-ex i{background:repeating-linear-gradient(135deg,var(--ops-ex) 0 2px,transparent 2px 5px);border-color:var(--ops-ex)}
.oplg .opsw.s-peer i{border:1.5px dashed var(--ops-peer);background:transparent}
.oplg .opsw.note{border:0;background:transparent;cursor:default;color:var(--cn-ink-muted)}
.tip .tv{display:block;font-size:15px;color:var(--cn-ink)}
.tip .tl{color:var(--cn-ink);margin-top:2px}
.tip .ts{color:var(--cn-ink-muted)}
.tip .tk{margin-top:4px}
/* the data drawer filling the screen (Operating conditions, Full screen) */
.drawer.full{left:8px;right:8px;top:calc(var(--bar-h) + 8px);bottom:8px;height:auto;z-index:24}