/* us-ui.css — the component sheet, second generation (docs/the-system.md).
   The world is the ground; the interface floats over it as paper or glass, lifted by shadow, never
   boxed by a border. One serif question at a time; big honest numbers; time as a control; evidence
   in a frame; every place numbered; black is the accent; motion has weight.
   Every value is a --us-* token. Class prefix us-; .is-hover/.is-active/.is-focus mirror the
   pseudo-classes so a state can be photographed. */

/* every piece measures its box from the border, so width: 100% is 100% */
[class*="us-"], [class*="us-"]::before, [class*="us-"]::after { box-sizing: border-box; }

/* ── ground & type ──────────────────────────────────────────────────────── */
.us-ground { background: var(--us-ground); color: var(--us-ink); font-family: var(--us-sans);
  font-size: var(--us-t-body); line-height: 1.5; letter-spacing: var(--us-tracking); -webkit-font-smoothing: antialiased; }
.us-kicker { font: var(--us-w-medium) var(--us-t-label)/1.2 var(--us-sans); letter-spacing: var(--us-tr-kicker);
  text-transform: uppercase; color: var(--us-ink-3); margin: 0; }
.us-kicker--light { color: rgba(255,255,255,.85); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.us-caption { font-size: var(--us-t-label); color: var(--us-ink-2); margin: 0; line-height: 1.4; }
.us-title { font: var(--us-w-semibold) var(--us-t-title)/1.2 var(--us-sans); letter-spacing: -.01em; color: var(--us-ink); margin: 0; }
/* a title that speaks rather than names: the serif, on request */
.us-title--voice { font-family: var(--us-serif); font-weight: var(--us-w-regular); letter-spacing: var(--us-tr-display); }
.us-title--display { font-size: var(--us-d-md); }
.us-title--hero { font-size: var(--us-d-lg); line-height: 1.05; }
.us-voice { font: var(--us-w-regular) var(--us-d-sm)/1.15 var(--us-serif); letter-spacing: var(--us-tr-display); color: var(--us-ink); margin: 0; max-width: var(--us-measure); }
.us-voice em { font-style: italic; }
.us-num { font-variant-numeric: tabular-nums; }
.us-say { color: var(--us-ink-2); max-width: var(--us-measure); margin: 0; line-height: 1.5; }
.us-numeral { font: var(--us-w-regular) var(--us-d-md)/1 var(--us-serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--us-ink); }

/* ── materials ──────────────────────────────────────────────────────────── */
.us-glass { background: var(--us-glass); -webkit-backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat));
  border: 0; box-shadow: var(--us-glass-hl), var(--us-shadow-2); border-radius: var(--us-r-md); color: var(--us-ink); }
/* two weights of glass: thin (12) for chips and hands over imagery, thick (28) for sheets and cards */
.us-glass--thin { --us-glass-blur: var(--us-glass-blur-thin); }
/* things arrive in order: each row rises after the one before, twenty milliseconds apart, eight at most;
   `backwards` holds the start through the delay and lets go after, so a hover's own transform stays the hover's */
.us-ranked__row, .us-explore__cell, .us-log__row, .us-fact, .us-deck__tab { animation: us-rise var(--us-meso) var(--us-eo) backwards; animation-delay: calc(var(--us-i, 0) * var(--us-step)); }
/* a thing keeps its place when it opens: the browser's own view transition, at the system's pace */
::view-transition-group(*) { animation-duration: var(--us-meso); animation-timing-function: var(--us-eo); }
.us-sheet[open] { view-transition-name: us-sheet; }
/* a scene: the world's own pace for a cut, and a materialise on the way in */
::view-transition-old(us-scene) { animation-duration: var(--us-macro); }
::view-transition-new(us-scene) { animation: us-materialise var(--us-macro) var(--us-eo); }
.us-scene__question { max-width: min(100%, 420px); }
/* two classes, so the question card's own light glass, declared later, does not win the tie */
.us-question.us-scene__question { background: var(--us-glass-dark); color: var(--us-on-glass-dark); }
/* on dark glass the ink is light: words, fields and the pill inside follow the re-pointed tokens */
.us-glass--dark, .us-scene__question { --us-ink: #ffffff; --us-ink-2: rgba(255,255,255,.8); --us-ink-3: rgba(255,255,255,.62); --us-on-ink: #0f0f0f;
  --us-line: rgba(255,255,255,.14); --us-tint: rgba(255,255,255,.08); --us-tint-2: rgba(255,255,255,.14); --us-sunk: rgba(255,255,255,.08); --us-surface: rgba(255,255,255,.12); }
/* two grounds under one clock */
.us-compare__pane--ground { position: relative; overflow: hidden; }
.us-compare__ground { position: absolute; inset: 0; z-index: 0; }
.us-compare__ground > * { width: 100%; height: 100%; object-fit: cover; }
.us-compare__ground::after { content: ""; position: absolute; inset: 0; background: var(--us-scrim); }
/* the clock over the ground: night falls with --us-t, on both panes at once */
.us-compare__ground::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: calc(var(--us-t, 0) * .55); transition: opacity var(--us-micro) var(--us-eo); }
.us-compare__pane--ground > :not(.us-compare__ground) { position: relative; z-index: 1; }
/* the pathway: stations passed and the one reached */
.us-station.is-passed .us-station__dot { opacity: .45; }
.us-station.is-passed .us-station__n { color: var(--us-ink-3); }
/* the shutter: a light passes once at capture */
.us-frame__shutter { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: us-shutter var(--us-meso) var(--us-eo); }
.us-frame:has(.us-frame__shutter) .us-frame__c { animation: us-pinch var(--us-meso) var(--us-eo); }
@keyframes us-shutter { 0% { opacity: 0; } 25% { opacity: .75; } 100% { opacity: 0; } }
@keyframes us-pinch { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }
/* depth: how high a thing sits, one number bound to its shadow */
.us-depth-0, [data-depth="0"] { box-shadow: none; }
.us-depth-1, [data-depth="1"] { box-shadow: var(--us-shadow-1); }
.us-depth-2, [data-depth="2"] { box-shadow: var(--us-shadow-2); }
.us-depth-3, [data-depth="3"] { box-shadow: var(--us-shadow-3); }
.us-glass--dark { background: var(--us-glass-dark); color: var(--us-on-glass-dark); -webkit-backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--us-shadow-2); }

/* ── button: black is the accent ────────────────────────────────────────── */
.us-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--us-sp-2);
  min-height: var(--us-h-md); padding: 0 var(--us-sp-5); border-radius: var(--us-r-pill); border: 0;
  background: var(--us-surface); color: var(--us-ink); box-shadow: var(--us-shadow-1);
  font: var(--us-w-semibold) var(--us-t-body)/1 var(--us-sans); letter-spacing: var(--us-tracking);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--us-press) var(--us-eo), background var(--us-micro) var(--us-eo), box-shadow var(--us-micro) var(--us-eo), color var(--us-micro) var(--us-eo); }
.us-btn:hover, .us-btn.is-hover { background: var(--us-surface-2); box-shadow: var(--us-shadow-2); }
.us-btn:active, .us-btn.is-active { transform: scale(.96); box-shadow: var(--us-shadow-1); }
.us-btn:focus-visible, .us-btn.is-focus { outline: none; box-shadow: var(--us-ring); }
.us-btn:disabled { cursor: default; opacity: .45; transform: none; }
.us-btn--primary { background: var(--us-ink); color: var(--us-on-ink); box-shadow: var(--us-shadow-1); }
.us-btn--primary:hover, .us-btn--primary.is-hover { background: var(--us-ink); opacity: .92; box-shadow: var(--us-shadow-2); }
.us-btn--accent { background: var(--us-accent); color: var(--us-on-accent); }
.us-btn--accent:hover, .us-btn--accent.is-hover { background: var(--us-accent-2); }
.us-btn--ghost { background: transparent; box-shadow: none; }
.us-btn--ghost:hover, .us-btn--ghost.is-hover { background: var(--us-tint); box-shadow: none; }
.us-btn--bad { background: var(--us-bad-wash); color: var(--us-bad); box-shadow: none; }
.us-btn--bad:hover, .us-btn--bad.is-hover { background: var(--us-bad-wash); box-shadow: var(--us-shadow-1); }/* A button that holds something open (a panel, a menu) or is on says so itself: the tint and an ink hairline. Its
   focus ring still shows over it. (A utility ring on a .us-btn does nothing: the button's own box-shadow wins.) */
.us-btn:not(.us-btn--primary):not(.us-btn--bad)[aria-expanded="true"], .us-btn:not(.us-btn--primary):not(.us-btn--bad)[aria-pressed="true"], .us-btn:not(.us-btn--primary):not(.us-btn--bad).is-on { background: var(--us-tint-2); box-shadow: inset 0 0 0 1px var(--us-ink); }
.us-btn:not(.us-btn--primary):not(.us-btn--bad)[aria-expanded="true"]:focus-visible, .us-btn:not(.us-btn--primary):not(.us-btn--bad)[aria-pressed="true"]:focus-visible, .us-btn:not(.us-btn--primary):not(.us-btn--bad).is-on:focus-visible { box-shadow: var(--us-ring); }
.us-btn--xs { min-height: var(--us-h-xs); padding: 0 var(--us-sp-3); font-size: var(--us-t-small); }
.us-btn--sm { min-height: var(--us-h-sm); padding: 0 var(--us-sp-4); font-size: var(--us-t-small); }
.us-btn--lg { min-height: var(--us-h-lg); padding: 0 var(--us-sp-6); font-size: var(--us-t-lead); }
.us-btn--icon { width: var(--us-h-md); padding: 0; }
.us-btn--icon.us-btn--xs { width: var(--us-h-xs); } .us-btn--icon.us-btn--sm { width: var(--us-h-sm); } .us-btn--icon.us-btn--lg { width: var(--us-h-lg); }
.us-btn__icon { display: inline-flex; width: 1.1em; height: 1.1em; }
.us-btn__icon svg { width: 100%; height: 100%; }
.us-btn.is-loading .us-btn__label { opacity: .6; }
.us-spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: us-spin var(--us-turn) linear infinite; }
@keyframes us-spin { to { transform: rotate(360deg); } }

/* ── field: a filled tone, no outline until it is yours ─────────────────── */
.us-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--us-sp-2); }
.us-field__label { font: var(--us-w-medium) var(--us-t-label)/1.2 var(--us-sans); color: var(--us-ink-2); letter-spacing: .02em; }
.us-field__hint { font-size: var(--us-t-label); color: var(--us-ink-2); margin: 0; }
.us-input { display: block; width: 100%; min-height: var(--us-h-md); padding: 0 var(--us-sp-4);
  border: 1.5px solid transparent; border-radius: var(--us-r-md); background: var(--us-sunk);
  color: var(--us-ink); font: var(--us-w-regular) var(--us-t-lead)/1 var(--us-sans);
  transition: border-color var(--us-micro) var(--us-eo), background var(--us-micro) var(--us-eo), box-shadow var(--us-micro) var(--us-eo); }
.us-input::placeholder { color: var(--us-ink-3); }
.us-input:focus-visible, .us-input.is-focus { outline: none; background: var(--us-surface); border-color: var(--us-ink); }
.us-input[aria-invalid="true"] { border-color: var(--us-bad); }
.us-input:disabled { opacity: .5; }
.us-select { position: relative; display: block; width: 100%; }
.us-select .us-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.us-select__chev { position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--us-ink-2); border-bottom: 1.5px solid var(--us-ink-2); transform: rotate(45deg); pointer-events: none; }
/* an icon that leads a field: the field seats it, and its text starts clear of it (lens 16px at 12px, then 8px) */
.us-input-lead { position: relative; display: block; width: 100%; }
.us-input-lead__icon { position: absolute; left: var(--us-sp-3); top: 50%; transform: translateY(-50%); display: inline-flex; width: 16px; height: 16px; color: var(--us-ink-3); pointer-events: none; }
.us-input-lead__icon > svg, .us-input-lead__icon > .us-icon { width: 100%; height: 100%; }
.us-input.us-input--lead { padding-left: calc(var(--us-sp-3) + 16px + var(--us-sp-2)); }
textarea.us-input { height: auto; min-height: calc(var(--us-h-md) * 2.2); padding: var(--us-sp-3) var(--us-sp-4); line-height: 1.5; resize: vertical; }
.us-field__error { display: grid; gap: 2px; padding: var(--us-sp-3) var(--us-sp-4); border-radius: var(--us-r-sm);
  background: var(--us-bad-wash); color: var(--us-ink); font-size: var(--us-t-small); }
.us-field__error b { color: var(--us-bad); font-weight: var(--us-w-medium); }
.us-field__error small { color: var(--us-ink-2); font-size: var(--us-t-label); }

/* ── card: lifted, never outlined ───────────────────────────────────────── */
.us-card { background: var(--us-surface); border: 0; border-radius: var(--us-r-lg); box-shadow: var(--us-shadow-ring), var(--us-shadow-1); overflow: hidden; }
/* A card that is a control draws its own state: on (pressed, expanded, is-on) an ink edge, and where the keyboard is,
   the ring. The card's box-shadow is the only place either can go — this sheet is unlayered, so an adopter's ring or
   shadow utility on a .us-card does nothing, and a tile that removed its outline was left with no focus at all. */
.us-card[aria-pressed="true"], .us-card[aria-expanded="true"], .us-card.is-on { box-shadow: 0 0 0 2px var(--us-ink), var(--us-shadow-1); }
.us-card:focus-visible { outline: none; box-shadow: var(--us-ring), var(--us-shadow-1); }
.us-card--flat { box-shadow: none; border: 1px solid var(--us-line); }
.us-card--sunk { background: var(--us-sunk); box-shadow: var(--us-shadow-ring); }
.us-card--glass { background: var(--us-glass); -webkit-backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); box-shadow: var(--us-glass-hl), var(--us-shadow-2); }
.us-card__head { display: flex; align-items: center; gap: var(--us-sp-3); padding: var(--us-sp-5) var(--us-sp-6) 0; }
.us-card__head .us-title { font-size: var(--us-t-title); }
.us-card__body { padding: var(--us-sp-5) var(--us-sp-6); }
.us-card__foot { display: flex; align-items: center; gap: var(--us-sp-2); justify-content: flex-end; padding: 0 var(--us-sp-6) var(--us-sp-5); }
.us-card__sp { margin-left: auto; }

/* ── pill ───────────────────────────────────────────────────────────────── */
.us-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 var(--us-sp-3);
  border-radius: var(--us-r-pill); border: 0; background: var(--us-tint); color: var(--us-ink-2);
  font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); white-space: nowrap; }
.us-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.us-pill--ok { color: var(--us-ok); background: var(--us-ok-wash); }
.us-pill--warn { color: var(--us-warn); background: var(--us-warn-wash); }
.us-pill--bad { color: var(--us-bad); background: var(--us-bad-wash); }
.us-pill--accent { color: var(--us-accent-ink); background: var(--us-accent-wash); }
.us-pill--live i { animation: us-live var(--us-pulse) var(--us-eo) infinite; }
@keyframes us-live { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .45; transform: scale(.8);} }

/* ── tabs: segmented pills ──────────────────────────────────────────────── */
.us-tabs__list { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--us-r-pill); background: var(--us-tint);
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.us-tabs__list::-webkit-scrollbar { display: none; }
.us-tab { appearance: none; background: none; border: 0; border-radius: var(--us-r-pill); padding: 0 var(--us-sp-4); min-height: var(--us-h-xs);
  display: inline-flex; align-items: center; gap: var(--us-sp-2); white-space: nowrap; flex: none;
  color: var(--us-ink-2); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); cursor: pointer;
  transition: color var(--us-micro) var(--us-eo), background var(--us-micro) var(--us-eo), transform var(--us-press) var(--us-eo); }
.us-tab:hover, .us-tab.is-hover { color: var(--us-ink); }
.us-tab:active { transform: scale(.96); }
/* a pressed toggle in a pill row (a range, a filter: aria-pressed, not a tab) sits the same as a selected tab */
.us-tab[aria-selected="true"], .us-tab[aria-pressed="true"] { color: var(--us-ink); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
/* the selected ground glides: one pill under the tabs, placed from the selected tab's own box; once it is placed the
   tab gives up its own ground (it keeps it until then, and without script), and keeps its focus ring */
.us-tabs__list { position: relative; }
.us-tabs__list .us-tab { position: relative; z-index: 1; }
.us-tabs__glide { display: none; }
.us-tabs__list[data-glide] > .us-tabs__glide { display: block; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--us-glide-w); transform: translateX(var(--us-glide-x));
  border-radius: var(--us-r-pill); background: var(--us-surface); box-shadow: var(--us-shadow-1); pointer-events: none; }
.us-tabs__list[data-glide="glide"] > .us-tabs__glide { transition: transform var(--us-meso) var(--us-eo), width var(--us-meso) var(--us-eo); }
.us-tabs__list[data-glide] .us-tab[aria-selected="true"] { background: none; }
.us-tabs__list[data-glide] .us-tab[aria-selected="true"]:not(:focus-visible) { box-shadow: none; }
.us-tab:focus-visible { outline: none; box-shadow: var(--us-ring); }
/* a pill row scrolls, so it clips: focus stays inside the pill, where its 3px of padding cannot cut it */
.us-tabs__list > :focus-visible, .us-deck__list :focus-visible, .us-stations :focus-visible { box-shadow: inset 0 0 0 2px var(--us-focus); }
.us-tabs__panel { padding-top: var(--us-sp-5); animation: us-fade var(--us-micro) var(--us-eo); }
@keyframes us-fade { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} }
/* a display line arrives in focus: from an 8px blur, never a slide */
@keyframes us-focus { from { opacity: 0; filter: blur(8px);} to { opacity: 1; filter: none;} }

/* ── switch ─────────────────────────────────────────────────────────────── */
.us-switch { position: relative; width: 44px; height: 26px; border-radius: var(--us-r-pill); border: 0; background: var(--us-tint-2); padding: 0; cursor: pointer;
  transition: background var(--us-micro) var(--us-eo); }
.us-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--us-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--us-dur) var(--us-eo); }
.us-switch[aria-checked="true"] { background: var(--us-ink); }
.us-switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--us-on-ink); }
.us-switch:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-switch:disabled { opacity: .45; cursor: default; }
.us-switch__row { display: inline-flex; align-items: center; gap: var(--us-sp-3); }

/* ── sheet: the one card, glass, rising ─────────────────────────────────── */
.us-sheet { border: 0; border-radius: var(--us-r-xl); padding: 0; background: var(--us-glass); color: var(--us-ink);
  -webkit-backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat));
  width: min(92vw, 560px); box-shadow: var(--us-glass-hl), var(--us-shadow-3); }
.us-sheet::backdrop { background: var(--us-veil); -webkit-backdrop-filter: blur(var(--us-veil-blur)); backdrop-filter: blur(var(--us-veil-blur)); }
.us-sheet[open] { animation: us-materialise var(--us-meso) var(--us-eo); }
/* growing from what was pressed: the sheet's own arrival gives way to the growth */
.us-sheet[open][data-from] { animation-name: none; }
/* one surface, many steps: the words of the next step fade in while the height travels (the Sheet animates it) */
.us-sheet__body--step { animation: us-fade var(--us-dur) var(--us-eo); }
/* a sheet opened over a sheet: the first steps back, smaller and up, under the second's veil, and returns when it closes */
.us-sheet { transition: transform var(--us-meso) var(--us-eo); }
.us-sheet[data-under] { transform: translateY(-16px) scale(.94); }
@keyframes us-rise { from { opacity: 0; transform: translateY(2px) scale(.98);} to { opacity: 1; transform: none;} }
@keyframes us-materialise { from { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(12px);} to { opacity: 1; transform: none; filter: none;} }
@keyframes us-settle { from { transform: scale(.96);} to { transform: none;} }
.us-sheet__head { display: flex; align-items: center; gap: var(--us-sp-3); padding: var(--us-sp-7) var(--us-sp-7) 0; }
/* what sits beside the title (a mark, a pill, the way out) sits at the far edge, never against the words */
.us-sheet__head > .us-title + * { margin-left: auto; }
.us-sheet__head .us-title { font-size: var(--us-t-title); }
.us-sheet__body { padding: var(--us-sp-4) var(--us-sp-7) var(--us-sp-5); }
.us-sheet__foot { display: flex; gap: var(--us-sp-2); justify-content: flex-end; padding: 0 var(--us-sp-7) var(--us-sp-7); }
/* a drawer: from the right edge, the full height, beside the page */
.us-sheet--right { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(92vw, 480px); border-radius: var(--us-r-xl) 0 0 var(--us-r-xl); overflow-y: auto; }
.us-sheet--right[open] { animation: us-slide-in var(--us-meso) var(--us-eo); }
@keyframes us-slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .us-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--us-r-xl) var(--us-r-xl) 0 0; padding-bottom: var(--us-sab); }
  .us-sheet__head, .us-sheet__body, .us-sheet__foot { padding-left: var(--us-sp-5); padding-right: var(--us-sp-5); } }
@media (max-width: 520px) { .us-sheet--right { margin: 0; border-radius: 0; padding-bottom: var(--us-sab); } }

/* ── toast ──────────────────────────────────────────────────────────────── */
.us-toasts { position: fixed; right: calc(var(--us-sp-4) + var(--us-sar)); bottom: calc(var(--us-sp-4) + var(--us-sab)); display: grid; gap: var(--us-sp-2); z-index: 100; width: min(92vw, 380px); }
.us-toast { display: grid; grid-template-columns: 1fr auto; gap: var(--us-sp-3); align-items: start; background: var(--us-ink); color: var(--us-on-ink);
  border-radius: var(--us-r-md); padding: var(--us-sp-4) var(--us-sp-4) var(--us-sp-4) var(--us-sp-5); box-shadow: var(--us-shadow-2); animation: us-rise var(--us-meso) var(--us-eo); position: relative; overflow: hidden; }
