/* The capture demo on the home page (src/client/desk/): the stage and its label,
   then every surface the demo draws over the desktop, in the order the modules
   were built: shared ground, stage, overlay and menus, cards and banners, color
   and measuring, recognized text and translation, marking up. */
/* ---- Capture demo: shared ground (frame variables, glyphs, readings, chips) ---- */

/* The modeled screen is 1280 × 800 pt. host.ts writes --pt (CSS px per pt) from the
   frame's width and --ui, the size of the demo's own chrome (host.ts uiFor). */
.desk-frame {
  --pt: 1;
  --ui: 1;
  --desk-accent: #007aff;
  --desk-face: system-ui, -apple-system, "PingFang SC", sans-serif;
  --desk-rounded: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  font-family: var(--desk-face);
  -webkit-font-smoothing: antialiased;
}
.desk-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.desk-layer {
  position: absolute;
  inset: 0;
}
.desk-layer > * {
  position: absolute;
}
.desk-icon {
  width: 1em;
  height: 1em;
  flex: none;
  overflow: visible;
}

/* The reading capsule: text height + 9 pt tall, 11 pt sides, 0.5 pt border, the
   floating reading shadow, rounded figures of fixed width. Nothing in it animates. */
.desk-reading {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ui) * 6px);
  height: calc(var(--ui) * 24px);
  padding: 0 calc(var(--ui) * 11px);
  border-radius: calc(var(--ui) * 12px);
  background: rgb(255 255 255 / 0.96);
  color: rgb(0 0 0 / 0.85);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.08),
    0 2px 8px rgb(0 0 0 / 0.18);
  font: 600 calc(var(--ui) * 12px) / 1 var(--desk-rounded);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  pointer-events: none;
}
.desk-reading[hidden] {
  display: none;
}
.desk-reading-swatch {
  width: calc(var(--ui) * 10px);
  height: calc(var(--ui) * 10px);
  border-radius: calc(var(--ui) * 2.5px);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.3);
}

/* Tinted chips on cards and capsules: 26 pt, black 0.06, ×1.7 on hover, ×2.6 pressed;
   a 24 pt circle when only the symbol shows. */
.desk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui) * 5px);
  height: calc(var(--ui) * 26px);
  min-width: calc(var(--ui) * 26px);
  padding: 0 calc(var(--ui) * 10px);
  border: 0;
  border-radius: calc(var(--ui) * 13px);
  background: rgb(0 0 0 / 0.06);
  color: rgb(0 0 0 / 0.85);
  font: 500 calc(var(--ui) * 12px) / 1 var(--desk-face);
  cursor: default;
}
.desk-chip .desk-icon {
  font-size: calc(var(--ui) * 13px);
}
.desk-chip:hover {
  background: rgb(0 0 0 / 0.102);
}
.desk-chip:active {
  background: rgb(0 0 0 / 0.156);
}
.desk-chip:focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 1px;
}
.desk-chip.is-round {
  width: calc(var(--ui) * 24px);
  min-width: 0;
  height: calc(var(--ui) * 24px);
  padding: 0;
  border-radius: 50%;
}
@media (forced-colors: active) {
  .desk-reading,
  .desk-chip {
    border: 1px solid CanvasText;
  }
  .desk-chip:focus-visible {
    outline-color: Highlight;
  }
}

/* ---- The stage: the demo desktop with its label beside it ------------------------
   As the approved composition sets it (.impeccable/mocks/home-a.png): the desktop
   at 16:10 on the left, and beside it the desktops to capture as a 2 × 2 set of
   thumbnails over the things to try, one key per tool with its shortcut. Under
   1081px the label moves under the desktop. Nothing here pins or scrolls with
   the page: the desktop is a place to work in. */
.exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "desk"
    "label";
  row-gap: calc(24 * var(--u));
}
.desk-player {
  grid-area: desk;
  min-width: 0;
  margin: 0;
}
.desk-frame {
  border-radius: calc(8 * var(--u));
  background: #5e9cf5;
  isolation: isolate;
  outline-offset: 4px;
}
/* On white paper the desktop keeps a hairline edge of its own, over everything
   it shows, as the gallery's frames do. */
.desk-frame::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(24 33 38 / 0.08);
  pointer-events: none;
}
.desk-frame:focus-visible {
  border-radius: calc(8 * var(--u));
}
/* The honesty line, under the desktop. */
.desk-fine,
.desk-noscript {
  max-width: 72ch;
  margin-top: calc(14 * var(--u));
  color: var(--muted);
  font-size: calc(13 * var(--u));
  line-height: 1.6;
}
.wall-label {
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
}

/* The desktops, as thumbnails to pick: the current one lit and ringed in ink,
   the others resting dimmed (WallpaperMachine's work turns). Each is a 44px
   target at least; the name is for screen readers. */
.desk-turns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(7 * var(--u));
}
.desk-turn {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: calc(6 * var(--u));
  background: transparent;
  cursor: pointer;
}
.desk-turn:focus-visible {
  border-radius: calc(6 * var(--u));
}
.turn-thumb {
  position: relative;
  display: block;
  /* A touch wider than the desktop (the composition's own cut); the picture
     covers it, losing a sliver top and bottom. */
  aspect-ratio: 33 / 20;
  border-radius: calc(6 * var(--u));
  background: #e0e6e9;
  outline: 1.5px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--dur-fast) ease;
}
.turn-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(24 33 38 / 0.08);
}
.turn-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity var(--dur) ease;
}
.desk-turn:hover .turn-thumb img,
.desk-turn[aria-pressed="true"] .turn-thumb img {
  opacity: 1;
}
.desk-turn[aria-pressed="true"] .turn-thumb {
  outline-color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .turn-thumb {
    transition:
      outline-color var(--dur-fast) ease,
      transform var(--dur) var(--ease);
  }
  @media (hover: hover) and (pointer: fine) {
    .desk-turn:hover .turn-thumb {
      transform: translateY(-1px);
    }
  }
  .desk-turn:active .turn-thumb {
    transform: scale(0.97);
    transition-duration: var(--dur-fast), 100ms;
  }
}
.turn-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The things to try: one key per tool, its glyph, its name and the app's
   shortcut; the one in use turns ink. A live light and "Try it" head the list
   where the label runs under the desktop; beside it the keys speak for
   themselves and the heading stays for screen readers. */
.desk-tries {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.try-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--ink);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.live-dot {
  position: relative;
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: #28c840;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after {
    animation: ping 1600ms var(--ease) 500ms 3;
  }
}
@keyframes ping {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}
/* Each key is a 44px target with no gap between them; its pill is drawn 3px
   inside, so the pills stand 6px apart as the composition draws them. */
