/* ============================================================
   w-heart3d.css — "Explore a real heart" (js/w-heart3d.js, js/heart3d.js). Every class is h3__.
   The stage is the plate's dark ink, so the heart reads as the same heart as on the body;
   the controls under it are the Learn tab's paper. The accent is the lab's heart ink.
   ============================================================ */
.h3,.h3__stage{--h3-ink:var(--k-heart,#A3213A);--h3-ink-tint:#FBEAEE;--h3-deo:#3B62B5;--h3-oxy:#D63C3B}

/* ---------- tabs ---------- */
.h3__tabs{display:flex;gap:4px;margin:4px 0 10px;padding:3px;background:var(--edge-2,#EFE8DC);border-radius:var(--r-pill,999px);width:max-content;max-width:100%;flex-wrap:wrap}
.h3__tab{font:inherit;font-size:13.5px;font-weight:700;color:#4A4A4A;background:transparent;border:0;border-radius:var(--r-pill,999px);padding:6px 14px;cursor:pointer}
.h3__tab:hover{color:var(--ink,#1A1A1A);background:#fff}
.h3__tab.is-on{background:var(--h3-ink);color:#fff}
.h3__tab:focus-visible,.h3__vb:focus-visible,.h3__valve:focus-visible,.h3__segb:focus-visible,.h3__run:focus-visible,.h3__bplay:focus-visible,.h3__ball:focus-visible,.h3__stepb:focus-visible,.h3__play:focus-visible,.h3__stgb:focus-visible{outline:2px solid var(--green,#14572B);outline-offset:2px}

/* ---------- the stage ---------- */
.h3__stage{position:relative;width:100%;aspect-ratio:16/11;max-height:78vh;min-height:320px;border-radius:14px;overflow:hidden;
  background:#060D12;background-image:radial-gradient(90% 75% at 50% 45%,#12252F 0%,#0A161D 62%,#060D12 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);touch-action:none;user-select:none;-webkit-user-select:none}
.h3__gl,.h3__gl canvas{position:absolute;inset:0;display:block}
/* standing in the plate's column: the whole column is the stage */
.sim > .h3__stage{flex:1;min-height:0;aspect-ratio:auto;max-height:none;margin-top:4px}
.h3__gl canvas{cursor:grab;outline:none}
.h3__gl canvas:active{cursor:grabbing}
.h3__load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#C9D8E0;
  font-family:var(--sans,system-ui,sans-serif);font-size:13.5px;text-align:center;padding:20px;z-index:3}
.h3__load[hidden]{display:none}
.h3__bar{display:block;width:160px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.h3__bar i{display:block;height:100%;width:0;background:#E9A69C;transition:width .2s}
.h3__where{position:absolute;left:12px;top:10px;margin:0;z-index:4;max-width:calc(100% - 200px);font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#9CB4C0;pointer-events:none;line-height:1.4}
.h3__views{position:absolute;right:10px;top:8px;z-index:4;display:flex;gap:4px}
.h3__vb{font:inherit;font-size:12px;font-weight:600;color:#DCE7EC;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill,999px);padding:3px 10px;cursor:pointer}
.h3__vb:hover{background:rgba(255,255,255,.14)}
.h3__vb.is-on{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff}
.h3__vb[hidden]{display:none}
/* the turning pad: four arrows in a cross, bottom left */
/* the turning arrows, each at the middle of the side it turns the heart towards (Daniel, 25 Sep: "put the
   buttons at the top, right, left and bottom ... where actually it makes sense") */
.h3__pad{position:absolute;inset:0;z-index:4;pointer-events:none}
.h3__turn{position:absolute;pointer-events:auto;font:inherit;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;touch-action:none;
  color:#E8EEF1;background:rgba(6,13,18,.55);border:1px solid rgba(255,255,255,.26);font-size:12px;line-height:1;-webkit-tap-highlight-color:transparent}
.h3__turn:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4)}
.h3__turn.is-held,.h3__turn:active{background:rgba(255,255,255,.28);border-color:#fff;color:#fff}
.h3__turn:focus-visible{outline:2.5px solid #9BE3A8;outline-offset:2px}
.h3__turn--up{top:8px;left:50%;margin-left:-17px} .h3__turn--down{bottom:8px;left:50%;margin-left:-17px}
.h3__turn--left{left:8px;top:50%;margin-top:-17px} .h3__turn--right{right:8px;top:50%;margin-top:-17px}
.h3--flat .h3__pad,.h3__load:not([hidden]) ~ .h3__pad{display:none}
/* how to use it, in the bottom left corner, clear of the arrow at the bottom's middle */
.h3__hint{position:absolute;left:12px;bottom:9px;max-width:calc(50% - 36px);margin:0;z-index:4;text-align:left;line-height:1.5;pointer-events:none;
  font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7F98A5}
.h3__legend{position:absolute;right:12px;bottom:26px;margin:0;z-index:4;pointer-events:none;font-family:var(--sans,system-ui,sans-serif);
  font-size:12px;color:#DCE7EC;background:rgba(6,13,18,.6);padding:4px 9px;border-radius:8px}
.h3__legend[hidden]{display:none}
.h3__legend .h3__key{display:block;line-height:1.55}
/* what the beat is doing now, on the heart itself */
.h3__stagecap{position:absolute;left:50%;top:50px;transform:translateX(-50%);z-index:4;margin:0;pointer-events:none;white-space:nowrap;
  font-family:var(--sans,system-ui,sans-serif);font-size:13px;color:#F4F7F8;background:rgba(6,13,18,.74);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:4px 12px}
.h3__stagecap b{font-weight:700;color:#FFE2B3;margin-right:5px}
.h3__stagecap i{font-style:italic;color:#FFB4A8;margin-left:4px}
.h3__stagecap[hidden]{display:none}
.h3__row--side .h3__lead{font-size:13px;font-weight:600;color:var(--grey,#6B6B6B)}
.h3__sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 5px 0 8px;vertical-align:-1px}
.h3__sw:first-child{margin-left:0}
.h3__sw--deo{background:var(--h3-deo)} .h3__sw--oxy{background:var(--h3-oxy)}

/* ---------- labels: ruled level with their part, so no two leaders can cross ---------- */
.h3__labels{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .16s}
.h3__labels.is-on{opacity:1}
.h3__leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h3__lead{stroke:#EEF3F5;stroke-width:1.1;fill:none}
.h3__leadhalo{stroke:#060D12;stroke-opacity:.7;stroke-width:3.4;fill:none;stroke-linecap:round}
.h3__dot{fill:#FFFFFF;stroke:#060D12;stroke-width:1.2}
.h3__lab{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;
  font-family:var(--sans,system-ui,sans-serif);padding:2px 6px;border-radius:6px;background:rgba(6,13,18,.55)}
.h3__lab--L{text-align:right;align-items:flex-end}
.h3__lab--R{text-align:left;align-items:flex-start}
.h3__labn{font-size:13.5px;font-weight:500;color:#F4F7F8}
.h3__labs{font-size:11px;color:#A9C0CB;margin-top:1px}
.h3__lab.is-sel{background:rgba(255,195,107,.2);box-shadow:inset 0 0 0 1px rgba(255,195,107,.55)}
.h3__lab.is-sel .h3__labn{color:#FFE2B3}
.h3__lab.is-tight{background:rgba(6,13,18,.85)}
/* a valve set wrongly, after Run this stage: its name, leader and dot flash red with the valve itself */
.h3__lab.is-wrong{background:#3A1216;box-shadow:inset 0 0 0 1.5px #FF6B6B;animation:h3wrong 1s ease-in-out infinite}
.h3__lab.is-wrong .h3__labn{color:#FFD0D0}
.h3__lead.is-wrong{stroke:#FF7A7A}
.h3__dot.is-wrong{fill:#FF5A5A}
@keyframes h3wrong{50%{background:#6B1E24;box-shadow:inset 0 0 0 1.5px #FFB3B3}}

/* ---------- the panels under the stage ---------- */
.h3__panel{margin-top:12px}
.h3__panel[hidden]{display:none}
.h3__row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:8px 0}
.h3__cut{display:flex;align-items:center;gap:10px;flex:1 1 320px;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink,#1A1A1A)}
.h3__cutname{white-space:nowrap}
.h3__rangewrap{position:relative;flex:1 1 auto;min-width:120px;padding-bottom:15px}
.h3__range{width:100%;accent-color:var(--h3-ink);margin:0;cursor:pointer}
.h3__tick{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--grey,#6B6B6B);white-space:nowrap;pointer-events:none}
.h3__tick i{position:absolute;left:50%;top:-7px;width:1px;height:5px;background:var(--grey,#6B6B6B)}
.h3__cutval{min-width:118px;font-weight:500;color:#4A4A4A;font-size:13px}
.h3__names.is-on{background:var(--h3-ink);border-color:var(--h3-ink);color:#fff}
.h3__names{border-color:var(--h3-ink);color:var(--h3-ink)}
.h3__info{background:#fff;border:1.5px solid var(--edge,#E7DFD1);border-left:4px solid var(--h3-ink);border-radius:var(--r,10px);padding:10px 14px;min-height:74px;font-size:14px;line-height:1.5}
.h3__info b{font-size:17px;color:var(--h3-ink);font-weight:700}
.h3__of{font-size:13px;color:#4A4A4A;margin-left:8px}
.h3__tag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey,#6B6B6B);background:var(--edge-2,#EFE8DC);border-radius:var(--r-pill,999px);padding:1px 8px;vertical-align:2px}
.h3__info small{display:block;font-size:14px;color:#333;margin-top:3px}
.h3__select{font:inherit;font-size:13.5px;padding:5px 8px;border:1.5px solid var(--edge,#E7DFD1);border-radius:8px;background:#fff;color:#333;max-width:100%}
.h3__note{font-size:12.5px;color:var(--grey,#6B6B6B);margin:8px 0 0;line-height:1.45}
.h3__note[hidden]{display:none}

/* segmented buttons: speed, stage */
.h3__seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;background:var(--edge-2,#EFE8DC);border-radius:12px}
.h3__segb{font:inherit;font-size:13px;font-weight:600;color:#4A4A4A;background:transparent;border:0;border-radius:9px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.h3__segb:hover{background:#fff;color:var(--ink,#1A1A1A)}
.h3__segb.is-on{background:#fff;color:var(--h3-ink);box-shadow:0 1px 2px rgba(60,45,25,.14)}
.h3__segb.is-done .h3__num{background:var(--green-2,#1E7A3E);color:#fff}
.h3__num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--edge,#E7DFD1);color:#4A4A4A;font-size:11.5px;font-weight:700;flex:none}
.h3__segb.is-on .h3__num{background:var(--h3-ink);color:#fff}

/* play buttons, like the lab's step animations */
.h3__play,.h3__run,.h3__bplay{font:inherit;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;padding:7px 16px;cursor:pointer;
  border:1.5px solid var(--h3-ink);border-radius:var(--r-pill,999px);background:var(--h3-ink);color:#fff}
.h3__play:hover,.h3__run:hover,.h3__bplay:hover{filter:brightness(1.08)}
.h3__play[hidden],.h3__ball[hidden]{display:none}
.h3__bplay.is-next{animation:h3-next 1.5s ease-out 2}
@keyframes h3-next{0%{box-shadow:0 0 0 0 rgba(163,33,58,.5)}100%{box-shadow:0 0 0 11px rgba(163,33,58,0)}}
.h3__ball{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;cursor:pointer;border:1.5px solid var(--edge,#E7DFD1);border-radius:var(--r-pill,999px);background:#fff;color:#5A5A5A}
.h3__ball:hover{border-color:var(--h3-ink);color:var(--h3-ink)}
.h3__count,.h3__score{font-size:12.5px;font-weight:600;color:var(--grey,#6B6B6B);font-variant-numeric:tabular-nums}

/* the flow tab's stage list */
.h3__stages{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.h3__stgb{font:inherit;font-size:13px;font-weight:600;color:#4A4A4A;background:#fff;border:1.5px solid var(--edge,#E7DFD1);border-radius:10px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.h3__stg.is-on .h3__stgb{border-color:var(--h3-ink);background:var(--h3-ink-tint);color:var(--ink,#1A1A1A)}
.h3__stg.is-on .h3__num{background:var(--h3-ink);color:#fff}
.h3__snd{font-size:11px;font-weight:700;color:var(--h3-ink);font-style:italic}
.h3__cap{font-size:14.5px;line-height:1.5;color:#2A2A2A;margin:10px 0 0;min-height:44px}

/* the valve switches */
.h3__intro{font-size:14px;line-height:1.5;color:#3C3C3C;margin:0 0 10px}
.h3__panel > .h3__beath:first-child{margin:2px 0 6px}
.h3__vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.h3__valve{font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:8px 11px;border-radius:10px;border:1.5px solid var(--edge,#E7DFD1);background:#fff;color:var(--ink,#1A1A1A)}
.h3__valve:hover{border-color:#C9A0AA}
.h3__vn{font-size:14px;font-weight:700}
.h3__vt{font-size:11.5px;color:var(--grey,#6B6B6B)}
.h3__vs{margin-top:5px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B6B6B}
.h3__vs::before{content:"";display:inline-block;width:18px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:2px;
  background:linear-gradient(90deg,#8A8A8A 0 45%,transparent 45% 55%,#8A8A8A 55% 100%)}
.h3__valve.is-open{border-color:var(--h3-ink);background:var(--h3-ink-tint)}
.h3__valve.is-open .h3__vs{color:var(--h3-ink)}
.h3__valve.is-open .h3__vs::before{background:linear-gradient(90deg,var(--h3-ink) 0 22%,transparent 22% 78%,var(--h3-ink) 78% 100%)}
.h3__valve.is-wrong{border-color:#C62828;box-shadow:0 0 0 2px rgba(198,40,40,.25)}
.h3__valve.is-wrong .h3__vn::after{content:' \2715';color:#C62828;font-weight:700}
.h3__result{margin-top:8px;font-size:14px;line-height:1.5}
.h3__result ul{margin:0;padding:10px 14px 10px 32px;border-radius:10px}
.h3__result li{margin:2px 0}
.h3__result.is-ok ul{background:var(--ok-tint,#E8F5EC);border:1px solid #A9D6BA}
.h3__result.is-bad ul{background:var(--bad-tint,#FBEDEA);border:1px solid #E8B4AA}
.h3__ask2{margin:0;color:#3C3C3C}
.h3__next{margin:8px 0 0}

/* Play the beat */
.h3__beat{margin-top:16px;padding-top:12px;border-top:1px dashed var(--edge,#E7DFD1)}
.h3__beath{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green,#14572B)}
.h3__beath small{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--grey,#6B6B6B);margin-left:6px}
.h3__steps{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.h3__stepb{font:inherit;display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;padding:7px 11px;border:1.5px solid var(--edge,#E7DFD1);border-radius:10px;background:#fff;color:#4A4A4A}
.h3__stepb:hover{border-color:#C9A0AA}
.h3__stept{display:block;font-size:13.5px;line-height:1.42}
.h3__stept b{color:var(--ink,#1A1A1A)}
.h3__stepp{display:none}
.h3__step.is-on .h3__stepp{display:block;margin-top:3px;color:#2A2A2A}
.h3__step.is-on .h3__stepb{border-color:var(--h3-ink);background:var(--h3-ink-tint)}
.h3__step.is-on .h3__num{background:var(--h3-ink);color:#fff}
.h3__step.is-done .h3__stepb{border-color:#A9D6BA;background:var(--green-tint,#E8F1EA)}
.h3__step.is-done .h3__num{background:var(--green-2,#1E7A3E);color:#fff}
.h3__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* beyond the syllabus: closed, and fenced */
.h3__beyond{margin-top:14px;border:1.5px dashed #CDB9E8;border-radius:10px;background:#FAF7FD}
.h3__beyond[open]{border-style:solid}
.h3__beyond summary{cursor:pointer;padding:9px 13px;font-size:13.5px;font-weight:600;color:#4B3A6E;list-style-position:inside}
.h3__bybody{padding:0 16px 12px;font-size:13.5px;line-height:1.52;color:#333}
.h3__bybody p{margin:0 0 8px}
.h3__bybanner{background:var(--red-tint,#FAECE9);border-left:3px solid var(--red,#B03A2E);padding:6px 10px;border-radius:0 6px 6px 0}
.h3__bybanner b{color:var(--red,#B03A2E)}
.h3__ibchip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#5A3D8A;background:#EFE8F8;border:1px solid #CDB9E8;border-radius:999px;padding:0 6px;margin-right:4px;vertical-align:1px}
.h3__src{font-size:11.5px;color:#6B6B63}
.h3__credit{font-size:11.5px;color:var(--grey,#6B6B6B);margin:10px 0 0;line-height:1.45}

/* without WebGL */
.h3__flat{position:absolute;inset:34px 10px 26px;display:flex;align-items:center;justify-content:center}
.h3__flat svg{width:100%;height:100%}
.h3--flat .h3__stage{touch-action:auto}
.h3--flat .h3__row--cut,.h3--flat .h3__note + .h3__panel .h3__row--cut{display:none}
.h3__hint[hidden]{display:none}

/* ---------- narrow screens ---------- */
@media (max-width:620px){
  .h3__tabs{display:flex;width:100%;flex-wrap:nowrap}
  .h3__tab{flex:1 1 0;padding:6px 4px;font-size:13px;white-space:nowrap}
  .h3__where2{display:none}
  .h3--live .h3__hint{display:none}
  .h3__stage{aspect-ratio:1/1.12;min-height:300px;border-radius:12px}
  .h3__where{max-width:calc(100% - 150px);font-size:9.5px}
  .h3__vb{font-size:11px;padding:2px 8px}
  .h3__labn{font-size:12px}
  .h3__labs{font-size:10px}
  .h3__vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h3__cut{flex-wrap:wrap}
  .h3__cutval{min-width:0}
  .h3__legend{bottom:48px;right:8px;font-size:11px}
  .h3__turn{width:32px;height:32px}
  .h3__turn--up,.h3__turn--down{margin-left:-16px} .h3__turn--left,.h3__turn--right{margin-top:-16px}
  .h3__turn--left{left:5px} .h3__turn--right{right:5px}
  .h3__hint{font-size:9px}
}
@media (prefers-reduced-motion:reduce){ .h3__bplay.is-next{animation:none} .h3__labels{transition:none} .h3__bar i{transition:none} .h3__lab.is-wrong{animation:none} }
/* a narrow stage (a phone): the view buttons smaller, and the view's name on one line */
@media (max-width:560px){
  .h3__vb{font-size:11px;padding:2px 7px}
  /* the view's name and buttons fill the top row here: the top arrow goes just under them, and the hint
     gives way to the arrows, which explain themselves */
  .h3__turn--up{top:40px}
  .h3__stagecap{top:80px}
  .h3__hint{display:none}
  .h3__where{max-width:calc(100% - 196px)}
  .h3__where2{display:none}
}
.h3__golink{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 4px}
.h3__golinkw{font-size:12.5px;color:var(--grey,#6B6B6B)}