.us-toast::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--us-ink-3); }
.us-toast--ok::before { background: var(--us-ok); } .us-toast--warn::before { background: var(--us-warn); } .us-toast--bad::before { background: var(--us-bad); }
.us-toast__title { font-weight: var(--us-w-medium); font-size: var(--us-t-body); }
.us-toast__body { font-size: var(--us-t-small); opacity: .8; margin-top: 2px; }
.us-toast__act { margin-top: var(--us-sp-2); }
.us-toast__x { appearance: none; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px; }
.us-toast__x:hover { opacity: 1; }
/* the stack: every toast in one cell, the newest in front, the older tucked behind and up; hover or focus lays them out */
.us-toasts { grid-template-areas: "t"; align-items: end; }
.us-toasts > .us-toast { grid-area: t; transform-origin: 50% 0; transform: translateY(calc(var(--us-d, 0) * -10px)) scale(calc(1 - var(--us-d, 0) * .05));
  transition: transform var(--us-meso) var(--us-eo), opacity var(--us-dur) var(--us-eo); interpolate-size: allow-keywords; }
.us-toasts > .us-toast[data-hidden] { opacity: 0; pointer-events: none; }
.us-toasts:hover, .us-toasts:focus-within { grid-template-areas: none; }
.us-toasts:hover > .us-toast, .us-toasts:focus-within > .us-toast { grid-area: auto; transform: none; opacity: 1; pointer-events: auto; }
/* a wait says it is waiting: a live dot, never a spinner; its answer arrives in the same toast, the words fading across */
.us-toast--looking::before { background: var(--us-on-ink); opacity: .45; }
.us-toast__wait { display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 2px; border-radius: 50%; background: currentColor; animation: us-live var(--us-pulse) var(--us-eo) infinite; }
.us-toast__words { animation: us-fade var(--us-dur) var(--us-eo); }

/* ── banner ─────────────────────────────────────────────────────────────── */
.us-banner { display: flex; gap: var(--us-sp-3); align-items: center; padding: var(--us-sp-3) var(--us-sp-5); border: 0; border-radius: var(--us-r-md); background: var(--us-tint); font-size: var(--us-t-small); }
.us-banner--ok { background: var(--us-ok-wash); } .us-banner--warn { background: var(--us-warn-wash); } .us-banner--bad { background: var(--us-bad-wash); }
.us-banner__sp { margin-left: auto; }

/* ── faces ──────────────────────────────────────────────────────────────── */
/* a figure that rolls: one column of digits per place, turned to its value; the columns are drawing, the figure is text */
.us-roll { position: relative; display: inline-flex; line-height: 1.2; }
.us-roll__d { display: inline-block; height: 1.2em; overflow: hidden; user-select: none; }
.us-roll__col { display: flex; flex-direction: column; transform: translateY(calc(var(--v) * -1.2em)); transition: transform var(--us-meso) var(--us-eo); }
.us-roll__col::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; line-height: 1.2em; text-align: center; }
.us-roll__c { display: block; height: 1.2em; line-height: 1.2em; user-select: none; }
.us-roll__c::before { content: attr(data-c); }
.us-faces { display: inline-flex; align-items: center; }
.us-face { --d: 32px; width: var(--d); height: var(--d); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--us-sunk); color: var(--us-ink); box-shadow: 0 0 0 2px var(--us-surface); overflow: hidden;
  font: var(--us-w-medium) calc(var(--d) * .38)/1 var(--us-sans); letter-spacing: .004em; flex: none; }
.us-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-faces .us-face + .us-face { margin-left: calc(var(--d) * -.3); }
/* a stack: each face in its own place, overlapping the one before; pressed, hovered or focused it lifts and says its name */
.us-faces__one { position: relative; display: inline-flex; transition: transform var(--us-dur) var(--us-eo); }
.us-faces__one + .us-faces__one > .us-face, .us-faces__one + .us-face--more { margin-left: calc(var(--d) * -.3); }
.us-faces__name { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 2px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 2px var(--us-sp-2); border-radius: var(--us-r-pill); background: var(--us-ink); color: var(--us-on-ink); font: var(--us-w-medium) var(--us-t-label)/1.5 var(--us-sans);
  transition: opacity var(--us-dur) var(--us-eo), transform var(--us-dur) var(--us-eo); z-index: 2; }
.us-faces__one:hover, .us-faces__one:active, .us-faces__one:focus-within, button:focus-visible > .us-faces__one { transform: translateY(-2px); z-index: 1; }
.us-faces__one:hover > .us-faces__name, .us-faces__one:active > .us-faces__name, .us-faces__one:focus-within > .us-faces__name, button:focus-visible > .us-faces__one > .us-faces__name { opacity: 1; transform: translate(-50%, 0); }
.us-face--sm { --d: 24px; } .us-face--lg { --d: 44px; } .us-face--xl { --d: 64px; }
.us-face--live { box-shadow: 0 0 0 2px var(--us-surface), 0 0 0 4px var(--us-ok); }
.us-face--more { background: var(--us-tint-2); color: var(--us-ink-2); font-size: calc(var(--d) * .34); }
/* a scroll row clips what it holds, a live face's ring too: it pads by the ring and takes it back outside, so nothing moves */
.us-faces--bar { gap: var(--us-sp-4); max-width: calc(100% + 12px); overflow-x: auto; padding: 6px 6px 8px; margin: -6px -6px -4px; scrollbar-width: none; }
.us-faces--bar::-webkit-scrollbar { display: none; }
.us-faces--bar .us-face + .us-face { margin-left: 0; }
.us-face__wrap { display: inline-grid; justify-items: center; gap: 6px; font-size: var(--us-t-label); color: var(--us-ink-2); max-width: 72px; }
.us-face__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── stat tile: the number is the headline ──────────────────────────────── */
.us-stat { display: grid; gap: var(--us-sp-1); padding: var(--us-sp-5) var(--us-sp-6); border: 0; border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
/* A figure on a card is ON that card: inside a card or a sheet a stat and a budget lose their own surface, lift and
   padding, and take the card body's. Standing alone they are their own small card. */
.us-card .us-stat, .us-card .us-budget, .us-sheet .us-stat, .us-sheet .us-budget { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.us-stat__value { display: flex; align-items: baseline; gap: var(--us-sp-2); font: var(--us-w-regular) var(--us-d-md)/1 var(--us-serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.us-stat__unit { font: var(--us-w-regular) var(--us-t-small)/1 var(--us-sans); color: var(--us-ink-2); }
.us-stat__delta { font-size: var(--us-t-label); color: var(--us-ink-2); font-variant-numeric: tabular-nums; }
.us-stat__delta--ok { color: var(--us-ok); } .us-stat__delta--bad { color: var(--us-bad); } .us-stat__delta--warn { color: var(--us-warn); }
.us-stat__range { font-size: var(--us-t-label); color: var(--us-ink-3); font-family: var(--us-mono); }
.us-stat__trace { display: inline-flex; align-items: center; gap: var(--us-sp-2); color: var(--us-ink-2); margin-top: 4px; }
.us-stat__scale { font: var(--us-w-regular) 12px/1 var(--us-mono); color: var(--us-ink-3); letter-spacing: .06em; text-transform: uppercase; }
/* a readout is a measurement or a named unknown (law 4; LANE 343): the dash is not a value, the words say what is known */
.us-stat__none { color: var(--us-ink-3); }
.us-stat__known { font-size: var(--us-t-label); color: var(--us-ink-2); }
.us-trace { display: block; }

/* ── row: the spine, hairlines inside a surface ─────────────────────────── */
.us-rows { display: grid; }
.us-row { display: grid; grid-template-columns: var(--us-spine); gap: var(--us-sp-3); align-items: center; padding: var(--us-sp-3) 0; border-bottom: 1px solid var(--us-line); min-height: 48px; }
.us-row:last-child { border-bottom: 0; }
.us-row__glyph { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--us-ink-2); }
.us-row__glyph svg { width: 100%; height: 100%; }
.us-row__main { min-width: 0; display: grid; gap: 2px; }
.us-row__name { font-weight: var(--us-w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-row__spec { font-size: var(--us-t-label); color: var(--us-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-row__time { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-2); }
.us-row__value { font: var(--us-w-medium) var(--us-t-lead)/1 var(--us-serif); color: var(--us-ink); text-align: right; font-variant-numeric: tabular-nums; }
.us-row__unit { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-sans); color: var(--us-ink-3); }
.us-row__act { display: inline-flex; gap: var(--us-sp-1); }
.us-row--live .us-row__name::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--us-ok); margin-left: 6px; vertical-align: 2px; }
@media (max-width: 520px) { .us-row { grid-template-columns: 18px minmax(0,1fr) auto; } .us-row__time, .us-row__unit { display: none; } .us-row__act { grid-column: 3; } }
/* a unit stays beside its value on a phone (LANE 592.v4e): the rule above hid it, so a Row that obeys "a unit has its
   own track" showed a bare figure. A Row whose unit says something gives it a fourth track that fits it up to 8 of the
   row's em, where a long unit wraps (at its spaces, or anywhere in one long word) rather than crowd out the name. Actions
   keep the value's track on the next line, so a wide one never pulls the value and its unit off the right edge. A Row
   with no unit keeps three tracks, so values stay flush right. Both rules weigh one class (:where) and come after the
   rule they amend, so a feature's own row grid, or its own word on the unit (`.x .us-row__unit`), keeps winning; a
   feature that does neither shows its unit on a phone as it does on a desktop. To drop a unit on a phone, pass none or
   hide it yourself (`.x .us-row__unit { display: none }`): your own grid alone does not drop it. A unit must be absent,
   not blank (a space is not :empty). A browser without :has keeps the rule above, never a broken grid. */
@supports selector(:has(*)) {
  @media (max-width: 520px) {
    .us-row:where(:has(> .us-row__unit:not(:empty))) { grid-template-columns: 18px minmax(0,1fr) auto fit-content(8em); }
    :where(.us-row:has(> .us-row__unit:not(:empty))) > .us-row__unit { display: block; overflow-wrap: anywhere; }
  }
}

/* ── hold to confirm ────────────────────────────────────────────────────── */
.us-hold { --p: 0; position: relative; user-select: none; -webkit-user-select: none; touch-action: none; }
.us-hold__ring { position: relative; width: 20px; height: 20px; border-radius: 50%; flex: none; background: conic-gradient(currentColor calc(var(--p) * 1turn), transparent 0); }
.us-hold__ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--us-surface); }
.us-btn--primary .us-hold__ring::after { background: var(--us-ink); }
.us-btn--bad .us-hold__ring::after { background: var(--us-bad-wash); }
.us-hold.is-holding { transform: scale(.96); }
.us-hold.is-done .us-hold__ring { background: var(--us-ok); }
.us-hold.is-done .us-hold__ring::after { content: "✓"; display: grid; place-items: center; inset: 0; background: transparent; color: var(--us-on-ink); font-size: 12px; }

/* ── skeleton · empty ───────────────────────────────────────────────────── */
.us-skel { display: block; border-radius: var(--us-r-sm); background: var(--us-tint-2); position: relative; overflow: hidden; min-height: 1em; }
.us-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--us-tint), transparent); transform: translateX(-100%); animation: us-shimmer var(--us-tick) var(--us-eo) infinite; }
@keyframes us-shimmer { to { transform: translateX(100%); } }
.us-empty { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-9) var(--us-sp-6); text-align: center; justify-items: center; }
.us-empty .us-voice { font-size: var(--us-d-sm); }
.us-empty--refused .us-kicker { color: var(--us-warn); }
.us-empty--unreached .us-kicker { color: var(--us-bad); }
/* the quiet sentence: one line for a corner that is looking, empty, refused or unreached */
.us-quiet { font-size: var(--us-t-small); line-height: 1.5; color: var(--us-ink-3); margin: 0; max-width: var(--us-measure); }
.us-quiet--refused { color: var(--us-warn); }
.us-quiet--unreached { color: var(--us-bad); }
.us-quiet__dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.us-quiet__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .35; animation: us-quiet-dot var(--us-tick) var(--us-eo) infinite; }
.us-quiet__dots i:nth-child(2) { animation-delay: .2s; }
.us-quiet__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes us-quiet-dot { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }

/* ── icon ───────────────────────────────────────────────────────────────── */
.us-icon { display: inline-block; vertical-align: -0.15em; flex: none; }

/* ── glyph ──────────────────────────────────────────────────────────────── */
.us-glyph { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; font-size: 18px; line-height: 1; color: currentColor; }
.us-glyph--sm { font-size: 13px; } .us-glyph--lg { font-size: 28px; }

/* ── source (provenance) ────────────────────────────────────────────────── */
.us-source { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-6); border: 0; border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-source__head { display: flex; align-items: center; gap: var(--us-sp-3); }
.us-source__head .us-kicker { flex: 1; text-transform: none; letter-spacing: .01em; font-family: var(--us-mono); }
.us-source__seen { color: var(--us-ink-3); }
.us-source__title { margin: 0; font: var(--us-w-semibold) var(--us-t-title)/1.2 var(--us-sans); letter-spacing: -.01em; }
.us-source__title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--us-line-2); }
.us-source__title a:hover { border-bottom-color: var(--us-ink); }
.us-source__claim, .us-source__obs, .us-source__app { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-2); line-height: 1.5; max-width: var(--us-measure); }
.us-source__k { display: inline-block; min-width: 76px; font: var(--us-w-medium) var(--us-t-label)/1.6 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); margin-right: var(--us-sp-2); vertical-align: top; }
.us-source__limits { display: flex; gap: var(--us-sp-2); align-items: flex-start; padding: var(--us-sp-3) var(--us-sp-4); border-radius: var(--us-r-sm); background: var(--us-warn-wash); font-size: var(--us-t-small); }
.us-source__limits ul { margin: 0; padding-left: 1.1em; color: var(--us-ink-2); }
.us-source__limits .us-source__k { color: var(--us-warn); }

/* ── scrub (time) ───────────────────────────────────────────────────────── */
.us-scrub { display: grid; gap: var(--us-sp-2); }
.us-scrub__row { display: flex; align-items: baseline; gap: var(--us-sp-3); min-height: var(--us-h-xs); }
.us-scrub__label { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: var(--us-tr-kicker); text-transform: uppercase; color: var(--us-ink-3); }
.us-scrub__out { font: var(--us-w-regular) var(--us-d-sm)/1 var(--us-serif); color: var(--us-ink); margin-left: auto; font-variant-numeric: tabular-nums; }
.us-scrub__range { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; }
.us-scrub__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--us-ink) var(--p), var(--us-tint-2) var(--p)); }
.us-scrub__range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--us-tint-2); }
.us-scrub__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--us-ink); }
.us-scrub__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--us-surface); box-shadow: var(--us-shadow-2), 0 0 0 1px rgba(0,0,0,.06); transition: transform var(--us-press) var(--us-eo); }
.us-scrub__range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--us-surface); box-shadow: var(--us-shadow-2); }
.us-scrub__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.us-scrub__range:focus-visible { outline: none; }
.us-scrub__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--us-ring); }
.us-scrub__marks { position: relative; height: 16px; font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); color: var(--us-ink-3); }
.us-scrub__marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.us-scrub__marks span:first-child { transform: none; } .us-scrub__marks span:last-child { transform: translateX(-100%); }
.us-scrub.is-away .us-scrub__out { color: var(--us-accent-ink); }
/* the readout ticks with the hand: a new value fades in, keyed on the value */
.us-scrub__tick { display: inline-block; animation: us-fade var(--us-micro) var(--us-eo); }

/* ── storyboard ─────────────────────────────────────────────────────────── */
.us-story__wrap { display: grid; gap: 4px; min-width: 0; max-width: 100%; timeline-scope: --us-story; }
.us-story { display: flex; gap: var(--us-sp-3); overflow-x: auto; min-width: 0; max-width: calc(100% + 8px); padding: var(--us-sp-2) 4px var(--us-sp-3); margin-inline: -4px; scroll-snap-type: x proximity; scrollbar-width: thin;  scroll-timeline: --us-story inline; }
/* the progress line: the frames' own scroll scrubs it (scroll timeline); without one it stands at the selection */
.us-story__progress { display: block; height: 2px; border-radius: 1px; background: var(--us-ink); transform-origin: 0 50%; transform: scaleX(var(--us-story-t, 0)); transition: transform var(--us-micro) var(--us-eo); }
@supports (animation-timeline: scroll()) {
  .us-story__progress { animation: us-progress linear both; animation-timeline: --us-story; }
}
@keyframes us-progress { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
.us-story__frame { appearance: none; border: 0; background: var(--us-surface); border-radius: var(--us-r-md); padding: var(--us-sp-2); display: grid; gap: 6px; width: 148px; flex: none; text-align: left; cursor: pointer; scroll-snap-align: start; color: var(--us-ink);
  box-shadow: var(--us-shadow-1); transition: box-shadow var(--us-micro) var(--us-eo), transform var(--us-press) var(--us-eo); }
.us-story__frame:active { transform: scale(.97); }
/* the ink ring says which frame; the lift stays small enough for the row that scrolls it (shadow-2 reaches ~90px,
   and the row clipped it flat top and bottom) */
.us-story__frame.is-on { box-shadow: 0 0 0 2px var(--us-ink), var(--us-shadow-1); }
.us-story__frame:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-story__pic { display: block; aspect-ratio: 16 / 10; border-radius: var(--us-r-sm); overflow: hidden; background: var(--us-sunk); }
.us-story__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-story__blank { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--us-tint-2), transparent 70%); }
.us-story__at { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink); }
.us-story__cap { font-size: var(--us-t-label); color: var(--us-ink-2); line-height: 1.3; }
.us-story__src { font: var(--us-w-regular) 12px/1.3 var(--us-mono); color: var(--us-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── compare ────────────────────────────────────────────────────────────── */
.us-compare { display: grid; gap: var(--us-sp-4); }
.us-compare__panes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--us-sp-4); }
.us-compare__pane { display: grid; gap: var(--us-sp-3); align-content: start; padding: var(--us-sp-5); border: 0; border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); min-width: 0; }
@media (max-width: 760px) { .us-compare__panes { grid-template-columns: 1fr; } }

/* ── stations ───────────────────────────────────────────────────────────── */
.us-stations { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.us-station { appearance: none; background: none; border: 0; text-align: left; color: var(--us-ink-2); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); letter-spacing: .02em; padding: 8px 0; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: color var(--us-micro) var(--us-eo); }
.us-station:hover { color: var(--us-ink); }
.us-station.is-on { color: var(--us-ink); }
.us-station__n { color: var(--us-ink-3); min-width: 18px; font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); }
.us-station.is-on .us-station__n { color: var(--us-ink-2); }
.us-station__g { font-size: 13px; }
.us-station__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--us-ink); flex: 0 0 6px; opacity: 0; transition: opacity var(--us-micro) var(--us-eo); margin-left: 2px; align-self: center; }
.us-station.is-on .us-station__dot { opacity: 1; }
.us-station:focus-visible { outline: none; box-shadow: var(--us-ring); border-radius: var(--us-r-xs); }
/* the station reached: its number in an ink disc, light on ink. Above the colour an on station gives its number,
   which on the station you stand in painted ink on ink (NOW, 09-23) */
.us-stations .us-station.is-reached .us-station__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--us-ink); color: var(--us-on-ink); }
@media (max-width: 760px) {
  /* width 0 + min-width 100%: the rail asks nothing of its container's width, so a flex item holding it never grows past the screen */
  .us-stations { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: var(--us-r-pill); background: var(--us-tint); width: 0; min-width: 100%; box-sizing: border-box; }
  .us-stations::-webkit-scrollbar { display: none; }
  /* a fade at the far edge, riding the scroll: what runs past it is more, never a cut word */
  .us-stations::after { content: ""; position: sticky; right: 0; flex: none; width: 28px; margin-left: -28px; align-self: stretch; background: linear-gradient(90deg, transparent, var(--us-tint)); pointer-events: none; }
  .us-station { padding: 8px 14px; border-radius: var(--us-r-pill); white-space: nowrap; }
  .us-station.is-on { background: var(--us-surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--us-ink) 12%, transparent), 0 0 0 .5px color-mix(in srgb, var(--us-ink) 8%, transparent); }
  .us-station__dot { display: none; }
}
/* the row at every width: a surface whose pathway is its top (NOW) lays the rail down on a desk as well */
.us-stations--row { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: var(--us-r-pill); background: var(--us-tint); width: fit-content; max-width: 100%; box-sizing: border-box; }
.us-stations--row::-webkit-scrollbar { display: none; }
.us-stations--row .us-station { padding: 8px 14px; border-radius: var(--us-r-pill); white-space: nowrap; }
.us-stations--row .us-station.is-on { background: var(--us-surface); }
.us-stations--row .us-station__dot { display: none; }

/* ── log ────────────────────────────────────────────────────────────────── */
.us-log { display: grid; }
.us-log__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--us-sp-3); padding: var(--us-sp-3) 0; border-top: 1px solid var(--us-line); font-size: var(--us-t-small); }
.us-log__row:first-child { border-top: 0; }
.us-log__at { font: var(--us-w-regular) var(--us-t-label)/1.5 var(--us-mono); color: var(--us-ink-3); letter-spacing: .04em; }
.us-log__text { color: var(--us-ink-2); line-height: 1.5; }
.us-log__row--ok .us-log__text { color: var(--us-ink); } .us-log__row--ok .us-log__at { color: var(--us-ok); }
.us-log__row--warn .us-log__at { color: var(--us-warn); }
.us-log__row--bad .us-log__text { color: var(--us-ink); } .us-log__row--bad .us-log__at { color: var(--us-bad); }

/* ── question: one at a time ────────────────────────────────────────────── */
.us-question { width: min(100%, var(--us-focus-width)); border-radius: var(--us-r-xl); overflow: hidden; background: var(--us-glass);
  -webkit-backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); backdrop-filter: blur(var(--us-glass-blur, var(--us-glass-blur-thick))) saturate(var(--us-glass-sat)); box-shadow: var(--us-glass-hl), var(--us-shadow-3); }
.us-question__band { background: var(--us-ink); color: var(--us-on-ink); min-height: 150px; display: grid; place-items: center; padding: var(--us-sp-6); }
.us-question__body { display: grid; gap: var(--us-sp-4); padding: var(--us-sp-7) var(--us-sp-7) var(--us-sp-6); }
.us-question__q { margin: 0; font: var(--us-w-regular) var(--us-d-md)/1.1 var(--us-serif); letter-spacing: var(--us-tr-display); color: var(--us-ink); }
.us-question__q em { font-style: italic; }
.us-question__words { display: grid; gap: var(--us-sp-4); justify-items: start; }
.us-question__words > * { justify-self: stretch; }
.us-question__words > .us-question__glyph { justify-self: start; }
.us-question__words--step { animation: us-fade var(--us-dur) var(--us-eo); }
.us-question__glyph { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--us-r-md); background: var(--us-sunk); color: var(--us-ink); }
.us-question__control { display: grid; gap: var(--us-sp-2); }
.us-question__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--us-sp-4); margin-top: var(--us-sp-2); }
.us-dashes { display: inline-flex; gap: 6px; }
.us-dashes i { width: 22px; height: 3px; border-radius: 2px; background: var(--us-tint-2); transition: background var(--us-micro) var(--us-eo); }
.us-dashes i.is-on { background: var(--us-ink); }
@media (max-width: 520px) { .us-question__body { padding: var(--us-sp-6) var(--us-sp-5) var(--us-sp-5); } .us-question__q { font-size: var(--us-d-sm); } }