.try-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.try-list button {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  min-height: 44px;
  padding: 0 calc(10 * var(--u)) 0 calc(16 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  background: none;
  color: var(--ink);
  font-size: calc(15 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  transition:
    color var(--dur-fast) ease,
    transform 120ms ease;
}
.try-list button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px 0;
  border-radius: calc(12 * var(--u));
  background: rgb(24 33 38 / 0.05);
  transition: background-color var(--dur-fast) ease;
}
.try-list button:hover::before {
  background: rgb(24 33 38 / 0.09);
}
.try-list button:active {
  transform: scale(0.985);
}
.try-list button:focus-visible {
  border-radius: calc(12 * var(--u));
  outline-offset: 0;
}
.try-list button[aria-pressed="true"] {
  color: var(--paper);
}
.try-list button[aria-pressed="true"]::before {
  background: var(--ink);
}
.try-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The app's shortcut, on a small white key of its own. */
.try-list kbd {
  margin-left: auto;
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(24 33 38 / 0.06);
  color: var(--ink);
  font: 400 calc(14 * var(--u)) / 1 var(--body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.try-list button[aria-pressed="true"] kbd {
  background: rgb(255 255 255 / 0.14);
  box-shadow: none;
  color: var(--paper);
}
.feature-icon {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 1.75;
  overflow: visible;
}
.try-skip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: 44px;
  color: var(--muted);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.try-skip:hover {
  color: var(--ink);
}
.try-skip svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  stroke-width: 1.75;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .try-skip svg {
    transition: translate 320ms var(--ease);
  }
  .try-skip:hover svg {
    translate: 0 2px;
  }
}
/* For screen readers only: what the armed tool does, or a notice. */
.try-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wide: the label stands beside the desktop, as wide as the composition sets
   it, with the desktop taking the rest of the column. */
@media (min-width: 1081px) {
  .exhibit {
    --label-w: clamp(280 * var(--u), 24.3vw, 350 * var(--u));
    --label-gap: clamp(16 * var(--u), 1.4vw, 24 * var(--u));
    grid-template-columns: minmax(0, 1fr) var(--label-w);
    grid-template-areas: "desk label";
    column-gap: var(--label-gap);
    align-items: start;
  }
  .wall-label {
    gap: calc(3 * var(--u));
  }
  .desk-tries {
    gap: 0;
  }
  .try-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* Under the desktop: the four desktops in a row, then the keys in columns. */
@media (max-width: 1080px) {
  .desk-turns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: calc(560 * var(--u));
  }
  .try-list {
    grid-template-columns: repeat(auto-fill, minmax(calc(240 * var(--u)), 1fr));
  }
}
/* Phones: two columns of keys; the shortcut chips step aside, since there is no
   keyboard to press them on. */
@media (max-width: 600px) {
  .exhibit {
    row-gap: 18px;
  }
  .desk-turns {
    gap: 6px;
    max-width: none;
  }
  .try-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .try-list button {
    gap: 8px;
    padding: 0 10px 0 12px;
    font-size: 13px;
  }
  .try-list kbd {
    display: none;
  }
  .desk-fine {
    font-size: 12px;
  }
}
@media (forced-colors: active) {
  .try-list button {
    border: 1px solid CanvasText;
  }
  .try-list button[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .desk-turn[aria-pressed="true"] .turn-thumb {
    outline-color: Highlight;
  }
}

/* ---- Capture demo: the menu bar and status menu, the capture overlay, the loupe,
   Capture Text's card, and the guide (DeskCore) ----
   Values from APP/DESIGN.md ("Capture Overlay", "Chips (All-In-One bar)", "All-In-One
   Bar", "Reading Capsule", "Text Selection (Capture Text)", "Text Result Card", "Shadow
   Vocabulary") at demo-chrome size (--ui); the menu bar is WallpaperMachine's, laid out
   at a Mac's point sizes and scaled with the scene (--pt). */

/* While a mode is armed the desk takes every touch; at rest the page scrolls over it. */
.desk-frame.is-armed {
  touch-action: none;
}

/* The menu bar. desktop.css styles a bare .desk-menubar for the account world's
   screens; this one is laid out in the desk's own points, so every property it sets
   is set again here. Above the cards and banners, under an armed overlay (which dims
   it, as the app's overlay covers the menu bar). */
.desk-frame > .desk-menubar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: block;
  height: calc(var(--pt) * 24px);
  padding: 0;
  color: rgb(0 0 0 / 0.86);
  filter: none;
  font: 400 13px / 1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  container-type: normal;
  pointer-events: none;
  user-select: none;
}
.desk-frame:is(.is-armed, .is-guiding) > .desk-menubar {
  z-index: 24;
}
/* White ink keeps a faint soft shadow, so it still reads where a dark picture has a
   bright patch under a menu. */
.desk-frame > .desk-menubar.is-dark .desk-mb-screen {
  color: rgb(255 255 255 / 0.96);
  filter: drop-shadow(0 0.5px 2.5px rgb(0 0 0 / 0.38));
}
.desk-frame .desk-mb-screen {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1280px;
  height: 24px;
  padding: 0 14px 0 10px;
  transform-origin: 0 0;
  scale: var(--pt);
}
.desk-frame .desk-mb-titles,
.desk-frame .desk-mb-extras,
.desk-frame .desk-mb-clock {
  display: flex;
  align-items: center;
}
.desk-frame .desk-mb-titles {
  gap: 20px;
}
.desk-frame .desk-mb-titles b {
  font-weight: 700;
}
.desk-frame .desk-mb-extras {
  gap: 20px;
}
.desk-frame .desk-menubar svg {
  flex: none;
  fill: currentColor;
  stroke: none;
}
.desk-frame .desk-menubar .desk-mb-apple {
  width: 12px;
  height: 14px;
  margin: -2px -4px 0 5px;
}
.desk-frame .desk-menubar .desk-mb-glyph {
  width: 16px;
  height: 16px;
}
.desk-frame .desk-menubar .desk-mb-wifi {
  width: 16px;
  height: 11.53px;
}
.desk-frame .desk-menubar .desk-mb-spotlight {
  width: 13.5px;
  height: 13.62px;
}
.desk-frame .desk-menubar .desk-mb-control {
  width: 13.19px;
  height: 13.29px;
}
.desk-frame .desk-mb-clock {
  gap: 7px;
  margin-left: 1px;
  font-variant-numeric: tabular-nums;
}
/* OhMyShot's status item: highlighted while its menu is open, as macOS does. Its hit
   area is never smaller than 32 CSS px, however small the desk is drawn. */
.desk-frame .desk-mb-status {
  position: relative;
  display: grid;
  place-items: center;
  height: 22px;
  margin: 0 -5px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: default;
  pointer-events: auto;
}
.desk-frame .desk-mb-status::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, calc(32px / var(--pt)));
  height: max(100%, calc(32px / var(--pt)));
  translate: -50% -50%;
}
.desk-frame .desk-menubar.is-open .desk-mb-status {
  background: rgb(0 0 0 / 0.12);
}
.desk-frame .desk-menubar.is-dark.is-open .desk-mb-status {
  background: rgb(255 255 255 / 0.22);
}
.desk-frame .desk-mb-status:focus-visible {
  outline: calc(2px / var(--pt)) solid var(--desk-accent);
  outline-offset: calc(1px / var(--pt));
}

/* The status menu: a macOS menu at demo-chrome size (the Quick Access card menu's
   look): rows 22 pt, 13 pt text, 10 pt sides, the highlighted row in the accent. */
.desk-frame .desk-mb-menu {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  min-width: calc(var(--ui) * 200px);
  padding: calc(var(--ui) * 5px) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: calc(var(--ui) * 10px);
  background: rgb(255 255 255 / 0.96);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(var(--ui) * 10px) calc(var(--ui) * 30px) rgb(0 0 0 / 0.25);
  color: rgb(0 0 0 / 0.85);
  font: 400 calc(var(--ui) * 13px) / 1 var(--desk-face);
  white-space: nowrap;
  pointer-events: auto;
  scrollbar-width: none;
}
.desk-frame .desk-mb-menu:focus {
  outline: none;
}
.desk-frame .desk-mb-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--ui) * 22px);
  margin: 0 calc(var(--ui) * 5px);
  padding: 0 calc(var(--ui) * 10px);
  border-radius: calc(var(--ui) * 5px);
  cursor: default;
}
.desk-frame .desk-mb-item kbd {
  margin-left: auto;
  padding-left: calc(var(--ui) * 28px);
  color: rgb(0 0 0 / 0.5);
  font: inherit;
  letter-spacing: 0.06em;
}
.desk-frame .desk-mb-item:focus {
  outline: none;
  background: var(--desk-accent);
  color: #fff;
}
.desk-frame .desk-mb-item:focus kbd {
  color: rgb(255 255 255 / 0.85);
}
.desk-frame .desk-mb-item[aria-disabled="true"] {
  color: rgb(0 0 0 / 0.25);
}
.desk-frame .desk-mb-item[aria-disabled="true"]:focus {
  background: rgb(0 0 0 / 0.05);
  color: rgb(0 0 0 / 0.25);
}
.desk-frame .desk-mb-sep {
  height: 1px;
  margin: calc(var(--ui) * 5px) calc(var(--ui) * 10px);
  background: rgb(0 0 0 / 0.1);
}

/* The capture overlay: over the cards and banners, under the menus. */
.desk-frame .desk-ov {
  inset: 0;
  z-index: 25;
  pointer-events: none;
}
.desk-frame .desk-ov > * {
  position: absolute;
}
/* The pointer's surface: the drawn crosshair stands in for the system pointer; Capture
   Text keeps the system crosshair; window mode shows the arrow. */
.desk-frame .desk-ov-surface {
  inset: 0;
  cursor: none;
  pointer-events: auto;
  touch-action: none;
}
.desk-frame .desk-ov.is-text .desk-ov-surface {
  cursor: crosshair;
}
.desk-frame .desk-ov-surface.is-window {
  cursor: default;
}
/* The room: a flat black 0.26, never glass. */
.desk-frame .desk-ov-dim {
  inset: 0;
  background: rgb(0 0 0 / 0.26);
}
/* A selection: the white 1.5 pt edge over the 3.5 pt dark 0.32 outline, the room dimmed
   around it. */
.desk-frame .desk-ov-sel {
  outline: calc(var(--ui) * 1.5px) solid #fff;
  box-shadow:
    0 0 0 calc(var(--ui) * 2.5px) rgb(0 0 0 / 0.32),
    inset 0 0 0 calc(var(--ui) * 1px) rgb(0 0 0 / 0.32),
    0 0 0 150vmax rgb(0 0 0 / 0.26);
}
/* Window mode: the room dimmed around the hovered window, following its corners. */
.desk-frame .desk-ov-win {
  border-radius: calc(var(--pt) * 14px);
  box-shadow: 0 0 0 150vmax rgb(0 0 0 / 0.26);
}
/* Capture Text: drawn like selected text, the system's selection colour at 0.35 with a
   1 pt accent edge, on an undimmed screen; the highlight stays in place, then fades. */
.desk-frame .desk-ov-textsel,
.desk-frame .desk-text-flash {
  box-sizing: border-box;
  border: calc(var(--ui) * 1px) solid var(--desk-accent);
  background: rgb(179 215 255 / 0.35);
}
.desk-frame .desk-text-flash {
  z-index: 25;
  pointer-events: none;
}

/* The mode bar: an opaque white capsule standing in for the glass, the 0.5 pt hairline
   and the floating bar shadow, 40 pt above the screen's foot; it fades out under a drag. */
.desk-frame .desk-ov-bar {
  bottom: calc(var(--ui) * 40px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 2px);
  padding: calc(var(--ui) * 6px);
  translate: -50% 0;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(var(--ui) * 3px) calc(var(--ui) * 10px) rgb(0 0 0 / 0.16);
  cursor: default;
  pointer-events: auto;
  transition: opacity 200ms ease-out;
}
.desk-frame .desk-ov.is-dragging .desk-ov-bar {
  opacity: 0;
  pointer-events: none;
}
.desk-frame .desk-ov.is-still .desk-ov-bar {
  pointer-events: none;
}
.desk-frame .desk-ov-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui) * 6px);
  box-sizing: border-box;
  height: calc(var(--ui) * 30px);
  min-width: calc(var(--ui) * 84px);
  padding: 0 calc(var(--ui) * 12px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(0 0 0 / 0.85);
  font: 500 calc(var(--ui) * 12px) / 1 var(--desk-rounded);
  white-space: nowrap;
  cursor: default;
}
.desk-frame .desk-ov-chip .desk-icon {
  font-size: calc(var(--ui) * 13px);
  stroke-width: 2;
}
.desk-frame .desk-ov-chip:hover {
  background: rgb(0 0 0 / 0.045);
}
.desk-frame .desk-ov-chip.is-on {
  background: rgb(0 0 0 / 0.08);
  font-weight: 600;
}
.desk-frame .desk-ov-chip.is-on .desk-icon {
  color: var(--desk-accent);
}
.desk-frame .desk-ov-chip.is-purpose {
  min-width: 0;
  padding: 0 calc(var(--ui) * 11px);
}
.desk-frame .desk-ov-chip.is-icon {
  width: calc(var(--ui) * 30px);
  min-width: 0;
  padding: 0;
}
.desk-frame .desk-ov-chip:focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 1px;
}
.desk-frame .desk-ov-sep {
  flex: none;
  width: 1px;
  height: calc(var(--ui) * 20px);
  margin: 0 calc(var(--ui) * 6px);
  background: rgb(0 0 0 / 0.1);
}

