/* The upscaler (upscale.js): the canvas over the picture, the subtitle
   mirror, the split-view divider, the control-bar button and its flyout.

   Direction: "The Loupe" — a lens-grinder's brass instrument on smoked
   walnut glass. Engraved brass hairlines, a knurled brass lever, a readout
   plate with a graduated scale (the figure is what the GPU is making:
   "1440p"), painted emblems for the four kinds, and ember light for
   anything live. Same brass and ember as Hearth's painted icons, the dock
   and the tab row's firelight, so it belongs to the house while standing
   apart from the plain glass of the Quality menu beside it.
   Every colour below comes from these tokens; rules carry no raw hex. */

.ups-menu, .vc-upscale, .ups-wipe, .ups-canvas {
  /* palette */
  --ups-brass: 222, 181, 108;          /* rgb, for alpha */
  --ups-brass-hi: 246, 214, 152;       /* polished edge */
  --ups-brass-lo: 128, 92, 44;         /* shadowed metal */
  --ups-ember: 242, 146, 52;
  --ups-walnut: 24, 18, 14;
  --ups-walnut-deep: 12, 9, 7;
  --ups-ink: #f4ead8;
  --ups-ink-dim: #c4b59d;
  --ups-ink-faint: #8f8371;
  --ups-warn: #f3a47e;
  --ups-shade: 0, 0, 0;
  /* derived */
  --ups-line: rgba(var(--ups-brass), .22);
  --ups-line-strong: rgba(var(--ups-brass), .5);
  --ups-gold: rgb(var(--ups-brass));
  --ups-gold-hi: rgb(var(--ups-brass-hi));
  --ups-hover: rgba(var(--ups-brass), .08);
  --ups-focus: rgb(var(--ups-brass-hi));
  /* type */
  --ups-font-display: 'Hearth Fredoka', 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --ups-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* shape + motion */
  --ups-r-panel: 16px;
  --ups-r-tile: 12px;
  --ups-r-ctl: 9px;
  --ups-ease: cubic-bezier(.22, .61, .36, 1);
  --ups-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ups-t: 200ms;
}

/* ── the picture ── */
/* styles.css gives the player's <video> z-index 5 (`.modal.media-fullscreen
   video`), so a z-auto layer after it paints UNDER the picture. The canvas,
   its subtitle mirror and the divider take the same 5: later in the DOM, so
   above the video and still under the veil, OSD and bar that follow. */
.ups-canvas, .ups-cues, .ups-wipe { z-index: 5; }
.ups-canvas {
  position: absolute;
  display: block;
  pointer-events: none;
  /* The picture, not a box: no rounding, no shadow, exactly over the video. */
}
.ups-canvas[hidden], .ups-cues[hidden], .ups-wipe[hidden] { display: none; }

