@bongos/core 1.25.27 → 1.25.28

package/modules/hall-ui/public/home-camera.js

@@ -0,0 +1,188 @@
+// modules/hall-ui/public/home-camera.js — the camera over Home's city in game mode (task 1005305).
+//
+// WHY. In game mode the builder's Home is only the city (owner, 2026-11-14): no page scroll,
+// the city a world larger than the view, moved the way a base-building game is moved. This
+// file is that movement and nothing else: the arrow keys, a drag, and the cursor resting at an
+// edge of the screen all pan the world; the page never scrolls. The scene owns its camera
+// (ADR 0399 §2.2: the visor owns none), so this is Home's, attached by home-city.js.
+//
+// The world is the city's own <svg>, sized past the view on both axes and moved with a
+// transform, so the drawing (home-city-draw.js) and every hover and tap on it are unchanged.
+// The maths (worldSize, clamp, edgePush) is pure and exported for the tests.
+(function (root) {
+  'use strict';
+
+  var OVER = 1.35;     // the world is this many views wide and tall, at least
+  var EDGE = 56;       // px from an edge of the view where the cursor starts to push
+  var KEY_SPEED = 900; // px a second while an arrow key is held
+  var EDGE_SPEED = 1000; // px a second with the cursor on the very edge
+  var DRAG_SLOP = 5;   // px a press may wander and still be a tap
+  var KEYS = { ArrowLeft: [1, 0], ArrowRight: [-1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+
+  // The world's size in px for a view and the drawing's own proportions (its viewBox): the
+  // smallest size that keeps the drawing's shape and is at least OVER views on both axes.
+  function worldSize(vw, vh, bw, bh) {
+    if (!(vw > 0 && vh > 0 && bw > 0 && bh > 0)) return { w: 0, h: 0 };
+    var s = OVER * Math.max(vw / bw, vh / bh);
+    return { w: Math.round(bw * s), h: Math.round(bh * s) };
+  }
+  // The camera is the world's offset in the view: 0 shows its left/top edge, view − world its
+  // right/bottom. It never shows past an edge.
+  function clamp(v, view, world) { return Math.min(0, Math.max(view - world, v)); }
+  // How hard the cursor pushes on one axis, −1…1: nothing until it is within EDGE of a side,
+  // then more the closer it is. Positive moves the world right/down (the view goes left/up).
+  function edgePush(p, view) {
+    if (!(view > 0) || p == null) return 0;
+    if (p < EDGE) return Math.min(1, (EDGE - Math.max(0, p)) / EDGE);
+    if (p > view - EDGE) return -Math.min(1, (Math.min(view, p) - (view - EDGE)) / EDGE);
+    return 0;
+  }
+
+  // Something above the scene has the keyboard or the pointer: a dialog, the game's windows,
+  // the character picker, the start screen, the visor's sheet.
+  // Asked on every frame of a pan, so the page is searched at most a few times a second.
+  var coverAt = 0, coverWas = false;
+  function covered() {
+    var now = Date.now();
+    if (now - coverAt < 200) return coverWas;
+    coverAt = now;
+    return (coverWas = isCovered());
+  }
+  function isCovered() {
+    var html = document.documentElement, c = html.classList;
+    if (c && (c.contains('craft-picker-open') || c.contains('gs-open') || c.contains('opt-window-open') || c.contains('game-menu-open'))) return true;
+    if (root.OTBVisor && typeof root.OTBVisor.isOpen === 'function' && root.OTBVisor.isOpen()) return true;
+    var up = document.querySelectorAll('dialog[open], [aria-modal="true"]');
+    for (var i = 0; i < up.length; i++) if (!up[i].closest('[hidden]')) return true;
+    return false;
+  }
+  function inField(el) {
+    var tag = el && el.tagName ? String(el.tagName).toLowerCase() : '';
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || !!(el && (el.isContentEditable || (el.closest && el.closest('[role="slider"]'))));
+  }
+
+  // attach(stage, world): `stage` is the element that fills the view, `world` the drawing moved
+  // inside it. Returns { set(on), fit(), centre(), at() }. Off, it holds no listener and
+  // leaves no style behind.
+  function attach(stage, world) {
+    var on = false, x = 0, y = 0, size = { w: 0, h: 0 }, placed = false;
+    var held = {}, mouse = null, raf = null, last = 0, drag = null, ate = false;
+
+    function view() { return { w: stage.clientWidth || root.innerWidth || 0, h: stage.clientHeight || root.innerHeight || 0 }; }
+    function box() {
+      var b = String(world.getAttribute('viewBox') || '').split(/[\s,]+/).map(Number);
+      return b.length === 4 && b[2] > 0 && b[3] > 0 ? { w: b[2], h: b[3] } : null;
+    }
+    function paint() { world.style.transform = 'translate3d(' + Math.round(x) + 'px,' + Math.round(y) + 'px,0)'; }
+    function move(nx, ny) {
+      var v = view();
+      x = clamp(nx, v.w, size.w); y = clamp(ny, v.h, size.h);
+      paint();
+    }
+    // Size the world for this view; the first time, and whenever asked, look at its middle.
+    function fit(recentre) {
+      if (!on) return;
+      var v = view(), b = box();
+      if (!b) return;
+      var was = size, cx = placed && was.w ? (v.w / 2 - x) / was.w : 0.5, cy = placed && was.h ? (v.h / 2 - y) / was.h : 0.5;
+      size = worldSize(v.w, v.h, b.w, b.h);
+      world.style.width = size.w + 'px';
+      world.style.height = size.h + 'px';
+      if (recentre || !placed) { cx = 0.5; cy = 0.5; }
+      placed = true;
+      move(v.w / 2 - cx * size.w, v.h / 2 - cy * size.h);
+    }
+
+    function pushing() {
+      var dx = 0, dy = 0, k;
+      for (k in held) if (held[k] && KEYS[k]) { dx += KEYS[k][0]; dy += KEYS[k][1]; }
+      var ex = 0, ey = 0;
+      if (mouse && !drag) { var v = view(); ex = edgePush(mouse.x, v.w); ey = edgePush(mouse.y, v.h); }
+      return { x: dx * KEY_SPEED + ex * EDGE_SPEED, y: dy * KEY_SPEED + ey * EDGE_SPEED };
+    }
+    function frame(now) {
+      raf = null;
+      if (!on) return;
+      var p = covered() ? { x: 0, y: 0 } : pushing();
+      var dt = Math.min(0.05, last ? (now - last) / 1000 : 0.016);
+      last = now;
+      if (!p.x && !p.y) { last = 0; return; }
+      move(x + p.x * dt, y + p.y * dt);
+      raf = root.requestAnimationFrame(frame);
+    }
+    function wake() { if (on && !raf) raf = root.requestAnimationFrame(frame); }
+
+    function onKeyDown(e) {
+      if (!KEYS[e.key] || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || inField(e.target) || covered()) return;
+      e.preventDefault(); // the arrows move the city; the page never scrolls
+      held[e.key] = true;
+      wake();
+    }
+    function onKeyUp(e) { if (KEYS[e.key]) held[e.key] = false; }
+    function onBlur() { held = {}; mouse = null; }
+    // The cursor pushes only from the scene: over the glass's own controls, or anything drawn
+    // above the stage, resting near an edge is reaching for a button, not for the city.
+    function onPointerMove(e) {
+      if (drag) {
+        var mx = e.clientX - drag.px, my = e.clientY - drag.py;
+        if (!drag.moved && Math.abs(mx) + Math.abs(my) < DRAG_SLOP) return;
+        drag.moved = true;
+        stage.classList.add('is-dragging');
+        move(drag.x + mx, drag.y + my);
+        return;
+      }
+      if (e.pointerType && e.pointerType !== 'mouse') return;
+      // the visor's time band lies over the top of the view; resting there still pushes up
+      var el = e.target && e.target.nodeType === 1 ? e.target : null;
+      var over = !!el && (stage.contains(el) || !!(el.closest && el.closest('[data-visor-scrub]')));
+      mouse = over ? { x: e.clientX, y: e.clientY } : null;
+      if (mouse) wake();
+    }
+    function onPointerLeave() { mouse = null; }
+    function onPointerDown(e) {
+      if (e.button !== 0 || !stage.contains(e.target) || covered()) return;
+      drag = { px: e.clientX, py: e.clientY, x: x, y: y, moved: false };
+    }
+    function onPointerUp() {
+      if (!drag) return;
+      ate = drag.moved; // the click that ends a drag is not a tap on a tower
+      drag = null;
+      stage.classList.remove('is-dragging');
+      if (ate) root.setTimeout(function () { ate = false; }, 0);
+    }
+    // Capture on window, so it runs before every tap handler on the page (home-runner.js
+    // listens in capture on document).
+    function onClick(e) {
+      if (!ate) return;
+      ate = false;
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    function onResize() { fit(false); }
+    // A plain wheel has nowhere to scroll to; held so a trackpad cannot rubber-band the page.
+    function onWheel(e) { if (!e.ctrlKey && stage.contains(e.target)) e.preventDefault(); }
+
+    var wired = [
+      [root, 'keydown', onKeyDown], [root, 'keyup', onKeyUp], [root, 'blur', onBlur], [root, 'resize', onResize],
+      [root, 'pointermove', onPointerMove], [root, 'pointerdown', onPointerDown], [root, 'pointerup', onPointerUp],
+      [root, 'pointercancel', onPointerUp], [root, 'click', onClick, true],
+      [document.documentElement, 'pointerleave', onPointerLeave], [stage, 'wheel', onWheel, { passive: false }],
+    ];
+    function set(next) {
+      next = !!next;
+      if (next === on) { if (on) fit(false); return; }
+      on = next;
+      wired.forEach(function (w) { w[0][on ? 'addEventListener' : 'removeEventListener'](w[1], w[2], w[3] || false); });
+      if (on) { placed = false; fit(true); return; }
+      if (raf) root.cancelAnimationFrame(raf);
+      raf = null; held = {}; mouse = null; drag = null; last = 0;
+      world.style.transform = ''; world.style.width = ''; world.style.height = '';
+      stage.classList.remove('is-dragging');
+    }
+    return { set: set, fit: function () { fit(false); }, centre: function () { fit(true); }, at: function () { return { x: x, y: y, w: size.w, h: size.h, on: on }; } };
+  }
+
+  var api = { attach: attach, worldSize: worldSize, clamp: clamp, edgePush: edgePush, EDGE: EDGE, OVER: OVER };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  if (root) root.OTBHomeCamera = api;
+})(typeof window !== 'undefined' ? window : null);

package/modules/hall-ui/public/home-city.css

@@ -137,3 +137,17 @@ html[data-theme="dark"] .home-city.hc-is-sky { background: linear-gradient(color
   .hc-ladder { width: auto; margin: 12px 18px 4px; }
   .hc-time { padding: 6px 16px 16px; }
 }
+
+/* GAME MODE: THE CITY IS THE WHOLE VIEW (task 1005305, owner 2026-11-14). Where Home shows the
+   city in game mode (html.hc-world, set by home-city.js) the page does not scroll and holds
+   nothing but the city: the greeting, the cards under it, the ladder, the slider and the foot
+   are off the scene (time is on the visor, ADR 0403). The city is a world larger than the view,
+   sized and moved by home-camera.js: the arrow keys, a drag, or the cursor at an edge. Classic
+   mode, and the artist's gallery, are untouched. */
+html.hc-world, html.hc-world body { overflow: hidden; overscroll-behavior: none; }
+html.hc-world .page-head--hall, html.hc-world .app-foot, html.hc-world #zone-home-banner,
+html.hc-world #zone-home-band, html.hc-world #zone-home-main, html.hc-world .hc-ladder, html.hc-world .hc-time { display: none; }
+html.hc-world .home-city { position: fixed; inset: 0; z-index: 0; margin: 0; border-radius: 0; }
+html.hc-world .hc-stage { position: absolute; inset: 0; display: block; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
+html.hc-world .hc-svg { position: absolute; left: 0; top: 0; flex: none; max-width: none; will-change: transform; }
+html.hc-world .hc-stage.is-dragging .hc-svg a { pointer-events: none; }

package/modules/hall-ui/public/home-city.js

@@ -26,6 +26,12 @@
 // The governor's Home is the street (task 1005064; the v16 round's v16-governing.html):
 // choosing Governing on Home, or opening Home with it chosen, goes to the street page
 // (GovCity.STREET_HREF), which is never redrawn here.
+//
+// In game mode the city is the whole view (task 1005305, owner 2026-11-14): the page does
+// not scroll, the cards under the city, the ladder and the slider are off the scene, and the
+// city is a world moved by the arrow keys, a drag, or the cursor at an edge of the screen
+// (home-camera.js). Time is the visor's there (ADR 0403): this file hands OTBVisor.timeline
+// the week it is on and what a drag, play, the speed and Back to live do.
 (function () {
   'use strict';
   if (!window.OTB || typeof window.OTB.contributeHallWidget !== 'function') return;
@@ -37,6 +43,7 @@
   // the player's speeds, in weeks per frame at 60 fps: rewind and fast forward cross the
   // whole slider in about five and four seconds; play is about a week every 1.6 s
   const SPEED = { rw: -1 / 34, play: 1 / 96, ff: 1 / 26 };
+  const RATES = [1, 2, 4]; // how fast play runs on the visor (game mode): 1×, 2×, 4×
   const STILL = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
   const CRAFTS = [
     ['art', 'artist', 'Art', 'pages designed'],
@@ -57,7 +64,7 @@
   const SKY_LABEL = 'The project\'s ideas as a night sky over the city\'s real skyline, with this week\'s ideators ranked beside it';
   const CITY_LABEL = 'The project as a city: one tower per working area, as tall as what has shipped there, with the builders of the week beside it';
 
-  let host = null, model = null, viewerId = null, t = 0, target = 0, raf = null, run = null, lastWeek = -1, shown = false, gallery = null, ideaBox = null;
+  let host = null, model = null, viewerId = null, t = 0, target = 0, raf = null, run = null, lastWeek = -1, shown = false, gallery = null, ideaBox = null, camera = null, rate = 1, rowsWere = '';
   const rungs = new Map();
 
   function mode() {
@@ -109,8 +116,10 @@
     host.classList.toggle('hc-is-sky', sky);
     svg.setAttribute('aria-label', sky ? SKY_LABEL : CITY_LABEL);
     host.querySelector('#home-city-h').textContent = sky ? 'The project\'s ideas this week' : 'The project this week';
+    const boxWas = svg.getAttribute('viewBox');
     svg.setAttribute('viewBox', out.viewBox);
     svg.replaceChildren(...out.nodes.map(build));
+    if (camera && boxWas !== out.viewBox) camera.fit();
   }
 
   // ---- the ladder: a small face and one line split by craft, ranked ----
@@ -202,6 +211,22 @@
     if (w !== lastWeek) { lastWeek = w; drawLadder(); }
     buttons();
   }
+  // ---- game mode: time is on the visor (task 1005305). The strip under the top arc is the
+  // slider; back in time the glass shows the date, play, the speed and Back to live. ----
+  function timeline() {
+    const V = window.OTBVisor;
+    if (!V || typeof V.timeline !== 'function') return;
+    if (!model || !world()) { V.timeline(null); return; }
+    const end = Math.max(1, model.W - 1);
+    V.timeline({
+      value: t / end, live: atLive(t), label: when(t), playing: run === 'play', speed: rate + '×',
+      seek: (f) => glideTo(f * end), play: () => press('play'), faster, toLive: () => glideTo(model.W - 1),
+    });
+    // the scene's rows change only with play, the speed or live: never on a frame of a glide
+    const rows = (run === 'play') + '|' + rate + '|' + atLive(t);
+    if (rows !== rowsWere) { rowsWere = rows; registerScene(); }
+  }
+  function faster() { rate = RATES[(RATES.indexOf(rate) + 1) % RATES.length]; buttons(); }
   function buttons() {
     const b = (k) => host.querySelector(`.hc-p-${k}`);
     b('play').classList.toggle('is-playing', run === 'play');
@@ -209,12 +234,13 @@
     ['rw', 'play', 'ff'].forEach((k) => b(k).setAttribute('aria-pressed', String(run === k)));
     b('rw').disabled = t <= 1e-3 && run !== 'rw';
     b('ff').disabled = atLive(t) && run !== 'ff';
+    timeline();
   }
   function halt() { if (raf) cancelAnimationFrame(raf); raf = null; run = null; target = t; if (host) buttons(); }
   function tick() {
     raf = requestAnimationFrame(() => {
       let v;
-      if (run) { v = t + SPEED[run]; if (v <= 0 || v >= model.W - 1) { v = Math.max(0, Math.min(model.W - 1, v)); run = null; } target = v; }
+      if (run) { v = t + SPEED[run] * (run === 'play' ? rate : 1); if (v <= 0 || v >= model.W - 1) { v = Math.max(0, Math.min(model.W - 1, v)); run = null; } target = v; }
       else { v = t + (target - t) * 0.16; if (Math.abs(target - v) < 0.004) v = target; }
       setT(v);
       if (run || v !== target) tick(); else { raf = null; buttons(); }
@@ -307,6 +333,25 @@
     if (gallery) gallery.show(art);
     if (ideaBox) ideaBox.show(idea);
     host.hidden = !(art || idea || shown);
+    worldMode();
+  }
+
+  // ---- game mode: the city is the whole view (task 1005305) ----
+  // Only where the city is what Home shows: in the gallery (the artist's Home) nothing changes.
+  function world() {
+    return document.documentElement.dataset.game === 'on' && shown && !!host && !host.classList.contains('hc--gallery');
+  }
+  function worldMode() {
+    if (!host) return;
+    const on = world(), html = document.documentElement;
+    if (html.classList.contains('hc-world') !== on) {
+      html.classList.toggle('hc-world', on);
+      if (on) window.scrollTo(0, 0);
+    }
+    if (!camera && on && window.OTBHomeCamera) camera = window.OTBHomeCamera.attach(host.querySelector('.hc-stage'), host.querySelector('.hc-svg'));
+    if (camera) camera.set(on);
+    timeline();
+    registerScene();
   }
 
   // ---- the governor's Home is the street; tests swap the hop for a recorder ----
@@ -353,6 +398,7 @@
     document.addEventListener('otb:craft', craftHome);
     craftHome();
     new MutationObserver(() => { if (model) drawScene(); }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    new MutationObserver(worldMode).observe(document.documentElement, { attributes: true, attributeFilter: ['data-game'] });
     document.addEventListener('otb:craft', () => { if (model) { drawScene(); drawLadder(); } });
     window.addEventListener('resize', () => { if (model) drawLadder(); });
     document.addEventListener('otb:home-runner', () => { if (model) drawScene(); });
@@ -364,11 +410,20 @@
   // the gallery's own rows (home-gallery.js visorActions), registered again when they change.
   let sceneSig = null;
   function registerScene() {
-    const actions = gallery && gallery.visorActions ? gallery.visorActions() : [];
-    const sig = actions.map((a) => a.label + '|' + (a.key || '')).join('\n');
+    // task 1005305: in the city the scene's rows are its time (play, the speed, back to live)
+    // and the way back to its middle; its keys line says how to move; the sight is the cursor.
+    const city = world();
+    const actions = city ? [
+      { label: run === 'play' ? 'Pause the city' : 'Play the city over time', key: 'p', bind: true, run: () => press('play') },
+      { label: 'Speed · ' + rate + '×', key: 's', bind: true, run: faster },
+      ...(atLive(t) ? [] : [{ label: 'Back to live', key: 'l', bind: true, run: () => glideTo(model.W - 1) }]),
+      { label: 'Back to the middle of the city', key: 'h', bind: true, run: () => { if (camera) camera.centre(); } },
+    ] : (gallery && gallery.visorActions ? gallery.visorActions() : []);
+    const keys = city ? [{ label: 'Move around the city', key: 'Arrows' }] : [];
+    const sig = (city ? 'city\n' : '') + actions.map((a) => a.label + '|' + (a.key || '')).join('\n');
     if (sig === sceneSig && window.__visorScene) return;
     sceneSig = sig;
-    window.__visorScene = { name: 'home', place: 'Home', actions };
+    window.__visorScene = { name: 'home', place: 'Home', actions, keys, aim: city };
     if (window.OTBVisor) window.OTBVisor.scene(window.__visorScene);
   }
 

package/modules/hall-ui/public/index.html

@@ -19,11 +19,11 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
-  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-12-runner">
+  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-14-world">
   <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-07-brand-mark">
   <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-11-view2">
   <link rel="stylesheet" href="/builders/hall-ask.css">
-  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-12-runner">
+  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-14-world">
   <link rel="stylesheet" href="/builders/home-gallery.css">
   <link rel="stylesheet" href="/builders/home-idea-box.css">
 </head>
@@ -109,7 +109,7 @@
 <script src="/builders/shell.js?v=2026-11-13-founding" defer></script>
 <script src="/builders/hall-dialog.js" defer></script>
 <!-- task 1005148: the visor (glass over the scene, game mode only; ADR 0399), after the shell and hall-dialog.js -->
-<script src="/builders/visor.js?v=2026-11-12-runner" defer></script>
+<script src="/builders/visor.js?v=2026-11-14-world" defer></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task 2166: the shared component kit (window.OTBKit) — pager/ledger/rail.
@@ -138,7 +138,9 @@
 <!-- task 1005243: your runner on Home's towers (game mode; the visor carries its card and button) -->
 <script src="/builders/runner-button.js" defer></script>
 <script src="/builders/home-runner.js" defer></script>
-<script src="/builders/home-city.js?v=2026-11-12-runner" defer></script>
+<!-- task 1005305: the camera over the city in game mode (arrow keys, a drag, the cursor at an edge) -->
+<script src="/builders/home-camera.js" defer></script>
+<script src="/builders/home-city.js?v=2026-11-14-world" defer></script>
 <!-- task 1003455: the shared blocker-row renderer (window.OTBBlockersLib), read by
      both goal-inbox.js's attention-inbox slice below and the /blockers page.
      Loaded BEFORE goal-inbox.js, which calls it while rendering. -->

package/modules/hall-ui/public/visor.css

@@ -301,3 +301,40 @@ html.visor-on.game-menu-open .visor > :not(.visor__frame, .visor__notch) { opaci
 
 /* a phone (640px and narrower): the rules live in style.css’s shared phone block, so the
    visor adds no breakpoint of its own (the design-count ratchet). */
+
+/* THE SIGHT IS THE CURSOR (task 1005305, owner 2026-11-14). In a scene that asks for it (Home's
+   city) the sight follows the mouse and the arrow is not drawn over the scene, so what you point
+   with is the crosshair. Over the glass's own controls, a window or a field the arrow is back
+   and the sight steps aside; before the mouse moves, and on touch, it rests at the centre. */
+.visor__sight { left: var(--sight-x, 50%); top: var(--sight-y, 50%); }
+html.visor-aim, html.visor-aim body, html.visor-aim body * { cursor: none !important; }
+.visor[data-aim="ui"] .visor__sight { visibility: hidden; }
+
+/* THE SCENE'S TIME ON THE GLASS (task 1005305): the top arc, which reads the version's progress,
+   is also a slider you drag to go back through the weeks. The band that takes the drag is the
+   arc's own box, and the mark rides the curve where you are in time. Back in time, the date and
+   the player (play or pause, the speed, Live) stand on the top line beside the place. The band
+   and the three buttons are the only parts here that take a pointer. */
+.visor__scrub { pointer-events: auto; cursor: ew-resize; touch-action: none; }
+.visor__scrub-at {
+  position: absolute; left: var(--scrub-x, 92.4%); top: var(--scrub-y, 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px;
+  box-sizing: border-box; background: var(--ink); border: var(--line-strong) solid var(--bg); transform: rotate(45deg); pointer-events: none;
+  transition: opacity var(--ds-dur-base) var(--ds-ease);
+}
+.visor--rest .visor__scrub-at { opacity: 0; }
+.visor__scrub:focus-visible { outline: 0; }
+.visor__scrub:focus-visible .visor__scrub-at { box-shadow: var(--press-focus); }
+.visor__progress--time { gap: var(--ds-space-hair); }
+.visor__when { color: var(--ink); font-variant-numeric: tabular-nums; }
+.visor__time { display: flex; align-items: center; gap: var(--ds-space-hair); }
+.visor__tbtn {
+  pointer-events: auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+  min-width: 28px; height: 24px; padding: 0 var(--ds-space-hair); border: var(--line-strong) solid currentColor; background: var(--bg);
+  color: var(--ink-soft); font-family: var(--name-face); font-weight: var(--name-weight); text-transform: var(--name-case);
+  font-size: var(--ds-text-xs); letter-spacing: var(--name-space); line-height: 1; cursor: pointer;
+}
+.visor__tbtn:hover { color: var(--ink); }
+.visor__tbtn:focus-visible { outline: 0; box-shadow: var(--press-focus); }
+.visor__tbtn svg { width: 12px; height: 12px; fill: currentColor; }
+.visor__tbtn--play .visor__tpause, .visor__tbtn--play.is-playing .visor__tplay { display: none; }
+.visor__tbtn--play.is-playing .visor__tpause { display: block; }