/* The loupe: 120 pt, 15 raster pixels across, the faint grid drawn with them, the
   center cell outlined, a 3 pt white rim over the picture's edge, the lens shadow. */
.desk-frame .desk-loupe {
  z-index: 26;
  width: calc(var(--ui) * 120px);
  height: calc(var(--ui) * 120px);
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 calc(var(--ui) * 4px) calc(var(--ui) * 12px) rgb(0 0 0 / 0.28);
  pointer-events: none;
}
.desk-frame .desk-loupe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--ui) * 3px) #fff;
}
.desk-frame .desk-loupe-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* The center cell, one fifteenth of the lens, stroked 1.5 pt just outside it. */
.desk-frame .desk-loupe-cell {
  position: absolute;
  top: calc(700% / 15);
  left: calc(700% / 15);
  width: calc(100% / 15);
  height: calc(100% / 15);
  margin: calc(var(--ui) * -1.5px);
  border: calc(var(--ui) * 1.5px) solid var(--desk-accent);
  border-radius: calc(var(--ui) * 1.5px);
}
/* Pick Color's: white over dark pixels, black over light, over a 3 pt outline of the
   other colour at 0.32. */
.desk-frame .desk-loupe.is-contrast .desk-loupe-cell {
  border-color: #000;
  box-shadow:
    0 0 0 calc(var(--ui) * 0.75px) rgb(255 255 255 / 0.32),
    inset 0 0 0 calc(var(--ui) * 0.75px) rgb(255 255 255 / 0.32);
}
.desk-frame .desk-loupe.is-contrast.is-over-dark .desk-loupe-cell {
  border-color: #fff;
  box-shadow:
    0 0 0 calc(var(--ui) * 0.75px) rgb(0 0 0 / 0.32),
    inset 0 0 0 calc(var(--ui) * 0.75px) rgb(0 0 0 / 0.32);
}
.desk-frame .desk-loupe-reading {
  z-index: 26;
}
/* The crosshair: four arms from 4 to 13 pt out, white 1.5 pt over a 3.5 pt outline. */
.desk-frame .desk-crosshair {
  z-index: 26;
  width: calc(var(--ui) * 30px);
  height: calc(var(--ui) * 30px);
  overflow: visible;
  translate: -50% -50%;
  pointer-events: none;
}

/* The text result card: the reading capsule's materials at card size, the floating
   card shadow, the symbol hanging left of one column. */
.desk-frame .desk-textcard {
  z-index: 27;
  box-sizing: border-box;
  padding: calc(var(--ui) * 14px) calc(var(--ui) * 14px) calc(var(--ui) * 14px) calc(var(--ui) * 39px);
  border-radius: calc(var(--ui) * 12px);
  background: rgb(255 255 255 / 0.97);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.08),
    0 calc(var(--ui) * 6px) calc(var(--ui) * 14px) rgb(0 0 0 / 0.22);
  color: rgb(0 0 0 / 0.85);
  font: 400 calc(var(--ui) * 13px) / 1.2 var(--desk-face);
}
.desk-frame .desk-textcard-mark {
  position: absolute;
  top: calc(var(--ui) * 17px);
  left: calc(var(--ui) * 14px);
  display: grid;
  place-items: center;
  width: calc(var(--ui) * 18px);
  height: calc(var(--ui) * 18px);
  border-radius: 50%;
}
.desk-frame .desk-textcard-mark.is-copied {
  background: #34c759;
  color: #fff;
}
.desk-frame .desk-textcard-mark.is-copied .desk-icon {
  font-size: calc(var(--ui) * 11px);
  stroke-width: 3.4;
}
.desk-frame .desk-textcard-mark.is-none {
  color: rgb(0 0 0 / 0.5);
}
.desk-frame .desk-textcard-mark.is-none .desk-icon {
  font-size: calc(var(--ui) * 16px);
}
.desk-frame .desk-textcard-head {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 8px);
  height: calc(var(--ui) * 24px);
}
.desk-frame .desk-textcard-title {
  font-weight: 600;
}
.desk-frame .desk-textcard-count {
  margin-left: auto;
  color: rgb(0 0 0 / 0.5);
  font: 400 calc(var(--ui) * 12px) / 1 var(--desk-rounded);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.desk-frame .desk-textcard-close {
  flex: none;
}
.desk-frame .desk-textcard-count:empty + .desk-textcard-close {
  margin-left: auto;
}
.desk-frame .desk-textcard-body {
  display: -webkit-box;
  margin: calc(var(--ui) * 4px) 0 0;
  overflow: hidden;
  font-size: calc(var(--ui) * 12px);
  line-height: calc(var(--ui) * 15px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.desk-frame .desk-textcard-hint {
  margin: calc(var(--ui) * 4px) 0 0;
  color: rgb(0 0 0 / 0.5);
  font-size: calc(var(--ui) * 11px);
  line-height: calc(var(--ui) * 14px);
}
.desk-frame .desk-textcard-chip {
  margin-top: calc(var(--ui) * 10px);
}

/* The guide (WallpaperMachine's): the Mac's arrow and a paper tag in the page's own
   voice, at the page's size; it moves with the frames the loop draws. */
.desk-frame > .desk-guide {
  /* WallpaperMachine's design pixel, down to 0.85 px on a small desk so the tag keeps
     to the picture yet reads at 11 px. */
  --g: clamp(0.85px, calc(var(--pt) * 1.3px), var(--u, 1px));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.desk-frame > .desk-guide.is-shown {
  opacity: 1;
  transition: opacity 240ms ease;
}
.desk-frame .desk-guide-arrow {
  position: absolute;
  top: calc(-1.5 * var(--g));
  left: calc(-1.5 * var(--g));
  width: calc(17 * var(--g));
  height: calc(24 * var(--g));
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
}
.desk-frame .desk-guide-arrow path {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.desk-frame .desk-guide-ring {
  position: absolute;
  top: calc(-16 * var(--g));
  left: calc(-16 * var(--g));
  width: calc(32 * var(--g));
  height: calc(32 * var(--g));
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
}
.desk-frame .desk-guide-tag {
  position: absolute;
  top: var(--ty, calc(26 * var(--g)));
  left: var(--tx, calc(12 * var(--g)));
  width: max-content;
  max-width: calc(240 * var(--g));
  padding: calc(7 * var(--g)) calc(11 * var(--g));
  border-radius: calc(8 * var(--g));
  background: var(--paper, #fff);
  color: var(--ink, #182126);
  font: 600 calc(13 * var(--g)) / 1.4 var(--body, system-ui, sans-serif);
  white-space: normal;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.2),
    0 calc(10 * var(--g)) calc(24 * var(--g)) calc(-8 * var(--g)) rgb(0 0 0 / 0.5);
}
.desk-frame .desk-guide-tag:empty {
  display: none;
}
/* The capture's Quick Access card in the loop: 220 pt, 12 pt corners, the 0.5 pt
   picture border and the floating card shadow, its picture fitted on the window
   background, 26 pt in from the bottom left. */
.desk-frame .desk-guide-card {
  bottom: calc(var(--ui) * 26px);
  left: calc(var(--ui) * 26px);
  z-index: 4;
  width: calc(var(--ui) * 220px);
  overflow: hidden;
  border-radius: calc(var(--ui) * 12px);
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(var(--ui) * 6px) calc(var(--ui) * 14px) rgb(0 0 0 / 0.22);
  pointer-events: none;
}
.desk-frame .desk-guide-pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .desk-frame .desk-ov-bar,
  .desk-frame > .desk-guide,
  .desk-frame > .desk-guide.is-shown {
    transition: none;
  }
}

@media (forced-colors: active) {
  .desk-frame .desk-ov-sel,
  .desk-frame .desk-ov-win {
    outline: 2px solid CanvasText;
  }
  .desk-frame :is(.desk-ov-textsel, .desk-text-flash) {
    border-color: Highlight;
  }
  .desk-frame :is(.desk-ov-bar, .desk-mb-menu, .desk-textcard, .desk-guide-card, .desk-guide-tag) {
    border: 1px solid CanvasText;
  }
  .desk-frame .desk-loupe {
    outline: 2px solid CanvasText;
  }
  .desk-frame :is(.desk-loupe-cell, .desk-loupe.is-contrast .desk-loupe-cell) {
    border-color: Highlight;
  }
  .desk-frame .desk-ov-chip.is-on {
    outline: 1px solid Highlight;
  }
  .desk-frame :is(.desk-ov-chip, .desk-mb-status):focus-visible {
    outline-color: Highlight;
  }
  .desk-frame .desk-mb-item:focus {
    background: Highlight;
    color: HighlightText;
  }
  .desk-frame .desk-crosshair path {
    stroke: CanvasText;
  }
}

/* ---- Capture demo: Quick Access cards and the notification banners ----
   Values from APP/DESIGN.md (Cards / Containers, Buttons, Quick Access Keyboard and
   Closing, Upload Badge, Shadow Vocabulary, Motion) at demo-chrome size (--ui). */

/* The column: 26 pt from the bottom left, 12 pt between cards, newest at the bottom. */
.desk-frame .desk-qa {
  left: calc(var(--ui) * 26px);
  bottom: calc(var(--ui) * 26px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: calc(var(--ui) * 12px);
  pointer-events: none;
}
.desk-frame .desk-qa-card {
  position: relative;
  flex: none;
  width: calc(var(--ui) * 220px);
  border-radius: calc(var(--ui) * 12px);
  box-shadow: 0 calc(var(--ui) * 6px) calc(var(--ui) * 14px) rgb(0 0 0 / 0.22);
  font-family: var(--desk-rounded);
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
/* Lifted out of the column where it stood while it slides away. */
.desk-frame .desk-qa-card.is-leaving {
  position: absolute;
  pointer-events: none;
}

/* The picture: fitted on the window background (extreme shapes letterbox), 12 pt
   corners, the 0.5 pt picture border over it. It is the card's keyboard target. */
.desk-frame .desk-qa-pic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #ececec;
  cursor: default;
}
.desk-frame .desk-qa-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.1);
  pointer-events: none;
}
.desk-frame .desk-qa-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
/* The card that has the keyboard: a 1.5 pt ring just inside its edge. */
.desk-frame .desk-qa-pic:focus {
  outline: none;
}
.desk-frame .desk-qa-pic:focus::after {
  box-shadow:
    inset 0 0 0 calc(var(--ui) * 1.5px) var(--desk-accent),
    inset 0 0 0 0.5px rgb(0 0 0 / 0.1);
}

/* Hover or focus: the 0.22 scrim and the controls fade in over 0.12 s. */
.desk-frame .desk-qa-scrim,
.desk-frame .desk-qa-controls,
.desk-frame .desk-qa-trash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.12s ease-out,
    visibility 0s linear 0.12s;
}
.desk-frame .desk-qa-scrim {
  background: rgb(0 0 0 / 0.22);
  pointer-events: none;
}
.desk-frame .desk-qa-controls {
  pointer-events: none;
}
.desk-frame .desk-qa-card:is(:hover, :focus-within, .has-menu):not(.is-trashed, .is-leaving) :is(.desk-qa-scrim, .desk-qa-controls),
.desk-frame .desk-qa-card.is-trashed :is(.desk-qa-scrim, .desk-qa-trash) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease-out;
}
.desk-frame .desk-qa-card.is-trashed .desk-qa-pic {
  pointer-events: none;
}

/* Copy and Save: opaque white capsules, 112 × 30 pt, 8 pt apart, centered. */
.desk-frame .desk-qa-actions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui) * 8px);
}
.desk-frame .desk-qa-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui) * 6px);
  width: calc(var(--ui) * 112px);
  height: calc(var(--ui) * 30px);
  padding: 0;
  border: 0;
  border-radius: calc(var(--ui) * 15px);
  background: #f7f7f7;
  color: #1a1a1a;
  box-shadow: 0 calc(var(--ui) * 1px) calc(var(--ui) * 4px) rgb(0 0 0 / 0.18);
  font: 600 calc(var(--ui) * 13px) / 1 var(--desk-rounded);
  white-space: nowrap;
  cursor: default;
  pointer-events: auto;
}
.desk-frame .desk-qa-action .desk-icon {
  font-size: calc(var(--ui) * 12px);
  stroke-width: 2.6;
}
.desk-frame .desk-qa-action:hover {
  background: #fff;
}
.desk-frame .desk-qa-action:active {
  background: #d6d6d6;
}