/* The first sharp frame sweeps in from the left over the original. */
.ups-canvas.is-arriving { animation: ups-arrive .95s var(--ups-ease) both; }
@keyframes ups-arrive {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Split view: the canvas (and its subtitle mirror) only covers the part of
   the picture right of the divider; the video shows through on the left. */
.ups-canvas.is-split, .ups-cues.is-split {
  clip-path: inset(0 0 0 calc(var(--ups-wipe, .5) * 100%));
}
.ups-canvas.is-sweeping, .ups-cues.is-sweeping { transition: clip-path .75s var(--ups-ease); }
/* Model against model: both sides are drawn into the canvas (upscale.js
   draw()), so nothing is clipped and the video underneath is not seen. */
.ups-canvas.is-split.is-ab, .ups-cues.is-split.is-ab { clip-path: none; }

.ups-cues {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .15em;
  padding: 0 5% 4.5%;
  font: 500 calc(var(--ups-cue-px, 20px) * var(--ups-cue-scale, 1.05)) / 1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: center;
  color: white;
}
.ups-cue span {
  display: inline-block;
  max-width: 100%;
  padding: .04em .32em;
  white-space: pre-line;
  overflow-wrap: anywhere;
  background: rgba(0, 0, 0, .55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  border-radius: 2px;
}

/* ── the split-view divider ── */
.ups-wipe {
  position: absolute;
  pointer-events: none;
  --ups-x: calc(var(--ups-wipe, .5) * 100%);
}
/* A brass hairline lit with ember, the full height of the picture. */
.ups-wipe-line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ups-x);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg,
    rgba(var(--ups-brass-hi), 0) 0%,
    rgba(var(--ups-brass-hi), .95) 12%,
    rgb(var(--ups-brass)) 50%,
    rgba(var(--ups-brass-hi), .95) 88%,
    rgba(var(--ups-brass-hi), 0) 100%);
  box-shadow: 0 0 10px rgba(var(--ups-ember), .55), 0 0 2px rgba(var(--ups-shade), .9);
  transition: box-shadow var(--ups-t) ease;
}
/* The slider: a 44px strip down the line (easy to catch), drawn as a grip. */
.ups-wipe-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ups-x);
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ups-wipe-grip {
  position: relative;
  flex: none;
  width: 30px;
  height: 60px;
  border-radius: 15px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--ups-brass-lo), .55) 0 1px, transparent 1px 4px) center / 12px 30px no-repeat,
    linear-gradient(90deg, rgb(var(--ups-brass-lo)) 0%, rgb(var(--ups-brass-hi)) 38%, rgb(var(--ups-brass)) 62%, rgb(var(--ups-brass-lo)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(var(--ups-shade), .35),
    0 0 0 1px rgba(var(--ups-walnut-deep), .8),
    0 6px 18px rgba(var(--ups-shade), .55),
    0 0 18px rgba(var(--ups-ember), .35);
  transition: transform var(--ups-t) var(--ups-spring), box-shadow var(--ups-t) ease;
}
/* Two engraved chevrons, one each side of the knurl. */
.ups-wipe-grip::before, .ups-wipe-grip::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -3px;
  border: solid rgb(var(--ups-walnut));
  border-width: 0 0 1.6px 1.6px;
}
.ups-wipe-grip::before { left: 4px; transform: rotate(45deg); }
.ups-wipe-grip::after { right: 4px; transform: rotate(-135deg); }
.ups-wipe.is-dragging .ups-wipe-grip { transform: scale(1.08); }
.ups-wipe.is-dragging .ups-wipe-line { box-shadow: 0 0 16px rgba(var(--ups-ember), .8), 0 0 2px rgba(var(--ups-shade), .9); }
.ups-wipe-handle:focus-visible .ups-wipe-grip {
  outline: 2px solid var(--ups-focus);
  outline-offset: 3px;
}
/* The labels travel with the grip; each fades as the divider nears its edge. */
.ups-wipe-tag {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 6px 10px;
  white-space: nowrap;
  font: 650 11px/1 var(--ups-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ups-ink);
  background: rgba(var(--ups-walnut-deep), .72);
  border: 1px solid rgba(var(--ups-brass), .35);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .25s ease;
}
/* The left label sits on the divider's layer rather than in the slider (a
   button cannot live inside a role=slider), and is the button that picks
   what the left side shows: the original, or another model. */
.ups-wipe-tag.is-before {
  right: calc(100% - var(--ups-x) + 24px);
  opacity: clamp(0, (var(--ups-wipe, .5) - .1) * 8, 1);
  font-family: var(--ups-font);
  pointer-events: auto;
  cursor: pointer;
}
.ups-wipe-tag.is-before:not([disabled])::after {
  /* A small engraved caret: this label changes. */
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 0 2px 8px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  vertical-align: middle;
}
.ups-wipe-tag.is-before[disabled] { pointer-events: none; cursor: default; }
@media (hover: hover) { .ups-wipe-tag.is-before:not([disabled]):hover { background: rgba(var(--ups-brass), .3); border-color: rgba(var(--ups-brass), .6); } }
.ups-wipe-tag.is-before:focus-visible { outline: 2px solid var(--ups-focus); outline-offset: 2px; }
.ups-wipe.is-ab .ups-wipe-tag.is-before { color: var(--ups-gold-hi); border-color: rgba(var(--ups-brass), .6); }
.video-stage.is-idle .ups-wipe-tag.is-before { pointer-events: none; }
.ups-wipe-tag.is-after { left: calc(50% + 24px); color: var(--ups-gold-hi); border-color: rgba(var(--ups-brass), .6); opacity: clamp(0, (.9 - var(--ups-wipe, .5)) * 8, 1); }
/* The end button hangs under the grip. */
.ups-wipe-end {
  position: absolute;
  top: calc(50% + 42px);
  left: var(--ups-x);
  width: 32px; height: 32px;
  margin-left: -16px;
  padding: 0;
  display: grid;
  place-items: center;
  font: 400 20px/1 var(--ups-font);
  color: var(--ups-ink);
  background: rgba(var(--ups-walnut-deep), .78);
  border: 1px solid rgba(var(--ups-brass), .45);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  transition: background-color var(--ups-t) ease, opacity .4s ease;
}
@media (hover: hover) { .ups-wipe-end:hover { background: rgba(var(--ups-brass), .3); } }
.ups-wipe-end:focus-visible { outline: 2px solid var(--ups-focus); outline-offset: 2px; }
.ups-wipe.is-sweeping .ups-wipe-line,
.ups-wipe.is-sweeping .ups-wipe-handle,
.ups-wipe.is-sweeping .ups-wipe-end { transition: left .75s var(--ups-ease); }
/* When the player's chrome rests, so do the labels and the ×. */
.video-stage.is-idle .ups-wipe-tag,
.video-stage.is-idle .ups-wipe-end { opacity: 0; }
.video-stage.is-idle .ups-wipe-end { pointer-events: none; }
@media (pointer: coarse) {
  .ups-wipe-end { width: 44px; height: 44px; margin-left: -22px; }
  .ups-wipe-tag.is-before { min-height: 44px; }
  .ups-wipe-grip { width: 34px; height: 68px; border-radius: 17px; }
}

