/* ==========================================================================
   THE CODED HOME TAB — /wall-tablet/
   Chapters 1 (`wall`) and 2 (`drawer`) share one recreation of the Home tab.
   The camera, --fit, the beat runner and the confetti canvas are the shared
   engine in wall-demo.css / wall-demo.js, which load first. Nothing here is
   allowed to reach them.

   NOT `wall-demo.*` — that name is the shared engine's. Taking it would be the
   `.mp-*` collision PLAN-meals-page.md PART 11 is about, with the engine as the
   casualty rather than a widget.

   AUTHORED AT 1284 x 883, the size every kit on this site uses, and scaled by
   transform. The markup is generated by tools/wall-build-tab.py, which carries
   the geometry table and the source citations for every claim the tab makes.

   THE ONE STRUCTURAL IDEA HERE
   ---------------------------
   The wall's chrome does not scroll and its widgets do. So the strip and the
   rail are pinned to .wt, the widgets live in .wt-col, and .wt-col is moved by
   `--sc`. `--sc` is declared `inherits: true` and animated on .ct-cam in the
   camera's own keyframes, so the scroll and the camera are ONE animation on one
   clock. A second @keyframes on .wt-col would have its own start time, and the
   engine only restarts .ct-cam when a section scrolls back into view — the two
   would drift apart within a minute and the camera would be looking at the
   wrong widget.
   ========================================================================== */

@property --sc { syntax: "<number>"; initial-value: 0; inherits: true; }

