/* UI-LAB tablet variant v40 -- HIS SKETCH ON v20: "what if we turn the free
   wallpapers into part of the left-side menus? and we take the exhibit line
   and turn it into a square in the middle ... the exhibits would be at the
   bottom centered as part of that. they would be able to use the arrows and
   switch or go to all of the exhibits". So: menu = Wall of Shame · Photo ·
   Tips · Free Wallpapers (left panel); the middle is a SQUARE panel with the
   exhibit's card, ‹ n of 16 ›, GO TO while browsing, and ALL EXHIBITS at its
   foot; the controls in their panel on the right. Built on v19 (the card) +
   v20 (the panels). v19's notes follow.
   UI-LAB tablet variant v19 -- v11 (his pick: menu left, WALK · LOOK · TURN
   AROUND right, the plate on top, GO TO) in the MUSEUM'S OWN SKIN.
   Senzu, on v11: "i like this i really do but it doesnt fit the style and
   theme of the marketplace in the tablet and also not the style of things
   here [the Exhibits screen, a Con's tablet, the Wall of Shame] ... i want it
   to look like them, same theme and styles and rules".
   So: v11's places, part for part, and NOT ONE MATERIAL OF ITS OWN. Every
   surface is museum.css's: `.controls .btn` (the dark surface, the thin green
   line, 6px corners), `#saleBtn` (the one green-ringed key), `.btn--offer`
   (FREE WALLPAPERS! as the Exhibits screen shows it), `.con__buy` (the one
   solid green action, GO TO), `.controls__hall` + `.controls__count` (the
   name in neon caps, the facts dim -- the Con tablet's own header). No slab,
   no plastic, no screws, no bevel, no glow of ours. Scope as v5-v17: every
   rule repeats museum.css's `.controls[data-ui="3"]` chain, excludes the
   frozen halls screen, the studio and the Con-facing tablet; no transform. */

body[data-tablet="v40"] {
  --v40-pad: 120px;             /* the look circle */
  --v40-arm: 34px;              /* one arm of its cross */
  --v40-band: calc((var(--v40-pad) - var(--v40-arm)) / 2);
  --v40-half: calc(var(--v40-arm) / 2);
  --v40-walk: 44px;             /* the walk rocker's width */
  --v40-rocker: 30px;           /* TURN AROUND, a .btn's own height */
  /* ═══ WHAT A FINGER REACHES, SEPARATE FROM WHAT IS DRAWN (#442) ═══════════
     Every var above sizes the PICTURE -- the ring, its arms, the rocker. These
     four size the GRID CELL each control sits in, which is what the browser
     hit-tests. On the desktop they are the drawn sizes exactly, so this block
     changes nothing there; the phone block at the foot of this file pulls the
     cells out past the picture, which is the only way a 44px target fits round
     a ring that a phone's `zoom` has already shrunk to 82px across.
     WHY NOT JUST DRAW IT BIGGER: fitGlass (tablet-v40.js) sets the glass's zoom
     to (glass width / the row's natural width), so every px added to this pad
     comes straight back off the zoom -- and off his menu's type with it.
     Measured at 390x844, not reasoned: a ring whose every zone is a true 44
     square puts the zoom at 0.589, his menu at 98.9px wide and its words at
     8.2px. They are 143px and 11.9px today.
     `--v40-overx/y` is how far each cell now stands proud of the drawn ring, so
     the arms below stay pinned to the picture rather than stretching with the
     cell. Both are 0 wherever the cells equal the drawing. */
  --v40-hitx: var(--v40-band);      /* the width of the LEFT / RIGHT zone */
  --v40-hity: var(--v40-band);      /* the height of the UP / DOWN zone */
  --v40-hub: var(--v40-arm);        /* the hub cell, across */
  --v40-hubrow: var(--v40-arm);     /* the hub cell, down -- the turn zones' height */
  --v40-overx: calc((2 * var(--v40-hitx) + var(--v40-hub) - var(--v40-pad)) / 2);
  --v40-overy: calc((2 * var(--v40-hity) + var(--v40-hubrow) - var(--v40-pad)) / 2);
  --v40-menu: 186px;            /* a menu key */
  --v40-card: 300px;
  --v40-card-h: 96px;         /* taller than the list's 66px: more of the room's wall */            /* the exhibit's card, the Exhibits screen's own, as wide as the middle allows */
}
/* Held so the plate, four menu keys and the controls are on screen; measured
   at 1600x900 (TURN AROUND's foot is the lowest thing). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) { --held-show: 0.67; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall).is-help { --held-show: 0.84; }

/* ---- the glass: museum's own, only laid out as v11 ---------------------- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass {
  display: grid;
  /* menu . room . the controls */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  column-gap: 14px;
  row-gap: 0;
  align-content: start;
  padding: 8px 14px 10px;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #pull {
  grid-area: 1 / 1 / 2 / -1;
  margin: -2px 0 8px;
}