/* ── the control-bar button ── */
button.vc-upscale {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 76px;
  min-height: 32px;
  padding: 0 10px;
  overflow: hidden;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ups-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--ups-t) ease, background-color var(--ups-t) ease, color var(--ups-t) ease, box-shadow var(--ups-t) ease;
}
button.vc-upscale .vc-upscale-text { position: relative; z-index: 1; }
@media (hover: hover) {
  button.vc-upscale:hover { background: rgba(255, 255, 255, .1); }
  button.vc-upscale.is-on:hover { background-color: rgba(var(--ups-brass), .26); }
}
button.vc-upscale[aria-expanded="true"] { border-color: var(--ups-ink-dim); }
/* On: engraved brass, the label in polished gold. */
button.vc-upscale.is-on {
  color: var(--ups-gold-hi);
  border-color: rgba(var(--ups-brass), .75);
  background: linear-gradient(180deg, rgba(var(--ups-brass), .26), rgba(var(--ups-brass), .08));
  box-shadow: inset 0 1px 0 rgba(var(--ups-brass-hi), .35), 0 0 14px -4px rgba(var(--ups-ember), .55);
}
/* Making a resolution: the figure, a touch larger and in the display face. */
button.vc-upscale.is-res .vc-upscale-text {
  font-family: var(--ups-font-display);
  font-size: 13px;
  letter-spacing: .02em;
}
/* Warming up: a band of ember light keeps passing through the button. */
button.vc-upscale.is-on.is-busy { color: var(--ups-ink); border-color: rgba(var(--ups-brass), .5); }
button.vc-upscale.is-on.is-busy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--ups-ember), .5) 50%, transparent 80%);
  translate: -100% 0;
  animation: ups-sheen 1.4s var(--ups-ease) infinite;
}
@keyframes ups-sheen { to { translate: 100% 0; } }
button.vc-upscale:focus-visible {
  outline: 2px solid var(--ups-focus);
  outline-offset: 2px;
}
.video-stage.in-popout .vc-bar button.vc-upscale { min-width: 60px; min-height: 26px; padding: 0 7px; font-size: 11px; }
.video-stage.in-popout .vc-bar button.vc-upscale.is-res .vc-upscale-text { font-size: 12px; }
@media (pointer: coarse) { .vc-bar button.vc-upscale { min-height: 44px; } }