/* Close, More and the side buttons: 24 pt dark circles, 10.5 pt bold white symbols. */
.desk-frame .desk-qa-corner {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ui) * 24px);
  height: calc(var(--ui) * 24px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  cursor: default;
  pointer-events: auto;
}
.desk-frame .desk-qa-corner .desk-icon {
  font-size: calc(var(--ui) * 10.5px);
  stroke-width: 3;
}
.desk-frame .desk-qa-corner:hover {
  background: rgb(0 0 0 / 0.62);
}
.desk-frame .desk-qa-corner:active {
  background: rgb(0 0 0 / 0.72);
}
.desk-frame .desk-qa-close {
  top: calc(var(--ui) * 8px);
  left: calc(var(--ui) * 8px);
}
.desk-frame .desk-qa-more {
  top: calc(var(--ui) * 8px);
  right: calc(var(--ui) * 8px);
}
.desk-frame .desk-qa-side.is-left {
  left: calc(var(--ui) * 8px);
}
.desk-frame .desk-qa-side.is-right {
  right: calc(var(--ui) * 8px);
}
.desk-frame :is(.desk-qa-action, .desk-qa-corner, .desk-qa-menu-item):focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 2px;
}

/* Moved to Trash: the scrim, the notice badge (the upload badge's materials, the
   trash symbol in its ink) above an Undo capsule, centered as a group. */
.desk-frame .desk-qa-trash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ui) * 8px);
  pointer-events: none;
}
.desk-frame .desk-qa-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ui) * 6px);
  height: calc(var(--ui) * 24px);
  padding: 0 calc(var(--ui) * 11px);
  border-radius: calc(var(--ui) * 12px);
  background: rgb(255 255 255 / 0.96);
  color: rgb(0 0 0 / 0.85);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.08),
    0 calc(var(--ui) * 2px) calc(var(--ui) * 8px) rgb(0 0 0 / 0.18);
  font: 600 calc(var(--ui) * 12px) / 1 var(--desk-rounded);
  white-space: nowrap;
}
.desk-frame .desk-qa-badge .desk-icon {
  font-size: calc(var(--ui) * 13px);
}

/* The card's menu: the status menu's look. */
.desk-frame .desk-qa-menu {
  z-index: 12;
  min-width: calc(var(--ui) * 200px);
  padding: calc(var(--ui) * 5px) 0;
  border-radius: calc(var(--ui) * 10px);
  background: rgb(255 255 255 / 0.96);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(var(--ui) * 10px) calc(var(--ui) * 30px) rgb(0 0 0 / 0.25);
  font: 400 calc(var(--ui) * 13px) / 1 var(--desk-face);
}
.desk-frame .desk-qa-menu-item {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 16px);
  box-sizing: border-box;
  width: calc(100% - var(--ui) * 10px);
  height: calc(var(--ui) * 22px);
  margin: 0 calc(var(--ui) * 5px);
  padding: 0 calc(var(--ui) * 10px);
  border: 0;
  border-radius: calc(var(--ui) * 5px);
  background: none;
  color: rgb(0 0 0 / 0.85);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.desk-frame .desk-qa-menu-item kbd {
  margin-left: auto;
  color: rgb(0 0 0 / 0.5);
  font: inherit;
}
.desk-frame .desk-qa-menu-item:focus {
  outline: none;
  background: var(--desk-accent);
  color: #fff;
}
.desk-frame .desk-qa-menu-item:focus kbd {
  color: rgb(255 255 255 / 0.85);
}
.desk-frame .desk-qa-menu-sep {
  height: 1px;
  margin: calc(var(--ui) * 5px) calc(var(--ui) * 10px);
  background: rgb(0 0 0 / 0.1);
}

/* Notification banners: macOS's, at the desktop's top right under the menu bar,
   344 pt wide, on the dark glass with a rim lit along its top; newest on top. */