/* ── head: the head of a page ──────────────────────────────────────────── */
.us-head { display: grid; gap: var(--us-sp-4); min-width: 0; }
.us-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--us-sp-5); min-width: 0; }
.us-head__words { display: grid; gap: var(--us-sp-2); min-width: 0; }
.us-head__name { display: flex; align-items: center; gap: var(--us-sp-3); min-width: 0; flex-wrap: wrap; }
.us-head__title { margin: 0; font: var(--us-w-semibold) var(--us-d-sm)/1.15 var(--us-sans); letter-spacing: -.015em; color: var(--us-ink); }
.us-head__title { animation: us-focus var(--us-meso) var(--us-eo) backwards; }
.us-head__title--voice { font: var(--us-w-regular) var(--us-d-md)/1.05 var(--us-serif); letter-spacing: var(--us-tr-display); }
.us-head__stop { display: none; }
.us-head__acts { display: flex; gap: var(--us-sp-2); align-items: center; flex: none; }
.us-head__path { min-width: 0; }
@media (max-width: 760px) { .us-head__row { flex-direction: column; align-items: stretch; } .us-head__acts { flex-wrap: wrap; } .us-head__title { font-size: 24px; } .us-head__title--voice { font-size: var(--us-d-sm); } }

/* ── the edge: a bar that softens into the page, no line ─────────────────────── */
/* two masked blur layers under the bar, reaching past its foot: what scrolls beneath fades into it instead of meeting a
   border. The bar's own ground thins toward the foot. */
/* the edge needs a containing block for its two blurs, but the host's own position wins: a bar that is fixed or sticky
   stays so. Unlayered, this rule beat NOW's Tailwind `fixed` (a layered utility) and dropped its bar into the flow, where
   it took 56px above a main that already pads for a fixed bar — a blank band under every page's top (read on the served
   NOW, 09-23). In Tailwind's base layer it yields to any utility; with no Tailwind it still applies. */
@layer base { .us-edge { position: relative; } }
.us-edge { isolation: isolate; border-bottom: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--us-ground) 94%, transparent), color-mix(in srgb, var(--us-ground) 72%, transparent)); }
.us-edge::before, .us-edge::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -20px; z-index: -1; pointer-events: none; }
.us-edge::before { -webkit-backdrop-filter: blur(var(--us-veil-blur)); backdrop-filter: blur(var(--us-veil-blur));
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.us-edge::after { -webkit-backdrop-filter: blur(var(--us-glass-blur-thin)); backdrop-filter: blur(var(--us-glass-blur-thin));
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 70%); mask-image: linear-gradient(to bottom, #000 25%, transparent 70%); }
/* the bar's name waits while the page's own head is on screen, and takes the name when the head has gone under */
.us-bar-title { transition: opacity var(--us-dur) var(--us-eo), transform var(--us-dur) var(--us-eo); }
:root[data-us-head="visible"] .us-bar-title { opacity: 0; transform: translateY(4px); }

/* ── cover: the world is the ground ─────────────────────────────────────── */
.us-cover { position: relative; display: grid; align-content: end; border-radius: var(--us-r-xl); overflow: hidden; min-width: 0; background: var(--us-sunk); box-shadow: var(--us-shadow-3); min-height: 320px; }
/* media is edged by its own colour: a 1px ring of what the image is, at 12% (the neutral ring until it is sampled) */
.us-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px var(--us-media-ring, rgba(15,15,15,.08)); }
.us-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.us-cover__ground { position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 70% 20%, rgba(255,255,255,.18), transparent 60%), radial-gradient(50% 60% at 15% 90%, rgba(180,176,166,.12), transparent 60%), linear-gradient(180deg, #2a2e33, #101215 70%, #0b0d10); }
.us-cover__ground::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px), repeating-linear-gradient(25deg, rgba(255,255,255,.025) 0 1px, transparent 1px 42px); }
.us-cover__scrim { position: absolute; inset: 0; background: var(--us-scrim); }
/* in flow, not absolute: the cover grows to hold the words and the note, so a title is never hidden under the note */
.us-cover__over { position: relative; padding: var(--us-sp-7); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--us-sp-6); z-index: 1; }
.us-cover__words { display: grid; gap: var(--us-sp-2); color: #fff; min-width: 0; overflow-wrap: anywhere; }
.us-cover__title { margin: 0; font: var(--us-w-regular) var(--us-d-lg)/1.02 var(--us-serif); letter-spacing: var(--us-tr-display); color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.us-cover__title em { font-style: italic; }
.us-cover__side { display: grid; gap: var(--us-sp-3); justify-items: end; flex: none; max-width: 340px; }
.us-cover__note { padding: var(--us-sp-4) var(--us-sp-5); font-size: var(--us-t-body); color: var(--us-ink-2); line-height: 1.45; }
.us-cover__actions { display: flex; gap: var(--us-sp-2); }
@media (max-width: 760px) { .us-cover__over { flex-direction: column; align-items: stretch; padding: var(--us-sp-5); } .us-cover__side { max-width: none; justify-items: stretch; } .us-cover__title { font-size: var(--us-d-md); } }

/* ── frame: evidence with corner brackets ───────────────────────────────── */
.us-frame { position: relative; margin: 0; border-radius: var(--us-r-md); overflow: hidden; background: var(--us-sunk); box-shadow: var(--us-shadow-1); color: #fff; }
.us-frame__media { position: absolute; inset: 0; }
.us-frame__media > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-frame__c { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.9); pointer-events: none; }
.us-frame__c--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.us-frame__c--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.us-frame__c--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.us-frame__c--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.us-frame__top, .us-frame__foot { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--us-sp-3); padding: var(--us-sp-3) 48px; font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* the label and the time are white, so each band carries its own scrim: a capture can be light (a document, a page,
   snow) and white words on it would be unreadable. */
.us-frame__top { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); } .us-frame__foot { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); }
.us-frame__src { margin-left: auto; text-transform: none; letter-spacing: .02em; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-frame__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--us-bad); animation: us-live var(--us-tick) var(--us-eo) infinite; }

/* ── reduced motion: gentler, never zero ───────────────────────────────── */

/* ═══ the agentic set ═══════════════════════════════════════════════════════
   What an agent is doing, what it asks, what it costs, what it says — honest, numbered, held. */

/* ── steps ──────────────────────────────────────────────────────────────── */
.us-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--us-sp-1); }
.us-step { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: var(--us-sp-3); align-items: start; padding: var(--us-sp-2) 0; color: var(--us-ink-2); }
.us-step__n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); background: var(--us-tint-2); color: var(--us-ink-2); }
.us-step__body { display: grid; gap: 2px; min-width: 0; }
.us-step__label { font-size: var(--us-t-body); }
.us-step__note { font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-step__elapsed { color: var(--us-ink-3); font-family: var(--us-mono); font-size: var(--us-t-label); }
.us-step__at { font: var(--us-w-regular) var(--us-t-label)/1.6 var(--us-mono); color: var(--us-ink-3); }
.us-step--running { color: var(--us-ink); }
.us-step--running .us-step__n { background: var(--us-ink); color: var(--us-on-ink); animation: us-live var(--us-pulse) var(--us-eo) infinite; }
.us-step--done { color: var(--us-ink); } .us-step--done .us-step__n { background: var(--us-ok-wash); color: var(--us-ok); }
.us-step--refused .us-step__n { background: var(--us-bad-wash); color: var(--us-bad); } .us-step--refused .us-step__note { color: var(--us-bad); }
.us-step--skipped { opacity: .55; }

/* ── thinking ───────────────────────────────────────────────────────────── */
.us-thinking { display: inline-flex; align-items: center; gap: var(--us-sp-3); min-height: var(--us-h-sm); padding: 0 var(--us-sp-4) 0 var(--us-sp-3); border-radius: var(--us-r-pill); background: var(--us-surface); box-shadow: var(--us-shadow-1); font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-thinking__dots { display: inline-flex; gap: 4px; }
.us-thinking__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--us-ink); animation: us-dot var(--us-tick) var(--us-eo) infinite; }
.us-thinking__dots i:nth-child(2) { animation-delay: .15s; } .us-thinking__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes us-dot { 0%,100% { opacity: .25; transform: translateY(0);} 50% { opacity: 1; transform: translateY(-2px);} }
.us-thinking__who { color: var(--us-ink); font-weight: var(--us-w-medium); }
.us-thinking__t { font-family: var(--us-mono); font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-thinking__doing { color: var(--us-ink-2); }

/* ── approval ───────────────────────────────────────────────────────────── */
.us-approval { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-6); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-2); }
.us-approval__act { margin: 0; font: var(--us-w-regular) var(--us-d-sm)/1.15 var(--us-serif); letter-spacing: var(--us-tr-display); color: var(--us-ink); }
.us-approval__facts { margin: 0; display: grid; gap: var(--us-sp-2); padding: var(--us-sp-3) 0; border-top: 1px solid var(--us-line); border-bottom: 1px solid var(--us-line); }
.us-approval__facts div { display: grid; grid-template-columns: 76px 1fr; gap: var(--us-sp-3); font-size: var(--us-t-small); }
.us-approval__facts dt { font: var(--us-w-medium) var(--us-t-label)/1.6 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); }
.us-approval__facts dd { margin: 0; color: var(--us-ink-2); }
.us-approval__foot { display: flex; justify-content: flex-end; gap: var(--us-sp-2); align-items: center; }
.us-approval--approved { box-shadow: 0 0 0 2px var(--us-ok), var(--us-shadow-1); }
.us-approval--declined { opacity: .7; }

/* ── composer: the ask bar ──────────────────────────────────────────────── */
/* minmax(0, 1fr): a textarea's intrinsic width must not size the track past its card on a phone */
.us-composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--us-sp-2); }
.us-composer__row { display: flex; align-items: flex-end; gap: var(--us-sp-2); background: var(--us-surface); border-radius: var(--us-r-xl); padding: 8px 8px 8px 18px; box-shadow: var(--us-shadow-1); transition: box-shadow var(--us-micro) var(--us-eo); }
.us-composer__row:focus-within { box-shadow: var(--us-shadow-2); }
.us-composer__tools { display: inline-flex; gap: 2px; align-self: center; }
.us-composer__field { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; padding: 10px 0; font: var(--us-w-regular) var(--us-t-lead)/1.4 var(--us-sans); color: var(--us-ink); outline: none; max-height: 200px; }
.us-composer__field::placeholder { color: var(--us-ink-3); }
.us-composer__send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--us-ink); color: var(--us-on-ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: transform var(--us-press) var(--us-eo), opacity var(--us-micro) var(--us-eo); }
.us-composer__send:active { transform: scale(.92); }
.us-composer__send:disabled { opacity: .3; cursor: default; }
.us-composer__send:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-composer__chips { display: flex; gap: var(--us-sp-2); flex-wrap: wrap; padding: 0 var(--us-sp-2); }

/* ── budget ─────────────────────────────────────────────────────────────── */
.us-budget { display: grid; gap: var(--us-sp-2); padding: var(--us-sp-4) var(--us-sp-5); border-radius: var(--us-r-md); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-budget__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--us-sp-3); }
.us-budget__nums { font: var(--us-w-regular) var(--us-t-small)/1 var(--us-sans); color: var(--us-ink-2); } .us-budget__nums b { font: var(--us-w-regular) var(--us-t-title)/1 var(--us-serif); color: var(--us-ink); }
.us-budget__bar { height: 4px; border-radius: 2px; background: var(--us-tint-2); overflow: hidden; }
.us-budget__bar i { display: block; height: 100%; border-radius: 2px; background: var(--us-ink); transition: width var(--us-meso) var(--us-eo); }
.us-budget.is-over .us-budget__bar i { background: var(--us-warn); }
.us-budget__foot { display: flex; justify-content: space-between; gap: var(--us-sp-3); font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-budget__rem.is-over { color: var(--us-warn); }
.us-budget.is-unknown .us-budget__nums b { color: var(--us-ink-3); }

/* ── stream ─────────────────────────────────────────────────────────────── */
.us-stream { display: grid; gap: var(--us-sp-2); }
.us-stream__text { margin: 0; font-size: var(--us-t-lead); line-height: 1.5; color: var(--us-ink); max-width: var(--us-measure); white-space: pre-wrap; }
.us-stream__caret { display: inline-block; width: 2px; height: 1em; background: var(--us-ink); vertical-align: -2px; margin-left: 2px; animation: us-caret var(--us-blink) steps(2, start) infinite; }
@keyframes us-caret { to { visibility: hidden; } }

/* ═══ the working set ═══════════════════════════════════════════════════════
   Working with the mind: who drives, ask or find, a rank that says why, refinement, the next
   thing proposed, a ghost you can take (docs/the-working-set.md). */

/* ── visually hidden, announced ─────────────────────────────────────────── */
.us-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── wheel: who drives ──────────────────────────────────────────────────── */
.us-wheel { display: grid; gap: var(--us-sp-2); }
.us-wheel__track { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--us-r-pill); background: var(--us-tint); }
.us-wheel__pos { appearance: none; border: 0; background: none; cursor: pointer; min-height: var(--us-h-sm); padding: 0 var(--us-sp-4); border-radius: var(--us-r-pill); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); color: var(--us-ink-2); transition: background var(--us-micro) var(--us-eo), color var(--us-micro) var(--us-eo), box-shadow var(--us-micro) var(--us-eo); white-space: nowrap; }
.us-wheel__pos.is-on { background: var(--us-ink); color: var(--us-on-ink); box-shadow: var(--us-shadow-1); }
.us-wheel__pos:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-wheel__pos:disabled { cursor: not-allowed; opacity: .5; }
.us-wheel__pos.is-unavailable { cursor: not-allowed; color: var(--us-ink-3); }
.us-wheel__meaning { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-2); }

/* ── palette: ask or find ───────────────────────────────────────────────── */
.us-palette { position: fixed; inset: 0; z-index: 60; background: var(--us-scrim); display: grid; justify-items: center; align-items: start; padding: 12vh var(--us-gut) var(--us-gut); }
.us-palette__card { width: min(640px, 100%); background: var(--us-surface); border-radius: var(--us-r-xl); box-shadow: var(--us-shadow-3); overflow: hidden; animation: us-materialise var(--us-meso) var(--us-eo); }
.us-palette__head { display: flex; align-items: center; gap: var(--us-sp-2); padding: var(--us-sp-3) var(--us-sp-4); border-bottom: 1px solid var(--us-line); }
.us-palette__prefix { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--us-on-ink); background: var(--us-ink); padding: 6px 8px; border-radius: var(--us-r-xs); }
.us-palette__field { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: var(--us-w-regular) var(--us-t-lead)/1.4 var(--us-sans); color: var(--us-ink); padding: 8px 0; }
.us-palette__esc, .us-palette__keys { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); background: var(--us-tint); border-radius: var(--us-r-xs); padding: 4px 6px; }
.us-palette__list { max-height: min(56vh, 480px); overflow: auto; padding: var(--us-sp-2); display: grid; gap: var(--us-sp-1); }
.us-palette__group { display: grid; gap: 2px; }
.us-palette__kind { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: var(--us-tr-kicker); text-transform: uppercase; color: var(--us-ink-3); padding: var(--us-sp-2) var(--us-sp-3) var(--us-sp-1); }
.us-palette__hit { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: var(--us-sp-3); align-items: center; padding: var(--us-sp-2) var(--us-sp-3); border-radius: var(--us-r-md); cursor: pointer; color: var(--us-ink); }
.us-palette__hit.is-active { background: var(--us-tint); }
.us-palette__glyph { display: inline-flex; justify-content: center; color: var(--us-ink-2); font-family: var(--us-mono); }
.us-palette__main { display: grid; gap: 1px; min-width: 0; }
.us-palette__name { font-size: var(--us-t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-palette__spec, .us-palette__reason { font-size: var(--us-t-label); color: var(--us-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-palette__reason::before { content: "because "; color: var(--us-ink-3); }
.us-palette__ask .us-palette__name { font-family: var(--us-serif); font-size: var(--us-t-lead); }
.us-palette__hint { padding: var(--us-sp-4) var(--us-sp-3); font-size: var(--us-t-small); color: var(--us-ink-3); }
.us-palette__hint b { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-2); background: var(--us-tint); padding: 2px 5px; border-radius: var(--us-r-xs); }
@media (max-width: 520px) { .us-palette { padding: 0; align-items: end; } .us-palette__card { border-radius: var(--us-r-xl) var(--us-r-xl) 0 0; } }

/* ── ranked: a rank that says why ───────────────────────────────────────── */
.us-ranked { display: grid; gap: var(--us-sp-3); }
.us-ranked__knobs { display: flex; flex-wrap: wrap; gap: var(--us-sp-3) var(--us-sp-5); padding: var(--us-sp-3) var(--us-sp-4); border-radius: var(--us-r-lg); background: var(--us-tint); }
.us-ranked__knob { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--us-sp-2); font-size: var(--us-t-small); color: var(--us-ink-2); min-width: 200px; }
.us-ranked__knob input[type="range"] { accent-color: var(--us-ink); width: 100%; }
.us-ranked__knob-v { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); min-width: 28px; text-align: right; }
.us-ranked__list { list-style: none; margin: 0; padding: 0; display: grid; }
.us-ranked__row { display: grid; grid-template-columns: 28px 18px minmax(0,1fr) auto auto; gap: var(--us-sp-3); align-items: center; padding: var(--us-sp-3) 0; border-bottom: 1px solid var(--us-line); }
.us-ranked__row:last-child { border-bottom: 0; }
.us-ranked__n { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); }
.us-ranked__glyph { display: inline-flex; color: var(--us-ink-2); }
.us-ranked__main { display: grid; gap: 4px; min-width: 0; }
.us-ranked__name { font-weight: var(--us-w-medium); }
.us-ranked__spec { font-size: var(--us-t-label); color: var(--us-ink-2); }
.us-ranked__why { display: flex; flex-wrap: wrap; gap: 4px; }
.us-ranked__w { font-family: var(--us-mono); opacity: .7; }
.us-ranked__none { font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-ranked__score { font: var(--us-w-medium) var(--us-t-lead)/1 var(--us-serif); font-variant-numeric: tabular-nums; color: var(--us-ink); }
.us-ranked__acts { display: inline-flex; gap: 2px; }
.us-ranked__tog { appearance: none; border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--us-ink-3); font: var(--us-w-regular) 15px/1 var(--us-mono); transition: background var(--us-micro) var(--us-eo), color var(--us-micro) var(--us-eo); }
.us-ranked__tog:hover { background: var(--us-tint); color: var(--us-ink); }
.us-ranked__tog[aria-pressed="true"] { background: var(--us-ink); color: var(--us-on-ink); }
.us-ranked__tog:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-ranked__row.is-pinned .us-ranked__n { color: var(--us-ink); }
.us-ranked__row.is-muted { opacity: .5; }
.us-ranked__more { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-3); }
@media (max-width: 520px) { .us-ranked__row { grid-template-columns: 24px minmax(0,1fr) auto; } .us-ranked__glyph, .us-ranked__score { display: none; } }

/* ── facets: refinement as chips ────────────────────────────────────────── */
.us-facets { display: grid; gap: var(--us-sp-3); }
.us-facets__line { display: flex; align-items: baseline; gap: var(--us-sp-3); font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-facets__count b { font: var(--us-w-medium) var(--us-t-lead)/1 var(--us-serif); color: var(--us-ink); font-variant-numeric: tabular-nums; }
.us-facets__clear { appearance: none; border: 0; background: none; cursor: pointer; color: var(--us-ink-2); text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 0; }
.us-facets__group { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: var(--us-sp-3); align-items: start; }
.us-facets__label { font: var(--us-w-medium) var(--us-t-label)/2.4 var(--us-sans); letter-spacing: var(--us-tr-kicker); text-transform: uppercase; color: var(--us-ink-3); }
.us-facets__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.us-facet { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: var(--us-h-xs); padding: 0 12px; border-radius: var(--us-r-pill); background: var(--us-tint); color: var(--us-ink-2); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); transition: background var(--us-micro) var(--us-eo), color var(--us-micro) var(--us-eo), transform var(--us-micro) var(--us-eo); }
.us-facet:hover { color: var(--us-ink); }
.us-facet:active { transform: scale(var(--us-press)); }
.us-facet.is-on { background: var(--us-ink); color: var(--us-on-ink); }
.us-facet:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-facet__count { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); opacity: .7; }
.us-facet--more { background: transparent; color: var(--us-ink-3); }
@media (max-width: 520px) { .us-facets__group { grid-template-columns: 1fr; gap: 4px; } }

/* ── next: the next thing, proposed ─────────────────────────────────────── */
.us-next { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-6); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-2); }
.us-next__kicker { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: var(--us-tr-kicker); text-transform: uppercase; color: var(--us-ink-3); }
.us-next__act { margin: 0; font: var(--us-w-regular) var(--us-d-sm)/1.15 var(--us-serif); letter-spacing: var(--us-tr-display); color: var(--us-ink); }
.us-next__because { margin: 0; font-size: var(--us-t-body); color: var(--us-ink-2); }
.us-next__b { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); margin-right: 6px; }
.us-next__facts { margin: 0; display: grid; gap: var(--us-sp-2); padding: var(--us-sp-3) 0; border-top: 1px solid var(--us-line); border-bottom: 1px solid var(--us-line); }
.us-next__facts div { display: grid; grid-template-columns: 76px 1fr; gap: var(--us-sp-3); font-size: var(--us-t-small); }
.us-next__facts dt { font: var(--us-w-medium) var(--us-t-label)/1.6 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); }
.us-next__facts dd { margin: 0; color: var(--us-ink-2); }
.us-next__foot { display: flex; justify-content: flex-end; gap: var(--us-sp-2); }
.us-next__decided { margin: 0; font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); }
.us-next--done { box-shadow: 0 0 0 2px var(--us-ok), var(--us-shadow-1); }
.us-next--skipped { opacity: .6; }
.us-next__alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.us-next__alts-label { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); margin-right: 4px; }
.us-next__alt { appearance: none; border: 0; cursor: pointer; min-height: var(--us-h-xs); padding: 0 12px; border-radius: var(--us-r-pill); background: var(--us-tint); color: var(--us-ink-2); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); }
.us-next__alt:hover { color: var(--us-ink); }
.us-next__alt:focus-visible { outline: none; box-shadow: var(--us-ring); }