/* ── the flyout ── */
.ups-menu {
  position: fixed;
  z-index: 1400;
  box-sizing: border-box;
  width: 376px;
  max-width: calc(100vw - 16px);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ups-brass), .35) transparent;
  padding: 18px 18px 16px;
  color: var(--ups-ink);
  background:
    linear-gradient(180deg, rgba(var(--ups-brass), .1) 0%, transparent 140px),
    repeating-linear-gradient(97deg, transparent 0 3px, rgba(var(--ups-shade), .07) 3px 5px),
    rgba(var(--ups-walnut), .96);
  border: 1px solid rgba(var(--ups-brass), .38);
  border-radius: var(--ups-r-panel);
  box-shadow:
    inset 0 1px 0 rgba(var(--ups-brass-hi), .22),
    inset 0 -3px 0 rgba(var(--ups-shade), .3),
    0 22px 56px rgba(var(--ups-shade), .66),
    0 0 0 1px rgba(var(--ups-shade), .5);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  font: 13px/1.35 var(--ups-font);
  text-align: left;
  /* It rises out of the bar like a drawer: a clip, so placeMenu's
     getBoundingClientRect check never sees a transform. */
  animation: ups-rise .32s var(--ups-ease) backwards;
}
@keyframes ups-rise {
  from { clip-path: inset(100% 0 0 0 round var(--ups-r-panel)); opacity: .3; }
  to { clip-path: inset(0 0 0 0 round var(--ups-r-panel)); opacity: 1; }
}
.ups-menu.is-sheet {
  left: 8px; right: 8px; top: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: auto; max-width: none; max-height: 82vh; max-height: 82dvh;
  padding: 20px 16px 16px;
  border-radius: 20px;
}
/* The sheet's brass pull tab. */
.ups-menu.is-sheet::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  width: 40px; height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: rgba(var(--ups-brass), .45);
}
/* The brass hairline along the top, brightest in the middle. */
.ups-menu::after {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ups-brass-hi), .7) 50%, transparent);
  pointer-events: none;
}
.ups-menu button { font: inherit; color: inherit; cursor: pointer; }
.ups-menu button[disabled] { cursor: default; }
.ups-menu button:focus-visible {
  outline: 2px solid var(--ups-focus);
  outline-offset: 2px;
}

/* The contents settle in one after another, top down. */
.ups-head, .ups-readout, .ups-label-row, .ups-kind, .ups-seg, .ups-ss-row, .ups-actions, .ups-source {
  animation: ups-settle .34s var(--ups-ease) backwards;
}
.ups-readout { animation-delay: 40ms; }
.ups-label-row { animation-delay: 70ms; }
.ups-kind { animation-delay: calc(90ms + var(--i, 0) * 35ms); }
.ups-seg { animation-delay: 220ms; }
.ups-ss-row { animation-delay: 240ms; }
.ups-actions { animation-delay: 250ms; }
.ups-source { animation-delay: 260ms; }
@keyframes ups-settle { from { opacity: 0; translate: 0 6px; } }

/* Head: the name in the house's display face, the lever on the right. */
.ups-head { display: flex; align-items: center; gap: 16px; }
.ups-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ups-title {
  font: 600 19px/1.1 var(--ups-font-display);
  letter-spacing: .01em;
  color: var(--ups-ink);
}
.ups-sub { font-size: 12px; color: var(--ups-ink-dim); text-wrap: pretty; }

