/* ===== Tokens ===== */
:root{
  --bg:#020617; --bg2:#060c1a; --panel:#0b1424; --panel2:#101c31;
  --line:#1e2b45; --line2:#2b3d5e;
  --text:#f1f5f9; --muted:#93a4bd; --dim:#64748b;
  --green:#22c55e; --green-d:#15803d; --green-s:rgba(34,197,94,.12);
  --blue:#38bdf8; --blue-s:rgba(56,189,248,.12);
  --amber:#f59e0b; --amber-s:rgba(245,158,11,.12);
  --red:#ef4444; --red-s:rgba(239,68,68,.12);
  --violet:#a78bfa;
  --r:18px; --r-sm:12px;
  --shadow:0 18px 40px -20px rgba(0,0,0,.9);
  --max:1180px;
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 700px at 80% -10%,#0d1b33 0%,transparent 60%),var(--bg);
  color:var(--text); font-family:var(--font); font-weight:400; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.25; font-weight:600; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
.mono{font-family:var(--mono); font-size:.92em; direction:ltr; unicode-bidi:isolate}
.green{color:var(--green)} .amber{color:var(--amber)} .blue{color:var(--blue)}
.tiny{font-size:.82rem; color:var(--dim); line-height:1.6}
.center{text-align:center}
[data-lucide]{width:18px; height:18px; stroke-width:1.75; flex:none}

/* ===== Nav ===== */
.nav{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(2,6,23,.78); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max); margin:auto; padding:12px 22px; display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.05rem; white-space:nowrap}
.brand-mark{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--green),#0e7490); color:#04140a; box-shadow:0 0 22px rgba(34,197,94,.35)}
.brand-mark [data-lucide]{width:19px;height:19px}
.brand-text{font-family:var(--mono); letter-spacing:.02em; direction:ltr}
.brand-text b{color:var(--green)}
.nav-links{display:flex; gap:2px; margin-inline-start:auto; flex-wrap:wrap}
.nav-links a{padding:7px 11px; border-radius:9px; font-size:.9rem; color:var(--muted); transition:.2s}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-cta{display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:11px;
  background:var(--green); color:#04170b; font-weight:600; font-size:.9rem; transition:.22s}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px var(--green)}

/* ===== Layout ===== */
.section, .hero-inner{max-width:var(--max); margin:auto; padding-inline:22px}
.section{padding-block:78px}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 70%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:none; padding-inline:0}
.section.alt > *{max-width:var(--max); margin-inline:auto; padding-inline:22px}
.section-head{display:flex; gap:18px; align-items:flex-start; margin-bottom:38px}
.secnum{font-family:var(--mono); font-size:.78rem; color:var(--green); border:1px solid var(--line2);
  background:var(--green-s); border-radius:8px; padding:5px 9px; margin-top:6px; flex:none}
.section-head h2{font-size:clamp(1.45rem,2.6vw,2.05rem)}
.sub{color:var(--muted); margin-top:8px; font-size:.98rem; max-width:62ch}
.prose p{color:#cbd5e1; font-size:1.02rem; margin-bottom:16px; max-width:74ch}
/* ===== Hero ===== */
.hero{position:relative; overflow:hidden; padding-block:64px 72px}
.hero-glow{position:absolute; inset-inline-start:-10%; top:-30%; width:60%; height:120%;
  background:radial-gradient(circle,rgba(34,197,94,.16),transparent 62%); filter:blur(20px); pointer-events:none}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; position:relative}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:.8rem; color:var(--green);
  border:1px solid rgba(34,197,94,.3); background:var(--green-s); padding:6px 13px; border-radius:99px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.16)}