/* ── suggest: a ghost you can take ──────────────────────────────────────── */
.us-suggest { position: relative; display: grid; gap: 6px; }
.us-suggest__field, .us-suggest__ghost { font: var(--us-w-regular) var(--us-t-body)/1.4 var(--us-sans); padding: 12px 16px; border-radius: var(--us-r-md); min-height: var(--us-h-md); }
.us-suggest__field { width: 100%; border: 0; background: var(--us-tint); color: var(--us-ink); outline: none; position: relative; z-index: 1; }
.us-suggest__field:focus-visible { box-shadow: var(--us-ring); }
.us-suggest__ghost { position: absolute; inset: 0 0 auto 0; pointer-events: none; white-space: pre; overflow: hidden; color: transparent; z-index: 2; }
.us-suggest__tail { color: var(--us-ink-3); }
.us-suggest__hint { font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-suggest__hint::before { content: "⇥ "; font-family: var(--us-mono); }

/* ═══ a place holds its pieces ═══════════════════════════════════════════════
   The canvas with numbered lanes and the mind's hand, the deck of what is open, the split,
   a person as a card, discovery as a grid (docs/the-working-set.md, law 14). */

/* ── canvas ─────────────────────────────────────────────────────────────── */
.us-canvas { position: relative; border-radius: var(--us-r-lg); background: var(--us-sunk); box-shadow: var(--us-shadow-1) inset; overflow: hidden; min-height: 240px; }
.us-canvas__view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; background-image: radial-gradient(var(--us-line) 1px, transparent 1px); background-size: 24px 24px; }
.us-canvas__view:active { cursor: grabbing; }
.us-canvas__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.us-canvas:active .us-canvas__stage { will-change: transform; } /* promoted only while the ground is held: glass and layers cost the phone */
.us-canvas__lane { position: absolute; top: 0; border-radius: var(--us-r-md); background: var(--us-tint); }
.us-canvas__lane-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); color: var(--us-ink-2); }
.us-canvas__lane-n { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); }
.us-canvas__lane-count { margin-left: auto; font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); }
.us-canvas__edges { position: absolute; overflow: visible; pointer-events: none; }
.us-canvas__edge path { fill: none; stroke: var(--us-ink-3); stroke-width: 1.5; }
.us-canvas__edge text { font: var(--us-w-regular) 12px/1 var(--us-mono); fill: var(--us-ink-2); paint-order: stroke; stroke: var(--us-sunk); stroke-width: 4px; }
.us-canvas__node { position: absolute; display: grid; gap: 2px; align-content: start; text-align: left; padding: 12px 14px; border: 0; border-radius: var(--us-r-md); background: var(--us-surface); box-shadow: var(--us-shadow-1); color: var(--us-ink); cursor: pointer; font: var(--us-w-medium) var(--us-t-small)/1.3 var(--us-sans); transition: box-shadow var(--us-micro) var(--us-eo), transform var(--us-micro) var(--us-eo); }
.us-canvas__node:hover { box-shadow: var(--us-shadow-2); }
.us-canvas__node:active { transform: scale(var(--us-press)); }
.us-canvas__node:focus-visible { outline: none; box-shadow: var(--us-ring), var(--us-shadow-2); }
.us-canvas__node.is-selected { box-shadow: 0 0 0 2px var(--us-ink), var(--us-shadow-2); }
.us-canvas__node.is-mind { background: var(--us-surface-2); }
.us-canvas__node.is-held { box-shadow: 0 0 0 2px var(--us-accent), var(--us-shadow-2); }
.us-canvas__glyph { color: var(--us-ink-2); display: inline-flex; }
.us-canvas__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-canvas__spec { font-size: var(--us-t-label); font-weight: var(--us-w-regular); color: var(--us-ink-2); }
.us-canvas__by { position: absolute; top: 8px; right: 10px; font: var(--us-w-regular) 12px/1 var(--us-mono); color: var(--us-ink-3); }
.us-canvas__hand { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--us-r-pill); background: var(--us-accent); color: var(--us-on-accent); font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); box-shadow: var(--us-shadow-2); transform: translate(-4px, -100%); pointer-events: none; transition: left var(--us-meso) var(--us-eo), top var(--us-meso) var(--us-eo); white-space: nowrap; }
.us-canvas__hand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--us-on-accent); animation: us-live var(--us-pulse) var(--us-eo) infinite; }
/* a hand on a thing: the canvas's mark, for any row, field or card */
.us-hand { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 6px; border-radius: var(--us-r-pill); background: var(--us-ink); color: var(--us-on-ink); font: var(--us-w-medium) var(--us-t-label)/1.2 var(--us-sans); box-shadow: var(--us-shadow-1); white-space: nowrap; vertical-align: middle; }
.us-hand--mind { background: var(--us-accent); color: var(--us-on-accent); }
.us-hand--mine { background: var(--us-surface-2); color: var(--us-ink-2); box-shadow: none; }
.us-hand__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.us-hand.is-live .us-hand__dot { opacity: 1; animation: us-live var(--us-pulse) var(--us-eo) infinite; }

/* ── witness: what is taken, and where it goes (law 10; LANE 343) ───────────── */
.us-witness { display: grid; gap: var(--us-sp-2); padding: var(--us-sp-3) var(--us-sp-4); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-witness__head { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: var(--us-w-medium) var(--us-t-small)/1.2 var(--us-sans); color: var(--us-ink); }
.us-witness__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--us-ink-3); flex: none; }
.us-witness.is-taking .us-witness__rec { background: var(--us-bad); animation: us-live var(--us-tick) var(--us-eo) infinite; }
.us-witness__sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.us-witness__source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-witness__name { color: var(--us-ink); font-weight: var(--us-w-medium); }
.us-witness__source.is-recording .us-witness__state, .us-witness__source.is-live .us-witness__state { color: var(--us-bad); }
.us-witness__source.is-unknown .us-witness__state { color: var(--us-warn); }
.us-witness__measured { color: var(--us-ink); }
.us-witness__hands { display: flex; flex-wrap: wrap; gap: 6px; }
/* the name holds its place and the activity gives way: a hand whose name is cut is a hand nobody can read. A
   very long name still ends in an ellipsis, at 14 characters. */
.us-hand__who { flex: none; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.us-hand__doing { font-weight: var(--us-w-regular); opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.us-hand__doing::before { content: '·'; margin-right: 6px; opacity: .6; }
.us-hand__since { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); opacity: .7; }
.us-hand__release { margin-left: 2px; color: inherit; }
.us-canvas__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--us-r-pill); background: var(--us-glass); -webkit-backdrop-filter: blur(var(--us-glass-blur-thin)); backdrop-filter: blur(var(--us-glass-blur-thin)); box-shadow: var(--us-shadow-1); }
.us-canvas__zoom button { appearance: none; border: 0; background: none; cursor: pointer; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--us-r-pill); font: var(--us-w-medium) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-2); }
.us-canvas__zoom button:hover { background: var(--us-tint); color: var(--us-ink); }
.us-canvas__zoom button:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-canvas__k { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); min-width: 40px; text-align: center; }
.us-canvas__map { position: absolute; left: 12px; bottom: 12px; width: 120px; height: 72px; border-radius: var(--us-r-sm); background: var(--us-glass); box-shadow: var(--us-shadow-1); pointer-events: none; }
.us-canvas__map rect { fill: var(--us-ink-3); }
.us-canvas__map rect.is-mind { fill: var(--us-ink-2); }
.us-canvas__map rect.is-selected { fill: var(--us-ink); }
@media (max-width: 520px) { .us-canvas__map { display: none; } }

/* ── deck: what is open ─────────────────────────────────────────────────── */
.us-deck { min-width: 0; }
.us-deck__list { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: var(--us-r-pill); background: var(--us-tint); }
.us-deck__list::-webkit-scrollbar { display: none; }
.us-deck__tab { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: var(--us-r-pill); transition: background var(--us-micro) var(--us-eo), box-shadow var(--us-micro) var(--us-eo); }
.us-deck__tab.is-on { background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-deck__open { appearance: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: var(--us-h-xs); padding: 0 12px; border-radius: var(--us-r-pill); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); color: var(--us-ink-2); white-space: nowrap; }
.us-deck__tab.is-on .us-deck__open { color: var(--us-ink); }
.us-deck__open:focus-visible { outline: none; box-shadow: var(--us-ring); }
.us-deck__tab.is-pinned .us-deck__open { padding: 0 10px; }
.us-deck__glyph { display: inline-flex; color: var(--us-ink-2); }
.us-deck__dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--us-accent); }
.us-deck__by { font: var(--us-w-regular) 12px/1 var(--us-mono); color: var(--us-ink-3); }
.us-deck__close, .us-deck__pin { appearance: none; border: 0; background: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; margin-right: 4px; color: var(--us-ink-3); font: var(--us-w-regular) 14px/1 var(--us-mono); opacity: 0; transition: opacity var(--us-micro) var(--us-eo), background var(--us-micro) var(--us-eo); }
.us-deck__tab:hover .us-deck__close, .us-deck__tab.is-on .us-deck__close, .us-deck__tab:hover .us-deck__pin, .us-deck__pin[aria-pressed="true"] { opacity: 1; }
.us-deck__close:hover, .us-deck__pin:hover { background: var(--us-tint-2); color: var(--us-ink); }
.us-deck__new { appearance: none; border: 0; background: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; color: var(--us-ink-2); font: var(--us-w-regular) 16px/1 var(--us-mono); flex: 0 0 auto; }
.us-deck__new:hover { background: var(--us-surface); color: var(--us-ink); }
.us-deck__new:focus-visible { outline: none; box-shadow: var(--us-ring); }

/* ── split ──────────────────────────────────────────────────────────────── */
.us-split { display: grid; grid-template-columns: var(--us-split, 62%) 12px minmax(0, 1fr); min-width: 0; }
.us-split__pane { min-width: 0; min-height: 0; }
.us-split__bar { cursor: col-resize; position: relative; border-radius: var(--us-r-pill); }
.us-split__bar::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--us-line); transition: background var(--us-micro) var(--us-eo); }
.us-split__bar:hover::after, .us-split__bar:focus-visible::after { background: var(--us-ink-3); }
.us-split__bar:focus-visible { outline: none; box-shadow: var(--us-ring); }
@media (max-width: 760px) { .us-split { grid-template-columns: minmax(0, 1fr); gap: var(--us-sp-4); } .us-split__bar { display: none; } }

/* ── person: a card ─────────────────────────────────────────────────────── */
.us-person { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-5); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-person__head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--us-sp-3); align-items: center; }
.us-person__who { min-width: 0; display: grid; gap: 2px; }
.us-person__name { margin: 0; font: var(--us-w-semibold) var(--us-t-title)/1.2 var(--us-sans); letter-spacing: -.01em; color: var(--us-ink); display: flex; align-items: center; gap: 8px; }
.us-person__live { width: 8px; height: 8px; border-radius: 50%; background: var(--us-ok); animation: us-live var(--us-pulse) var(--us-eo) infinite; }
.us-person__spec { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-person__acts { display: inline-flex; gap: var(--us-sp-1); }
.us-person__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.us-person__line { display: grid; gap: 6px; }
.us-person__line-label { font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-person__line-label b { font: var(--us-w-medium) var(--us-t-small)/1 var(--us-serif); color: var(--us-ink); }
.us-person__last, .us-person__next-say { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-person__k { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); margin-right: 6px; }
.us-person__when { font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); color: var(--us-ink-3); margin-left: 6px; }
.us-change { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-5); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-change__head { display: flex; align-items: center; justify-content: space-between; gap: var(--us-sp-3); }
.us-change__head .us-kicker { margin: 0; }
.us-change__of { margin: 0; font: var(--us-w-semibold) var(--us-t-title)/1.2 var(--us-sans); letter-spacing: -.01em; color: var(--us-ink); }
.us-change__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--us-sp-2); }
.us-change__row { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr); gap: 2px var(--us-sp-3); align-items: baseline; font-size: var(--us-t-small); padding: 6px 0; border-top: 1px solid var(--us-line); }
.us-change__row:first-child { border-top: 0; padding-top: 0; }
.us-change__label { color: var(--us-ink-3); font-size: var(--us-t-label); text-transform: uppercase; letter-spacing: .06em; }
.us-change__delta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; min-width: 0; color: var(--us-ink); }
.us-change__before { color: var(--us-ink-3); text-decoration: line-through; text-decoration-color: var(--us-line); }
.us-change__before--unknown { text-decoration: none; font-style: italic; }
.us-change__arrow { color: var(--us-ink-3); }
.us-change__after { font-weight: var(--us-w-medium); }
.us-change__src, .us-change__refused { grid-column: 2; font: var(--us-w-regular) var(--us-t-label)/1.3 var(--us-mono); color: var(--us-ink-3); }
.us-change__row--refused .us-change__after { text-decoration: line-through; text-decoration-color: var(--us-line); color: var(--us-ink-3); font-weight: var(--us-w-regular); }
.us-change__refused { color: var(--us-warn); }
.us-change__because { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-change__k { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); margin-right: 6px; }
.us-change__foot { display: flex; justify-content: flex-end; gap: var(--us-sp-2); }
@media (max-width: 520px) { .us-change__row { grid-template-columns: 1fr; } .us-change__src, .us-change__refused { grid-column: 1; } }
.us-memory { display: grid; gap: var(--us-sp-3); }
.us-memory__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--us-sp-3); }
.us-memory__head .us-kicker { margin: 0; }
.us-memory__n { font: var(--us-w-regular) var(--us-t-title)/1 var(--us-serif); color: var(--us-ink); }
.us-memory__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--us-sp-2); }
.us-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--us-sp-1) var(--us-sp-3); padding: var(--us-sp-4); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-fact__meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-fact__by { color: var(--us-ink-2); font-weight: var(--us-w-medium); }
.us-fact__when { font-family: var(--us-mono); }
.us-fact__text { grid-column: 1; margin: 0; font-size: var(--us-t-body); line-height: 1.5; color: var(--us-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.us-fact--critical .us-fact__text { font-weight: var(--us-w-medium); }
.us-fact__tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.us-fact__tag { font-size: var(--us-t-label); color: var(--us-ink-3); background: var(--us-surface-2); border-radius: var(--us-r-pill); padding: 2px 8px; }
.us-fact__forget { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
@media (max-width: 520px) { .us-fact { grid-template-columns: 1fr; } .us-fact__forget { grid-column: 1; grid-row: auto; justify-self: end; } }
/* the kernel: the agent's own identity card */
.us-kernel { display: grid; gap: var(--us-sp-3); padding: var(--us-sp-5); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-kernel__head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--us-sp-3); align-items: start; }
.us-kernel__head:not(:has(.us-kernel__g)) { grid-template-columns: minmax(0,1fr) auto; }
.us-kernel__g { display: inline-flex; color: var(--us-ink-2); }
.us-kernel__who { min-width: 0; display: grid; gap: 2px; }
.us-kernel__name { margin: 0; font: var(--us-w-semibold) var(--us-t-title)/1.2 var(--us-sans); letter-spacing: -.01em; color: var(--us-ink); }
.us-kernel__role { margin: 0; font-size: var(--us-t-small); color: var(--us-ink-2); }
.us-kernel__state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--us-t-label); color: var(--us-ink-3); white-space: nowrap; }
.us-kernel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--us-ink-3); }
.us-kernel--live .us-kernel__dot { background: var(--us-ok); animation: us-live var(--us-pulse) var(--us-eo) infinite; }
.us-kernel--held .us-kernel__dot { background: var(--us-warn); }
.us-kernel__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--us-sp-2) var(--us-sp-4); }
.us-kernel__fact { display: grid; gap: 2px; min-width: 0; }
.us-kernel__k { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--us-ink-3); }
.us-kernel__v { margin: 0; font-size: var(--us-t-small); color: var(--us-ink); overflow-wrap: anywhere; }
.us-kernel__may { display: grid; gap: var(--us-sp-2); }
.us-kernel__grants { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.us-kernel__grant { display: flex; flex-wrap: wrap; align-items: center; gap: var(--us-sp-2); font-size: var(--us-t-small); color: var(--us-ink); }
.us-kernel__grant-label { flex: 1; min-width: 0; }
.us-kernel__grant-cost, .us-kernel__withheld { font-size: var(--us-t-label); color: var(--us-ink-3); }
.us-kernel__grant--withheld .us-kernel__grant-label { color: var(--us-ink-3); text-decoration: line-through; text-decoration-color: var(--us-line); }
.us-person__next { display: flex; align-items: center; justify-content: space-between; gap: var(--us-sp-3); padding: var(--us-sp-3) var(--us-sp-4); border-radius: var(--us-r-md); background: var(--us-tint); }
@media (max-width: 520px) { .us-person__head { grid-template-columns: auto minmax(0,1fr); } .us-person__acts { grid-column: 1 / -1; } }

/* ── explore: discovery as a grid ───────────────────────────────────────── */
.us-explore { display: grid; gap: var(--us-sp-4); grid-template-columns: repeat(var(--us-explore-cols, 3), minmax(0, 1fr)); }
.us-explore--2 { --us-explore-cols: 2; } .us-explore--3 { --us-explore-cols: 3; } .us-explore--4 { --us-explore-cols: 4; }
.us-explore__card { appearance: none; border: 0; padding: 0; background: var(--us-surface); border-radius: var(--us-r-lg); box-shadow: var(--us-shadow-1); overflow: hidden; display: grid; text-align: left; width: 100%; cursor: pointer; color: var(--us-ink); transition: box-shadow var(--us-micro) var(--us-eo), transform var(--us-micro) var(--us-eo); }
.us-explore__card:hover { box-shadow: var(--us-shadow-2); }
.us-explore__card:active { transform: scale(.985); }
.us-explore__card:focus-visible { outline: none; box-shadow: var(--us-ring), var(--us-shadow-2); }
.us-explore__pic { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--us-sunk); overflow: hidden; }
.us-explore__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-explore__tone { position: absolute; inset: 0; display: grid; place-items: center; font: var(--us-w-regular) var(--us-t-lead)/1 var(--us-serif); color: var(--us-ink-3); }
.us-explore__card--person .us-explore__pic { aspect-ratio: 1 / 1; }
.us-explore__kind { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--us-r-pill); background: var(--us-glass-dark); color: var(--us-on-glass-dark); font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: .06em; text-transform: uppercase; }
.us-explore__live { width: 6px; height: 6px; border-radius: 50%; background: var(--us-ok); animation: us-live var(--us-pulse) var(--us-eo) infinite; }
.us-explore__time { position: absolute; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: var(--us-r-xs); background: var(--us-glass-dark); color: var(--us-on-glass-dark); font: var(--us-w-regular) var(--us-t-label)/1 var(--us-mono); }
.us-explore__body { display: grid; gap: 3px; padding: 12px 14px 14px; }
.us-explore__title { font: var(--us-w-medium) var(--us-t-body)/1.3 var(--us-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-explore__spec { font-size: var(--us-t-label); color: var(--us-ink-2); }
.us-explore__reason { font-size: var(--us-t-label); color: var(--us-ink-2); }
.us-explore__reason::before { content: "because "; color: var(--us-ink-3); }
.us-explore__reason--none::before { content: ""; }
.us-explore__reason--none { color: var(--us-ink-3); font-style: italic; }
@media (max-width: 760px) { .us-explore { --us-explore-cols: 2; } }
@media (max-width: 420px) { .us-explore { --us-explore-cols: 1; } }

/* ── pilot: the rail ────────────────────────────────────────────────────── */
.us-pilot { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--us-sp-3); min-height: 0; max-height: 100%; padding: var(--us-sp-4); border-radius: var(--us-r-lg); background: var(--us-surface); box-shadow: var(--us-shadow-1); }
.us-pilot__head { display: grid; gap: var(--us-sp-3); }
.us-pilot__who { display: inline-flex; align-items: center; gap: 8px; font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans); color: var(--us-ink); }
.us-pilot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--us-ink-3); }
.us-pilot--together .us-pilot__dot, .us-pilot--mind .us-pilot__dot { background: var(--us-accent); animation: us-live var(--us-pulse) var(--us-eo) infinite; }
.us-pilot__body { display: grid; gap: var(--us-sp-4); align-content: start; overflow: auto; min-height: 0; padding-inline: 4px; margin-inline: -4px; }
.us-pilot__section { display: grid; gap: var(--us-sp-2); }
.us-pilot__k { font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans); letter-spacing: var(--us-tr-kicker); text-transform: uppercase; color: var(--us-ink-3); }
.us-pilot__next { display: grid; gap: var(--us-sp-3); }
.us-pilot__next .us-next { padding: var(--us-sp-4); }
/* the pilot is a card: what sits in it is not another card (the rule a card already keeps for a budget) — no
   shadow to be sliced by the pilot's scrolling body, a tint for its ground */
.us-pilot .us-next, .us-pilot .us-budget { box-shadow: none; background: var(--us-tint); }
/* the same for a kernel set in a card (NOW's leaderboard: its shadow was sliced by the card that holds it) */
.us-card .us-kernel { box-shadow: none; background: var(--us-tint); }
.us-pilot__next .us-next__act { font-size: var(--us-t-lead); }
.us-pilot__foot { position: sticky; bottom: 0; }

/* ═══ the US Shell ══════════════════════════════════════════════════════════════════════════
   An Index of places, one Window per subject with its Rail beside it, Where to? over everything — on a night ground
   (.us-set-night, tokens "sets") of liquid metal under frost. Black and white; the one hue is a warning, beside its
   word. Metal is the one action of the moment. Squircles are apps, circles are people. In a shell the window is
   --us-ground, the raised things --us-surface, a pressed-in fill --us-tint, the palette's scrim --us-veil. The type is
   the system sans; nothing under 12 px. Learned from a designer's portfolio site (its numbers and behaviour only) and seven posts. */
