@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 800;font-display:swap;src:url("fonts/Fraunces-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 800;font-display:swap;src:url("fonts/Fraunces-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/Fraunces-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/Fraunces-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/IBMPlexSans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/IBMPlexSans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* pulsul-normal — ECG-paper stage, ink dots, crimson for outside-the-fences. */
:root{
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#f2f0e9; --bg-stage:#faf8f1; --ink:#1c2026; --muted:#4d545e;
  --line:#d8d2c2; --line-soft:#e4dfd0; --grid:#e7ddc8; --grid-strong:#dccdb0;
  --accent:#a4261b; --accent-soft:rgba(164,38,27,.13);
  --dot:#2b3138; --dot-out:#b02a1c; --fence:#7a1f14;
  --card:#fbf9f3; --btn:#1c2026; --btn-ink:#faf8f1;
  --to-top-bg:#f2f0e9; --to-top-fg:#1c2026;
}
html[data-theme="dark"]{
  --bg:#12141a; --bg-stage:#171a21; --ink:#e9e6da; --muted:#a9aeb8;
  --line:#333947; --line-soft:#262b36; --grid:#232733; --grid-strong:#2e3444;
  --accent:#e06a58; --accent-soft:rgba(224,106,88,.16);
  --dot:#c9cdd6; --dot-out:#e0654f; --fence:#e0654f;
  --card:#171a21; --btn:#e9e6da; --btn-ink:#171a21;
  --to-top-bg:#12141a; --to-top-fg:#e9e6da;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--btn);color:var(--btn-ink);padding:.5rem 1rem;z-index:60}
.skip:focus{left:.5rem;top:.5rem}
/* topbar */
.topbar{position:sticky;top:0;z-index:50;height:44px;display:flex;align-items:center;gap:1rem;
  padding:0 max(1rem,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line-soft);font-size:14px}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .home{font-weight:600;display:flex;align-items:center;gap:.45rem}
.topbar nav{display:none;gap:1rem;margin-left:1rem}
@media(min-width:900px){.topbar nav{display:flex}.topbar nav a{color:var(--muted)}}
.topbar .spacer{flex:1}
.topbar button,.topbar .lang{background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink);
  font:inherit;font-size:13px;padding:.22rem .7rem;cursor:pointer;text-decoration:none}
.pulse-mark{width:26px;height:14px;flex:none}
/* hero */
.hero{max-width:76rem;margin:0 auto;padding:2.2rem 1.1rem 0}
.hero h1{font-family:var(--serif);font-weight:560;font-size:clamp(34px,5.6vw,62px);line-height:1.04;letter-spacing:-.02em;margin:.2rem 0 1rem;text-wrap:balance;max-width:20em}
.deck{font-size:clamp(17px,2vw,20px);line-height:1.55;max-width:44rem;color:var(--ink)}
.deck strong{font-weight:600}
.cta{display:inline-block;margin:.4rem 0 1.4rem;background:var(--btn);color:var(--btn-ink);text-decoration:none;
  padding:.62rem 1.15rem;border-radius:999px;font-weight:600;font-size:15px}
/* stage */
.stage-shell{max-width:76rem;margin:0 auto;padding:0 1.1rem;position:sticky;top:44px;z-index:20}
.stage{position:relative;background:var(--bg-stage);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.stage canvas{display:block;width:100%;height:52svh;min-height:320px}
@media(max-width:759px){.stage canvas{height:40svh;min-height:260px}}
.stage-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;padding:.5rem .8rem .65rem;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--muted)}
.stage-meta .cap{flex:1 1 22rem}
.stage-meta .axis{font-variant-numeric:tabular-nums}
.fences{display:flex;gap:.5rem;flex-wrap:wrap}
.fences button{font:inherit;font-size:13.5px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:.3rem .8rem;cursor:pointer;min-height:36px}
.fences button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.still{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:var(--bg-stage)}
/* story */
.story{max-width:76rem;margin:0 auto;padding:0 1.1rem}
.step{max-width:40rem;margin:0;padding:2.6rem 0 1.2rem;scroll-margin-top:calc(44px + 40svh + 120px)}
@media(min-width:760px){.step{scroll-margin-top:calc(44px + 52svh + 72px)}}
.step h2{font-family:var(--serif);font-weight:560;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.012em;margin:0 0 .7rem;text-wrap:balance}
.step p{margin:.6rem 0}
.big{font-family:var(--serif);font-size:clamp(40px,5.4vw,58px);line-height:1;letter-spacing:-.025em;font-weight:520;display:block;margin:.4rem 0 .2rem;font-variant-numeric:lining-nums}
.note{font-size:14.5px;color:var(--muted)}
/* own-pulse tool */
.tool{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.1rem;max-width:40rem}
.tool .row{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:end;margin:.7rem 0}
.tool label{font-size:14px;color:var(--muted);display:block;margin-bottom:.25rem}
.tool input[type="number"]{font:inherit;font-size:17px;width:7rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg-stage);color:var(--ink)}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{font:inherit;font-size:15px;background:var(--bg-stage);color:var(--ink);border:0;padding:.5rem 1rem;cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.tapbtn{display:block;width:100%;min-height:96px;border-radius:12px;border:2px solid var(--accent);
  background:var(--accent-soft);color:var(--ink);font:inherit;font-size:19px;font-weight:600;cursor:pointer;
  touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
.tapbtn:active{background:var(--accent);color:#fff}
.timer{font-variant-numeric:tabular-nums;font-family:var(--serif);font-size:30px}
.result{margin-top:1rem;border-top:1px solid var(--line-soft);padding-top:.8rem}
.result .bpm{font-family:var(--serif);font-size:44px;line-height:1;font-weight:560}
.btn{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:.45rem 1rem;cursor:pointer;min-height:44px}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.9rem 0}
.share-row .lbl{font-size:13.5px;color:var(--muted);margin-right:.2rem}
.share-row a,.share-row button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:transparent;cursor:pointer}
@media(pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}
.share-row svg{width:18px;height:18px;fill:currentColor}
.share-row a:hover,.share-row button:hover{color:var(--accent);border-color:var(--accent)}
/* table */
.tbl-wrap{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums;min-width:34rem}
th,td{padding:.42rem .7rem;border-bottom:1px solid var(--line-soft);text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{border-bottom:2px solid var(--line);font-weight:600}
caption{text-align:left;font-family:var(--serif);font-size:19px;padding:.4rem 0}
/* sources + footer */
.sources{max-width:40rem}
.sources li{margin:.5rem 0}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.4rem 1.1rem 4.5rem;font-size:14px;color:var(--muted)}
footer .inner{max-width:76rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
footer a{color:var(--ink)}
/* reading rail */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:10px}
@media(min-width:1180px){.rail{display:flex}}
.rail a{position:relative;width:22px;height:22px;display:block}
.rail a::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--muted);opacity:.55}
.rail a[aria-current="true"]::before{background:var(--accent);opacity:1;width:9px;height:9px}
.rail .rl{position:absolute;right:26px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;
  background:var(--card);border:1px solid var(--line-soft);padding:.15rem .5rem;border-radius:6px;color:var(--ink);
  opacity:0;pointer-events:none}