h1{font-size:clamp(2rem,4.6vw,3.4rem); margin:20px 0 18px; font-weight:700; line-height:1.15}
.grad{background:linear-gradient(100deg,var(--green) 10%,#34d399 45%,var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{color:#b6c4d8; font-size:1.03rem; max-width:52ch}
.chain{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:26px 0 22px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:10px;
  border:1px solid var(--line2); background:var(--panel); font-size:.83rem; color:#cbd5e1; transition:.22s}
.chip [data-lucide]{width:15px;height:15px; color:var(--green)}
.chip:hover{transform:translateY(-2px); border-color:var(--green); box-shadow:0 8px 18px -12px var(--green)}
.chain .arrow{color:var(--dim); display:flex}
.chain .arrow [data-lucide]{width:14px;height:14px}
.hero-stats{display:flex; gap:26px; padding-top:20px; border-top:1px solid var(--line)}
.hero-stats div{display:flex; flex-direction:column}
.hero-stats b{font-family:var(--mono); font-size:1.12rem; color:var(--text)}
.hero-stats span{font-size:.78rem; color:var(--dim)}

/* ===== Sim cards ===== */
.hero-visual{position:relative}
.sim-card{background:linear-gradient(180deg,rgba(16,28,49,.92),rgba(6,12,26,.92));
  border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.sim-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.sim-title{display:flex; align-items:center; gap:8px; font-size:.85rem; color:#cbd5e1}
.sim-title [data-lucide]{color:var(--green); width:16px;height:16px}
.live{display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--green)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
canvas{display:block; width:100%; height:auto}
.sim-foot{display:flex; justify-content:space-between; gap:10px; padding:10px 16px;
  border-top:1px solid var(--line); font-size:.75rem; color:var(--dim)}
.float-tag{position:absolute; bottom:-18px; inset-inline-start:-14px; display:flex; align-items:center; gap:9px;
  background:var(--panel2); border:1px solid var(--line2); border-radius:12px; padding:10px 14px;
  font-size:.78rem; color:#cbd5e1; box-shadow:var(--shadow)}
.float-tag [data-lucide]{color:var(--blue); width:16px;height:16px}
/* ===== Cards & grids ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:.25s}
.card:hover{transform:translateY(-3px); border-color:var(--line2); box-shadow:var(--shadow)}
.card h3{font-size:1.02rem; margin-bottom:8px}
.card p{color:var(--muted); font-size:.9rem}
.card-ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px}
.card-ico.blue{background:var(--blue-s); color:var(--blue)}
.card-ico.green{background:var(--green-s); color:var(--green)}
.card-ico.amber{background:var(--amber-s); color:var(--amber)}
.formula-card{display:flex; flex-direction:column; gap:10px}
.tag{align-self:flex-start; font-size:.72rem; padding:4px 9px; border-radius:7px; font-weight:500}
.tag.blue{background:var(--blue-s); color:var(--blue)}
.tag.amber{background:var(--amber-s); color:var(--amber)}
.tag.green{background:var(--green-s); color:var(--green)}
.tag.red{background:var(--red-s); color:var(--red)}
.formula{font-family:var(--mono); direction:ltr; unicode-bidi:isolate; font-size:1.02rem;
  background:#060d1b; border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:#e2e8f0}
.mini{font-family:var(--mono); font-size:.78rem; color:var(--dim); direction:ltr; text-align:left;
  border-top:1px dashed var(--line); padding-top:9px}

/* ===== Callouts ===== */
.callout{display:flex; gap:13px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-sm);
  margin-top:26px; border:1px solid; font-size:.92rem; color:#dbe4f0}
.callout p{font-size:.92rem; line-height:1.8}
.callout [data-lucide]{margin-top:4px}
.callout.warn{background:var(--amber-s); border-color:rgba(245,158,11,.3)}
.callout.warn [data-lucide]{color:var(--amber)}
.callout.tip{background:var(--green-s); border-color:rgba(34,197,94,.3); margin-top:0}
.callout.tip [data-lucide]{color:var(--green)}
.callout.bad{background:var(--red-s); border-color:rgba(239,68,68,.32)}
.callout.bad [data-lucide]{color:var(--red)}

/* ===== Tables ===== */
.table-wrap{margin-top:30px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel)}
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{text-align:start; padding:13px 16px; background:rgba(255,255,255,.03); color:#cbd5e1;
  font-weight:600; font-size:.83rem; border-bottom:1px solid var(--line)}
.tbl td{padding:13px 16px; border-bottom:1px solid rgba(30,43,69,.7); color:var(--muted); vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(255,255,255,.02); color:#e2e8f0}
.tbl td b{color:var(--text); font-weight:500}
.tbl.compact td{padding:10px 16px}

/* ===== Steps ===== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px}
.step{display:flex; gap:13px; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm)}
.step .n{width:30px;height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  font-family:var(--mono); font-size:.85rem; background:var(--green-s); color:var(--green); border:1px solid rgba(34,197,94,.3)}
.step h4{font-size:.95rem; margin-bottom:5px}
.step p{font-size:.86rem; color:var(--muted)}
/* ===== Circuits / schematics ===== */
.circuit-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.circuit-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px; transition:.25s}
.circuit-card:hover{border-color:var(--line2)}
.circuit-card.wide{grid-column:1/-1; margin-top:18px}
.circuit-card header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.circuit-card h3{font-size:1.05rem}
.badge{font-size:.72rem; padding:4px 10px; border-radius:7px; font-weight:500}
.badge.green{background:var(--green-s); color:var(--green)}
.badge.amber{background:var(--amber-s); color:var(--amber)}
.badge.red{background:var(--red-s); color:var(--red)}
.svg-wrap{background:radial-gradient(circle at 50% 40%,#0a1526,#050b16 75%); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:14px; position:relative; overflow:hidden}
.svg-wrap svg{width:100%; height:auto; display:block; overflow:visible}
.cap{font-size:.86rem; color:var(--muted); margin-top:14px}
.props{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.props li{font-size:.83rem; color:var(--muted); display:flex; gap:8px; align-items:baseline}
.props li::before{content:""; width:5px;height:5px;border-radius:50%; background:var(--green); flex:none; margin-top:7px}
.props li b{color:#cbd5e1; font-weight:500}
.bridge-layout{display:grid; grid-template-columns:1.25fr .75fr; gap:20px; align-items:start}
.bridge-side{display:flex; flex-direction:column; gap:14px}
.switch{display:flex; gap:6px; background:#060d1b; border:1px solid var(--line); border-radius:11px; padding:5px}
.sw-btn{flex:1; padding:8px 10px; border-radius:8px; font-size:.83rem; color:var(--muted); transition:.2s}
.sw-btn.active{background:var(--green); color:#04170b; font-weight:600}
.bridge-note{font-size:.86rem; color:#cbd5e1; min-height:66px; line-height:1.8}
.legend{display:flex; flex-wrap:wrap; gap:12px; font-size:.76rem; color:var(--dim)}
.legend span{display:flex; align-items:center; gap:6px}
.sw{width:16px; height:3px; border-radius:2px; display:inline-block}
.sw-green{background:var(--green)} .sw-dim{background:#334155} .sw-flow{background:var(--amber)}

/* SVG internals */
.wire{stroke:#5b7397; stroke-width:2.4; fill:none; stroke-linecap:round; transition:.25s}
.part-g{cursor:pointer}
.part-g:hover .part-hit{stroke:rgba(34,197,94,.35)}
.part-g .part-hit{fill:transparent; stroke:transparent; stroke-width:14; transition:.2s}
.part-g.is-active .comp{stroke:var(--green); filter:drop-shadow(0 0 7px rgba(34,197,94,.75))}
.part-g.is-active .lead{stroke:var(--green)}
.comp{stroke:#93a4bd; stroke-width:2.4; fill:none; transition:.25s}
.cond{stroke:#64748b; stroke-width:2.4; fill:none; transition:.3s}
.cond.on{stroke:var(--green); filter:drop-shadow(0 0 8px rgba(34,197,94,.8))}
.dim{opacity:.28; transition:.3s}
.flow{stroke:var(--amber); stroke-width:3; fill:none; stroke-dasharray:7 6; opacity:0; transition:.3s}
.flow.on{opacity:1; animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.lbl{fill:#94a3b8; font-family:'JetBrains Mono',monospace; font-size:12px; direction:ltr}
.lbl-ar{fill:#cbd5e1; font-family:'IBM Plex Sans Arabic',sans-serif; font-size:12.5px}
.lbl-hi{fill:var(--green); font-family:'JetBrains Mono',monospace; font-size:12px}
.node{fill:#5b7397}
/* ===== Explorer (parts) ===== */
.explorer{display:grid; grid-template-columns:1.5fr .9fr; gap:18px; align-items:start}
.svg-wrap.big{padding:18px; min-height:330px}
.diagram-hint{position:absolute; top:10px; inset-inline-end:12px; display:flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--dim); background:rgba(5,11,22,.85); border:1px solid var(--line);
  padding:4px 9px; border-radius:8px; pointer-events:none}
.part-side{display:flex; flex-direction:column; gap:14px}
.part-list{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.part-btn{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); font-size:.82rem; color:#cbd5e1;
  transition:.2s; text-align:start}
.part-btn em{font-style:normal; font-size:.7rem; color:var(--dim); margin-inline-start:auto}
.part-btn [data-lucide]{width:15px;height:15px; color:var(--muted)}
.part-btn:hover{border-color:var(--line2); transform:translateY(-1px)}
.part-btn.active{border-color:var(--green); background:var(--green-s); color:#eafff2}
.part-btn.active [data-lucide]{color:var(--green)}
.part-detail{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line2);
  border-radius:var(--r); padding:18px}
.part-detail h4{font-size:1rem; display:flex; align-items:center; gap:8px; margin-bottom:4px}
.part-detail h4 [data-lucide]{color:var(--green)}
.pd-sub{font-size:.76rem; color:var(--dim); font-family:var(--mono); direction:ltr; text-align:right; margin-bottom:12px}
.pd-row{display:flex; gap:10px; padding:9px 0; border-top:1px solid rgba(43,61,94,.55); font-size:.85rem}
.pd-row span{color:var(--dim); flex:none; width:74px; font-size:.78rem}
.pd-row p{color:#cbd5e1; line-height:1.7}

/* ===== Controls & simulator ===== */
.sim-grid{display:grid; grid-template-columns:1.45fr .8fr; gap:20px; margin-top:26px; align-items:start}
.sim-grid.big{margin-top:0}
.sim-panel{background:linear-gradient(180deg,rgba(16,28,49,.9),rgba(6,12,26,.9));
  border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.seg{display:flex; gap:4px; background:#060d1b; border:1px solid var(--line); border-radius:9px; padding:4px}
.seg-btn{padding:5px 10px; border-radius:6px; font-size:.76rem; color:var(--muted); transition:.2s}
.seg-btn.active{background:var(--green-s); color:var(--green)}
.readouts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line)}
.readouts div{background:#060d1b; padding:11px 12px; display:flex; flex-direction:column; gap:3px}
.readouts span{font-size:.7rem; color:var(--dim)}
.readouts b{font-size:.95rem; color:#e2e8f0}
.controls{display:flex; flex-direction:column; gap:16px}
.control-block{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px}
.control-block label{display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:.86rem; color:#cbd5e1; margin-bottom:10px}
.control-block label b{color:var(--green); font-size:.86rem}
input[type=range]{-webkit-appearance:none; width:100%; height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--green),#0e7490); outline:none; direction:ltr}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px;height:18px; border-radius:50%;
  background:#eafff2; border:3px solid var(--green); cursor:pointer; box-shadow:0 0 12px rgba(34,197,94,.6)}
input[type=range]::-moz-range-thumb{width:16px;height:16px; border-radius:50%; background:#eafff2;
  border:3px solid var(--green); cursor:pointer}
.hint{font-size:.76rem; color:var(--dim); margin-top:9px; line-height:1.6}
.formula-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px;
  display:flex; flex-direction:column; gap:10px}

/* ===== Videos ===== */
.video-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px; margin-top:26px}
.video-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  cursor:pointer; transition:.25s; position:relative}
.video-card:hover{transform:translateY(-4px); border-color:var(--line2); box-shadow:var(--shadow)}
.vthumb{position:relative; aspect-ratio:16/9; background:#060d1b; overflow:hidden}
.vthumb img{width:100%; height:100%; object-fit:cover; opacity:.88; transition:.3s}
.video-card:hover .vthumb img{opacity:1; transform:scale(1.04)}
.play{position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  background:rgba(34,197,94,.92); color:#04170b; display:grid; place-items:center;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.9); transition:.25s}
.play [data-lucide]{width:20px;height:20px; margin-inline-start:2px}
.video-card:hover .play{transform:scale(1.1)}
.vbadge{position:absolute; top:9px; inset-inline-start:9px; z-index:2; font-size:.68rem; padding:3px 8px;
  border-radius:6px; font-weight:600; letter-spacing:.02em}
.vbadge.ar{background:rgba(34,197,94,.92); color:#04170b}
.vbadge.en{background:rgba(56,189,248,.92); color:#03212e}
.video-card h4{font-size:.92rem; padding:13px 14px 4px; font-weight:500; line-height:1.5}
.vmeta{font-size:.76rem; color:var(--dim); padding:0 14px 13px}
.video-card iframe{width:100%; aspect-ratio:16/9; border:0; display:block}
/* ===== Safety ===== */
.safety-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.s-item{display:flex; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); transition:.25s}
.s-item:hover{border-color:rgba(239,68,68,.4); transform:translateY(-2px)}
.s-item > [data-lucide]{color:var(--red); margin-top:3px}
.s-item b{font-size:.92rem; display:block; margin-bottom:5px}
.s-item p{font-size:.82rem; color:var(--muted); line-height:1.7}

/* ===== Footer ===== */
.foot{border-top:1px solid var(--line); background:#040a14; padding-block:38px; margin-top:20px}
.foot-inner{max-width:var(--max); margin:auto; padding-inline:22px; display:grid;
  grid-template-columns:1.2fr auto; gap:18px; align-items:center}
.foot b{font-size:1rem}
.foot p{font-size:.82rem; color:var(--dim); margin-top:5px}
.foot-links{display:flex; gap:14px; flex-wrap:wrap; font-size:.84rem; color:var(--muted)}
.foot-links a:hover{color:var(--green)}
.credit{grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; font-size:.76rem !important}

/* ===== Motion ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ===== Responsive ===== */
@media (max-width:1020px){
  .hero-inner,.explorer,.sim-grid,.bridge-layout{grid-template-columns:1fr}
  .grid-3,.steps,.safety-grid{grid-template-columns:1fr 1fr}
  .circuit-grid{grid-template-columns:1fr}
  .hero{padding-block:40px}
  .float-tag{position:static; margin-top:12px}
  .nav-links{display:none}
}
@media (max-width:640px){
  .section{padding-block:52px}
  .grid-3,.steps,.safety-grid,.readouts,.part-list{grid-template-columns:1fr}
  .readouts{grid-template-columns:1fr 1fr}
  .hero-stats{gap:16px}
  .section-head{gap:12px}
  .foot-inner{grid-template-columns:1fr}
  .nav-cta span{display:none}
  .tbl{font-size:.82rem}
  .tbl th,.tbl td{padding:10px}
}
/* diode/path conduction highlight */
.comp.on,.lead.on{stroke:var(--green); filter:drop-shadow(0 0 8px rgba(34,197,94,.8))}
.part-g.dim{opacity:.22}
#svg-supply .part-g:hover .comp,#svg-supply .part-g:hover .lead{stroke:#7dd3fc}
.sim-note{padding:10px 16px 14px; font-size:.76rem; color:var(--dim); border-top:1px solid var(--line); line-height:1.65}

/* ===== Print / save as PDF ===== */
@media print{
  body{background:#fff !important; color:#0b1220 !important}
  .nav,.hero-glow,.float-tag,.live,.diagram-hint,.seg,.nav-cta{display:none !important}
  .hero,.section,.foot,.section.alt{background:#fff !important; border-color:#e2e8f0 !important}
  .card,.circuit-card,.sim-panel,.table-wrap,.part-detail,.s-item,.step,.video-card,.controls > *{
    background:#fff !important; border-color:#d5dde8 !important; box-shadow:none !important}
  h1,h2,h3,h4,.card h3,.tbl td b,.part-detail b{color:#0b1220 !important}
  p,.sub,.cap,.props li,.tbl td,.hint,.tiny,.pd-row p{color:#334155 !important}
  .grad{-webkit-text-fill-color:#0f766e !important; color:#0f766e !important}
  .readouts div,.formula,.switch{background:#f8fafc !important; color:#0b1220 !important}
  .reveal{opacity:1 !important; transform:none !important}
  .sim-panel,.circuit-card,.card{break-inside:avoid}
}