:where(.us-shell, .us-shell-piece) :where(p, h1, h2, h3, dl, dd, figure, ul) { margin: 0; padding: 0; }
:where(.us-shell, .us-shell-piece) :where(:focus-visible) { outline: 2px solid var(--us-focus); outline-offset: 2px; }
/* each pressable piece resets its own button, with no weight (:where), so it holds outside a shell and its own class
   still wins; the reset says no cursor, so each piece states its own and the touch test sees every small one */
:where(.us-shell-index__row, .us-shell-index__head, .us-shell-index__person, .us-shell-tool, .us-shell-switcher, .us-shell-home__field, .us-feature, .us-ledger__cell, .us-where__x, .us-where__do, .us-shell-link) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
/* hidden is hidden: a piece's own display never shows what the hidden attribute hides (a folded group) */
.us-shell [hidden]:not([hidden="until-found" i]), .us-shell-piece [hidden]:not([hidden="until-found" i]), .us-where [hidden]:not([hidden="until-found" i]),
.us-shell-index__body[hidden] { display: none !important; }
.us-shell-tool .us-icon, .us-shell-index__head .us-icon, .us-shell-switcher .us-icon, .us-shell-home__field .us-icon { width: 16px; height: 16px; flex: none; }
/* the register is a scope: inside a shell every piece speaks the system sans, not only the shell's own */
.us-shell, .us-shell-piece { --us-sans: var(--us-sans-system); }
.us-shell, .us-shell-piece { font: var(--us-w-regular) var(--us-t-body)/1.5 var(--us-sans-system); color: var(--us-ink); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.us-shell-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the root's place, the Index's stickiness, the switcher's and the palette's fixing: a host that positions these
   itself (a utility, a layout of its own) wins, because they sit in the base layer */
@layer base {
  .us-shell { position: relative; }
  .us-shell--contained { overflow: hidden; }
  .us-shell-index { position: sticky; top: 0; }
  /* under the HERE bar a page shell starts below it: the bar is the one top layer */
  .here-bar-on .us-shell--page .us-shell-index { top: var(--here-bar-h, 0px); }
  .us-shell-switcher { position: fixed; top: calc(var(--us-sp-3) + var(--us-sat)); left: 50%; z-index: 50; }
  .here-bar-on .us-shell--page > .us-shell-switcher { top: calc(var(--here-bar-h, 0px) + var(--us-sp-3) + var(--us-sat)); }
  .us-shell--contained .us-shell-switcher { position: absolute; }
  .us-where { position: fixed; inset: 0; z-index: 80; }
  .us-where--contained { position: absolute; }
  .us-inspect { position: fixed; inset: 0; z-index: 90; }
  .us-shell__said { position: fixed; bottom: calc(var(--us-sp-4) + var(--us-sab) + var(--us-shell-foot, 0px)); left: 50%; z-index: 70; transform: translateX(-50%); }
  .us-shell--contained .us-shell__said { position: absolute; }
}
.us-shell { isolation: isolate; min-height: 100svh; background: var(--us-desk); --us-shell-h: 100svh; }
.us-shell--contained { min-height: 0; border-radius: var(--us-r-lg); }
:root:has(.us-shell--page:not(.us-shell--narrow)) { scroll-snap-type: y proximity; scroll-padding-top: calc(var(--here-bar-h, 0px) + var(--us-gutter)); }
/* the seam: under the HERE bar (html.here-bar-on) a page shell is the bar's height shorter, its switcher sits just below
   the bar, and ⌘K belongs to the bar while / stays the shell's (shell.tsx) */
.here-bar-on .us-shell--page { --us-shell-h: calc(100svh - var(--here-bar-h, 0px)); }
/* on a phone the switcher is the only way between places, so under the bar it stays, just below the bar (review 585.1a).
   The bar sits in the page's flow above the shell, so the shell's own padding for the switcher is unchanged (585.1b) */
/* a narrow page shell lands each section below the bar and the switcher, never under them */
:root:has(.us-shell--page.us-shell--narrow) { scroll-padding-top: calc(var(--here-bar-h, 0px) + var(--us-h-md) + var(--us-sp-6) + var(--us-sat)); }
.us-wall { display: block; opacity: 0; transition: opacity var(--us-ambient) var(--us-eo); }
.us-wall[data-ready] { opacity: 1; }
.us-shell__wall, .us-shell__veil { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; }
.us-shell--contained .us-shell__wall, .us-shell--contained .us-shell__veil { position: absolute; }
.us-shell__veil { background: var(--us-frost); -webkit-backdrop-filter: blur(var(--us-frost-blur)) saturate(var(--us-glass-sat)); backdrop-filter: blur(var(--us-frost-blur)) saturate(var(--us-glass-sat)); }
.us-shell__frame { position: relative; z-index: 1; display: grid; grid-template-columns: var(--us-index-w) minmax(0, 1fr); }
.us-shell--contained .us-shell__frame { height: 100%; overflow-y: auto; scroll-snap-type: y proximity; scroll-padding-top: var(--us-gutter); }
.us-shell__main { min-width: 0; display: flex; flex-direction: column; gap: var(--us-sp-4); padding: var(--us-gutter) var(--us-gutter) calc(var(--us-gutter) + var(--us-shell-foot, 0px)) 0; }
/* --us-shell-foot: room a host keeps at the foot of the screen for a control of its own (the universe home's NOW · Wonder
   switch, LANE 603). Each window ends above it, the last scrolls clear of it, and the status line rises over it. 0 unless
   a host sets it. */
.us-shell__section { display: flex; gap: var(--us-split); height: calc(var(--us-shell-h) - 2 * var(--us-gutter) - var(--us-shell-foot, 0px)); min-height: 520px; scroll-snap-align: start; }
.us-shell__tools { display: flex; justify-content: center; gap: var(--us-sp-1); }
/* what Where to? could not do (it has closed by then), said at the foot of the shell: never silent */
.us-shell__said { width: max-content; max-width: min(420px, calc(100% - 2 * var(--us-sp-4))); margin: 0; padding: 8px var(--us-sp-3); border-radius: var(--us-r-sm);
  background: var(--us-surface); box-shadow: var(--us-shadow-float); color: var(--us-ink-2); font-size: var(--us-t-small); pointer-events: none; }
.us-shell__said:empty { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none; }
/* squircles are apps: letters or an icon in ink on the window's colour; metal for Home and a featured app */
/* a squircle is a MASK (a superellipse), never a radius: a rounded rectangle has a flat spot where the arc meets the
   edge, the continuous corner has none (the launcher's law, glass/chat/here-launcher.css) */
.us-squircle { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; -webkit-mask: var(--us-sqmask) center / 100% 100% no-repeat; mask: var(--us-sqmask) center / 100% 100% no-repeat; background: var(--us-ink); color: var(--us-ground);
  font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans-system); }
.us-squircle .us-icon { width: 12px; height: 12px; }
.us-squircle--md { width: 28px; height: 28px; }
.us-squircle--md .us-icon { width: 14px; height: 14px; }
.us-squircle--metal, .us-metal { color: var(--us-on-metal); background: linear-gradient(180deg, var(--us-metal-hi), var(--us-metal-mid) 38%, var(--us-metal-lo) 62%, var(--us-metal-rim)); box-shadow: var(--us-shadow-metal); }
.us-squircle--action { background: var(--us-tint); color: var(--us-ink); }
/* circles are people: a tone of four when there is no photo, initials in ink */
.us-shell-face { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--us-face-1); color: var(--us-ink);
  font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans-system); }
/* a person where a list mixes places and people: a circle the size of the app's squircle, initials in ink */
.us-circle { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--us-face-1); color: var(--us-ink);
  font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans-system); letter-spacing: -.02em; }
.us-circle--md { width: 28px; height: 28px; }
/* the Index */
.us-shell-index { align-self: start; height: var(--us-shell-h); display: flex; flex-direction: column; gap: var(--us-sp-1); padding: var(--us-gutter); overflow-y: auto; scrollbar-width: none; }
.us-shell-index__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--us-row-h); padding: 0 10px; border-radius: var(--us-r-sm); color: var(--us-ink); cursor: pointer;
  transition: transform var(--us-press) var(--us-eo), background-color var(--us-micro) var(--us-eo); }
.us-shell-index__row:active { transform: scale(.97); }
.us-shell-index__row[aria-current="true"] { background: var(--us-surface); box-shadow: var(--us-shadow-raise); }
.us-shell-index__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-shell-index__count { color: var(--us-ink-3); font-size: var(--us-t-label); font-variant-numeric: tabular-nums; }
.us-shell-index__group { display: flex; flex-direction: column; gap: var(--us-sp-1); margin-top: var(--us-sp-3); }
.us-shell-index__head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 10px 0 6px; border-radius: var(--us-r-sm); color: var(--us-ink-3); font-size: var(--us-t-label); cursor: pointer; }
.us-shell-index__head .us-icon { transition: transform var(--us-meso) var(--us-eo); }
.us-shell-index__head[aria-expanded="false"] .us-icon { transform: rotate(-90deg); }
.us-shell-index__body { display: flex; flex-direction: column; gap: var(--us-sp-1); }
.us-shell-index__foot { margin-top: auto; display: flex; align-items: center; gap: var(--us-sp-1); padding-top: var(--us-sp-3); }
.us-shell-index__person { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--us-sp-3); padding: var(--us-sp-2); border-radius: 14px; cursor: pointer; }
.us-shell-index__who, .us-shell-index__pname, .us-shell-index__role { display: block; min-width: 0; }
.us-shell-index__pname { color: var(--us-ink); font-weight: var(--us-w-medium); font-size: var(--us-t-small); }
.us-shell-index__role { color: var(--us-ink-3); font-size: var(--us-t-label); }
.us-shell-tool { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--us-r-sm); color: var(--us-ink-3); cursor: pointer;
  transition: transform var(--us-press) var(--us-eo), background-color var(--us-micro) var(--us-eo), color var(--us-micro) var(--us-eo); }
.us-shell-tool:active { transform: scale(.97); }
.us-shell-tool[aria-pressed="true"] { color: var(--us-ink); background: var(--us-tint); }
@media (hover: hover) and (pointer: fine) {
  .us-shell-index__row:hover:not([aria-current="true"]), .us-shell-index__person:hover, .us-shell-index__head:hover, .us-shell-tool:hover { background: var(--us-tint); }
  .us-shell-tool:hover { color: var(--us-ink); }
}
/* a window: the subject itself */
/* a scene taller than its window scrolls inside it, and is centred only while it fits (safe; plain centre first for a
   browser that does not know safe) */
.us-shell-window { position: relative; flex: 1; min-width: 0; overflow: hidden auto; display: flex; align-items: center; align-items: safe center; justify-content: center; justify-content: safe center;
  background: var(--us-ground); border-radius: var(--us-r-md); box-shadow: var(--us-shadow-window); }
.us-shell-window:focus { outline: none; }
.us-shell-window__scene { width: 100%; max-width: var(--us-focus-width); display: flex; flex-direction: column; align-items: center; gap: var(--us-sp-6); padding: var(--us-sp-7); text-align: center; }
.us-shell-window__scene--wide { max-width: none; align-items: stretch; text-align: left; }
.us-shell-window__scene:has(> .us-shell-home) { max-width: none; padding: 0; }
/* Home: the clock line, the greeting, the field, the featured cards, the links */
.us-clock { position: absolute; top: var(--us-sp-6); left: var(--us-sp-6); right: var(--us-sp-6); margin: 0; text-align: center; color: var(--us-ink-say); font-size: var(--us-t-small); font-variant-numeric: tabular-nums; }
.us-shell-home { width: 100%; max-width: var(--us-focus-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--us-sp-7); padding: 0 var(--us-sp-7); }
.us-greeting { display: flex; flex-direction: column; align-items: center; gap: var(--us-sp-4); text-align: center; }
.us-greeting__line { display: inline-flex; align-items: center; gap: var(--us-sp-3); margin: 0; color: var(--us-ink); text-wrap: balance;
  font: var(--us-w-semibold) var(--us-t-display)/1.15 var(--us-sans-system); letter-spacing: var(--us-tr-display); }
.us-greeting__face { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--us-face-1); color: var(--us-ink);
  font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans-system); letter-spacing: 0; }
.us-greeting__typed { white-space: pre; }
.us-greeting__caret { display: inline-block; width: 2px; height: .9em; margin-left: 1px; background: var(--us-ink); vertical-align: -.08em; animation: us-shell-blink var(--us-blink) steps(1) infinite; }
@keyframes us-shell-blink { 50% { opacity: 0; } }
.us-greeting__intro { max-width: 46ch; margin: 0; color: var(--us-ink-2); font-size: var(--us-t-lead); line-height: 1.55; text-wrap: pretty; }
.us-shell-link { color: var(--us-ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--us-line-2); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color var(--us-micro) var(--us-eo); }
.us-shell-link:hover { text-decoration-color: var(--us-ink-3); }
.us-shell-home__field { width: 100%; display: flex; align-items: center; gap: 10px; min-height: var(--us-h-md); padding: 0 var(--us-sp-3) 0 14px; border-radius: var(--us-r-sm);
  background: var(--us-surface); box-shadow: var(--us-shadow-raise); color: var(--us-ink-3); cursor: text; text-align: left; transition: transform var(--us-press) var(--us-eo); }
.us-shell-home__field:active { transform: scale(.99); }
.us-shell-home__field > span { flex: 1; }
.us-where__key, .us-where__ret { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 4px; background: var(--us-tint); color: var(--us-ink-3);
  font: var(--us-w-medium) var(--us-t-label)/1.3 var(--us-sans-system); }
.us-shell-home__featured { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.us-shell-home__label { margin: 0; padding-left: 2px; color: var(--us-ink-3); font-size: var(--us-t-small); }
.us-shell-home__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.us-shell-home__foot { position: absolute; bottom: var(--us-sp-6); left: var(--us-sp-6); right: var(--us-sp-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--us-sp-2) var(--us-sp-6);
  color: var(--us-ink-3); font-size: var(--us-t-small); }
.us-shell-home__foot a { color: inherit; text-decoration: none; }
.us-shell-home__foot a:hover { color: var(--us-ink); }
/* a featured card: the whole card is the target */
.us-feature { display: flex; flex-direction: column; align-items: flex-start; gap: var(--us-sp-1); min-width: 0; padding: var(--us-sp-3); border-radius: var(--us-r-sm); background: var(--us-surface);
  box-shadow: var(--us-shadow-raise); color: var(--us-ink); text-align: left; text-decoration: none; cursor: pointer; transition: transform var(--us-press) var(--us-eo), box-shadow var(--us-micro) var(--us-eo); }
.us-feature:active { transform: scale(.97); }
.us-feature .us-squircle { margin-bottom: var(--us-sp-2); }
.us-feature__name { color: var(--us-ink); font-weight: var(--us-w-medium); font-size: var(--us-t-body); }
.us-feature__say { color: var(--us-ink-say); font-size: var(--us-t-label); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.us-feature__meta { margin-top: auto; padding-top: var(--us-sp-3); color: var(--us-ink-3); font-size: var(--us-t-label); }
@media (hover: hover) and (pointer: fine) { .us-feature:hover { box-shadow: var(--us-shadow-float); } }
/* the rail says; the window shows */
.us-shell-rail { width: var(--us-rail-w); flex: none; min-height: 0; display: flex; flex-direction: column; gap: var(--us-sp-4); padding: 0 var(--us-gutter) var(--us-sp-4) 0; }
.us-shell-rail__subject { align-self: flex-start; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: var(--us-sp-2) var(--us-sp-4) var(--us-sp-2) var(--us-sp-3); border-radius: var(--us-r-md); background: var(--us-tint); }
.us-shell-rail__subject .us-send { margin-left: auto; }
.us-shell-rail__name { display: block; color: var(--us-ink); font-weight: var(--us-w-medium); font-size: var(--us-t-small); }
.us-shell-rail__sub { display: block; color: var(--us-ink-3); font-size: var(--us-t-label); }
.us-shell-rail__prose { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; color: var(--us-ink-2); line-height: 1.65;
  padding-bottom: var(--us-sp-4); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--us-sp-6)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--us-sp-6)), transparent); scrollbar-width: thin; }
.us-shell-rail__prose b { color: var(--us-ink); font-weight: var(--us-w-medium); }
/* facts: label and value, one per hairline */
.us-facts { display: flex; flex-direction: column; margin: 0; }
.us-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--us-sp-4); padding: var(--us-sp-3) 0; border-bottom: 1px solid var(--us-line); font-size: var(--us-t-small); }
.us-facts > div:last-child { border-bottom: 0; }
.us-facts dt { color: var(--us-ink-3); }
.us-facts dd { margin: 0; color: var(--us-ink); text-align: right; font-variant-numeric: tabular-nums; }
.us-facts--stats dd { font-size: var(--us-t-lead); font-weight: var(--us-w-medium); }
/* a head in the shell's register: a tag, then one sentence in two inks */
.us-shell-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--us-sp-1) var(--us-sp-2); margin: 0; color: var(--us-ink-2); font-weight: var(--us-w-regular); font-size: var(--us-t-body); text-wrap: balance; }
.us-shell-head--title { font-size: var(--us-t-title); font-weight: var(--us-w-semibold); letter-spacing: var(--us-tr-display); line-height: 1.2; }
.us-shell-head b { color: var(--us-ink); font-weight: var(--us-w-medium); }
.us-shell-head__tag { flex: none; display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 6px; background: var(--us-tint); color: var(--us-ink-2);
  font: var(--us-w-medium) var(--us-t-label)/1.3 var(--us-sans-system); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* buttons: one metal per screen */
.us-metal { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--us-sp-2); height: var(--us-h-sm); padding: 0 var(--us-sp-5);
  border: 0; border-radius: var(--us-r-pill); cursor: pointer; font: var(--us-w-medium) var(--us-t-body)/1 var(--us-sans-system); white-space: nowrap; transition: transform var(--us-press) var(--us-eo); }
.us-metal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--us-metal-hi) 80%, transparent) 46%, transparent 62%);
  transform: translateX(-28%); transition: transform var(--us-meso) var(--us-eo); }
a.us-metal, a.us-quiet-btn { text-decoration: none; }
.us-metal:active { transform: scale(.94); }
.us-metal[aria-disabled="true"] { cursor: progress; }
.us-metal[aria-disabled="true"]:active { transform: none; }
.us-metal:focus-visible, .us-quiet-btn:focus-visible { outline: 2px solid var(--us-focus); outline-offset: 2px; }
.us-quiet-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--us-sp-2); height: var(--us-h-sm); padding: 0 var(--us-sp-4); border: 0; border-radius: var(--us-r-pill);
  background: transparent; color: var(--us-ink); box-shadow: inset 0 0 0 1px var(--us-line-2); cursor: pointer; font: var(--us-w-medium) var(--us-t-body)/1 var(--us-sans-system); white-space: nowrap;
  transition: transform var(--us-press) var(--us-eo), background-color var(--us-micro) var(--us-eo); }
.us-quiet-btn:active { transform: scale(.97); }
.us-metal .us-icon, .us-quiet-btn .us-icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .us-metal:hover::before { transform: translateX(28%); }
  .us-quiet-btn:hover { background: var(--us-tint); }
}
/* the fan: people overlapped, opening on approach */
.us-fan { display: inline-flex; align-items: center; padding-left: var(--us-sp-2); }
.us-fan__face { position: relative; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: calc(-1 * var(--us-sp-2)); border-radius: 50%;
  background: var(--us-face-1); color: var(--us-ink); box-shadow: var(--us-shadow-cut); font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans-system); transition: transform var(--us-meso) var(--us-eo); }
.us-fan__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.us-fan__face[data-tone="2"] { background: var(--us-face-2); }
.us-fan__face[data-tone="3"] { background: var(--us-face-3); }
.us-fan__face[data-tone="4"] { background: var(--us-face-4); }
.us-fan__face::after { content: attr(data-name); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 2px); padding: 2px 6px; border-radius: 4px; background: var(--us-ink);
  color: var(--us-ground); white-space: nowrap; opacity: 0; pointer-events: none; font-size: var(--us-t-label); transition: opacity var(--us-micro) var(--us-eo), transform var(--us-micro) var(--us-eo); }
.us-fan__face:hover::after, .us-fan__face:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.us-fan:focus-within > .us-fan__face { transform: translateX(calc(var(--i, 0) * 6px)); }
@media (hover: hover) and (pointer: fine) { .us-fan:hover > .us-fan__face { transform: translateX(calc(var(--i, 0) * 6px)); } }
.us-fan__more { margin-left: 10px; color: var(--us-ink-3); font-size: var(--us-t-label); }
/* evidence: a claim and what proves it */
.us-evidence { display: flex; flex-direction: column; padding: var(--us-sp-3) 14px var(--us-sp-1); border-radius: var(--us-r-md); background: var(--us-tint); text-align: left; font-size: var(--us-t-small); }
.us-evidence__top { display: flex; align-items: center; justify-content: space-between; gap: var(--us-sp-3); padding-bottom: var(--us-sp-2); }
.us-evidence__title { color: var(--us-ink); font-weight: var(--us-w-medium); }
.us-evidence__state { display: inline-flex; align-items: center; gap: 6px; color: var(--us-ink); font-size: var(--us-t-label); }
.us-evidence__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.us-evidence__state[data-state="open"] { color: var(--us-warn); }
.us-evidence__state[data-state="failed"] { color: var(--us-bad); }
.us-evidence dl { margin: 0; }
.us-evidence dl > div { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: var(--us-sp-3); padding: var(--us-sp-2) 0; border-top: 1px solid var(--us-line); }
.us-evidence dt { color: var(--us-ink-3); font-size: var(--us-t-label); }
.us-evidence dd { margin: 0; color: var(--us-ink); }
/* the ledger: dense work, edited in place */
.us-ledger { width: 100%; overflow-x: auto; text-align: left; font-size: var(--us-t-small); }
.us-ledger table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.us-ledger th { position: sticky; top: 0; padding: var(--us-sp-2) 10px; border-bottom: 1px solid var(--us-line); background: var(--us-ground); color: var(--us-ink-3); font-weight: var(--us-w-regular);
  font-size: var(--us-t-label); text-align: left; white-space: nowrap; }
