:root{color-scheme:dark;--bg-0: #060a12;--bg-1: #0b1220;--panel: rgba(15, 22, 38, .72);--panel-border: rgba(255, 255, 255, .08);--text: #e9edf5;--muted: #9aa7bd;--accent-gold: #ffd23f;--accent-red: #ff5d5d;--accent-blue: #5d7dff;--accent-green: #5cff9d;--radius: 14px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 20%,#101a30 0%,var(--bg-0) 65%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);overflow:hidden}#app{position:relative;width:100vw;height:100vh}#scene{position:absolute;inset:0;display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--muted);letter-spacing:.02em;background:var(--bg-0);z-index:50;transition:opacity .4s ease}#loading.hidden{opacity:0;pointer-events:none}#topbar{position:absolute;top:20px;left:24px;pointer-events:none;max-width:480px}#topbar h1{margin:0;font-size:1.4rem;font-weight:650;letter-spacing:-.01em}#topbar p{margin:4px 0 0;color:var(--muted);font-size:.85rem}#hint{position:absolute;bottom:14px;left:50%;transform:translate(-50%);font-size:.78rem;color:var(--muted);background:var(--panel);border:1px solid var(--panel-border);padding:6px 14px;border-radius:999px;backdrop-filter:blur(10px);pointer-events:none}#cardiac-phase{position:absolute;top:92px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--panel-border);border-radius:12px;background:#080d17d1;backdrop-filter:blur(12px);pointer-events:none;z-index:10}#cardiac-cycle{position:absolute;top:100px;left:24px;width:250px;padding:12px;border:1px solid var(--panel-border);border-radius:12px;background:#080d17d6;backdrop-filter:blur(12px);pointer-events:none;z-index:10}#cardiac-cycle h2{margin:0 0 8px;color:var(--muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}#cardiac-cycle ol{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}#cardiac-cycle li{display:flex;align-items:center;gap:8px;padding:6px 7px;border:1px solid transparent;border-radius:8px;color:#69768d;transition:color .1s ease,background .1s ease,border-color .1s ease}#cardiac-cycle li>span{display:grid;flex:0 0 22px;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:.66rem;font-weight:800}#cardiac-cycle li div{display:flex;min-width:0;flex-direction:column}#cardiac-cycle li strong{font-size:.72rem}#cardiac-cycle li small{margin-top:1px;font-size:.61rem}#cardiac-cycle li.active{color:#ffbf55;border-color:#ffbf5566;background:#ffb34726;box-shadow:0 0 18px #ffb34726}#cardiac-cycle li.active[data-step=ventricular],#cardiac-cycle li.active[data-step=repolarization]{color:#ff6969;border-color:#ff505a66;background:#ff374124}#cardiac-cycle li.active[data-step=afib-atria]{color:#f25aec;border-color:#d62fd073;background:#d62fd02b}#cardiac-cycle li.active[data-step=pvc],#cardiac-cycle li.active[data-step=blocked]{color:#ffe066;border-color:#ffe06673;background:#ffe06626}#cardiac-cycle li.active[data-step=vt],#cardiac-cycle li.active[data-step=vf],#cardiac-cycle li.active[data-step=no-output]{color:#ff6973;border-color:#ff505a80;background:#ff37412e}#cardiac-cycle.paused:after{content:"PAUSED";position:absolute;top:10px;right:10px;color:#ffe066;font-size:.62rem;font-weight:800;letter-spacing:.1em}#toggle-playback{width:100%;border:1px solid rgba(255,210,63,.35);border-radius:8px;padding:7px 10px;background:#ffd23f1a;color:#ffe066;cursor:pointer;font-weight:700}#toggle-playback[aria-pressed=true]{background:#5cff9d1f;border-color:#5cff9d59;color:#5cff9d}#toggle-cross-section{width:100%;border:1px solid rgba(127,184,255,.35);border-radius:8px;padding:7px 10px;background:#7fb8ff1a;color:#a8ceff;cursor:pointer;font-weight:700}#toggle-cross-section[aria-pressed=true]{background:#7fb8ff33;color:#d5e8ff}#cross-section-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:80px 330px 150px 270px;background:radial-gradient(ellipse at center,#101a2c,#050910 72%);overflow:hidden;z-index:2}#cross-section-panel.hidden{display:none}#cross-section-canvas{display:block;width:min(100%,1050px);height:auto;max-height:100%;border-radius:14px;box-shadow:0 10px 45px #0006}#rhythm-controls,#ecg-panel,#info-panel,#topbar,#hint,#attribution{z-index:12}.phase-row{display:flex;align-items:center;gap:7px;min-width:118px;padding:6px 8px;border-radius:8px;color:var(--muted);transition:background 90ms ease,color 90ms ease,box-shadow 90ms ease}.phase-row span:last-child{display:flex;flex-direction:column}.phase-row strong{font-size:.72rem;letter-spacing:.08em}.phase-row small{font-size:.66rem;margin-top:2px}.phase-step{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:.7rem;font-weight:800}.phase-row.atrial-active{color:#ffbf55;background:#ffb34729;box-shadow:0 0 18px #ffb3473d}.phase-row.afib-active{color:#f25aec;background:#d62fd033;box-shadow:0 0 22px #d62fd059}.phase-row.ventricular-active{color:#ff6565;background:#ff37412e;box-shadow:0 0 20px #ff37414d}.phase-arrow{color:#71809a;font-size:.72rem;white-space:nowrap}.phase-arrow span{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em}.panel-base{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(14px);box-shadow:0 8px 30px #00000059}#rhythm-controls{position:absolute;top:20px;right:24px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;width:300px}#rhythm-controls{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(14px);box-shadow:0 8px 30px #00000059}.control-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:6px}.segmented{display:flex;flex-wrap:wrap;background:#ffffff0d;border-radius:10px;padding:3px;gap:3px}.segmented button{flex:1 1 46%;background:transparent;border:none;color:var(--muted);padding:8px 6px;font-size:.78rem;border-radius:8px;cursor:pointer;transition:all .15s ease;font-weight:600}.segmented button:hover{color:var(--text)}.segmented button.active[data-mode=normal]{background:#5cff9d29;color:var(--accent-green)}.segmented button.active[data-mode=afib]{background:#ff5d5d29;color:var(--accent-red)}.segmented button.active[data-mode=pvc],.segmented button.active[data-mode=avblock]{background:#ffd23f29;color:#ffe066}.segmented button.active[data-mode=vt],.segmented button.active[data-mode=vf]{background:#f25aec29;color:#ff727b}#bpm-slider{width:100%;accent-color:var(--accent-gold);cursor:pointer}#bpm-readout{color:var(--accent-gold);font-weight:700;text-transform:none;letter-spacing:0}#ecg-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.68rem;color:var(--muted);padding:6px 2px 4px}#ecg-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.toggles{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--muted)}.toggles label{display:flex;align-items:center;gap:8px;cursor:pointer}#ecg-panel{position:absolute;left:24px;bottom:24px;width:520px;max-width:calc(100vw - 48px);padding:12px 14px 8px;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(14px);box-shadow:0 8px 30px #00000059}#ecg-header{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:6px}#ecg-mode-label{font-weight:700;color:var(--text)}#ecg-canvas{width:100%;height:100px;border-radius:8px;background:#00000059;display:block}#info-panel{position:absolute;right:24px;bottom:24px;width:340px;max-height:46vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(14px);box-shadow:0 8px 30px #00000059;overflow:hidden}#info-tabs{display:flex;border-bottom:1px solid var(--panel-border)}.tab-btn{flex:1;background:transparent;border:none;color:var(--muted);font-size:.68rem;padding:10px 4px;cursor:pointer;letter-spacing:.01em}.tab-btn.active{color:var(--accent-gold);border-bottom:2px solid var(--accent-gold)}#info-body{padding:14px 16px;overflow-y:auto;font-size:.84rem;line-height:1.5}.tab-content{display:none}.tab-content.active{display:block}.tab-content h2{font-size:.95rem;margin:0 0 8px}.tab-content h3{font-size:.82rem;margin:14px 0 4px;color:var(--accent-gold)}.tab-content p{margin:0 0 8px;color:#cdd6e6}.tab-content ul{margin:0 0 8px;padding-left:18px;color:#cdd6e6}.tab-content .muted{color:var(--muted)}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}#tooltip{position:absolute;pointer-events:none;background:#0a0e18eb;border:1px solid var(--panel-border);border-radius:8px;padding:6px 10px;font-size:.78rem;max-width:220px;transform:translate(-50%,-130%);z-index:30;box-shadow:0 6px 18px #0006}#tooltip.hidden{display:none}#tooltip strong{display:block;margin-bottom:2px;color:var(--accent-gold)}#attribution{position:absolute;left:24px;top:76px;max-width:320px;font-size:.65rem;color:var(--muted);text-align:left;line-height:1.4;pointer-events:none}#attribution.hidden{display:none}@media (max-width: 900px){#cardiac-phase{top:150px;transform:translate(-50%) scale(.86)}#cardiac-cycle{top:150px;left:12px;transform:scale(.86);transform-origin:top left}#cross-section-panel{padding:140px 12px 180px}#info-panel{display:none}#ecg-panel{width:calc(100vw - 48px)}}
