/* TracingsMD · ECG Basics. Clean reading layout; navy #0b2a5b and teal #0a9aa6 from the G logo. */
:root{
  --navy:#0b2a5b;--navy-2:#1d4a80;--teal:#0a9aa6;--teal-ink:#08707a;--teal-50:#e6f5f6;
  --ink:#16202c;--ink-2:#3b4a5c;--muted:#68778a;--line:#e3e8ee;--bg:#fff;--soft:#f5f7fa;
  --paper:#fff6f5;--grid-minor:#f6cfcc;--grid-major:#e9a09a;--trace:#1a1d22;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;color:var(--ink);background:var(--bg);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--teal-ink);text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.skip-link{position:fixed;left:12px;top:-80px;z-index:50;background:#fff;padding:10px 14px;border:2px solid var(--teal);border-radius:8px}
.skip-link:focus{top:10px}

/* Site navigation, shared look with the simulator */
.site-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px 28px;padding:10px max(20px,calc((100% - 1180px)/2));background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-nav .logo{display:block;line-height:0}
.site-nav .logo img{height:30px;width:auto}
.site-nav nav{display:flex;gap:4px}
.site-nav nav a{padding:6px 12px;border-radius:8px;color:var(--ink-2);font-size:15px;font-weight:500;text-decoration:none}
.site-nav nav a:hover{background:var(--soft);color:var(--navy)}
.site-nav nav a[aria-current=page]{color:var(--navy);font-weight:650;background:var(--teal-50)}
.site-nav .site-meta{display:flex;gap:2px;margin-left:auto}
.site-nav .site-meta a{padding:6px 12px;border-radius:8px;color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none}
.site-nav .site-meta a:hover{background:var(--soft);color:var(--navy)}
.site-nav .site-meta a[aria-current=page]{color:var(--navy);font-weight:650;background:var(--teal-50)}

/* Index */
.hero{max-width:1180px;margin:0 auto;padding:56px 20px 24px}
.eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.hero h1{margin:0;max-width:760px;font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--navy)}
.hero p.lead{max-width:680px;margin:18px 0 0;font-size:18px;color:var(--ink-2)}
.lesson-grid{max-width:1180px;margin:0 auto;padding:12px 20px 64px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;list-style:none}
.lesson-grid li{display:flex}
.lesson-card{display:flex;flex-direction:column;gap:6px;width:100%;padding:20px 20px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.lesson-card:hover{border-color:#b9dfe2;box-shadow:0 10px 26px -14px rgba(11,42,91,.35);transform:translateY(-1px)}
.lesson-card .num{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--teal-ink)}
.lesson-card h2{margin:0;font-size:19px;line-height:1.3;color:var(--navy)}
.lesson-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.lesson-card .more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--teal-ink)}

