:root{
  /* Brand: aicardio mono. Black, white and Apple greys, with one pink accent (the full stop in the logo).
     Layout: one long reference page; sticky search + chapter bar; every concept is a card with the same four-part anatomy. */
  color-scheme:light;
  --bg:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --mute:#6e6e73; --grey:#86868b; --line:#d2d2d7;
  --fill:rgba(118,118,128,.12); --bar:rgba(255,255,255,.8); --shadow:0 4px 18px rgba(0,0,0,.06);
  --accent:#ff375f; --accent-ink:#d6204a; --accent-soft:#ffeef2;   /* pink: graphics, dots / text on light / tints */
  --alt:#48484a; --alt-soft:#ececf0;                               /* graphite: second data series */
  --third:#8e8e93; --third-soft:#f2f2f4;                           /* mid grey: third data series */
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000; --card:#1c1c1e; --ink:#f5f5f7; --mute:#a1a1a6; --grey:#86868b; --line:#38383a;
    --fill:rgba(118,118,128,.24); --bar:rgba(22,22,23,.8); --shadow:0 4px 18px rgba(0,0,0,.5);
    --accent:#ff375f; --accent-ink:#ff6482; --accent-soft:#3a1620;
    --alt:#d1d1d6; --alt-soft:#2c2c2e;
    --third:#8e8e93; --third-soft:#242426;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --card:#1c1c1e; --ink:#f5f5f7; --mute:#a1a1a6; --grey:#86868b; --line:#38383a;
  --fill:rgba(118,118,128,.24); --bar:rgba(22,22,23,.8); --shadow:0 4px 18px rgba(0,0,0,.5);
  --accent:#ff375f; --accent-ink:#ff6482; --accent-soft:#3a1620;
  --alt:#d1d1d6; --alt-soft:#2c2c2e;
  --third:#8e8e93; --third-soft:#242426;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:128px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);letter-spacing:-.011em;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--grey);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;line-height:1.15;margin:0}
p{margin:0}
code{font:.9em var(--mono)}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.dot{color:var(--accent)}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
}
.top-in{max-width:1000px;margin:0 auto;padding:10px 16px 0;display:flex;flex-direction:column;gap:8px}
.brand-row{display:flex;gap:14px;align-items:center}
.brand{display:flex;align-items:center;gap:9px;font:700 17px/1 var(--display);letter-spacing:-.025em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .mark{width:28px;height:28px;border-radius:7px;flex:none}
.brand .g{color:var(--grey)}
#q{flex:1;min-width:0;font:16px var(--body);letter-spacing:-.01em;color:var(--ink);background:var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px 50%/15px;border:1px solid transparent;border-radius:10px;padding:8px 12px 8px 34px;transition:background-color .15s,border-color .15s,box-shadow .15s}
#q::placeholder{color:var(--grey)}
#q:focus{outline:none;background-color:var(--card);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chips{display:flex;gap:4px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;font:600 13px/1 var(--body);letter-spacing:-.005em;color:var(--mute);text-decoration:none;padding:7px 12px;border-radius:99px;transition:background-color .15s,color .15s}
.chips a:hover{background:var(--fill);color:var(--ink)}
.chips a.on{color:var(--card);background:var(--ink)}
#results{max-width:1000px;margin:0 auto;padding:0 16px}
#results .rbox{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;max-height:60vh;overflow:auto;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.12)}
#results a{display:block;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--ink)}
#results a:hover,#results a:focus{background:var(--bg)}
#results b{font-family:var(--display);font-weight:600}
#results small{display:block;color:var(--mute);font-size:14px;line-height:1.35}
#results .none{padding:10px;color:var(--mute)}
mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px}

main{max-width:1000px;margin:0 auto;padding:0 16px 96px}