/* The lever: a groove that fills with ember, a knurled brass slider. */
.ups-switch {
  position: relative;
  flex: none;
  width: 56px; height: 30px;
  padding: 0;
  border: 1px solid rgba(var(--ups-brass), .4);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(var(--ups-ember), .9), rgb(var(--ups-brass))) left / 0% 100% no-repeat,
    rgba(var(--ups-walnut-deep), .9);
  box-shadow: inset 0 2px 4px rgba(var(--ups-shade), .6);
  transition: background-size .32s var(--ups-ease), border-color var(--ups-t) ease, box-shadow var(--ups-t) ease;
}
.ups-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 30px; height: 22px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--ups-brass-lo), .6) 0 1px, transparent 1px 3.5px) center / 12px 12px no-repeat,
    linear-gradient(180deg, rgb(var(--ups-brass-hi)), rgb(var(--ups-brass)) 55%, rgb(var(--ups-brass-lo)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(var(--ups-shade), .6);
  transition: transform .34s var(--ups-spring);
}
.ups-switch[aria-checked="true"] {
  background-size: 100% 100%;
  border-color: rgba(var(--ups-brass-hi), .8);
  box-shadow: inset 0 1px 3px rgba(var(--ups-shade), .35), 0 0 16px -2px rgba(var(--ups-ember), .55);
}
.ups-switch[aria-checked="true"] .ups-knob { transform: translateX(20px); }
.ups-switch[disabled] { opacity: .45; }

/* The readout plate: big figure, what is happening, and a graduated scale
   along its foot (the lens barrel's markings). */
.ups-readout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin-top: 16px;
  padding: 12px 14px 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--ups-walnut-deep), .85), rgba(var(--ups-walnut-deep), .6));
  border: 1px solid var(--ups-line);
  border-radius: var(--ups-r-tile);
  box-shadow: inset 0 2px 6px rgba(var(--ups-shade), .5), inset 0 -1px 0 rgba(var(--ups-brass), .12);
}
.ups-scale {
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--ups-brass), .5) 0 1px, transparent 1px 25%) bottom left / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--ups-brass), .28) 0 1px, transparent 1px 5%) bottom left / 100% 3px no-repeat;
  pointer-events: none;
}
.ups-fig {
  flex: none;
  min-width: 64px;
  font: 600 26px/1 var(--ups-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--ups-ink-faint);
  transition: color .3s ease, text-shadow .3s ease;
}
.ups-fig[hidden] { display: none; }
.ups-fig.is-tick { animation: ups-tick .4s var(--ups-spring); }
@keyframes ups-tick { from { opacity: 0; translate: 0 40%; } }
.ups-status {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--ups-ink-dim);
  font-variant-numeric: tabular-nums;
}
.ups-status-head {
  font-size: 13px; font-weight: 650; color: var(--ups-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The detail wraps up to three lines (the full text is its title). */
.ups-status-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.ups-status-detail[hidden] { display: none; }
.ups-readout[data-state="on"] .ups-fig {
  color: var(--ups-gold-hi);
  text-shadow: 0 0 18px rgba(var(--ups-ember), .55);
}
.ups-readout[data-state="on"] .ups-scale {
  background:
    repeating-linear-gradient(90deg, rgba(var(--ups-brass-hi), .75) 0 1px, transparent 1px 25%) bottom left / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--ups-brass), .45) 0 1px, transparent 1px 5%) bottom left / 100% 3px no-repeat;
}
.ups-readout[data-state="native"] .ups-fig { color: var(--ups-ink-dim); }
.ups-readout[data-state="warn"] { border-color: rgba(var(--ups-ember), .4); }
.ups-status.is-warn .ups-status-head { color: var(--ups-warn); }
/* Warming up: the figure it is about to make glows faintly while a band of
   ember light runs across the plate. */
.ups-readout[data-state="warming"] .ups-fig { color: rgba(var(--ups-brass), .7); animation: ups-glow 1.4s ease-in-out infinite alternate; }
@keyframes ups-glow { to { color: var(--ups-gold-hi); text-shadow: 0 0 14px rgba(var(--ups-ember), .5); } }
.ups-readout[data-state="warming"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--ups-ember), .16) 50%, transparent 70%);
  translate: -100% 0;
  animation: ups-sheen 1.6s var(--ups-ease) infinite;
  pointer-events: none;
}