.desk-frame .desk-notices {
  --edge: calc(var(--ui) * 10px);
  top: calc(var(--pt) * 24px + var(--ui) * 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--ui) * 8px);
  width: 100%;
  pointer-events: none;
}
.desk-frame .desk-notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 10px);
  box-sizing: border-box;
  width: min(calc(var(--ui) * 344px), calc(100% - 2 * var(--edge)));
  margin: 0 var(--edge) 0 0;
  padding: calc(var(--ui) * 11px) calc(var(--ui) * 14px) calc(var(--ui) * 12px) calc(var(--ui) * 11px);
  border-radius: calc(var(--ui) * 18px);
  background: rgb(38 38 42 / 0.68);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.32),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.1),
    0 0 0 0.5px rgb(0 0 0 / 0.4),
    0 calc(var(--ui) * 8px) calc(var(--ui) * 24px) rgb(0 0 0 / 0.3);
  color: #fff;
  font: 400 calc(var(--ui) * 13px) / 1.3 var(--desk-face);
  opacity: 0;
  transition: opacity 200ms ease;
}
.desk-frame .desk-notice.is-shown {
  opacity: 1;
  transition: opacity 240ms ease;
}
.desk-frame .desk-notice.is-leaving {
  position: absolute;
  right: 0;
}
.desk-frame .desk-notice img {
  flex: none;
  width: calc(var(--ui) * 34px);
  height: calc(var(--ui) * 34px);
}
.desk-frame .desk-notice-body {
  flex: 1;
  min-width: 0;
}
.desk-frame .desk-notice-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--ui) * 8px);
}
.desk-frame .desk-notice b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-frame .desk-notice time {
  flex: none;
  color: rgb(255 255 255 / 0.5);
  font-size: calc(var(--ui) * 12px);
}
.desk-frame .desk-notice-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media (prefers-reduced-motion: no-preference) {
  .desk-frame .desk-notice {
    translate: calc(100% + 2 * var(--edge)) 0;
    transition:
      opacity 200ms ease,
      translate 260ms ease-in;
  }
  .desk-frame .desk-notice.is-shown {
    translate: 0 0;
    transition:
      opacity 160ms ease,
      translate 480ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .desk-frame :is(.desk-qa-scrim, .desk-qa-controls, .desk-qa-trash),
  .desk-frame .desk-qa-card:is(:hover, :focus-within, .has-menu):not(.is-trashed, .is-leaving) :is(.desk-qa-scrim, .desk-qa-controls),
  .desk-frame .desk-qa-card.is-trashed :is(.desk-qa-scrim, .desk-qa-trash),
  .desk-frame .desk-notice,
  .desk-frame .desk-notice.is-shown {
    transition: none;
  }
}
@media (forced-colors: active) {
  .desk-frame .desk-qa-pic::after {
    box-shadow: inset 0 0 0 1px CanvasText;
  }
  .desk-frame .desk-qa-pic:focus::after {
    box-shadow: inset 0 0 0 2px Highlight;
  }
  .desk-frame :is(.desk-qa-action, .desk-qa-corner, .desk-qa-badge, .desk-qa-menu, .desk-notice) {
    border: 1px solid CanvasText;
  }
  .desk-frame :is(.desk-qa-action, .desk-qa-corner, .desk-qa-menu-item):focus-visible {
    outline-color: Highlight;
  }
  .desk-frame .desk-qa-menu-item:focus {
    background: Highlight;
    color: HighlightText;
  }
}

/* ---- Capture demo: Pick Color, the colour card, Measure, pins (color.ts, measure.ts, pins.ts) ----
   Values from APP/DESIGN.md "Pick Color", "Copied Reading", "Color Card", "Measure" and "Pins". */

/* Pick Color and Measure draw their own pointer: the crosshair, or the ruler's lines. */
.desk-frame.is-picking,
.desk-frame.is-measuring {
  cursor: none;
}

/* The Copied reading: by the point; shows at once, holds 0.9 s, fades over 0.12 s. */
.desk-frame .ins-copied {
  z-index: 60;
  transition: opacity 0.12s linear;
}
.desk-frame .ins-copied.is-leaving {
  opacity: 0;
}

/* ---- Measure ---- */
.desk-frame .ins-ruler-wrap {
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.desk-frame .ins-ruler {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.desk-frame .ins-ruler path,
.desk-frame .ins-ruler rect {
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  fill: none;
}
/* 1 pt accent lines over the 3 pt ruler outline (white 0.85), 8 pt caps across each end. */
.desk-frame .ins-ruler-halo,
.desk-frame .ins-ruler-box-halo {
  stroke: rgb(255 255 255 / 0.85);
  stroke-width: calc(var(--ui) * 3px);
}
.desk-frame .ins-ruler-line,
.desk-frame .ins-ruler-box {
  stroke: var(--desk-accent);
  stroke-width: calc(var(--ui) * 1px);
}
.desk-frame .ins-ruler .ins-ruler-box {
  fill: color-mix(in srgb, var(--desk-accent) 8%, transparent);
}
/* A box is lighter while it is drawn, solid once it has snapped. */
.desk-frame .ins-ruler.is-dragging .ins-ruler-box,
.desk-frame .ins-ruler.is-dragging .ins-ruler-box-halo {
  opacity: 0.6;
}
.desk-frame .ins-measure-reading,
.desk-frame .ins-measure-tolerance {
  z-index: 31;
}

/* ---- The colour card: 368 pt, white 0.97, 0.5 pt black 0.08 hairline, 12 pt corners,
   the floating card shadow, 14 pt padding. ---- */
.desk-frame .ins-card {
  z-index: 45;
  width: calc(var(--ui) * 368px);
  box-sizing: border-box;
  padding: calc(var(--ui) * 14px);
  border-radius: calc(var(--ui) * 12px);
  background: rgb(255 255 255 / 0.97);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.08),
    0 6px 14px rgb(0 0 0 / 0.22);
  color: rgb(0 0 0 / 0.85);
  font-family: var(--desk-rounded);
  cursor: default;
}
.desk-frame .ins-card.is-arriving {
  animation: ins-card-in 0.22s ease-out;
}
.desk-frame .ins-card.is-leaving {
  opacity: 0;
  transition: opacity 0.15s linear;
}
@keyframes ins-card-in {
  from {
    opacity: 0;
    translate: 0 calc(var(--ui) * 6px);
  }
}
.desk-frame .ins-card-head {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 10px);
  height: calc(var(--ui) * 34px);
}
.desk-frame .ins-card-swatch {
  flex: none;
  width: calc(var(--ui) * 28px);
  height: calc(var(--ui) * 28px);
  border-radius: calc(var(--ui) * 7px);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.18);
}
.desk-frame .ins-card-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--ui) * 15px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.desk-frame .ins-card-rule {
  height: 1px;
  margin: calc(var(--ui) * 5px) 0;
  background: rgb(0 0 0 / 0.1);
}
.desk-frame .ins-card-row {
  display: flex;
  align-items: center;
  height: calc(var(--ui) * 26px);
}
.desk-frame .ins-card-label {
  flex: none;
  width: calc(var(--ui) * 74px);
  font-size: calc(var(--ui) * 11px);
  font-weight: 500;
  color: rgb(0 0 0 / 0.5);
}
.desk-frame .ins-card-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--ui) * 12px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.desk-frame .ins-card-copy .desk-icon {
  font-size: calc(var(--ui) * 12px);
}
.desk-frame .ins-card-buttons {
  display: flex;
  gap: calc(var(--ui) * 8px);
  margin-top: calc(var(--ui) * 12px);
}
.desk-frame .ins-card-chip {
  padding: 0 calc(var(--ui) * 11px);
}

/* ---- Pins: the picture at 100% (scene points), 12 pt corners, a 0.5 pt black 0.18
   hairline, the window shadow; a 1.5 pt accent ring inside the edge while it has the keys. ---- */
.desk-frame .ins-pin {
  z-index: 20;
  border-radius: calc(var(--ui) * 12px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  outline: none;
  touch-action: none;
  cursor: default;
}
.desk-frame .ins-pin[hidden] {
  display: none;
}
.desk-frame .ins-pin-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.desk-frame .ins-pin-picture {
  display: block;
  width: 100%;
  height: 100%;
}
.desk-frame .ins-pin::before,
.desk-frame .ins-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.desk-frame .ins-pin::before {
  z-index: 1;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.18);
}
.desk-frame .ins-pin:focus::after {
  z-index: 1;
  box-shadow: inset 0 0 0 1.5px var(--desk-accent);
}

/* Close and More: 24 pt card corner buttons 8 pt in from the top corners, fading in
   (0.12 s) while the pointer is over the pin or it has the keys; faded out they take no clicks. */
.desk-frame .ins-pin-btn {
  position: absolute;
  z-index: 2;
  top: calc(var(--ui) * 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ui) * 24px);
  height: calc(var(--ui) * 24px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  font-size: calc(var(--ui) * 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s linear;
}
.desk-frame .ins-pin-btn[hidden] {
  display: none;
}
.desk-frame .ins-pin-btn.is-close {
  left: calc(var(--ui) * 8px);
}
.desk-frame .ins-pin-btn.is-more {
  right: calc(var(--ui) * 8px);
}
.desk-frame .ins-pin.is-short .ins-pin-btn {
  top: 50%;
  translate: 0 -50%;
}
.desk-frame .ins-pin:hover:not(.is-dragging) .ins-pin-btn,
.desk-frame .ins-pin:focus-within .ins-pin-btn {
  opacity: 1;
  pointer-events: auto;
}
/* An armed overlay stands over the cards and the pins, as the app's capture overlay
   stands over every panel: a press where one lies is the overlay's (a colour picked,
   a selection begun), never the card's or the pin's. After the pin rules above, which
   it matches in weight. */
.desk-frame.is-armed .desk-layer :is(.desk-qa-card, .desk-qa-card *, .ins-pin, .ins-pin *) {
  pointer-events: none;
}
.desk-frame .ins-pin-btn:hover {
  background: rgb(0 0 0 / 0.62);
}
.desk-frame .ins-pin-btn:active {
  background: rgb(0 0 0 / 0.72);
}
.desk-frame .ins-pin-btn:focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 2px;
}

/* The reading: centered 10 pt above the bottom edge, in the height on a short pin. */
.desk-frame .ins-pin-reading {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--ui) * 10px);
  translate: -50% 0;
  transition: opacity 0.12s linear;
}
.desk-frame .ins-pin.is-low .ins-pin-reading {
  bottom: auto;
  top: 50%;
  translate: -50% -50%;
}
.desk-frame .ins-pin-reading.is-leaving {
  opacity: 0;
}