.us-ledger td { padding: 2px 0; border-bottom: 1px solid var(--us-line); color: var(--us-ink); white-space: nowrap; }
.us-ledger [data-num] { text-align: right; }
.us-ledger__cell { position: relative; display: block; width: 100%; min-height: 32px; padding: 6px 10px; border-radius: var(--us-r-xs); text-align: inherit; }
.us-ledger__cell[type="button"] { min-height: 32px; color: var(--us-ink); cursor: pointer; transition: background-color var(--us-micro) var(--us-eo); }
.us-ledger__cell[data-dirty]::after { content: ""; position: absolute; top: 6px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--us-warn); }
.us-ledger__cell input { width: 100%; min-width: 6ch; padding: 0; border: 0; outline: 0; background: transparent; color: var(--us-ink); font: inherit; text-align: inherit; }
.us-ledger__cell--edit { box-shadow: inset 0 0 0 2px var(--us-focus); }
@media (hover: hover) and (pointer: fine) { .us-ledger__cell[type="button"]:hover { background: var(--us-tint); } }
.us-ledger__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--us-sp-3); padding: var(--us-sp-3) 10px 0; color: var(--us-ink-say); font-size: var(--us-t-label); }
.us-ledger-empty { display: flex; flex-direction: column; align-items: center; gap: var(--us-sp-3); padding: 48px var(--us-sp-4); color: var(--us-ink-3); text-align: center; font-size: var(--us-t-small); }
.us-ledger-empty > p { margin: 0; }
.us-ledger-empty__title { color: var(--us-ink); font-size: var(--us-t-body); }
/* Where to? */
.us-where { display: flex; flex-direction: column; align-items: center; padding: max(12vh, 48px) var(--us-sp-4) var(--us-sp-4); background: var(--us-veil);
  -webkit-backdrop-filter: blur(var(--us-glass-blur-thin)); backdrop-filter: blur(var(--us-glass-blur-thin)); font: var(--us-w-regular) var(--us-t-body)/1.5 var(--us-sans-system); color: var(--us-ink); }
.us-where :focus-visible { outline: 2px solid var(--us-focus); outline-offset: 2px; }
.us-where__field, .us-where__list { width: min(100%, 460px); border-radius: var(--us-r-md); background: var(--us-surface); box-shadow: var(--us-shadow-float); }
.us-where__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--us-sp-2); min-height: var(--us-h-md); padding: 6px var(--us-sp-3) 6px 14px; color: var(--us-ink-3); }
.us-where__field .us-icon { width: 16px; height: 16px; }
.us-where__field input { flex: 1; min-width: 10ch; height: 32px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--us-ink); font: inherit; }
.us-where__field input::placeholder { color: var(--us-ink-3); }
.us-where__field input:focus-visible { outline: none; }
.us-where__scope { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 2px 0 var(--us-sp-2); border-radius: 6px; background: var(--us-tint); color: var(--us-ink); font-size: var(--us-t-label); }
.us-where__x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--us-ink-3); cursor: pointer; }
.us-where__x .us-icon { width: 12px; height: 12px; }
.us-where__x:hover { color: var(--us-ink); background: var(--us-tint); }
.us-where__list { margin-top: var(--us-sp-2); padding: 6px; max-height: min(400px, 58vh); overflow-y: auto; overscroll-behavior: contain; }
.us-where__label { display: flex; align-items: center; justify-content: space-between; padding: var(--us-sp-2) var(--us-sp-2) var(--us-sp-1); color: var(--us-ink-3); font-size: var(--us-t-label); }
.us-where__do { min-height: 22px; padding: 0 var(--us-sp-1); border: 0; border-radius: 4px; background: none; color: var(--us-ink-3); cursor: pointer; font: inherit; line-height: 22px; }
.us-where__do:hover { color: var(--us-ink); }
.us-where__row { position: relative; }
.us-where__opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--us-sp-2); border-radius: 10px; color: var(--us-ink-2); cursor: pointer; }
.us-where__row:has(.us-where__drop) .us-where__opt { padding-right: 34px; }
.us-where__opt[aria-selected="true"] { background: var(--us-tint); color: var(--us-ink); }
.us-where__opt mark { background: none; color: var(--us-ink); font-weight: var(--us-w-semibold); }
.us-where__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-where__end { flex: none; display: inline-flex; align-items: center; gap: var(--us-sp-2); color: var(--us-ink-3); font-size: var(--us-t-label); }
.us-where__ret { visibility: hidden; }
.us-where__opt[aria-selected="true"] .us-where__ret { visibility: visible; }
.us-where__row > .us-where__drop { position: absolute; right: 7px; top: 50%; translate: 0 -50%; }
.us-where__none { margin: 0; padding: var(--us-sp-6) var(--us-sp-3); color: var(--us-ink-say); text-align: center; font-size: var(--us-t-small); }
.us-where__none b { color: var(--us-ink); font-weight: var(--us-w-medium); }
.us-where__foot { display: flex; flex-wrap: wrap; gap: var(--us-sp-1) var(--us-sp-4); margin-top: 6px; padding: 10px var(--us-sp-2) 6px; border-top: 1px solid var(--us-line); color: var(--us-ink-3); font-size: var(--us-t-label); }
@keyframes us-where-arrive { from { opacity: 0; transform: translateY(4px) scale(.985); } }
@keyframes us-where-fade { from { opacity: 0; } }
.us-where[data-open="pointer"] { animation: us-where-fade var(--us-dur) var(--us-eo); }
.us-where[data-open="pointer"] .us-where__field { animation: us-where-arrive var(--us-dur) var(--us-eo); }
.us-where[data-open="pointer"] .us-where__list { animation: us-where-arrive var(--us-dur) var(--us-eo) var(--us-step) backwards; }
/* the switcher: the Index, folded into one pill on a phone */
.us-shell-switcher { translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: var(--us-h-md); padding: 0 14px 0 10px; border-radius: var(--us-r-pill);
  background: var(--us-surface); box-shadow: var(--us-shadow-float); color: var(--us-ink); cursor: pointer; transition: transform var(--us-press) var(--us-eo); }
.us-shell-switcher:active { transform: scale(.97); }
/* Inspect: every part shows its numbers */
.us-inspect { pointer-events: none; }
.us-inspect__box { position: absolute; outline: 1px dashed var(--us-ink-3); outline-offset: -1px; }
.us-inspect__tag { position: absolute; left: -1px; top: 0; transform: translateY(-100%); padding: 1px var(--us-sp-1); border-radius: 4px 4px 4px 0; background: var(--us-ink); color: var(--us-ground);
  white-space: nowrap; font: var(--us-w-medium) var(--us-t-label)/1.3 var(--us-mono); }
.us-inspect__box[data-low] .us-inspect__tag { top: auto; bottom: 0; transform: translateY(100%); border-radius: 0 4px 4px 4px; }
/* carry: the travelling node lays out as if it were not there */
.us-carry { width: 100%; }
/* the shell narrow (below 1024 px, measured on the shell itself): the Index folds into the switcher, each rail goes
   under its window, Home loses its window, the cards scroll sideways */
.us-shell--narrow .us-shell__frame { grid-template-columns: minmax(0, 1fr); }
.us-shell--narrow .us-shell__main { gap: 48px; padding: calc(var(--us-h-md) + var(--us-sp-6) + var(--us-sat)) var(--us-gutter) calc(var(--us-sp-6) + var(--us-shell-foot, 0px)); }
.us-shell--narrow.us-shell--contained .us-shell__frame { scroll-snap-type: none; scroll-padding-top: calc(var(--us-h-md) + var(--us-sp-6)); }
.us-shell--narrow .us-shell__section { flex-direction: column; height: auto; min-height: 0; gap: var(--us-sp-4); }
.us-shell--narrow .us-shell__section > .us-shell-window { flex: none; min-height: 64svh; }
.us-shell--narrow.us-shell--contained .us-shell__section > .us-shell-window { min-height: 420px; }
.us-shell--narrow .us-shell__section--home > .us-shell-window { min-height: auto; flex-direction: column; justify-content: space-between; gap: var(--us-sp-6); padding: 0 0 var(--us-sp-2); background: transparent; box-shadow: none; }
.us-shell--narrow .us-clock, .us-shell--narrow .us-shell-home__foot { position: static; }
.us-shell--narrow .us-shell-window__scene:has(> .us-shell-home) { gap: var(--us-sp-6); }
.us-shell--narrow .us-shell-rail { width: auto; padding: 0 var(--us-sp-2); }
.us-shell--narrow .us-shell-rail__prose { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 0; }
.us-shell--narrow .us-shell-home { padding: 0 var(--us-sp-2); }
.us-shell--narrow .us-shell-home__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--us-sp-2)); padding: var(--us-sp-1) var(--us-sp-2) var(--us-sp-2); }
.us-shell--narrow .us-shell-home__cards > .us-feature { flex: 0 0 46%; scroll-snap-align: start; }
.us-shell--narrow .us-greeting__line { font-size: var(--us-t-title); }
/* still motion: transforms stop; colour and opacity still change (the loops are stilled in the one law) */
@media (prefers-reduced-motion: reduce) {
  .us-shell-index__row:active, .us-shell-tool:active, .us-feature:active, .us-metal:active, .us-quiet-btn:active, .us-shell-switcher:active, .us-shell-home__field:active { transform: none; }
  .us-fan > .us-fan__face, .us-fan:hover > .us-fan__face, .us-fan:focus-within > .us-fan__face { transform: none; }
}

/* ═══ the Shell's pieces, part two (LANE 585.3): notices, forms, the player and its dock, the app grid, a person ═══ */
/* a notice: who, what, when, and the one next act */
.us-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--us-sp-3); padding: var(--us-sp-3); border-radius: var(--us-r-sm);
  background: var(--us-surface); box-shadow: var(--us-shadow-raise); color: var(--us-ink); text-align: left; }
.us-notice.is-read { background: transparent; box-shadow: inset 0 0 0 1px var(--us-line); }
.us-notice__face { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--us-face-1); color: var(--us-ink);
  font: var(--us-w-medium) var(--us-t-label)/1 var(--us-sans-system); }
.us-notice__words { min-width: 0; display: grid; gap: 2px; }
.us-notice__what { margin: 0; color: var(--us-ink); font-weight: var(--us-w-medium); font-size: var(--us-t-small); line-height: 1.4; }
.us-notice__detail { margin: 0; color: var(--us-ink-2); font-size: var(--us-t-small); line-height: 1.45; }
.us-notice__meta { display: flex; flex-wrap: wrap; gap: 2px var(--us-sp-2); margin: 2px 0 0; color: var(--us-ink-say); font-size: var(--us-t-label); }
.us-notice__mark { display: inline-flex; align-items: center; gap: 6px; color: var(--us-ink); }
.us-notice__mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.us-notice__mark[data-meaning="warn"] { color: var(--us-warn); }
.us-notice__mark[data-meaning="bad"] { color: var(--us-bad); }
.us-notice__acts { display: flex; align-items: center; gap: var(--us-sp-1); }
.us-notice__acts .us-metal, .us-notice__acts .us-quiet-btn { height: var(--us-h-xs); padding: 0 var(--us-sp-3); font-size: var(--us-t-small); }
.us-notice__x { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--us-ink-3); cursor: pointer; }
.us-notice__x .us-icon { width: 12px; height: 12px; }
.us-notice__x:hover { color: var(--us-ink); background: var(--us-tint); }
.us-notices { display: grid; gap: var(--us-sp-2); }
.us-notices__head { display: flex; align-items: center; gap: var(--us-sp-2); margin: 0; color: var(--us-ink-3); font-size: var(--us-t-label); }
.us-notices__count { min-width: 20px; padding: 1px 6px; border-radius: var(--us-r-pill); background: var(--us-ink); color: var(--us-ground); text-align: center; font-variant-numeric: tabular-nums; }
.us-notices__list { display: grid; gap: var(--us-sp-2); }
.us-notices__empty { margin: 0; padding: var(--us-sp-6) var(--us-sp-3); color: var(--us-ink-say); text-align: center; font-size: var(--us-t-small); }
/* forms in the shell register: one of a few, a number by steps, one section one form */
.us-choice { margin: 0; padding: 0; border: 0; display: grid; gap: var(--us-sp-2); min-width: 0; }
.us-choice__row { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--us-r-pill); background: var(--us-tint); justify-self: start; }
.us-choice__opt { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--us-sp-4); border-radius: var(--us-r-pill); color: var(--us-ink-2);
  cursor: pointer; font-size: var(--us-t-small); transition: background-color var(--us-micro) var(--us-eo), color var(--us-micro) var(--us-eo); }
.us-choice__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.us-choice__opt:has(input:checked) { background: var(--us-surface); color: var(--us-ink); box-shadow: var(--us-shadow-raise); }
.us-choice__opt:has(input:focus-visible) { outline: 2px solid var(--us-focus); outline-offset: 2px; }
.us-stepper__row { display: flex; align-items: center; gap: var(--us-sp-2); }
.us-stepper__n { width: 7ch; text-align: center; font-variant-numeric: tabular-nums; }
.us-stepper__unit { color: var(--us-ink-2); font-size: var(--us-t-small); }
.us-stepper__do { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--us-tint); color: var(--us-ink); cursor: pointer;
  transition: transform var(--us-press) var(--us-eo), background-color var(--us-micro) var(--us-eo); }
.us-stepper__do:active { transform: scale(.94); }
.us-stepper__do:disabled { color: var(--us-ink-3); cursor: default; }
.us-form-section { display: grid; gap: var(--us-sp-4); padding: var(--us-sp-5); border-radius: var(--us-r-md); background: var(--us-surface); box-shadow: var(--us-shadow-raise); text-align: left; }
.us-form-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--us-sp-3); }
.us-form-section__title { margin: 0; color: var(--us-ink); font-weight: var(--us-w-semibold); font-size: var(--us-t-body); }
.us-form-section__state { display: inline-flex; align-items: center; gap: 6px; color: var(--us-ink-say); font-size: var(--us-t-label); }
.us-form-section__state--dirty { color: var(--us-warn); }
.us-form-section__state--dirty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.us-form-section__title:focus { outline: none; }
.us-form-section__title:focus-visible { outline: 2px solid var(--us-focus); outline-offset: 2px; border-radius: 2px; }
.us-form-section__say { margin: -8px 0 0; color: var(--us-ink-2); font-size: var(--us-t-small); }
.us-form-section__body { display: grid; gap: var(--us-sp-4); }
.us-form-section__foot { display: flex; justify-content: flex-end; }
/* the player and its dock (the original's .ush-player and .ush-dock, ported) */
.us-player { margin: 0; display: grid; gap: var(--us-sp-3); width: 100%; min-width: 0; }
.us-player__stage { position: relative; overflow: hidden; border-radius: var(--us-r-sm); background: var(--us-desk); aspect-ratio: 16 / 9; }
.us-player__stage video, .us-player__stage audio { display: block; width: 100%; height: 100%; object-fit: contain; }
.us-player--audio .us-player__stage { aspect-ratio: auto; min-height: 120px; display: grid; place-items: center; }
.us-player--audio .us-player__stage audio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.us-player__sound { color: var(--us-ink-3); }
.us-player__sound .us-icon { width: 32px; height: 32px; }
.us-dock { position: relative; display: flex; align-items: center; gap: var(--us-sp-2); min-height: var(--us-h-sm); padding: 4px var(--us-sp-3) 4px 4px; border-radius: var(--us-r-pill);
  background: var(--us-frost, var(--us-surface)); -webkit-backdrop-filter: blur(var(--us-glass-blur-thick)); backdrop-filter: blur(var(--us-glass-blur-thick)); box-shadow: var(--us-shadow-raise); color: var(--us-ink); }
.us-dock__do { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--us-tint); color: var(--us-ink); cursor: pointer;
  transition: transform var(--us-press) var(--us-eo); }
.us-dock__do:active { transform: scale(.94); }
.us-dock__do .us-icon { width: 14px; height: 14px; }
.us-dock__words { min-width: 0; flex: 0 1 auto; display: grid; max-width: 40%; }
.us-dock__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--us-t-small); font-weight: var(--us-w-medium); }
.us-dock__by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--us-ink-say); font-size: var(--us-t-label); }
.us-dock__scrub { flex: 1; min-width: 60px; accent-color: var(--us-ink); }
.us-dock__time { flex: none; color: var(--us-ink-say); font-size: var(--us-t-label); font-variant-numeric: tabular-nums; }
/* why it is not playing, said where the time was; empty, it stays a live region but takes no room */
.us-dock__say { flex: none; color: var(--us-ink-2); font-size: var(--us-t-label); }
.us-dock__say:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* the picture and its dock travel together (Carry): on the page they keep the player's rhythm */
.us-player { position: relative; }
.us-player__home, .us-player__carried { display: grid; gap: var(--us-sp-3); min-width: 0; }
/* what floated away is said where it was, with the way back */
.us-player__away { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--us-sp-3); color: var(--us-ink-2); font-size: var(--us-t-small); }
.us-player__away:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* picture in picture: a floating window dressed as the page, holding only the picture and its dock */
body.us-pip { margin: 0; min-height: 100vh; box-sizing: border-box; display: grid; align-content: center; padding: var(--us-sp-2); background: var(--us-ground); color: var(--us-ink);
  font-family: var(--us-sans-system); }
body.us-pip .us-player__carried { gap: var(--us-sp-2); }
body.us-pip .us-player__stage { aspect-ratio: auto; height: calc(100vh - var(--us-h-sm) - 3 * var(--us-sp-2) - 8px); }
body.us-pip .us-player__carried--audio .us-player__stage { display: none; }

/* Send to: one quiet button and the screens a thing can go to */
.us-send { position: relative; display: inline-flex; flex: none; }
.us-send__do { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--us-tint); color: var(--us-ink); cursor: pointer;
  transition: transform var(--us-press) var(--us-eo); }
.us-send__do:active { transform: scale(.94); }
.us-send__do .us-icon { width: 14px; height: 14px; }
.us-send__do:focus-visible, .us-send__opt:focus-visible { outline: 2px solid var(--us-focus); outline-offset: 2px; }
.us-send__list { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: max-content; min-width: 220px; max-width: min(320px, 90vw); margin: 0; padding: 4px; list-style: none;
  display: grid; gap: 2px; border-radius: var(--us-r-md); background: var(--us-surface); box-shadow: var(--us-shadow-float); }
.us-send--up .us-send__list { top: auto; bottom: calc(100% + 6px); }
.us-send__opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 var(--us-sp-2); border: 0; border-radius: 10px; background: transparent; color: var(--us-ink);
  text-align: left; cursor: pointer; font: var(--us-t-small)/1.2 var(--us-sans-system); }
.us-send__opt .us-icon { flex: none; width: 16px; height: 16px; color: var(--us-ink-2); }
.us-send__name { flex: 1; min-width: 0; }
.us-send__detail { color: var(--us-ink-say); font-size: var(--us-t-label); white-space: nowrap; }
/* a refusal, said beside the button and left until the next press */
.us-send__said { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; padding: 6px var(--us-sp-3); border-radius: var(--us-r-sm); background: var(--us-surface);
  box-shadow: var(--us-shadow-float); color: var(--us-ink-2); font-size: var(--us-t-label); white-space: nowrap; pointer-events: none; }
.us-send--up .us-send__said { top: auto; bottom: calc(100% + 6px); }
/* an answer that lands while the list is open again is said beside the button: never over the list, never off the foot */
.us-send__list + .us-send__said { top: 50%; bottom: auto; right: calc(100% + 6px); transform: translateY(-50%); }
/* in a narrow shell the rail's chip sits at the left edge, and its button moves right as the name grows: the list and
   what it says hang from the chip itself, the list and a refusal below it, a late answer above it, never off an edge */
.us-shell--narrow .us-shell-rail__subject { position: relative; }
.us-shell--narrow .us-shell-rail__subject > .us-send { position: static; }
.us-shell--narrow .us-shell-rail__subject .us-send__list, .us-shell--narrow .us-shell-rail__subject .us-send__said { left: 0; right: auto; }
.us-shell--narrow .us-shell-rail__subject .us-send__list + .us-send__said { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; transform: none; }
.us-send__said:empty { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .us-send__opt:hover { background: var(--us-tint); } }
.us-player__transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }
.us-player__cue { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: var(--us-sp-2); width: 100%; min-height: 32px; padding: 6px var(--us-sp-2); border: 0; border-radius: var(--us-r-xs);
  background: none; color: var(--us-ink-2); cursor: pointer; text-align: left; font: inherit; font-size: var(--us-t-small); }
.us-player__cue[aria-current="true"] { background: var(--us-tint); color: var(--us-ink); }
.us-player__at { color: var(--us-ink-say); font-variant-numeric: tabular-nums; }
/* the app grid: squircles that say how they open */
.us-appgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--us-sp-2); }
.us-appgrid__tile { display: grid; justify-items: center; gap: 4px; width: 100%; padding: var(--us-sp-3) var(--us-sp-2); border: 0; border-radius: var(--us-r-sm); background: none; color: var(--us-ink);
  cursor: pointer; text-align: center; font: inherit; transition: transform var(--us-press) var(--us-eo), background-color var(--us-micro) var(--us-eo); }
a.us-appgrid__tile { text-decoration: none; }
/* shown, not pressable: nothing to launch it with */
span.us-appgrid__tile { cursor: default; }
span.us-appgrid__tile:active { transform: none; }
.us-appgrid__tile:focus-visible { outline: 2px solid var(--us-focus); outline-offset: 2px; }
.us-appgrid__tile:active { transform: scale(.97); }
.us-appgrid__tile .us-squircle { margin-bottom: 4px; }
.us-appgrid__name { font-size: var(--us-t-small); font-weight: var(--us-w-medium); }
.us-appgrid__how { color: var(--us-ink-say); font-size: var(--us-t-label); line-height: 1.3; }
.us-appgrid__tile[data-kind="machine"] .us-appgrid__how { color: var(--us-ink-2); }
@media (hover: hover) and (pointer: fine) { a.us-appgrid__tile:hover, button.us-appgrid__tile:hover { background: var(--us-tint); } }
/* a person: their circle, standings as marks, what they released, what they held back and why */
.us-person-page { display: grid; gap: var(--us-sp-5); width: 100%; text-align: left; }
.us-person-page__head { display: flex; align-items: center; gap: var(--us-sp-4); flex-wrap: wrap; }
.us-person-page__face { position: relative; flex: none; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: visible; background: var(--us-face-2); color: var(--us-ink);
  font: var(--us-w-medium) var(--us-t-title)/1 var(--us-sans-system); }
