/* RightWayUp in-browser demo. Page-scoped; builds on the site tokens in /assets/site.css. */

.rwd {
  --rwd-screen: #07090d;
  --rwd-screen-line: rgba(255, 255, 255, 0.08);
  --rwd-signal: var(--vms);
  --rwd-signal-soft: color-mix(in srgb, var(--vms) 18%, transparent);
  --rwd-truth: var(--accent);
  --rwd-off: var(--warn);
  --rwd-radius: 8px;
  padding-top: 22px;
}
:root[data-theme='light'] .rwd {
  --rwd-screen: #11151c;
  --rwd-screen-line: rgba(15, 23, 42, 0.14);
}

.rwd-sprite { height: 0; overflow: hidden; position: absolute; width: 0; }
.rwd-i {
  fill: none;
  flex: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 16px;
}
.rwd-i--lg { height: 28px; width: 28px; }
.rwd-dim { color: var(--muted); font-weight: 500; }
.rwd-label {
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Head ---------- */

.rwd-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin: 10px 0 18px;
}
.rwd-head h1 {
  font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: 0;
  line-height: 1.05;
}
.rwd-h1-sub { color: var(--muted); font-weight: 600; }
.rwd-privacy {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 14px;
  gap: 7px;
  margin: 8px 0 0;
}
.rwd-privacy .rwd-i { color: var(--ok); height: 14px; width: 14px; }
.rwd-links { display: flex; flex-wrap: wrap; gap: 8px; }
.rwd-link {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  padding: 6px 11px;
}
.rwd-link:hover { border-color: var(--line-strong); color: var(--text-strong); text-decoration: none; }

/* ---------- Buttons and controls ---------- */

.rwd button { font: inherit; }
.rwd-btn,
.rwd .rwd-btn {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text-strong);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  white-space: nowrap;
}
.rwd .rwd-btn:hover { background: var(--panel-strong); transform: none; }
.rwd .rwd-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.rwd .rwd-btn--primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.rwd .rwd-btn--small { font-size: 12px; min-height: 30px; padding: 4px 10px; }
.rwd-file { position: relative; }
.rwd-file input { cursor: pointer; inset: 0; opacity: 0; position: absolute; width: 100%; }
.rwd-file:focus-within { outline: 2px solid var(--vms); outline-offset: 2px; }

.rwd .rwd-icon-btn {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text-strong);
  display: inline-flex;
  flex: none;
  height: 36px;
  justify-content: center;
  min-height: 0;
  padding: 0;
  width: 36px;
}
.rwd .rwd-icon-btn:hover { background: var(--panel-strong); transform: none; }
.rwd .rwd-icon-btn[aria-pressed='true'] { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); }
.rwd .rwd-icon-btn--small { height: 26px; width: 26px; }
.rwd .rwd-icon-btn--small .rwd-i { height: 14px; width: 14px; }

.rwd input[type='range'] {
  accent-color: var(--primary-strong);
  cursor: pointer;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.rwd output {
  color: var(--text-strong);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rwd-switch {
  align-items: center;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  position: relative;
  user-select: none;
}
.rwd-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.rwd-switch span {
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  height: 20px;
  position: relative;
  transition: background-color 140ms ease;
  width: 34px;
}
.rwd-switch span::after {
  background: var(--text-strong);
  border-radius: 50%;
  content: '';
  height: 14px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 140ms ease;
  width: 14px;
}
.rwd-switch input:checked + span { background: var(--primary); border-color: var(--primary); }
.rwd-switch input:checked + span::after { background: #fff; transform: translateX(14px); }
.rwd-switch input:focus-visible + span { outline: 2px solid var(--vms); outline-offset: 2px; }

.rwd-seg {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  display: inline-flex;
  padding: 2px;
}
.rwd .rwd-seg button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  height: 30px;
  min-height: 0;
  padding: 0;
  width: 34px;
}
.rwd .rwd-seg button[aria-checked='true'] { background: var(--panel-strong); color: var(--text-strong); }
.rwd .rwd-seg button:hover { color: var(--text-strong); transform: none; }

/* ---------- Mode bar ---------- */

.rwd-bar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: space-between;
  padding-bottom: 14px;
}
.rwd-tabs {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}
.rwd .rwd-tabs button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  gap: 7px;
  min-height: 36px;
  padding: 6px 14px;
}
.rwd .rwd-tabs button:hover { color: var(--text-strong); transform: none; }
.rwd .rwd-tabs button[aria-selected='true'] {
  background: var(--bg-elevated);
  box-shadow: 0 1px 0 var(--line-strong), 0 1px 6px rgba(0, 0, 0, 0.18);
  color: var(--text-strong);
}
.rwd .rwd-tabs button[aria-selected='true'] .rwd-i { color: var(--vms); }