/* The pin's menu, as the status menu draws: white 0.96, 10 pt corners, 22 pt rows. */
.desk-frame .ins-pin-menu {
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: calc(var(--ui) * 140px);
  padding: calc(var(--ui) * 5px);
  border-radius: calc(var(--ui) * 10px);
  background: rgb(255 255 255 / 0.96);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 10px 30px rgb(0 0 0 / 0.25);
}
.desk-frame .ins-pin-menu-item {
  height: calc(var(--ui) * 22px);
  padding: 0 calc(var(--ui) * 10px);
  border: 0;
  border-radius: calc(var(--ui) * 5px);
  background: transparent;
  color: rgb(0 0 0 / 0.85);
  font: 400 calc(var(--ui) * 13px) / 1 var(--desk-face);
  text-align: left;
  outline: none;
  cursor: default;
}
.desk-frame .ins-pin-menu-item:focus {
  background: var(--desk-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .desk-frame .ins-copied,
  .desk-frame .ins-pin-btn,
  .desk-frame .ins-pin-reading,
  .desk-frame .ins-card.is-leaving {
    transition: none;
  }
  .desk-frame .ins-card.is-arriving {
    animation: none;
  }
}

@media (forced-colors: active) {
  .desk-frame .ins-ruler-line,
  .desk-frame .ins-ruler-box {
    stroke: Highlight;
  }
  .desk-frame .ins-ruler-halo,
  .desk-frame .ins-ruler-box-halo {
    stroke: Canvas;
  }
  .desk-frame .ins-card,
  .desk-frame .ins-pin-menu {
    border: 1px solid CanvasText;
  }
  .desk-frame .ins-pin::before {
    box-shadow: inset 0 0 0 1px CanvasText;
  }
  .desk-frame .ins-pin:focus::after {
    box-shadow: inset 0 0 0 2px Highlight;
  }
  .desk-frame .ins-pin-btn {
    border: 1px solid CanvasText;
  }
  .desk-frame .ins-pin-menu-item:focus {
    background: Highlight;
    color: HighlightText;
  }
  .desk-frame .ins-card-swatch,
  .desk-frame .ins-pin-body {
    forced-color-adjust: none;
  }
}

/* ---- Capture demo: Translate Area's lens and the Recognized Text window (DeskReader) ----
   APP/DESIGN.md "Translation Overlay", "Translation Lens", "OCR Panel". */

/* The Translation Overlay: every length is var(--k) × pt, set by the holder. */
.desk-frame .desk-xlate {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.desk-frame .desk-xlate > * {
  position: absolute;
}
.desk-frame .desk-xlate-text {
  --s: 1;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  font-size: calc(var(--k) * var(--size) * var(--s) * 1px);
  font-weight: 400;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.desk-frame .desk-xlate-text.is-line {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.desk-frame .desk-xlate-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* The lens: exactly over the selection, a 0.5 pt black 0.18 hairline and the window
   shadow; it fades in over 0.18 s and out over 0.15 s. */
.desk-frame .desk-lens {
  overflow: hidden;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.18),
    0 10px 30px rgb(0 0 0 / 0.25);
  opacity: 0;
  transition: opacity 0.15s ease-out;
  cursor: default;
}
.desk-frame .desk-lens.is-shown {
  opacity: 1;
  transition-duration: 0.18s;
}
.desk-frame .desk-lens-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.desk-frame .desk-lens.is-original .desk-xlate {
  visibility: hidden;
}

/* Its capsule: the pair in the reading face, Copy and Close chips. */
.desk-frame .desk-lens-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 6px);
  height: calc(var(--ui) * 36px);
  padding: 0 calc(var(--ui) * 5px) 0 calc(var(--ui) * 12px);
  border-radius: calc(var(--ui) * 18px);
  background: rgb(255 255 255 / 0.97);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.08),
    0 6px 14px rgb(0 0 0 / 0.22);
  color: rgb(0 0 0 / 0.85);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(var(--ui) * 6px));
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
}
.desk-frame .desk-lens-bar.is-shown {
  opacity: 1;
  transform: none;
  transition-duration: 0.22s;
}
.desk-frame .desk-lens-pair {
  margin-right: calc(var(--ui) * 4px);
  font: 600 calc(var(--ui) * 12px) / 1 var(--desk-rounded);
}

/* ---- The Recognized Text window ---- */
.desk-frame .desk-ocr {
  --line: rgb(0 0 0 / 0.1);
  display: flex;
  flex-direction: column;
  width: min(calc(var(--ui) * 760px), calc(100% - var(--pt) * 12px));
  height: min(calc(var(--ui) * 480px), calc(100% - var(--pt) * 36px));
  border-radius: calc(var(--ui) * 14px);
  overflow: hidden;
  background: #fff;
  color: rgb(0 0 0 / 0.85);
  box-shadow:
    0 22px 60px rgb(0 0 0 / 0.28),
    0 0 0 0.5px rgb(0 0 0 / 0.18);
  font: 400 calc(var(--ui) * 13px) / 1.15 var(--desk-face);
  outline: none;
}
.desk-frame .desk-ocr.is-opening {
  animation: desk-ocr-open 0.22s ease-out;
}
@keyframes desk-ocr-open {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.desk-frame :where(.desk-ocr button) {
  font: inherit;
  color: inherit;
  cursor: default;
}
.desk-frame .desk-ocr :focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 1px;
}

/* Unified title bar and toolbar: lights, title over subtitle, the controls trailing. */
.desk-frame .desk-ocr-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 14px);
  height: calc(var(--ui) * 52px);
  padding: 0 calc(var(--ui) * 12px) 0 calc(var(--ui) * 18px);
  border-bottom: 0.5px solid var(--line);
  background: #fff;
  touch-action: none;
  user-select: none;
}
.desk-frame .desk-ocr-lights {
  display: flex;
  gap: calc(var(--ui) * 8px);
}
.desk-frame .desk-ocr-light {
  width: calc(var(--ui) * 12px);
  height: calc(var(--ui) * 12px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12);
}
.desk-frame .desk-ocr-light.is-close {
  background: #ff5f57;
}
.desk-frame .desk-ocr-light.is-min {
  background: #febc2e;
}
.desk-frame .desk-ocr-light.is-zoom {
  background: #28c840;
}
.desk-frame .desk-ocr-titles {
  flex: 1;
  min-width: 0;
}
.desk-frame .desk-ocr-title {
  margin: 0;
  overflow: hidden;
  font: 600 calc(var(--ui) * 13px) / 1.2 var(--desk-face);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.desk-frame .desk-ocr-subtitle {
  margin: 0;
  overflow: hidden;
  color: rgb(0 0 0 / 0.5);
  font-size: calc(var(--ui) * 11px);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.desk-frame .desk-ocr-tools {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 8px);
}
.desk-frame .desk-ocr-tools [hidden] {
  display: none;
}

/* Text / Table */
.desk-frame .desk-ocr-seg {
  display: flex;
  padding: calc(var(--ui) * 2px);
  border-radius: calc(var(--ui) * 14px);
  background: rgb(0 0 0 / 0.06);
}
.desk-frame .desk-ocr-seg-item {
  height: calc(var(--ui) * 24px);
  padding: 0 calc(var(--ui) * 10px);
  border: 0;
  border-radius: calc(var(--ui) * 12px);
  background: none;
  font-size: calc(var(--ui) * 12px);
}
.desk-frame .desk-ocr-seg-item[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.16);
  font-weight: 600;
}

/* The line-break menu */
.desk-frame .desk-ocr-breaks {
  position: relative;
}
.desk-frame .desk-ocr-popup,
.desk-frame .desk-ocr-toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ui) * 6px);
  height: calc(var(--ui) * 28px);
  padding: 0 calc(var(--ui) * 10px);
  border: 0;
  border-radius: calc(var(--ui) * 14px);
  background: rgb(0 0 0 / 0.06);
  font-size: calc(var(--ui) * 12px);
  white-space: nowrap;
}
.desk-frame .desk-ocr-popup::after {
  content: "";
  width: calc(var(--ui) * 5px);
  height: calc(var(--ui) * 5px);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  opacity: 0.6;
}
.desk-frame .desk-ocr-popup:hover:not(:disabled),
.desk-frame .desk-ocr-toggle:hover:not(:disabled) {
  background: rgb(0 0 0 / 0.102);
}
.desk-frame .desk-ocr-popup:disabled,
.desk-frame .desk-ocr-toggle:disabled,
.desk-frame .desk-ocr-copy:disabled {
  opacity: 0.4;
}
.desk-frame .desk-ocr-toggle {
  width: calc(var(--ui) * 32px);
  justify-content: center;
  padding: 0;
  font-size: calc(var(--ui) * 14px);
}
.desk-frame .desk-ocr-toggle[aria-pressed="true"] {
  background: rgb(0 122 255 / 0.14);
  color: var(--desk-accent);
}
.desk-frame .desk-ocr-menu {
  position: absolute;
  top: calc(100% + var(--ui) * 4px);
  right: 0;
  z-index: 2;
  display: grid;
  min-width: calc(var(--ui) * 170px);
  padding: calc(var(--ui) * 5px);
  border-radius: calc(var(--ui) * 10px);
  background: rgb(255 255 255 / 0.96);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 10px 30px rgb(0 0 0 / 0.25);
}
.desk-frame .desk-ocr-menu[hidden] {
  display: none;
}
.desk-frame .desk-ocr-menu-item {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 6px);
  height: calc(var(--ui) * 22px);
  padding: 0 calc(var(--ui) * 10px) 0 calc(var(--ui) * 22px);
  border: 0;
  border-radius: calc(var(--ui) * 5px);
  background: none;
  font-size: calc(var(--ui) * 13px);
  text-align: left;
  white-space: nowrap;
  position: relative;
}
.desk-frame .desk-ocr-menu-item[aria-checked="true"]::before {
  content: "✓";
  position: absolute;
  left: calc(var(--ui) * 7px);
}
.desk-frame .desk-ocr-menu-item:hover,
.desk-frame .desk-ocr-menu-item:focus-visible {
  background: var(--desk-accent);
  color: #fff;
  outline: none;
}

/* The one prominent control */
.desk-frame .desk-ocr-copy {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ui) * 5px);
  height: calc(var(--ui) * 28px);
  padding: 0 calc(var(--ui) * 12px);
  border: 0;
  border-radius: calc(var(--ui) * 14px);
  background: var(--desk-accent);
  color: #fff;
  font-size: calc(var(--ui) * 12px);
  font-weight: 600;
  white-space: nowrap;
}
.desk-frame .desk-ocr-copy:hover:not(:disabled) {
  background: #0a6ee6;
}
.desk-frame .desk-ocr-copy:active:not(:disabled) {
  background: #0060cc;
}
.desk-frame .desk-ocr-copy .desk-icon {
  font-size: calc(var(--ui) * 13px);
}