.us-person-page__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* standings are marks, never size: a PRIME keeps a keel, a guardian a watch, a PRIME guardian a seal, a guest a dashed edge */
/* the same marks a scircle draws (law 8): the keel a thin ring, the watch a dot going round on its faint dotted track, a
   PRIME guardian's watch a seal; never a static dot at the corner, where every reader expects "online" (law 7) */
.us-person-page__face .us-scircle__watch::after { box-shadow: 0 0 0 2px var(--us-ground); }
.us-person-page__face.is-guest { outline: 1.5px dashed var(--us-ink-3); outline-offset: 3px; }
.us-person-page__words { min-width: 0; flex: 1; display: grid; gap: 4px; }
.us-person-page__name { margin: 0; color: var(--us-ink); font: var(--us-w-semibold) var(--us-t-title)/1.2 var(--us-sans-system); letter-spacing: var(--us-tr-display); }
.us-person-page__standing { margin: 0; color: var(--us-ink-2); font-size: var(--us-t-small); }
.us-person-page__say { margin: 0; color: var(--us-ink-2); font-size: var(--us-t-small); max-width: 52ch; }
.us-person-page__acts { display: flex; gap: var(--us-sp-2); }
.us-person-page__withheld { color: var(--us-ink-say); }
.us-person-page__places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--us-sp-2); }
.us-person-page__place { display: inline-flex; align-items: center; gap: var(--us-sp-2); min-height: 36px; padding: 0 var(--us-sp-3) 0 var(--us-sp-2); border: 0; border-radius: var(--us-r-pill);
  background: var(--us-tint); color: var(--us-ink); font: inherit; font-size: var(--us-t-small); }
.us-person-page__place[type="button"] { min-height: 36px; cursor: pointer; }
/* still motion: transforms stop (the one law stills the loops; these pieces have none) */
@media (prefers-reduced-motion: reduce) {
  .us-stepper__do:active, .us-dock__do:active, .us-appgrid__tile:active { transform: none; }
}

/* ═══ the lenses (LANE 585.4): five questions, answered read, refused or out of reach ═══ */
/* one column no wider than its container (LANE 592): with no template the grid sized its column to the widest child's
   natural width, so a lens with a long tab row was 823 px on a 390 px phone and cut off; the tab row scrolls instead */
.us-lens { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--us-sp-3); min-width: 0; text-align: left; }
.us-lens__asks { margin: var(--us-sp-3) 0 0; color: var(--us-ink-2); font-size: var(--us-t-small); }
.us-lens__rows > div[data-state="refused"] dd, .us-lens__rows > div[data-state="unreached"] dd { text-align: left; }
.us-lens__unread { color: var(--us-ink-say); font-size: var(--us-t-small); }
.us-allowance__refused { margin: 0; color: var(--us-bad); font-size: var(--us-t-small); }
.us-lens__rows > div[data-state="unreached"] .us-lens__unread { color: var(--us-ink-2); }
.us-lens__note { display: block; margin-top: 2px; color: var(--us-ink-say); font-size: var(--us-t-label); text-align: right; }
.us-lens__act { display: flex; flex-wrap: wrap; gap: var(--us-sp-2); }
.us-credit { display: grid; gap: var(--us-sp-2); padding: var(--us-sp-3) 14px; border-radius: var(--us-r-sm); background: var(--us-tint); text-align: left; font-size: var(--us-t-small); }
.us-credit__act { margin: 0; color: var(--us-ink); font-weight: var(--us-w-medium); }
.us-credit__chain { margin: 0; display: grid; gap: 2px; }
.us-credit__chain > div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--us-sp-3); }
.us-credit__chain dt { color: var(--us-ink-say); font-size: var(--us-t-label); }
.us-credit__chain dd { margin: 0; color: var(--us-ink); font-variant-numeric: tabular-nums; }
.us-credit__chain dd[data-state="refused"], .us-credit__chain dd[data-state="unreached"] { color: var(--us-ink-say); }

/* ═══ a finger's reach ═══════════════════════════════════════════════════════════════════════
   What is drawn small is drawn small on purpose; on a touch screen its reach is not. Each small
   pressable carries an invisible halo reaching 44 × 44 around its centre, never smaller than
   itself. The drawing does not change. The touch test holds the list to the sheet. A metal act
   cannot wear a halo (its ::before is the sheen, and it clips): where one is drawn small, a touch
   screen draws it at 44. */
@media (pointer: coarse) {
  .us-notice__acts .us-metal, .us-notice__acts .us-quiet-btn { height: 44px; }
  .us-tab, .us-toast__x, .us-composer__send, .us-ranked__tog, .us-facet, .us-next__alt, .us-canvas__zoom button, .us-deck__open, .us-deck__close, .us-deck__pin, .us-deck__new, .us-btn--xs, .us-shell-tool, .us-where__x, .us-where__opt, .us-ledger__cell[type="button"], .us-where__do, .us-shell-index__head, .us-shell-index__row, .us-notice__x, .us-stepper__do, .us-dock__do, .us-player__cue, .us-choice__opt, .us-person-page__place[type="button"], .us-send__do, .us-send__opt { position: relative; }
  .us-tab::before, .us-switch::before, .us-toast__x::before, .us-composer__send::before, .us-ranked__tog::before, .us-facet::before, .us-next__alt::before, .us-canvas__zoom button::before, .us-deck__open::before, .us-deck__close::before, .us-deck__pin::before, .us-deck__new::before, .us-btn--xs::before, .us-shell-tool::before, .us-where__x::before, .us-where__opt::before, .us-ledger__cell[type="button"]::before, .us-where__do::before, .us-shell-index__head::before, .us-shell-index__row::before, .us-notice__x::before, .us-stepper__do::before, .us-dock__do::before, .us-player__cue::before, .us-choice__opt::before, .us-person-page__place[type="button"]::before, .us-send__do::before, .us-send__opt::before { content: ""; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); }
}

/* ═══ the copy chip ════════════════════════════════════════════════════════════════════════ */
.us-copy { display: inline-flex; align-items: center; gap: var(--us-sp-2); max-width: 100%; min-width: 0; padding: 2px 2px 2px var(--us-sp-3);
  border-radius: var(--us-r-pill); box-shadow: inset 0 0 0 1px var(--us-tint-2); }
.us-copy__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--us-ink); font-size: var(--us-t-small); }
.us-copy__do { appearance: none; border: 0; flex: none; min-height: 28px; padding: 0 var(--us-sp-3); border-radius: var(--us-r-pill); cursor: pointer;
  background: var(--us-surface); color: var(--us-ink); box-shadow: var(--us-shadow-ring), var(--us-shadow-1); font: var(--us-w-medium) var(--us-t-small)/1 var(--us-sans);
  transition: background var(--us-micro) var(--us-eo), transform var(--us-press) var(--us-eo); }
.us-copy__do:hover { background: var(--us-surface-2); }
.us-copy__do:active { transform: scale(.96); }
.us-copy__do:focus-visible { outline: none; box-shadow: var(--us-ring); }
/* ═══ the link card (M10) ══════════════════════════════════════════════════════════════════ */
.us-link-card { --us-lc-r: var(--us-r-md); --us-lc-pad: var(--us-sp-3); display: flex; align-items: center; gap: var(--us-sp-4); min-width: 0;
  padding: var(--us-lc-pad); border-radius: var(--us-lc-r); background: var(--us-surface); color: var(--us-ink); text-decoration: none;
  box-shadow: var(--us-shadow-ring), var(--us-shadow-1); transition: background var(--us-micro) var(--us-eo), transform var(--us-press) var(--us-eo); }
.us-link-card:hover { background: var(--us-surface-2); }
.us-link-card:active { transform: scale(.99); }
.us-link-card:focus-visible { outline: none; box-shadow: var(--us-ring); }
/* radii nest (M3): the tile's corner is the card's less the padding between them */
.us-link-card__thumb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
  border-radius: max(4px, calc(var(--us-lc-r) - var(--us-lc-pad))); background: var(--us-sunk); color: var(--us-ink-2); }
.us-link-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-link-card__words { flex: 1; min-width: 0; display: grid; gap: 2px; }
.us-link-card__title { font: var(--us-w-medium) var(--us-t-body)/1.35 var(--us-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-link-card__say { color: var(--us-ink-2); font-size: var(--us-t-small); line-height: 1.4; }
.us-link-card__go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--us-r-pill);
  box-shadow: inset 0 0 0 1px var(--us-tint-2); color: var(--us-ink-2); transition: color var(--us-micro) var(--us-eo); }
.us-link-card:hover .us-link-card__go { color: var(--us-ink); }

/* ═══ the said card (M11) ══════════════════════════════════════════════════════════════════ */
.us-said { margin: 0; display: grid; gap: var(--us-sp-4); justify-items: start; min-width: 0; }
.us-said__words { position: relative; margin: 0; padding: var(--us-sp-6) var(--us-sp-6) var(--us-sp-5); border-radius: var(--us-r-xl);
  background: var(--us-surface); box-shadow: var(--us-shadow-ring), var(--us-shadow-2); color: var(--us-ink-2);
  font: var(--us-w-regular) var(--us-t-title)/1.3 var(--us-sans); letter-spacing: -.02em; text-wrap: pretty; max-width: 36ch; }
.us-said__words em { font-style: normal; color: var(--us-ink); }
/* the tail: a diamond under the first corner, pointing at who said it; its top half hides the bubble's ring */
.us-said__words::after { content: ""; position: absolute; left: var(--us-sp-7); bottom: -7px; width: 14px; height: 14px; background: inherit;
  transform: rotate(45deg); border-bottom-right-radius: 3px; box-shadow: inset -1px -1px 0 var(--us-tint-2); }
.us-said__who { display: flex; align-items: center; gap: var(--us-sp-3); padding-left: var(--us-sp-6); }
.us-said__name { display: grid; font: var(--us-w-medium) var(--us-t-small)/1.35 var(--us-sans); color: var(--us-ink); }
.us-said__role { font-weight: var(--us-w-regular); color: var(--us-ink-2); }
@media (max-width: 520px) { .us-said__words { font-size: var(--us-t-lead); padding: var(--us-sp-5); } }
/* a source line among others: the same bubble, at the size of the text around it */
.us-said--sm { gap: var(--us-sp-2); }
.us-said--sm .us-said__words { padding: var(--us-sp-3) var(--us-sp-4); border-radius: var(--us-r-md); font-size: var(--us-t-small); line-height: 1.45; letter-spacing: 0;
  box-shadow: var(--us-shadow-ring), var(--us-shadow-1); max-width: none; }
.us-said--sm .us-said__words::after { left: var(--us-sp-4); width: 10px; height: 10px; bottom: -5px; }
.us-said--sm .us-said__who { padding-left: var(--us-sp-4); }

/* ═══ the scircle ═══════════════════════════════════════════════════════════════════════════
   the halo is membership: one living gooey shape under everyone inside, drawn by an SVG filter over plain discs. A face
   that comes in lands on the ring with a little spring and the ring makes room in a wave; one that leaves drifts out
   calmly. At rest each face breathes on its own seeded path and the core breathes under them, so the body's edge moves
   like something alive. The standings are marks, never size: a PRIME's keel, a guardian's watch, a guest's own bubble.
   Still motion stops every loop: the five are listed with every other loop, stilled twice, at the end. */
.us-scircle { margin: 0; display: inline-grid; justify-items: center; gap: var(--us-sp-3); }
.us-scircle__field { position: relative; flex: none; }
.us-scircle__defs { position: absolute; }
.us-scircle__halo { position: absolute; inset: 0; opacity: .13; }
.us-scircle__blob, .us-scircle__spot { position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transition: transform var(--us-macro) var(--us-eo), width var(--us-macro) var(--us-eo), height var(--us-macro) var(--us-eo), margin var(--us-macro) var(--us-eo), opacity var(--us-meso) var(--us-eo); }
/* arriving has a little life in the landing; leaving is calm */
.us-scircle__blob[data-inside="true"], .us-scircle__spot[data-inside="true"], .us-scircle__visit[data-inside="true"] { transition-timing-function: var(--us-spring); }
.us-scircle__blob { background: var(--us-scircle-tone, var(--us-ink)); }
/* the core fills the ring's middle, so everyone inside is one body however many they are */
.us-scircle__core { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: var(--us-scircle-tone, var(--us-ink));
  transition: width var(--us-macro) var(--us-eo), height var(--us-macro) var(--us-eo), margin var(--us-macro) var(--us-eo);
  animation: us-scircle-breathe calc(var(--us-pulse) * 4) ease-in-out infinite alternate; }
.us-scircle__spot { display: grid; place-items: center; }
/* a branch: a bud of the body at its rim, joined by a neck. It grows out as its people glide there, and goes as
   they glide back (the merge) — within the scircle, never between two */
.us-scircle__core--bud { transition: transform var(--us-macro) var(--us-spring), width var(--us-macro) var(--us-eo), height var(--us-macro) var(--us-eo), margin var(--us-macro) var(--us-eo); }
@starting-style { .us-scircle__core--bud { width: 0; height: 0; margin: 0; } }
.us-scircle__branch { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font: var(--us-w-medium) var(--us-t-label)/1.2 var(--us-sans); color: var(--us-ink-2); transition: transform var(--us-macro) var(--us-eo); }
/* each face and its halo drift together on the same seeded path; the goo turns that into a moving edge. Without a
   seeded path (--dt unset: the key) the declaration is void and nothing drifts */
.us-scircle__blob, .us-scircle__spot, .us-scircle__visit { animation: us-scircle-drift var(--dt) ease-in-out var(--dd) infinite alternate; }
@keyframes us-scircle-drift { from { translate: 0 0; } to { translate: var(--dx, 0) var(--dy, 0); } }
@keyframes us-scircle-breathe { from { scale: .97; } to { scale: 1.03; } }
/* not here: the face stays in its place outside the ring, quieter */
.us-scircle__spot[data-inside="false"] { opacity: .55; }
/* a guest: at the rim in a bubble of their own, a dashed edge that never joins the body */
.us-scircle__visit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed var(--us-ink-3);
  background: color-mix(in srgb, var(--us-surface) 70%, transparent); box-sizing: border-box;
  transition: transform var(--us-macro) var(--us-eo), opacity var(--us-meso) var(--us-eo); }
.us-scircle__visit[data-inside="false"] { opacity: .55; }
/* a PRIME keeps their own edge inside the body: a keel, joined and never dissolved */
.us-scircle__keel { position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--us-ink-2); opacity: .7; pointer-events: none; }
/* a guardian keeps the circle: a watch goes slowly round their face */
.us-scircle__watch { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; rotate: 40deg;
  animation: us-scircle-watch calc(var(--us-pulse) * 9) linear var(--dd, 0s) infinite; }
.us-scircle__watch::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--us-ink); box-shadow: 0 0 0 2px var(--us-surface); }
/* the watch's track, faint and dotted, so the mark reads as something going round, not a stray dot */
.us-scircle__watch::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dotted color-mix(in srgb, var(--us-ink) 35%, transparent); }
/* a PRIME guardian's watch is a seal: a diamond where a guardian has a dot */
.us-scircle__watch--seal::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 1.5px; rotate: 45deg; }
@keyframes us-scircle-watch { from { rotate: 40deg; } to { rotate: 400deg; } }
/* hovering a face names it and its standing, under it */
.us-scircle__tag { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px var(--us-sp-2);
  border-radius: var(--us-r-pill); background: var(--us-ink); color: var(--us-on-ink); font: var(--us-w-medium) var(--us-t-label)/1.5 var(--us-sans);
  opacity: 0; pointer-events: none; transition: opacity var(--us-micro) var(--us-eo); }
.us-scircle__spot:hover { z-index: 3; }
.us-scircle__spot:hover > .us-scircle__tag { opacity: 1; }
.us-scircle__name { font: var(--us-w-medium) var(--us-t-small)/1.3 var(--us-sans); color: var(--us-ink-2); }
/* the key: the five standings as the circle draws them */
.us-scircle-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--us-sp-3) var(--us-sp-5); font-size: var(--us-t-label); color: var(--us-ink-2); }
.us-scircle-key__row { display: inline-flex; align-items: center; gap: var(--us-sp-3); }
.us-scircle-key__mark { position: relative; width: 20px; height: 20px; flex: none; }
.us-scircle-key__halo { position: absolute; inset: -6px; border-radius: 50%; background: var(--us-ink); opacity: .13; }
.us-scircle-key__mark .us-scircle__visit { inset: -4px; }
.us-scircle-key__face { position: absolute; inset: 0; border-radius: 50%; background: var(--us-sunk); box-shadow: 0 0 0 1.5px var(--us-surface); }
.us-scircle-key__mark .us-scircle__keel { inset: -4px; }
.us-scircle-key__mark .us-scircle__watch { inset: -6px; }
.us-scircle-key__mark .us-scircle__watch::after { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.us-scircle-key__mark .us-scircle__watch--seal::after { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }

/* the seat in a pill row: a tight shadow that fits the pill's padding, so a scrolling row never slices it */
.us-deck__list .us-deck__tab.is-on, .us-tabs__list[data-glide] > .us-tabs__glide, .us-stations--row .us-station.is-on {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--us-ink) 12%, transparent), 0 0 0 .5px color-mix(in srgb, var(--us-ink) 8%, transparent); }

/* a pressed toggle in a pill row takes the same seat */
.us-tabs__list > .us-tab[aria-pressed="true"] {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--us-ink) 12%, transparent), 0 0 0 .5px color-mix(in srgb, var(--us-ink) 8%, transparent); }

/* ═══ the quiet register ════════════════════════════════════════════════════════════════════
   NOW's register, from the New Material harvest (docs/inspiration/newmaterial.md): a straight grotesk (the system's
   own — no font is fetched), a head that is one sentence in two inks at one light weight, buttons edged by a hairline
   rather than filled, emphasis carried by ink rather than italics. US keeps the friendly register: the rounded sans,
   the black pills. A surface opts in with `data-us-register="quiet"` on its root, or on any container it wants
   quiet (`:is(:root, *)` keeps the root's specificity, so nothing that won before loses now). */