.rwd-model {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px 10px;
  min-height: 36px;
}
.rwd-model-name { color: var(--text-strong); font-weight: 650; }
.rwd-model-text { font-variant-numeric: tabular-nums; }
.rwd-model[data-state='ready'] > .rwd-i { color: var(--ok); }
.rwd-model[data-state='error'] > .rwd-i,
.rwd-model[data-state='unsupported'] > .rwd-i { color: var(--danger); }
.rwd-model[data-state='loading'] > .rwd-i { color: var(--vms); }
.rwd-progress {
  background: var(--panel-strong);
  border-radius: 999px;
  display: inline-block;
  height: 6px;
  overflow: hidden;
  width: 120px;
}
.rwd-progress span { background: var(--vms); display: block; height: 100%; transition: width 120ms linear; width: 0; }

.rwd-panel { margin-top: 18px; }
.rwd-intro {
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  color: var(--text);
  max-width: min(560px, calc(100vw - 32px));
  padding: 28px 30px 26px;
}
.rwd-intro::backdrop { backdrop-filter: blur(4px); background: rgba(7, 9, 13, 0.6); }
.rwd-intro-kicker { color: var(--vms); font-family: "Space Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 8px; text-transform: uppercase; }
.rwd-intro h2 { color: var(--text-strong); font-size: 24px; line-height: 1.2; margin: 0 0 14px; text-wrap: balance; }
.rwd-intro p { font-size: 15.5px; line-height: 1.55; margin: 0 0 12px; }
.rwd-intro strong { color: var(--text-strong); }
.rwd-intro a { color: var(--text-strong); text-decoration: underline; }
.rwd-intro code { font-size: 14px; white-space: nowrap; }
.rwd-intro-privacy { align-items: center; color: var(--muted); display: flex; gap: 8px; }
.rwd-intro-load { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 12px; margin: 18px 0 20px; }
.rwd-intro-load .rwd-overlay-bar { background: var(--panel-strong); flex: 0 0 140px; }
.rwd-intro .rwd-btn { font-size: 15px; min-height: 44px; padding-inline: 22px; }
.rwd-model-overlay {
  align-items: center;
  backdrop-filter: blur(3px);
  background: rgba(7, 9, 13, 0.62);
  color: #f3f4f6;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 650;
  gap: 10px;
  inset: 0;
  justify-content: center;
  padding: 12px;
  position: absolute;
  text-align: center;
  z-index: 2;
}
.rwd-model-overlay p { margin: 0; }
.rwd-model-overlay .rwd-overlay-note { color: rgba(243, 244, 246, 0.82); font-size: 12.5px; font-weight: 500; line-height: 1.45; max-width: 38ch; }
.rwd-overlay-note a { color: #fff; text-decoration: underline; }
.rwd-overlay-bar { background: rgba(255, 255, 255, 0.18); border-radius: 999px; height: 4px; overflow: hidden; width: min(60%, 220px); }
.rwd-overlay-bar span { background: var(--vms); display: block; height: 100%; transition: width 120ms linear; width: 0; }
.rwd-spinner { border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 50%; border-top-color: var(--vms); height: 22px; width: 22px; }
.rwd-model-overlay.is-busy .rwd-spinner { animation: rwd-spin 0.9s linear infinite; }
.rwd-model-overlay:not(.is-busy) .rwd-spinner { display: none; }
@keyframes rwd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rwd-model-overlay.is-busy .rwd-spinner { animation: none; } }
.rwd-tip { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 0 0 12px; max-width: 110ch; }
.rwd-tip::before { color: var(--vms); content: '\2192'; margin-right: 7px; }

/* ---------- Photo ---------- */

.rwd-photo {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
}
.rwd-stage-col { display: grid; gap: 10px; min-width: 0; }
.rwd-stage {
  aspect-ratio: 4 / 3;
  background: var(--rwd-screen);
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  cursor: grab;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
}
.rwd-stage.is-dragging { cursor: grabbing; }
.rwd-stage canvas, .rwd-overlay { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.rwd-overlay { overflow: visible; pointer-events: none; transition: opacity 160ms ease; }
.rwd-overlay[data-hidden] { opacity: 0; }
.rwd-horizon { stroke: rgba(255, 255, 255, 0.7); stroke-dasharray: 2 2; stroke-width: 0.35; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
.rwd-up { fill: none; stroke: var(--vms); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); }
.rwd-stage-badge,
.rwd-straight-badge {
  background: rgba(7, 9, 13, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 600;
  left: 10px;
  margin: 0;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 3px 8px;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  top: 10px;
  white-space: nowrap;
}
.rwd-drop {
  align-items: center;
  background: color-mix(in srgb, var(--rwd-screen) 78%, transparent);
  border: 2px dashed var(--vms);
  border-radius: var(--rwd-radius);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-weight: 650;
  gap: 8px;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
}
.rwd-drop .rwd-i { height: 26px; width: 26px; }

.rwd-stage-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.rwd-turn {
  align-items: center;
  display: flex;
  flex: 1 1 200px;
  gap: 10px;
  min-width: 0;
}
.rwd-turn output { width: 4.6ch; }
.rwd-threshold { align-items: center; display: flex; gap: 8px; min-width: 0; }
.rwd-threshold input { flex: 0 1 140px; }
.rwd-threshold output { width: 5ch; }
.rwd-threshold .rwd-icon-btn:disabled { opacity: 0.35; }
[data-straight-badge], [data-hold-badge], [data-cam-hold] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rwd-turn-track { align-items: center; display: flex; flex: 1 1 auto; min-width: 0; position: relative; }

/* First-use hint: where to drag. Fades out once the visitor has turned the camera a little. */
.rwd-hint {
  align-items: center;
  background: rgba(7, 9, 13, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  bottom: 12px;
  color: #f3f4f6;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  left: 50%;
  margin: 0;
  max-width: calc(100% - 24px);
  opacity: 0;
  padding: 5px 12px 5px 9px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 4px);
  transition: opacity 280ms ease, transform 280ms ease;
  white-space: nowrap;
}
.rwd-hint .rwd-i { flex: none; height: 16px; width: 16px; }
.rwd-hint span { overflow: hidden; text-overflow: ellipsis; }
.rwd-stage[data-hint='on'] .rwd-hint { opacity: 1; transform: translate(-50%, 0); }
.rwd-stage[data-hint='on'] .rwd-hint .rwd-i { animation: rwd-sway 2.6s ease-in-out infinite; }
.rwd-turn-track::after {
  border: 2px solid var(--primary-strong);
  border-radius: 50%;
  content: '';
  height: 26px;
  left: 50%;
  margin: -13px 0 0 -13px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: opacity 280ms ease;
  width: 26px;
}
.rwd-turn-track[data-hint='on']::after { animation: rwd-ping 2.6s ease-out infinite; opacity: 1; }
@keyframes rwd-sway { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(28deg); } }
@keyframes rwd-ping { 0% { opacity: 0.85; transform: scale(0.7); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .rwd-hint { transition: none; }
  .rwd-stage[data-hint='on'] .rwd-hint .rwd-i, .rwd-turn-track[data-hint='on']::after { animation: none; }
  .rwd-turn-track[data-hint='on']::after { opacity: 0.6; }
}

.rwd-side { display: grid; align-content: start; gap: 16px; min-width: 0; }
.rwd-reading {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 168px minmax(0, 1fr);
}
.rwd-dial { aspect-ratio: 1; position: relative; }
.rwd-mini-dial { position: relative; }
/* Canvases never size their boxes (their pixel size follows the box). */
.rwd-dial canvas, .rwd-mini-dial canvas, .rwd-straight-frame canvas, .rwd-trace-plot canvas, .rwd-view-frame video, .rwd-view-frame canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}
.rwd-readout { min-width: 0; }
.rwd-angle {
  color: var(--text-strong);
  font-family: "Space Mono", monospace;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.rwd-words { color: var(--text-strong); font-size: 15px; font-weight: 650; margin: 6px 0 10px; min-height: 1.4em; }
.rwd-readout.is-abstain .rwd-angle { color: var(--muted); }
.rwd-readout.is-abstain .rwd-words { color: var(--rwd-off); }
.rwd-stats { display: grid; gap: 5px; margin: 0; }
.rwd-stats > div { align-items: baseline; display: grid; gap: 10px; grid-template-columns: 82px minmax(0, 1fr); }
.rwd-stats dt { color: var(--muted); font-size: 12px; }
.rwd-stats dd {
  align-items: center;
  color: var(--text-strong);
  display: flex;
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  gap: 8px;
  margin: 0;
  min-width: 0;
}
.rwd-meter {
  background: var(--panel-strong);
  border-radius: 999px;
  display: inline-block;
  flex: 0 1 84px;
  height: 6px;
  overflow: visible;
  position: relative;
}
.rwd-meter span { background: var(--rwd-signal); border-radius: 999px; display: block; height: 100%; width: 0; }
.rwd-meter i { background: var(--text-strong); height: 12px; left: 41.5%; position: absolute; top: -3px; width: 2px; }
.rwd-readout.is-abstain .rwd-meter span { background: var(--rwd-off); }

.rwd-straight { margin: 0; }
.rwd-straight-frame {
  aspect-ratio: 4 / 3;
  background: var(--rwd-screen);
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  overflow: hidden;
  position: relative;
}
.rwd-straight figcaption { align-items: center; display: flex; gap: 10px; margin-top: 8px; }
.rwd-straight figcaption .rwd-label { margin-right: auto; }

.rwd-strip-wrap { margin-top: 18px; min-width: 0; }
.rwd-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.rwd .rwd-sample {
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  color: var(--text);
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  scroll-snap-align: start;
  width: 118px;
}
.rwd .rwd-sample:hover { border-color: var(--line-strong); transform: none; }
.rwd .rwd-sample[aria-pressed='true'] { border-color: var(--vms); box-shadow: 0 0 0 1px var(--vms); }
.rwd-sample img { aspect-ratio: 4 / 3; background: var(--rwd-screen); display: block; height: auto; object-fit: cover; width: 100%; }
.rwd-sample--video img { aspect-ratio: 16 / 9; }
.rwd .rwd-sample--video { width: 150px; }
.rwd-sample span {
  align-items: baseline;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  justify-content: space-between;
  padding: 6px 8px 7px;
  text-align: left;
}
.rwd-sample b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rwd-sample small { color: var(--muted); flex: none; font-family: "Space Mono", monospace; font-size: 11px; }
.rwd-credit { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.rwd-credit a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); }
.rwd-strip-wrap .rwd-credit { margin-top: 2px; }

.rwd-degrade {
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  display: grid;
  gap: 14px 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0 0;
  min-width: 0;
  padding: 12px 16px 16px;
}
.rwd-degrade legend {
  align-items: center;
  color: var(--text-strong);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  padding: 0 6px;
}
.rwd-slider { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.rwd-slider .rwd-label { align-items: center; display: flex; gap: 6px; min-width: 0; }
.rwd-slider .rwd-label .rwd-i { height: 14px; width: 14px; }
.rwd-slider input { grid-column: 1 / -1; }
.rwd-slider output { grid-column: 2; grid-row: 1; min-width: 3ch; }

/* ---------- Video and camera ---------- */

.rwd-live { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rwd-view { margin: 0; min-width: 0; }
.rwd-view figcaption { margin-top: 6px; }
.rwd-view-frame {
  aspect-ratio: 16 / 9;
  background: var(--rwd-screen);
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  overflow: hidden;
  position: relative;
}
.rwd-view-frame video { object-fit: contain; }

.rwd-transport {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 12px;
}
.rwd-live-readout { align-items: center; display: flex; flex: 1 1 380px; gap: 12px; min-width: 0; }
.rwd-mini-dial { flex: none; height: 56px; width: 56px; }
.rwd-stats--row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rwd-stats--row > div { display: grid; gap: 1px; grid-template-columns: none; }
.rwd-stats--row dd { font-size: 14px; }
.rwd-level-words { color: var(--text-strong); font-size: 15px; font-weight: 700; margin: 0; min-width: 11ch; }
.rwd-level-words.is-level { color: var(--ok); }
.rwd-level-words.is-abstain { color: var(--rwd-off); }

.rwd-trace {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  display: flex;
  flex-direction: column;
  height: 210px;
  margin-top: 12px;
}
.rwd-trace-plot { flex: 1; min-height: 0; position: relative; }
.rwd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 8px 12px 0;
}
.rwd-legend li { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 5px; }
.rwd-legend li::before { border-radius: 2px; content: ''; display: block; height: 3px; width: 14px; }
.rwd-legend .is-true::before { background: repeating-linear-gradient(90deg, var(--rwd-truth) 0 4px, transparent 4px 7px); }
.rwd-legend .is-read::before { background: var(--rwd-signal); height: 6px; width: 6px; border-radius: 50%; }
.rwd-legend .is-smooth::before { background: var(--text-strong); }
.rwd-legend .is-abstain::before { background: var(--rwd-off); opacity: 0.6; height: 8px; width: 8px; }
.rwd-trace[data-smooth='off'] .is-smooth { display: none; }

.rwd-cam-state {
  align-items: center;
  background: var(--rwd-screen);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: absolute;
  text-align: center;
}
.rwd-cam-state p { font-size: 14px; margin: 0; max-width: 36ch; }
.rwd-cam-state[data-tone='error'] .rwd-i { color: var(--danger); }
.rwd-level { inset: 0; pointer-events: none; position: absolute; }
.rwd-level::before, .rwd-level::after {
  background: rgba(255, 255, 255, 0.75);
  content: '';
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  width: 8%;
}
.rwd-level::before { left: 0; }
.rwd-level::after { right: 0; }
.rwd-level-line {
  background: var(--vms);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  height: 2px;
  left: 14%;
  position: absolute;
  right: 14%;
  top: calc(50% - 1px);
  transition: background-color 160ms ease;
}
.rwd-level.is-level .rwd-level-line { background: var(--ok); }
.rwd-level.is-abstain .rwd-level-line { opacity: 0; }

/* ---------- Batch ---------- */

.rwd-batch-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.rwd-batch-summary { color: var(--muted); flex: 1 1 260px; font-size: 13px; margin: 0; min-width: 0; }
.rwd-batch-actions { display: flex; gap: 8px; }
.rwd-batch-drop {
  border: 1px dashed var(--line-strong);
  border-radius: var(--rwd-radius);
  margin-top: 14px;
  min-height: 220px;
  padding: 12px;
  position: relative;
}
.rwd-batch-drop.is-over { border-color: var(--vms); background: var(--rwd-signal-soft); }
.rwd-batch-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.rwd-batch-grid li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rwd-radius);
  min-width: 0;
  overflow: hidden;
}
.rwd .rwd-batch-grid button {
  background: var(--rwd-screen);
  border: 0;
  border-radius: 0;
  display: block;
  min-height: 0;
  padding: 0;
  width: 100%;
}
.rwd .rwd-batch-grid button:hover { transform: none; }
.rwd-batch-grid canvas { aspect-ratio: 4 / 3; display: block; height: auto; width: 100%; }
.rwd-batch-meta { align-items: center; display: flex; font-size: 12px; gap: 8px; justify-content: space-between; padding: 7px 9px; }
.rwd-batch-meta span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rwd-badge {
  background: var(--rwd-signal-soft);
  border-radius: 5px;
  color: var(--text-strong);
  flex: none;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
}
.rwd-badge.is-abstain { background: color-mix(in srgb, var(--rwd-off) 18%, transparent); color: var(--rwd-off); }
.rwd-badge.is-pending { background: var(--panel-strong); color: var(--muted); }
.rwd-batch-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
}
.rwd-batch-empty p { font-size: 14px; margin: 0; }