/* Section labels. */
.ups-label-row { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 9px; }
.ups-label {
  flex: none;
  font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(var(--ups-brass), .9);
  white-space: nowrap;
}
.ups-guess {
  flex: 1; min-width: 0;
  font-size: 12px; text-align: right; color: var(--ups-ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* What is in the video: four equal tiles, two by two, each a little
   display case: the painted medallion centred in a fixed 52px round slot
   (no frame behind it: the coin is its own frame), the name under it. */
.ups-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ups-kind {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 52px auto auto;
  align-items: start;
  justify-items: center;
  min-width: 0;
  padding: 12px 10px 11px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid var(--ups-line);
  border-radius: var(--ups-r-tile);
  transition: border-color var(--ups-t) ease, background-color var(--ups-t) ease, box-shadow var(--ups-t) ease, transform .12s ease;
}
.ups-kind-art {
  position: relative;
  width: 52px; height: 52px;
  display: block;
  border-radius: 50%;
}
/* The flyout lives inside #video-player, whose lightbox rule
   (`.modal.media-fullscreen img`) gives every <img> a black backing, a
   z-index and viewport max sizes: undo all of it for the emblems. */
.ups-menu .ups-kind-art img {
  position: static;
  z-index: auto;
  max-width: none;
  max-height: none;
  background: none;
  display: block;
  width: 52px; height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(var(--ups-shade), .55)) saturate(.8) brightness(.9);
  transition: filter .25s ease;
}
/* No emblem (missing file): an empty engraved bezel the size of the coin
   keeps the tile's shape (the emblems are round brass medallions). */
.ups-kind.no-art .ups-kind-art {
  border-radius: 50%;
  border: 1px solid rgba(var(--ups-brass), .28);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--ups-brass), .14), transparent 70%), rgba(var(--ups-walnut-deep), .6);
  box-shadow: inset 0 2px 5px rgba(var(--ups-shade), .55), inset 0 -1px 0 rgba(var(--ups-brass), .18);
}
.ups-kind-tag {
  position: absolute;
  top: 8px; right: 8px;
  visibility: hidden;
  padding: 3px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--ups-gold-hi);
  border: 1px solid rgba(var(--ups-brass), .45);
  border-radius: 5px;
}
.ups-kind.is-suggested .ups-kind-tag { visibility: visible; }
.ups-kind-name, .ups-kind-sub { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ups-kind-name { margin-top: 9px; font-size: 13.5px; font-weight: 650; color: var(--ups-ink); }
.ups-kind-sub { margin-top: 2px; font-size: 11.5px; color: var(--ups-ink-dim); }
@media (hover: hover) {
  .ups-menu .ups-kind:not([disabled]):hover { border-color: var(--ups-line-strong); background-color: var(--ups-hover); }
  .ups-menu .ups-kind:not([disabled]):hover .ups-kind-art img { filter: drop-shadow(0 3px 5px rgba(var(--ups-shade), .55)); }
}
.ups-kind:active:not([disabled]) { transform: scale(.98); }
.ups-kind.is-suggested { border-style: dashed; border-color: rgba(var(--ups-brass), .55); }
.ups-kind[aria-checked="true"] {
  border-style: solid;
  border-color: rgba(var(--ups-brass-hi), .85);
  background:
    radial-gradient(70% 60% at 50% 38px, rgba(var(--ups-ember), .26), transparent 70%),
    linear-gradient(180deg, rgba(var(--ups-brass), .16), rgba(var(--ups-brass), .05));
  box-shadow: inset 0 1px 0 rgba(var(--ups-brass-hi), .3), 0 10px 24px -14px rgba(var(--ups-ember), .9);
}
.ups-kind[aria-checked="true"] .ups-kind-name { color: var(--ups-gold-hi); }
.ups-menu .ups-kind[aria-checked="true"] .ups-kind-art img {
  filter: drop-shadow(0 4px 8px rgba(var(--ups-ember), .45)) saturate(1.05);
  animation: ups-lift .5s var(--ups-spring) both;
}
.ups-kind[aria-checked="true"] .ups-kind-tag { visibility: hidden; }
/* Picked: the emblem lifts off the tile and settles a little proud of it. */
@keyframes ups-lift {
  0% { transform: none; }
  45% { transform: translateY(-4px) scale(1.12); }
  100% { transform: translateY(-1px) scale(1.06); }
}
.ups-kind[disabled] { opacity: .45; }

/* Model, Strength, Sharpen: segmented controls (equal cells, as many as the
   row has: --ups-seg-n); a brass carriage slides under the pick. */
.ups-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ups-seg-n, 3), minmax(0, 1fr));
  padding: 3px;
  background: rgba(var(--ups-walnut-deep), .7);
  border: 1px solid var(--ups-line);
  border-radius: var(--ups-r-ctl);
  box-shadow: inset 0 2px 4px rgba(var(--ups-shade), .45);
}
.ups-seg-carriage {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--ups-seg-n, 3));
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(var(--ups-brass), .38), rgba(var(--ups-brass), .16));
  box-shadow: inset 0 1px 0 rgba(var(--ups-brass-hi), .45), inset 0 0 0 1px rgba(var(--ups-brass), .55), 0 4px 12px -6px rgba(var(--ups-ember), .8);
  transform: translateX(calc(var(--ups-seg-i, 1) * 100%));
  transition: transform .36s var(--ups-spring), opacity var(--ups-t) ease;
  pointer-events: none;
}
.ups-seg.is-idle .ups-seg-carriage { opacity: .55; }
.ups-seg-btn {
  position: relative;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ups-ink-dim);
  transition: color var(--ups-t) ease;
}
.ups-seg-btn[aria-checked="true"] { color: var(--ups-gold-hi); }
@media (hover: hover) { .ups-menu .ups-seg-btn:not([disabled]):not([aria-checked="true"]):hover { color: var(--ups-ink); background: var(--ups-hover); } }
.ups-seg-btn:focus-visible { outline-offset: -2px; }
.ups-seg-btn[disabled] { opacity: .45; }
/* Five models in one row: the cells give their side padding to the label. */
.ups-seg[data-group="model"] .ups-seg-btn { padding: 0 1px; }

