/* AURIS real-time 3D HUD. Owner: hud. Scoped under .hud-root. */
.hud-root {
  --a: #e85d1f;
  --panel: rgba(22, 22, 24, .86);
  --bd: #2a2a2a;
  --mut: #8f8f8f;
  --live: #2fe08c;
  --rec: #ff4d4d;
  --buf: #f5c543;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --g: 40px;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.hud-root *, .hud-root *::before, .hud-root *::after { box-sizing: border-box; }
.hud-root button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
.hud-root button:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
.hud-root [hidden] { display: none !important; }
.hud-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.hud-dim { color: var(--mut); }
.hud-accent { color: var(--a); }
.hud-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--a); flex: none; }
.hud-panel {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* ---------- left column ---------- */
.hud-left {
  position: absolute;
  left: var(--g);
  top: calc(88px + var(--st));
  width: min(480px, 36vw);
  transition: opacity .18s ease, transform .18s ease;
}
.hud-left.is-swap { opacity: 0; transform: translateY(8px); }
.hud-head {
  margin: 0;
  font: 800 clamp(56px, 6.6vw, 104px)/.9 Poppins, Inter, sans-serif;
  letter-spacing: -.05em;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.hud-head em { font-style: normal; color: var(--a); }
.hud-copy { margin-top: 30px; max-width: 390px; }
.hud-copy p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #cfcfcf; }
.hud-copy p:last-child { color: #fff; font-weight: 500; }
.hud-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hud-btn {
  pointer-events: auto;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px !important;
  background: #1a1a1a !important;
  border: 1px solid var(--bd) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .2s, transform .2s, border-color .2s;
}
.hud-btn:hover { background: #242424 !important; border-color: #3a3a3a !important; }
.hud-btn--accent { background: var(--a) !important; border-color: var(--a) !important; }
.hud-btn--accent:hover { background: #f06a2c !important; border-color: #f06a2c !important; }
.hud-btn--ghost { background: transparent !important; border-color: transparent !important; }
.hud-btn--sm { height: 34px; padding: 0 16px; font-size: 10.5px !important; }
.hud-presets { display: none; gap: 6px; margin-top: 18px; }
.hud-root[data-demo="explore"] .hud-presets { display: flex; }
.hud-chip {
  pointer-events: auto;
  height: 28px;
  padding: 0 12px !important;
  border-radius: 999px;
  border: 1px solid var(--bd) !important;
  background: rgba(22, 22, 24, .7) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .06em;
  color: #bdbdbd !important;
  transition: color .2s, border-color .2s, background .2s;
}
.hud-chip:hover { color: #fff !important; border-color: #444 !important; }
.hud-chip.is-active { color: #fff !important; border-color: var(--a) !important; background: rgba(232, 93, 31, .14) !important; }

/* ---------- hotspots ---------- */
.hud-hotspots { position: absolute; inset: 0; }
.hud-hs {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .3s ease;
  pointer-events: none;
}
.hud-hs.is-on { opacity: 1; }
.hud-hs.is-on .hud-hs-pill { pointer-events: auto; }
.hud-hs-pill {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-14px, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px 0 11px !important;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(12, 12, 14, .9) !important;
  border: 1px solid var(--bd) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .06em;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transition: border-color .2s, background .2s;
}
.hud-hs-pill .hud-dot { box-shadow: 0 0 0 0 rgba(232, 93, 31, .55); animation: hud-ping 2.4s ease-out infinite; }
.hud-hs-pill:hover, .hud-hs-pill.is-active { border-color: var(--a) !important; background: rgba(30, 18, 12, .92) !important; }
@keyframes hud-ping { 0% { box-shadow: 0 0 0 0 rgba(232, 93, 31, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(232, 93, 31, 0); } }

/* ---------- right rail ---------- */
.hud-rail {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hud-thumb { pointer-events: auto; position: relative; display: block; border-radius: 12px; }
.hud-thumb-img {
  display: block;
  width: 60px;
  height: 76px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: #0f0f10 center / cover no-repeat;
  overflow: hidden;
  position: relative;
  opacity: .62;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.hud-thumb:hover .hud-thumb-img { opacity: 1; }
.hud-thumb.is-active .hud-thumb-img { opacity: 1; border-color: var(--a); box-shadow: 0 0 0 1px var(--a); }
.hud-thumb-tip {
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  transform: translate(6px, -50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  text-shadow: 0 1px 8px #000;
}
.hud-thumb:hover .hud-thumb-tip, .hud-thumb:focus-visible .hud-thumb-tip { opacity: 1; transform: translate(0, -50%); }
/* CSS placeholders until stage.snapshot fills them */
.hud-thumb-img.has-shot i { display: none; }
.hud-thumb-img i { position: absolute; inset: 0; }
.hud-ph--explore i::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 42px; transform: translate(-50%, -50%) rotate(-14deg);
  border-radius: 14px; background: radial-gradient(circle at 35% 25%, #6a6d73, #2c2e32 60%, #151618); box-shadow: 0 8px 14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hud-ph--explore i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -150%); background: var(--a); box-shadow: 0 0 8px var(--a);
}
.hud-ph--inside i {
  background:
    linear-gradient(#1d3a2c, #1d3a2c) 50% 30% / 36px 10px no-repeat,
    linear-gradient(#7a6a3a, #7a6a3a) 50% 50% / 30px 12px no-repeat,
    linear-gradient(#2c2e32, #2c2e32) 50% 70% / 36px 10px no-repeat,
    radial-gradient(circle at 50% 50%, #1a1a1c, #0c0c0d);
}
.hud-ph--shift i {
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(232, 93, 31, .9) 5px 7px) 50% 50% / 44px 18px no-repeat,
    radial-gradient(circle at 50% 50%, #1a1a1c, #0c0c0d);
  -webkit-mask: linear-gradient(#000, #000);
}

/* ---------- control capsule ---------- */
/* Docked 24px right of the headline (widest line ~5.5em of its font size), so the device sits
   clear of it; stage.js layoutView centres the device in the band to its right. */
.hud-capsule {
  pointer-events: auto;
  position: absolute;
  left: calc(var(--g) + 5.5 * clamp(56px, 6.6vw, 104px) + 24px);
  top: 50%;
  transition: left .5s cubic-bezier(.2, .8, .3, 1);
  transform: translateY(-46%);
  width: 72px;
  padding: 10px 0 12px;
  border-radius: 36px;
  background: var(--panel);
  border: 1px solid var(--bd);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.hud-mute {
  position: relative;
  width: 52px;
  height: 156px;
  border-radius: 26px !important;
  background: linear-gradient(180deg, #ff8a3d, var(--a) 55%, #c9480f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(0, 0, 0, .25), 0 8px 24px rgba(232, 93, 31, .35);
  transition: transform .15s ease, filter .2s, box-shadow .3s;
}
.hud-mute:hover { filter: brightness(1.06); }
.hud-mute:active { transform: scale(.97); }
.hud-mute-grip {
  position: absolute; left: 12px; right: 12px; top: 16px; bottom: 40px; border-radius: 10px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 7px);
}
.hud-mute-dot {
  position: absolute; left: 50%; bottom: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
  transition: background .2s;
}
.hud-mute.is-live { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px rgba(232, 93, 31, .22), 0 0 36px rgba(232, 93, 31, .6); }
.hud-mute.is-live .hud-mute-dot { background: var(--rec); animation: hud-blink 1.1s steps(2, jump-none) infinite; box-shadow: 0 0 10px var(--rec), 0 0 0 3px rgba(255, 255, 255, .85); }
.hud-mute:disabled { filter: grayscale(1) brightness(.45); cursor: not-allowed; box-shadow: none; }
@keyframes hud-blink { 50% { opacity: .25; } }
.hud-mute-label {
  position: absolute;
  left: calc(100% + 12px);
  top: 18px;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
}
.hud-switches { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--bd); }
.hud-switch { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hud-switch b { font: 500 8.5px/1 var(--mono); letter-spacing: .1em; color: var(--mut); }
.hud-switch.is-on b { color: #fff; }
.hud-sw-track {
  position: relative; display: block; width: 20px; height: 42px; border-radius: 7px;
  background: linear-gradient(90deg, #050505, #111 50%, #050505);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
.hud-sw-flag {
  position: absolute; left: 3px; right: 3px; top: 3px; height: 16px; border-radius: 3px;
  background: repeating-linear-gradient(135deg, var(--a) 0 3px, #ff7a3a 3px 6px);
  opacity: 0; transition: opacity .2s;
}
.hud-sw-thumb {
  position: absolute; left: 2px; right: 2px; top: 2px; height: 20px; border-radius: 5px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px) 50% 50% / 10px 10px no-repeat,
    linear-gradient(180deg, #d9dadd, #8f9297 55%, #6f7277);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
  transform: translateY(18px);
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.hud-switch.is-on .hud-sw-thumb { transform: translateY(0); }
.hud-switch[data-sw="mic"]:not(.is-on) .hud-sw-flag { opacity: 1; }
.hud-switch[data-sw="power"].is-on .hud-sw-track { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), inset 0 0 0 1px #000, 0 0 0 1px rgba(47, 224, 140, .25); }
.hud-dz {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 52px; padding: 9px 0 8px !important; border-radius: 16px !important;
  border: 1px solid var(--bd) !important; background: #121214 !important;
  transition: border-color .2s, background .2s;
}
.hud-dz b { font: 500 8px/1.15 var(--mono); letter-spacing: .1em; color: var(--mut); text-align: center; }
.hud-dz.is-on { border-color: var(--buf) !important; background: rgba(245, 197, 67, .08) !important; }
.hud-dz.is-on b { color: var(--buf); }
.hud-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.hud-bars i { width: 3px; border-radius: 1px; background: #3a3a3c; }
.hud-bars i:nth-child(1) { height: 25%; } .hud-bars i:nth-child(2) { height: 50%; }
.hud-bars i:nth-child(3) { height: 75%; } .hud-bars i:nth-child(4) { height: 100%; }
.hud-dz .hud-bars i { background: var(--live); }
.hud-dz.is-on .hud-bars i { background: #3a3a3c; }
.hud-dz.is-on .hud-bars i:nth-child(1) { background: var(--buf); }
.hud-capsule.is-off .hud-mute-label { color: var(--mut); }

@media (min-width: 761px) {
  /* inside: the exploded stack fills the band left of here */
  .hud-root[data-demo="inside"] .hud-capsule { left: calc(50% + clamp(150px, 13vw, 240px)); }
}
.hud-root[data-demo="board"] .hud-capsule { display: none; }

/* ---------- dock: form + swatches ---------- */
.hud-dock {
  position: absolute;
  right: 28px;
  bottom: calc(24px + var(--sb));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.hud-form, .hud-swatches {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--bd);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hud-form .hud-mono { font-size: 10px; margin-right: 6px; }
.hud-seg {
  height: 32px; padding: 0 12px !important; border-radius: 999px;
  font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: .06em; color: var(--mut) !important;
  transition: color .2s, background .2s;
}
.hud-seg:hover { color: #fff !important; }
.hud-seg.is-active { background: #fff !important; color: #0a0a0a !important; }
.hud-swatches { gap: 12px; padding: 0 22px 0 14px; height: 52px; }
.hud-sw {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), inset 0 -2px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12);
  transition: box-shadow .2s, transform .2s;
}
.hud-sw:hover { transform: scale(1.1); }
.hud-sw.is-active { box-shadow: 0 0 0 3px #161618, 0 0 0 4.5px var(--a); }
.hud-sw-name { min-width: 72px; margin-left: 4px; font-size: 10.5px; }

/* zoom: + / − (camera; in the board demo, the board) */
.hud-zoom {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 6px 0 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--bd);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hud-zoom > span.hud-mono { font-size: 10px; margin-right: 6px; }
.hud-zoom .hud-zbtn { width: 32px; height: 32px; border-radius: 50%; font: 400 20px/1 Inter, system-ui, sans-serif; transition: background .2s, color .2s; }
.hud-zoom .hud-zbtn:hover:not(:disabled) { background: #2a2a2a; }
.hud-zoom .hud-zbtn:disabled { color: #4a4a4c; cursor: default; }
.hud-zoom .hud-zoom-v { min-width: 50px; height: 32px; border-radius: 999px; color: var(--a); font: 500 10.5px/1 var(--mono); letter-spacing: .06em; }
.hud-zoom .hud-zoom-v:hover { background: #2a2a2a; }
.hud-root[data-demo="board"] .hud-form,
.hud-root[data-demo="board"] .hud-swatches { display: none; }

/* ---------- board demo: just the board ---------- */
.hud-board {
  display: none;
  position: absolute;
  left: calc(var(--g) + 5.5 * clamp(56px, 6.6vw, 104px) + 24px);
  right: 300px;
  top: calc(84px + var(--st));
  bottom: calc(84px + var(--sb));
  container-type: size;
  place-items: center;
}
.hud-root[data-demo="board"] .hud-board { display: grid; }
.hud-board-mount { pointer-events: auto; width: min(100cqw, 100cqh - 110px); animation: hud-in .35s ease both; }
.hud-board .pcbp { max-width: none; }
.hud-board .pcbp-leg { display: none; }
.hud-board .pcbp-cap { margin-bottom: 0; }
.hud-ph--board i { background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(232, 93, 31, .5) 7px 8px) 50% 50% / 34px 44px no-repeat, #1b1c1f; }

/* ---------- bottom pills ---------- */
.hud-pill {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: calc(24px + var(--sb));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 26px 0 22px !important;
  border-radius: 999px;
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .2s;
}
.hud-pill:hover { border-color: #444 !important; }
.hud-show { display: none; }

/* ---------- intro ---------- */
.hud-intro {
  pointer-events: auto;
  position: absolute;
  left: var(--g);
  bottom: calc(32px + var(--sb));
  width: 340px;
  padding: 20px 20px 18px;
  z-index: 3;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.hud-intro.is-in { opacity: 1; transform: none; }
.hud-intro-top { display: flex; align-items: center; gap: 12px; }
.hud-intro-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--a); display: grid; place-items: center; flex: none; }
.hud-intro-ic i { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 3px; transform: rotate(45deg); }
.hud-intro h3 { margin: 0; font: 800 20px/1 Poppins, sans-serif; letter-spacing: -.04em; }
.hud-intro p { margin: 12px 0 16px; font-size: 12.5px; line-height: 1.55; color: #a9a9a9; }
.hud-intro-btns { display: flex; gap: 6px; }
.is-pulse { animation: hud-pulse 1s ease-in-out 3; }
@keyframes hud-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 93, 31, 0); }
  50% { box-shadow: 0 0 0 6px rgba(232, 93, 31, .35), 0 0 40px rgba(232, 93, 31, .45); }
}
.hud-dock.is-pulse, .hud-rail.is-pulse { border-radius: 26px; }

/* ---------- cards ---------- */
.hud-cards { position: absolute; inset: 0; pointer-events: none; }
.hud-tabs { display: none; }
.hud-card { position: absolute; display: none; pointer-events: auto; padding: 16px 18px 18px; }
.hud-card.is-shown { display: block; animation: hud-in .35s ease both; }
@keyframes hud-in { from { opacity: 0; transform: translateY(10px); } }
.hud-card-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hud-card-k .hud-mono { font-size: 10.5px; color: #bdbdbd; }
.hud-x { width: 26px; height: 26px; border-radius: 50%; font-size: 18px !important; line-height: 1; color: #bdbdbd !important; }
.hud-x:hover { background: #2a2a2a !important; color: #fff !important; }
.hud-empty { color: var(--mut); font-size: 10.5px; padding: 18px 0; }

.hud-info {
  left: 50%;
  bottom: calc(92px + var(--sb));
  width: 390px;
  margin-left: -195px;
}
.hud-info .hud-card-k { margin: -4px -6px 14px 0; padding-bottom: 12px; border-bottom: 1px solid var(--bd); }
.hud-info-t { margin: 0 0 8px; font: 800 24px/1.05 Poppins, sans-serif; letter-spacing: -.045em; }
.hud-info-b { margin: 0; font-size: 13px; line-height: 1.55; color: #bdbdbd; }

.hud-explode, .hud-live { left: var(--g); bottom: calc(32px + var(--sb)); width: 340px; }
.hud-pcb, .hud-tx, .hud-map { right: 112px; width: 340px; }
.hud-pcb { top: calc(96px + var(--st)); }
.hud-tx { top: calc(96px + var(--st)); }
.hud-map { top: calc(420px + var(--st)); }
.hud-pcb-mount { border-radius: 10px; overflow: hidden; min-height: 120px; }
.hud-pcb-mount canvas { display: block; max-width: 100%; }

/* ---------- shift demo: keep the transcript / map cards clear of the device ----------
   In this demo the camera shows the device's right side (mic-kill and power switches), which
   sits further right on screen than the pcb/explore presets. Measured empirically: the
   mic-kill-switch anchor lands at ~73.5vw; the card's left edge must clear the flipped hotspot
   pill (anchor + 14px label offset) with a margin, or the pill's near edge and the device body
   render behind the card. `right` stays inherited (unchanged, keeps the existing gap to the
   rail); only `left` moves and `width` goes auto so the card fills whatever room is left. */
.hud-root[data-demo="shift"] .hud-tx,
.hud-root[data-demo="shift"] .hud-map {
  left: calc(73.5vw + 34px);
  width: auto;
}
.hud-root[data-demo="shift"] .hud-tx .hud-card-k,
.hud-root[data-demo="shift"] .hud-map .hud-card-k {
  flex-wrap: wrap;
  row-gap: 4px;
}
.hud-map-mount { height: 200px; border-radius: 10px; overflow: hidden; position: relative; background: #0d0d0e; }
.hud-map-mount > * { max-width: 100%; }

.hud-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 4px 0 6px; cursor: pointer; }
.hud-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--a) calc(var(--v, 1) * 100%), #333 0); }
.hud-range::-moz-range-track { height: 4px; border-radius: 2px; background: #333; }
.hud-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--a); }
.hud-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(232, 93, 31, .35); }
.hud-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.hud-range-ends { display: flex; justify-content: space-between; font-size: 9.5px; }

/* live call card */
.hud-live-k { display: inline-flex; align-items: center; gap: 8px; }
.hud-rec { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.hud-live.is-rec .hud-rec { background: var(--rec); box-shadow: 0 0 10px var(--rec); animation: hud-blink 1.1s steps(2, jump-none) infinite; }
.hud-live.is-rec .hud-live-state { color: var(--rec); }
.hud-live.is-rec[data-net="offline"] .hud-live-state { color: var(--buf); }
.hud-timer { font: 800 64px/.95 Poppins, sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hud-live:not(.is-rec) .hud-timer { color: #5a5a5c; }
.hud-meter { display: flex; align-items: center; gap: 3px; height: 34px; margin: 12px 0 14px; }
.hud-meter i { flex: 1; height: 100%; border-radius: 2px; background: var(--a); transform: scaleY(.08); transform-origin: 50% 50%; transition: transform .07s linear; }
.hud-live:not(.is-rec) .hud-meter i { background: #333; }
.hud-net { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--bd); }
.hud-net-l { font-size: 10.5px; flex: 1; color: var(--live); }
.hud-net-l[data-net="offline"] { color: var(--buf); }
.hud-net-l[data-net="syncing"] { color: var(--live); animation: hud-blink .8s steps(2, jump-none) infinite; }
.hud-net-bars i.is-lit { background: var(--live); }
.hud-net-bars[data-net="syncing"] i.is-lit { background: var(--live); }
.hud-batt { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; }
.hud-batt-ic { position: relative; width: 20px; height: 10px; border: 1.5px solid #bdbdbd; border-radius: 3px; padding: 1px; }
.hud-batt-ic::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: #bdbdbd; }
.hud-batt-ic i { display: block; height: 100%; background: #fff; border-radius: 1px; transform-origin: 0 50%; }
.hud-sync { margin-top: 10px; font-size: 10px; text-transform: none; letter-spacing: .02em; color: #cfcfcf; }
.hud-phi { margin-top: 10px; font-size: 11px; color: #6e6e70; }

/* transcript */
.hud-tx-list {
  height: 236px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(transparent, #000 28px);
  mask: linear-gradient(transparent, #000 28px);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hud-tx-list::-webkit-scrollbar { display: none; }
.hud-tx-list > .hud-empty:first-child { margin-top: auto; }
.hud-tx-row:first-child { margin-top: auto; }
.hud-tx-row { animation: hud-in .35s ease both; }
.hud-tx-h { display: flex; gap: 10px; font-size: 9.5px; margin-bottom: 3px; }
.hud-tx-sp { color: #fff; }
.hud-tx-sp.is-medic { color: var(--a); }
.hud-tx-sp.is-partner { color: #9fb4d8; }
.hud-tx-sp.is-patient, .hud-tx-sp.is-family { color: #e9e9e6; }
.hud-tx-sp.is-auris { color: var(--buf); }
.hud-tx-b { font-size: 13px; line-height: 1.5; color: #d6d6d6; }
.hud-redact {
  display: inline-block;
  vertical-align: -1px;
  margin: 0 1px;
  padding: 1px 5px 0;
  border-radius: 3px;
  background: #000;
  box-shadow: inset 0 0 0 1px #2a2a2a;
  color: #6e6e70;
  font: 500 9px/15px var(--mono);
  letter-spacing: .08em;
  text-align: center;
}

/* ---------- clean view ---------- */
.hud-root.is-clean > :not(.hud-dock):not(.hud-show):not(.hud-board) { opacity: 0; visibility: hidden; pointer-events: none !important; }
.hud-root.is-clean > * { transition: opacity .3s, visibility .3s; }
.hud-root.is-clean .hud-form { display: none; }
.hud-root.is-clean .hud-show { display: flex; }
.hud-root.is-clean .hud-back { display: none; }

/* ---------- shorter desktop screens ---------- */
@media (max-height: 820px) and (min-width: 761px) {
  .hud-copy p:first-child { display: none; }
  .hud-left { top: calc(72px + var(--st)); }
  .hud-map { top: calc(380px + var(--st)); }
  .hud-tx-list { height: 196px; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .hud-root { --g: 28px; }
  .hud-pcb, .hud-tx, .hud-map { width: 290px; right: 104px; }
  .hud-explode, .hud-live, .hud-intro { width: 300px; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .hud-root { --g: 16px; --tabs: 0px; }
  .hud-root.has-sheet { --tabs: 58px; }
  .hud-left { top: calc(16px + var(--st)); left: 16px; right: 16px; width: auto; }
  .hud-head { font-size: 34px; line-height: .95; }
  .hud-copy { display: none; }
  .hud-actions { margin-top: 12px; gap: 8px; }
  .hud-actions .hud-btn { height: 32px; padding: 0 14px; font-size: 10px !important; }
  .hud-presets { margin-top: 10px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; max-width: 100%; }
  .hud-presets::-webkit-scrollbar { display: none; }
  .hud-chip { flex: none; height: 26px; }

  .hud-rail { top: calc(16px + var(--st)); right: 16px; transform: none; flex-direction: row; gap: 8px; }
  .hud-thumb-img { width: 40px; height: 48px; border-radius: 10px; }
  .hud-thumb-tip { display: none; }

  .hud-capsule {
    left: 16px; right: 16px; top: auto; width: auto;
    bottom: calc(16px + var(--sb) + var(--tabs));
    transform: none;
    flex-direction: row; justify-content: space-between;
    height: 60px; padding: 0 8px; gap: 10px; border-radius: 30px;
  }
  .hud-mute { width: 104px; height: 44px; border-radius: 22px !important; flex: none; }
  .hud-mute-grip { left: 14px; right: 36px; top: 12px; bottom: 12px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 7px); }
  .hud-mute-dot { left: auto; right: 14px; bottom: 16px; margin: 0; }
  .hud-mute-label { position: static; writing-mode: horizontal-tb; font-size: 9px; letter-spacing: .1em; white-space: normal; max-width: 70px; line-height: 1.3; flex: 1; }
  .hud-switches { border-top: 0; padding-top: 0; border-left: 1px solid var(--bd); padding-left: 10px; gap: 8px; }
  .hud-sw-track { height: 34px; width: 18px; }
  .hud-sw-flag { height: 12px; }
  .hud-sw-thumb { height: 16px; transform: translateY(14px); }
  .hud-switch { gap: 3px; }
  .hud-dz { width: 44px; padding: 6px 0 !important; border-radius: 14px !important; }
  .hud-dz b { font-size: 7px; }

  .hud-dock {
    left: 16px; right: 16px;
    bottom: calc(16px + var(--sb) + var(--tabs) + 70px);
    flex-direction: row; justify-content: space-between; align-items: center;
  }
  .hud-form { height: 40px; padding: 0 4px; }
  .hud-form .hud-mono { display: none; }
  .hud-seg { height: 30px; padding: 0 9px !important; font-size: 9px !important; }
  .hud-swatches { height: 40px; padding: 0 12px; gap: 9px; }
  .hud-sw { width: 18px; height: 18px; }
  .hud-sw-name { display: none; }
  .hud-root.is-clean .hud-dock { justify-content: flex-end; bottom: calc(76px + var(--sb)); }

  .hud-back { display: none; }
  .hud-show { bottom: calc(16px + var(--sb)); }

  .hud-intro { left: 16px; right: 16px; width: auto; bottom: calc(16px + var(--sb) + var(--tabs) + 124px); }

  .hud-zoom { position: absolute; right: 0; bottom: calc(100% + 10px); height: 40px; padding-left: 12px; }
  .hud-zoom > span.hud-mono { display: none; }
  .hud-root[data-demo="board"] .hud-dock { bottom: calc(16px + var(--sb)); }
  .hud-board { left: 16px; right: 16px; top: calc(150px + var(--st)); bottom: calc(126px + var(--sb)); }

  /* bottom sheet */
  .hud-cards {
    inset: auto 0 0 0;
    display: none;
    pointer-events: auto;
    padding: 10px 16px calc(10px + var(--sb));
    background: rgba(16, 16, 18, .96);
    border-top: 1px solid var(--bd);
    border-radius: 18px 18px 0 0;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 4;
  }
  .hud-root.has-sheet .hud-cards { display: block; }
  .hud-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .hud-tabs::-webkit-scrollbar { display: none; }
  .hud-tab {
    flex: none; height: 32px; padding: 0 14px !important; border-radius: 999px;
    border: 1px solid var(--bd) !important; font-family: var(--mono) !important; font-size: 10px !important;
    letter-spacing: .06em; color: var(--mut) !important;
  }
  .hud-tab.is-active { color: #fff !important; border-color: var(--a) !important; }
  .hud-card, .hud-info {
    position: static; width: auto; margin: 0; padding: 14px 0 4px;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    max-height: 42vh; overflow-y: auto;
  }
  .hud-card.is-shown { display: none; }
  .hud-root.sheet-open .hud-card.is-shown.is-tab { display: block; }
  .hud-timer { font-size: 48px; }
  .hud-tx-list { height: 180px; }
  .hud-map-mount { height: 180px; }
  .hud-pcb-mount { max-width: 320px; margin: 0 auto; }
  .hud-hs-pill { height: 26px; font-size: 9.5px !important; padding: 0 11px 0 9px !important; gap: 6px; }
  .hud-root.is-clean .hud-cards { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-root *, .hud-root *::before, .hud-root *::after { animation: none !important; transition-duration: .01ms !important; }
}