/* ---------- Misc ---------- */

.rwd-fallback {
  align-items: center;
  border: 1px solid var(--danger);
  border-radius: var(--rwd-radius);
  color: var(--text-strong);
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
}
.rwd-credits { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; margin-top: 34px; padding-top: 14px; }
.rwd-credits summary { color: var(--text); cursor: pointer; font-weight: 650; }
.rwd-credits ul { margin: 10px 0 0; padding-left: 18px; }
.rwd-credits li { margin: 0 0 6px; }
.rwd-credits a { color: var(--text-strong); text-decoration: underline; }
.rwd-credits code { font-size: 12px; overflow-wrap: anywhere; }

/* ---------- Fit the viewport (laptop and desktop) ---------- */
/* Each mode's working area fits one screen: panes take their height from the viewport, less the site header, the
   page head, the controls, the sample strip and the conditions, down to a floor below which the page scrolls. Panes
   keep the full column width; pictures are contained in them, so any pane shape works. */
@media (min-width: 961px) {
  .page.rwd { max-width: 1440px; padding-bottom: 32px; padding-top: 12px; }
  .rwd {
    --rwd-pane-h: clamp(200px, calc(100svh - 545px), 600px);
    --rwd-view-h: clamp(190px, calc(85svh - 466px), 560px);
  }
  .rwd .docs-breadcrumb { margin-bottom: 6px; }
  .rwd-head { align-items: center; margin: 0 0 8px; }
  .rwd-title { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .rwd-head h1 { font-size: 30px; }
  .rwd-privacy { margin: 0; }
  .rwd-bar { padding-bottom: 8px; }
  .rwd-panel { margin-top: 10px; }
  .rwd-tip { margin-bottom: 8px; }

  .rwd-photo {
    align-items: start;
    gap: 18px;
    grid-template-areas: 'turned reading straight';
    grid-template-columns: minmax(0, 1fr) clamp(220px, 19vw, 252px) minmax(0, 1fr);
  }
  .rwd-side { display: contents; }
  .rwd-stage-col { gap: 8px; grid-area: turned; }
  .rwd-reading { align-self: center; gap: 12px; grid-area: reading; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rwd-reading .rwd-dial { width: min(100%, 168px, calc(var(--rwd-pane-h) - 84px)); }
  .rwd-readout { width: 100%; }
  .rwd-reading .rwd-stats > div { grid-template-columns: 72px minmax(0, 1fr); }
  .rwd-straight { grid-area: straight; }
  .rwd-straight figcaption { margin-top: 8px; }
  .rwd-stage, .rwd-straight-frame { max-height: var(--rwd-pane-h); width: 100%; }
  .rwd-stage-col .rwd-credit { margin-top: -2px; }

  .rwd-strip-wrap { margin-top: 10px; }
  .rwd-strip { padding-bottom: 6px; }
  .rwd .rwd-sample { width: 96px; }
  .rwd .rwd-sample--video { width: 140px; }
  .rwd-sample span { font-size: 11.5px; padding: 3px 6px 4px; }
  .rwd-degrade { gap: 4px 26px; margin-top: 8px; padding: 2px 14px 8px; }
  .rwd-slider { align-items: center; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .rwd-slider input { grid-column: 2; grid-row: 1; }
  .rwd-slider output { grid-column: 3; }

  .rwd-view-frame { max-height: var(--rwd-view-h); width: 100%; }
  .rwd-view { position: relative; }
  .rwd-view figcaption {
    background: rgba(7, 9, 13, 0.66);
    border-radius: 5px;
    color: #e5e7eb;
    left: 8px;
    margin: 0;
    padding: 2px 7px;
    pointer-events: none;
    position: absolute;
    top: 8px;
  }
  .rwd-trace { height: clamp(112px, 15svh, 210px); margin-top: 10px; }
}

@media (min-width: 961px) and (max-width: 1199px) {
  /* the mode bar and the photo tools take two rows here */
  .rwd {
    --rwd-pane-h: clamp(200px, calc(100svh - 615px), 600px);
    --rwd-view-h: clamp(190px, calc(85svh - 508px), 560px);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .rwd-photo { grid-template-columns: minmax(0, 1fr); }
  .rwd-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rwd-degrade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .rwd { padding-top: 14px; }
  .rwd-head { margin-top: 4px; }
  .rwd-bar { gap: 10px; }
  .rwd-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .rwd .rwd-tabs button { padding: 6px 4px; }
  .rwd-side { grid-template-columns: minmax(0, 1fr); }
  .rwd-reading { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .rwd-angle { font-size: 28px; }
  .rwd-live { grid-template-columns: minmax(0, 1fr); }
  .rwd-live-readout { flex-basis: 100%; order: 5; }
  .rwd-trace { height: 190px; }
  .rwd-degrade { gap: 12px 16px; padding: 10px 12px 14px; }
}

@media (max-width: 420px) {
  .rwd .rwd-tabs button { font-size: 13px; gap: 5px; }
  .rwd .rwd-tabs .rwd-i { height: 14px; width: 14px; }
  .rwd-reading { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .rwd-stats > div { grid-template-columns: 74px minmax(0, 1fr); }
  .rwd-file span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .rwd-progress span, .rwd-switch span, .rwd-switch span::after { transition: none; }
}