/* hero */
.hero{margin:28px 0 12px;padding:clamp(28px,6vw,56px) clamp(20px,5vw,48px);border-radius:24px;background:var(--card)}
.hero h1{font-size:clamp(34px,7vw,62px);font-weight:700;letter-spacing:-.035em;line-height:1.05;max-width:17ch}
.hero h1 .g{color:var(--grey)}
.hero .lede{margin-top:20px;max-width:58ch;font-size:clamp(18px,2.2vw,21px);line-height:1.5;letter-spacing:-.015em}
.hero .src{margin-top:18px;font-size:14.5px;color:var(--mute);max-width:70ch}
.sixty{margin-top:24px;padding:16px 18px;background:var(--bg);border-radius:16px;max-width:70ch}
.sixty b{display:block;font:600 16px var(--display);letter-spacing:-.015em;margin-bottom:4px}

.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0 0}
.toc a{display:flex;gap:12px;align-items:baseline;padding:14px 16px;background:var(--card);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:600;letter-spacing:-.015em;line-height:1.3;transition:transform .15s,box-shadow .15s}
.toc a:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.toc a i{font:500 12px var(--mono);color:var(--grey);font-style:normal;letter-spacing:0}
.toc a small{display:block;font-weight:400;color:var(--mute);font-size:13.5px;letter-spacing:-.005em;margin-top:2px}

/* chapters */
section.ch{margin-top:72px}
.ch>header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.ch>header i{font:500 13px var(--mono);color:var(--grey);font-style:normal;letter-spacing:0}
.ch h2{font-size:clamp(28px,5vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.ch h2::after{content:".";content:"." / "";color:var(--accent)}
.ch>.intro{color:var(--mute);font-size:18px;line-height:1.5;max-width:62ch;margin:12px 0 0}

.entry{background:var(--card);border-radius:20px;padding:22px 22px 18px;margin-top:16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s}
.entry.hit{box-shadow:0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft)}
.entry h3{font-size:22px;font-weight:700;letter-spacing:-.022em}
.entry h3 a{color:inherit;text-decoration:none}
.entry h3 small{font:500 12.5px var(--mono);color:var(--grey);margin-left:6px;white-space:nowrap;letter-spacing:0}
.entry p,.entry li{max-width:68ch}
.entry ul,.entry ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.one{font-size:19px;font-weight:600;line-height:1.4;letter-spacing:-.018em}
.pic,.cardio,.warn{padding:12px 14px;border-radius:12px;max-width:72ch}
.pic{background:var(--bg)}
.cardio{background:var(--card);border:1px solid var(--line)}
.warn{background:var(--accent-soft)}
.pic>b,.cardio>b,.warn>b{display:block;font:600 11.5px var(--body);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.pic>b{color:var(--grey)} .cardio>b{color:var(--ink)} .warn>b{color:var(--accent-ink)}
.ref{font:500 12px var(--mono);color:var(--grey);letter-spacing:0}
.ref a{color:var(--grey)}
.extra{font-size:14px;color:var(--mute);font-style:italic}

details.test{border:1px solid var(--line);border-radius:12px;padding:10px 14px;max-width:72ch}
details.test summary{cursor:pointer;font-weight:600}
details.test summary:hover{color:var(--accent-ink)}
details.test p{margin-top:6px}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
th{font:600 11.5px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);background:var(--bg)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}

/* figures */
figure{margin:0}
figure.dia{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card);overflow-x:auto}
figure.dia svg{display:block;width:100%;min-width:540px;height:auto;margin:0 auto;color:var(--ink)}
figcaption{font-size:14.5px;color:var(--mute);margin-top:10px;max-width:70ch}
svg text{fill:currentColor;font:12px var(--body);letter-spacing:0}
svg .m{fill:var(--mute)} svg .b6{font-weight:600}
.f-a{fill:var(--accent)} .f-b{fill:var(--alt)} .f-c{fill:var(--third)} .f-n{fill:none}
.f-as{fill:var(--accent-soft)} .f-bs{fill:var(--alt-soft)} .f-cs{fill:var(--third-soft)} .f-bg{fill:var(--bg)} .f-card{fill:var(--card)}
.s-i{stroke:currentColor} .s-a{stroke:var(--accent)} .s-b{stroke:var(--alt)} .s-c{stroke:var(--third)} .s-l{stroke:var(--line)}