/* Super-sample: one labelled switch on a line (label and a short why on
   the left, the same brass switch as the head on the right). */
.ups-ss-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
/* NVIDIA RTX Video: the same switch row, only on Windows with an RTX card. */
.ups-ss-row[hidden] { display: none; }
.ups-ss-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.ups-ss-sub {
  flex: 1; min-width: 0;
  font-size: 12px; text-align: right; color: var(--ups-ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Two ways to see the difference: equal halves of one bar. */
.ups-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ups-brass), .14);
}
.ups-split, .ups-compare, .ups-source-btn {
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px; font-weight: 600;
  color: var(--ups-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid var(--ups-line-strong);
  border-radius: var(--ups-r-ctl);
  box-shadow: inset 0 1px 0 rgba(var(--ups-brass-hi), .12);
  user-select: none;
  -webkit-user-select: none;
  transition: border-color var(--ups-t) ease, background-color var(--ups-t) ease, color var(--ups-t) ease, opacity var(--ups-t) ease;
}
.ups-compare { touch-action: none; }
@media (hover: hover) {
  .ups-menu .ups-split:not([disabled]):hover,
  .ups-menu .ups-source-btn:not([disabled]):hover,
  .ups-menu .ups-compare:not([disabled]):hover { background-color: var(--ups-hover); border-color: rgba(var(--ups-brass-hi), .7); }
}
.ups-split[aria-pressed="true"], .ups-compare.is-held {
  color: var(--ups-gold-hi);
  border-color: rgba(var(--ups-brass-hi), .85);
  background: linear-gradient(180deg, rgba(var(--ups-brass), .3), rgba(var(--ups-brass), .1));
}
.ups-split[disabled], .ups-compare[disabled], .ups-source-btn[disabled] { opacity: .4; }

/* Sharper for real: what no live filter can do. The file's own quality on
   the label line, then the ways to a better picture (a better copy, an AI
   remaster): equal cells of one bar, one cell filling it when it is alone. */
.ups-source { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(var(--ups-brass), .14); }
.ups-source .ups-label-row { margin-top: 0; }
.ups-source-sub.is-low { color: var(--ups-gold-hi); }
.ups-source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ups-source-btn:only-child { grid-column: 1 / -1; }
.ups-source-btn[hidden] { display: none; }

@media (pointer: coarse) {
  .ups-seg-btn, .ups-split, .ups-compare, .ups-source-btn { min-height: 44px; }
  .ups-switch { width: 60px; height: 34px; }
  /* The lever stays lever-sized; its touch area is 44px tall. */
  .ups-switch::before { content: ''; position: absolute; inset: -6px -4px; }
  .ups-knob { width: 32px; height: 26px; }
  .ups-switch[aria-checked="true"] .ups-knob { transform: translateX(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .ups-menu, .ups-head, .ups-readout, .ups-label-row, .ups-kind, .ups-seg, .ups-ss-row, .ups-actions, .ups-source,
  .ups-fig.is-tick, .ups-canvas.is-arriving,
  .ups-menu .ups-kind[aria-checked="true"] .ups-kind-art img { animation: none; }
  .ups-menu .ups-kind[aria-checked="true"] .ups-kind-art img { transform: translateY(-1px) scale(1.06); }
  .ups-knob, .ups-switch, .ups-kind, .ups-seg-carriage, .ups-seg-btn,
  .ups-canvas.is-sweeping, .ups-cues.is-sweeping, .ups-wipe *,
  button.vc-upscale { transition: none; }
  /* Warming still reads: a still ember edge instead of a moving band. */
  .ups-readout[data-state="warming"]::after, button.vc-upscale.is-on.is-busy::before { animation: none; display: none; }
  .ups-readout[data-state="warming"] .ups-fig { animation: none; color: var(--ups-gold); }
  .ups-readout[data-state="warming"] { border-color: rgba(var(--ups-ember), .55); }
  button.vc-upscale.is-on.is-busy { border-style: dashed; }
}