:root {
  --tv-plate: #FBF9F4;
  --tv-plate-ink: #132033;
  --tv-plate-mirror: #134A46;
  --tv-plate-rule: #D8D1C3;
  --tv-pad: 12px;
  --tv-line: 0.008;
  --tv-dash: 0.022 0.014;
  --tv-dot: 0.011;
  --tv-focus-w: 3px;
}

.tv { margin: 0 0 var(--space-5); max-width: 48rem; }

.tv-plate { background: var(--tv-plate); color: var(--tv-plate-ink); border: var(--border-width) solid var(--color-rule); box-shadow: var(--shadow-card); padding: var(--tv-pad); }
.tv-plate-pair { aspect-ratio: 2 / 1; display: flex; }
.tv-img { display: block; width: 100%; height: auto; }
.tv-plate-pair .tv-img { height: 100%; }

.tv-caption { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-muted); }
.tv-capline { color: var(--color-ink); }
.tv-label { display: block; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.45; color: var(--color-ink); padding-left: var(--space-3); border-left: var(--border-strong) solid var(--color-accent); }
.tv-not { margin: var(--space-3) 0 0; font-size: var(--text-small); color: var(--color-muted); }
.tv-status { margin: var(--space-4) 0 0; max-width: 40rem; font-size: var(--text-small); color: var(--color-ink); padding: var(--space-3) var(--space-4); background: var(--color-notice); border: var(--border-width) solid var(--color-rule); }
.tv-longdesc { max-width: 40rem; color: var(--color-ink); }

.tv-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin: 0; }
.tv-fig { margin: 0; min-width: 0; }
.tv-poses { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.tv-mouths { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.tv-over { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.tv-fig .tv-label { margin-top: var(--space-2); font-size: 0.75rem; }
.tv-fig-mouth .tv-plate { padding: var(--space-2); }

.tv-plate-over { position: relative; }
.tv-overlay { position: absolute; left: var(--tv-pad); top: var(--tv-pad); width: calc(100% - 2 * var(--tv-pad)); height: auto; clip-path: inset(0 0 8% 0); }

.tv-frame { overflow: visible; }
.tv-body line, .tv-body circle { fill: none; stroke: var(--tv-plate-ink); stroke-width: var(--tv-line); stroke-linecap: round; stroke-linejoin: round; }
.tv-body .tv-dot { fill: var(--tv-plate-ink); stroke: none; }
.tv-b line, .tv-b circle { stroke: var(--tv-plate-mirror); stroke-dasharray: var(--tv-dash); }
.tv-b .tv-dot { fill: var(--tv-plate-mirror); stroke: none; stroke-dasharray: none; }

.tv-controls { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.tv-controls button { min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--space-2) var(--space-4); background: transparent; color: var(--color-accent); border: var(--border-strong) solid var(--color-accent); font: 600 1rem/1.2 var(--font-sans); cursor: pointer; }
.tv-controls button:hover { background: var(--color-panel); }
.tv-controls button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.tv-controls button:focus-visible, .tv-frame:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

@media (max-width: 40rem) {
  .tv-plate { --tv-pad: 8px; }
  .tv-controls button { flex: 1 1 100%; }
}

@media (min-width: 60rem) {
  .tv-pair { max-width: 44rem; }
}

@media print {
  .tv-plate { box-shadow: none; }
  .tv-controls { display: none; }
}

.tv [hidden] { display: none !important; }
.tv-pair { margin: 0; }
.tv-draw { width: 100%; height: 100%; }
.tv-draw .tv-frame { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.tv-mouthpanel { margin-top: var(--space-4); max-width: 14rem; }
.tv-mouthpanel .tv-plate { touch-action: pan-y; }
.tv-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tv-frame:focus { outline: var(--tv-focus-w) solid var(--tv-plate-ink); outline-offset: var(--focus-offset); }
.tv-frame:focus:not(:focus-visible) { outline: none; }
.tv-frame:focus-visible { outline: var(--tv-focus-w) solid var(--tv-plate-ink); outline-offset: var(--focus-offset); }
.tv-controls button:focus-visible { outline-width: var(--tv-focus-w); }
.tv .tv-label { visibility: visible; opacity: 1; position: static; }
.tv-reduced, .tv-reduced * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .tv, .tv * { transition: none !important; animation: none !important; }
}

@media print {
  .tv .tv-label { display: block; visibility: visible; }
}