/* ---- the plate is the exhibit's own CARD, in the middle of the glass ---
   (tablet-v40.js): ‹ [the Exhibits screen's card for this room] › with
   "EXHIBIT 1 OF 16" under it and GO TO under that while browsing. The card
   is museum's .map__item, untouched -- its wall, skin, name, count, green
   ring + HERE when it is your room. The middle column, rows 3-6, so it sits
   level with the menu and the controls and nothing is empty. The old plate's
   name, count and chip stay in the DOM, hidden. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  grid-area: 3 / 2 / 7 / 3;
  position: relative;
  display: grid;
  /* The card across the whole width the middle column has (257px at 1600x900,
     less than card + two keys side by side, measured: the keys hid behind
     it), ‹ › under it either side of "EXHIBIT 1 OF 16", GO TO under those;
     FREE WALLPAPERS! (a glass item, the same cell) at the foot, so the
     column is as tall as the menu beside it. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto 30px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 1px solid var(--tab-line);
  border-radius: 8px;
  background: var(--tab-surface);
  overflow: hidden;                 /* the full-bleed card is clipped to the rounded box */
  grid-template-areas:
    "card card card"
    "prev pos  next"
    ".    go   .   ";
  column-gap: 8px;
  row-gap: 6px;
  align-content: end;
  justify-content: center;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0;                       /* the card IS the box now -- no dead strip under it (S654) */
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where :is(.controls__hall, .controls__count, .v40-chip) { display: none !important; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step {
  min-width: 0;
  width: 40px;
  padding: 5px 0;
  font-size: 20px;
  line-height: 1;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--prev { grid-area: prev; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--next { grid-area: next; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step .btn__icon { font-size: inherit; line-height: 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot { position: absolute; inset: 0; z-index: 0; display: block; width: auto; max-width: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { width: 100%; height: 100%; cursor: pointer; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos {
  grid-area: pos;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tab-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* GO TO <exhibit> ›: the museum's one solid green action (.con__buy, "Buy it"). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 0.3rem;
  background: var(--tab-neon);
  color: #06140a;
  box-shadow: 0 0 10px var(--tab-glow);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go[hidden] { display: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go:hover { background: #8dffa0; border-color: transparent; color: #06140a; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go:is(:active, .is-down) { background: #8dffa0; border-color: transparent; }
/* The frozen halls screen, the Wall of Shame and the Con-facing tablet keep
   their own plate: nothing of this reaches them. */
body[data-tablet="v40"] .controls:is(.is-halls, .is-wall) :is(.v40-step, .v40-chip, .v40-pos, .v40-go, .v40-slot),
body[data-tablet="v40"].is-facing :is(.v40-step, .v40-chip, .v40-pos, .v40-go, .v40-slot) { display: none !important; }

/* ---- the menu: four of the tablet's own keys, stacked, icon then word ---
   The keys the Exhibits screen shows across its top (◀ Back · Wall of Shame ·
   Photo · ? Tips), one under the other, all one width, words to the left.
   Wall of Shame keeps museum's green ring (#saleBtn), Tips its open state. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps { display: contents; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapClose { display: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn { grid-area: 3 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn { grid-area: 4 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn { grid-area: 5 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn { grid-area: 6 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: var(--v40-menu);
  min-width: 0;
  margin: 0 0 6px;
  text-align: left;
  white-space: nowrap;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn { margin-bottom: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#mapBtn, #saleBtn, #photoBtn, #helpBtn) .btn__icon {
  display: inline-block;   /* design 3 hides the three glyphs (museum.css); shown here */
  width: 18px;
  font-size: 0.8em;
  line-height: 1;
  text-align: center;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#mapBtn, #saleBtn, #photoBtn, #helpBtn) .btn__word { display: inline; white-space: nowrap; }

/* ---- FREE WALLPAPERS!: museum's own .btn--offer, bottom centre --------- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn {
  width: var(--v40-menu);
  min-width: 0;
  justify-content: flex-start;
  margin: 0;
  font-size: 15px;
  text-align: left;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn .btn__word { padding-left: 0; font-size: 13px; }   /* at 15px + the icon column it ran past the key (measured) */
/* ALL EXHIBITS: the old Exhibits key, at the foot of the square, centred. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn {
  grid-area: 3 / 2 / 7 / 3;
  justify-self: center;
  align-self: end;
  width: fit-content;
  min-width: 0;
  margin: 0 0 14px;
}

/* ---- the controls: v9's shapes, museum's surfaces ------------------------
   WALK rocker | LOOK circle, TURN AROUND under it -- every key a .controls
   .btn: the dark surface, the thin green line, 6px corners; moving, museum's
   own lit state (.is-on) on the zone that moves you. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad {
  grid-area: 3 / 3 / 7 / 4;
  justify-self: end;
  align-self: end;
  display: grid;
  /* The cells, not the drawing (see --v40-hitx at the top of this file). */
  grid-template-columns: var(--v40-walk) 14px var(--v40-hitx) var(--v40-hub) var(--v40-hitx);
  grid-template-rows: auto var(--v40-hity) calc(var(--v40-hubrow) / 2) calc(var(--v40-hubrow) / 2) var(--v40-hity) var(--v40-rocker);
  grid-template-areas:
    "wl   .  ll   ll   ll   "
    "fwd  .  up   up   up   "
    "fwd  .  left hub  right"
    "back .  left hub  right"
    "back .  down down down "
    ".    .  flip flip flip ";
  gap: 0;
  margin: 0;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap {
  align-self: end;
  padding-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--tab-dim);
  pointer-events: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap--walk { grid-area: wl; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap--look { grid-area: ll; }
/* The circle: one .btn surface, round. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad::before {
  content: "";
  grid-area: 2 / 3 / 6 / 6;
  /* Centred in its area, because the cells can now be wider than the ring. */
  justify-self: center;
  align-self: center;
  width: var(--v40-pad);
  height: var(--v40-pad);
  box-sizing: border-box;
  border: 1px solid var(--tab-line);
  border-radius: 50%;
  background: var(--tab-surface);
  pointer-events: none;
}
/* The hub, where the four arms meet. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad::after {
  content: "";
  grid-area: hub;
  z-index: 2;
  justify-self: center;
  align-self: center;
  width: var(--v40-arm);
  height: var(--v40-arm);
  box-sizing: border-box;
  border: 1px solid var(--tab-line);
  background: var(--tab-surface-hi);
  pointer-events: none;
}
/* The four look zones: each its own box over its band of the circle; the arm
   of the cross drawn inside it as a .btn surface. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight) {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tab-ink);
  clip-path: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookUp { grid-area: up; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookDown { grid-area: down; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnLeft { grid-area: left; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnRight { grid-area: right; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight)::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--tab-line);
  background: var(--tab-surface-hi);
  pointer-events: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookUp::before { left: calc(50% - var(--v40-half)); top: calc(var(--v40-overy) + 9px); width: var(--v40-arm); bottom: calc((var(--v40-arm) - var(--v40-hubrow)) / 2 - 1px); border-radius: 6px 6px 0 0; border-bottom: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookDown::before { left: calc(50% - var(--v40-half)); top: calc((var(--v40-arm) - var(--v40-hubrow)) / 2 - 1px); width: var(--v40-arm); bottom: calc(var(--v40-overy) + 9px); border-radius: 0 0 6px 6px; border-top: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnLeft::before { top: calc((var(--v40-hubrow) - var(--v40-arm)) / 2); bottom: calc((var(--v40-hubrow) - var(--v40-arm)) / 2); left: calc(var(--v40-overx) + 9px); right: calc((var(--v40-arm) - var(--v40-hub)) / 2 - 1px); border-radius: 6px 0 0 6px; border-right: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnRight::before { top: calc((var(--v40-hubrow) - var(--v40-arm)) / 2); bottom: calc((var(--v40-hubrow) - var(--v40-arm)) / 2); left: calc((var(--v40-arm) - var(--v40-hub)) / 2 - 1px); right: calc(var(--v40-overx) + 9px); border-radius: 0 6px 6px 0; border-left: 0; }
/* The arrow, out at the end of its arm. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight) .btn__icon {
  position: absolute;
  z-index: 1;
  display: block;
  font-size: 12px;
  line-height: 14px;
  pointer-events: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookUp .btn__icon { left: 0; right: 0; top: calc(var(--v40-overy) + 16px); text-align: center; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookDown .btn__icon { left: 0; right: 0; bottom: calc(var(--v40-overy) + 16px); text-align: center; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnLeft .btn__icon { left: calc(var(--v40-overx) + 17px); top: calc(50% - 7px); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnRight .btn__icon { right: calc(var(--v40-overx) + 17px); top: calc(50% - 7px); }
/* Under the pointer and pressed: museum's own .btn states, on the arm; moving: museum's lit key. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight):is(:hover, :active, .is-down, .is-on) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight):hover::before { background: rgba(243, 231, 211, 0.10); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight):is(:active, .is-down)::before { border-color: var(--tab-neon); background: var(--tab-surface-hi); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight).is-on { color: #06170d; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight).is-on::before {
  border-color: var(--tab-neon);
  background: color-mix(in srgb, var(--tab-neon) 26%, var(--tab-surface));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--tab-neon) 55%, transparent);
}
/* WALK: two .btn keys joined into one rocker, #fwd over #back. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  clip-path: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #fwd { grid-area: fwd; border-radius: 6px 6px 0 0; border-bottom-width: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #back { grid-area: back; border-radius: 0 0 6px 6px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back) .btn__icon { display: block; font-size: 12px; line-height: 1; pointer-events: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back) .btn__word { display: none; }
/* TURN AROUND: one .btn, the circle's width, under it. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip {
  grid-area: flip;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--v40-pad);
  height: var(--v40-rocker);
  min-width: 0;
  min-height: 0;
  margin: 8px 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip .btn__word { display: inline; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip .btn__icon { display: none; }

/* Whatever app is open (the tips' help sheet) sits under the controls. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(.map, .help) { grid-area: 7 / 1 / 8 / -1; margin-top: 8px; }

/* ---- the two side panels (v20's): the museum's card surface behind the
   menu and behind the controls, drawn by the glass's own ::before/::after
   (design 3 leaves them unused; museum.css had given them height 0 as line
   breaks -- overridden). The middle square is its own panel above. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass { isolation: isolate; column-gap: 20px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after {
  content: "";
  display: block;
  grid-area: 3 / 1 / 7 / 2;
  z-index: -1;
  height: auto;
  flex-basis: auto;
  align-self: stretch;
  justify-self: stretch;
  margin: -10px -12px -10px -12px;
  border: 1px solid var(--tab-line);
  border-radius: 8px;
  background: var(--tab-surface);
  pointer-events: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after { grid-area: 3 / 3 / 7 / 4; }
/* The menu fills its panel's height: four rows spread over the square's height. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) { align-self: center; margin: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad { align-self: center; }

/* =====================================================================
   v40 -- Senzu on v22: "reduce the spaces between the left-side buttons in
   the menu. put the tips at the top and the photo at the bottom and also now
   in the center. i want the whole center cube to be taking up the way the wall
   looks and for the naked body to just be there pretty big, and then all
   exhibits at the bottom ... everything is too big and we make everything
   more compact so the conmen tablet would be way lower ... because you keep
   making things bigger and then it keeps going higher ... i'm honestly
   starting to hate the fact that we made it responsive while walking. i don't
   think we should do that anymore" -- and, mid-build: the grabbable stick.
   Everything below overrides v22's rules above (same selectors, later). */
body[data-tablet="v40"] {
  --v40-pad: 96px;              /* the look circle, 120 before */
  --v40-arm: 30px;
  --v40-walk: 36px;
  --v40-rocker: 26px;
  --v40-menu: 156px;            /* a menu key, 186 before */
  --v40-square: 176px;          /* the exhibit's square */
}
/* Held as low as the compact parts allow; measured at 1600x900. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) { --held-show: 0.53; }

/* ---- the glass, tighter -------------------------------------------- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass { column-gap: 16px; padding: 6px 12px 8px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #pull { margin: -2px 0 4px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after { margin: -6px -8px; }

/* ---- the menu: Tips - Wall of Shame - Free Wallpapers - Photo, tight ---- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn { grid-area: 3 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn { grid-area: 4 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn { grid-area: 5 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn { grid-area: 6 / 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) {
  align-self: center;
  margin: 2px 0;              /* 4px between keys; they were spread over the panel */
  padding: 5px 10px;
  font-size: 13px;
  gap: 8px;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn) .btn__icon { width: 16px; font-size: 0.8em; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn .btn__word { font-size: 12px; }

/* ---- the square IS the exhibit: its wall fills it, the skin big, the
   words over it, the arrows and ALL EXHIBITS at its foot ---------------- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  width: var(--v40-square);
  height: var(--v40-square);
  aspect-ratio: auto;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--tab-line);
  background: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto 30px;
  grid-template-areas:
    "card card card"
    "prev pos  next"
    ".    go   .   ";
  row-gap: 0;
  align-content: end;
}
/* The card (museum's .map__item, cloned) is the square's floor: the whole box. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  max-width: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  padding: 0;
}
/* The naked skin, big. The picture is 256x256 with the body on rows 16..241
   (measured), so at the square's height the body was a third of it. Drawn at
   1.5x the square and sunk 72px, the head sits at the top edge and the chest
   fills the middle; the legs go under the foot's scrim, as the Exhibits card
   crops them. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__skin {
  width: auto;
  height: 115%;                /* 150% showed the head alone (looked at) */
  max-width: none;
  bottom: -18px;
  object-fit: contain;
  object-position: top center;
}
/* The name top left, the count under it (the foot is taken). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__name { top: 6px; left: 9px; font-size: 13px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__count { top: 24px; bottom: auto; right: auto; left: 9px; }
/* The foot: a dark scrim so the row reads on any wall. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66px;
  z-index: 0;
  background: linear-gradient(to top, rgba(4, 8, 5, 0.92) 55%, rgba(4, 8, 5, 0));
  pointer-events: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where :is(.v40-step, .v40-pos, .v40-go) { position: relative; z-index: 1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step { width: 34px; padding: 4px 0; font-size: 18px; margin: 0 4px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { font-size: 11px; letter-spacing: 0.12em; }
/* GO TO pops up over the picture while browsing (the foot belongs to ALL EXHIBITS). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go {
  grid-area: auto;
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 2;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: 13px;
}
/* ALL EXHIBITS: at the square's foot, over the scrim. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn {
  z-index: 3;
  margin: 0 0 6px;
  padding: 4px 12px;
  font-size: 12px;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn .btn__icon { display: inline-block; font-size: 0.8em; margin-right: 2px; }

/* ---- the controls, smaller; the hub is the stick ---------------------- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad { align-self: center; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap { font-size: 8px; padding-bottom: 3px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip { margin-top: 6px; font-size: 10px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight) .btn__icon { font-size: 10px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookUp .btn__icon { top: calc(var(--v40-overy) + 11px); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #lookDown .btn__icon { bottom: calc(var(--v40-overy) + 11px); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnLeft .btn__icon { left: calc(var(--v40-overx) + 12px); top: calc(50% - 6px); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #turnRight .btn__icon { right: calc(var(--v40-overx) + 12px); top: calc(50% - 6px); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad::after { display: none; }   /* the hub is #lookStick now */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick {
  grid-area: hub;
  position: relative;
  z-index: 3;
  /* The hub CELL can be bigger than the knob now (--v40-hub), so say where in
     it the knob sits; `left`/`top` (the push) still offset from here. */
  justify-self: center;
  align-self: center;
  width: var(--v40-arm);
  height: var(--v40-arm);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border-color: var(--tab-neon);
  background: var(--tab-surface-hi);
  box-shadow: inset 0 0 0 3px var(--tab-surface), 0 0 0 1px rgba(93, 255, 120, 0.25);
  cursor: grab;
  touch-action: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick.is-grabbed {
  cursor: grabbing;
  background: color-mix(in srgb, var(--tab-neon) 26%, var(--tab-surface));
}

/* ---- NOTHING REACTS TO WALKING ANY MORE. museum.js still marks the moving
   key .is-on (and tablet-v40.js's tilt watch marks the up/down zones); here
   the mark draws nothing: a key looks the same walking as standing. ------- */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .btn.is-on,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back).is-on,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip.is-on {
  border-color: var(--tab-line);
  background: var(--tab-surface);
  color: var(--tab-ink);
  box-shadow: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight).is-on { color: var(--tab-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight).is-on::before {
  border-color: var(--tab-line);
  background: var(--tab-surface-hi);
  box-shadow: none;
}

/* =====================================================================
   v40 -- v23 (his sketch, compact, the stick, nothing lights while walking)
   with ONLY the three faults the reference designer named fixed, nothing he asked for removed.
   Senzu, on the five that replaced it: "i hate all of them u drifted too far".
   1. The giant head: the body is drawn at the Exhibits card's own proportion
      (a small figure standing at the foot of the wall, cropped at the chest by
      the foot rows), not 1.15x the square. The wall still fills the cube.
   2. Three boxes that did not line up: the menu panel, the square and the
      controls panel now share one top edge, one height and one 8px radius.
   3. Green on five things: the knob's rim is a hairline, not neon; the green
      left is Wall of Shame's ring, the card's own HERE, and GO TO while
      browsing (the one action then). */

/* 1. the figure at the card's own scale, on the wall */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__skin {
  width: auto;
  height: 118px;                /* 68x52 on the 66px card = the body's chest-up crop; scaled to the square's 176 */
  max-width: none;
  bottom: 44px;                 /* the chest sits just above the foot's scrim; legs under it, as the card crops them */
  object-fit: contain;
  object-position: top center;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__name { top: 7px; left: 10px; font-size: 13px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__count { top: 25px; left: 10px; }

/* 2. one top edge, one height, one radius for the three groups */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass { align-items: start; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after {
  margin: 0;                    /* the panels are the cells themselves, no bleed: their tops are the row's top */
  border-radius: 8px;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where { align-self: start; border-radius: 8px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { border-radius: 8px; }
/* The menu: four keys from the panel's top, 4px apart, 8px in from its edges. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) { align-self: start; margin: 0 8px 4px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn { margin-top: 8px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) { width: calc(var(--v40-menu) - 16px); }
/* The controls: from the panel's top too, 8px in. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad { align-self: start; margin: 8px 8px 0 8px; }
/* All three panels stand exactly the square's height. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after { height: var(--v40-square); align-self: start; }

/* 3. the knob: a hairline rim, the museum's, not neon */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick {
  border-color: var(--tab-line);
  box-shadow: inset 0 0 0 3px var(--tab-surface);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick.is-grabbed { border-color: var(--tab-ink); }
/* The stick gets its word (every wordless control, the reference designer's one shared finding): the LOOK caption already stands over it; the knob says "drag" until first grabbed. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap--look::after { content: " · drag"; letter-spacing: 0.06em; text-transform: none; font-weight: 400; }

/* The wall fills the WHOLE cube (his ask on v22; v23 never delivered it):
   an absolutely placed grid item takes its own grid AREA as its box, so with
   grid-area "card" the slot covered the top row only (measured: 174x116 of
   a 176x176 square, the head cut above it). Spanning every row and column
   makes inset:0 mean the square. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot { grid-area: 1 / 1 / -1 / -1; }

/* =====================================================================
   v40 -- v24 with the MENU EXACTLY AS v11 HAD IT. Senzu, on v24: "i still
   dont like this , and the menues here are not looking the exact same way
   they did in the menue that i did like". v11's rows, verbatim (tablet-v11.css,
   "the four keys as a MENU"): flat rows, icon then word, 11px caps
   letterspaced, a hairline under each, the lit row marked by a green bar at
   its left edge -- not pills. Only the ids differ: the menu here is Tips ·
   Wall of Shame · Free Wallpapers · Photo (Exhibits lives in the square).
   v11's ink/dim/plastic tokens are restated so the rows read identically. */
body[data-tablet="v40"] {
  --v40-ink: #d3dbd6;
  --v40-ink-dim: #8e9893;
  --v40-plastic-hi: #2d322e;
  --v40-plastic-down: #0f1210;
  --v40-menu: 182px;            /* v11's row width */
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: start;
  gap: 10px;
  width: var(--v40-menu);
  min-width: 0;
  height: 30px;
  min-height: 0;
  margin: 0 0 0 4px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);   /* a rule under each row */
  color: var(--v40-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn { margin-top: 10px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn { box-shadow: none; }   /* the last row has nothing under it */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) .btn__icon {
  display: inline-block;
  flex: none;
  width: 18px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: var(--v40-ink-dim);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn .btn__icon { font-weight: 700; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) .btn__word { display: inline; white-space: nowrap; padding: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
/* FREE WALLPAPERS! as a row like the others: v11 gave every row an icon column; this one has no glyph, so its word starts where the others' do. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #wallBtn .btn__word { padding-left: 28px; }
/* The one lit key in every design, where every Con is (museum.css); and Tips
   while they are open: green word, green bar at the row's left edge. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"] { color: var(--tab-neon); background: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn .btn__icon,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"] .btn__icon { color: var(--tab-neon); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--tab-neon);
  pointer-events: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn):hover { background: var(--v40-plastic-hi); border-color: transparent; color: inherit; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn):is(.is-down, :active, [aria-expanded="true"]) {
  background: var(--v40-plastic-down);
  border-color: transparent;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* ===== v40 -- the CENTRE'S FOOT, on v25. Senzu: "my problem was that there
   was a part in the center that's just super ugly. at the bottom, the exhibits
   and all exhibits, and also it can fill all of the center. it doesn't need
   that much space i don't think at least". So: the picture (wall, figure at
   the card's scale, name, count, HERE) takes the TOP of the panel and nothing
   is laid over it; under it, two flat rows in the menu's own style (v11's
   rows: small caps, hairline, no boxes): ‹ EXHIBIT 1 OF 16 › and ALL EXHIBITS.
   The panel stays 176 tall: picture 118 + two rows of 29. GO TO pops over
   the picture while browsing, as before. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  grid-template-rows: 118px 29px 29px;
  grid-template-areas:
    "card card card"
    "prev pos  next"
    "all  all  all ";
  align-content: start;
  padding: 0;
  overflow: hidden;
  background: var(--tab-surface);
}
/* The picture: the top 118px only. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot {
  position: absolute;
  inset: 0 0 auto 0;
  height: 118px;
  grid-area: card;
  z-index: 0;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { border-radius: 8px 8px 0 0; height: 118px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__skin {
  width: auto;
  height: 104px;               /* the card's own chest-up crop, scaled to the picture */
  max-width: none;
  bottom: -18px;
  object-fit: contain;
  object-position: top center;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where::after { display: none; }   /* no scrim: nothing sits on the picture */
/* Row 1: ‹ EXHIBIT 1 OF 16 › as a flat row -- the arrows are bare glyphs in the row's ink, no boxes. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos {
  grid-area: pos;
  align-self: center;
  justify-self: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v40-ink);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step {
  align-self: stretch;
  justify-self: stretch;
  width: 34px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--v40-ink-dim);
  font-size: 18px;
  line-height: 1;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:hover { background: var(--v40-plastic-hi); color: var(--v40-ink); border-color: transparent; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:is(:active, .is-down) { background: var(--v40-plastic-down); color: var(--tab-neon); box-shadow: none; }
/* A hairline over each of the two rows (the menu's rule). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos::before { content: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--prev { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--next { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { box-shadow: none; }
/* Row 2: ALL EXHIBITS as a menu row (the same row the left menu uses), full width of the panel. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn {
  grid-area: 3 / 2 / 7 / 3;
  align-self: end;
  justify-self: stretch;
  width: var(--v40-square);
  height: 29px;
  min-height: 0;
  margin: 0;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--v40-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 3;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn .btn__icon { display: inline-block; width: 18px; font-size: 14px; color: var(--v40-ink-dim); margin: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:hover { background: var(--v40-plastic-hi); border-color: transparent; color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:is(:active, .is-down) { background: var(--v40-plastic-down); border-color: transparent; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9); }
/* GO TO over the picture while browsing, centred on it. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go { top: 59px; }
/* ALL EXHIBITS reads like the menu rows: icon then word from the left (the icon had sat alone at the edge with the word centred). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn { justify-content: flex-start; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn .btn__icon { margin-right: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn .btn__word { padding: 0; }
/* The key is inside the square now (tablet-v40.js): its own row, full width. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn { grid-area: all; width: auto; justify-self: stretch; align-self: stretch; height: auto; position: relative; }
body[data-tablet="v40"] .controls:is(.is-halls, .is-wall) #mapBtn, body[data-tablet="v40"].is-facing #mapBtn { display: none !important; }

/* ===== v40 -- THE CUBE IS THE PICTURE, on v28. Senzu: "i don't like the
   center. i feel like it can be wider and fill the gaps. also i want the
   buttons to be transparent so we will see the body, the wall, and
   everything. it would be like everything is part of the cube so we're
   showing it off and then the name would be at the top". So: the square
   stretches across the whole middle (menu edge to controls edge), the wall
   and the body fill ALL of it top to bottom, the two rows at the foot are
   see-through over the picture (text only, a hairline over each), and the
   name + count stay at the top. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  width: auto;
  justify-self: stretch;
  grid-template-rows: 1fr 29px 29px;
  background: none;
}
/* The picture: the whole box, every row. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot {
  inset: 0;
  height: auto;
  grid-area: 1 / 1 / -1 / -1;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { height: 100%; border-radius: 8px; }
/* The body: whole, standing on the wall, at the card's proportion to the square's height. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__skin {
  height: 112px;
  bottom: 60px;               /* the bust ends where the rows begin: the rows sit on the wall, not on the chest */
  object-position: bottom center;
}
/* The two rows: see-through, over the picture. Text gets a shadow so it reads on the wall. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where :is(.v40-pos, .v40-step),
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn {
  position: relative;
  z-index: 2;
  background: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn { width: auto; grid-area: all; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:hover,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:hover { background: rgba(255, 255, 255, 0.08); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:is(:active, .is-down),
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:is(:active, .is-down) { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
/* GO TO: the middle of the picture. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go { top: 50%; }

/* ===== v40 -- THE SCREEN IS ONE SURFACE, on v29. Senzu: "the problem is
   that our background is just black when it should all be wrapped in a
   background that's the color of the boxes; and then we can embed inside
   with different coloring and stuff like that the way it should be. that's
   what's missing". So: the whole glass is painted in the boxes' colour
   (--tab-surface, opaque), and the three areas inside it -- the menu, the
   picture, the controls -- are set INTO it: a darker recessed fill, a soft
   inner shadow, a hairline of light on their edge. Nothing else moves. */
body[data-tablet="v40"] {
  --v40-screen: #242925;                    /* the boxes' plastic (the rows' hover grey, a shade under) */
  --v40-well: rgba(0, 0, 0, 0.5);           /* an area sunk into the screen */
  --v40-well-edge: rgba(255, 255, 255, 0.06);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass {
  background: var(--v40-screen);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* The menu and the controls: wells in the surface, not boxes on black. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after {
  background: var(--v40-well);
  border: 1px solid var(--v40-well-edge);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}
/* The picture: the same well, its art inside the rim. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  border: 1px solid var(--v40-well-edge);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { border-radius: 7px; }

/* ===== v40 -- X's GRAMMAR, on v36. Senzu: "this still feels very weird and
   bad. i can't explain it" ... "can we make it feel more like [X] somehow?".
   Read off his X screenshot, what X does that the tablet did not:
   1. ONE surface, black. Its cards are the SAME black, set off by a 1px grey
      hairline (#2f3336) and a 16px radius -- never a darker fill, never an
      inner shadow, never a glowing border.
   2. ONE type voice: sentence case, 15px, regular; bold ONLY for the current
      item and a card's title; muted grey (#71767b) for counts and captions.
      No 11px letter-spaced caps anywhere.
   3. ONE accent, used once (its blue underlines the open tab). Here: green
      on the lit row's bar and HERE. Nothing else is green.
   4. Air: rows ~44px tall, 16px in from the edge, no divider lines.
   Same parts, same places as v36. */
body[data-tablet="v40"] {
  --v40-bg: #000000;
  --v40-hair: #2f3336;
  --v40-ink: #e7e9ea;
  --v40-dim: #71767b;
  --v40-hover: #16181c;
  --v40-menu: 168px;
}
/* 1. the surface and its cards */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass { background: var(--v40-bg); box-shadow: none; border-radius: 12px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  background: var(--v40-bg);
  border: 1px solid var(--v40-hair);
  border-radius: 16px;
  box-shadow: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { border-radius: 15px; border-color: transparent !important; box-shadow: none !important; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull { color: var(--v40-dim); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull__word { font-size: 13px; letter-spacing: 0; text-transform: none; }
/* THE POINTER TO HELP (#274). Senzu: "we need, like, maybe some CTA to tell them to click Help to see
   the tutorial." After the cue sentence, same size, same grey, a middle dot between them; the word
   Help in the ink colour so it reads as the name of the row on the left. It is a button (it presses
   Help, museum.js) drawn as text: no box, no fill, an underline on hover. Walking tablet only --
   this selector already excludes the halls screen and the Wall. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull__help {
  display: inline;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
/* ONLY THE HELP LINE, CENTRED (S645). Senzu, striking out "↕ drag or scroll to see more" on the walking
   tablet: "remove that , keep just the 'Click help to see the tutorial' and center it perfectly there ,
   we dont need anything by its sides". Walking tablet only (this selector); the halls screen and the
   studio keep their own cue sentence. No dot before it any more: nothing stands beside it. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull { justify-content: center; text-align: center; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall):not(.has-tips) .pull__arrow,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall):not(.has-tips) .pull__word { display: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull__help { margin: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull__help b { font-weight: 700; color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .pull__help:hover { text-decoration: underline; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall).has-tips .pull__help { display: none; }   /* a tip owns the line while one is up */
/* 2. the menu: X's nav -- icon, word, sentence case, no rules between rows */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) {
  width: var(--v40-menu);
  height: 38px;
  margin: 0 0 0 6px;
  padding: 0 12px 0 14px;
  gap: 14px;
  border-radius: 9999px;
  box-shadow: none;
  color: var(--v40-ink);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn { margin-top: 8px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) .btn__icon { width: 20px; font-size: 17px; color: var(--v40-ink); font-weight: 400; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #wallBtn .btn__word { padding-left: 34px; font-size: 15px; text-transform: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn):hover { background: var(--v40-hover); box-shadow: none; color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn):is(.is-down, :active) { background: var(--v40-hover); box-shadow: none; }
/* the current item: bold, white, the green bar at its edge -- the one accent */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"] { color: var(--v40-ink); font-weight: 700; box-shadow: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn .btn__icon,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"] .btn__icon { color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"]::before { left: -6px; top: 10px; bottom: 10px; width: 3px; }
/* the picture's words: a card title, a muted count, sentence-case rows */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__name { top: 10px; left: 14px; font-size: 15px; font-weight: 700; color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__count { top: 30px; left: 14px; font-size: 13px; color: var(--v40-dim); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where { grid-template-rows: 1fr 32px 34px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--v40-dim); box-shadow: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step { width: 40px; font-size: 20px; color: var(--v40-ink); box-shadow: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:hover { background: rgba(255, 255, 255, 0.1); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn {
  height: 34px;
  padding: 0 14px;
  border-radius: 0 0 15px 15px;
  box-shadow: none;
  color: var(--v40-ink);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn .btn__icon { width: 20px; font-size: 15px; color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:hover { background: rgba(255, 255, 255, 0.1); }
/* GO TO: X's one solid button -- white pill, black word */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go { background: #eff3f4; color: #0f1419; border-color: transparent; border-radius: 9999px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go:hover { background: #d7dbdc; color: #0f1419; }
/* 3. the controls: hairline keys, no glow anywhere, captions in the muted grey */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back, #flip, .btn) {
  border-color: var(--v40-hair);
  background: var(--v40-bg);
  color: var(--v40-ink);
  box-shadow: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back, #flip, .btn):hover { background: var(--v40-hover); border-color: var(--v40-hair); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip { border-radius: 9999px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad::before { border-color: var(--v40-hair); background: var(--v40-bg); box-shadow: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick { border-color: var(--v40-hair); background: var(--v40-hover); box-shadow: inset 0 0 0 3px var(--v40-bg); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick.is-grabbed { border-color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--v40-dim); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-cap--look::after { content: " · drag"; }
/* the pad's arrow keys inside the ring, if any are drawn as keys */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#turnLeft, #turnRight, #lookUp, #lookDown) { border-color: transparent; background: none; color: var(--v40-ink); box-shadow: none; }
/* v40 fixes after the first shot: the ring's four arms were still green-tinted plastic; FREE WALLPAPERS! kept an older, more specific 12px rule. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight)::before { border-color: var(--v40-hair); background: var(--v40-bg); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight):is(:hover, :active, .is-down)::before { background: var(--v40-hover); border-color: var(--v40-hair); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#lookUp, #lookDown, #turnLeft, #turnRight) .btn__icon { color: var(--v40-ink); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn .btn__word { padding-left: 34px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn .btn__word { padding-left: 40px; }
/* The reference designer's pass on v40 (three fixes; his fix (b), rows on black under an inset picture, is NOT applied: Senzu asked in v29 for see-through rows so the wall and body show). */
/* (a) was `.pull__step { color: var(--v40-dim) }` -- the stepping arrows are gone (#274, museum.css). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { color: var(--v40-ink); }   /* (c) the way through 16 exhibits reads as a control, not a caption */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step { width: 34px; height: 34px; align-self: center; justify-self: center; border-radius: 9999px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:hover { background: rgba(255, 255, 255, 0.14); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad .v40-stick { background: var(--v40-hair); }   /* the knob was near-invisible on black */

/* ===== v40 -- ONE FOOT ROW, COMPACT, on v37. Senzu: "let's combine the
   exhibit arrows. let's just put the numbers and put the body all the way
   down. make it a tiny little bit bigger and let's just make the all
   exhibits button clickable ... it doesn't take up a whole row and it's not
   that big. everything is way nicer and compact and simple and we don't need
   that many pixels everywhere". So: the two rows become one -- ‹ 1 / 16 › on
   the left, small, and All exhibits as a real button (hairline pill) on the
   right; the bust stands on the picture's floor, a touch bigger; the square
   and the two panels beside it lose the row that went (176 -> 148), the menu
   rows tighten to fit. */
body[data-tablet="v40"] { --v40-square: 148px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  grid-template-columns: 30px auto 30px minmax(0, 1fr) auto;
  grid-template-rows: 1fr 34px;
  grid-template-areas:
    "card card card card card"
    "prev pos  next .    all ";
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot { grid-area: 1 / 1 / -1 / -1; }
/* the bust: on the floor, a little bigger */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__skin { height: 122px; bottom: 0; }
/* ‹ 1 / 16 › : small, left, one row */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step { width: 28px; height: 28px; font-size: 18px; margin: 0 0 0 4px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--next { margin: 0; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { font-size: 13px; font-weight: 700; padding: 0 2px; min-width: 40px; text-align: center; }
/* All exhibits: a button you can see is a button -- X's hairline pill -- at the row's right */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn {
  grid-area: all;
  align-self: center;
  justify-self: end;
  width: auto;
  height: 26px;
  margin: 0 8px 0 0;
  padding: 0 12px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 13px;
  font-weight: 700;
  text-shadow: none;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn .btn__icon { width: auto; font-size: 12px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); }
/* the menu tightens to the shorter panel: 4 rows x 34 + 8 = 148 */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #photoBtn, #helpBtn, #wallBtn) { height: 34px; font-size: 14px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn { margin-top: 6px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn .btn__word { font-size: 14px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn { background: #000; border-color: rgba(255, 255, 255, 0.5); }   /* solid: it sits over the body's shoulder and must read as a button on top of the picture */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn:hover { background: #16181c; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step { font-size: 22px; font-weight: 700; color: #fff; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step { font-size: 12px; font-weight: 400; }   /* the walk keys' arrows, same size */

/* ===== v40 -- FOUR CORRECTIONS on v38. Senzu:
   1. "i clearly said i don't want an 'only exhibits' button and i want the
      whole box to be clickable. when someone clicks on it, they just see the
      exhibits" -> the key is hidden; the box is the key (tablet-v40.js).
   2. "you put the arrow buttons at the far left side rather than one on the
      left side and one on the right side" -> ◀ at the box's left edge, ▶ at
      its right edge, mid-height; the page number small at the foot, centred
      ("the numbers of the pages, i honestly don't know" -- kept, small).
   3. "i also don't know why both the tips and the wall of shame on the left
      side are being highlighted" -> nothing in the menu is lit while walking:
      Tips' open-state bar and the Marketplace's standing bar both go.
   4. "the wall of shame text, let's just change that to marketplace. just in
      there, nowhere else" -> the word only (tablet-v40.js). */
/* 1. the box is the key */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #mapBtn { display: none !important; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where { cursor: pointer; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where:hover { border-color: rgba(255, 255, 255, 0.45); }
/* 2. arrows at the edges, mid-height; the number at the foot */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 22px;
  grid-template-areas: "card" "pos";
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot { grid-area: 1 / 1 / -1 / -1; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step {
  grid-area: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  margin: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  font-size: 11px;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--prev { left: 6px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--next { right: 6px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { grid-area: pos; align-self: end; justify-self: center; min-width: 0; padding: 0 0 4px; font-size: 12px; font-weight: 400; color: var(--v40-ink); }
/* 3. nothing lit in the menu while walking */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"] { font-weight: 400; color: var(--v40-ink); background: none; box-shadow: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #saleBtn::before,
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #helpBtn[aria-expanded="true"]::before { content: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) :is(#saleBtn, #helpBtn[aria-expanded="true"]):hover { background: var(--v40-hover); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos { justify-self: end; padding: 0 10px 4px 0; }   /* off the body: bottom-right corner */
/* GO TO in the bottom-left corner, off the skin and the wall. Senzu: "the go to button is hiding the skin as well as covering the background. maybe we can put it at the bottom left side". */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go { top: auto; left: 8px; bottom: 6px; transform: none; height: 26px; padding: 0 12px; font-size: 13px; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }   /* no green glow */
/* Go › in the top-right corner: HERE's own spot, the one place the skin never reaches. Senzu: "we need to find a better place for it because it's currently hiding the skin". */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-go { left: auto; bottom: auto; top: 8px; right: 8px; height: 26px; padding: 0 12px; }

/* ===== S645 -- THE BUST STANDS ON THE CARD'S BOTTOM EDGE, IN FRONT. Senzu, four
   screenshots of the card mid-walk: "i want the char to always be in the most
   front layer here in the tablet while walking and connected to the bottom so
   it looks good and not the way it is ... i dont like that we see the beam and
   then the char, it needs to be char starts at bottom with the beam but as a
   front layer ... apply to all halls".
   Measured: every one of the 15 skin pictures (traits/skin/*.webp, 256x256) has
   its body on rows 16..240 and 15 EMPTY rows under the bust's flat cut. With
   the picture 122px tall and bottom: 0 (v37), those empty rows put the cut
   7.15px above the card's edge, and the wall's dark skirting showed through
   the gap -- the "beam" under a floating bust. So the picture hangs 15/256 of
   its height below the edge: the cut lands ON the edge, in every hall, and the
   card's overflow: hidden clips the empty rows. Above every layer the wall
   draws (the card's gradient, its skirting), under nothing but the arrows,
   HERE and the count, which never reach the body's columns (42..213 of 256). */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card .map__skin {
  bottom: calc(-15 / 256 * 122px);
  z-index: 1;
}

/* ===== v40 -- SPACE TURNS YOU AROUND (tablet-v40.js, job 7). Senzu: "on the
   right side i want the turn-around to be triggered by the spacebar". No rule
   here: a drawn "Space" hint beside the word was tried and measured at
   1600x900 -- a 9px word squeezed "Turn Around" from 75px to 60px inside the
   96x26 key -- so the key's title/aria-label carry it and the right panel is
   as it was (undecided: "can we find some way to make that look better?"). */

/* ===== S633 -- A PHONE KEEPS THIS LAYOUT. Senzu, with the desktop tablet:
   "can u work on this in mobile ... i want the UI to stay like this / atm it
   gets fucked on mobile". Seventeen phone blocks had accumulated across the
   lab's rounds (v11 to v40, each re-laying the glass for a narrow screen: the
   card on a row of its own, the menu under it, the tablet raised to the top),
   and their sum was the screen he sent. All of them are gone. A phone now has
   the SAME grid as the desktop -- menu, the room's card, the controls, on one
   row -- drawn smaller with `zoom` (tablet-v40.js fitGlass: the row's natural
   width against the glass's), so nothing moves and nothing reflows. The card's
   square and the menu keys are a little narrower so the zoom stays as large
   as the glass allows; the walk keys, the look ring and the words scale with
   everything else. Held low like the desktop (locked, see museum.js
   walkLocked): the glass is cut just under TURN AROUND. */
@media (max-width: 620px) {
  /* THE DESKTOP'S PARTS, RE-STACKED (#329). Senzu: "these at the middle, it's, like, super hard to
     see. It's too compacted ... I want to see here, like, on mobile exactly what we see like this"
     (the desktop tablet) -- "the text here, like, goes out of the way ... I go to the vault ... we
     barely even see what's happening there". His pick: the desktop look, re-stacked. The phone used
     to squeeze all three columns onto one row (a 140px menu, the card cut to a 160px square) and
     zoom that down, so the card was a third narrower than the desktop's and a hall's name ran under
     Go. Now the card takes a row of its own across the whole glass, at the desktop card's own shape
     (257 x 148 at 1600x900), and the menu and the controls stand side by side under it, at the
     desktop's sizes. Only two columns are zoomed to fit now, so the zoom -- and every word -- is
     bigger than before, never smaller (tablet-v40.js fitGlass). */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass { zoom: var(--v40-zoom, 1); grid-template-columns: auto auto; justify-content: space-between; }
  /* ===== #340 -- THE ROOM CHOOSING GOES TO THE BOTTOM, THE REST COMES UP. Senzu: "we switch out
     the bottom stuff to the top and the top to the bottom. Like, we move the Yeti box, this box.
     Right here, the skin box. The one that lets you switch between holes ... I want to put that
     down, like, lower", and again with no ambiguity: "the room choosing will be at the bottom. And
     the other stuff will be at the top. The tap help to see the tutorial will stay there."
     The skin box is .controls__where -- the hall's card, its arrows and n OF 16. It was row 2,
     above the menu and the pad (#329). It is the last row now; the menu (rows 3-6, column 1) and
     the walk pad (rows 3-6, column 2) are what the top of the tablet is, and #pull -- the line
     that says "drag or scroll to see more / Click Help to see the tutorial" -- stays on row 1,
     where it was, because he said it stays.
     A MOVE, NOT A RESTYLE: same card, same aspect-ratio: 257 / 148, same stretch, same parts.
     The one thing that changes is which side its 14px of air is on -- it used to hold the menu off
     its foot, and now it holds itself off the menu's. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
    grid-area: 8 / 1 / 9 / -1;
    width: auto;
    height: auto;
    aspect-ratio: 257 / 148;
    justify-self: stretch;
    align-self: start;
    margin: 14px 0 0;
  }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad,
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after { grid-area: 3 / 2 / 7 / 3; }
  /* ===== THE TWO BOXES HOLD TURN AROUND (2026-09-24). Senzu, circling Turn Around hanging under the
     walk/look box: "the layout of the top half is broken, keep the bottom half exactly the same, do
     not move the 'Click help to see tutorial'". Both boxes were drawn --v40-square tall (148, the
     desktop's square), but the phone's pad -- walk, look, TURN AROUND at thumb size (#442) -- is
     taller, so its rows already stood that tall and only the OUTLINES stopped short (measured at
     390x844: box foot ~600, Turn Around 608-653). The outlines now fill the rows the pad already
     takes: nothing moves -- the pull line, the menu, the pad and the hall's card keep their places --
     the two boxes just close around what is already there. Turn Around loses the 6px it hung below
     the pad by; the box stands 6px proud of the pad's foot so it does not touch the key. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::before,
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__glass::after { height: auto; align-self: stretch; margin-bottom: -6px; }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad #flip { margin-top: 0; }
  /* ═══ ONE HOLD-TO-WALK PAD, AND A THUMB CAN REACH IT (#442) ════════════════
     Senzu picked "one hold-to-walk control instead" -- "Replaces the two arrows
     with a single large press-and-hold pad. Fewer things on the tablet, bigger
     target, and it matches how walking already works under the hood." The two
     arrows are WALK's ▲ over ▼: their own key, their own caption, and already a
     hold (museum.js, #fwd pointerdown -> state.held, so a tap moves nobody).
     Measured here at 390x844 on a touch pointer, before: 30.6 x 40.8 each --
     the smallest pair on the tablet, and a thumb wants 44 x 44.
     THE PICTURE DOES NOT MOVE. --v40-pad and --v40-arm are raised by exactly
     what the new zoom takes back, so the ring, its arms and TURN AROUND's width
     are drawn the same number of screen pixels as before (81.8 across; it was
     81.7). What changes is the CELLS -- the boxes the browser hit-tests --
     which now stand proud of the drawing.
     WHAT IT COSTS, all measured at 390x844: every px of pad comes off
     fitGlass's zoom, 0.851 -> 0.775, so his menu goes 143px -> 130.2px wide
     and its words 11.9px -> 10.9px, and the tablet stands 34px higher (its top
     edge 465 -> 431) because the pad is 158.8 tall where it was 116.5.
     The zoom is also why the two turn arms stop at 30.2 across: a ring whose
     every zone is a true 44 square measures the zoom at 0.589 and his menu at
     8.2px. That trade is his to make, not this file's. Turning keeps three
     routes meanwhile -- the arm, the stick and the arrow keys -- so a narrow
     arm is a poorer route, never a lost one. */
  body[data-tablet="v40"] {
    --v40-pad: 106px;           /* 96 before; x the new zoom, the same 82px on screen */
    --v40-arm: 33px;            /* 30 before, likewise */
    --v40-walk: 58px;           /* the walk pad, across */
    --v40-rocker: 58px;         /* TURN AROUND, down */
    --v40-hitx: 39px;           /* the turn zones, across -- short of 44, see above */
    --v40-hity: 37px;           /* the nod zones, down */
    --v40-hubrow: 58px;         /* the hub cell, down: the turn zones' height */
  }
  /* The two arrows grow with the pad they mark -- 12px in a 30px key read as a
     key; the same 12px adrift in a 45px pad reads as an empty box. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__pad :is(#fwd, #back) .btn__icon { font-size: 17px; }
  /* THE HANDLE (#328). Senzu: "hard to control, I guess, because there's no really drag bar" -- his
     pick, a handle on top of the tablet: drag it down to tuck the tablet away and see more of the
     hall, up to bring it back, a tap either way (tablet-v40.js). A 44px-tall grip above the bezel,
     drawn as the familiar short pill; tucked, the tablet drops its whole visible height and the
     grip stays standing on the bottom edge (which already clears Safari's toolbar, below). Moved by
     transform only: --v40-tucked takes the held share away, --v40-drag follows the finger. This
     tablet is a flat overlay outside the 3D hall, so its transform composites on its own. */
  /* ===== #340 -- IT CAN NEVER GO AWAY. Senzu, walking it on his phone: "I hate that we can make
     the tablet disappear on a click or even at all. That should never happen. That's a problem" /
     "The phone completely goes away because then, like, how the fuck am I supposed to, like, get
     it back? You know, like, it's super confusing."
     THE CAUSE, measured at 390x844: the tuck was composed MULTIPLICATIVELY --
     `(1 - --held-show * (1 - --v40-tucked))`. With --v40-tucked at 1 the whole --held-show term is
     multiplied away, the tablet translates its FULL height, and 0.0px of it is left on screen. The
     0.22 floor museum.js keeps (LIFT_MIN) guards --held-show, which is the very term the tuck
     erases, so it could never have helped. A full downward finger drag reached 0.3px by a second
     route: --v40-drag is added AFTER that term and was clamped only to the tablet's own travel.
     THE FIX IS THE COMPOSITION, not the button. Whatever --held-show, the tuck and the finger add
     up to, min() caps the whole sum at "the tablet's height less a peek", so at least --v40-peek
     of it stands on the screen on every path -- the ones he found and the ones he has not. 64px
     clears Apple's 44px finger minimum and is measured, not picked: the pull line's foot sits
     51.3px under the tablet's top edge at 390x844, so a 64px peek leaves the WALL OF SHAME sign
     and the whole readable "Tap Help to see the tutorial" standing. A tablet, not a stub. The
     handle still works; tucked now means as small as it goes AND still there. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) {
    --v40-peek: 64px;
    transform: translate(-50%, min(
      calc((1 - var(--held-show) * (1 - var(--v40-tucked, 0))) * 100% + var(--v40-drag, 0px)),
      calc(100% - var(--v40-peek))
    ));
  }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall).is-tucked:not(.is-help) { --v40-tucked: 1; }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck {
    display: block;
    position: absolute;
    left: 50%;
    top: -44px;
    z-index: 2;
    width: 120px;
    height: 44px;
    margin: 0 0 0 -60px;
    padding: 0;
    border: 0;
    background: none;
    touch-action: none;
    cursor: grab;
  }
  /* ===== #340 -- NO WHITE PIECE. Senzu: "I don't want here at the top. I don't want to have that
     white piece thingy that you added." The 44x5 rgba(255,255,255,0.85) pill that #328 drew on the
     handle is gone. It was the pull's only affordance, so it is not deleted naked -- the RESTING
     SHAPE carries it now (#340 below): the tablet stands at 192px of an 844px screen instead of
     377px, with its top edge, its bezel, the WALL OF SHAME sign and its stickers all showing above
     the hall. A slab plainly sitting partway up the screen reads as something you move; a 44x5 pill
     flat on its edge did not, and it is the thing he pointed at.
     ⚠️ WHAT IT DOES NOT SAY: the worded cue "drag or scroll to see more" (.pull__word, index.html)
     is display: none on THIS tablet -- the :not(.has-tips) pair ~315 lines above. So the only words
     at rest are "Tap Help to see the tutorial". Showing the cue is one line and it was NOT taken
     here: the thing he objected to was something added at the top of the tablet, and this would be
     another one. If a visitor is ever measured missing the pull, that rule is where to look first.
     The handle's 44px finger target above the edge is untouched: only its picture goes, not its box. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck.is-grabbed { cursor: grabbing; }
  /* ===== #462 -- THE ARROW. Senzu: "We need an arrow or something that constantly is there, so they can
     click to just lift it up ... right next like in the bottom so they'll be able to like know that it's
     liftable". A tab standing on the tablet's top edge, in the handle's own button: the tablet's own
     black (--v40-bg) with its hairline (--v40-hair), and a chevron in its ink that points the way a tap
     moves it -- up at rest, down once raised (tablet-v40.js .is-up). DARK, never pale: #340 took "that
     white piece thingy" off this edge and this does not bring it back (check-phone-tablet (C)).
     WHERE: the handle's box is placed from the tablet's padding box, which starts 32px under the frame's
     top edge, so the box runs from 12px above that edge to 32px below it -- right over the WALL OF SHAME
     sign. Sat at the box's foot, the first cut covered the sign's words (seen at 390x844). The tab's
     foot is 30px up from the box's foot instead: 2px into the frame's edge, clear of the sign, and it
     still takes the press (it is inside the button, so a tap on it is a tap on the handle). */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck__arrow {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 46px;
    height: 24px;
    margin-left: -23px;
    border: 1px solid var(--v40-hair, #2f3336);
    border-radius: 9999px;
    background: var(--v40-bg, #000);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck__arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--v40-ink, #e7e9ea);
    border-top: 2px solid var(--v40-ink, #e7e9ea);
    transform: translate(-50%, -25%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck.is-up .v40-tuck__arrow::before {
    transform: translate(-50%, -75%) rotate(225deg);
  }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck:focus-visible .v40-tuck__arrow { outline: 2px solid var(--tab-neon); outline-offset: 2px; }
  /* ===== #465 -- PHOTO GOES IN THE BOX. Senzu: "over here like they're supposed to be this area with the
     help and marketplace uh but the photo is for some reason not in there". The menu's box
     (.controls__glass::before) is drawn --v40-square tall from row 3; on the phone Free Wallpapers is
     not shown, so row 5 -- inside the box -- stood empty while Photo sat in row 6, under the box's foot
     (measured: box 748-863, Photo 887-913). Photo takes the empty row: same key, same look, one place up.
     The desktop's rows are untouched. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn { grid-area: 5 / 1; }
  /* ===== #340 -- LOW BY DEFAULT, PULLED UP ON PURPOSE. Senzu: "I don't like that it's so fucking
     big, like, the whole thingy. It's, like, way too big than it should be" / "I don't like that
     it's so fucking tall" / "we lower the whole tablet like this on default. And then if the user
     wants, they can pull it upwards and then they'll control the rooms."
     So there are THREE places now, not two, and all three are MEASURED, never picked
     (tablet-v40.js fitGlass publishes both shares the same way it always has -- the foot of the
     rows that state has to show, plus the margin the desktop leaves under its lowest row):
       --v40-rest  the foot of the pull line, the menu and the walk pad. The hall switcher is
                   below it and off the screen: pulling up is what brings the rooms, which is
                   what he said pulling up is for.
       --v40-held  the foot of everything, the hall switcher included. This is "raised".
       --v40-peek  tucked, above.
     The room-choosing card is the tallest single thing on the tablet, so moving it to the bottom
     (#340, the swap below) is what makes rest small -- the height is not styled down, it is the
     part he does not need while walking that is no longer in front of him. */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) { --held-show: var(--v40-rest, 0.47); }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall).is-raised { --held-show: var(--v40-held, 0.62); }
  /* Help still shows the whole tablet -- the tutorial's list stands below every row fitGlass
     measures, so only 1 covers it. (Job F: tutorial-v40.js will call window.__v40raise.) */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall).is-help { --held-show: 1; }
  /* Clear of the phone's own bottom edge (#328, "it's, like, cutting a little bit"): whichever is taller,
     the home bar's safe area (the page runs under it, viewport-fit=cover) or the strip Safari's bottom
     toolbar covers (--vv-bottom, measured off the visual viewport in tablet-v40.js). */
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) { bottom: max(env(safe-area-inset-bottom, 0px), var(--vv-bottom, 0px)); }
}

/* The handle is the phone walking tablet's alone (#328, the phone block above shows it). */
body[data-tablet="v40"] .v40-tuck { display: none; }

/* ===== #283 -- FREE WALLPAPERS! GETS ITS PICTURE. Senzu: "we're missing an
   icon here, an emoji or something for it. So it would be able to actually,
   like, look like the rest of them." index.html gives #wallBtn a .btn__icon
   (a framed square) and the icon rules above already list #wallBtn, so it
   draws in the same 20px column at the same 17px as ? ★ ◉. The 40px of
   padding that stood in for the missing column (v11, "its word starts where
   the others' do") is taken back: the icon and the row's gap place the word
   now, exactly as they do for the other three. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__apps #wallBtn .btn__word { padding-left: 0; }

/* ===== #282 -- PHOTO SAYS SOON. Senzu: "we will say that will be, like, in
   the future, because we can't do it as of now ... just, like, soon". The row
   keeps its place, icon and word; a small grey "Soon" pill closes it on the
   right, and the row goes grey and loses the hand cursor and the hover
   (tablet-v40.js 8 makes the press do nothing). The Con's own Photo key
   (#conPhoto) gets the same pill. Grey, never green: green is the one accent
   (the current item), and this is the opposite of an invitation. */
body[data-tablet="v40"] .v40-soon {
  display: inline-block;
  flex: none;
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--v40-hair);
  border-radius: 9999px;
  color: var(--v40-dim);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
body[data-tablet="v40"] :is(#photoBtn, #conPhoto)[aria-disabled="true"] { cursor: default; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn[aria-disabled="true"],
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn[aria-disabled="true"] .btn__icon { color: var(--v40-dim); }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn[aria-disabled="true"]:is(:hover, :active, .is-down) { background: none; }
body[data-tablet="v40"] #conPhoto[aria-disabled="true"] { color: var(--v40-dim); }
body[data-tablet="v40"] #conPhoto[aria-disabled="true"]:hover { border-color: var(--tab-line); background: var(--tab-surface); }
body[data-tablet="v40"] #conPhoto .v40-soon { margin-left: 2px; }
/* A phone held sideways: the pill made the Con's Photo key 47px wider, the key row no longer fit
   beside the ◀ ▶ pad, wrapped to a second line and raised the tablet 50px over the painting
   (check-phone-layout 844x390). There the key keeps its grey and its dead press; the pill goes. */
@media (max-height: 500px) { body[data-tablet="v40"] #conPhoto .v40-soon { display: none !important; } }
/* The studio's row (.is-wall) keeps Photo too, so it gets the pill beside the
   word. The halls' row is signed off and frozen: no rule here names it, and
   the pill is not drawn there (the base rule below only lets it show on the
   walking menu, the studio and a Con). */
body[data-tablet="v40"] .controls .v40-soon { display: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) #photoBtn .v40-soon,
body[data-tablet="v40"] .controls.is-wall:not(.is-halls) #photoBtn .v40-soon,
body[data-tablet="v40"].is-facing .controls #conPhoto .v40-soon { display: inline-block; }
body[data-tablet="v40"] .controls.is-wall:not(.is-halls) #photoBtn .v40-soon { margin-left: 6px; }

/* ═══ THE EXHIBITS ARE A SWIPE CAROUSEL (S651) ══════════════════════════════════════════════
   Senzu: "i want at the bottom like dots and to let users swipe left to right carosel like
   smooth and be able to tap to go in" · "no arrows" · "the images here - no buttons and no code
   layers besides the images".

   So the top of the box is a WINDOW one card wide with every hall laid side by side behind it,
   and under it a row of dots. Nothing is drawn on the picture: the ‹ › keys, the "EXHIBIT n OF
   16" line and the green GO TO key are all gone from the markup (tablet-v40.js), and the rules
   that styled them earlier in this file now match nothing. What stays on the card is what he
   asked for by name -- the room's own colours, its wall art, the naked-skin figure, the name,
   the count, and the green ring with HERE on the room you are standing in.

   LAST BLOCK IN THE FILE ON PURPOSE. Every rule for this box carries the same six-selector
   prefix, so they all have equal specificity and the last one wins; putting the carousel here
   means it governs without editing the four earlier layers that built up to it, and the phone
   block above (max-width: 620px) still decides the box's SHAPE, which none of this touches.

   ⚠️ OPAQUE, NEVER A BLUR. The track slides over the tablet's own surface; the window takes
   --tab-surface, which is the panel's own colour, so nothing of the hall shows through it. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "card"
    "dots"
    "all ";
  column-gap: 0;
}
/* THE WINDOW: one card wide, and it clips. `touch-action: pan-y` hands the browser the vertical
   gesture -- which is the tablet's own pull (museum.js) -- and keeps the horizontal one for the
   swipe, so the two never take each other's. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-slot {
  /* ⚠️ THE PICTURE STOPS ABOVE THE DOTS, and the two are pinned to the box rather than placed in
     its grid rows. The first cut let the picture fill the box and floated the dots over its foot:
     that is a code layer on the image, which is the one thing "the images here - no buttons and no
     code layers besides the images" rules out. Pinned, the split holds at 176px on a desktop and
     at whatever height the phone's `aspect-ratio: 257 / 148` gives the box, without either size
     needing its own rule. */
  /* S654 (Senzu reversed this): the picture now fills ALL the way to the bottom and the dots ride
     ON it -- no black strip under the con. "make it transparent and fill the actual conmen image
     and the wall behind it ... keep the dots at the bottom". */
  inset: 0;
  height: auto;
  overflow: hidden;
  background: var(--tab-surface);
  touch-action: pan-y;
}
/* THE TRACK: every hall side by side. The glide is one transform on one element, and it is off
   while a finger is on it so the card tracks the finger exactly rather than chasing it. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-track.is-dragging { transition: none; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* THE INSTANT VERSION, for anyone who asked for one. No glide, no momentum: the next card is
   simply there. */
@media (prefers-reduced-motion: reduce) {
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-track { transition: none; }
}
/* THE DOTS. Sixteen of them at 5px with 4px between is 140px, inside the 176px panel and inside
   the wider one a phone gives it. Each carries a hit area far bigger than the mark it draws --
   the dots are the carousel's second way round, the swipe being the first. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-dots {
  position: absolute;
  /* S656: a SUBTLE, CONTAINED glass pill BEHIND the dot cluster, centred at the bottom. Senzu,
     applying "mistake one: icons lost in the image" from a UX video: an element on a product image
     is only readable because THAT image is dark -- switch to a bright one and it disappears; the fix
     is "a subtle background container behind the icons ... so they stay readable on different
     backgrounds". Our dots ride straight on the con/wall and had the same flaw. This hugs the dots
     (content width, not the full-bleed dark band he rejected at S654) and stays soft, so the row
     reads on ANY wall -- bright, dark or busy. The dots keep their own light fill + dark ring too. */
  /* ⚠️ `left: 50%` MUST be inside the inset shorthand (2026-09-24): written on its own line above
     `inset: auto auto 6px auto`, the shorthand reset it to auto, and translateX(-50%) then slid the
     row half its width LEFT of centre. Senzu: "the dots here are not centered". */
  inset: auto auto 6px 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 14, 12, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 1;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-dot {
  position: relative;
  flex: none;
  width: 5px;
  height: 5px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(208, 212, 208, 0.97);   /* Senzu: "a tiny little bit more gray and just increase opacity just a tiny bit" (was 240,244,240 at 0.9) */
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.6);   /* S654: a dark ring so the dot reads on ANY wall -- light fill catches the dark walls, the ring catches the light ones */
  opacity: 1;
  cursor: pointer;
  transition: background 0.18s linear, box-shadow 0.18s linear;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-dot::after {
  content: "";
  position: absolute;
  inset: -12px -4px;            /* the finger's target, not the mark's size */
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-dot.is-on {
  background: var(--tab-neon);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 0 7px var(--tab-glow);
  opacity: 1;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-dot:focus-visible { outline: 2px solid var(--tab-neon); outline-offset: 3px; }
/* S654: the browse arrows ride on the card's left & right edges (Senzu asked to KEEP them). Absolute,
   over the card, so they work with the full-bleed slot -- not the old grid-area layout. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; grid-area: auto;
  width: 30px; height: 46px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(6, 12, 8, 0.42); color: #eafff0; font-size: 16px; line-height: 1;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background 0.15s linear, color 0.15s linear;
}
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--prev { left: 5px; right: auto; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step--next { right: 5px; left: auto; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:hover { background: rgba(141, 255, 160, 0.9); color: #06140a; }
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-step:is(:active, .is-down) { background: #8dffa0; color: #06140a; }
/* S654: a STRAIGHT wall -- the cards tile edge to edge, so swiping shows no rounded black points.
   The rounded outer corners come from the box's own overflow:hidden clip, not the cards. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-card { border-radius: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-dot { transition: none; }
  body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .v40-tuck__arrow::before { transition: none; }
}
/* "Exhibit 5 of 16: Vamp" is said out loud and drawn nowhere: the dots are the picture of it,
   and a screen reader cannot read a dot. */
body[data-tablet="v40"]:not(.is-facing) .controls[data-ui="3"]:not(.is-halls):not(.is-wall) .controls__where .v40-pos {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* The frozen halls screen, the Wall of Shame and the Con-facing tablet keep their own plate:
   nothing of the carousel reaches them (the older rule above says the same of its own parts). */
body[data-tablet="v40"] .controls:is(.is-halls, .is-wall) :is(.v40-dots, .v40-track),
body[data-tablet="v40"].is-facing :is(.v40-dots, .v40-track) { display: none !important; }