/* ── the tab ─────────────────────────────────────────────────────────────── */
.wt {
  position: relative;
  width: 1284px;
  height: 883px;
  overflow: hidden;
  background: #fdf9f3;
  color: #1f2937;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wt .wt-i { width: 1em; height: 1em; display: block; }
.wt-i10 { font-size: 10px; } .wt-i12 { font-size: 12px; }
.wt-i14 { font-size: 14px; } .wt-i16 { font-size: 16px; }
.wt-sl .wt-i { font-size: 24px; }
.wt-i20 { font-size: 30px; } .wt-i22 { font-size: 22px; }

.wt-av {
  width: var(--s, 18px); height: var(--s, 18px);
  border-radius: 50%; overflow: hidden; flex: none; display: block;
}
.wt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── the strip — DateHeader.jsx ──────────────────────────────────────────── */
.wt-strip {
  position: absolute; inset: 0 0 auto 0; height: 28px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(255, 253, 248, 0.92);
  border-bottom: 1px solid rgba(120, 92, 54, 0.07);
}
.wt-strip-l, .wt-strip-r { display: flex; align-items: center; gap: 8px; }
.wt-strip-c { opacity: 0.32; }
.wt-clock { font-size: 11px; font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.wt-badge { display: flex; align-items: center; gap: 2px; color: #d97706; }
.wt-badge b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-mood { font-size: 14px; line-height: 1; filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.4)); }
.wt-temp { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; opacity: 0.8; }
/* The offline mark is the whole announcement the wall makes. Chapter 2 does not
   use it; it is here because the strip is one component and half of it is not. */
.wt-off { color: #d97706; display: none; }
.wt-off.is-on { display: block; }

/* ── the scrolling column ────────────────────────────────────────────────── */
.wt-view { position: absolute; inset: 28px 0 63px 0; overflow: hidden; }
.wt-col {
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(calc(var(--sc) * -1px));
}
.wt-w { position: relative; flex: none; border-radius: 16px; }

/* Widget title row — the shape every widget on this wall uses: bare title,
   then the icon buttons (WidgetTitleButton, alpha="low"). */
.wt-w-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wt-w-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(76, 60, 40, 0.55);
}
.wt-tbtn {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: rgba(217, 119, 6, 0.09); color: #b45309;
}

/* ── 1. the briefing ─────────────────────────────────────────────────────── */
/* GreetingAmbience's warm blob wash, flattened to two gradients: the component
   interpolates between palettes over 1.2s driven by the insight carousel, which
   is a live-data behaviour with nothing to interpolate here. */
.wt-brief {
  height: 441px; padding: 24px;
  background: linear-gradient(168deg, #fdf5e2 0%, #fcefd0 46%, #fbe4ae 100%);
  box-shadow: 0 10px 30px -14px rgba(146, 104, 36, 0.3);
  overflow: hidden;
}
.wt-brief-wash {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background:
    radial-gradient(260px 200px at 88% 8%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(300px 220px at 6% 96%, rgba(251, 191, 36, 0.22), transparent 72%);
}
.wt-greet { position: relative; z-index: 1; margin: 0 0 16px; font-size: 18px; font-weight: 700; color: #7a5a1e; }
.wt-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 900; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(120, 88, 34, 0.62);
}
.wt-today-date { font-style: normal; font-size: 10px; letter-spacing: 0.18em; opacity: 0.62; }

.wt-ins { position: relative; z-index: 1; background: rgba(255, 252, 240, 0.52); border-radius: 2px; padding: 16px 18px; }
.wt-ins-head { display: flex; align-items: center; justify-content: space-between; }
.wt-ins-dots { display: flex; align-items: center; gap: 4px; }
.wt-ins-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(37, 99, 235, 0.27); transition: width .25s ease, background .25s ease; }
.wt-ins-dots i.is-on { width: 18px; background: #2563eb; }
.wt-ins-arw { width: 12px; height: 12px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(37, 99, 235, 0.13); color: #2563eb; }
/* Stacked, not sequential: the component cross-fades one card over another in
   a single grid cell (AnimatePresence mode="wait"), so the block never changes
   height as the carousel moves. */
.wt-ins-stack { display: grid; margin-top: 12px; min-height: 78px; }
.wt-ins-card { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .32s ease, transform .32s ease; }
.wt-ins-card.is-on { opacity: 1; transform: none; }
.wt-ins-h { margin: 0; font-size: 26px; font-weight: 800; color: #1f2937; letter-spacing: -0.01em; }
.wt-ins-b { margin: 6px 0 0; font-size: 14px; color: rgba(71, 62, 48, 0.78); }

.wt-today { position: relative; z-index: 1; margin-top: 16px; border: 1px solid rgba(180, 140, 66, 0.16); border-radius: 2px; padding: 16px 18px; background: rgba(253, 246, 226, 0.5); }
.wt-today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wt-today-n { font-size: 11px; font-weight: 900; color: rgba(120, 88, 34, 0.55); }
.wt-today-rows { padding-left: 12px; }
.wt-ev { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; }
.wt-ev-t { font-size: 11px; font-weight: 900; color: #b45309; }
.wt-ev-n { font-size: 12px; font-weight: 800; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-ev-o { font-size: 10px; font-weight: 900; color: rgba(76, 60, 40, 0.5); }

/* ── 2. the Family Board ─────────────────────────────────────────────────── */
.wt-board { height: 272px; padding: 18px 20px; background: #fff; box-shadow: 0 8px 24px -16px rgba(80, 60, 30, 0.35); }
.wt-notes { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; padding-top: 6px; }
/* CARD_SHADOW: warm, thrown down-and-right only, the negative spread keeping
   the blur off the top and left edges so nothing haloes around them. */
.wt-note {
  display: flex; min-width: 200px; max-width: 280px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--tone) 10%, #fff);
  box-shadow: 3px 3px 9px -2px rgba(124, 82, 40, 0.16);
}
.wt-note-bar { width: 4px; flex: none; }
.wt-note-body { padding: 10px 12px; min-width: 0; }
.wt-note-who { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.wt-note-name { font-size: 10px; font-weight: 600; color: rgba(71, 62, 48, 0.72); }
.wt-note-body p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: #1f2937; word-break: break-word; }
/* The posted note arrives where a posted note arrives — first, at the top left
   — rather than appended to the end where nobody is looking. */
.wt-note.is-new { animation: wt-note-in .46s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes wt-note-in {
  from { opacity: 0; transform: translateY(-10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.wt-note[hidden] { display: none; }

/* ── 3. the slideshow ────────────────────────────────────────────────────── */
.wt-ss { height: 430px; padding: 16px 16px 14px; background: #fff; box-shadow: 0 8px 24px -16px rgba(80, 60, 30, 0.35); display: flex; flex-direction: column; }
.wt-ss-view { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: #0f1214; }
.wt-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.wt-slide.is-on { opacity: 1; }
.wt-slide-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px); transform: scale(1.1); opacity: .3; }
.wt-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wt-ss-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; display: flex; gap: 4px; align-items: center; }
.wt-ss-dots i { width: 9px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .5); transition: width .25s ease, background .25s ease; }
.wt-ss-dots i.is-on { width: 20px; background: #fff; }

/* ── 4. Lists ────────────────────────────────────────────────────────────── */
.wt-lists { height: 430px; padding: 18px 20px; background: #fff; box-shadow: 0 8px 24px -16px rgba(80, 60, 30, 0.35); display: flex; flex-direction: column; }
.wt-chips { display: flex; gap: 6px; margin-bottom: 8px; }
.wt-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; color: rgba(71, 62, 48, .8); border: 1px solid rgba(120, 92, 54, .16); }
.wt-chip.is-on { background: rgba(217, 119, 6, .13); color: #b45309; border-color: transparent; }
.wt-chip b { font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.wt-items { flex: 1; min-height: 0; }
/* "A row is a big tap target on purpose. This is read at an angle from across
   a room and tapped by whoever is walking past, often carrying something." */
.wt-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; transition: opacity .3s ease; }
.wt-box { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(120, 92, 54, .26); display: grid; place-items: center; color: transparent; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.wt-item-t { font-size: 14px; color: #1f2937; }
.wt-item.is-done { opacity: .45; }
.wt-item.is-done .wt-box { background: #d97706; border-color: #d97706; color: #fff; }
.wt-item.is-done .wt-item-t { text-decoration: line-through; }
.wt-box-add { background: rgba(217, 119, 6, .13); border-color: transparent; color: #b45309; }

/* ── the rail — MobileBottomNav ──────────────────────────────────────────── */
.wt-rail {
  position: absolute; inset: auto 0 0 0; height: 63px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: rgba(255, 253, 248, 0.95);
  border-top: 1px solid rgba(120, 92, 54, 0.08);
}
.wt-brand img { width: 42px; height: 42px; display: block; }
.wt-tabs { display: flex; align-items: center; gap: 10px; }
.wt-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 14px; border-radius: 14px; color: rgba(76, 60, 40, .62); }
.wt-tab b { font-size: 12px; font-weight: 700; }
.wt-tab.is-on { background: rgba(217, 119, 6, .12); color: #b45309; }
/* No gear on a tab with nothing to configure — Home has four widgets, so it
   has one. (tabHasWidgets, WallNavigation.jsx) */
.wt-gear { position: absolute; top: -3px; right: 2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #d97706; color: #fff; }
.wt-addbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(76, 60, 40, .62); }
.wt-addbtn b { font-size: 12px; font-weight: 700; }

/* ── the ring ────────────────────────────────────────────────────────────── */
/* Same accent and the same 1.2s rise-hold-fade as the ring on /chores/ and
   /meal-planner/, so "this is the thing that was pressed" reads the same on
   every animated section of the site.

   One positioned element rather than an ::after on each target, because the
   things pressed here are a 1284-wide strip, a 22px round button, a drawer tile
   and a list row — four boxes with nothing in common but the gesture. The
   ::after form also could not reach the strip, which is `overflow: hidden` for
   the drawer. */
.wt-ring {
  position: absolute; inset: -6px; z-index: 9; border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(217, 119, 6, 0);
  opacity: 0;
}
.wt-ring.is-on { animation: wt-ring 1200ms ease forwards; }
/* 6px, not the 3 the other pages use: this ring is drawn in tab pixels inside
   the camera, so it is scaled down with everything else, where theirs are drawn
   at screen size. Six here lands at roughly three on the page. */
@keyframes wt-ring {
  0%   { opacity: 1; box-shadow: inset 0 0 0 0 rgba(217, 119, 6, 0); }
  12%  { opacity: 1; box-shadow: inset 0 0 0 6px rgba(217, 119, 6, 1); }
  62%  { opacity: 1; box-shadow: inset 0 0 0 6px rgba(217, 119, 6, 1); }
  100% { opacity: 1; box-shadow: inset 0 0 0 6px rgba(217, 119, 6, 0); }
}

/* ── the compose dialog — HomeTab.jsx:232-300 ────────────────────────────── */
.wt-modal {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center;
  background: rgba(15, 18, 20, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.wt-modal.is-on { opacity: 1; visibility: visible; }
.wt-modal-card {
  width: 430px; padding: 22px; border-radius: 18px; background: #fffdf9;
  border: 1px solid rgba(120, 92, 54, .14);
  box-shadow: 0 30px 70px -20px rgba(16, 18, 38, .45);
  transform: translateY(12px) scale(.97); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.wt-modal.is-on .wt-modal-card { transform: none; }
.wt-modal-h { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.wt-modal-sub { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: rgba(71, 62, 48, .6); }
.wt-whos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wt-who { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 12px; border: 2px solid rgba(120, 92, 54, .16); font-size: 13px; font-weight: 500; color: rgba(71, 62, 48, .72); }
.wt-who.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--c); transform: scale(1.05); }
.wt-who i { font-style: normal; font-size: 12px; }
.wt-ta { min-height: 74px; border-radius: 12px; border: 1px solid rgba(120, 92, 54, .18); padding: 10px 12px; font-size: 14px; line-height: 1.4; background: #fff; }
.wt-caret { display: inline-block; width: 1.5px; height: 15px; vertical-align: -2px; background: #d97706; animation: wt-caret 1s steps(1) infinite; }
@keyframes wt-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.wt-count { margin: 4px 0 10px; text-align: right; font-size: 12px; color: rgba(71, 62, 48, .55); font-variant-numeric: tabular-nums; }
.wt-sws { display: flex; gap: 8px; margin-bottom: 16px; }
.wt-sw { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.wt-sw.is-on { box-shadow: 0 0 0 2px #0d9488; }
.wt-modal-btns { display: flex; gap: 10px; }
.wt-btn-ghost, .wt-btn-go { flex: 1; text-align: center; padding: 9px 0; border-radius: 12px; font-size: 14px; font-weight: 700; }
.wt-btn-ghost { border: 1px solid rgba(120, 92, 54, .18); color: rgba(71, 62, 48, .7); }
.wt-btn-go { background: #d97706; color: #fff; }

/* ── the drawer — TopSwipeDrawer.jsx ─────────────────────────────────────── */
/* Full screen, not a flap. `motion.aside` is `fixed inset-0 h-screen w-screen`
   and arrives from y: -105% on a spring. The scrim behind it is only seen
   during the slide, which is exactly when it matters. */
.wt-drawer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.wt-drawer-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .28);
  opacity: 0; transition: opacity .4s ease;
}
.wt-drawer.is-on .wt-drawer-scrim { opacity: 1; }
.wt-drawer-sheet {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fffdf8;
  padding: 16px 22px 12px;
  box-shadow: 0 26px 60px -20px rgba(70, 52, 24, .38);
  transform: translateY(-105%);
  transition: transform .52s cubic-bezier(.24, .9, .3, 1);
}
.wt-drawer.is-on .wt-drawer-sheet { transform: none; }
/* THE DRAWER IS DRAWN AT 1.6x THE APP'S TYPE, AND THAT IS DELIBERATE.
   Every other part of this recreation is 1:1 with the component. The drawer
   cannot be, because it is full-bleed: its six tiles span 1232px, so holding
   the row whole caps the camera at z=1.04, and at that zoom a 15px row title
   is under 7 CSS pixels on the page — present, and unreadable.

   The first attempt kept 1:1 type and panned across the tiles instead. That
   fails worse: the panes are full-width rows anchored left, so by the time the
   camera reached Weather the forecast had left the frame and the reader was
   looking at an empty cream rectangle with a tile lit above it.

   So the type is scaled and the camera holds. The SHAPE is untouched — six
   tiles, the volume and brightness row that is not a pane, full-width rows
   below — which is what this section is claiming. It is the same trade the
   chores celebration makes when it compresses the component's 8.5s to 6. */
.wt-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; flex: none; }
.wt-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px 0; border-radius: 16px; background: rgba(120, 92, 54, .05); color: rgba(76, 60, 40, .66); }
.wt-tile b { font-size: 20px; font-weight: 700; }
.wt-tile.is-on { background: rgba(217, 119, 6, .13); color: #b45309; }
.wt-tile u { position: absolute; top: 10px; right: 22px; min-width: 24px; height: 24px; border-radius: 12px; background: #d97706; color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; display: grid; place-items: center; padding: 0 4px; }

/* Volume and brightness are NOT panes — they sit under the tiles and stay on
   show whichever pane is up (TopSwipeDrawer.jsx:221-225). */
.wt-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; flex: none; }
.wt-sl { display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-radius: 14px; background: rgba(120, 92, 54, .05); color: rgba(76, 60, 40, .6); }
.wt-slider { position: relative; display: block; flex: 1; height: 8px; border-radius: 4px; background: rgba(120, 92, 54, .16); }
.wt-slider u { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: #d97706; text-decoration: none; }
.wt-slider u::after { content: ""; position: absolute; top: 50%; right: -9px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }

.wt-panes { position: relative; flex: 1; min-height: 0; margin-top: 14px; }
.wt-pane { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; overflow: hidden; }
.wt-pane.is-on { opacity: 1; transform: none; }
.wt-handle { display: grid; place-items: center; height: 24px; flex: none; }
.wt-handle i { width: 64px; height: 4px; border-radius: 2px; background: rgba(120, 92, 54, .22); }

/* ── the panes ───────────────────────────────────────────────────────────── */
/* Each one is its component, not an impression of it. The type is at the 1.6x
   the rest of the drawer is drawn at (see the note above .wt-tiles); the
   structure, the labels and the row shapes are the components' own. */
.wt-pane > * { height: 100%; }
.wt-seclbl {
  margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(71, 62, 48, .52);
}

/* --- Notifications — NotificationsPanel.jsx ------------------------------- */
.wt-npane { display: flex; flex-direction: column; gap: 14px; }
.wt-nhead { display: flex; align-items: center; justify-content: space-between; }
.wt-dismiss { font-size: 17px; font-weight: 700; color: #b45309; padding: 4px 10px; border-radius: 10px; }
.wt-nlist, .wt-alist { list-style: none; margin: 0; padding: 0; }
.wt-nlist { display: flex; flex-direction: column; gap: 10px; }
/* Row: flex items-start gap-3 rounded-xl px-3 py-2.5 */
.wt-nrow {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 18px; border-radius: 16px;
  border: 1px solid rgba(120, 92, 54, .16); background: #fff;
  color: rgba(76, 60, 40, .55);
}
.wt-nrow > div { flex: 1; min-width: 0; }
.wt-nrow b { display: block; font-size: 21px; font-weight: 700; color: #1f2937; line-height: 1.2; }
.wt-nrow small { display: block; margin-top: 3px; font-size: 19px; font-weight: 500; color: rgba(71, 62, 48, .56); }
.wt-nrow.is-accent { border-color: rgba(217, 119, 6, .5); background: rgba(217, 119, 6, .07); color: #d97706; }
.wt-nrow.is-coin { border-color: rgba(217, 119, 6, .34); background: rgba(217, 119, 6, .06); color: #d97706; }
.wt-x { color: rgba(76, 60, 40, .3); }
.wt-nact { display: flex; flex-direction: column; gap: 10px; }
.wt-alist { display: flex; flex-direction: column; gap: 7px; }
.wt-arow {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; border-radius: 16px; background: #fff;
  font-size: 19px; font-weight: 600; color: #1f2937;
}
.wt-arow > i { width: 9px; height: 9px; border-radius: 50%; background: #d97706; flex: none; }
.wt-arow > .wt-i { color: #d97706; flex: none; }

/* --- Alerts — ScheduledRemindersPanel ------------------------------------- */
.wt-rpane { display: flex; flex-direction: column; gap: 14px; }
.wt-rhead { display: flex; align-items: center; justify-content: space-between; }
.wt-rhead-r { display: flex; align-items: center; gap: 14px; }
.wt-rhead-r em { font-style: normal; font-size: 18px; color: rgba(71, 62, 48, .52); }
.wt-new { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 12px; background: #d97706; color: #fff; font-size: 17px; font-weight: 600; }
/* divide-y: a rule between rows, not around them. */
.wt-rlist { display: flex; flex-direction: column; }
.wt-rrow { display: flex; align-items: center; gap: 16px; padding: 18px 2px; min-width: 0; }
.wt-rrow + .wt-rrow { border-top: 1px solid rgba(120, 92, 54, .16); }
.wt-rchip { flex: none; font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; background: rgba(217, 119, 6, .13); color: #b45309; }
.wt-rlabel { flex: 1; min-width: 0; font-size: 19px; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-rwhen { flex: none; font-size: 18px; color: rgba(71, 62, 48, .52); }
.wt-rocc { flex: none; font-size: 15px; font-weight: 500; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(120, 92, 54, .2); color: rgba(71, 62, 48, .66); }
.wt-rbtn { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(120, 92, 54, .18); background: rgba(217, 119, 6, .13); color: #b45309; }
.wt-rdel { background: #fff; color: #ef4444; }

/* --- Display — ThemeSettings + PrivacyScreenSettings ---------------------- */
.wt-dpane { display: flex; flex-direction: column; gap: 12px; }
.wt-themes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wt-theme { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 10px; border-radius: 20px; overflow: hidden; border: 2px solid rgba(120, 92, 54, .18); }
.wt-theme.is-on { border-color: var(--a); }
.wt-theme i { display: block; width: 100%; height: 72px; flex: none; }
.wt-theme b { font-size: 16px; font-weight: 600; color: #1f2937; }
.wt-theme u { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--a); color: #fff; display: grid; place-items: center; text-decoration: none; }
.wt-dsplit { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(120, 92, 54, .16); }
.wt-modes { display: flex; gap: 10px; }
.wt-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 0; border-radius: 16px; border: 1px solid rgba(120, 92, 54, .2); font-size: 17px; font-weight: 500; color: rgba(71, 62, 48, .55); }
.wt-mode.is-on { border-color: #d97706; background: rgba(217, 119, 6, .13); color: #b45309; }
.wt-srows { display: flex; flex-direction: column; gap: 10px; }
.wt-srow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 18px; border-radius: 16px; border: 1px solid rgba(120, 92, 54, .18); }
.wt-srow b { display: block; font-size: 18px; font-weight: 600; color: #1f2937; }
.wt-srow small { font-size: 18px; color: rgba(71, 62, 48, .52); }
.wt-switch { flex: none; width: 58px; height: 32px; border-radius: 16px; background: rgba(120, 92, 54, .22); position: relative; }
.wt-switch.is-on { background: #d97706; }
.wt-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.wt-switch.is-on::after { left: auto; right: 4px; }

/* --- Mood — MoodPanel.jsx ------------------------------------------------- */
.wt-mpane { display: flex; flex-direction: column; gap: 12px; }
.wt-msum { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(251, 191, 36, .4); background: linear-gradient(135deg, rgba(254, 243, 199, .9), rgba(255, 251, 235, .7)); }
.wt-msum-e { width: 62px; height: 62px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 38px; background: rgba(217, 119, 6, .13); }
.wt-msum b { display: block; font-size: 22px; font-weight: 700; color: #1f2937; }
.wt-msum small { font-size: 19px; color: rgba(71, 62, 48, .56); }
.wt-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wt-mrow { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: 18px; border: 1px solid rgba(120, 92, 54, .16); background: #fff; }
.wt-mrow > div { flex: 1; min-width: 0; }
.wt-mrow b { display: block; font-size: 20px; font-weight: 700; color: #1f2937; }
.wt-mrow small { font-size: 17px; color: rgba(71, 62, 48, .52); }
.wt-mbtns { display: flex; gap: 9px; flex: none; }
/* h-11 w-11 rounded-xl border, and the selected one takes the mood's own glow. */
.wt-mbtn { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; border: 1px solid rgba(120, 92, 54, .18); background: #fff; }
.wt-mbtn.is-on { border-color: var(--g); background: color-mix(in srgb, var(--g) 13%, #fff); box-shadow: 0 0 16px color-mix(in srgb, var(--g) 27%, transparent); }

/* --- Weather — WeatherContent.jsx ----------------------------------------- */
.wt-wpane { display: flex; flex-direction: column; gap: 16px; }
.wt-wtop { display: flex; align-items: stretch; gap: 12px; }
.wt-wleft { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wt-wdate { font-size: 22px; font-weight: 300; color: rgba(71, 62, 48, .55); }
.wt-wtemp { font-size: 86px; font-weight: 700; line-height: 1; color: #1f2937; }
.wt-wcity { font-size: 20px; color: rgba(71, 62, 48, .55); }
.wt-wicon { flex: none; font-size: 104px; line-height: 1; align-self: flex-start; }
.wt-wsun { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-radius: 14px; background: rgba(217, 119, 6, .1); font-size: 19px; color: rgba(71, 62, 48, .62); }
.wt-wmetrics { display: flex; gap: 40px; font-size: 19px; color: rgba(71, 62, 48, .58); }
.wt-wfc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; flex: 1; }
.wt-fc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; background: rgba(217, 119, 6, .1); }
.wt-fc i { font-style: normal; font-size: 18px; color: rgba(71, 62, 48, .55); }
.wt-fc em { font-style: normal; font-size: 30px; line-height: 1; }
.wt-fc b { font-size: 24px; font-weight: 600; color: #1f2937; }
.wt-fc u { text-decoration: none; font-size: 19px; color: rgba(71, 62, 48, .5); }

/* ── the privacy screen — PrivacyScreen.jsx ──────────────────────────────── */
/* The clock below is the component's own CSS, transplanted rather than
   reinterpreted: the segment geometry, the clip-paths, the 0.08 resting opacity,
   the 420ms segment transition, the reflection's mask and the 34s drift are all
   its numbers. `--ps-clock-size` is the one change — the component sizes it with
   `clamp(4rem, 11vw, 8rem)`, and this tab is a fixed 1284px box where vw means
   the browser window, so it is resolved to 11% of the tab. */
.wt-ps {
  position: absolute; inset: 0; z-index: 10;
  background: #000; cursor: default;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.wt-ps.is-on { opacity: 1; visibility: visible; }

.wt-ps-bg { position: absolute; inset: 0; }
.wt-wp {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 2.5s ease-in-out;
}
.wt-wp.is-on { opacity: 1; }
/* The vignette that keeps the text legible on a bright wallpaper. */
.wt-ps-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .35) 100%);
}
.wt-ps-logo {
  position: absolute; top: 32px; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.wt-ps-logo img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, .4); }
.wt-ps-logo span {
  color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.wt-ps-centre { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }

.ps-clock-wrap {
  --ps-clock-size: 141px;               /* 11% of the tab, per the component's 11vw */
  --ps-clock-color: rgba(255, 255, 255, .9);
  --ps-clock-shadow: rgba(0, 0, 0, .62);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--ps-clock-color);
  perspective: 52rem;
}
.ps-clock-stage {
  position: relative; transform-style: preserve-3d;
  animation: ps-camera-drift 34s ease-in-out infinite;
  filter:
    drop-shadow(0 0 .35rem currentColor)
    drop-shadow(0 0 1.15rem rgba(255, 255, 255, .42))
    drop-shadow(0 1.2rem 2.2rem var(--ps-clock-shadow));
}
.ps-clock-face { display: flex; align-items: center; justify-content: center; gap: calc(var(--ps-clock-size) * .09); transform-style: preserve-3d; }
.ps-clock-main { position: relative; z-index: 2; transform: translateZ(2rem); }
.ps-clock-reflection {
  position: absolute; left: 50%; top: 100%; z-index: 1; opacity: .34;
  transform: translate3d(-50%, -.1rem, -1.5rem) rotateX(68deg) scaleY(-.62);
  transform-origin: top center;
  filter: blur(.08rem) drop-shadow(0 0 1rem rgba(255, 255, 255, .24));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.76), rgba(0,0,0,.18) 54%, transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.76), rgba(0,0,0,.18) 54%, transparent 88%);
}
.ps-digit { position: relative; display: inline-block; width: calc(var(--ps-clock-size) * .5); height: var(--ps-clock-size); }
.ps-segment {
  position: absolute; display: block; background: currentColor; opacity: .08;
  transition: opacity 420ms cubic-bezier(.17, .67, .5, 1.15), filter 420ms ease;
}
.ps-segment[data-active="true"] { opacity: 1; filter: brightness(1.08); }
.ps-segment-top, .ps-segment-middle, .ps-segment-bottom {
  left: 8%; width: 84%; height: 10%;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
}
.ps-segment-top { top: 0; }
.ps-segment-middle { top: 45%; }
.ps-segment-bottom { bottom: 0; }
.ps-segment-upper-left, .ps-segment-upper-right,
.ps-segment-lower-left, .ps-segment-lower-right {
  width: 18%; height: 44%;
  clip-path: polygon(50% 0, 100% 12%, 100% 88%, 50% 100%, 0 88%, 0 12%);
}
.ps-segment-upper-left { top: 5%; left: 0; }
.ps-segment-upper-right { top: 5%; right: 0; }
.ps-segment-lower-left { bottom: 5%; left: 0; }
.ps-segment-lower-right { bottom: 5%; right: 0; }
.ps-colon {
  width: calc(var(--ps-clock-size) * .18); height: var(--ps-clock-size);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--ps-clock-size) * .2);
}
.ps-colon span {
  width: calc(var(--ps-clock-size) * .09); height: calc(var(--ps-clock-size) * .09);
  border-radius: 999px; background: currentColor;
  box-shadow: 0 0 .75rem rgba(255, 255, 255, .56);
}
.ps-clock-meta {
  position: relative; z-index: 3; margin-top: 62px; text-align: center;
  text-shadow: 0 .1rem 1rem rgba(0, 0, 0, .82), 0 .06rem .35rem rgba(0, 0, 0, .9);
}
.ps-clock-meridiem { color: rgba(255, 255, 255, .58); font-size: 23px; font-weight: 500; letter-spacing: .22em; }
.ps-clock-date { margin-top: 6px; color: rgba(255, 255, 255, .62); font-size: 18px; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; }
@keyframes ps-camera-drift {
  0%, 100% { transform: rotateY(-7deg) rotateX(3deg) translate3d(0, 0, 0); }
  25%      { transform: rotateY(5deg) rotateX(1deg) translate3d(.25rem, .35rem, 1rem); }
  50%      { transform: rotateY(8deg) rotateX(-2deg) translate3d(-.3rem, .15rem, 0); }
  75%      { transform: rotateY(-4deg) rotateX(2deg) translate3d(.15rem, -.25rem, .8rem); }
}

/* The hint pulses rather than sitting there: `ps-hint 5s ease-in-out infinite`,
   0 -> 0.6 -> 0, so it is a reminder and not a label. */
.wt-ps-hint {
  position: absolute; bottom: 32px; left: 0; right: 0; z-index: 100; margin: 0;
  text-align: center; color: #fff; font-size: 16px;
  letter-spacing: .2em; text-transform: uppercase;
  animation: ps-hint 5s ease-in-out infinite;
}
@keyframes ps-hint { 0%, 100% { opacity: 0 } 40%, 60% { opacity: .6 } }

/* ── the PIN pad — PinPad.jsx ────────────────────────────────────────────── */
.wt-ps-pin {
  position: absolute; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.wt-ps-pin.is-on { opacity: 1; visibility: visible; }
.wt-pin-card {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 34px 40px; border-radius: 26px;
  background: rgba(30, 27, 24, .96);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: translateY(24px) scale(.92);
  transition: transform .36s cubic-bezier(.2, .9, .3, 1);
}
.wt-ps-pin.is-on .wt-pin-card { transform: none; }
.wt-pin-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wt-pin-lock { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(217, 119, 6, .55); color: #fff; }
.wt-pin-top p { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.wt-pin-row { display: flex; gap: 16px; }
.wt-pin-row i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.wt-pin-row i.is-on { background: #fff; border-color: #fff; transform: scale(1.2); }
.wt-pin-grid { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px; }
.wt-pin-grid span { height: 80px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; font-weight: 600; color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.wt-pin-grid span:empty { background: none; border: 0; }
.wt-pin-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .72); }

/* ==========================================================================
   THE CAMERA TRACKS
   Geometry is in tab space. A point (x, y) lands at stage (fit*z*(x+tx),
   fit*z*(y+ty)), so the visible region is x from -tx over 1284/z, y from -ty
   over 883/z. Every frame below was derived from that, not eyeballed.

   The full-width widgets are 1228 across, so they cannot be zoomed past
   1284/1228 = 1.045 without losing a side — the same constraint the chores
   shop has. So the zooms below frame a PART of a widget (the today rows, two
   notes, the list column) rather than pretending to frame the whole card.
   ========================================================================== */

/* --- chapter 1: `wall` --------------------------------------------------- */
/* Column-local tops: greeting 28, board 483, slideshow 769, lists 1213.
   In tab space at scroll `sc`: y = 28 + (local - sc). The stops are sc=0
   (greeting 56..497, board 511..783), sc=717 (slideshow 80..510) and sc=879,
   the bottom of the column (lists 362..792).

   THE RULE EVERY FRAME BELOW OBEYS: the window must stay inside the tab, so
   |tx| <= 1284(1 - 1/z) and |ty| <= 883(1 - 1/z). The first cut of this track
   ignored it and put the board at ty=-496 with z=1.30 — a window running to
   y=1175 against a tab 883 tall, so a third of the frame was empty page below
   the rail. It is the same mistake the chores tour records fixing, and it is
   invisible in the numbers until you draw it.

   The second constraint is width. The widgets are 1228 across, so anything that
   frames a whole card is capped at z=1.045 — no zoom at all. So the briefing is
   a PAN across one card at a readable zoom rather than a look at all of it: in
   on the times and the titles, across to who each one belongs to.

   The rhythm elsewhere is out -> scroll -> in, never both at once: a zoom riding
   a scroll reads as the wall lurching rather than as someone moving their
   attention. 26s, because there are four things to look at and two of them are
   interactions that have to be allowed to land.

   Each hold is long enough for the LAST ring inside it to finish, not just for
   the last tap to happen. The ring runs 1.2s, so a window that ends 0.6s after
   the final press scrolls the marked thing out from under its own mark.

   And the board is visited TWICE with a pull-back between, because the compose
   dialog is centred on the whole tab: framed tight on the board at z=1.9 it
   opened off the top-right corner of the shot, so the reader watched a note
   being written somewhere out of sight. The camera goes where the app puts the
   thing, not where the storyboard would prefer it. */
@keyframes wt-cam-wall {
  0%,   4%   { --z: 1;    --tx: 0;    --ty: 0;    --sc: 0; }    /* the wall as it stands */
  9%         { --z: 1.28; --tx: -20;  --ty: -46;  --sc: 0;
               animation-timing-function: linear; }             /* in on the briefing */
  17%        { --z: 1.28; --tx: -262; --ty: -46;  --sc: 0; }    /* one steady pan: whose day each line is */
  21%,  24%  { --z: 1.9;  --tx: -14;  --ty: -392; --sc: 0; }    /* down into the board — the + is pressed here */
  27%,  35%  { --z: 1.15; --tx: -84;  --ty: -55;  --sc: 0; }    /* back for the dialog, which takes the screen */
  38%,  44%  { --z: 1.9;  --tx: -14;  --ty: -392; --sc: 0; }    /* in again, for the note landing */
  47%        { --z: 1.05; --tx: -14;  --ty: -38;  --sc: 0; }    /* out, ready to scroll */
  51%,  65%  { --z: 1.18; --tx: -26;  --ty: -66;  --sc: 717; }  /* scroll to the slideshow, then in */
  68%        { --z: 1.05; --tx: -14;  --ty: -40;  --sc: 717; }  /* out again */
  72%,  87%  { --z: 1.6;  --tx: -20;  --ty: -300; --sc: 879; }  /* scroll to the bottom, in on Lists */
  93%, 100%  { --z: 1;    --tx: 0;    --ty: 0;    --sc: 0; }    /* scroll back to the top and out */
}
.ct-stage[data-track="wall"] .ct-cam { animation: wt-cam-wall 28s infinite; }

/* --- chapter 2: `drawer` ------------------------------------------------- */
/* The strip is 28px tall, 3% of the tab. Reading it means a zoom no other track
   on this site goes near: z=3.2 shows 401 x 276, which puts the clock and the
   bell at a readable size. It does not fill the frame and should not — the strip
   IS a thin bar on a real wall, and blowing it up until it looks like a banner
   would be a recreation telling a nicer story than the product's. What makes it
   read as the subject is that it is at the top, that the camera pans its whole
   length, and that the ring lands on the entire bar at the end.

   Then the camera stops. The sheet is full-bleed, so there is no frame that
   holds it and magnifies it, and a pan across the tiles leaves the panes — which
   are full-width rows anchored left — behind. The motion for the second half is
   the drawer itself arriving and the panes changing under a still camera, which
   is also what a person standing at the wall sees. The type is scaled for it;
   see the note above .wt-tiles. */
@keyframes wt-cam-drawer {
  0%,   4%   { --z: 1;    --tx: 0;    --ty: 0;  }   /* the wall as it stands */
  9%,   17%  { --z: 3.2;  --tx: -2;   --ty: 0;
               animation-timing-function: linear; } /* hard in on the clock and the bell */
  24%,  31%  { --z: 3.2;  --tx: -870; --ty: 0;  }   /* one steady pan right, to the face and the weather */
  37%,  41%  { --z: 1;    --tx: 0;    --ty: 0;  }   /* out — the strip is tapped here */
  46%,  88%  { --z: 1.02; --tx: -12;  --ty: -2; }   /* a step in, and hold while the six panes go by */
  /* z is capped at 1.02 by arithmetic, not taste: the sheet's content spans
     x 22..1262, which is 1240 wide, and the window is 1284/z. Any more zoom
     and one edge goes — at 1.06 it was the toggles on the right. */
  95%, 100%  { --z: 1;    --tx: 0;    --ty: 0;  }   /* out, after it closes */
}
.ct-stage[data-track="drawer"] .ct-cam { animation: wt-cam-drawer 24s infinite; }

/* --- chapter 3: `privacy` ------------------------------------------------ */
/* The camera barely moves once the screen is up, and that is the point: the
   clock has its own 34s drift (ps-camera-drift, the component's) and a camera
   pushing in over it would be two hands on the same shot. So it goes in for the
   tap, holds at native scale while the board is gone, and only moves again for
   the PIN pad.

   The logo is the privacy toggle — WallNavigation.jsx:211-214, `title="Privacy
   Screen"` — and it sits at the bottom-left of the rail, x 18..60, y 830..872.
   z=1.35 with ty=-225 is the tightest frame that still holds it: the ceiling is
   883(1 - 1/1.35) = 229. */
@keyframes wt-cam-privacy {
  0%,   4%   { --z: 1;    --tx: 0;    --ty: 0;    --sc: 0; }   /* the wall as it stands */
  9%,  13%   { --z: 1.35; --tx: 0;    --ty: -225; --sc: 0; }   /* down to the logo in the rail */
  18%, 62%   { --z: 1;    --tx: 0;    --ty: 0;    --sc: 0; }   /* out — the board is gone, the clock is up */
  68%, 84%   { --z: 1.25; --tx: -130; --ty: -90;  --sc: 0; }   /* in on the PIN pad */
  90%, 100%  { --z: 1;    --tx: 0;    --ty: 0;    --sc: 0; }   /* out, and back to the board */
}
.ct-stage[data-track="privacy"] .ct-cam { animation: wt-cam-privacy 20s infinite; }

/* ── reduced motion ──────────────────────────────────────────────────────── */
/* The engine stills the camera. What is left is this kit's own looping and
   transitioning parts, which it has to stop by name. */
@media (prefers-reduced-motion: reduce) {
  .wt-ring.is-on { animation: none !important; }
  .wt-caret { animation: none !important; opacity: 0; }
  .wt-note.is-new { animation: none !important; }
  .wt-slide, .wt-pane, .wt-ins-card, .wt-modal, .wt-modal-card,
  .wt-drawer-sheet, .wt-item, .wt-box, .wt-ps, .wt-wp, .wt-ps-pin,
  .wt-pin-card, .wt-pin-row i, .ps-segment { transition: none !important; }
  /* The component stills these two itself under reduced motion. */
  .ps-clock-stage, .wt-ps-hint { animation: none !important; }
  .wt-ps-hint { opacity: .6; }
}