/* animated explainers */
.player{border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden}
.ptitle{display:flex;gap:9px;align-items:center;padding:10px 14px;font:600 14px var(--display);letter-spacing:-.01em;border-bottom:1px solid var(--line);background:var(--card)}
.ptitle::before{content:"";width:0;height:0;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.ptitle span{margin-left:auto;font:500 11.5px var(--mono);color:var(--grey);letter-spacing:0}
.player canvas,.lab canvas{display:block;width:100%}
.pctl{display:flex;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:var(--card)}
.pctl input{flex:1;min-width:0;accent-color:var(--accent)}
button{font:600 14px var(--body);letter-spacing:-.01em;color:var(--card);background:var(--ink);border:0;border-radius:99px;padding:8px 16px;cursor:pointer;transition:opacity .15s,background-color .15s}
button:hover{opacity:.82}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.ghost:hover{opacity:1;background:var(--fill)}
.pp{min-width:76px}
.player figcaption{margin:0;max-width:none;padding:12px 14px;min-height:3.4em;background:var(--card);color:var(--ink);font-size:15.5px;border-top:1px solid var(--line)}

/* interactive labs */
.lab{border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden}
.lab .lbody{padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--card);border-top:1px solid var(--line)}
.lab label{display:flex;flex-direction:column;gap:2px;font-weight:600;font-size:15px}
.lab input[type=range]{width:100%;accent-color:var(--accent)}
.lab select{font:16px var(--body);padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);max-width:100%}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.stat{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font:700 24px var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:13.5px;color:var(--mute);line-height:1.3;display:block}
.bar{height:10px;border-radius:99px;background:var(--bg);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--alt);border-radius:99px}
.bar.r i{background:var(--accent)}
.verdict{font-weight:600;padding:10px 12px;border-radius:12px;background:var(--accent-soft)}
.verdict.ok{background:var(--alt-soft)}
.steps{display:flex;flex-direction:column;gap:6px}
.steps .done{font-size:15px;color:var(--mute)}
.steps .done b{color:var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.leaf{padding:12px 14px;border-radius:12px;font-weight:600}
.leaf.c{background:var(--accent-soft)} .leaf.r{background:var(--alt-soft)}
.check{display:flex;flex-direction:column;gap:6px;list-style:none;padding:0;margin:0}
.check label{flex-direction:row;gap:12px;align-items:flex-start;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background-color .15s}
.check label:hover{background:var(--bg)}
.check label:has(input:checked){border-color:var(--ink)}
.check input{margin-top:5px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.check b{display:block}
.check small{color:var(--mute);font-size:14.5px;line-height:1.4;display:block}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cards>div{border-radius:14px;padding:14px;background:var(--bg)}
.cards h4{margin:0 0 4px;font:700 16px var(--display);letter-spacing:-.015em}
.cards p{font-size:15.5px}
.script{border-left:3px solid var(--accent);padding:6px 0 6px 16px;max-width:68ch}
.script b{display:block;font:600 11.5px var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--accent-ink);margin-bottom:2px}

/* glossary */
#gloss-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
#gloss-list a{display:block;padding:12px 14px;border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink);line-height:1.4;transition:box-shadow .15s}
#gloss-list a:hover{box-shadow:var(--shadow)}
#gloss-list b{font-family:var(--display);font-weight:600;letter-spacing:-.015em;display:block}
#gloss-list span{font-size:14.5px;color:var(--mute)}
#gq{width:100%;font:16px var(--body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:14px 0}
#gq::placeholder{color:var(--grey)}
#gq:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--mute);max-width:72ch}
footer p+p{margin-top:10px}
.methods{margin-block:18px}
.methods h2{font-size:18px;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.methods details{margin-top:8px}
.methods summary{cursor:pointer;color:var(--ink);font-weight:600}
.methods pre{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .mark{box-shadow:0 0 0 1px rgba(255,255,255,.16)}}
:root[data-theme="dark"] .brand .mark{box-shadow:0 0 0 1px rgba(255,255,255,.16)}

@media (max-width:520px){
  body{font-size:16.5px}
  .entry{padding:18px 16px 14px;border-radius:18px}
  .hero{border-radius:20px}
  .brand{font-size:15px}
  section.ch{margin-top:56px}
}
@media (max-width:430px){
  .brand .word{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .toc a:hover{transform:none}
}