.electrophysiology-page {
  background: radial-gradient(circle at 84% 8%, rgba(216,112,44,.1), transparent 28%), linear-gradient(180deg, #0b0c0d, #0d0e10 72%, #0b0c0d);
}

.electrophysiology-shell { width: min(1360px, calc(100% - 40px)); padding-top: 1.4rem; }
.electrophysiology-shell .back-link { margin-bottom: .8rem; }
.electrophysiology-page .tool-tutorial-brief { width: 100%; margin: 0 0 .8rem; padding: .65rem 0 .75rem; }
.electrophysiology-page .tool-tutorial-brief-mark { width: 1.8rem; height: 1.8rem; }
.electrophysiology-page .tool-tutorial-brief h2 { font-size: 1.05rem; }
.electrophysiology-page .tool-tutorial-brief p { font-size: .75rem; line-height: 1.4; }

.electrophysiology-hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: .5rem 0 1rem; }
.electrophysiology-hero h1 { max-width: none; margin: .35rem 0 .45rem; font-size: clamp(2.25rem, 4.2vw, 4.25rem); }
.electrophysiology-hero .content-lead { max-width: 980px; font-size: .88rem; line-height: 1.5; }
.electrophysiology-hero .status-badge { flex: 0 0 auto; }

.simulation-section { margin-top: 1rem; }
.simulation-header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(231,223,209,.14); }
.simulation-header h2 { margin: .35rem 0 0; font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
.simulation-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.live-indicator { display: inline-flex; align-items: center; gap: .45rem; color: #b6d7ad; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-right: .25rem; }
.live-indicator i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.live-indicator.paused { color: var(--paper-muted); }
.live-indicator.ectopic { color: #ff8e78; }
.live-indicator.fibrillation { color: #ff6f91; text-shadow: 0 0 12px rgba(255,111,145,.35); }
.live-indicator.atrial-fibrillation { color: #ffc96b; text-shadow: 0 0 12px rgba(255,201,107,.32); }
.simulator-button { min-height: 2.2rem; border: 1px solid rgba(247,163,90,.34); background: rgba(216,112,44,.1); color: var(--orange-bright); padding: .5rem .7rem; font: inherit; font-size: .59rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.simulator-button:hover { border-color: rgba(247,163,90,.72); background: rgba(216,112,44,.18); transform: translateY(-2px); }
.simulator-button-defib { border-color: rgba(255,111,145,.54); background: rgba(255,111,145,.12); color: #ff9ab2; box-shadow: inset 0 0 18px rgba(255,111,145,.04); }
.simulator-button-defib:hover { border-color: rgba(255,111,145,.86); background: rgba(255,111,145,.2); }
.simulator-button-muted { border-color: rgba(231,223,209,.17); background: transparent; color: var(--paper-muted); }

.simulation-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(360px, .78fr); gap: clamp(1rem, 2vw, 1.7rem); align-items: start; padding-top: 1rem; }
.tissue-column { min-width: 0; }
.tissue-stage { position: relative; width: min(100%, max(340px, calc(100svh - 275px))); aspect-ratio: 1; margin: 0 auto; background: #fff; border: 1px solid rgba(247,163,90,.28); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.32); cursor: crosshair; }
.tissue-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(11,12,13,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,12,13,.045) 1px, transparent 1px); background-size: calc(100% / 16) calc(100% / 16); mix-blend-mode: multiply; }
#tissue-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#tissue-canvas:focus-visible { outline: 3px solid var(--orange-bright); outline-offset: -4px; }
.tissue-stage.anatomical-mode { width: 100%; aspect-ratio: 2 / 1; background: #0d0e10; }
.tissue-stage.anatomical-mode::after { opacity: .24; mix-blend-mode: screen; }
.tissue-stage.anatomical-mode .tissue-axis { color: rgba(231,223,209,.48); }

.sa-marker { position: absolute; z-index: 3; left: 6.25%; top: 6.25%; display: flex; align-items: center; gap: .55rem; color: #d75d19; transform: translate(-50%,-50%); pointer-events: none; }
.sa-marker span { position: relative; display: block; width: .85rem; height: .85rem; border: 2px solid currentColor; border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 0 0 0 4px rgba(216,112,44,.16), 0 0 17px rgba(216,112,44,.68); }
.sa-marker span::after { content: ''; position: absolute; inset: -8px; border: 1px solid currentColor; border-radius: 50%; animation: sa-pulse 2.2s ease-out infinite; }
.sa-marker strong { padding: .22rem .32rem; background: rgba(255,255,255,.86); color: #54260d; font-size: .48rem; letter-spacing: .08em; white-space: nowrap; }
.anatomy-labels[hidden] { display: none; }
.anatomy-labels span { position: absolute; z-index: 3; padding: .18rem .28rem; border: 1px solid rgba(103,190,230,.34); background: rgba(8,11,14,.76); color: rgba(198,232,247,.86); font-size: .42rem; font-weight: 800; letter-spacing: .07em; white-space: nowrap; pointer-events: none; }
.anatomy-label-front { left: 1.5%; top: 2%; border-color: rgba(247,163,90,.4) !important; color: #f7a35a !important; }
.anatomy-label-back { left: 51.5%; top: 2%; border-color: rgba(247,163,90,.24) !important; color: rgba(247,163,90,.72) !important; }
.anatomy-label-av { left: 20%; top: 37%; color: #ffd28b !important; border-color: rgba(255,210,139,.35) !important; }
.anatomy-label-his { left: 26%; top: 48%; }
.anatomy-label-purkinje { left: 34%; top: 81%; }
.surface-seam { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg,transparent,rgba(247,163,90,.45) 12%,rgba(247,163,90,.16) 88%,transparent); box-shadow: 0 0 12px rgba(247,163,90,.14); pointer-events: none; }
.surface-seam[hidden] { display: none; }
.surface-loop-hint { position: absolute; z-index: 3; left: 50%; top: .45rem; padding: .18rem .42rem; border: 1px solid rgba(247,163,90,.25); background: rgba(8,11,14,.82); color: rgba(247,163,90,.78); font-size: .4rem; font-weight: 800; letter-spacing: .08em; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.surface-loop-hint[hidden] { display: none; }
.tissue-axis { position: absolute; z-index: 2; margin: 0; color: rgba(15,16,18,.56); font-size: .44rem; font-weight: 850; letter-spacing: .1em; pointer-events: none; }
.tissue-axis-start { left: .65rem; top: .6rem; }
.tissue-axis-end { right: .65rem; bottom: .6rem; }
.stimulus-flash { position: absolute; z-index: 4; width: .65rem; height: .65rem; border: 1px solid var(--orange-bright); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.4); }
.stimulus-flash.active { animation: point-stimulus .9s cubic-bezier(.16,.72,.2,1); }
.stimulus-status { max-width: 680px; margin: .55rem auto 0; color: var(--paper-muted); font-size: .65rem; line-height: 1.4; }
.stimulus-status strong { color: var(--orange-bright); font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; }

.simulation-console { min-width: 0; display: grid; gap: .7rem; align-content: start; }
.model-picker { display: grid; grid-template-columns: minmax(0,1fr); gap: .55rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(231,223,209,.1); }
.model-picker > div:first-child > span,
.stimulus-mode-control > span { display: block; color: var(--orange-bright); font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.model-picker p { margin: .22rem 0 0; color: var(--paper-muted); font-size: .66rem; line-height: 1.35; }
.model-picker-actions,
.stimulus-mode-control > div { display: grid; grid-template-columns: 1fr 1.55fr; border: 1px solid rgba(231,223,209,.14); padding: 2px; background: rgba(0,0,0,.22); }
.model-choice,
.stimulus-choice { min-height: 2rem; border: 0; background: transparent; color: var(--paper-muted); padding: .42rem .52rem; font: inherit; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.model-choice:hover,
.stimulus-choice:hover { color: var(--paper); }
.model-choice.active,
.stimulus-choice.active { color: #23150b; background: var(--orange-bright); }
.model-choice:focus-visible,
.stimulus-choice:focus-visible { outline: 1px solid var(--orange-bright); outline-offset: 2px; }

.simulation-readout { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: stretch; border-top: 1px solid rgba(247,163,90,.35); }
.readout-primary { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: .45rem .55rem; border-right: 1px solid rgba(231,223,209,.1); }
.readout-primary span { color: var(--paper-muted); font-size: .5rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.readout-primary strong { color: var(--orange-bright); font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1; }
.simulation-readout dl { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; }
.simulation-readout dl div { padding: .55rem .65rem; border-right: 1px solid rgba(231,223,209,.1); }
.simulation-readout dl div:last-child { border-right: 0; }
.simulation-readout dt { color: var(--paper-muted); font-size: .53rem; }
.simulation-readout dd { margin: .2rem 0 0; color: var(--paper); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .66rem; }

.stimulus-mode-control { display: grid; grid-template-columns: auto minmax(220px,1fr); align-items: center; gap: .7rem; padding: .25rem 0; }
.stimulus-mode-control > div { grid-template-columns: .9fr 1.25fr; }

.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; border-top: 1px solid rgba(231,223,209,.1); }
.rate-control { padding: .65rem 0 0; }
.rate-control label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--paper-muted); font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rate-control output { color: var(--orange-bright); font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.rate-control input { width: 100%; height: 1.55rem; margin: .25rem 0 0; appearance: none; background: transparent; cursor: pointer; }
.rate-control input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg,rgba(247,163,90,.85),rgba(231,223,209,.16)); }
.rate-control input::-webkit-slider-thumb { width: .95rem; height: .95rem; margin-top: -.39rem; appearance: none; border: 3px solid #17100c; border-radius: 50%; background: var(--orange-bright); box-shadow: 0 0 0 1px rgba(247,163,90,.6); }
.rate-control input::-moz-range-track { height: 3px; background: rgba(231,223,209,.16); }
.rate-control input::-moz-range-progress { height: 3px; background: var(--orange-bright); }
.rate-control input::-moz-range-thumb { width: .8rem; height: .8rem; border: 3px solid #17100c; border-radius: 50%; background: var(--orange-bright); }
.rate-control input:focus-visible { outline: 1px solid var(--orange-bright); outline-offset: 3px; }
.rate-scale { display: flex; justify-content: space-between; gap: 1rem; color: rgba(231,223,209,.42); font-size: .49rem; letter-spacing: .07em; text-transform: uppercase; }
.rate-scale strong { color: var(--paper-muted); font-weight: 650; }

.trace-section { margin: 0; padding-top: .55rem; border-top: 1px solid rgba(231,223,209,.1); }
.trace-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 .35rem; border: 0; }
.trace-header h3 { margin: 0; color: var(--paper); font-size: .72rem; font-family: var(--font-sans); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trace-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; color: var(--paper-muted); font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.trace-key span { display: inline-flex; align-items: center; gap: .35rem; }
.trace-key i { display: inline-block; width: 1rem; height: 2px; }
.trace-key-ecg { background: var(--orange-bright); box-shadow: 0 0 7px rgba(247,163,90,.45); }
.trace-key-tissue { background: rgba(231,223,209,.48); }
.trace-canvas-shell { position: relative; height: clamp(145px, 21svh, 210px); border-top: 1px solid rgba(231,223,209,.08); border-bottom: 1px solid rgba(231,223,209,.08); background: rgba(0,0,0,.18); overflow: hidden; }
#trace-canvas { display: block; width: 100%; height: 100%; }
.trace-live-label { position: absolute; right: .5rem; bottom: .4rem; color: rgba(231,223,209,.42); font-size: .46rem; letter-spacing: .08em; text-transform: uppercase; }

.compact-legend { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; align-items: end; }
.state-legend { margin: 0; }
.legend-gradient { height: .38rem; border: 1px solid rgba(231,223,209,.18); background: linear-gradient(90deg,#000 0%,#5e4638 48%,#d9ad8c 68%,#fff 100%); }
.state-legend > div:last-child { display: flex; justify-content: space-between; gap: .6rem; margin-top: .3rem; color: var(--paper-muted); font-size: .5rem; line-height: 1.2; }
.state-legend > div:last-child span:nth-child(2) { text-align: center; color: #d9ad8c; }
.state-legend > div:last-child span:last-child { text-align: right; }
.state-legend b { color: var(--paper); font-weight: 650; }
.conduction-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem .7rem; color: var(--paper-muted); font-size: .49rem; }
.conduction-legend[hidden] { display: none; }
.conduction-legend span { display: flex; align-items: center; gap: .35rem; }
.conduction-legend i { width: .8rem; height: .3rem; display: inline-block; border-radius: 999px; }
.legend-node { background: #ffbf6c; box-shadow: 0 0 6px rgba(255,191,108,.3); }
.legend-atrial { background: #70d0c0; }
.legend-his { background: #67bee6; }
.model-caveat { margin: 0; color: rgba(231,223,209,.5); font-size: .57rem; line-height: 1.35; }

.next-stage,
.electrophysiology-disclaimer { margin-top: clamp(3.5rem,7vw,6.5rem); }
.next-stage { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(0,1fr); gap: clamp(2rem,6vw,5rem); padding-top: 1.25rem; border-top: 1px solid rgba(231,223,209,.14); }
.next-stage h2 { margin: .55rem 0 0; font-size: clamp(2.35rem,5vw,4.25rem); }
.next-stage ol { margin: 0; padding: 0; list-style: none; }
.next-stage li { display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: 1rem; padding: .9rem 0 1rem; border-bottom: 1px solid rgba(231,223,209,.1); }
.next-stage li > span { color: var(--orange); font-size: .62rem; letter-spacing: .12em; }
.next-stage strong { display: block; color: var(--paper); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.next-stage p { margin: .4rem 0 0; color: var(--paper-muted); font-size: .82rem; line-height: 1.55; }
.electrophysiology-disclaimer { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 1.5rem; padding: 1.1rem 0; border-top: 1px solid rgba(247,163,90,.34); border-bottom: 1px solid rgba(231,223,209,.1); }
.electrophysiology-disclaimer strong { color: var(--orange-bright); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.electrophysiology-disclaimer p { margin: 0; max-width: 850px; color: var(--paper-muted); font-size: .78rem; line-height: 1.6; }

@keyframes sa-pulse { 0% { opacity:.8; transform:scale(.65); } 75%,100% { opacity:0; transform:scale(1.8); } }
@keyframes point-stimulus { 0% { opacity:.95; box-shadow:0 0 0 0 rgba(247,163,90,.68),0 0 18px rgba(247,163,90,.8); transform:translate(-50%,-50%) scale(.45); } 100% { opacity:0; box-shadow:0 0 0 34px rgba(247,163,90,0),0 0 28px rgba(247,163,90,0); transform:translate(-50%,-50%) scale(1.3); } }

@media (max-width: 980px) {
  .electrophysiology-hero { display: grid; }
  .simulation-layout { grid-template-columns: 1fr; }
  .tissue-stage { width: min(100%, 680px); }
  .simulation-console { width: min(100%, 680px); margin: 0 auto; }
}

@media (max-width: 680px) {
  .electrophysiology-shell { width: min(100% - 24px,1360px); }
  .electrophysiology-hero .status-badge { margin-top: .25rem; }
  .simulation-header { display: grid; align-items: start; }
  .simulation-actions { justify-content: flex-start; flex-wrap: wrap; }
  .simulation-layout { grid-template-columns: minmax(0,1fr); }
  .tissue-stage { width: 100%; min-width: 0; }
  .stimulus-mode-control { grid-template-columns: 1fr; gap: .4rem; }
  .rate-grid { grid-template-columns: 1fr; gap: .25rem; }
  .simulation-readout { grid-template-columns: 58px minmax(0,1fr); }
  .simulation-readout dl div { padding: .45rem; }
  .compact-legend { grid-template-columns: 1fr; }
  .conduction-legend { justify-content: flex-start; }
  .next-stage { grid-template-columns: 1fr; gap: 1rem; }
  .electrophysiology-disclaimer { grid-template-columns: 1fr; gap: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-marker span::after { animation: none; }
}