/* Built by tools/assemble.mjs from css/sections/*.css: edit those, then run it. */
/* ▸ 10-hero.css */
/* sections/10-hero.html's own styles (W-1): the hero and its scene. Classes take the prefix .v3-hero-.
   The stage is the family's blurry screen (the hills' own frosted copy, lined up with the photo behind it, a veil
   thickening to the foot, a hairline of light on top) with a Mac's notch and menu bar; on it the desk, whose tiles are
   crops of one picture per theme (assets/hero/<set>-<theme>.webp: the engine's renders, transparent between widgets).
   The script writes, per frame, only transforms and opacities (the desk's scale is CSS's). The day and dusk skins are two
   whole layers, cross-faded, so nothing repaints while the scene scrubs. url()s resolve from css/sections.css. */

.v3-hero {
  --stick: calc(var(--nav-clear, 88px) - 12px);     /* the pinned stage sits just under the nav pill */
  --dl: clamp(14px, 2.5vw, 36px);                   /* the screen's inset from the stage's sides … */
  --dt: clamp(14px, 2.5vw, 36px);                   /* … and from its top */
  --dr: clamp(14px, 1.6vw, 22px);                   /* the screen's top corners */
  --mb: 28px;                                       /* the menu bar */
  --wt: clamp(12px, 1.4vw, 18px);                   /* the desk's top margin under the menu bar */
  --cap-h: 86px;                                    /* the caption's room at the screen's foot */
  --run: 150svh;                                    /* how long the stage stays pinned: the scene's scroll */
  --sw: min(100vw - 40px, 1400px);                  /* the stage's width … */
  --sh: clamp(560px, 100svh - var(--stick) - 14px, 900px);   /* … and height */
  position: relative;
}
.v3-hero-track { position: relative; }

/* ── the header, stacked: the stage starts within 420 px of the top at 1440 × 800 ── */
.v3-hero-head { position: relative; z-index: 1; padding-top: var(--nav-clear, 88px); }
.v3-hero-app { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 650 19px/1 var(--font-d); letter-spacing: -.015em; color: var(--ink); }
.v3-hero-app img { width: 44px; height: 44px; border-radius: 11px; }
.v3-hero-h { font: 700 clamp(44px, 5.4vw, 80px)/1.02 var(--font-d); letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.v3-hero-lead { margin-top: 18px; max-width: 36em; }
.v3-hero-row { margin-top: 26px; }

/* ── the stage, pinned while the scene runs ── */
.v3-hero-pin { position: sticky; top: max(var(--stick), (100svh - var(--sh)) / 2 + 6px); margin-top: 28px; }
.v3-hero-stage {
  /* the desk's grid step --p (a 71-pt cell and a 16-pt gap at the desk's scale), worked out here from the stage's own
     size so the first paint is already the final one (no shift when the script starts): as large as fits, up to 1.1 ×
     design size, never below 0.74 ×; a phone's desk never below design size (it runs off the foot instead) */
  --cols: 12; --rows: 6;
  --p: clamp(64px, min((var(--sw) - 2 * var(--dl) - 48px) / 11.816, (var(--sh) - var(--dt) - var(--mb) - var(--wt) - var(--cap-h)) / 5.816), 95.7px);
  --g: calc(var(--p) * 16 / 87);
  --ww: calc(var(--cols) * var(--p) - var(--g)); --wh: calc(var(--rows) * var(--p) - var(--g));
  position: relative; isolation: isolate; overflow: clip;
  width: min(100% - 40px, 1400px); margin-inline: auto;
  height: var(--sh);
  border-radius: var(--r-big);
  background: var(--scene-bg);
  contain: layout paint;
}
/* the phone's desk (4 × 7) on a phone and on a narrow upright window; on a phone never below design size */
@media (max-width: 1023px) and (orientation: portrait) {
  .v3-hero-stage { --cols: 4; --rows: 7; --p: clamp(70px, min((var(--sw) - 2 * var(--dl) - 34px) / 3.816, (var(--sh) - var(--dt) - var(--mb) - var(--wt) - var(--cap-h)) / 6.816), 100px); }
}
@media (max-width: 700px) {
  .v3-hero-stage { --cols: 4; --rows: 7; --p: clamp(87px, (var(--sw) - 2 * var(--dl) - 34px) / 3.816, 100px); }
}
.v3-hero-run { height: var(--run); }

/* the scenery: the base skin is the page's grade (day on a light page, dusk on a dark one); on a light page the dusk
   skin comes over it for Liquid Glass and Frost Glass, whose ink is white */
.v3-hero-skin { position: absolute; inset: 0; z-index: 0; --mbi: var(--mb-ink); --cap: var(--ink); --cap2: #444C54; --cap-rgb: 4 9 15; }
:root[data-theme="dark"] .v3-hero-skin { --cap2: var(--text-2); --cap-rgb: 246 248 249; }
.v3-hero-dusk { --mbi: rgb(255 255 255 / .92); --cap: #F6F8F9; --cap2: rgb(226 232 238 / .74); --cap-rgb: 246 248 249; }
.v3-hero-skin--dusk { opacity: 0; visibility: hidden; will-change: opacity; }
.v3-hero-skin--dusk.is-on { visibility: visible; }
.v3-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 42%); }
.v3-hero-screen { position: absolute; left: var(--dl); right: var(--dl); top: var(--dt); bottom: 0; overflow: hidden; border-radius: var(--dr) var(--dr) 0 0; }
/* the frosted copy covers the stage's box, as the photo does, so the blur lines up with the hills round the screen */
.v3-hero-frost { position: absolute; left: calc(-1 * var(--dl)); top: calc(-1 * var(--dt)); width: calc(100% + 2 * var(--dl)); height: calc(100% + var(--dt)); max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 42%); }
.v3-hero-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--veil); box-shadow: inset 0 1px 0 var(--glass-top), inset 0 0 0 .5px var(--glass-rim); }
/* by day, the veil thickens a little more under the caption, so its words read at AA on the misty foot */
:root:not([data-theme="dark"]) .v3-hero-skin:not(.v3-hero-dusk) .v3-hero-screen::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: calc(var(--cap-h) + 44px); pointer-events: none;
  background: linear-gradient(180deg, rgb(246 249 250 / 0) 0%, rgb(246 249 250 / .64) 72%, rgb(246 249 250 / .7) 100%);
}
.v3-hero-dusk .v3-hero-screen::after {
  background: linear-gradient(180deg, rgb(20 28 36 / .16) 0%, rgb(22 30 38 / .32) 55%, rgb(26 34 42 / .5) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 .5px rgb(255 255 255 / .12);
}

/* the menu bar (on each skin, in its ink) */
.v3-hero-menubar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: var(--mb);
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  font: 500 13px/1 var(--font); letter-spacing: -.005em; color: var(--mbi);
  background: var(--mb-bg); box-shadow: inset 0 -.5px 0 var(--mb-line);
}
.v3-hero-dusk .v3-hero-menubar { background: rgb(8 10 13 / .16); box-shadow: inset 0 -.5px 0 rgb(255 255 255 / .08); }
.v3-hero-menubar b { font-weight: 700; }
.v3-hero-mb-end { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; white-space: pre; }
.v3-hero-mb-end .s-i { font-size: 15px; stroke-width: 1.6; }

/* the caption at the screen's foot (on each skin): "Snaps to one grid." while the widgets fly in, then the seven
   themes, the current one in full ink (each name's opacity follows the scroll) */
.v3-hero-cap { position: absolute; left: clamp(18px, 2.2vw, 30px); right: clamp(18px, 2.2vw, 30px); bottom: clamp(18px, 2.2vw, 28px); z-index: 1; }
.v3-hero-cap p { font: 500 17px/1.35 var(--font); letter-spacing: -.01em; color: var(--cap2); max-width: 62em; }
.v3-hero-cap b { font-weight: 650; color: var(--cap); }
.v3-hero-cap__b { position: absolute; left: 0; bottom: 0; opacity: 0; }
/* (the current name in full ink, the others at 62 %: the colour's own alpha, so a contrast check sees what's drawn) */
.v3-hero-names i { --a: .66; font-style: normal; font-weight: 600; color: rgb(var(--cap-rgb) / var(--a)); margin-right: .5em; white-space: nowrap; }
.v3-hero-names i:first-child { --a: 1; }

/* ── the glass: the notch, the desk, the hint ── */
.v3-hero-glass { position: absolute; left: var(--dl); right: var(--dl); top: var(--dt); bottom: 0; z-index: 2; overflow: hidden; border-radius: var(--dr) var(--dr) 0 0; }
.v3-hero-notch { position: absolute; left: 50%; top: 0; z-index: 4; width: clamp(116px, 13.5%, 192px); height: calc(var(--mb) + 3px); transform: translateX(-50%); border-radius: 0 0 13px 13px; background: #000; }

/* the desk on the one grid, at --k × design size */
.v3-hero-wall {
  --ww: calc(var(--cols) * var(--p) - var(--g)); --wh: calc(var(--rows) * var(--p) - var(--g));
  position: absolute; left: calc((100% - var(--ww)) / 2);
  top: calc(var(--mb) + var(--wt) + max(0px, (var(--sh) - var(--dt) - var(--mb) - var(--wt) - var(--cap-h) - var(--wh)) / 2));
  width: var(--ww); height: var(--wh);
  border-radius: calc(var(--p) * 24 / 87);
}
.v3-hero-wall--desk { --cols: 12; --rows: 6; }
.v3-hero-wall--phone { --cols: 4; --rows: 7; display: none; }
@media (max-width: 700px), (max-width: 1023px) and (orientation: portrait) { .v3-hero-wall--desk { display: none; } .v3-hero-wall--phone { display: block; } }
.v3-hero-wall:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 8px; }

/* the grid in edit mode, as the desktop app draws it while a widget is dragged: faint cells, 16 apart, across the
   screen and lined up with the desk's own */