.rail a:hover .rl,.rail a:focus-visible .rl{opacity:1}
@media print{.rail,.topbar,#toTop{display:none}}
#toTop{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:45;
  width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;opacity:0;pointer-events:none}
#toTop.show{opacity:.78;pointer-events:auto}
#toTop:hover,#toTop:focus-visible{opacity:1}
#toTop svg{width:36px;height:36px;display:block;margin:auto}

/* Desktop: chart beside the text (right), shrinkable for reading. Phone unchanged. */
.stage-toggle{min-height:36px;font-size:13.5px;padding:.3rem .8rem}
@media(min-width:1024px){
  .layout{max-width:76rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);gap:2rem;align-items:start;padding:0 1.1rem}
  .stage-shell{grid-column:2;grid-row:1;max-width:none;margin:0;padding:0;top:56px}
  .story{grid-column:1;grid-row:1;max-width:none;margin:0;padding:0}
  .stage canvas{height:66svh}
  .step{scroll-margin-top:64px;padding-top:1.6rem}
  .step:first-child{padding-top:.4rem}
  html[data-stage="small"] .layout{grid-template-columns:minmax(0,1fr) 19rem}
  html[data-stage="small"] .stage canvas{height:34svh;min-height:220px}
  .hero{padding-bottom:1.2rem}
}
@media(max-width:1023.98px){ .stage-toggle{display:none} }
@media(min-width:1024px) and (max-width:1519.98px){ .rail{display:none} }