/* =====================================================================
   ECG: on standby until ECG Plus is ready. ECG paper, a live trace,
   and a card saying what goes here.
   ===================================================================== */
#view-ecg{overflow:hidden; background:var(--bg)}
.ecg-paper{
  position:absolute; inset:0;
  --maj:color-mix(in srgb,var(--ecg) 20%,transparent);
  --min:color-mix(in srgb,var(--ecg) 8%,transparent);
  background-image:
    linear-gradient(var(--maj) 1px,transparent 1px),
    linear-gradient(90deg,var(--maj) 1px,transparent 1px),
    linear-gradient(var(--min) 1px,transparent 1px),
    linear-gradient(90deg,var(--min) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
  background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 40%,transparent 100%);
}
.ecg-trace{position:absolute; left:0; right:0; top:calc(50% - 150px); width:100%; height:190px; overflow:visible}
.ecg-trace path{fill:none; stroke:var(--ecg); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.ecg-trace .ghostline{opacity:.16}
.ecg-trace .live{stroke-dasharray:170 830; animation:sweep 5.5s linear infinite; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ecg) 55%,transparent))}
@keyframes sweep{from{stroke-dashoffset:1000} to{stroke-dashoffset:0}}

.ecg-wrap{position:absolute; inset:0; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:40px 18px}
.ecg-card{
  position:relative; width:min(560px,100%); margin-top:120px;
  background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:20px; padding:26px 28px 22px; box-shadow:var(--shadow-lg);
}
.ecg-card h1{font-family:var(--font-display); font-weight:750; font-size:clamp(28px,3.6vw,38px); line-height:1.08; letter-spacing:-.032em; margin:10px 0 12px}
.ecg-card h1 em{font-style:normal; font-weight:300; color:var(--ecg)}
.ecg-card > p{margin:0 0 16px; color:var(--ink-2); font-size:14.5px; line-height:1.6}
.ecg-status{display:inline-flex; align-items:center; gap:10px; padding:6px 12px 6px 10px; border-radius:999px; border:1px dashed color-mix(in srgb,var(--ecg) 45%,var(--line)); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ecg)}
.ecg-status .pulse{width:8px; height:8px; border-radius:50%; background:var(--ecg); animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ecg) 50%,transparent)} 30%{box-shadow:0 0 0 7px transparent}}
.ecg-related{margin-top:22px; padding-top:16px; border-top:1px solid var(--line-2)}
.ecg-related h2{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 8px}
.ecg-topics{display:grid; gap:2px}
.ecg-topics a{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:6px 8px; margin:0 -8px; border-radius:9px; text-decoration:none; color:var(--ink-2); font-size:13.3px}
.ecg-topics a:hover{background:var(--surface-2); color:var(--ink)}
.ecg-topics .n{font-family:var(--font-mono); font-size:11px; color:var(--theory); font-weight:600}
.ecg-topics .go{font-family:var(--font-mono); font-size:10.5px; color:var(--muted)}
.ecg-how{font-size:12px; color:var(--muted); margin:16px 0 0}
.ecg-frame{position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--bg)}
@media (max-height:720px){ .ecg-trace{top:30px} .ecg-card{margin-top:150px} }