.v3-hero-cells {
  position: absolute; left: calc(var(--p) * -3); top: calc(var(--p) * -1); width: calc(var(--p) * (var(--cols) + 6)); height: calc(var(--p) * (var(--rows) + 1) - var(--g));
  pointer-events: none; opacity: 0; will-change: opacity;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87 87'%3E%3Crect x='.25' y='.25' width='70.5' height='70.5' rx='16' fill='%23fff' fill-opacity='.1' stroke='%23fff' stroke-opacity='.42' stroke-width='.5'/%3E%3C/svg%3E") 0 0 / var(--p) var(--p);
}
:root[data-theme="dark"] .v3-hero-cells { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87 87'%3E%3Crect x='.25' y='.25' width='70.5' height='70.5' rx='16' fill='%23fff' fill-opacity='.06' stroke='%23fff' stroke-opacity='.18' stroke-width='.5'/%3E%3C/svg%3E"); }
.js .v3-hero-cells { opacity: 1; }

/* a tile: one widget's slot, exactly its card. It flies by transform; its two faces are crops of the theme pictures
   (the outgoing and the incoming theme while a step fades) */
.v3-hero-tile, .v3-hero-slot {
  position: absolute;
  left: calc(var(--x) * var(--p)); top: calc(var(--y) * var(--p));
  width: calc(var(--c) * var(--p) - var(--g)); height: calc(var(--r) * var(--p) - var(--g));
  --rk: calc(var(--rad, 24) * var(--p) / 87);
}
.v3-hero-tile { z-index: 1; transform: translate3d(calc(var(--sx) * var(--p)), calc(var(--sy) * var(--p)), 0); will-change: transform; }
.v3-hero-tile[data-f="tile"] { --rad: 999; }
.v3-hero-tile[data-w="native.cc.nowplaying"] { --rad: 40; }
.v3-hero-tile[data-w="native.cc.volume"] { --rad: 30; }
.v3-hero-tile[data-w="native.cc.brightness"] { --rad: 28; }
.v3-hero-face, .v3-hero-lift, .v3-hero-ghost, .v3-hero-live { position: absolute; inset: 0; border-radius: var(--rk); }
.v3-hero-face {
  background: url("../assets/hero/desk-black.webp") no-repeat;
  background-size: var(--ww) var(--wh);
  background-position: calc(var(--x) * var(--p) * -1) calc(var(--y) * var(--p) * -1);
  will-change: opacity;
}
.v3-hero-wall--phone .v3-hero-face { background-image: url("../assets/hero/phone-black.webp"); }
.v3-hero-face + .v3-hero-face { opacity: 0; }
/* each theme's own resting shadow and corner (the engine's, outside the card: the pictures carry only what's inside) */
.v3-hero-face[data-t="black"] { box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.v3-hero-face[data-t="light"] { box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 10px 28px rgb(16 24 40 / .1); }
.v3-hero-face[data-t="light-blur"] { box-shadow: 0 12px 32px rgb(10 20 40 / .16); }
.v3-hero-face[data-t="liquid"] { box-shadow: 0 14px 36px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08); }
.v3-hero-face[data-t="frost"] { box-shadow: 0 16px 40px rgb(0 0 0 / .32); }
.v3-hero-face[data-t="fl"] { box-shadow: 0 12px 26px rgb(21 21 21 / .12); }
.v3-hero-face[data-t="fl-ink"] { box-shadow: 0 12px 26px rgb(0 0 0 / .5); }
.v3-hero-face[data-t^="fl"], .v3-hero-ghost[data-theme^="fl"] { --rk: calc(var(--p) * 4 / 87); }
/* the drag shadow while a widget flies (the desktop app's), easing away as it lands */
.v3-hero-lift { box-shadow: 0 18px 40px rgb(0 0 0 / .35); opacity: var(--l0, 0); will-change: opacity; }
/* the place it will land, lit as it nears (the app's landing place) */
.v3-hero-slot { z-index: 0; border-radius: var(--rk); background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .62); opacity: 0; will-change: opacity; pointer-events: none; }
:root[data-theme="dark"] .v3-hero-slot { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); }

/* live: the library's own widgets in the tiles (the engine that drew the pictures), and a still copy of the outgoing
   theme while a step fades. No backdrop blur (the screen behind is already a blurred picture, so the glass looks the
   same) and none of the engine's own 350 ms theme fade: the scroll makes the fade */
.v3-hero-live { z-index: 3; opacity: 0; }
.v3-hero-ghost { z-index: 2; pointer-events: none; will-change: opacity; }
.v3-hero-live > .hw, .v3-hero-ghost > .hw { position: absolute; left: 0; top: 0; }
.v3-hero-wall .hw { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none !important; }
.v3-hero-wall.is-live .v3-hero-live { opacity: 1; will-change: opacity; }
.v3-hero-wall.is-waking .v3-hero-live { transition: opacity .26s var(--hf-ease, ease-out); }
.v3-hero-wall.is-live .v3-hero-face { visibility: hidden; }
.v3-hero-wall.is-live .hw:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.v3-hero-hint {
  position: absolute; right: clamp(16px, 2vw, 26px); bottom: clamp(16px, 2vw, 24px); z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px;
  background: rgb(10 16 22 / .8); color: #F4F7F9; font: 600 13.5px/1 var(--font); pointer-events: none;
}
.v3-hero-hint[hidden] { display: none; }
.v3-hero-awake .v3-hero-cap { right: 430px; }
@media (max-width: 1179px) { .v3-hero-hint { display: none; } .v3-hero-awake .v3-hero-cap { right: clamp(18px, 2.2vw, 30px); } }
.v3-hero-hint .s-i { font-size: 15px; }

/* ── still (Reduce Motion, no JavaScript, or no kit): no track and no flight; the desk snapped in Black, then the same
   desk in two more themes ── */