:is(:root, *)[data-us-register="quiet"] { --us-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
/* M6: one sentence, two inks — the name in ink, what it is in the second ink, one size, one light weight. Only a
   plain head with a say (Head marks it `--two`): a voice head keeps its serif and its italic point */
:is(:root, *)[data-us-register="quiet"] .us-head__words--two { display: block; }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-kicker { display: block; margin-bottom: var(--us-sp-2); }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-head__name { display: inline; }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two .us-head__title,
:is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-say { display: inline; font: 350 var(--us-d-sm)/1.25 var(--us-sans); letter-spacing: -.025em; }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-say { color: var(--us-ink-2); max-width: none; }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-say::before { content: " "; }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two .us-head__stop { display: inline; }
:is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-head__name > :not(.us-head__title) { margin-left: var(--us-sp-2); vertical-align: middle; }
@media (max-width: 760px) {
  :is(:root, *)[data-us-register="quiet"] .us-head__words--two .us-head__title,
  :is(:root, *)[data-us-register="quiet"] .us-head__words--two > .us-say { font-size: var(--us-t-title); }
}
:is(:root, *)[data-us-register="quiet"] .us-say em, :is(:root, *)[data-us-register="quiet"] .us-head__words--two em { font-style: normal; color: var(--us-ink); }
:is(:root, *)[data-us-register="quiet"] .us-said__words { font-weight: 350; letter-spacing: -.025em; }
/* M8: the hairline button — 10px corners, a medium weight; the second rank is edged, not filled */
:is(:root, *)[data-us-register="quiet"] .us-btn { border-radius: 10px; font-weight: var(--us-w-medium); }
:is(:root, *)[data-us-register="quiet"] .us-btn--icon { border-radius: var(--us-r-pill); }
:is(:root, *)[data-us-register="quiet"] .us-btn:not(.us-btn--primary):not(.us-btn--accent):not(.us-btn--bad):not(.us-btn--ghost) { background: transparent; box-shadow: inset 0 0 0 1px var(--us-tint-2); }
:is(:root, *)[data-us-register="quiet"] .us-btn:not(.us-btn--primary):not(.us-btn--accent):not(.us-btn--bad):hover { background: var(--us-tint-2); box-shadow: inset 0 0 0 1px var(--us-tint-2); }
:is(:root, *)[data-us-register="quiet"] .us-btn:not(.us-btn--primary):not(.us-btn--accent):not(.us-btn--bad):active { background: color-mix(in srgb, var(--us-ink) 12%, transparent); }
:is(:root, *)[data-us-register="quiet"] .us-btn:focus-visible { box-shadow: var(--us-ring); }

/* ═══ the one law of stillness ═══════════════════════════════════════════════════════════════
   Every thing that moves on its own is listed here once, and stilled twice: when the person's
   preference says so, and when the surface says data-motion="off". Durations are already 1 ms
   from the tokens; this stills the loops. The motion test holds the two lists to the sheet. */
@media (prefers-reduced-motion: reduce) {
  .us-ranked__row,
  .us-explore__cell,
  .us-log__row,
  .us-fact,
  .us-deck__tab,
  ::view-transition-new(us-scene),
  .us-frame__shutter,
  .us-frame:has(.us-frame__shutter) .us-frame__c,
  .us-spin,
  .us-pill--live i,
  .us-tabs__panel,
  .us-sheet[open],
  .us-sheet__body--step,
  .us-sheet--right[open],
  .us-toast,
  .us-toast__wait,
  .us-toast__words,
  .us-skel::after,
  .us-quiet__dots i,
  .us-scrub__tick,
  .us-story__progress,
  .us-question__words--step,
  .us-head__title,
  .us-frame__rec,
  .us-step--running .us-step__n,
  .us-thinking__dots i,
  .us-stream__caret,
  .us-palette__card,
  .us-canvas__hand-dot,
  .us-hand.is-live .us-hand__dot,
  .us-witness.is-taking .us-witness__rec,
  .us-person__live,
  .us-kernel--live .us-kernel__dot,
  .us-explore__live,
  .us-pilot--together .us-pilot__dot,
  .us-pilot--mind .us-pilot__dot,
  .us-scircle__core,
  .us-scircle__blob,
  .us-scircle__spot,
  .us-scircle__visit,
  .us-scircle__watch,
  .us-greeting__caret,
  .us-where[data-open="pointer"],
  .us-where[data-open="pointer"] .us-where__field,
  .us-where[data-open="pointer"] .us-where__list { animation: none; }
}
:root[data-motion="off"] .us-ranked__row,
:root[data-motion="off"] .us-explore__cell,
:root[data-motion="off"] .us-log__row,
:root[data-motion="off"] .us-fact,
:root[data-motion="off"] .us-deck__tab,
:root[data-motion="off"] ::view-transition-new(us-scene),
:root[data-motion="off"] .us-frame__shutter,
:root[data-motion="off"] .us-frame:has(.us-frame__shutter) .us-frame__c,
:root[data-motion="off"] .us-spin,
:root[data-motion="off"] .us-pill--live i,
:root[data-motion="off"] .us-tabs__panel,
:root[data-motion="off"] .us-sheet[open],
:root[data-motion="off"] .us-sheet__body--step,
:root[data-motion="off"] .us-sheet--right[open],
:root[data-motion="off"] .us-toast,
:root[data-motion="off"] .us-toast__wait,
:root[data-motion="off"] .us-toast__words,
:root[data-motion="off"] .us-skel::after,
:root[data-motion="off"] .us-quiet__dots i,
:root[data-motion="off"] .us-scrub__tick,
:root[data-motion="off"] .us-story__progress,
:root[data-motion="off"] .us-question__words--step,
:root[data-motion="off"] .us-head__title,
:root[data-motion="off"] .us-frame__rec,
:root[data-motion="off"] .us-step--running .us-step__n,
:root[data-motion="off"] .us-thinking__dots i,
:root[data-motion="off"] .us-stream__caret,
:root[data-motion="off"] .us-palette__card,
:root[data-motion="off"] .us-canvas__hand-dot,
:root[data-motion="off"] .us-hand.is-live .us-hand__dot,
:root[data-motion="off"] .us-witness.is-taking .us-witness__rec,
:root[data-motion="off"] .us-person__live,
:root[data-motion="off"] .us-kernel--live .us-kernel__dot,
:root[data-motion="off"] .us-explore__live,
:root[data-motion="off"] .us-pilot--together .us-pilot__dot,
:root[data-motion="off"] .us-pilot--mind .us-pilot__dot,
:root[data-motion="off"] .us-scircle__core,
:root[data-motion="off"] .us-scircle__blob,
:root[data-motion="off"] .us-scircle__spot,
:root[data-motion="off"] .us-scircle__visit,
:root[data-motion="off"] .us-scircle__watch,
:root[data-motion="off"] .us-greeting__caret,
:root[data-motion="off"] .us-where[data-open="pointer"],
:root[data-motion="off"] .us-where[data-open="pointer"] .us-where__field,
:root[data-motion="off"] .us-where[data-open="pointer"] .us-where__list { animation: none; }

/* UNIVERSE UI's home as a US Shell (LANE 585.6). The build puts US UI's sheet before this one, so the Shell and its
   pieces are dressed by the system; these rules are the home's own few. Painted only from us.tokens/v1 (us.css,
   loaded first): night first, no brand hue, no literal colour. The bar is sticky and first in <body>; the Shell
   measures the room under it. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--us-desk);color:var(--us-ink)}
body{margin:0;min-height:100svh;font:400 16px/1.5 var(--us-sans-system);-webkit-font-smoothing:antialiased}
/* the door: before the bar answers */
.uh-door{min-height:calc(100svh - 44px);display:grid;align-content:center;justify-items:start;gap:var(--us-sp-3);max-width:720px;margin:0 auto;padding:var(--us-sp-8) var(--us-gutter);
  background:var(--us-desk);color:var(--us-ink)}
.uh-door__kicker{margin:0;color:var(--us-ink-say);font:var(--us-w-semibold) var(--us-t-label)/1 var(--us-sans-system);letter-spacing:.1em;text-transform:uppercase}
.uh-door__title{margin:0;font:var(--us-w-semibold) var(--us-d-sm)/1.1 var(--us-sans-system);letter-spacing:-.02em;color:var(--us-ink)}
.uh-door__lede{margin:0 0 var(--us-sp-3);max-width:36em;color:var(--us-ink-2);font:var(--us-t-lead)/1.5 var(--us-sans-system)}
.uh-door__lede a{color:inherit}
/* the lock screen (LANE 698.1): a stranger's page. The door's own box, in the pick this browser keeps: the HERE mark the
   bar wears, round as the bar draws it, and the two ways in, centred. */
.uh-lock{justify-items:center}
.uh-lock__mark{margin:0 0 var(--us-sp-4)}
.uh-lock__mark img{display:block;border-radius:var(--us-r-pill)}
/* the bar on the home (LANE 698.1; LNK, 2026-11-10: "Hide the bar"): it is drawn only once a read of its own has landed
   and says somebody is signed in. Until then the page is the door or the lock screen alone, the whole height. */
html[data-home-bar="off"] here-bar,html[data-home-bar="off"] universe-ui{display:none}
html[data-home-bar="off"] .uh-door{min-height:100svh}
/* rows: a place you hold, a place you are live, something running */
.uh-rows{list-style:none;margin:0;padding:0;display:grid;gap:2px;width:100%}
.uh-row{display:grid;gap:2px;padding:var(--us-sp-2) var(--us-sp-3);border-radius:var(--us-r-sm);color:var(--us-ink);text-decoration:none}
.uh-row__t{font-weight:var(--us-w-medium)}
.uh-row__m{color:var(--us-ink-say);font-size:var(--us-t-small)}
.uh-row:focus-visible,.uh-face:focus-visible,.uh-to a:focus-visible{outline:2px solid var(--us-focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.uh-row:hover,.uh-face:hover{background:var(--us-tint)}}
/* US: people are circles */
.uh-us{display:grid;gap:var(--us-sp-3);justify-items:start;width:100%}
.uh-faces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--us-sp-1);width:100%}
.uh-face{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--us-sp-3);align-items:center;padding:var(--us-sp-2);border-radius:var(--us-r-sm);color:var(--us-ink);text-decoration:none}
.uh-face .us-circle{grid-row:span 2}
.uh-face__n{font-weight:var(--us-w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uh-face__w{color:var(--us-ink-say);font-size:var(--us-t-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uh-empty,.uh-more{margin:0;color:var(--us-ink-2)}
.uh-to{margin:var(--us-sp-2) 0 0;font-size:var(--us-t-small)}
.uh-to a{color:var(--us-ink-2)}
/* LANE 603: while the switch is drawn (the page marks it on the root), the Shell keeps its room at the foot: the pill
   (a small control, its 3px padding and hairline) and the space under it. */
html[data-home-mode]{--us-shell-foot:calc(var(--us-h-sm) + 8px + var(--us-sp-4) + var(--us-sp-2))}
/* LANE 603: Home in two states. The switch floats at the foot of the screen, over whichever state is drawn, so neither
   state's own layout moves for it; it is the one control that is always there. */
.uh-mode{position:fixed;left:50%;bottom:calc(var(--us-sp-4) + var(--us-sab));transform:translateX(-50%);z-index:40;
  display:inline-flex;gap:2px;padding:3px;border-radius:var(--us-r-pill);background:var(--us-glass);border:1px solid var(--us-glass-line);
  -webkit-backdrop-filter:blur(var(--us-glass-blur-thin)) saturate(var(--us-glass-sat));backdrop-filter:blur(var(--us-glass-blur-thin)) saturate(var(--us-glass-sat));box-shadow:var(--us-shadow-float)}
.uh-mode__opt{appearance:none;border:0;margin:0;min-height:var(--us-h-sm);padding:0 var(--us-sp-4);border-radius:var(--us-r-pill);background:transparent;color:var(--us-ink-2);
  font:var(--us-w-medium) var(--us-t-small)/1 var(--us-sans-system);letter-spacing:.02em;cursor:pointer;transition:background var(--us-micro) var(--us-eo),color var(--us-micro) var(--us-eo),transform var(--us-press) var(--us-eo)}
.uh-mode__opt[aria-checked=true]{background:var(--us-ink);color:var(--us-on-ink)}
.uh-mode__opt:active{transform:scale(.97)}
.uh-mode__opt:focus-visible{outline:2px solid var(--us-focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.uh-mode__opt[aria-checked=false]:hover{color:var(--us-ink);background:var(--us-tint)}}
/* Wonder: the invitation. The serif voice is the dreaming one; the rows are grouped by how sure we are. */
.uh-wonder{min-height:calc(100svh - 44px);max-width:880px;margin:0 auto;padding:var(--us-sp-9) var(--us-gutter) calc(var(--us-sp-9) + var(--us-h-sm) + 8px + var(--us-sp-4) + var(--us-sp-2));display:grid;align-content:start;gap:var(--us-sp-3);
  background:var(--us-desk);color:var(--us-ink)}
.uh-wonder__title{margin:0;font:var(--us-w-regular) var(--us-d-md)/1.08 var(--us-serif);letter-spacing:-.015em;color:var(--us-ink)}
.uh-tier{margin-top:var(--us-sp-5);display:grid;gap:var(--us-sp-3)}
.uh-tier__name{margin:0;color:var(--us-ink-say);font:var(--us-w-semibold) var(--us-t-label)/1 var(--us-sans-system);letter-spacing:.1em;text-transform:uppercase}
.uh-invites{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--us-sp-3)}
.uh-invite{display:grid;align-content:start;gap:var(--us-sp-2);padding:var(--us-sp-4);border-radius:var(--us-r-lg);background:var(--us-surface);border:1px solid var(--us-line)}
.uh-tier[data-tier=plausible] .uh-invite{background:transparent}
.uh-tier[data-tier=possible] .uh-invite{background:transparent;border-style:dashed}
.uh-invite__w{margin:0;font:var(--us-w-regular) var(--us-t-title)/1.2 var(--us-serif);color:var(--us-ink)}
.uh-invite__s{margin:0;color:var(--us-ink-2);font-size:var(--us-t-body)}
.uh-invite__a{justify-self:start;margin-top:var(--us-sp-1);color:var(--us-ink);font-weight:var(--us-w-medium);text-decoration:none;font-size:var(--us-t-small)}
.uh-invite__a:hover{text-decoration:underline}
.uh-invite__a:focus-visible{outline:2px solid var(--us-focus);outline-offset:2px;border-radius:var(--us-r-xs)}
.uh-wonder__foot{margin:var(--us-sp-6) 0 0}
@media (prefers-reduced-motion:reduce){.uh-mode__opt{transition:none}}
/* LANE 603.3c: the member's Shell follows the scene. Its wallpaper and frosted veil are fixed over the whole screen, so
   they covered the sphere; here they stay put only within the Shell's own box (sticky), and the Shell's overlays (Where
   to?, the switcher, the status line) keep their layers above the scene. lvh: when a phone's address bar hides, the
   frost still reaches the foot of the screen, as inset:0 did. */
.uh-shell .us-shell__wall,.uh-shell .us-shell__veil{position:sticky;inset:auto;top:0;height:100lvh;margin-bottom:-100lvh}

/* The one scene (LANE 603.2). Painted only from us.tokens/v1, night: the world is the ground (law 1), and the sphere
   on the canvas is the only light. The words sit over it in the serif voice; the hands (choices, the scrub) are sans.
   Nothing here is a box with a border: the question is glass with a ring (newmaterial: "a ring, not a border"). */
.sc{position:relative;min-height:calc(100svh - 44px);overflow:hidden;background:var(--us-desk);color:var(--us-ink);
  display:grid;grid-template-rows:auto 1fr auto auto;padding:var(--us-sp-6) max(var(--us-gutter),var(--us-sp-6)) calc(var(--us-sp-5) + var(--us-sab));gap:var(--us-sp-4)}
.sc-orb{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc > :not(.sc-orb){position:relative;z-index:1}
.sc-now{display:grid;gap:var(--us-sp-1);justify-items:start;max-width:36em}
.sc-kicker{margin:0;color:var(--us-ink-say);font:var(--us-w-semibold) var(--us-t-label)/1 var(--us-sans-system);letter-spacing:.12em}
.sc-time{margin:0;font:var(--us-w-regular) var(--us-d-xl)/1 var(--us-serif);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sc-place{margin:0;color:var(--us-ink-2);font:var(--us-t-lead)/1.4 var(--us-sans-system)}
.sc-live{margin:var(--us-sp-2) 0 0;color:var(--us-ink-2);font:var(--us-t-body)/1.5 var(--us-serif)}

/* igni's one question: glass over the world, the serif voice, one press */
.sc-ask{grid-row:3;justify-self:center;width:min(100%,34rem);display:grid;gap:var(--us-sp-3);padding:var(--us-sp-5);
  border-radius:var(--us-r-xl);background:var(--us-glass);box-shadow:var(--us-shadow-ring),var(--us-shadow-float);
  -webkit-backdrop-filter:blur(var(--us-glass-blur-thick)) saturate(var(--us-glass-sat));backdrop-filter:blur(var(--us-glass-blur-thick)) saturate(var(--us-glass-sat));
  animation:sc-rise var(--us-macro) var(--us-eo) both}
.sc-ask__who{margin:0;color:var(--us-ink-say);font:var(--us-w-semibold) var(--us-t-label)/1 var(--us-sans-system);letter-spacing:.12em;text-transform:uppercase}
.sc-ask__q{margin:0;font:var(--us-w-regular) var(--us-d-sm)/1.12 var(--us-serif);letter-spacing:-.01em;text-wrap:balance}
.sc-ask__because{margin:0;color:var(--us-ink-2);font:var(--us-t-body)/1.5 var(--us-sans-system);max-width:30em}
.sc-ask__choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--us-sp-2)}
.sc-choice{appearance:none;border:0;margin:0;cursor:pointer;display:grid;gap:2px;justify-items:start;text-align:left;padding:var(--us-sp-3) var(--us-sp-4);
  border-radius:var(--us-r-lg);background:var(--us-ink);color:var(--us-on-ink);transition:transform var(--us-press) var(--us-eo)}
.sc-choice:active{transform:scale(.96)}
.sc-choice__w{font:var(--us-w-semibold) var(--us-t-lead)/1.2 var(--us-sans-system)}
.sc-choice__r{font:var(--us-t-small)/1.2 var(--us-sans-system);opacity:.7}
.sc-ask__form{display:flex;flex-wrap:wrap;gap:var(--us-sp-2)}
.sc-in{flex:1 1 14rem;min-width:0;min-height:var(--us-h-md);padding:0 var(--us-sp-3);border:0;border-radius:var(--us-r-md);background:var(--us-sunk);color:var(--us-ink);
  box-shadow:var(--us-shadow-ring);font:var(--us-t-body)/1 var(--us-sans-system)}
.sc-in::placeholder{color:var(--us-ink-3)}
.sc-ask__acts{display:flex;flex-wrap:wrap;gap:var(--us-sp-2)}
.sc-quiet{appearance:none;border:0;background:none;padding:0;justify-self:start;cursor:pointer;color:var(--us-ink-2);font:var(--us-t-small)/1.4 var(--us-sans-system);text-decoration:underline;text-underline-offset:3px}
.sc-invite{grid-row:3;justify-self:center}

/* law 5: time is a control; a scrub with named stops, and now is always the first */
.sc-scrub{grid-row:4;justify-self:center;max-width:100%;overflow-x:auto}
.sc-scrub__stops{display:inline-flex;gap:2px;padding:3px;border-radius:var(--us-r-pill);background:var(--us-glass);box-shadow:var(--us-shadow-ring);
  -webkit-backdrop-filter:blur(var(--us-glass-blur-thin)) saturate(var(--us-glass-sat));backdrop-filter:blur(var(--us-glass-blur-thin)) saturate(var(--us-glass-sat))}
.sc-stop{appearance:none;border:0;margin:0;white-space:nowrap;min-height:var(--us-h-sm);padding:0 var(--us-sp-4);border-radius:var(--us-r-pill);background:transparent;color:var(--us-ink-2);
  cursor:pointer;font:var(--us-w-medium) var(--us-t-small)/1 var(--us-sans-system);transition:background var(--us-micro) var(--us-eo),color var(--us-micro) var(--us-eo)}
.sc-stop[aria-checked=true]{background:var(--us-ink);color:var(--us-on-ink)}
.sc-stop:focus-visible,.sc-choice:focus-visible,.sc-quiet:focus-visible,.sc-in:focus-visible{outline:2px solid var(--us-focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.sc-stop[aria-checked=false]:hover{color:var(--us-ink);background:var(--us-tint)}}
.sc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes sc-rise{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.sc-ask{animation:none}.sc-stop,.sc-choice{transition:none}}
/* Wonder on a wide screen: the question stands beside the sphere, at the height of your point */
@media (min-width:900px){.sc[data-wonder] .sc-ask,.sc[data-sitting] .sc-sit{grid-row:2 / 4;align-self:center;justify-self:end;margin-right:4vw}}
@media (max-width:640px){.sc-time{font-size:var(--us-d-lg)}.sc-ask{padding:var(--us-sp-4)}}
/* LANE 603.3: the pulse, and what igni said back about a send */
.sc-pulse{margin:0;color:var(--us-ink-2);font:var(--us-t-small)/1.5 var(--us-sans-system);font-variant-numeric:tabular-nums}
.sc-pulse a{color:var(--us-ink)}
.sc-ask__said{margin:0;color:var(--us-ink-2);font:var(--us-t-small)/1.4 var(--us-sans-system)}
.sc-invite{display:grid;gap:var(--us-sp-2);justify-items:center;text-align:center}
/* LANE 603.4: igni's word, in its own voice: glass and the serif, the cockpit's text as text, the whole of it a link away */
.sc-word{display:grid;gap:var(--us-sp-2);justify-items:start;text-align:left;width:min(100%,34rem);padding:var(--us-sp-4) var(--us-sp-5);
  border-radius:var(--us-r-xl);background:var(--us-glass);box-shadow:var(--us-shadow-ring),var(--us-shadow-float);
  -webkit-backdrop-filter:blur(var(--us-glass-blur-thick)) saturate(var(--us-glass-sat));backdrop-filter:blur(var(--us-glass-blur-thick)) saturate(var(--us-glass-sat))}
.sc-ask .sc-word{width:100%;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.sc-word__text{margin:0;font:var(--us-w-regular) var(--us-t-lead)/1.45 var(--us-serif);color:var(--us-ink);white-space:pre-line;overflow-wrap:anywhere;max-height:40vh;overflow:auto}
.sc-word a:focus-visible,.sc-word__text:focus-visible{outline:2px solid var(--us-focus);outline-offset:2px}
.sc-invite__live{display:grid;gap:var(--us-sp-2);justify-items:center}
/* LANE 603.8, on a phone: a long word of igni's shows its first lines, so the sphere stays the ground; the five stops of
   time fit the width without scrolling; and a member's scene starts below the Shell's switcher, never under it */
.sc-word__text--folded{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:480px){
  .sc-scrub{justify-self:stretch}
  .sc-scrub__stops{display:flex;width:100%}
  .sc-stop{flex:1 1 auto;padding:0 var(--us-sp-2)}
}
:root:has(.us-shell--narrow) .sc{padding-top:calc(var(--us-h-md) + var(--us-sp-7) + var(--us-sat))}
@media (max-width:380px){.sc-stop{padding:0 var(--us-sp-1)}}
/* LANE 603.10: the once-in-a-life sitting, on igni's glass: the six steps as a quiet row of points that light as you go,
   the contract in the serif voice, the fields as the scene's own */
.sc-sit__steps{display:flex;gap:var(--us-sp-1);margin:0;padding:0;list-style:none}
.sc-sit__steps li{width:6px;height:6px;border-radius:var(--us-r-pill);background:var(--us-line-2);transition:background var(--us-macro) var(--us-eo)}
.sc-sit__steps li[data-on]{background:var(--us-ink-2)}
.sc-sit__steps li[data-now]{background:var(--us-ink)}
.sc-sit__foot{margin:0;color:var(--us-ink-3);font:var(--us-t-small)/1.4 var(--us-sans-system)}
.sc-sit__form{display:grid;gap:var(--us-sp-3)}
.sc-sit__field{display:grid;gap:var(--us-sp-1);margin:0;padding:0;border:0;min-width:0;color:var(--us-ink-2);font:var(--us-t-small)/1.3 var(--us-sans-system)}
.sc-sit__field legend{padding:0;margin-bottom:var(--us-sp-1)}
.sc-sit__field .sc-in{flex:none;width:100%}
.sc-sit__marks{display:flex;flex-wrap:wrap;gap:var(--us-sp-2)}
.sc-sit__marks legend{flex-basis:100%}
.sc-sit__mark{position:relative;display:grid;place-items:center;width:var(--us-h-md);height:var(--us-h-md);border-radius:var(--us-r-pill);background:var(--us-sunk);
  box-shadow:var(--us-shadow-ring);color:var(--us-ink);font:var(--us-t-lead)/1 var(--us-serif);cursor:pointer}
.sc-sit__mark input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.sc-sit__mark:has(input:checked){background:var(--us-ink);color:var(--us-on-ink)}
.sc-sit__mark:has(input:focus-visible){outline:2px solid var(--us-focus);outline-offset:2px}
.sc-sit__contract{margin:0;padding:0 0 0 1.4em;display:grid;gap:var(--us-sp-2);color:var(--us-ink);font:var(--us-t-lead)/1.45 var(--us-serif);max-height:42vh;overflow:auto}
.sc-sit__contract li::marker{color:var(--us-ink-3);font:var(--us-t-small)/1 var(--us-sans-system)}
.sc-sit__sig{font:italic var(--us-t-lead)/1 var(--us-serif)}
.sc-sit__link{margin:0;padding:var(--us-sp-3);border-radius:var(--us-r-md);background:var(--us-sunk);box-shadow:var(--us-shadow-ring);color:var(--us-ink);
  font:var(--us-t-small)/1.4 var(--us-mono);overflow-wrap:anywhere;user-select:all}
.sc-sit__face{margin:0;font:var(--us-d-sm)/1 var(--us-serif);color:var(--us-ink)}
.sc-sit__line{margin:0;color:var(--us-ink-2);font:var(--us-t-lead)/1.4 var(--us-serif)}
.sc-sit__here{font-size:var(--us-d-md)}
.sc-sit .us-metal{text-decoration:none}
.sc-sit__form .us-metal:disabled,.sc-sit .sc-choice:disabled{opacity:.5;cursor:default}