/* Body: the picture on .background.secondary, the text side on the window background. */
.desk-frame .desk-ocr-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.desk-frame .desk-ocr-picture-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f2f2f7;
}
.desk-frame .desk-ocr-picture {
  position: relative;
  flex: none;
  border-radius: calc(var(--ui) * 12px);
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 4px 10px rgb(0 0 0 / 0.12);
}
.desk-frame .desk-ocr-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.desk-frame .desk-ocr-lines,
.desk-frame .desk-ocr-lines > * {
  position: absolute;
}
.desk-frame .desk-ocr-lines {
  inset: 0;
}
.desk-frame .desk-ocr-line,
.desk-frame .desk-ocr-code {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 2px;
}
.desk-frame .desk-ocr-line:hover,
.desk-frame .desk-ocr-code:hover,
.desk-frame .desk-ocr-code.is-hot {
  border-color: var(--desk-accent);
}
.desk-frame .desk-ocr-line.is-selected {
  border-color: var(--desk-accent);
  background: rgb(179 215 255 / 0.35);
}
.desk-frame .desk-ocr-line.is-selected.is-inactive {
  border-color: rgb(0 0 0 / 0.3);
  background: rgb(220 220 220 / 0.35);
}
.desk-frame .desk-ocr-picture.is-stale .desk-ocr-line {
  pointer-events: none;
  border-color: transparent;
  background: none;
}
.desk-frame .desk-ocr-picture.is-table .desk-ocr-line,
.desk-frame .desk-ocr-picture.is-translated .desk-ocr-lines {
  display: none;
}
.desk-frame .desk-ocr-overlay {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.desk-frame .desk-ocr-picture.is-translated .desk-ocr-overlay {
  opacity: 1;
  transition-duration: 0.18s;
}

.desk-frame .desk-ocr-side {
  flex: 0 0 min(calc(var(--ui) * 320px), 48%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 0.5px solid var(--line);
  background: #fff;
}
.desk-frame .desk-ocr-side > [hidden] {
  display: none;
}
.desk-frame .desk-ocr-text-view,
.desk-frame .desk-ocr-table-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.desk-frame .desk-ocr-editor {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: calc(var(--ui) * 12px) calc(var(--ui) * 14px);
  border: 0;
  resize: none;
  background: none;
  color: rgb(0 0 0 / 0.85);
  font: 400 calc(var(--ui) * 13px) / 1.15 var(--desk-face);
  tab-size: 4;
}
.desk-frame .desk-ocr-editor.is-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre;
}
.desk-frame .desk-ocr-editor:focus,
.desk-frame .desk-ocr-editor:focus-visible {
  outline: none;
}
.desk-frame .desk-ocr-editor::selection {
  background: #b3d7ff;
}
.desk-frame .desk-ocr-status,
.desk-frame .desk-ocr-edited {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 8px);
  margin: 0;
  padding: calc(var(--ui) * 6px) calc(var(--ui) * 14px);
  border-top: 0.5px solid var(--line);
  color: rgb(0 0 0 / 0.5);
  font-size: calc(var(--ui) * 11px);
}
.desk-frame .desk-ocr-status[hidden],
.desk-frame .desk-ocr-edited[hidden] {
  display: none;
}
.desk-frame .desk-ocr-edited span {
  flex: 1;
}
.desk-frame .desk-ocr-revert,
.desk-frame .desk-ocr-small {
  height: calc(var(--ui) * 22px);
  padding: 0 calc(var(--ui) * 9px);
  border: 0;
  border-radius: calc(var(--ui) * 6px);
  background: rgb(0 0 0 / 0.06);
  font-size: calc(var(--ui) * 11px);
  white-space: nowrap;
}
.desk-frame .desk-ocr-small {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ui) * 4px);
}
.desk-frame .desk-ocr-revert:hover,
.desk-frame .desk-ocr-small:hover {
  background: rgb(0 0 0 / 0.102);
}

/* Table pane: a 12 pt card, hairlines, a semibold header on black 0.045, figures right. */
.desk-frame .desk-ocr-table-view {
  gap: calc(var(--ui) * 10px);
  padding: calc(var(--ui) * 12px);
  overflow: auto;
}
.desk-frame .desk-ocr-grid-card {
  flex: none;
  overflow: auto;
  border-radius: calc(var(--ui) * 12px);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.14);
}
.desk-frame .desk-ocr-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--ui) * 12px);
  font-variant-numeric: tabular-nums;
}
.desk-frame .desk-ocr-grid th,
.desk-frame .desk-ocr-grid td {
  min-width: calc(var(--ui) * 56px);
  max-width: calc(var(--ui) * 260px);
  padding: calc(var(--ui) * 6px) calc(var(--ui) * 8px);
  border: 0.5px solid rgb(0 0 0 / 0.1);
  text-align: left;
  white-space: nowrap;
}
.desk-frame .desk-ocr-grid tr > :first-child {
  border-left: 0;
}
.desk-frame .desk-ocr-grid tr > :last-child {
  border-right: 0;
}
.desk-frame .desk-ocr-grid tr:first-child > * {
  border-top: 0;
}
.desk-frame .desk-ocr-grid tr:last-child > * {
  border-bottom: 0;
}
.desk-frame .desk-ocr-grid th {
  background: rgb(0 0 0 / 0.045);
  font-weight: 600;
}
.desk-frame .desk-ocr-grid .is-figure {
  text-align: right;
}
.desk-frame .desk-ocr-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ui) * 6px);
}

/* Found in Image: a semibold caption, then 28 pt rows, at most 176 pt tall. */
.desk-frame .desk-ocr-found {
  flex: none;
  padding: calc(var(--ui) * 8px);
  border-top: 0.5px solid var(--line);
}
.desk-frame .desk-ocr-found-head {
  margin: 0;
  padding: 0 calc(var(--ui) * 8px) calc(var(--ui) * 4px);
  color: rgb(0 0 0 / 0.5);
  font: 600 calc(var(--ui) * 10px) / 1.2 var(--desk-face);
}
.desk-frame .desk-ocr-found-list {
  max-height: calc(var(--ui) * 176px);
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.desk-frame .desk-ocr-row {
  display: flex;
  align-items: center;
  height: calc(var(--ui) * 28px);
  border-radius: calc(var(--ui) * 6px);
}
.desk-frame .desk-ocr-row:hover,
.desk-frame .desk-ocr-row:focus-within {
  background: rgb(0 0 0 / 0.045);
}
.desk-frame .desk-ocr-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 8px);
  height: 100%;
  padding: 0 calc(var(--ui) * 8px);
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font-size: calc(var(--ui) * 12px);
  text-align: left;
  text-decoration: none;
}
.desk-frame .desk-ocr-row-main .desk-icon {
  color: rgb(0 0 0 / 0.5);
  font-size: calc(var(--ui) * 13px);
}
.desk-frame .desk-ocr-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.desk-frame .desk-ocr-row-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--ui) * 24px);
  height: calc(var(--ui) * 24px);
  margin-right: calc(var(--ui) * 4px);
  padding: 0;
  border: 0;
  border-radius: calc(var(--ui) * 6px);
  background: none;
  color: rgb(0 0 0 / 0.6);
  font-size: calc(var(--ui) * 13px);
}
.desk-frame .desk-ocr-row-copy:hover {
  background: rgb(0 0 0 / 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .desk-frame .desk-lens,
  .desk-frame .desk-lens-bar,
  .desk-frame .desk-ocr-overlay {
    transition: none !important;
  }
  .desk-frame .desk-lens-bar {
    transform: none;
  }
  .desk-frame .desk-ocr.is-opening {
    animation: none;
  }
}

@media (forced-colors: active) {
  .desk-frame .desk-lens,
  .desk-frame .desk-ocr,
  .desk-frame .desk-lens-bar,
  .desk-frame .desk-ocr-menu {
    border: 1px solid CanvasText;
  }
  .desk-frame .desk-ocr-line:hover,
  .desk-frame .desk-ocr-code:hover,
  .desk-frame .desk-ocr-code.is-hot,
  .desk-frame .desk-ocr-line.is-selected {
    border-color: Highlight;
  }
  .desk-frame .desk-ocr :focus-visible {
    outline-color: Highlight;
  }
}

/* ---- Capture demo: Annotate Area and the annotation editor (annotate.ts) ----
   APP/DESIGN.md "In-Place Annotation", "Tool Rail", "Style Capsule", "Annotation
   Editor", "Canvas". Chrome is sized in --ui points; the marks are drawn on canvases. */

.desk-frame .ann-inplace {
  inset: 0;
}
.desk-frame .ann-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.desk-frame .ann-canvas.is-idle {
  cursor: move;
}

/* The in-place toolbar (the rail laid flat) and the editor's rail: an opaque white
   capsule standing in for Liquid Glass, 0.5 pt hairline, the floating bar shadow. */
.desk-frame .ann-bar,
.desk-frame .ann-rail {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 2px);
  padding: calc(var(--ui) * 6px);
  box-sizing: border-box;
  border-radius: 9999px;
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(var(--ui) * 3px) calc(var(--ui) * 10px) rgb(0 0 0 / 0.16);
}
.desk-frame .ann-bar {
  position: absolute;
  height: calc(var(--ui) * 42px);
  white-space: nowrap;
}
.desk-frame .ann-bar[hidden] {
  display: none;
}

/* 30 pt round chips, a 14 pt symbol in label ink, no label. */
.desk-frame .ann-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ui) * 30px);
  height: calc(var(--ui) * 30px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(0 0 0 / 0.85);
  font-size: calc(var(--ui) * 14px);
  cursor: default;
}
.desk-frame .ann-chip:hover {
  background: rgb(0 0 0 / 0.045);
}
.desk-frame .ann-chip[aria-pressed="true"] {
  background: rgb(0 0 0 / 0.08);
  color: var(--desk-accent);
}
.desk-frame .ann-chip.is-copy {
  color: var(--desk-accent);
}
.desk-frame .ann-chip:disabled {
  color: rgb(0 0 0 / 0.26);
  background: transparent;
}
.desk-frame .ann-chip:focus-visible,
.desk-frame .ann-dot:focus-visible,
.desk-frame .ann-cchip:focus-visible,
.desk-frame .ann-textchip:focus-visible,
.desk-frame .ann-tbutton:focus-visible,
.desk-frame .ann-light:focus-visible,
.desk-frame .ann-suggest:focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 1px;
}

