@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans JP',sans-serif;color:#e4eaf2;background:#090f18;font-synthesis:none;color-scheme:dark;--line:#253141;--muted:#95a5b8;--mint:#6ce7ca}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#152130;color:#dce6f1;border-radius:7px;padding:9px 13px;font-size:14px;transition:background .15s}button:hover{background:#243447}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button.active,button[aria-pressed=true]{background:#173a37;color:#91f4dc;border-color:#387265}a{color:var(--mint)}header{height:79px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:13px}.brandmark{width:36px;height:36px;background:#153830;border:1px solid #397365;border-radius:10px;display:grid;place-items:center;color:var(--mint);font-size:24px}.brand h1{font-size:24px;letter-spacing:-1px;margin:0;font-weight:600}.brand h1 span{font-weight:400;color:#8495ab}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted)}.header-right{display:flex;gap:18px;align-items:center}.small{font-size:12px;color:var(--muted)}.workspace{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:calc(100vh - 79px)}aside{padding:25px 16px;border-right:1px solid var(--line);background:#0c1420}.aside-title{display:flex;justify-content:space-between;align-items:center;padding:0 10px 20px;font-size:14px}.count{border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:12px;color:var(--muted)}.group-title{margin:16px 10px 9px;color:#8191a6;font-size:12px;letter-spacing:1px}.view-btn{width:100%;display:flex;align-items:center;gap:11px;margin:3px 0;text-align:left;background:transparent;border:1px solid transparent;padding:10px;border-radius:7px;min-height:49px}.view-btn .num{color:#8292a8;font-size:12px;width:20px}.view-btn .name{flex:1;font-size:14px}.view-btn .degree{font-size:12px;color:#9eacbd}.view-btn.active .num,.view-btn.active .degree{color:var(--mint)}main{padding:25px 26px 20px;min-width:0;max-width:1800px;width:100%;margin:auto}.current-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.current-head h2{font-size:25px;margin:4px 0 5px;letter-spacing:-.5px;font-weight:500}.current-head p{font-size:14px;color:var(--muted);margin:0}.counter{font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}.counter button{padding:7px 12px}.panels{display:grid;grid-template-columns:1.08fr 1fr;gap:16px}.panel{background:#0c1521;border:1px solid var(--line);border-radius:11px;overflow:hidden;min-width:0}.panel-head{height:58px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid #213042}.panel-title{font-size:14px;font-weight:500}.panel-title span{color:var(--mint);font-size:12px;margin-right:8px}.segmented{display:flex;gap:2px}.segmented button{font-size:12px;border:0;background:transparent;padding:6px 8px;white-space:nowrap}.segmented button.active{background:#253647;color:#eef9ff}.stage{height:430px;position:relative;background:radial-gradient(ellipse at 50% 45%,#172536 0%,#0b1420 70%)}canvas{display:block;width:100%;height:100%}.heart-canvas{touch-action:none;cursor:grab}.heart-canvas:active{cursor:grabbing}.overlays{position:absolute;inset:0;pointer-events:none}.model-label{position:absolute;font-size:12px;color:#dbe6ef;padding:2px 5px;background:#101c2cd9;border-radius:3px;transform:translate(-50%,-50%)}.canvas-meta{position:absolute;top:15px;left:16px;font-size:12px;color:#9fb1c4;line-height:1.8}.axis-corner{position:absolute;bottom:17px;left:18px;font-size:12px;color:#89a4b8}.stage-tools{position:absolute;right:12px;bottom:12px;display:flex;gap:5px}.stage-tools button{background:#152436d9;font-size:12px;padding:6px 9px}.canvas-foot{display:flex;align-items:center;justify-content:space-between;min-height:39px;padding:10px 16px;gap:8px;font-size:12px;color:#8ea1b7;border-top:1px solid #213042}.key{display:flex;align-items:center;gap:7px}.key i{display:inline-block;width:14px;height:2px;background:var(--mint)}.echo-stage{background:#040910}.echo-meta{display:flex;justify-content:space-between;position:absolute;top:14px;left:16px;right:16px;pointer-events:none;font-size:12px;color:#a8bbce}.live-angle{font-size:18px;color:var(--mint);font-variant-numeric:tabular-nums}.legend{display:flex;flex-wrap:wrap;gap:11px;margin:13px 0 20px;color:#acbacb;font-size:12px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:7px;height:7px;border-radius:50%;background:var(--c)}.controls{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:17px}.control-card{background:#101b29;border:1px solid var(--line);border-radius:10px;padding:18px}.control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;font-size:14px}.control-header small{font-size:12px;color:var(--muted)}.range-row{display:grid;grid-template-columns:110px minmax(50px,1fr) 59px;align-items:center;gap:15px;margin:15px 0;font-size:14px}.range-row output{text-align:right;color:#c4d6e8;font-size:14px;font-variant-numeric:tabular-nums}.range-row label{color:#aebcce}input[type=range]{width:100%;accent-color:var(--mint);height:18px;cursor:pointer;margin:0}.transport{display:flex;gap:8px;align-items:center}.primary{background:var(--mint);color:#092c24;border-color:var(--mint)}.primary:hover{background:#a2f5df}.beat{display:flex;align-items:center;gap:12px}.beat strong{font-size:24px;font-weight:500;color:var(--mint)}.phase-line{height:49px;display:flex;gap:14px;align-items:center}.phase-track{height:6px;flex:1;border-radius:20px;background:linear-gradient(to right,#4776a8 0 38%,#25453f 38% 100%);position:relative}.phase-dot{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:#b2fce7;transform:translateX(-50%)}.phase-label{font-size:12px;width:49px;color:#b6c8d9}.transition{margin-top:17px;border:1px solid var(--line);border-radius:10px;padding:17px 18px;background:#101b29}.transition-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.transition-title{font-size:14px}.route{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.route select{min-width:0;max-width:240px;flex:1;width:100%;font-size:14px;padding:9px;background:#111f2e;color:#dee7f0;border:1px solid #354458;border-radius:6px}.route-arrow{color:var(--mint)}.route-progress{display:flex;align-items:center;gap:14px;margin-top:15px;font-size:12px;color:var(--muted)}.route-progress output{min-width:35px}.control-hint{font-size:12px;color:#98aabe;margin-top:13px;line-height:1.75;min-height:21px}.notice{display:flex;gap:20px;justify-content:space-between;align-items:start;margin-top:20px;font-size:12px;line-height:1.8;color:#8699ae}.notice p{margin:0;max-width:770px}.notice details{flex-shrink:0}.notice summary{cursor:pointer;color:#afc1d4}.notice ul{list-style:none;padding:0}.mobile-select{display:none}.fatal{margin:30px;padding:24px;color:#ffd6ca;background:#402824;border:1px solid #9c6656;line-height:1.8}.selected-state{color:var(--mint);font-size:12px}.hover-info{position:absolute;bottom:15px;left:18px;right:18px;text-align:center;font-size:12px;color:#d7e9e3;pointer-events:none}.echo-canvas{cursor:crosshair}.motion-info{font-size:12px;color:var(--mint)}@media(min-width:1600px){.stage{height:520px}}@media(max-width:1200px){.workspace{grid-template-columns:211px minmax(0,1fr)}main{padding:21px 18px}.stage{height:350px}.transition-top{flex-wrap:wrap}.route{flex-basis:75%}.controls{grid-template-columns:1fr 1fr}.range-row{grid-template-columns:85px 1fr 51px;gap:9px}.current-head h2{font-size:22px}}@media(max-width:900px){header{height:70px;padding:0 18px}.header-right .eyebrow{display:none}.workspace{display:block}aside{display:none}.mobile-select{display:block;width:100%;padding:11px;border:1px solid var(--line);border-radius:7px;background:#142233;color:#dbe7f3;margin-bottom:19px;font-size:16px}.stage{height:380px}.current-head{gap:10px}.current-head p{font-size:12px}.current-head h2{font-size:22px}.panels{gap:12px}.panel-head{padding:0 12px}.controls{gap:12px}.control-card{padding:15px}.canvas-foot{padding:10px}.notice{flex-direction:column;gap:10px}}@media(max-width:650px){main{padding:20px 12px}.brand h1{font-size:22px}.header-right{gap:5px}.panels,.controls{grid-template-columns:1fr}.stage{height:370px}.current-head{align-items:flex-start}.counter>span{display:none}.current-head h2{font-size:20px}.control-header{margin-bottom:12px}.range-row{grid-template-columns:103px 1fr 58px}.route{flex-basis:100%;flex-wrap:wrap}.route select{max-width:100%;width:40%;font-size:13px}.route .primary{width:100%}.transition-top{gap:13px}.transition-title{width:100%}.notice details{flex-shrink:1}.legend{gap:10px}.panel-head{height:53px}.canvas-foot{font-size:12px}.counter button{padding:7px 10px}.phase-line{height:42px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none}}
/* Anatomy workstation */
:root{--mint:#98d6c7}header{height:67px}.workspace{min-height:calc(100vh - 67px)}.brand h1{letter-spacing:-.5px}.brandmark{background:#273930;border-color:#5e7262;color:#d1cfad}.panels{grid-template-columns:1.14fr 1fr}.stage{height:500px;background:radial-gradient(ellipse at 50% 45%,#24323a 0%,#0e1720 75%)}.echo-stage{background:#03090e}.canvas-meta{font-size:12px;line-height:1.8;color:#a9b5b5}.model-loading{position:absolute;inset:0;display:grid;place-items:center;background:#0e1720f2;z-index:6;color:#a6c9c0}.part-info{position:absolute;bottom:52px;left:16px;right:16px;color:#d7c6b5;font-size:13px;pointer-events:none}.model-label{color:#e6e3d9;background:#14222dc7;font-size:12px;border:1px solid #c2b29d42;border-radius:3px;padding:3px 6px}.anatomy-toolbar{display:flex;gap:17px;align-items:center;flex-wrap:wrap;margin:13px 0 0;color:#bfcdcc;font-size:13px}.anatomy-toolbar .check{display:flex;align-items:center;gap:6px;cursor:pointer}.anatomy-toolbar input{accent-color:#8ac9b7}.anatomy-toolbar button{margin-left:auto;font-size:12px;padding:6px 10px}.legend{margin-top:12px}.route-progress>span{white-space:nowrap}.control-header small{margin-left:5px}.notice details{max-width:390px}.notice li{margin-bottom:8px}.header-right .small{max-width:270px;font-size:12px}.selected-state{white-space:nowrap}.panel-head{padding:0 14px}.segmented button{padding:6px 7px}.echo-meta{font-size:11px}.current-head{margin-bottom:17px}.controls{margin-top:14px}.transition{margin-top:13px}.stage-tools{gap:4px}.stage-tools button{font-size:12px}.notice{margin-bottom:15px}@media(min-width:1600px){.stage{height:620px}}@media(max-width:1200px){.stage{height:440px}.canvas-foot{flex-wrap:wrap}.panel-title{font-size:13px}.panel-head{padding:0 10px}.segmented button{font-size:11px;padding:6px}}@media(max-width:900px){.panels{grid-template-columns:1fr 1fr}.stage{height:440px}.header-right .small{max-width:180px}.anatomy-toolbar{font-size:12px;gap:10px}}@media(max-width:650px){.panels{grid-template-columns:1fr}.stage{height:440px}.header-right .small{max-width:145px;text-align:right;font-size:11px}.anatomy-toolbar button{margin-left:0}.panel-title{font-size:14px}.segmented button{font-size:12px}.notice details{max-width:100%}.part-info{font-size:12px}.canvas-foot{font-size:11px}.brand h1{font-size:20px}.current-head{align-items:center}}

/* Valve study: persistent names, physiological phase and an en-face view. */
.valve-workbench{border:1px solid #344354;background:#101b27;border-radius:10px;margin:0 0 16px;padding:13px 15px}.valve-nav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.valve-nav>span{font-size:14px;margin-right:8px;color:#cbd8e2}.valve-nav button{font-size:14px;padding:7px 11px}.valve-nav b{color:#e8c493;margin-right:4px}.cycle-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:14px}.cycle-strip>span{min-width:85px;color:#e6ceab}#valve-status{display:flex;gap:6px}#valve-status span{padding:4px 7px;border:1px solid #3b4857;border-radius:4px;color:#abb8c4;white-space:nowrap}#valve-status span[data-open=true]{color:#a0ebd4;border-color:#4f8274;background:#1c3c35}.quick-phases{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}.quick-phases button{font-size:13px;padding:5px 8px}.leaflet-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 10px;padding-top:12px;border-top:1px solid #344354;font-size:14px;color:#c7d6e4}.leaflet-toolbar>div{display:flex;gap:5px}.leaflet-toolbar button{font-size:13px;padding:5px 8px}.leaflet-key{display:flex;flex-wrap:wrap;gap:7px}.leaflet-key button{display:flex;align-items:center;gap:7px;font-size:14px;padding:6px 9px}.leaflet-key i{width:10px;height:10px;background:var(--leaflet);border-radius:50%}.leaflet-key span{font-size:12px;color:#adbec9}.leaflet-key button[aria-pressed=true]{border-color:var(--leaflet);background:#34404c}.leaflet-label{border-color:var(--leaflet);color:var(--leaflet);background:#101a26ed;font-size:14px;font-weight:600}#leaflet-hint{font-size:13px;color:#9eb3c3;margin:9px 0 0;line-height:1.65}#leaflet-panel[hidden]{display:none}#leaflets-in-section{max-width:100%;line-height:1.5}.live-angle{white-space:nowrap}.skeleton-controls+.panels .stage{height:470px}@media(min-width:1600px){.skeleton-controls+.panels .stage{height:570px}}@media(max-width:1100px){.quick-phases{margin-left:0}.leaflet-key span{display:none}.leaflet-toolbar{flex-wrap:wrap}}@media(max-width:650px){.valve-workbench{padding:11px}.valve-nav{gap:5px}.valve-nav>span{width:100%}.valve-nav button{font-size:13px;padding:7px 8px}.cycle-strip{gap:9px}.quick-phases button{font-size:12px}.leaflet-toolbar{font-size:13px;gap:7px}.leaflet-key button{font-size:13px}.skeleton-controls+.panels .stage{height:410px}.canvas-meta{max-width:65%;font-size:11px}.leaflet-label{font-size:13px}.live-angle{font-size:14px}}

/* Exterior transparency only changes the 3D display, preserving section anatomy. */
.skeleton-controls{padding:13px 16px;border:1px solid #344958;border-radius:9px;margin-bottom:16px;background:#162b35;display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:10px 20px;align-items:center}.skeleton-controls[hidden],#av-tee-reference[hidden]{display:none}.skeleton-opacity{display:grid;grid-template-columns:auto minmax(90px,1fr) 42px;align-items:center;gap:13px;font-size:14px}.skeleton-opacity input{width:100%;accent-color:#98d6c7}.skeleton-opacity output{color:#a8e1cf;text-align:right;font-variant-numeric:tabular-nums}.skeleton-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.skeleton-actions button,.skeleton-actions label{font-size:14px}.skeleton-actions label{display:flex;align-items:center;gap:5px;color:#d0dfdf}.skeleton-controls p{grid-column:1/-1;font-size:14px;line-height:1.6;color:#afc5c7;margin:0}.skeleton-actions input{accent-color:#98d6c7}#av-tee-reference{display:inline-block;color:#a8e1cf;font-size:14px;margin-top:9px}.panel-head{flex-wrap:wrap;height:auto;min-height:58px;gap:8px;padding-top:8px;padding-bottom:8px}.panel-head .segmented button{font-size:14px}.echo-meta #slice-nearfield{font-size:12px}@media(max-width:650px){.skeleton-controls{padding:12px}.skeleton-opacity{gap:9px}.panel-head .segmented button{font-size:13px}}

@media(max-width:1200px){.skeleton-controls{grid-template-columns:1fr}.skeleton-controls p{grid-column:auto}}
/* Keep the full catalogue close to the model, with separate standard and vascular groups. */
.workspace{align-items:start}main{margin:0 auto}aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.view-list{overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain;padding-right:3px}.view-group[hidden]{display:none}.aside-title{padding-bottom:13px}.view-filters{display:flex;gap:7px;margin:0 5px 8px}.view-filters button{flex:1;padding:8px 4px;font-size:14px}.view-source{display:block;font-size:12px;line-height:1.5;margin:12px 8px 0;color:#98b4b9}.view-btn{gap:7px}.view-btn .degree{font-size:11px}.view-btn .num{min-width:22px}.view-context{border-left:2px solid #679d91;padding:1px 0 1px 12px;margin:-4px 0 17px;font-size:14px;color:#b7ccc9}.view-context>span{display:inline-block;margin:0 18px 4px 0}.view-context p{margin:3px 0 0;font-size:13px;line-height:1.65;color:#96aabb}.view-context #view-variants{display:inline-flex;gap:6px;margin:0 0 5px}.view-context #view-variants[hidden]{display:none}.view-context button{padding:5px 10px;font-size:14px}.anatomy-toolbar #vascular-overview{margin-left:auto}.anatomy-toolbar #plane-view{margin-left:0}.current-head p{line-height:1.55}#view-count{white-space:nowrap}@media(max-width:900px){aside{display:none}.mobile-select{font-size:14px}.view-context{margin-top:0}}@media(max-width:650px){.anatomy-toolbar #vascular-overview{margin-left:0}.view-context p{font-size:13px}}

/* Reserve the complete leaflet list so heartbeat updates never move controls.
   Both layers share a grid cell; the hidden, translated list sizes the cell
   at every viewport/font size without clipping the visible list. */
.panels .section-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.section-leaflets{display:grid;min-width:0;line-height:1.5}
.section-leaflets>span{grid-area:1 / 1;min-width:0;overflow-wrap:anywhere}
.section-reserve{visibility:hidden;pointer-events:none;user-select:none}
.cycle-strip>#cycle-stage{flex:0 0 6em;white-space:nowrap}
#valve-status span{inline-size:3.7em;text-align:center;flex-shrink:0}
html[lang="en"] .cycle-strip>#cycle-stage{flex-basis:12em}
html[lang="en"] #valve-status span{inline-size:5.5em}
#phase-name{white-space:nowrap}
@media(max-width:650px){.panels .section-footer{grid-template-columns:minmax(0,1fr)}}

/* Put the everyday heartbeat controls next to the model. */
.heartbeat-controls{margin-top:14px;padding-top:14px;border-top:1px solid #2d414b}
.heartbeat-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.heartbeat-heading{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.heartbeat-heading .eyebrow{font-size:11px;letter-spacing:1px;white-space:nowrap}
.heartbeat-heading #cycle-stage{display:block;inline-size:6em;flex-shrink:0;font-size:14px;color:#e6ceab;white-space:nowrap}
html[lang="en"] .heartbeat-heading #cycle-stage{inline-size:12em}
.heartbeat-play{inline-size:105px;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:10px;background:#96d6c7;color:#102e29;border-color:#96d6c7;padding:8px 12px;font-size:14px;font-weight:600}
.heartbeat-play[aria-pressed=true]{background:#223c3c;color:#c5f4e8;border-color:#547a72}
.heartbeat-play::before{content:'▶';font-size:11px;line-height:1}
.heartbeat-play[aria-pressed=true]::before{content:'Ⅱ';font-size:15px}
.heartbeat-timeline{margin-top:14px}
.heartbeat-markers{display:grid;grid-template-columns:38% 62%;padding:0 42px;margin-bottom:2px;font-size:11px;color:#8caac0}
.heartbeat-markers span+span{color:#90b9ae}
.heartbeat-scrubber{display:grid;grid-template-columns:30px minmax(0,1fr) 36px;gap:12px;align-items:center;color:#8199ab;font-size:11px;font-variant-numeric:tabular-nums}
.heartbeat-scrubber input[type=range]{height:28px;touch-action:pan-y}
.heartbeat-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;font-size:12px;line-height:1.6;color:#8da8b2;margin-top:4px}
.heartbeat-caption output{min-width:4ch;text-align:right;color:#bddecf;font-variant-numeric:tabular-nums}
.heartbeat-options{margin-top:9px;color:#94aab7;font-size:12px}
.heartbeat-options summary{cursor:pointer;width:fit-content;padding:3px 0}
.heartbeat-options-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;border-top:1px solid #2d414b;padding-top:10px;margin-top:8px}
.heartbeat-options-body .range-row{margin:0;grid-template-columns:65px minmax(70px,1fr) 66px;font-size:12px;max-width:400px}
.speed-setting{display:flex;align-items:center;gap:10px}.speed-setting select{padding:6px;font-size:12px;background:#152130;border:1px solid #354458;border-radius:6px}
.heartbeat-options-body .control-hint{grid-column:1/-1;margin-top:0}
.controls{display:block}.probe-controls{padding:17px 18px}.probe-controls .control-header{margin-bottom:14px}
.probe-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.probe-fields .range-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:'label value' 'input input';gap:8px;margin:0}
.probe-fields label{grid-area:label;font-size:13px}.probe-fields input{grid-area:input}.probe-fields output{grid-area:value;font-size:13px}
.probe-fields .lateral-control{grid-column:1/-1;grid-template-areas:'label value' 'input input' 'scale scale'}
.lateral-scale{grid-area:scale;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#98aabe}
.lateral-scale button{min-height:36px;padding:5px 10px;font-size:12px}
.transition>summary{cursor:pointer;color:#bdcfda;padding:1px 0}.transition[open]>.transition-top{margin-top:15px}.transition .route{max-width:none}.transition .route select{max-width:none}
@media(max-width:900px){.heartbeat-top{gap:10px}.heartbeat-heading{min-width:170px}.heartbeat-top #valve-status{order:3;width:100%}.heartbeat-top #valve-status span{flex:1}.heartbeat-options-body{grid-template-columns:1fr}.heartbeat-options-body .control-hint{grid-column:auto}}
@media(max-width:650px){.heartbeat-heading{gap:8px}.heartbeat-heading .eyebrow{display:none}html[lang="en"] .heartbeat-heading #cycle-stage{inline-size:auto;font-size:13px}.heartbeat-play{inline-size:100px}.heartbeat-caption{font-size:11px}.probe-fields{grid-template-columns:1fr;gap:15px}.heartbeat-options-body .range-row{grid-template-columns:60px minmax(60px,1fr) 60px}.heartbeat-top #valve-status span{font-size:12px}.heartbeat-scrubber{gap:8px}}
.heartbeat-play{inline-size:112px;block-size:42px;white-space:nowrap}.heartbeat-play::before{flex-shrink:0}

/* Keep the anatomical model and its section together while controls scroll. */
@media(max-width:900px){
 main{display:flex;flex-direction:column;gap:12px;padding:12px}
 main>.mobile-select{order:0;margin:0;flex:none}
 main>.current-head{order:1;margin:0;flex:none}
 main>.panels{order:2;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none;background:#090f18;padding:6px 0;border-bottom:1px solid #354b58;box-shadow:0 10px 20px #090f18a6}
 .panels>.panel>.panel-head{min-height:38px;padding:5px 8px;gap:4px}
 .panels>.panel .panel-title{font-size:11px}.panels>.panel .panel-title>span{display:none}
 .panels .panel-head .segmented button{font-size:11px;padding:4px 5px}
 .panels>.panel>.stage{height:clamp(190px,30svh,300px)}
 .panels>.panel>.canvas-foot{display:none}
 .panels .echo-meta{top:5px;left:8px;right:8px;font-size:10px}.panels .echo-meta #slice-nearfield{font-size:9px}
 .panels .canvas-meta,.panels .axis-corner,.panels .part-info{display:none}
 .panels .stage-tools{bottom:5px;right:5px;gap:3px}
 .panels .stage-tools button{font-size:10px;padding:4px 5px}
 main>.controls{order:3;margin:0;flex:none}
 .probe-controls{padding:12px}.probe-fields{grid-template-columns:1fr 1fr;gap:14px 18px}
 .probe-fields .range-row{gap:4px}.probe-fields input[type=range]{height:32px;touch-action:pan-y}
 .probe-controls .control-header{margin-bottom:8px}.probe-controls .control-hint{margin-bottom:0;margin-top:8px}
 main>.valve-workbench{order:4;margin:0;flex:none}
 main>.transition{order:5;margin:0;flex:none}
 main>.skeleton-controls{order:6;margin:0;flex:none}
 main>.anatomy-toolbar{order:7;margin:0;flex:none}
 main>.legend{order:8;margin:0;flex:none}
 main>.coronary-key{order:9;margin:0;flex:none}
 main>.view-context{order:10;margin:0;flex:none}
 main>.notice{order:11;margin:0;flex:none}
 .controls,.valve-workbench,.transition,.skeleton-controls{scroll-margin-top:calc(30svh + 100px)}
}
@media(max-width:600px) and (min-height:501px){
 main>.panels{grid-template-columns:minmax(0,1fr);gap:5px}
 .panels>.heart-panel>.stage{height:clamp(110px,17svh,150px)}
 .panels>.slice-panel>.stage{height:clamp(180px,26svh,240px)}
 .panels .heart-panel .stage-tools{top:5px;bottom:auto;flex-direction:column}
 .panels .heart-panel .overlays .label{font-size:10px;padding:2px 4px}
 .controls,.valve-workbench,.transition,.skeleton-controls{scroll-margin-top:calc(43svh + 135px)}
}
@media(max-width:900px) and (max-height:500px){
 .panels>.panel>.stage{height:36svh;min-height:110px}
 .controls,.valve-workbench,.transition,.skeleton-controls{scroll-margin-top:calc(36svh + 95px)}
}