.v3-hero-stills { display: none; }
.v3-hero--still .v3-hero-run, html:not(.js) .v3-hero-run { display: none; }
.v3-hero--still .v3-hero-pin, html:not(.js) .v3-hero-pin { position: relative; top: auto; }
.v3-hero--still .v3-hero-stage, html:not(.js) .v3-hero-stage { height: calc(var(--dt) + var(--mb) + var(--wt) + var(--wh) + var(--cap-h)); }
.v3-hero--still .v3-hero-wall, html:not(.js) .v3-hero-wall { top: calc(var(--mb) + var(--wt)); }
.v3-hero--still .v3-hero-tile, html:not(.js) .v3-hero-tile { transform: none; }
.v3-hero--still .v3-hero-lift, html:not(.js) .v3-hero-lift { opacity: 0; }
.v3-hero--still .v3-hero-cells { opacity: 0; }
.v3-hero--still .v3-hero-slot, html:not(.js) .v3-hero-slot { display: none; }
.v3-hero--still .v3-hero-cap__a, html:not(.js) .v3-hero-cap__a { opacity: 0; }
.v3-hero--still .v3-hero-cap__b, html:not(.js) .v3-hero-cap__b { opacity: 1; }
.v3-hero--still .v3-hero-stills, html:not(.js) .v3-hero-stills { display: grid; gap: 28px; margin-top: 28px; }
@media (prefers-reduced-motion: reduce) {
  .v3-hero-run { display: none; }
  .v3-hero-pin { position: relative; top: auto; }
  .v3-hero-stage { height: calc(var(--dt) + var(--mb) + var(--wt) + var(--wh) + var(--cap-h)); }
  .v3-hero-wall { top: calc(var(--mb) + var(--wt)); }
  .v3-hero-tile { transform: none; }
  .v3-hero-lift, .v3-hero-cells { opacity: 0; }
  .v3-hero-slot { display: none; }
  .v3-hero-cap__a { opacity: 0; }
  .v3-hero-cap__b { opacity: 1; }
  .v3-hero-stills { display: grid; gap: 28px; margin-top: 28px; }
}
.v3-hero-still { margin: 0; }
.v3-hero-still .v3-hero-stage { width: 100%; height: auto; }
.v3-hero-still .v3-hero-glass { position: relative; left: auto; right: auto; top: auto; margin: var(--dt) var(--dl) 0; padding: calc(var(--mb) + var(--wt)) 0 calc(var(--cap-h) - 30px); display: flex; justify-content: center; }
.v3-hero-pic { display: block; width: min(100% - 32px, var(--ww)); height: auto; }
.v3-hero-still figcaption { position: absolute; left: calc(var(--dl) + clamp(18px, 2.2vw, 30px)); bottom: clamp(18px, 2.2vw, 28px); z-index: 3; font: 650 17px/1.3 var(--font); color: var(--ink); }
.v3-hero-still--dusk figcaption, :root[data-theme="dark"] .v3-hero-still figcaption { color: #F6F8F9; }
.v3-hero-still { position: relative; width: min(100vw - 40px, 1400px); margin-inline: auto; }

/* ── narrower windows ── */
@media (max-width: 1100px) {
  .v3-hero-menubar > span:nth-of-type(n+3):not(.v3-hero-mb-end) { display: none; }
}
@media (max-width: 700px) {
  .v3-hero { --dl: 0px; --dt: 12px; --dr: 18px; --mb: 24px; --wt: 12px; --cap-h: 104px; --run: 110svh; }
  .v3-hero-app { margin-bottom: 16px; font-size: 17px; }
  .v3-hero-app img { width: 40px; height: 40px; border-radius: 10px; }
  .v3-hero-h { font-size: 44px; }
  .v3-hero-lead { font-size: 17.5px; }
  .v3-hero-row .s-btn { flex: 1 1 auto; }
  .v3-hero-pin { margin-top: 26px; }
  .v3-hero { --sw: calc(100vw - 24px); --sh: clamp(600px, 100svh - var(--stick) - 12px, 820px); }
  .v3-hero-stage { width: calc(100% - 24px); border-radius: 28px; }
  .v3-hero-still { width: calc(100vw - 24px); }
  .v3-hero-menubar { gap: 12px; padding: 0 14px; font-size: 12px; }
  .v3-hero-menubar > span:not(.v3-hero-mb-end) { display: none; }
  .v3-hero-notch { width: 96px; height: calc(var(--mb) + 2px); border-radius: 0 0 11px 11px; }
  .v3-hero-cap p { font-size: 15px; }
}
@media (prefers-reduced-transparency: reduce) {
  .v3-hero-hint { background: rgb(10 16 22 / .92); }
}

/* ▸ 20-best.css */
/* sections/20-best.html's own styles (W-2): the best of it. Classes take the prefix .v3-best-.
   Every picture here is the library's own widgets, rendered by its engine at the size it shows (2×, the swatches 3×).
   Where a picture holds glass, the photograph behind it on the poster sits at the same fixed geometry as in the render,
   so the glass lines up with the hills around it: those stages keep their size and crop (from the right, or from both
   sides when centred) instead of scaling, inside cards that clip them. Widths: desktop from 1280 (a card of 1160 to
   1220), mid from 901, narrow to 900 (the phone's pictures, centred), phone to 700. */

.v3-best { contain-intrinsic-size: auto 3300px; }
.v3-best-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.v3-best-stack > * { min-width: 0; max-width: 100%; }
.v3-best picture { display: block; }
.v3-best .v3-best-dark { display: none; }
[data-theme="dark"] .v3-best .v3-best-dark { display: block; }
[data-theme="dark"] .v3-best .v3-best-light { display: none; }
.v3-best img { max-width: none; }
:where(.v3-best) .s-pc { height: auto; }
.v3-best .s-pc h3 { font: 700 clamp(30px, 3.3vw, 46px)/1.04 var(--font-d); letter-spacing: -.026em; text-wrap: balance; }
.v3-best .s-pc h3 + p { margin-top: 12px; font: 500 clamp(16px, 1.3vw, 18px)/1.42 var(--font); letter-spacing: -.006em; text-wrap: pretty; }

/* ── 1 · the library: the wall, one picture, scaled with its card (1160 to 1220 wide); cropped from the right below ── */
.v3-best-lib { aspect-ratio: 1220 / 647; background: var(--card); color: var(--card-ink); --focus: var(--accent); }
.v3-best-lib__pic img { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: auto; }
.v3-best-lib__txt { position: absolute; z-index: 2; left: var(--pad); top: var(--pad); width: min(40%, 470px); }
.v3-best-lib__h { font: 700 clamp(32px, 3.4vw, 47px)/1.03 var(--font-d); letter-spacing: -.027em; color: var(--ink); text-wrap: balance; }
.v3-best-lib__txt p { margin-top: 12px; max-width: 26em; font: 500 clamp(16px, 1.3vw, 18px)/1.42 var(--font); letter-spacing: -.006em; color: var(--text-2); text-wrap: pretty; }
.v3-best-lib__go { margin-top: 20px; }

/* ── 2 · seven themes: seven bands edge to edge, each a theme's own ground, the same widget in each ──
   One composition scaled with the card (container units): a band is 1/7 of it, the widget 158/174 of a band, the
   photograph sized by the band's height and centred on it (so the glass baked into a swatch lines up at every width). */
.v3-best-th { background: var(--card); color: var(--card-ink); --focus: var(--accent); }
.v3-best-th__txt { position: relative; z-index: 2; padding: var(--pad) var(--pad) clamp(26px, 2.8vw, 36px); max-width: 44em; }
.v3-best-th__txt h3 { color: var(--ink); }
.v3-best-th__txt p { color: var(--text-2); max-width: 31em; }
.v3-best-bands { container-type: inline-size; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.v3-best-band { position: relative; height: 36.07cqw; background: var(--g, #000); }
.v3-best-band--ph { background: #2A3138; }
/* the photograph is clipped to its band; the swatch is not, so it can rise over its neighbours */
.v3-best-band__g { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.v3-best-band__ph { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(calc(-50% + var(--sx, 0) * 1cqw / 12.2)); pointer-events: none; }
/* the swatch: the widget at 158/174 of its band, 124/440 of the band's height down; it rises with the pointer (js) */
.v3-best-sw {
  --s: 1; --x: 0px;
  position: absolute; z-index: 2; left: 4.6%; top: 10.16cqw; width: 90.8%; aspect-ratio: 1;
  border-radius: calc(24 / 158 * 100%); box-shadow: var(--sh, none);
  transform: translate3d(var(--x), 0, 0) scale(var(--s)); transform-origin: 50% 50%;
  transition: transform .62s var(--hf-ease, cubic-bezier(.16, 1, .3, 1));
}
.v3-best-band--sh .v3-best-sw { --sh: 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .05), 0 10px 28px rgb(16 24 40 / .1); }
.v3-best-sw--sq { border-radius: calc(4 / 158 * 100%); }
.v3-best-sw > img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.v3-best-band.is-up { z-index: 3; }
.v3-best-bands.is-live .v3-best-sw { transition-duration: .24s; transition-timing-function: cubic-bezier(.2, .8, .3, 1); }
.v3-best-band__l { position: absolute; z-index: 2; left: 8%; right: 6%; bottom: clamp(18px, 2.4cqw, 28px); margin: 0; font: 650 15px/1.25 var(--font); letter-spacing: -.008em; }
.v3-best-band__l span { display: block; margin-top: 3px; font: 500 13px/1.3 var(--font); letter-spacing: -.002em; }
.v3-best-band--dk .v3-best-band__l, .v3-best-band--ph .v3-best-band__l { color: #fff; }
.v3-best-band--dk .v3-best-band__l span, .v3-best-band--ph .v3-best-band__l span { color: rgb(255 255 255 / .8); }
.v3-best-band--lt .v3-best-band__l { color: #0C1620; }
.v3-best-band--lt .v3-best-band__l span { color: rgb(12 22 32 / .68); }
/* the hills grow dark toward the foot: a short scrim keeps the names at AA wherever the crop falls */
.v3-best-band--ph::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 1; background: linear-gradient(180deg, rgb(8 12 14 / 0), rgb(8 12 14 / .48) 58%, rgb(8 12 14 / .62)); pointer-events: none; }
.v3-best-th__note { display: none; }

/* ── 3 · Native: the stage keeps the render's geometry (1220 × 560), cropped from the right on narrower cards; between
   901 and 1279 the script moves it left (--nat-x) so the board starts after the words and the edge cuts a column ── */
.v3-best-nat { height: 560px; background: var(--scene-bg); color: var(--ink); --focus: var(--accent); }
.v3-best-nat__stage { position: absolute; left: var(--nat-x, 0px); top: 0; width: 1220px; height: 560px; z-index: 0; }
.v3-best-nat__ph { position: absolute; left: 0; top: -157.5px; width: 1220px; height: 813.8px; }
.v3-best-nat__board { position: absolute; inset: 0; z-index: 1; outline: none; }
.v3-best-nat__pic img, .v3-best-nat__live { position: absolute; left: 0; top: 0; width: 1220px; height: 560px; }
.v3-best-nat__pic { transition: opacity .35s ease; }
.v3-best-nat.is-live .v3-best-nat__pic { opacity: 0; }
.v3-best-nat__live .s-cell::before { display: none; }
.v3-best-nat::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(248 250 251 / .9) 0%, rgb(248 250 251 / .8) 24%, rgb(248 250 251 / .5) 32%, rgb(248 250 251 / 0) 39%); pointer-events: none; }
[data-theme="dark"] .v3-best-nat::before { background: linear-gradient(90deg, rgb(6 8 10 / .8) 0%, rgb(6 8 10 / .66) 24%, rgb(6 8 10 / .36) 32%, rgb(6 8 10 / 0) 39%); }
.v3-best-nat__txt { position: absolute; z-index: 2; left: var(--pad); top: 50%; width: min(28%, 330px); transform: translateY(-50%); }
.v3-best-nat__txt h3 { color: var(--ink); }
.v3-best-nat__txt p { color: var(--scene-text-2); }
.v3-best-nat__txt .s-pc__row { margin-top: 22px; }
.v3-best-chip { background: var(--soft); color: var(--soft-ink); }
.v3-best-nat__board:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -8px; border-radius: var(--r-card); }

/* ── 4 · live from your Mac: the cluster and its photograph both centred at the render's geometry ── */
.v3-best-live { height: 650px; background: #1E252D; color: #fff; --focus: #4C9BFF; }
.v3-best-live__ph { position: absolute; left: 50%; top: var(--ly, -33px); z-index: -2; width: 1220px; height: 813.8px; transform: translateX(-50%); }
.v3-best-live__pic img { position: absolute; left: 50%; top: 52px; z-index: 0; width: 850px; height: auto; transform: translateX(-50%); }
.v3-best-live::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 1; background: linear-gradient(180deg, rgb(6 8 10 / 0) 0%, rgb(6 8 10 / .66) 58%, rgb(6 8 10 / .8) 100%); pointer-events: none; }
.v3-best-live__txt { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: var(--pad); max-width: 40em; }
.v3-best-live__txt p { color: rgb(236 241 244 / .86); max-width: 34em; }

/* ── 5 · controls that work: four frames, one move each ── */
.v3-best-work { --k: 1.15; background: #101113; color: #fff; padding: var(--pad) var(--pad) clamp(30px, 3.2vw, 44px); --focus: #4C9BFF; }
[data-theme="dark"] .v3-best-work { background: #0C0D0E; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.v3-best-work__txt p { color: rgb(236 241 244 / .82); max-width: 30em; }
.v3-best-frames { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 34px 20px; margin: clamp(36px, 4vw, 52px) 0 0; padding: 0; list-style: none; border-radius: 26px; outline: none; }
.v3-best-frames:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 8px; }
.v3-best-fr { display: grid; gap: 14px; justify-items: start; align-content: start; min-width: 0; }
.v3-best-fr:nth-child(1) { grid-area: timer; } .v3-best-fr:nth-child(2) { grid-area: slider; width: 128px; } .v3-best-fr:nth-child(3) { grid-area: alarm; } .v3-best-fr:nth-child(4) { grid-area: music; }
.v3-best-fr__w { position: relative; display: block; width: calc((var(--c) * 87px - 16px) * var(--k)); max-width: 100%; height: calc(158px * var(--k)); }
.v3-best-fr__w > img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s ease; }
.v3-best-fr__w > .hw { position: absolute; left: 0; top: 0; }
.v3-best-fr.is-live .v3-best-fr__w > img { opacity: 0; }
.v3-best-fr p { margin: 0; font: 650 15.5px/1.3 var(--font); letter-spacing: -.008em; }
.v3-best-fr p span { display: block; margin-top: 3px; font-weight: 500; font-size: 14.5px; color: rgb(236 241 244 / .72); }

/* ── mid: 901 to 1279 ── */
@media (max-width: 1279px) {
  .v3-best-lib { aspect-ratio: auto; height: 608px; }
  .v3-best-lib__pic img { width: 1160px; }
  .v3-best-lib__txt { width: min(52%, 470px); }
  /* the seven as tiles, four in a row; the eighth cell says what you do with them */
  .v3-best-bands { container-type: normal; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 var(--pad) var(--pad); }
  .v3-best-band { height: 318px; border-radius: 22px; overflow: clip; }
  .v3-best-band__ph { transform: translateX(calc(-50% + var(--sx, 0) * 318px / 440)); }
  .v3-best-sw { left: calc(50% - 79px); top: 46px; width: 158px; transform: none; transition: none; }
  .v3-best-band__l { left: 18px; right: 14px; bottom: 18px; }
  .v3-best-th__note { display: flex; align-items: flex-end; position: absolute; z-index: 2; right: var(--pad); bottom: var(--pad); width: calc((100% - 2 * var(--pad) - 36px) / 4); height: 318px; margin: 0; padding: 18px; border-radius: 22px; background: var(--card-2); font: 600 16px/1.36 var(--font-d); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
  .v3-best-work { --k: 1.05; }
}
@media (max-width: 1100px) {
  /* the controls two by two: the timer over the music, the slider over the alarm */
  .v3-best-work { --k: 1; }
  .v3-best-frames { display: grid; grid-template-areas: "timer slider" "music alarm"; grid-template-columns: max-content max-content; justify-content: start; gap: 34px 40px; }
}
@media (max-width: 979px) {
  /* live from your Mac: the phone's cluster, centred, the words under it */
  .v3-best-live { height: 760px; }
  .v3-best-live__ph { top: 0; width: 1139.3px; height: 760px; }
  .v3-best-live__pic img { top: 26px; width: 358px; }
  .v3-best-live::after { height: 34%; }
}

/* ── narrow: to 900, the phone's pictures, centred in the card ── */
@media (max-width: 900px) {
  /* the library: the words in the flow, the phone's own wall below them */
  .v3-best-lib { height: auto; display: flex; flex-direction: column; }
  .v3-best-lib__txt { position: relative; left: auto; top: auto; width: auto; max-width: 34em; order: -1; padding: var(--pad) var(--pad) 0; }
  .v3-best-lib__pic { position: relative; width: 358px; max-width: 100%; height: 427px; margin: 26px auto 0; overflow: hidden; }
  .v3-best-lib__pic img { width: 358px; }
  /* themes: three to a row; the note takes the last row's other two cells */
  .v3-best-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3-best-band, .v3-best-th__note { height: 300px; }
  .v3-best-sw { top: 40px; }
  .v3-best-band__ph { transform: translateX(calc(-50% + var(--sx, 0) * 300px / 440)); }
  .v3-best-th__note { width: calc((100% - 2 * var(--pad) - 24px) * 2 / 3 + 12px); }
  /* Native: the phone's own board below the words, on the same photograph at the render's geometry, centred */
  .v3-best-nat { height: 800px; }
  .v3-best-nat__stage { left: calc(50% - 179px); width: 358px; height: 800px; }
  .v3-best-nat__ph { left: -420.6px; top: 0; width: 1199.2px; height: 800px; }
  .v3-best-nat__pic img, .v3-best-nat__live { width: 358px; height: 520px; top: 280px; }
  .v3-best-nat::before { background: linear-gradient(180deg, rgb(248 250 251 / .84) 0%, rgb(248 250 251 / .64) 24%, rgb(248 250 251 / 0) 36%); }
  [data-theme="dark"] .v3-best-nat::before { background: linear-gradient(180deg, rgb(6 8 10 / .78) 0%, rgb(6 8 10 / .56) 24%, rgb(6 8 10 / 0) 36%); }
  .v3-best-nat__txt { top: 24px; left: var(--pad); right: var(--pad); width: auto; max-width: 34em; transform: none; }
  .v3-best-nat__board:focus-visible { outline-offset: -4px; border-radius: 18px; }
}

/* ── phone: to 700 ── */
@media (max-width: 700px) {
  .v3-best { contain-intrinsic-size: auto 4700px; }
  .v3-best .s-pc h3 { font-size: 29px; }
  .v3-best .s-pc h3 + p { font-size: 16px; }
  .v3-best-lib__txt { padding: 24px 22px 0; }
  .v3-best-lib__h { font-size: 33px; }
  .v3-best-th__txt { padding: 24px 22px 22px; }
  .v3-best-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px 12px; }
  .v3-best-band { height: 244px; border-radius: 18px; }
  .v3-best-band__ph { transform: translateX(calc(-50% + var(--sx, 0) * 244px / 440)); }
  .v3-best-sw { top: 14px; }
  .v3-best-band__l { left: 14px; right: 10px; bottom: 14px; font-size: 14.5px; }
  .v3-best-band__l span { font-size: 12.5px; }
  .v3-best-th__note { right: 12px; bottom: 12px; width: calc((100% - 24px - 10px) / 2); height: 244px; border-radius: 18px; padding: 16px; font-size: 15px; }
  .v3-best-nat__txt { left: 22px; right: 22px; }
  .v3-best-live__txt { left: 22px; right: 22px; bottom: 24px; }
  .v3-best-work { padding: 24px 12px 28px; }
  .v3-best-work__txt { padding: 0 10px; }
  .v3-best-frames { grid-template-areas: "timer timer" "slider alarm" "music music"; grid-template-columns: 128px max-content; gap: 26px 24px; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-best-sw, .v3-best-nat__pic, .v3-best-fr__w > img { transition: none !important; }
}

/* ▸ 30-day.css */
/* sections/30-day.html's own styles (W-3): every day, on your desktop. Classes take the prefix .v3-day-.
   Every picture is the library's own widgets, drawn by its engine (site/tools/facade.mjs) at 2× and 1×, on a
   transparent ground, placed exactly where the app would place them; nothing here draws an app's UI. */

/* the section's height while it's skipped off screen (site.css: content-visibility: auto), measured by width */
.v3-day { contain-intrinsic-size: auto 2610px; }
@media (max-width: 1300px) { .v3-day { contain-intrinsic-size: auto 2440px; } }
@media (max-width: 1200px) { .v3-day { contain-intrinsic-size: auto 2260px; } }
@media (max-width: 1100px) { .v3-day { contain-intrinsic-size: auto 2140px; } }
@media (max-width: 1000px) { .v3-day { contain-intrinsic-size: auto 2070px; } }
@media (max-width: 900px) { .v3-day { contain-intrinsic-size: auto 2860px; } }
@media (max-width: 700px) { .v3-day { contain-intrinsic-size: auto 2800px; } }
.v3-day img { max-width: none; }
.v3-day .v3-day-d { display: none; }
[data-theme="dark"] .v3-day .v3-day-d { display: block; }
[data-theme="dark"] .v3-day .v3-day-l { display: none; }

/* ── 1 · float: a whole Mac display standing in the hills ──────────────────────────────────────────────────────────
   The display is a 1024 × 640-pt desktop (the blurry screen as an object: the hills' frosted copy lined up with the
   photo round it, the notch, the menu bar), drawn at its card's scale; its children are sized in cqw of it. The desk sits
   where the app puts it: the 71/16 grid of that desktop is 11 × 6 cells from (41.5, 83) pt; the desk takes the first
   eight columns, the rest stays clear for windows. The desk's pictures (rendered at 0.92×, with 64 px of margin so the
   widgets' shadows fade out inside them) are placed in display percentages: width 819.6 / 1024 pt, left −28.1 / 1024,
   top 13.4 / 640. */
.v3-day .v3-day-desk {
  height: auto;
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(36px, 4.4vw, 60px);
  --scrim: 38%;
}
/* the words' scrim, a little firmer than the family's: the hills behind it go from morning haze to dusk */
.v3-day .v3-day-desk::after { background: linear-gradient(180deg, rgb(248 250 251 / 0) 0%, rgb(248 250 251 / .86) 52%, rgb(248 250 251 / .95) 100%); }
[data-theme="dark"] .v3-day .v3-day-desk::after { background: linear-gradient(180deg, rgb(6 8 10 / 0) 0%, rgb(6 8 10 / .74) 52%, rgb(6 8 10 / .86) 100%); }
/* the moment's rail: progress 0 when the card's top is 60 % down the window, 1 when it reaches the top */
.v3-day-rail { position: absolute; left: 0; top: -60vh; width: 1px; height: 160vh; visibility: hidden; pointer-events: none; }
.v3-day-desk > .s-photo.v3-day-dusk { z-index: -1; opacity: 0; }
.v3-day .v3-day-display {
  position: relative; z-index: 2; flex: none;
  width: min(76%, 928px); aspect-ratio: 1024 / 640;
  border-radius: clamp(12px, 1.5vw, 19px);
  container-type: inline-size;
  box-shadow: 0 34px 70px -38px rgb(8 16 24 / .55), 0 2px 10px -4px rgb(8 16 24 / .18);
}
/* the glass: an even, light veil (the poster's own: the frost widgets read on it in both grades) */
.v3-day-display .s-display__glass::after { background: linear-gradient(180deg, rgb(248 251 252 / .16), rgb(248 251 252 / .1) 60%, rgb(236 242 246 / .22)); }
[data-theme="dark"] .v3-day-display .s-display__glass::after { background: linear-gradient(180deg, rgb(20 28 36 / .1), rgb(22 30 38 / .18) 60%, rgb(26 34 42 / .3)); }
.v3-day-display::after { box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 .5px rgb(255 255 255 / .35); }
.v3-day-blur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.v3-day-blur img.v3-day-dusk { opacity: 0; }
.v3-day-display .s-display__notch { width: 12.2cqw; height: 3.1cqw; border-radius: 0 0 1.2cqw 1.2cqw; }
/* the menu bar takes its ink from the hills behind it, as macOS's does from the wallpaper: dark by day, white at dusk */
.v3-day .v3-day-mb { height: 3.125cqw; gap: 1.95cqw; padding: 0 1.9cqw; font-size: 1.27cqw; color: rgb(14 16 20 / .86); background: rgb(255 255 255 / .2); box-shadow: inset 0 -.5px 0 rgb(14 16 20 / .06); transition: color .5s var(--hf-ease, ease), background-color .5s var(--hf-ease, ease); }
.v3-day-dusked .v3-day-mb { color: rgb(255 255 255 / .92); background: rgb(8 10 13 / .14); box-shadow: inset 0 -.5px 0 rgb(255 255 255 / .08); }
.v3-day-mb .s-mb-end { gap: 1.4cqw; }
.v3-day-mb .s-mb-end .s-i { font-size: 1.5cqw; }
.v3-day-time { font-variant-numeric: tabular-nums; }
.v3-day-states { position: absolute; z-index: 1; left: -2.741%; top: 2.098%; width: 80.04%; aspect-ratio: 754 / 594; }
.v3-day-s { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.v3-day-s + .v3-day-s { opacity: 0; }
.v3-day-on .v3-day-s, .v3-day-on .v3-day-dusk { will-change: opacity; }
.v3-day .v3-day-desk__txt { position: relative; z-index: 2; inset: auto; align-self: stretch; max-width: none; padding: clamp(26px, 2.8vw, 36px) var(--pad) clamp(26px, 2.8vw, 34px); }
.v3-day-desk__txt p { max-width: 34em; }
.v3-day-desk__txt h3 { color: var(--ink); }

/* ── 2 · bleed: a morning, at a glance: Light on sand (Black on slate) ── */
.v3-day .v3-day-am {
  height: clamp(540px, 46vw, 620px);
  background: radial-gradient(70% 90% at 14% 0%, #F5F0E9, transparent 70%), linear-gradient(165deg, #EFE8DF 0%, #E6DDD1 100%);
  color: #0C1620; --focus: #0066E0;
}
[data-theme="dark"] .v3-day .v3-day-am { background: radial-gradient(65% 85% at 16% 4%, hsl(200 22% 26% / .6), transparent 68%), linear-gradient(160deg, #26303A 0%, #1A2028 100%); color: #F6F8F9; --focus: #4C9BFF; }
.v3-day .v3-day-am__txt { width: calc(36% - var(--pad) - 30px); }
.v3-day-am__txt p { color: rgb(12 22 32 / .74); }
[data-theme="dark"] .v3-day-am__txt p { color: rgb(236 241 244 / .82); }
/* the picture carries 64 px of margin round the widgets (their shadows fade out in it): placed that much up and left */
.v3-day-am__pic { position: absolute; z-index: 1; left: calc(36% - 64px); top: calc(clamp(24px, 2.6vw, 34px) - 64px); }
.v3-day-am__pic img { width: 1046px; height: auto; }

/* ── 3 · pieces: the six collections, each a strip of three in its own look ── */
.v3-day .v3-day-coll { gap: clamp(30px, 3.4vw, 46px); padding-bottom: clamp(34px, 3.6vw, 48px); }
[data-theme="dark"] .v3-day .v3-day-coll { background: #1F2023; }
.v3-day-coll__txt h3 { color: var(--ink); }
.v3-day-strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3.2vw, 44px) clamp(32px, 4.4vw, 64px); }
.v3-day-strip { min-width: 0; }
.v3-day-strip__a { display: block; border-radius: 22px; outline-offset: 8px; }
/* a strip picture is 3 small widgets at 1.1× (556.6 px) with 64 px of margin: the widgets fill the column */
.v3-day-strip__pic { display: block; }
.v3-day-strip__pic img { position: relative; z-index: 0; width: 123.07%; height: auto; margin: -11.5% 0 -11.5% -11.5%; transition: transform .24s var(--hf-ease, ease); }
.v3-day-strip__l { position: relative; z-index: 1; }
@media (hover: hover) { .v3-day-strip__a:hover .v3-day-strip__pic img { transform: translateY(-2px) scale(1.01); } }
.v3-day-strip__l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 24px; font: 500 15px/1.35 var(--font); color: #4A525A; }
[data-theme="dark"] .v3-day-strip__l { color: #A7AEB5; }
.v3-day-strip__l b { font: 650 17px/1.3 var(--font-d); letter-spacing: -.01em; color: var(--ink); }
.v3-day-strip__n { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.v3-day-strip__n::before { content: "·"; margin-right: 2px; color: var(--line-3); }
.v3-day-strip__l .s-i { font-size: 15px; color: var(--accent); transition: transform .24s var(--hf-ease, ease); }
@media (hover: hover) { .v3-day-strip__a:hover .s-i { transform: translateX(2px); } }

/* ── widths ── */
@media (max-width: 900px) {
  .v3-day-strips { grid-template-columns: minmax(0, 1fr); }
  .v3-day-strip__pic img { width: 685px; margin: -64px 0 -64px -64px; }
}
@media (max-width: 980px) {
  .v3-day .v3-day-display { width: 80%; }
  .v3-day-states, .v3-day-s { will-change: auto; }
}
/* the phone's own crops: the display larger than its card, its top left in view; the desk's picture at design size */
@media (max-width: 700px) {
  .v3-day .v3-day-desk { height: 540px; display: block; padding: 0; --scrim: 52%; }
  .v3-day .v3-day-display { position: absolute; z-index: 0; left: 14px; top: 18px; width: 640px; }
  .v3-day .v3-day-desk__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad) 22px; }
  .v3-day .v3-day-am { height: 560px; }
  .v3-day .v3-day-am__txt { width: auto; }
  .v3-day-am__pic { left: calc(var(--pad) - 47px); top: 168px; }
  .v3-day-am__pic img { width: 775px; }
  .v3-day-strip__pic img { width: 623px; margin: -58px 0 -58px -58px; }
  .v3-day-strip__l { margin-top: 24px; }
}
html:not(.js) .v3-day-am__pic { position: relative; left: auto; top: auto; }

/* ▸ 40-everywhere.css */
/* sections/40-everywhere.html's own styles (W-4): every Hyper app, every size. Classes take the prefix .v3-where-.
   1 · .v3-where-hosts   pieces on the hills: three screens (the family's blurry screen, s-display), the same two
                         widgets in each app, a picture each at 2x, labelled
   2 · .v3-where-five    side: one widget at its five sizes, at design size, on the grid's gaps
   3 · .v3-where-grid    bleed + the moment: the grid's own cells, a landing place that morphs from size to size as you
                         scroll (a sticky stage, .v3-where-scene.is-live); still (Reduce Motion, no JavaScript), all
                         eleven at once on a 16 × 8 board
   Pictures are 2x WebP of the engine's own drawing (SCRATCH/widgets/everywhere/tools/render.mjs). */
/* always laid out: the scene's scroll is as tall as the window (a card plus 150vh), so no placeholder height (site.css's
   content-visibility) can hold it, and a jump past it from the nav landed 2.4k px short (14 Nov) */
.v3-where { content-visibility: visible; }

.v3-where {
  --v3-where-u: 71px;                 /* the grid: 71-pt units, 16-pt gaps, at 1:1 */
  --v3-where-g: 16px;
  --v3-where-step: 87px;
  --v3-where-ink-2: var(--text-2);
}

/* ═════════════ 1 · one licence, every app: three screens on the hills ═════════════ */
.v3-where-hosts {
  height: auto;
  display: flex; flex-direction: column; gap: clamp(26px, 3vw, 38px);
  padding: clamp(28px, 3.2vw, 44px) var(--pad) clamp(26px, 3vw, 38px);
  color: var(--scene-ink);
}
/* a wash at the top under the words and one at the foot under the labels, so both read at AA on the hills */
.v3-where-hosts::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--v3-where-wash) 0%, var(--v3-where-wash-0) 26%),
    linear-gradient(0deg, var(--v3-where-wash) 0%, var(--v3-where-wash-2) 18%, var(--v3-where-wash-0) 34%);
}
:root { --v3-where-wash: rgb(246 248 249 / .9); --v3-where-wash-2: rgb(246 248 249 / .66); --v3-where-wash-0: rgb(246 248 249 / 0); }
[data-theme="dark"] { --v3-where-wash: rgb(7 9 11 / .78); --v3-where-wash-2: rgb(7 9 11 / .56); --v3-where-wash-0: rgb(7 9 11 / 0); }
.v3-where-hosts__txt { position: relative; z-index: 2; max-width: 34em; }
.v3-where-hosts__txt h3, .v3-where-five__txt h3, .v3-where-grid__txt h3 {
  font: 700 clamp(30px, 3.3vw, 46px)/1.04 var(--font-d); letter-spacing: -.024em; color: var(--ink); text-wrap: balance;
}
.v3-where-hosts__txt h3 { color: var(--scene-ink); }
.v3-where-hosts__txt p, .v3-where-five__txt p, .v3-where-grid__txt p {
  margin-top: 12px; font: 500 clamp(16px, 1.3vw, 18px)/1.42 var(--font); letter-spacing: -.006em; color: var(--v3-where-ink-2);
  text-wrap: pretty; max-width: 30em;
}
.v3-where-hosts__txt p { color: var(--scene-text-2); }
.v3-where-hosts__row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); }
.v3-where-host { margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; }
/* each screen at 1:1 (a point is a CSS pixel), as the app draws it on a 1512-point display: the menu bar 33 tall,
   the desktop's widgets on its grid under it, the island hanging from the top edge, Hyperlaunch's sheet from it */
.v3-where-host__screen { position: relative; height: 296px; --dr: 18px; border-radius: 18px; }
.v3-where-host__bar { position: relative; z-index: 1; height: 33px; gap: 18px; padding: 0 18px; font-size: 13px; }
/* over Hyperlaunch's sheet the menu bar is the glass's own: no bar of its own, white ink (as the app draws it) */
.v3-where-host__bar--on-glass { --mb-ink: rgb(255 255 255 / .94); --mb-bg: transparent; --mb-line: transparent; position: absolute; left: 0; right: 0; top: 1px; height: 32px; z-index: 3; }
.v3-where-host__pic { position: absolute; z-index: 2; display: block; max-width: none; height: auto; }
.v3-where-host__pair { position: absolute; z-index: 2; left: 24px; top: 54px; display: flex; gap: var(--v3-where-g); }
.v3-where-host__pair img { display: block; width: 158px; height: 158px; }
.v3-where-host--island .v3-where-host__pic, .v3-where-host--launch .v3-where-host__pic { left: 0; top: 0; width: 380px; }
.v3-where-host--island .v3-where-host__pic { left: 50%; transform: translateX(-50%); }
.v3-where-host figcaption { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 11px; row-gap: 3px; align-items: center; padding-left: 2px; }
.v3-where-host figcaption img { width: 28px; height: 28px; border-radius: 7px; grid-row: span 2; align-self: start; margin-top: 1px; }
.v3-where-host figcaption b { font: 700 18px/1.2 var(--font-d); letter-spacing: -.014em; color: var(--scene-ink); }
.v3-where-host figcaption span { font: 500 15px/1.35 var(--font); color: var(--scene-text-2); }

/* ═════════════ 2 · one widget, five sizes: side ═════════════ */
.v3-where-five {
  height: auto; scroll-margin-top: calc(var(--nav-clear, 88px) + 8px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 4vw, 64px);
  padding: clamp(34px, 4vw, 56px) clamp(28px, 4vw, 60px);
}
.v3-where-five__txt { max-width: 24em; }
.v3-where-five__set {
  display: grid; grid-template-columns: 332px 158px 158px; column-gap: var(--v3-where-g); row-gap: 22px;
  align-items: start;
}
.v3-where-five__w { margin: 0; display: grid; gap: 9px; justify-items: start; }
.v3-where-five__w img { display: block; width: calc(var(--c) * var(--v3-where-step) - var(--v3-where-g)); height: auto; }
/* the large on the left; the medium, the small and the chip, and the strip stacked on the right */
.v3-where-five__w:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.v3-where-five__w:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.v3-where-five__w:nth-child(3) { grid-column: 2; grid-row: 2; }
.v3-where-five__w:nth-child(4) { grid-column: 3; grid-row: 2; }
.v3-where-five__w:nth-child(5) { grid-column: 2 / span 2; grid-row: 3; }
.v3-where-five__w figcaption, .v3-where-sizes li { font: 500 13px/1.2 var(--font); color: var(--v3-where-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-where-five__w figcaption b { font-weight: 650; color: var(--ink); margin-right: 5px; }

/* ═════════════ 3 · eleven sizes on one grid: bleed, and the moment ═════════════ */
/* still (Reduce Motion, no JavaScript, or until the kit is in): the words above, all eleven on a 16 × 8 board */
.v3-where-grid {
  --k: .84;
  height: auto; display: grid; gap: clamp(24px, 3vw, 36px);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3.4vw, 46px) clamp(30px, 3.4vw, 46px);
}
.v3-where-grid__txt { position: relative; z-index: 2; }
.v3-where-sizes { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: 46em; }
.v3-where-sizes li { display: inline-flex; gap: 6px; align-items: baseline; }
.v3-where-sizes b { font-weight: 650; color: var(--ink); }
.v3-where-sizes em { display: none; font-style: normal; }
.v3-where-board {
  position: relative; z-index: 1;
  width: calc(16 * var(--v3-where-step) * var(--k) - var(--v3-where-g) * var(--k));
  height: calc(8 * var(--v3-where-step) * var(--k) - var(--v3-where-g) * var(--k));
  max-width: 100%;
}
/* the grid's own cells, as the hosts' edit mode draws them, under the widgets */
.v3-where-board::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  background-image: var(--v3-where-cell);
  background-size: calc(var(--v3-where-step) * var(--k)) calc(var(--v3-where-step) * var(--k));
}
:root { --v3-where-cell: url("../assets/everywhere/cell-light.svg"); }
[data-theme="dark"] { --v3-where-cell: url("../assets/everywhere/cell-dark.svg"); }
.v3-where-w {
  position: absolute; z-index: 1; display: block; max-width: none;
  left: calc(var(--x) * var(--v3-where-step) * var(--k)); top: calc(var(--y) * var(--v3-where-step) * var(--k));
  width: calc((var(--c) * var(--v3-where-step) - var(--v3-where-g)) * var(--k)); height: auto;
}
.v3-where-slot { display: none; }
/* every widget's own corner (24, the tile round), so nothing of its drawn shadow shows round it */
.v3-where-w, .v3-where-five__w img, .v3-where-host__pair img { border-radius: 24px; }
.v3-where-w:first-of-type { border-radius: 50%; }

/* the scene: a sticky stage; the words in a column at the left, the board from their right to past the card's edges */
.v3-where-scene.is-live { --v3-where-card: max(520px, min(780px, calc(100vh - var(--nav-clear, 88px) - 24px))); height: calc(var(--v3-where-card) + 150vh); }
.v3-where-scene.is-live .v3-where-grid {
  --k: 1;
  --pad-x: clamp(26px, 2.8vw, 40px); --pad-y: clamp(28px, 3vw, 40px);
  --col: clamp(270px, 27vw, 350px); --colgap: clamp(28px, 3.2vw, 48px);
  position: sticky; top: calc(var(--nav-clear, 88px) + 4px);
  height: var(--v3-where-card);
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--colgap); align-items: start;
  padding: var(--pad-y) 0 0 var(--pad-x);
}
.v3-where-scene.is-live .v3-where-sizes { display: grid; gap: 0; margin-top: 26px; }
.v3-where-scene.is-live .v3-where-sizes li {
  display: grid; grid-template-columns: 7.2em 3.6em auto; align-items: baseline; padding: 5px 0;
  opacity: .42; transition: opacity .3s var(--hf-ease, ease);
}
.v3-where-scene.is-live .v3-where-sizes li.is-on { opacity: 1; }
.v3-where-scene.is-live .v3-where-sizes em { display: block; opacity: 0; transition: opacity .3s var(--hf-ease, ease); }
.v3-where-scene.is-live .v3-where-sizes li.is-on em { opacity: 1; }
.v3-where-scene.is-live .v3-where-board {
  width: auto; height: calc(100% + 2 * var(--v3-where-step)); max-width: none;
  margin-right: calc(-2 * var(--v3-where-step));
}
/* while it plays, the board is only the cells a size can reach from the landing place's corner: eight units wide for
   the top four rows (the extra large), four wide for the next four (the panel) */
.v3-where-scene.is-live .v3-where-board::before { width: calc(8 * var(--v3-where-step)); height: calc(4 * var(--v3-where-step)); }
.v3-where-scene.is-live .v3-where-board::after {
  content: ""; position: absolute; left: 0; top: calc(4 * var(--v3-where-step)); pointer-events: none;
  width: calc(4 * var(--v3-where-step)); height: calc(4 * var(--v3-where-step));
  background-image: var(--v3-where-cell); background-size: var(--v3-where-step) var(--v3-where-step);
}
.v3-where-scene.is-live .v3-where-w {
  left: 0; top: 0; opacity: 0; transform: scale(.965); transform-origin: 0 0;
  transition: opacity .16s ease-out, transform .16s ease-out;
}
.v3-where-scene.is-live .v3-where-w.is-on {
  opacity: 1; transform: none;
  transition: opacity .34s .16s ease-out, transform .62s .16s var(--hf-ease, ease);
}
/* the landing place: a nine-slice outline (four corners moved, four hairlines moved and stretched along one axis), so
   its rounded corners never stretch and only transforms change */
.v3-where-scene.is-live .v3-where-slot { display: block; position: absolute; left: -6px; top: -6px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.v3-where-slot i { position: absolute; left: 0; top: 0; transition: transform .46s var(--hf-ease, ease); }
.v3-where-slot.is-still i { transition: none; }
.v3-where-slot__c { width: 30px; height: 30px; border: 0 solid var(--accent); }
.v3-where-slot__c[data-c="tl"] { border-width: 2px 0 0 2px; border-top-left-radius: 30px; }
.v3-where-slot__c[data-c="tr"] { border-width: 2px 2px 0 0; border-top-right-radius: 30px; }
.v3-where-slot__c[data-c="bl"] { border-width: 0 0 2px 2px; border-bottom-left-radius: 30px; }
.v3-where-slot__c[data-c="br"] { border-width: 0 2px 2px 0; border-bottom-right-radius: 30px; }
.v3-where-slot__e { background: var(--accent); transform-origin: 0 0; }
.v3-where-slot__e[data-e="t"], .v3-where-slot__e[data-e="b"] { width: 1px; height: 2px; }
.v3-where-slot__e[data-e="l"], .v3-where-slot__e[data-e="r"] { width: 2px; height: 1px; }
.v3-where-readout { display: none; }

/* ═════════════ widths ═════════════ */
@media (max-width: 1100px) {
  .v3-where-hosts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns or one: labels sit in the middle of the hills too, so one even wash under everything */
  .v3-where-hosts::before { background: linear-gradient(180deg, var(--v3-where-wash) 0%, var(--v3-where-wash-2) 16%, var(--v3-where-wash-2) 100%); }
  .v3-where-host__date { display: none; }
  .v3-where-five { grid-template-columns: minmax(0, 1fr); }
  .v3-where-grid { --k: .62; }
}
@media (max-width: 700px) {
  .v3-where-hosts { padding: 24px 14px 26px; }
  .v3-where-hosts__txt { padding: 0 6px; }
  .v3-where-hosts__row { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .v3-where-host__screen { height: 252px; }
  .v3-where-host figcaption { padding-left: 6px; }
  .v3-where-host--desk .v3-where-host__pic { left: 50%; transform: translateX(-50%); }
  .v3-where-five { padding: 26px 16px 30px; }
  .v3-where-five__txt { padding: 0 4px; }
  .v3-where-five__set { grid-template-columns: 158px 158px; }
  .v3-where-five__w:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .v3-where-five__w:nth-child(2) { grid-column: 1 / span 2; grid-row: 2; }
  .v3-where-five__w:nth-child(3) { grid-column: 1; grid-row: 3; }
  .v3-where-five__w:nth-child(4) { grid-column: 2; grid-row: 3; }
  .v3-where-five__w:nth-child(5) { grid-column: 1 / span 2; grid-row: 4; }
  .v3-where-grid { --k: .38; padding: 26px 16px 30px; }
  .v3-where-scene.is-live { height: calc(var(--v3-where-card) + 120vh); }
  .v3-where-scene.is-live .v3-where-grid { --pad-x: 16px; --pad-y: 24px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 22px; }
  .v3-where-scene.is-live .v3-where-grid__txt { padding-right: 16px; }
  .v3-where-scene.is-live .v3-where-sizes { display: none; }
  .v3-where-scene.is-live .v3-where-readout { display: block; margin-top: 12px; font: 600 15px/1.3 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
  .v3-where-readout span { color: var(--v3-where-ink-2); font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-where-scene.is-live { height: auto; }
}

/* ▸ 50-pro.css */
/* sections/50-pro.html's own styles (W-5): for developers, designers and collectors. New classes take .v3-pro-; the
   Index's library window and its specimen sheet keep v2's .s-lib*, .s-sheet*, .s-chips and .s-swatch (this section's
   own since v3). Nothing here blurs live: the window's sidebar and toolbar and the sheet are solid (a backdrop blur on
   elements that large costs every frame); the only pictures are the Index's facade and two app icons. */

.v3-pro { content-visibility: auto; contain-intrinsic-size: auto 2600px; }   /* its height as drawn, by width (measured) */
@media (max-width: 1180px) { .v3-pro { contain-intrinsic-size: auto 2480px; } }
@media (max-width: 980px) { .v3-pro { contain-intrinsic-size: auto 3300px; } }
@media (max-width: 700px) { .v3-pro { contain-intrinsic-size: auto 3850px; } }

/* ───────────────────────── P1 · side, on dark: the developer's widgets ───────────────────────── */

.v3-pro-dev { --fill: #0B0C0E; --h: 540px; --hp: 820px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
[data-theme="dark"] .v3-pro-dev { --fill: #121315; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.v3-pro-dev__txt { width: min(28%, 340px); }
.v3-pro-dev__txt p { max-width: 21em; }
.v3-pro-dev__stage { position: absolute; z-index: 1; left: var(--sx, 33.5%); top: 50%; transform: translateY(-50%); }
.v3-pro-dev .s-cell::before { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .08); }
/* the moment: Claude Code's request rises into the Agents widget as the poster comes into view */
.v3-pro-asks .hw[data-w="core.agents.sessions"] .ask { animation: v3-pro-rise .34s var(--hf-ease, cubic-bezier(.16, 1, .3, 1)) both; }
.v3-pro-asks .hw[data-w="core.agents.sessions"] .ft .pill { animation: v3-pro-fade .3s .12s var(--hf-ease, cubic-bezier(.16, 1, .3, 1)) both; }
.v3-pro-asks .hw[data-w="core.agents.sessions"] .tab.on .dot { animation: v3-pro-pop .42s var(--hf-spring, cubic-bezier(.34, 1.56, .64, 1)) both; }
@keyframes v3-pro-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes v3-pro-fade { from { opacity: 0; } }
@keyframes v3-pro-pop { from { transform: scale(.4); } }

/* ───────────────────────── P2 · pieces: widgets assistants made, over what was asked ───────────────────────── */

.v3-pro-ai { --h-min: 0; }
.v3-pro-ai > .s-pc__txt h3, .v3-pro-color > .s-pc__txt h3 { font-size: clamp(25px, 2.25vw, 31px); letter-spacing: -.022em; }
.v3-pro-ai > .s-pc__txt { max-width: 30em; }
.v3-pro-ai__set { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, max-content); gap: clamp(26px, 2.8vw, 34px) clamp(18px, 2vw, 26px); align-items: start; align-content: center; flex: 1; }
.v3-pro-ai__f { margin: 0; display: grid; gap: 13px; align-content: start; width: var(--fw, 158px); }
.v3-pro-ai__w { position: relative; width: var(--fw, 158px); height: var(--fh, 158px); }
.v3-pro-ai__w > .hw { position: absolute; left: 0; top: 0; }
.v3-pro-ai__w::before { content: ""; position: absolute; inset: 0; border-radius: calc(24px * var(--k, 1)); background: rgb(12 22 32 / .05); transition: opacity .25s; }
[data-theme="dark"] .v3-pro-ai__w::before { background: rgb(255 255 255 / .05); }
.v3-pro-ai__w.on::before { opacity: 0; }
.v3-pro-ai__f figcaption { display: grid; gap: 8px; }
.v3-pro-ai__f q { font: 600 15px/1.34 var(--font); letter-spacing: -.008em; color: var(--card-ink); text-wrap: pretty; quotes: "“" "”"; }
.v3-pro-ai__by { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--font); color: var(--text-2); }
.v3-pro-ai__by img { width: 22px; height: 22px; flex: none; }

/* ───────────────────────── P3 · float: colour, on the hills ───────────────────────── */

.v3-pro-color { --h: 100%; --hp: 640px; --scrim: 38%; min-height: 560px; }
.v3-pro-color__stage { position: absolute; z-index: 1; left: 50%; top: var(--cy, 14%); transform: translateX(-50%); display: grid; gap: calc(14px * var(--k, 1)); justify-items: center; }
.v3-pro-color__cell { position: relative; }
.v3-pro-color__cell > .hw { position: absolute; left: 0; top: 0; }
.v3-pro-color__cell > .hw:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.v3-pro-color .hw { box-shadow: var(--shadow), 0 18px 44px -18px rgb(12 22 32 / .45); }

/* ───────────────────────── P4 · bleed: the Index, a library window on the hills ───────────────────────── */

.v3-pro-index { --h: 820px; --hp: 800px; background: var(--scene-bg); color: var(--ink); --focus: var(--accent); }
.v3-pro-index::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--wash-top) 0%, var(--wash-top) 12%, transparent 28%); }
.v3-pro-index > .s-pc__txt { z-index: 2; }
.v3-pro-index > .s-pc__txt h3 { display: block; }
.v3-pro-index > .s-pc__txt p { color: var(--text-2); max-width: 36em; }
.v3-pro-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.s-lib.v3-pro-win { position: absolute; z-index: 1; left: var(--pad); right: -2px; top: var(--wt, 172px); bottom: -2px; height: auto; border-radius: 20px 0 0 0; --v3-side: #ECEEF2; --v3-bar: rgb(243 244 247 / .97); }
[data-theme="dark"] .v3-pro-win { --v3-side: #18191D; --v3-bar: rgb(19 20 24 / .97); }
.v3-pro-win > .s-flds { border-radius: 20px 0 0 0; }
/* flat fields in the window, so the facade's picture and the live grid meet without a seam at any width */
.v3-pro-win .s-fld--fog { background: #E6E9EC; }
.v3-pro-win .s-fld--slate { background: #20272F; }
.v3-pro-facade { position: absolute; left: 0; top: 0; z-index: 2; max-width: none; pointer-events: none; transition: opacity .22s ease; }
.v3-pro-facade.is-gone { opacity: 0; }

/* ───────────────────────── the library window (v2's, made solid) ───────────────────────── */

.s-kbd-hint .s-i { display: inline-block; vertical-align: -2px; font-size: 14px; }
.s-lib {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  border-radius: 20px;
  background: var(--win-bg);
  box-shadow: var(--shadow-win);
  color: var(--text);
}
.s-lib__side {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; min-height: 0;
  padding: 16px 10px 12px;
  background: var(--v3-side, var(--win-side));
  box-shadow: inset -.5px 0 0 var(--line-2);
  border-radius: 20px 0 0 0;
}
.s-lib__lights { display: flex; gap: 8px; padding: 2px 8px 0; }
.s-lib__lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .18); }
.s-lib__lights i:nth-child(2) { background: #FEBC2E; }
.s-lib__lights i:nth-child(3) { background: #28C840; }
.s-lib__nav { flex: 1; min-height: 0; margin-top: 12px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.s-lib__h { padding: 14px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.s-lib__row { display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; text-align: left; color: var(--text); transition: background-color .15s; }
.s-lib__row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.s-lib__row[aria-pressed="true"] { background: var(--win-sel); font-weight: 650; }
.s-lib__row svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.s-lib__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-lib__row em { font: 400 12px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.s-lib__row:focus-visible { outline-offset: -2px; }
.s-lib__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .2); }
[data-theme="dark"] .s-lib__dot { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.s-lib__main { position: relative; z-index: 1; min-width: 0; min-height: 0; }
.s-lib > .s-flds { z-index: 0; }
.s-lib__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  min-height: 60px;
  padding: 10px 16px 10px 24px;
  background: var(--v3-bar, var(--frost));
  box-shadow: inset 0 -.5px 0 var(--frost-edge);
}
.s-lib__title { flex: 0 1 auto; min-width: 0; margin-right: 18px; }
.s-lib__title h4 { font: 700 15px/1.2 var(--font); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.s-lib__title p { margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-lib__search, .s-lib__pick { position: relative; display: flex; align-items: center; height: 34px; border-radius: 17px; background: var(--lg-fill); box-shadow: inset 0 0 0 .5px var(--lg-edge), inset 0 1px 0 var(--lg-rim), var(--shadow-1); }
.s-lib__search { width: 240px; padding: 0 12px 0 11px; gap: 7px; color: var(--muted); }
.s-lib__search .s-i { font-size: 14px; }
.s-lib__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 13.5px; color: var(--text); outline: none; }
.s-lib__search input::placeholder { color: var(--muted); }
.s-lib__search input::-webkit-search-cancel-button { opacity: .5; }
.s-lib__search:focus-within { box-shadow: inset 0 0 0 .5px var(--lg-edge), 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.s-lib__pick select { height: 100%; padding: 0 30px 0 13px; border: 0; border-radius: inherit; background: none; font-size: 13.5px; font-weight: 500; color: var(--text); -webkit-appearance: none; appearance: none; cursor: pointer; }
.s-lib__pick select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-lib__pick .s-i { position: absolute; right: 11px; font-size: 13px; color: var(--muted); pointer-events: none; }
.s-lib__pick--browse { display: none; }
.s-lib__scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; padding: 84px 0 64px; scrollbar-width: thin; }
.s-lib__groups { display: grid; gap: 40px; }
.s-lib__group { --cols: 10; width: calc(var(--cols) * 87px - 16px); margin-left: var(--v3-gx, 28px); }
.s-lib__gh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.s-lib__gh h5 { font: 700 17px/1.2 var(--font-d); letter-spacing: -.015em; color: var(--lib-ink, var(--text)); }
.s-lib__gh span { font-size: 13px; color: var(--lib-mute, var(--muted)); font-variant-numeric: tabular-nums; }
.s-lib__grid { display: grid; grid-template-columns: repeat(var(--cols), 71px); grid-auto-rows: 71px; grid-auto-flow: dense; gap: 16px; }
.s-lib__t { position: relative; border-radius: 22px; }
.s-lib__t::before { content: ""; position: absolute; inset: 0; border-radius: 22px; background: var(--lib-ph, rgb(255 255 255 / .1)); box-shadow: inset 0 0 0 .5px var(--lib-ph-edge, rgb(255 255 255 / .14)); }
.s-lib__t.on::before { display: none; }
.s-lib__t > .hw { position: absolute; left: 0; top: 0; }
.s-lib__t:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.s-lib__i {
  position: absolute; z-index: 6; right: -8px; top: -8px;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: #1C1D22; background: #FFFFFF;
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .14), 0 2px 8px rgb(0 0 0 / .22);
  opacity: 0; transform: scale(.85);
  transition: opacity .15s, transform .15s var(--ease);
}
.s-lib__i .s-i { font-size: 15px; stroke-width: 1.6; }
.s-lib__t:hover .s-lib__i, .s-lib__t:focus-within .s-lib__i, .s-lib__i:focus-visible { opacity: 1; transform: none; }
.s-lib__tip {
  position: absolute; z-index: 7; left: 50%; bottom: calc(100% + 8px);
  transform: translate(-50%, 3px);
  padding: 5px 9px; border-radius: 8px;
  background: var(--tip-bg); color: var(--tip-fg);
  font-size: 12px; font-weight: 500; line-height: 1.25; white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / .35);
  transition: opacity .14s, transform .14s var(--ease);
}
.s-lib__t:hover .s-lib__tip, .s-lib__t:focus-visible .s-lib__tip { opacity: 1; transform: translate(-50%, 0); }
.s-lib__empty { display: grid; justify-items: center; gap: 14px; padding: 80px 24px; text-align: center; color: var(--lib-ink, var(--text)); }
.s-lib__empty[hidden] { display: none; }
.s-lib__loading { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: var(--v3-bar, var(--frost)); box-shadow: 0 0 0 .5px var(--frost-edge); font-size: 13.5px; color: var(--muted); }
.s-lib__loading[hidden] { display: none; }
.s-lib__loading span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: s-spin .8s linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
.s-lib[data-tone="dark"] { --lib-ink: #F2F4F8; --lib-mute: rgb(255 255 255 / .62); }
.s-lib[data-tone="light"] { --lib-ink: #0E1014; --lib-mute: #5B6470; --lib-ph: rgb(15 17 21 / .05); --lib-ph-edge: rgb(15 17 21 / .06); }

/* ───────────────────────── the specimen sheet (the Index's ⓘ) ───────────────────────── */

.s-sheet {
  width: min(1000px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0;
  border-radius: 28px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 0 0 .5px var(--frost-edge), inset 0 1px 0 var(--frost-hi), 0 40px 100px -20px rgb(0 0 0 / .5);
  overflow: auto; overscroll-behavior: contain;
}
.s-sheet::backdrop { background: rgb(8 10 14 / .46); }
.s-sheet[open] { animation: s-sheet-in .26s var(--hf-ease, var(--ease)); }
@keyframes s-sheet-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.s-sheet__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); }
.s-sheet__stage { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 480px; padding: 56px 32px; }
.s-sheet__stage .s-flds { border-radius: 0; }
.s-sheet__w { position: relative; }
.s-sheet__w > .hw:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.s-sheet__info { padding: 64px 32px 32px; }
.s-sheet__info .s-eyebrow { margin-bottom: 18px; }
.s-sheet__info h3 { font: 700 30px/1.08 var(--font-d); letter-spacing: -.025em; text-wrap: balance; color: var(--ink); }
.s-sheet__tier { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.s-sheet__tier b { display: inline-block; margin-right: 6px; padding: 3px 8px; border-radius: 999px; font: 600 11px/1.2 var(--font); letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); }
.s-sheet__field { margin-top: 22px; }
.s-sheet__label { margin-bottom: 9px; font: 600 12.5px/1 var(--font); color: var(--text-2); }
.s-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s-chips button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); background: var(--soft); transition: background-color .15s, color .15s; }
.s-chips button:hover { background: var(--card-2); }
.s-chips button[aria-checked="true"] { color: var(--bg); background: var(--ink); }
.s-chips button small { font: 500 11px/1 var(--font); opacity: .7; }
.s-swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .25); flex: none; }
[data-theme="dark"] .s-swatch { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.s-sheet__dl { margin-top: 24px; border-top: 1px solid var(--line); }
.s-sheet__dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.s-sheet__dl dt { font-weight: 650; }
.s-sheet__dl dd { color: var(--text-2); }
.s-sheet__dl ul { display: grid; gap: 3px; }
.s-sheet__nav { position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 8px; }
.s-sheet--wide .s-sheet__in { grid-template-columns: minmax(0, 1fr); }
.s-sheet--wide .s-sheet__info { padding-top: 28px; }
html.is-locked { overflow: hidden; }

/* ───────────────────────── without JavaScript, Reduce Motion, widths ───────────────────────── */

html:not(.js) .v3-pro-dev__stage, html:not(.js) .v3-pro-ai__set, html:not(.js) .v3-pro-color__stage, html:not(.js) .v3-pro-win { display: none; }
html:not(.js) .v3-pro-index { height: auto; min-height: 300px; }
html:not(.js) .v3-pro-index .s-pc__txt { position: relative; inset: auto; padding: var(--pad); }

@media (prefers-reduced-motion: reduce) {
  .v3-pro-asks .hw[data-w="core.agents.sessions"] .ask, .v3-pro-asks .hw[data-w="core.agents.sessions"] .ft .pill, .v3-pro-asks .hw[data-w="core.agents.sessions"] .tab.on .dot { animation: none; }
}

@media (max-width: 1180px) {
  .s-lib { grid-template-columns: 200px minmax(0, 1fr); }
  .s-lib__search { width: 180px; }
  .v3-pro-dev__txt { width: min(30%, 320px); }
}
@media (max-width: 980px) {
  /* the pieces and the float stack as two full-width cards from here (the bento's s-c7 and s-c5 become halves) */
  .v3-pro-ai, .v3-pro-color { grid-column: span 12; }
  .v3-pro-color { --h: 640px; min-height: 0; }
}
@media (max-width: 860px) {
  .v3-pro-dev__txt { width: auto; }
  .v3-pro-dev__stage { left: var(--sxs, 20px); top: var(--sys, 236px); transform: none; }
  .v3-pro-index { --wt: 196px; }
  .v3-pro-win { left: 10px; }
  .s-lib { grid-template-columns: minmax(0, 1fr); }
  .s-lib__side { display: none; }
  .s-lib__bar { flex-wrap: wrap; padding: 12px 14px; row-gap: 8px; border-radius: 20px 0 0 0; }
  .s-lib__title { flex-basis: 100%; margin-right: 0; }
  .s-lib__search { width: auto; flex: 1 1 100%; }
  .s-lib__pick { flex: 1 1 0; min-width: 0; }
  .s-lib__pick select { width: 100%; }
  .s-lib__pick--browse { display: flex; }
  .s-lib__scroll { padding-top: 154px; }
  .s-lib__group { --v3-gx: 12px; }
  .s-sheet__in { grid-template-columns: minmax(0, 1fr); }
  .s-sheet__info { padding: 24px 22px 28px; }
  .s-sheet__stage { min-height: 300px; padding: 64px 16px 28px; }
}
@media (max-width: 700px) {
  .v3-pro-dev { --sxs: calc(50% - 166px); }
  .v3-pro-ai__set { grid-template-columns: max-content; }
  .v3-pro-index { --wt: 214px; }
  .v3-pro-index > .s-pc__txt p { font-size: 15.5px; }
}
@media (hover: none) {
  .s-lib__i { opacity: 1; transform: none; }
}
/* dark: the dusk's top a little deeper under the Index's words (its caption measured 4.6 : 1 at the worst pixel) */
[data-theme="dark"] .v3-pro-index::before { background: linear-gradient(180deg, rgb(8 10 12 / .74) 0%, rgb(8 10 12 / .68) 13%, transparent 30%); }

/* ▸ 60-all.css */
/* sections/60-all.html's own styles (W-6). New classes take the prefix .v3-all-.
   What's here is v2's (24d5007) rules for these posters, moved from css/site.css as they were. */
/* ───────────────────────── the echo: the grid's own tiles, out of focus ─────────────────────────
   Rounded cells on the 71/16 grid's rhythm (1 and 2 units wide, 1 to 5 tall), standing at the foot of the closing
   call, in the accent, blurred and fading: Hyper Widgets' desk, seen out of focus.
   Still: nothing here moves. js/site.js lays the tiles out (seeded, so every load is the same). */
.s-echo {
  position: absolute; left: 0; right: 0; z-index: 0;
  height: clamp(220px, 32vw, 420px);
  overflow: hidden;
  pointer-events: none;
  filter: blur(clamp(12px, 1.3vw, 18px));
  opacity: var(--echo-o);
}
.s-echo i { position: absolute; display: block; background: var(--echo); border-radius: clamp(8px, 1vw, 14px); }
.s-echo--bottom { bottom: 0; -webkit-mask-image: linear-gradient(transparent 6%, #000 82%); mask-image: linear-gradient(transparent 6%, #000 82%); }
.s-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(44px, 5vw, 64px); align-items: stretch; }
.s-plan { --p1: var(--card-ink); --p2: var(--text-2); display: flex; flex-direction: column; gap: 18px; padding: 34px 30px 30px; border-radius: var(--r-card); background: var(--card); color: var(--p1); }
.s-plan--best { --p1: var(--bg); --p2: color-mix(in srgb, var(--bg) 74%, var(--ink)); background: var(--ink); }
.s-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-plan__head h3 { font: 650 18px/1.2 var(--font-d); letter-spacing: -.012em; }
.s-plan--best .s-tag { background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); }
.s-price { display: flex; align-items: baseline; gap: 8px; }
.s-price b { font: 700 clamp(52px, 5.4vw, 68px)/1 var(--font-d); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.s-price span { font-size: 16px; color: var(--p2); }
.s-price--sm b { font-size: clamp(36px, 3.4vw, 44px); }
.s-plan__alt { margin-top: -8px; font-size: 15px; line-height: 1.45; color: var(--p2); }
.s-plan__alt b { color: var(--p1); font-weight: 650; }
.s-plan__sum { font-size: 16px; color: var(--p2); }
.s-addons { display: grid; gap: 16px; }
.s-addons > div { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.s-addons p { font-size: 15px; line-height: 1.45; color: var(--p2); }
.s-addons p b { color: var(--p1); }
.s-ticks { display: grid; gap: 11px; margin: 4px 0 6px; font-size: 15.5px; }
.s-ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.s-ticks .s-i { font-size: 17px; margin-top: 2px; color: var(--accent); stroke-width: 1.8; }
.s-plan--best .s-ticks .s-i { color: var(--accent-2); }
[data-theme="dark"] .s-plan--best .s-ticks .s-i { color: #0052B4; }
.s-plan .s-btn { margin-top: auto; }
.s-plan--best .s-btn--soft { background: var(--bg); color: var(--ink); }
.s-plan--best .s-btn--soft:hover { background: var(--accent); color: var(--on-accent); }
.s-refund { font-size: 13.5px; color: var(--p2); text-align: center; }
.s-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.s-promises div { display: flex; gap: 14px; align-items: flex-start; }
.s-promises .s-i { font-size: 26px; color: var(--accent); margin-top: 2px; }
.s-promises b { display: block; font: 650 17px/1.3 var(--font-d); color: var(--ink); }
.s-promises p { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.s-pricing-fine { margin-top: 30px; max-width: 60em; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.s-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.s-faq__intro { position: sticky; top: 40px; display: grid; gap: 18px; }
.s-faq__list details { border-bottom: 1px solid var(--line); }
.s-faq__list details:first-child { border-top: 1px solid var(--line); }
.s-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 2px; cursor: pointer; list-style: none; font: 650 19px/1.3 var(--font-d); letter-spacing: -.014em; color: var(--ink); }
.s-faq__list summary::-webkit-details-marker { display: none; }
.s-faq__list summary .s-i { font-size: 20px; flex: none; transition: transform .2s; color: var(--text-2); }
.s-faq__list details[open] summary .s-i { transform: rotate(45deg); }
.s-faq__list .s-ans { padding: 0 40px 24px 2px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.s-faq__list .s-ans p + p { margin-top: 10px; }
.s-cta { position: relative; isolation: isolate; padding: clamp(130px, 14vw, 200px) 0 clamp(230px, 25vw, 340px); overflow: hidden; }
.s-cta .s-wrap { position: relative; z-index: 1; display: grid; gap: 26px; justify-items: start; }
@media (max-width: 980px) {
  .s-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .s-promises { grid-template-columns: minmax(0, 1fr); }
  .s-faq { grid-template-columns: minmax(0, 1fr); }
  .s-faq__intro { position: static; }
}
@media (max-width: 700px) {
  .s-faq__list summary { font-size: 17.5px; }
  .s-faq__list .s-ans { padding-right: 8px; }
}