/* 18 pt hairlines with 6 pt around them (4 pt margins plus the 2 pt chip gap). */
.desk-frame .ann-sep {
  flex: none;
  width: 1px;
  height: calc(var(--ui) * 18px);
  margin: 0 calc(var(--ui) * 4px);
  background: rgb(0 0 0 / 0.1);
}
.desk-frame .ann-sep.is-across {
  width: calc(var(--ui) * 18px);
  height: 1px;
  margin: calc(var(--ui) * 4px) 0;
}

/* The style capsule: white 0.97, 38 pt, 4 pt inset (8 pt leading), 0.5 pt hairline,
   the floating reading shadow, no glass. It fades in over 0.12 s for a new tool or
   selection and hides while a mark is drawn. */
.desk-frame .ann-style {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 2px);
  height: calc(var(--ui) * 38px);
  padding: calc(var(--ui) * 4px) calc(var(--ui) * 4px) calc(var(--ui) * 4px) calc(var(--ui) * 8px);
  box-sizing: border-box;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.97);
  color: rgb(0 0 0 / 0.85);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.08),
    0 calc(var(--ui) * 2px) calc(var(--ui) * 8px) rgb(0 0 0 / 0.18);
  white-space: nowrap;
}
.desk-frame .ann-style[hidden] {
  display: none;
}
.desk-frame .ann-style.is-arriving {
  animation: ann-fade 0.12s ease-out;
}
.desk-frame .ann-style.is-drawing {
  visibility: hidden;
}
@keyframes ann-fade {
  from {
    opacity: 0;
  }
}

/* Colour dots: a 12 pt disc with the capsule swatch edge in a 24 pt chip; the chosen
   one ringed in the accent. */
.desk-frame .ann-dot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ui) * 24px);
  height: calc(var(--ui) * 30px);
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: default;
}
.desk-frame .ann-dot::before {
  content: "";
  width: calc(var(--ui) * 12px);
  height: calc(var(--ui) * 12px);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18);
}
.desk-frame .ann-dot[aria-pressed="true"]::before {
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.18),
    0 0 0 calc(var(--ui) * 2.5px) #fff,
    0 0 0 calc(var(--ui) * 4.5px) var(--desk-accent);
}

/* Size, variant and Shadow chips. */
.desk-frame .ann-cchip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ui) * 30px);
  height: calc(var(--ui) * 30px);
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font-size: calc(var(--ui) * 13px);
  cursor: default;
}
.desk-frame .ann-cchip:hover,
.desk-frame .ann-textchip:hover {
  background: rgb(0 0 0 / 0.045);
}
.desk-frame .ann-cchip[aria-pressed="true"] {
  background: rgb(0 0 0 / 0.08);
  color: var(--desk-accent);
}
.desk-frame .ann-size {
  width: calc(var(--ui) * 26px);
}
.desk-frame .ann-size i {
  display: block;
  border-radius: 50%;
  background: currentColor;
}
.desk-frame .ann-size-text {
  width: calc(var(--ui) * 28px);
}
.desk-frame .ann-size-text span {
  font: 600 1em / 1 var(--desk-face);
}
.desk-frame .ann-textchip {
  flex: none;
  height: calc(var(--ui) * 30px);
  padding: 0 calc(var(--ui) * 14px);
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgb(0 0 0 / 0.85);
  font: 600 calc(var(--ui) * 12px) / 1 var(--desk-face);
  cursor: default;
}

/* Redaction suggestions: 1.5 pt accent dashes over a white line as wide as they are,
   no fill; they fade in over 0.12 s. */
.desk-frame .ann-suggestions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.desk-frame .ann-suggest {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  border: calc(var(--ui) * 1.5px) solid rgb(255 255 255 / 0.85);
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  animation: ann-fade 0.12s ease-out;
}
.desk-frame .ann-suggest::after {
  content: "";
  position: absolute;
  inset: calc(var(--ui) * -1.5px);
  border: calc(var(--ui) * 1.5px) dashed var(--desk-accent);
}

/* The field a text mark is typed in: the mark's own face, size and line height. */
.desk-frame .ann-text-edit {
  position: absolute;
  box-sizing: border-box;
  min-width: 1ch;
  margin: 0;
  white-space: pre;
  outline: none;
  caret-color: currentColor;
  cursor: text;
}

/* ---- The editor window ---- */

.desk-frame .ann-window {
  display: flex;
  flex-direction: column;
  width: min(calc(var(--ui) * 900px), calc(100% - var(--ui) * 16px));
  height: min(calc(var(--ui) * 620px), calc(100% - var(--pt) * 24px - var(--ui) * 16px));
  overflow: hidden;
  border-radius: calc(var(--ui) * 14px);
  background: #f2f2f7;
  color: rgb(0 0 0 / 0.85);
  box-shadow:
    0 calc(var(--ui) * 22px) calc(var(--ui) * 60px) rgb(0 0 0 / 0.28),
    0 0 0 0.5px rgb(0 0 0 / 0.18);
  font: 400 calc(var(--ui) * 13px) / 1.2 var(--desk-face);
}
.desk-frame .ann-window:focus {
  outline: none;
}

/* The unified title bar and toolbar, 52 pt. */
.desk-frame .ann-titlebar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--ui) * 8px);
  height: calc(var(--ui) * 52px);
  padding: 0 calc(var(--ui) * 12px) 0 calc(var(--ui) * 16px);
  box-sizing: border-box;
  border-bottom: 0.5px solid rgb(0 0 0 / 0.1);
  background: #fbfbfb;
  touch-action: none;
  user-select: none;
}
.desk-frame .ann-lights {
  display: flex;
  gap: calc(var(--ui) * 8px);
  margin-right: calc(var(--ui) * 8px);
}
.desk-frame .ann-light {
  width: calc(var(--ui) * 12px);
  height: calc(var(--ui) * 12px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12);
}
.desk-frame .ann-light.is-close {
  background: #ff5f57;
  cursor: default;
}
.desk-frame .ann-light.is-minimize {
  background: #febc2e;
}
.desk-frame .ann-light.is-zoom {
  background: #28c840;
}
.desk-frame .ann-lead,
.desk-frame .ann-trail {
  display: flex;
  align-items: center;
  gap: calc(var(--ui) * 4px);
}
.desk-frame .ann-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-frame .ann-tbutton {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ui) * 5px);
  height: calc(var(--ui) * 28px);
  padding: 0 calc(var(--ui) * 12px);
  border: 0;
  border-radius: 9999px;
  background: rgb(0 0 0 / 0.06);
  color: rgb(0 0 0 / 0.85);
  font: 500 calc(var(--ui) * 13px) / 1 var(--desk-face);
  white-space: nowrap;
  cursor: default;
}
.desk-frame .ann-tbutton:hover {
  background: rgb(0 0 0 / 0.1);
}
.desk-frame .ann-tbutton .desk-icon {
  font-size: calc(var(--ui) * 13px);
}
.desk-frame .ann-tbutton.is-prominent {
  background: var(--desk-accent);
  color: #fff;
  font-weight: 600;
}
.desk-frame .ann-tbutton.is-prominent:hover {
  background: color-mix(in srgb, var(--desk-accent), #000 12%);
}

.desk-frame .ann-content {
  position: relative;
  flex: 1;
  min-height: 0;
}
.desk-frame .ann-stage {
  position: absolute;
  inset: 0;
}
/* The picture: square-cornered, the 0.5 pt picture border, the in-window card shadow. */
.desk-frame .ann-picture {
  position: absolute;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.1),
    0 calc(var(--ui) * 4px) calc(var(--ui) * 10px) rgb(0 0 0 / 0.12);
  background: #fff;
}
.desk-frame .ann-picture .ann-canvas[data-tool="select"] {
  cursor: default;
}
.desk-frame .ann-picture .ann-canvas[data-tool="text"] {
  cursor: text;
}

/* The rail stands 12 pt from the left, centered above the capsule's 62 pt band. */
.desk-frame .ann-rail-slot {
  position: absolute;
  top: 0;
  bottom: calc(var(--ui) * 62px);
  left: calc(var(--ui) * 12px);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.desk-frame .ann-rail {
  flex-direction: column;
  width: calc(var(--ui) * 42px);
  max-height: calc(100% - var(--ui) * 24px);
  overflow-y: auto;
  scrollbar-width: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .desk-frame .ann-style.is-arriving,
  .desk-frame .ann-suggest {
    animation: none;
  }
}

@media (forced-colors: active) {
  .desk-frame .ann-bar,
  .desk-frame .ann-rail,
  .desk-frame .ann-style,
  .desk-frame .ann-window {
    border: 1px solid CanvasText;
  }
  .desk-frame .ann-chip[aria-pressed="true"],
  .desk-frame .ann-cchip[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
  .desk-frame .ann-dot[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
  .desk-frame .ann-dot::before {
    forced-color-adjust: none;
  }
  .desk-frame .ann-suggest,
  .desk-frame .ann-suggest::after {
    border-color: Highlight;
  }
  .desk-frame .ann-chip:focus-visible,
  .desk-frame .ann-cchip:focus-visible,
  .desk-frame .ann-dot:focus-visible,
  .desk-frame .ann-textchip:focus-visible,
  .desk-frame .ann-tbutton:focus-visible {
    outline-color: Highlight;
  }
}