.part-title{max-width:1180px;margin:18px auto 0;padding:0 20px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.refs{font-size:13.5px;line-height:1.5;color:var(--muted);padding-left:20px}
.refs li{color:var(--muted);margin:6px 0}

/* Lesson */
.lesson-wrap{max-width:1180px;margin:0 auto;padding:36px 20px 72px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px}
.lesson-toc{position:sticky;top:76px;align-self:start;font-size:14px}
.lesson-toc p{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lesson-toc ol{margin:0 0 18px;padding:0;list-style:none}
.lesson-toc a{display:flex;gap:10px;padding:6px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;line-height:1.35}
.lesson-toc .n{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted);padding-top:1px}
.lesson-toc a:hover{background:var(--soft)}
.lesson-toc a[aria-current=page]{background:var(--teal-50);color:var(--navy);font-weight:650}
article{min-width:0;max-width:780px}
article h1{margin:4px 0 12px;font-size:clamp(30px,4vw,40px);line-height:1.12;letter-spacing:-.015em;color:var(--navy)}
article .summary{margin:0 0 28px;font-size:18px;color:var(--ink-2)}
article h2{margin:40px 0 10px;font-size:23px;line-height:1.25;color:var(--navy)}
article h3{margin:26px 0 6px;font-size:17px;color:var(--navy)}
article p,article li{color:var(--ink)}
article ul,article ol{padding-left:22px}
article li{margin:4px 0}
.key{margin:22px 0;padding:16px 18px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.key h2,.key h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.key ul{margin:0}
.note{margin:18px 0;padding:10px 14px;border-left:3px solid var(--teal);background:var(--teal-50);border-radius:0 10px 10px 0;font-size:15px;color:var(--ink-2)}
table.values{width:100%;margin:16px 0;border-collapse:collapse;font-size:15px}
table.values th,table.values td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.values th{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.values td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
.table-scroll{overflow-x:auto}

/* Figures: engine strips on ECG paper */
figure{margin:22px 0;overflow-x:auto}
figure svg{display:block;width:100%;min-width:520px;height:auto;border:1px solid #efc9c5;border-radius:6px}
figure svg.beat{max-width:560px;min-width:0;margin:0 auto}
svg.beat .grid-minor{stroke-width:.16}svg.beat .grid-major{stroke-width:.3}
figcaption{margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.paper{fill:var(--paper)}
.grid-minor{fill:none;stroke:var(--grid-minor);stroke-width:.07}
.grid-major{fill:none;stroke:var(--grid-major);stroke-width:.16}
.trace{fill:none;stroke:var(--trace);stroke-width:.32;stroke-linejoin:round;stroke-linecap:round}
.lead-name{font:600 3px system-ui,sans-serif;fill:#4a2b2b}
.lead-sep{stroke:#333;stroke-width:.3}
.wave-name{font:700 3.2px system-ui,sans-serif;fill:var(--navy)}
.seg-name{font:600 2.4px system-ui,sans-serif;fill:var(--teal-ink)}
.bracket path{fill:none;stroke:var(--navy);stroke-width:.25}
.bracket text{font:600 2.5px system-ui,sans-serif;fill:var(--navy)}
.bracket.pr path{stroke:var(--teal-ink)}.bracket.pr text{fill:var(--teal-ink)}
.bracket.qt path{stroke:#9a3b2f}.bracket.qt text{fill:#9a3b2f}
.bracket.rr path{stroke:#5b6b7c}.bracket.rr text{font-size:2.9px;fill:#3b4a5c}
.mark-p{fill:var(--teal)}
.mark-r{stroke:#3b4a5c;stroke-width:.35}

/* Grid explainer */
.grid-demo svg{max-width:520px;min-width:0;margin:0 auto}
.grid-demo .dim path{fill:none;stroke:var(--navy);stroke-width:.25}
.grid-demo .dim text{font:600 2.6px system-ui,sans-serif;fill:var(--navy)}
.grid-demo .hilite{fill:rgba(10,154,166,.18);stroke:var(--teal);stroke-width:.25}

/* Widgets */
.widget{margin:24px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 18px -14px rgba(11,42,91,.35)}
.widget h3{margin:0 0 4px;font-size:16px}
.widget>p{margin:0 0 12px;font-size:14.5px;color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;background:#edf1f5;border-radius:10px;margin:0 10px 8px 0}
.seg button{min-height:34px;padding:5px 12px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.seg button:hover{background:#e0e7ef}
.seg button[aria-pressed=true]{background:#fff;color:var(--navy);font-weight:650;box-shadow:0 1px 3px rgba(11,42,91,.2)}
.seg-label{display:block;margin:4px 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.widget output{display:block;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--teal-50);font-weight:600;color:var(--navy)}
.widget figure{margin:12px 0 0}

.axis-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.axis-dial{width:250px;height:250px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;border-radius:50%}
.axis-dial:active{cursor:grabbing}
.axis-dial:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.axis-dial svg{display:block;width:100%;height:100%}
.axis-dial .zone{stroke:#fff;stroke-width:1}
.axis-dial .zone.normal,.axis-key .normal::before{fill:#d8f0f1;background:#d8f0f1}
.axis-dial .zone.left,.axis-key .left::before{fill:#fdebc8;background:#fdebc8}
.axis-dial .zone.right,.axis-key .right::before{fill:#e4e1f6;background:#e4e1f6}
.axis-dial .zone.extreme,.axis-key .extreme::before{fill:#f8d9d6;background:#f8d9d6}
.axis-dial .rim{fill:none;stroke:#c9d2dc;stroke-width:1}
.axis-dial .spoke{stroke:#9aa8b8;stroke-width:.8;stroke-dasharray:3 3}
.axis-dial .spoke-label{font:700 11px system-ui,sans-serif;fill:var(--ink-2)}
.axis-dial .needle line{stroke:var(--navy);stroke-width:4;stroke-linecap:round}
.axis-dial .needle .knob{fill:var(--navy);stroke:#fff;stroke-width:2}
.axis-dial .needle .hub{fill:var(--navy)}
.axis-range{display:flex;align-items:center;gap:10px;margin:10px 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.axis-range input{flex:1;accent-color:var(--navy)}
.axis-presets{margin:4px 0 8px}
.axis-presets button{font-size:13px;padding:5px 9px}
.axis-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-2)}
.axis-key li{display:flex;align-items:center;gap:6px;margin:0}
.axis-key li::before{content:"";width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.08)}
.axis-main output{margin:0 0 12px;display:flex;flex-direction:column;gap:2px;font-weight:500;font-size:14px}
.axis-main output strong{font-size:20px;color:var(--navy)}
.axis-explorer[data-zone=left] .axis-main output{background:#fff6e3}
.axis-explorer[data-zone=right] .axis-main output{background:#f1effb}
.axis-explorer[data-zone=extreme] .axis-main output{background:#fdeeec}
.limb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.limb{padding:6px;border:1px solid var(--line);border-radius:10px;background:#fff}
.limb.is-quadrant{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.limb-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin:0 2px 4px;font-size:13px}
.limb-head strong{color:var(--navy)}
.limb .net{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.limb .net[data-sign="+"]{color:var(--teal-ink)}.limb .net[data-sign="-"]{color:#9a3b2f}.limb .net[data-sign="0"]{color:#9a6a00}
.limb.is-most{background:#effafa}
.limb.is-flat{background:#fff8e6}
.limb svg{display:block;width:100%;height:auto;min-width:0;border:1px solid #efc9c5;border-radius:4px}
.limb-note{margin:8px 0 0!important;font-size:12.5px!important}

/* Try it live + pager */
.try{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:30px 0 0;padding:16px 18px;border-radius:14px;background:var(--navy);color:#fff}
.try strong{flex:1 1 220px;font-size:16px}
.try a{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:9px;background:#fff;color:var(--navy);font-size:14px;font-weight:650;text-decoration:none}
.try a:hover{background:var(--teal-50)}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.pager a{display:flex;flex-direction:column;max-width:48%;padding:10px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--navy);font-weight:600}
.pager a span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pager a.next{margin-left:auto;text-align:right}
.pager a:hover{border-color:#b9dfe2}
.site-foot{max-width:1180px;margin:0 auto;padding:22px 20px 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.site-foot p{margin:4px 0}
.site-foot .foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px}
.site-foot .foot-links a{color:var(--ink-2);font-weight:500;text-decoration:none}
.site-foot .foot-links a:hover{color:var(--navy);text-decoration:underline}
.site-foot .foot-fine{font-size:12px}
.about{max-width:1180px;margin:0 auto;padding:4px 20px 40px}
.about>*{max-width:720px}
.about h2{margin:28px 0 8px;font-size:19px;color:var(--navy)}
.about p{line-height:1.6}
.about-cta{display:inline-block;margin:14px 8px 0 0;padding:9px 16px;border-radius:8px;background:var(--navy);color:#fff;font-weight:600;text-decoration:none}
.about-cta.secondary{background:var(--teal-50);color:var(--navy)}

@media (max-width:900px){
  .lesson-wrap{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:24px}
  .lesson-toc{position:static;order:2;border-top:1px solid var(--line);padding-top:18px}
  .axis-layout{grid-template-columns:minmax(0,1fr);justify-items:center}
  .axis-main{width:100%}
}
@media (max-width:600px){
  .limb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root{font-size:15.5px}
  .site-nav{gap:6px 12px;padding:8px 14px;flex-wrap:wrap}
  .site-nav .logo img{height:26px}
  .site-nav .site-meta .contact{display:none}
  .site-nav .site-meta a{padding:6px 9px;font-size:14.5px}
  .site-nav nav a{padding:6px 9px;font-size:14.5px}
  .hero{padding:32px 16px 12px}
  .about{padding:4px 16px 28px}
  .lesson-grid,.lesson-wrap,.site-foot{padding-left:16px;padding-right:16px}
  .pager{flex-direction:column}.pager a{max-width:none}
}
@media print{.site-nav,.lesson-toc,.try,.pager{display:none}}

/* Cell action potential plots */
figure svg.cellplot{min-width:0;max-width:680px;border:1px solid var(--line);border-radius:10px;background:#fff}
.cellplot .gl{stroke:#eef1f5;stroke-width:1}.cellplot .gl.zero{stroke:#cfd7e0}
.cellplot .axes text{font:11px system-ui,sans-serif;fill:var(--muted)}
.cellplot .ap{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linejoin:round}
.cellplot .ap.endo{stroke:#9aa8b8;stroke-dasharray:6 4}.cellplot .ap.epi{stroke:var(--navy)}
.cellplot .apd{stroke-width:2}.cellplot .apd.epi{stroke:var(--navy)}.cellplot .apd.endo{stroke:#7d8b9b}
.cellplot .lbl{font:600 11.5px system-ui,sans-serif;fill:var(--ink-2)}.cellplot .lbl.epi{fill:var(--navy)}
.cellplot .erp{fill:rgba(10,154,166,.10)}.cellplot .rrp{fill:rgba(217,119,6,.10)}
.cellplot .band{font:600 11px system-ui,sans-serif;fill:var(--teal-ink)}
.cellplot .threshold{stroke:#d97706;stroke-width:1.2;stroke-dasharray:5 4}
.cellplot .phase circle{fill:#fff;stroke:var(--teal);stroke-width:1.6}.cellplot .phase text{font:700 12px system-ui,sans-serif;fill:var(--teal-ink)}
figure[data-cell]>.seg{margin-bottom:6px}