/* Surfaces of the Mind (/lab). Every size is in the units of Pat's frames
   (1440 × 960); lab.js scales the whole board to the window. Light only, as
   his frames are. */

/* The app's glyph font (Material Symbols Rounded, filled, weight 500), cut
   to the glyphs the page draws: the key cap's arrow and the product's
   drawer. Block: a name never shows as letters. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/assets/symbols-site.woff2?v=c970d5b1fc') format('woff2');
}
@font-face {
  font-family: 'ABC Favorit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/ABCFavorit-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'ABC Favorit';
  font-style: normal;
  font-weight: 350;
  font-display: swap;
  src: url('/assets/ABCFavorit-Book.woff2') format('woff2');
}
@font-face {
  font-family: 'ABC Favorit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/ABCFavorit-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'ABC Favorit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/ABCFavorit-Medium.woff2') format('woff2');
}

:root {
  --face: 'ABC Favorit', ui-sans-serif, system-ui, sans-serif;
  /* Pat's frames */
  --ground: #f1f1f1;
  /* Pat's colour-test (1186:107): the ground's radial, lab.js centres it
     on the mind. */
  --ground-in: #ffffff;
  --ground-out: #f1f1f1;
  --ink: #101010;
  --muted: #6b6b6b;
  --bubble-ink: #3f3f3f;
  --bubble: #dedede;
  --notion-inline: #857bfe;
  --notion-inline-arc: #a39bff;
  --notion-chat: #ff7539;
  /* Surfaces, washes and controls, each with its dark value below. */
  --chat-bg: #fff;
  --chat-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
  --dim: #dbdbdb;
  --sheen-a: #8a8a8a;
  --sheen-b: #d2d2d2;
  --pill: #e6e6e6;
  --pill-hover: #dcdcdc;
  --well: #f1f1f1;
  --well-edge: #10101012;
  --well-edge-on: #10101038;
  --well-inset: #10101017;
  --disc: #e6e6e6;
  --disc-hover: #dfdfdf;
  --disc-press: var(--ink);
  --disc-press-ink: #f7f7f7;
  --raise-shade: linear-gradient(180deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0.2) 45%, rgb(255 255 255 / 0) 65%, rgb(0 0 0 / 0.05) 85%, rgb(0 0 0 / 0.1) 100%);
  --raise-rim: rgb(255 255 255 / 0.72);
  --mark: #ceff0a2c;
  --mark-edge: #9fbf0080;
  --mark-hot: #ceff0a59;
  --mark-hot-edge: #9fbf00;
  --tip-bg: var(--ink);
  --tip-ink: #f6f5f2;
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-leave: cubic-bezier(0.32, 0, 0.67, 0);
  --motion-swap: 200ms;
  --motion-drawer: 340ms;
}
/* Dark: the system's choice. The app's dark tokens (src/stage/
   solid-materials.css, the old homepage's pairs): ground #171717, surface
   #242424, active #353535, hover #3c3c3c, ink #f1f1f1, muted #9a9a9a, the
   mark at #ceff0a30 on its #ceff0a base, the tooltip on #444444. lab.js
   follows the same query for the canvas. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #171717;
    --ground-in: #1e1e1e;
    --ground-out: #121212;
    --ink: #f1f1f1;
    --muted: #9a9a9a;
    --bubble-ink: #d0d0d0;
    --bubble: #2c2c2c;
    --chat-bg: #242424;
    --chat-shadow: 0 3px 20px rgba(0, 0, 0, 0.35);
    --dim: #3a3a3a;
    --sheen-a: #7a7a7a;
    --sheen-b: #c8c8c8;
    --pill: #353535;
    --pill-hover: #3c3c3c;
    --well: #1e1e1e;
    --well-edge: #ffffff14;
    --well-edge-on: #ffffff38;
    --well-inset: #00000059;
    --disc: #353535;
    --disc-hover: #3c3c3c;
    --disc-press-ink: #101010;
    --raise-shade: linear-gradient(180deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.065) 45%, rgb(255 255 255 / 0) 65%, rgb(0 0 0 / 0.1) 85%, rgb(0 0 0 / 0.2) 100%);
    --raise-rim: rgb(255 255 255 / 0.37);
    --mark: #ceff0a1c;
    --mark-edge: #ceff0a80;
    --mark-hot: #ceff0a30;
    --mark-hot-edge: #ceff0a;
    --tip-bg: #444444;
    --tip-ink: #f1f1f1;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--ground-out);
  /* No scrollbar on this page (Pat, round 4); it still scrolls. */
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
/* The body stays clear: the ground (a fixed layer below it) shows through. */
html, body {
  margin: 0;
  /* Nothing pans sideways on a phone (Pat, round 4): the board and the
     brace's box run past a narrow window. clip, not hidden, so the stage
     stays sticky. */
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--face);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Seven moments: two lines of introduction, then the five beats. The page
   scrolls freely and comes to rest on each moment; reaching one plays its
   transition once (lab.js). */
.js:not(.still) { scroll-snap-type: y mandatory; }
.track {
  position: relative;
  height: 700vh;
  height: 700svh;
}
.snaps { position: absolute; inset: 0; pointer-events: none; }
/* Fourteen snaps: the product's fourteen moments; the thesis's seven until
   lab.js lays the track out for the flow (layoutTrack), so the fallback
   track above stays the thesis's. */
.snaps i:nth-child(n + 8) { display: none; }
.snaps i {
  display: block;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* A tall stage's second snap, at its end (lab.js layoutTrack): a window
   tall, so its start is where the stage's own scroll ends. */
.snaps i { position: relative; }
.snaps b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.snaps b[hidden] { display: none; }
.snaps b[data-off] { scroll-snap-align: none; }
.rest { scroll-snap-align: start; }
.js .track { display: block; }
html:not(.js) .track { display: none; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 721px at 50% 68%, var(--ground-in), var(--ground-out));
}

/* The board: 960 tall, as wide as the window in board units. */
.board {
  position: absolute;
  left: 0;
  top: 0;
  height: 960px;
  transform-origin: 0 0;
}
/* The live layer (#plive, product moments 12 and 13): the board's twin over
   it, sized and scaled with it (lab.js size()), outside the stage's
   aria-hidden, so what a reader uses there (the carousel, the demo) is
   theirs to reach. Only those take the pointer. */
.plive {
  position: absolute;
  left: 0;
  top: 0;
  height: 960px;
  transform-origin: 0 0;
  pointer-events: none;
}
.js .plive:not(.sized) { visibility: hidden; }
/* Unseen until lab.js has sized it: before that it is 0 wide and unscaled,
   so its words and the icon flashed at full size in the top left on first
   load (Pat 2026-11-07 14:57). */
.js .board:not(.sized) { visibility: hidden; }

.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.board p { margin: 0; }

/* More below (Pat 2026-11-08 00:40): the app's key cap (KeyCaps.css: 24
   square, radius 5, --color-active, the 16 filled glyph in ink), centred 28
   above the window's foot. It shows through the introduction and fades once
   the header's line has been read, and comes back in the same place over
   the carousel and the demo (Pat 2026-11-09 05:08).
   It is a button, Next (Pat 2026-11-09 02:24), with the site's pressable
   states (.ask-send, the kit's .hb): under the pointer the raise (the
   hover fill, the top rim, the shade on a layer that eases), in over 100
   and out over 140; pressed, ink with the glyph in surface, at once. Its
   hit area reaches 10 past the cap (44 square). Its own class: page.js
   marks React's extra letters .more. */
.next-cap {
  --hover-motion: 140ms;
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0 0 0 -12px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--pill);
  color: var(--ink);
  font: normal 16px / 1 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga' 1, 'rlig' 1;
  cursor: pointer;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition:
    opacity 400ms ease-out,
    background-color var(--hover-motion) ease-out,
    box-shadow var(--hover-motion) ease-out,
    color var(--hover-motion) ease-out;
}
.next-cap.shown { opacity: 1; pointer-events: auto; }
.next-cap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--raise-shade);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-motion) ease-out;
}
.next-cap::after {
  content: '';
  position: absolute;
  inset: -10px;
}
@media (hover: hover) {
  .next-cap:hover:not(:active) {
    --hover-motion: 100ms;
    background-color: var(--pill-hover);
    box-shadow: inset 0 1px 0 var(--raise-rim);
  }
  .next-cap:hover:not(:active)::before { opacity: 1; }
}
.next-cap:active {
  background-color: var(--disc-press);
  color: var(--disc-press-ink);
  box-shadow: none;
  transition: opacity 400ms ease-out;
}
.next-cap:active::before { opacity: 0; transition: none; }
.next-cap:focus { outline: none; }
.next-cap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .next-cap { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' -25, 'opsz' 24; }
}
/* A press from the last moment hands focus to the end (lab.js goNext), a
   place for the next Tab to start from, not a control: no ring. */
#rest:focus { outline: none; }

/* The two ways in (Pat 2026-11-08 02:10 and 02:18): Thesis left of the
   introduction and Product right (above and below on a phone), parted by a
   divider that blurs into view. They belong to the first moment: leaving
   it, their words type away out of a blur and the divider blurs out; coming
   back, they type in again (lab.js). The glow and the divider are one
   WebGL layer, dithered, so the faint gradient never bands. The pointer and
   taps are read over each whole half, so only the labels take events. */
.ways {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ways.gone { visibility: hidden; }
html:not(.js) .ways { display: none; }
.ways-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
html[data-way] { cursor: pointer; }

.way {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--k, 1));
  margin: 0;
  padding: calc(10px * var(--k, 1)) calc(14px * var(--k, 1));
  border: 0;
  border-radius: calc(14px * var(--k, 1));
  background: none;
  color: var(--ink);
  font-family: var(--face);
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  translate: -50% -50%;
}
.ways:not(.shown) .way,
.ways.gone .way { visibility: hidden; pointer-events: none; }
.way-kind {
  color: var(--muted);
  font: 350 calc(14px * var(--k, 1)) / calc(18px * var(--k, 1)) var(--face);
}
.way-name {
  max-width: var(--way-w, 280px);
  font: 350 calc(20px * var(--k, 1)) / calc(26px * var(--k, 1)) var(--face);
  text-wrap: balance;
}
/* Each label is as wide as its title: placed from its side's centre, an
   absolute box would otherwise shrink to the half of the side the window
   leaves right of that centre, and the product's title wrapped where it
   fits on one line (Pat 2026-11-09 05:08). Its title wraps only at the
   side's room (lab.js sets --way-w). On a phone it keeps to one line (Pat
   2026-11-08 10:52). */
.way { width: max-content; }
@media (max-width: 599px) {
  .way-name { white-space: nowrap; }
}
.way:focus { outline: none; }
.way:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.kicker,
.day,
.cap-title,
.cap-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.kicker {
  top: 60px;
  font: 350 20px / 24px var(--face);
}
/* The app's icon, fixed above the header, light or dark with the page
   (Pat 2026-11-07 14:46). */
.mark-icon {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
}
.mark-icon img { display: block; width: 100%; height: 100%; }
/* The icon never scrolls in with the end (lab.js iconsFor): the stage's
   fades as the end starts in, the end's comes up once it rests. */
.mark-icon { transition: opacity 160ms ease-out; }
html[data-icon-off] .mark-icon { opacity: 0; pointer-events: none; }
/* Light or dark with the page; under a pointer it turns to the other
   (Pat 2026-11-08 14:35), the two crossfading in place. The end's icon
   (.end-icon) does the same. */
:is(.mark-icon, .end-icon) img {
  position: absolute;
  inset: 0;
  transition: opacity 180ms ease-out;
}
:is(.mark-icon, .end-icon) .dark { opacity: 0; }
@media (hover: hover) {
  :is(.mark-icon, .end-icon):hover .light { opacity: 0; }
  :is(.mark-icon, .end-icon):hover .dark { opacity: 1; }
}
@media (prefers-color-scheme: dark) {
  :is(.mark-icon, .end-icon) .light { opacity: 0; }
  :is(.mark-icon, .end-icon) .dark { opacity: 1; }
}
@media (prefers-color-scheme: dark) and (hover: hover) {
  :is(.mark-icon, .end-icon):hover .light { opacity: 1; }
  :is(.mark-icon, .end-icon):hover .dark { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.mark-icon, .end-icon) img { transition: none; }
}
/* Its letters flicker in once the name leaves the second line (lab.js). */
.kicker .ch { display: inline-block; white-space: pre; }
.js .kicker .ch { opacity: 0; }

/* Letters in motion (morph.js): a morph's letters and the ones it lets go,
   and typed words, held whole so lines break only between them. */
.m,
.m-ghost { display: inline-block; white-space: pre; }
.m-ghost { position: absolute; top: 0; pointer-events: none; }
.w { display: inline-block; white-space: nowrap; }
.l { display: inline-block; }

/* The introduction: centred, typed in. In the second line the name's
   letters flicker in at random while the rest types. */
.intro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  text-wrap: balance;
  font: 350 20px / 28px var(--face);
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.board.phone .intro { width: 342px; }
/* --travel: the second interlude's line with the scroll from React part
   two (lab.js interludeTravel). */
.intro.shown { opacity: var(--travel, 1); }
/* The second line breaks before the name on every window (Pat 2026-11-08
   10:32): too narrow for it whole, wide enough for each half. */
#intro-2 { width: 340px; }
/* The lines share one place; only Inline's wash takes the pointer. */
.intro { pointer-events: none; }
.intro.shown .mk.washed { pointer-events: auto; }
/* Each letter fades up out of a slight blur as it is typed (morph.js's
   typeIn, Pat round 3); the name's letters flicker (lab.js). */
.intro .ch { display: inline-block; }
.js .intro .ch:not(.f) {
  opacity: 0;
  filter: blur(3px);
  translate: 0 0.16em;
  transition: opacity 260ms ease-out, filter 260ms ease-out, translate 260ms ease-out;
}
.js .intro .ch.on:not(.f) { opacity: 1; filter: none; translate: 0 0; }
.intro .sotm { white-space: nowrap; }
/* "your", underlined once typed: the line draws in from its left (Pat,
   round 4). */
.intro .ul {
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 0% 1.5px no-repeat;
  transition: background-size 520ms var(--ease-settle);
}
.intro .ul.drawn { background-size: 100% 1.5px; }
.js .intro.rest-out .ul { background-size: 0% 1.5px; transition-duration: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .intro .ul { transition: none; }
}
/* Leaving for the mind: the rest fades as the name flickers out of it. */
.js .intro.rest-out .ch:not(.f) {
  opacity: 0;
  filter: blur(3px);
  transition: opacity 350ms ease-out, filter 350ms ease-out;
}
/* Inline, washed as the app marks a word (the app's mark, and the old homepage's .m.washed): half
   strength at rest, whole under the pointer, where its pitch opens. */
.mk {
  padding: 3px 1px 1px;
  margin: 0 -1px;
  border-bottom: 2px solid transparent;
  border-radius: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 400ms ease-out, border-bottom-color 400ms ease-out;
}
.mk.washed {
  background-color: var(--mark);
  border-bottom-color: var(--mark-edge);
  cursor: default;
}
.mk.washed.hot,
.mk.washed:hover {
  background-color: var(--mark-hot);
  border-bottom-color: var(--mark-hot-edge);
  transition-duration: 160ms;
}

/* Its pitch: the app's tooltip (src/ui/tooltip.css), above the word. */
.tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-in, translate 120ms ease-in;
  translate: 0 4px;
}
.tip.on { opacity: 1; translate: 0 0; transition-timing-function: ease-out; }
.tip-tail {
  width: 12px;
  height: 9px;
  background: var(--tip-bg);
  clip-path: path("M 0 0 L 12 0 L 7.6641 6.5038 A 2 2 0 0 1 4.3359 6.5038 Z");
}
.tip-body {
  display: block;
  max-width: 330px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: 400 14px / 18px var(--face);
  text-align: left;
  scale: 0.97;
  transform-origin: 50% 100%;
  transition: scale 120ms ease-in;
}
.tip.on .tip-body { scale: 1; transition-timing-function: ease-out; }
.tip-body span { display: block; }
@media (prefers-reduced-motion: reduce) {
  .tip, .tip.on { translate: none; transition: opacity 80ms ease-out; }
  .tip-body, .tip.on .tip-body { scale: none; transition: none; }
}

.day {
  top: 96px;
  font: 400 14px / 17px var(--face);
}

.caption {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cap-title {
  top: 813px;
  font: 400 calc(14px * var(--lift, 1)) / calc(17px * var(--lift, 1)) var(--face);
}

.cap-text {
  top: 839px;
  /* Three lines at most in every state (Pat 2026-11-07 14:27): a
     definition that gains a line on its second beat is two lines, with the
     third left for it. Each box's width is set by hand below, balanced. */
  width: calc(310px * var(--lift, 1));
  white-space: normal;
  font: 300 calc(16px * var(--lift, 1)) / calc(24px * var(--lift, 1)) var(--face);
  color: var(--muted);
  text-wrap: balance;
}
/* 1094:2197: the first clause dims to #dbdbdb as the new one flickers in,
   muted, on a line of its own so nothing above it reflows. */
.cap-text .was { display: block; text-wrap: balance; color: var(--muted); transition: color 600ms ease-out; }
.cap-text .was.dim { color: var(--dim); }
.cap-text .now { display: block; color: var(--muted); }
/* The widths, measured in WebKit at 16 px: Notions 427 / 423 then its added
   line; Chatbot drain 318 / 328 / 359 (Pat 2026-11-08 00:51); Tomorrow 303 / 296
   then its added line. */
.caption[data-from="0"] .cap-text { width: calc(430px * var(--lift, 1)); }
.caption[data-from="2"] .cap-text { width: calc(370px * var(--lift, 1)); }
.caption[data-from="3"] .cap-text { width: calc(310px * var(--lift, 1)); }
/* A phone's 390 cannot hold Notions in two lines at 16 px: three, then its
   added line. */
.board.phone .caption[data-from="0"] .cap-text { width: calc(340px * var(--lift, 1)); }
/* Chatbot drain keeps four lines on a phone (Pat 2026-11-08 00:40). */
.board.phone .caption[data-from="2"] .cap-text { width: calc(342px * var(--lift, 1)); }

.day,
.caption { opacity: 0; transition: opacity 300ms ease-out; }

.brace {
  position: absolute;
  top: 788px;
  left: 50%;
  margin-left: -200px;
  overflow: visible;
}
.brace path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Today's chat box (1086:344): 250 × 89, radius 25. lab.js sets its top. */
.chat {
  position: absolute;
  left: 50%;
  top: 0;
  width: 250px;
  height: 89px;
  margin-left: -125px;
  border-radius: 25px;
  background: var(--chat-bg);
  box-shadow: var(--chat-shadow);
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}
/* Landing: the box squashes on the mind and settles. */
.chat.crash { animation: crash 520ms cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes crash {
  0% { scale: 1.06 0.86; }
  35% { scale: 0.97 1.04; }
  65% { scale: 1.01 0.99; }
  100% { scale: 1 1; }
}
.chat svg { display: block; }
.chat path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-close {
  position: absolute;
  left: 22px;
  top: 13.5px;
  color: var(--ink);
}
.chat-ask {
  position: absolute;
  left: 42px;
  top: 25px;
  font: 350 14px / 17px var(--face);
  color: var(--muted);
  opacity: 0.6;
  white-space: nowrap;
}
.chat-model {
  position: absolute;
  /* Centred on its own middle (Pat, round 3), so it swells from there and
     stays put as its version grows. */
  left: 135px;
  translate: -50% 0;
  top: 49px;
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 12px / 14px var(--face);
  color: var(--ink);
  white-space: nowrap;
}
.chat-send {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ground);
  display: grid;
  place-items: center;
}

/* The comb (1086:344): inside the box, ending on its bottom edge. */
.comb {
  position: absolute;
  left: 95px;
  top: 75px;
  overflow: visible;
}
.chat .comb line { stroke-width: 1.5; stroke-linecap: butt; }

/* The thread above it, newest at the bottom: the box's messages, each as
   wide as its words, Pat's line breaks kept, a tail on the newest. */
.bubbles {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
}
.bubble,
.thinking {
  position: absolute;
  left: -58px;
  bottom: 0;
  transform-origin: 0 100%;
  will-change: transform, opacity;
}
.bubble {
  width: max-content;
  max-width: 180px;
  padding: 7px 12px 8px;
  border-radius: 17px 17px 17px 6px;
  background: var(--bubble);
  font: 400 12px / 16px var(--face);
  color: var(--bubble-ink);
  white-space: pre-line;
  transition: transform var(--motion-drawer) var(--ease-settle);
}
.bubble:not(.newest) { border-radius: 17px; }
.bubble.newest::before,
.bubble.newest::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 14px;
}
.bubble.newest::before {
  left: -5px;
  width: 12px;
  background: var(--bubble);
  border-bottom-right-radius: 10px 9px;
}
.bubble.newest::after {
  left: -10px;
  width: 10px;
  background: var(--here, var(--ground));
  border-bottom-right-radius: 8px;
}
/* What it says it is doing before it answers: a muted line with a sheen. */
/* Centred on the chat box (Pat 2026-11-07 14:46): .bubbles sits at its
   centre, so the line hangs half its width either side. */
.thinking {
  left: 0;
  translate: -50% 0;
  transform-origin: 50% 100%;
  text-align: center;
  font: 400 12px / 16px var(--face);
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, var(--sheen-a) 0%, var(--sheen-a) 40%, var(--sheen-b) 50%, var(--sheen-a) 60%, var(--sheen-a) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sheen 1.6s linear infinite;
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.thinking.on { opacity: 1; }
@keyframes sheen { to { background-position: -150% 0; } }

/* The phone boards (CS03, 1178:108 to 1178:323): the circle keeps its
   size; the header and caption close in. */
.board.phone .kicker { top: 52px; }
.board.phone .mark-icon { top: 14px; width: 28px; height: 28px; }
.board.phone .day { top: 90px; }
.board.phone .brace { top: 665px; }
.board.phone .cap-title { top: 690px; }
.board.phone .cap-text { top: 716px; }

/* The story as text: read aloud with script, shown without it. */
.text-only {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  font: 300 18px / 1.5 var(--face);
}
.text-only h1 { font: 350 22px / 1.3 var(--face); }
.text-only h2 { font: 400 26px / 1.3 var(--face); margin-top: 2.5rem; }
.text-only h3 { font: 400 15px / 1.3 var(--face); margin-bottom: 0.25rem; }
.text-only p { color: var(--muted); margin-top: 0; }
.js .text-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the rest
   After the story: the tagline, its verb turning (verb.js), and the way in,
   in the app's search well (src/ui/search-pill.css, open: 42 high, the
   recess and its edge, 14/20 type, a 32 disc at the end). */

.pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 8px 16px;
  border: 0;
  border-radius: 100px;
  background: var(--pill);
  color: var(--ink);
  font: 500 14px / 18px var(--face);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease-out, opacity var(--motion-swap) ease-out;
}
.pill:hover { background: var(--pill-hover); }
.pill:focus-visible,
.ask-send:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}


.rest {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 96px 16px 24px;
  overflow-x: clip;
}
/* The end is the landing again (Pat 10:12): one screen, the introduction
   in the centre, the dividers and the two sides drawn on its canvas as the
   ways' are, the waitlist on the side of the flow just seen and the flow
   not taken opposite. lab.js places each piece as layoutWays places the
   ways; sizes scale with the board (--k). */
.js .rest {
  position: relative;
  display: block;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 0;
}
.js .rest[data-hot] { cursor: pointer; }
.end-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.end-icon {
  position: absolute;
  left: 50%;
  top: calc(16px * var(--k, 1));
  z-index: 1;
  width: calc(32px * var(--k, 1));
  height: calc(32px * var(--k, 1));
  translate: -50% 0;
  cursor: pointer;
}
.end-icon img { display: block; width: 100%; height: 100%; }
.end-icon { opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; }
.rest[data-settled] .end-icon { opacity: 1; pointer-events: auto; transition-duration: 260ms; }
.end-intro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(440px * var(--k, 1));
  margin: 0;
  translate: -50% -50%;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  font: 350 calc(20px * var(--k, 1)) / calc(28px * var(--k, 1)) var(--face);
  pointer-events: none;
}
.end-intro .ul { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 100% 1.5px no-repeat; }
.js .rest-col {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--end-w, 320px);
  translate: -50% -50%;
}
.js .rest .tagline { text-wrap: balance; }
/* On a desktop the break is fixed after "In defence of", so a wider verb
   (compose) never moves "thinking" back up a line (Pat 2026-11-10 02:27).
   Phones break before "we" instead (.tl-2, below). */
@media (min-width: 600px) { .tl-t { display: block; } }
/* The end (lab.js): the field takes the introduction's place in the centre
   and the tagline a slot of its own, each placed on its own. */
.js .rest .rest-col { display: contents; }
.js .rest .end-intro { visibility: hidden; }
.js .rest :is(.tagline, .ask, .ask-check) {
  position: absolute;
  z-index: 1;
  width: var(--end-w, 320px);
  margin: 0;
  translate: -50% -50%;
}
.js .rest .ask { width: min(320px, calc(100vw - 48px)); }
.js .rest .ask-check { translate: -50% 0; }
.next-way { z-index: 1; }
html:not(.js) :is(.end-glow, .end-icon, .end-intro, .next-way) { display: none; }
/* The app's icon takes you back to the start (lab.js), over the stage's
   other pieces (the chat box crosses it on the fourth beat). */
.mark-icon { z-index: 6; cursor: pointer; pointer-events: auto; }
.rest-col {
  width: 100%;
  max-width: 440px;
  text-align: center;
}
.tagline {
  margin: 0;
  font: 400 25px / 30px var(--face);
}
.verb {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  vertical-align: bottom;
}

.ask {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  height: 42px;
  margin: 32px auto 0;
  padding: 0 5px 0 16px;
  border-radius: 100px;
  background-color: var(--well);
  box-shadow:
    inset 0 0 0 1px var(--well-edge),
    inset 0 1px 3px var(--well-inset);
}
.ask:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--well-edge-on),
    inset 0 1px 3px var(--well-inset);
}
.ask-field {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--ink);
  font: 400 14px / 20px var(--face);
  caret-color: var(--ink);
}
.ask-field::placeholder { color: var(--muted); opacity: 1; }
/* The field's prompt, a morph (ask.js): it sits where the placeholder would. */
.ask-ph {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  font: 400 14px / 20px var(--face);
  color: var(--muted);
  white-space: pre;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
.ask-ph.gone { opacity: 0; transition: none; }
.ask:has(.ask-field[aria-invalid='true']) {
  box-shadow:
    inset 0 0 0 1px var(--ink),
    inset 0 1px 3px var(--well-inset);
}
/* The send disc: the kit's 32 circle, its glyph the homepage's arrow; it
   waits, dim, for a whole address. Its hover and press are the kit's glyph
   button (src/ui/header-button.css .hb): under the pointer the raise (its
   shade on a layer that eases, the rim, color-hover), eased in over 100 ms
   and out over 140; pressed, ink with the glyph in surface, at once. */
.ask-send {
  --hover-motion: 140ms;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--hover-motion) ease-out,
    box-shadow var(--hover-motion) ease-out,
    color var(--hover-motion) ease-out,
    opacity 160ms ease-out,
    scale 160ms ease-out;
}
.ask-send::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--raise-shade);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-motion) ease-out;
}
.ask-send svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) {
  .ask-send:hover:not(:active, [aria-disabled='true']) {
    --hover-motion: 100ms;
    background-color: var(--disc-hover);
    box-shadow: inset 0 1px 0 var(--raise-rim);
  }
  .ask-send:hover:not(:active, [aria-disabled='true'])::before { opacity: 1; }
}
.ask-send:active:not([aria-disabled='true']) {
  background-color: var(--disc-press);
  color: var(--disc-press-ink);
  box-shadow: none;
  transition: none;
}
.ask-send:active:not([aria-disabled='true'])::before { opacity: 0; transition: none; }
.ask-send[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.ask[data-state='sending'] .ask-send { opacity: 1; scale: 0.92; }
.ask[data-state='sent'] .ask-send { opacity: 1; background: var(--ink); color: var(--ground); }
.ask[data-state='sent'] .ask-field { color: var(--muted); }
/* Without script: a plain way to the homepage's field. */
.ask-nojs { display: none; margin-top: 32px; }
html:not(.js) .ask,
html:not(.js) .ask-check { display: none; }
html:not(.js) .ask-nojs { display: inline-flex; }
.ask-check { display: flex; justify-content: center; margin-top: 12px; }
.ask-check:empty { display: none; }
/* Phones never zoom into the field. */
@media (max-width: 599px) {
  .rest-col { max-width: 342px; }
  .tagline { font-size: 22px; line-height: 28px; }
  .ask { height: 46px; }
  .ask-field, .ask-ph { font-size: 16px; }
  /* The verb's line keeps its own place, so a longer verb never rewraps it. */
  .tl-2 { display: block; }
  .ask-send { width: 36px; height: 36px; }
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The model's effort level, faded (Pat, round 2). The name flashes orange
   and swells a hair as each catch lands in the box (lab.js flashModel). */
.chat-model { transform-origin: 50% 50%; }
.chat-model .effort { opacity: 0.4; margin-left: -1px; }
.chat-model .ver { display: inline-block; position: relative; }

/* ---------------------------------------------------------------- the product
   (Pat 2026-11-08 02:50; product.js). The product's scenes on the board, in
   its units: the app's empty page at mid-window, a pointer, the drawer. */
.pscene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Back from an interlude: once its line has faded out (.intro.rest-out,
     350), the page, its margin and the drawer fade back in (Pat 2026-11-09
     17:27: React's text fades in, never typed). */
  transition: opacity 600ms ease-out 350ms;
}
/* An interlude (product.js): the page, its margin and the drawer fade away
   as the reader arrives, before the interlude's line types in. */
.pscene.p-away { opacity: 0; transition: opacity 300ms ease-out; }
.pscene.instant { transition: none; }
.p-page {
  position: absolute;
  left: 50%;
  top: 0;
  width: 640px;
  transform: translateX(-50%);
}
/* On a phone the page keeps its left edge (24 in) and ends at 334, so the
   margin's marks, drawn in to end 16 inside the board (margin.js), sit just
   clear of the block's highlight; its text is a size down to fit the
   narrower line (Pat 2026-11-09: the marks overlapped the block). */
.board.phone .p-page { width: 310px; translate: -16px 0; }
/* The app's first block: the highlight area, "Think freely…", the caret.
   Pinned by its centre (top is the centre, the block drawn half its height
   above it), so a line that wraps to two grows both ways and stays centred
   (Pat 2026-11-08 09:47). */
.p-block {
  position: absolute;
  left: 0;
  right: 0;
  top: 480px;
  translate: 0 -50%;
  transition: top 620ms var(--ease-settle);
}
.board.phone .p-block { top: 428px; }
.pscene.drawer-open .p-block { top: 182px; }
.board.phone .pscene.drawer-open .p-block { top: 144px; }
.p-wash {
  position: absolute;
  inset: 0;
  border-radius: var(--p-wash-r, 12px);
  background: var(--p-wash, rgb(16 16 16 / 0.04));
  clip-path: inset(0 100% 0 0 round var(--p-wash-r, 12px));
  filter: blur(6px);
  opacity: 0;
  transition:
    clip-path 760ms var(--ease-settle),
    filter 760ms var(--ease-settle),
    opacity 300ms ease-out;
}
.p-line {
  position: relative;
  padding: 12px 16px;
  font: 300 20px / 40px var(--face);
  color: var(--ink);
  min-height: 64px;
}
.board.phone .p-line { padding: 11px 14px; font-size: 18px; line-height: 36px; min-height: 58px; }
.board.phone .p-ph { left: 14px; top: 11px; }
.board.phone .p-caret { height: 23px; vertical-align: -5px; }
.p-ph {
  position: absolute;
  left: 16px;
  top: 12px;
  opacity: 0;
  color: var(--ink);
  white-space: pre;
  transition: opacity 240ms ease-out 300ms;
}
.p-ph.gone { display: none; }
/* The caret: a 2.5 px bar the line's height less its leading, as the app's.
   It sits between letters (product.js moves it), so it takes no width. */
.p-caret {
  display: inline-block;
  width: 0;
  height: 26px;
  vertical-align: -6px;
  position: relative;
  opacity: 0;
}
.p-caret::before {
  content: '';
  position: absolute;
  left: -1.25px;
  top: 0;
  width: 2.5px;
  height: 100%;
  border-radius: 1.25px;
  background: var(--ink);
}
.p-text .l { display: inline-block; white-space: pre; }
.p-text .mk { display: inline; }
/* The clicked word: the mark at its whole strength, as under the pointer. */
.p-text .mk.washed.active {
  background-color: var(--mark-hot);
  border-bottom-color: var(--mark-hot-edge);
  transition-duration: 160ms;
}
/* Scene 2 on: the block draws in out of a blur, the line and caret wait on it. */
.pscene[data-scene]:not([data-scene='0']) .p-wash {
  clip-path: inset(0 0 0 0 round var(--p-wash-r, 12px));
  filter: blur(0);
  opacity: 1;
}
.pscene[data-scene]:not([data-scene='0']) .p-ph { opacity: 0.2; }
/* Solid on each move, then the blink (product.js restarts .blink). */
.pscene[data-scene]:not([data-scene='0']) .p-caret { opacity: 1; }
.pscene[data-scene]:not([data-scene='0']) .p-caret.blink { animation: p-blink 1s step-end 220ms infinite; }
.pscene.drawer-open .p-caret.blink { animation: none; opacity: 0; }
@keyframes p-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
.pscene[data-scene='0'] .p-line { opacity: 0; transition: opacity 260ms ease-out; }
/* Moment 12's clear-out (page.js blurOut): the block's wash closes as it does
   back to the introduction while the letters blur away. */
.pscene.cleared[data-scene]:not([data-scene='0']) .p-wash {
  clip-path: inset(0 100% 0 0 round var(--p-wash-r, 12px));
  filter: blur(6px);
  opacity: 0;
}
.pscene.cleared[data-scene]:not([data-scene='0']) .p-ph { opacity: 0; }
/* The pseudo-elements too: the drawer's shade lifts its shadow off after
   the drawer's 340, and an at-once clear-out (react.js letOut) left it on
   the window's foot under the carousel's entrance (Pat 2026-11-09 16:07). */
.pscene.instant *,
.pscene.instant *::before,
.pscene.instant *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pscene *, .pscene { transition: none !important; }
  .p-caret { animation: none !important; opacity: 1 !important; }
}

/* The pointer: the Mac's own cursors (web/assets/cursors, from AppKit and
   the macOS 27 cursor PDFs), one shown at a time. product.js places it
   with the translate property about each one's hotspot, so the click's
   scale stays about the hotspot. The hands carry the system's shadow
   (their info.plist: blur 2, 1 down, 45% black); the arrow and the I-beam
   have theirs drawn in. */
.p-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 32px;
  height: 40px;
  opacity: 0;
}
.p-cursor.on { opacity: 1; }
.p-cursor > img {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.p-cursor > :is(.open, .closed) { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45)); }
.p-cursor[data-mode='arrow'] > .arrow,
.p-cursor[data-mode='beam'] > .beam,
.p-cursor[data-mode='open'] > .open,
.p-cursor[data-mode='closed'] > .closed { display: block; }

/* ---------------------------------------------------------------- the drawer
   The app's More info drawer with the Define face for "telepathy", ported
   from the app's own CSS (Pat 2026-11-08 03:11: the real drawer, chrome and
   widgets, not a likeness). Each block names the app file it comes from;
   values are the app's, resolved in both themes. The specs it was read from
   are the session's spec/ (drawer-shell, drawer-chrome, define-face,
   loading, gaps). Everything is scoped to .p-drawer and the tooltip .p-tip,
   so the page's own key cap and pills keep their rules. */

/* src/stage/solid-materials.css, tokens/*.css: the tokens the drawer reads. */
.p-drawer,
.p-drawer-shade,
.p-handle,
.p-tip,
.p-app {
  --color-surface: #f7f7f7;
  --color-active: #e6e6e6;
  --color-control: #e0e0e0;
  --color-hover: #dfdfdf;
  --color-selected: #d6d6d6;
  --color-raised: #f7f7f7;
  --color-line: #acacac;
  --color-muted: #6b6b6b;
  --color-ink: #101010;
  --color-hairline: #10101014;
  --color-page: #ffffff;
  --color-recess: #f1f1f1;
  --color-mark: #ceff0a59;
  --side-menu-well: #f1f1f1;
  --mix-surface-clear: #f7f7f700;
  --raise-rim: rgb(255 255 255 / 0.72);
  --soft-raise-rim: rgb(255 255 255 / 0.5);
  --raised-shadow: #00000024;
  --shadow-page: #1010100f;
  --recess-edge: #10101012;
  --shadow-recess: #10101017;
  --light-arrival: #ffffff;
  --skeleton-highlight: #f1f1f1;
  --ink-surface: #101010;
  --ink-surface-text: #f1f1f1;
  --key-cap-fill: #e6e6e6;
  --hover-legacy: #dfdfdf;
  --shadow-drawer-up: 0 -4px 12px oklch(0 0 0 / 0.07);
  --icon-grad: 0;
  --raise-shade: linear-gradient(180deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0.2) 45%, rgb(255 255 255 / 0) 65%, rgb(0 0 0 / 0.05) 85%, rgb(0 0 0 / 0.1) 100%);
  --bowl-shade: linear-gradient(180deg, rgb(0 0 0 / 0.12) 0%, rgb(255 255 255 / 0.21) 100%);
  --font-sans: 'ABC Favorit', system-ui, -apple-system, sans-serif;
  --icon-fill: 1;
  --icon-wght: 500;
  --motion-hover: 140ms;
  --motion-hover-in: 100ms;
  --motion-appear: 120ms;
  --motion-content-fade: 160ms;
  --motion-raise: 160ms;
  --motion-reflow: 240ms;
  --motion-press-lap: 250ms;
  --motion-reduced: 80ms;
  --ease-reflow: cubic-bezier(0.2, 0, 0, 1);
  --widget-inset: 16px;
  --list-bleed: 6px;
}
@media (prefers-color-scheme: dark) {
  .p-drawer,
  .p-drawer-shade,
  .p-handle,
  .p-tip,
  .p-app {
    --color-surface: #242424;
    --color-active: #353535;
    --color-control: #444444;
    --color-hover: #3c3c3c;
    --color-selected: #484848;
    --color-raised: #4a4a4a;
    --color-line: #505050;
    --color-muted: #9a9a9a;
    --color-ink: #f1f1f1;
    --color-hairline: #ffffff14;
    --color-page: #2c2c2c;
    --color-recess: #1e1e1e;
    --color-mark: #ceff0a30;
    --side-menu-well: color-mix(in srgb, #171717 50%, #242424);
    --mix-surface-clear: #24242400;
    --raise-rim: rgb(255 255 255 / 0.37);
    --soft-raise-rim: rgb(255 255 255 / 0.34);
    --raised-shadow: #00000066;
    --shadow-page: #00000040;
    --recess-edge: #ffffff14;
    --shadow-recess: #00000080;
    --light-arrival: #4b4b4b;
    --skeleton-highlight: #3c3c3c;
    --ink-surface: #444444;
    --key-cap-fill: #5e5e5e;
    --hover-legacy: #353535;
    --shadow-drawer-up: 0 -4px 12px oklch(0 0 0 / 0.25);
    --icon-grad: -25;
    --raise-shade: linear-gradient(180deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.065) 45%, rgb(255 255 255 / 0) 65%, rgb(0 0 0 / 0.1) 85%, rgb(0 0 0 / 0.2) 100%);
    --bowl-shade: linear-gradient(180deg, rgb(0 0 0 / 0.19) 0%, rgb(0 0 0 / 0) 45%, rgb(255 255 255 / 0.2) 100%);
  }
}
/* The tokens the later scenes' parts read besides (moments 6 to 13:
   margin.css, research.css, react.css, carousel.css, cards-*.css,
   demo.css), each with its dark value: src/stage/solid-materials.css
   (--soft-raise-shade, --on-ink-danger), tokens/motion.css (--ease-out,
   --motion-reveal-out). --solid-stage is the stage under the margin: the
   app's ground (#f1f1f1, #171717) is the site's radial there, so it is the
   radial's value beside the block. */
.p-drawer,
.p-tip,
.p-app {
  --soft-raise-shade: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 50%, rgb(0 0 0 / 0.045) 100%);
  --ease-out: ease-out;
  --motion-reveal-out: 120ms;
  --motion-swap: 200ms;
  --on-ink-danger: #ff5a3c;
  --solid-stage: #f8f8f8;
}
@media (prefers-color-scheme: dark) {
  .p-drawer,
  .p-tip,
  .p-app {
    --soft-raise-shade: linear-gradient(180deg, rgb(255 255 255 / 0.11) 0%, rgb(255 255 255 / 0.07) 45%, rgb(255 255 255 / 0) 70%, rgb(0 0 0 / 0.04) 100%);
    --solid-stage: #171717;
  }
}

/* The shell (MoreInfoDrawer.css:14-60): centred on the window, its foot on
   the window's foot, its height the drawn edge (--p-h on the scene, which
   product.js moves: 0 closed, the 56 peek row, then the handle's drag to
   the full view, 250 under the scene's top). The surface, 24 corners on
   top (28 at the peek), the drawer's up-shadow only while open; height and
   width move on the settle spring, and follow the pointer at once while
   the handle is held. */
.pscene { --p-top: 250px; --p-h: 0px; }
.board.phone .pscene { --p-top: 228px; }
.p-drawer {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 1104px;
  height: var(--p-h);
  overflow: clip;
  border-radius: 24px 24px 0 0;
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-ink);
  font-family: var(--font-sans);
  transform: translateX(-50%);
  transition:
    height var(--motion-drawer) var(--ease-settle),
    width var(--motion-drawer) var(--ease-settle),
    box-shadow 0s linear var(--motion-drawer);
}
.board.phone .p-drawer { width: 350px; }
.pscene.drawer-up .p-drawer {
  transition:
    height var(--motion-drawer) var(--ease-settle),
    width var(--motion-drawer) var(--ease-settle);
  pointer-events: auto;
}
.p-drawer[data-view='peek'] { border-radius: 28px 28px 0 0; }
/* The up-shadow, on its own layer under the drawer (product.js): the
   drawer's foot fade is a mask, which would clip a shadow of the drawer's
   own. The layer is the drawer's box and 24 more on each side and above,
   so its own fade clips nothing but the foot; the shadow fades with the
   drawer there. */
.p-drawer-shade {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: calc(var(--p-w, 1104px) + 48px);
  height: calc(var(--p-h) + 24px);
  transform: translateX(-50%);
  pointer-events: none;
  transition:
    height var(--motion-drawer) var(--ease-settle),
    width var(--motion-drawer) var(--ease-settle);
}
.board.phone .p-drawer-shade { width: calc(var(--p-w, 350px) + 48px); }
.p-drawer-shade::before {
  content: '';
  position: absolute;
  inset: 24px 24px 0;
  border-radius: 24px 24px 0 0;
  box-shadow: none;
  transition: box-shadow 0s linear var(--motion-drawer);
}
.pscene.drawer-up .p-drawer-shade::before {
  box-shadow: var(--shadow-drawer-up);
  transition: none;
}
.pscene:has(.p-drawer[data-view='peek']) .p-drawer-shade::before { border-radius: 28px 28px 0 0; }
.pscene:has(.p-drawer[data-view='full']) .p-drawer-shade {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--p-foot, 80px)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--p-foot, 80px)), transparent);
}
/* Held, the height follows the hand, but the width keeps its ease so the
   bump past 60% grows instead of jumping (the app's MoreInfoDrawer.css
   [data-dragging]; Pat 2026-11-08 14:19). */
.pscene.dragging .p-drawer-shade,
.pscene.dragging .p-drawer { transition: width var(--motion-drawer) var(--ease-settle); }
.pscene.dragging .p-handle,
.pscene.dragging .p-block { transition: none; }
/* The peek and the full view cross over 200 (drawer-view.ts): the one
   going out under the one coming in. */
.p-drawer > .moreinfo-scroll { transition: opacity 200ms ease-out; }
.p-drawer[data-view='peek'] > .moreinfo-scroll { opacity: 0; }
/* The faces not shown (drawer.js showFace): one face at a time, the one
   going out laid over the drawer for its 120 fade. */
.p-drawer > .moreinfo-scroll[hidden] { display: none; }
.p-drawer > .peek-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.p-drawer[data-view='peek'] > .peek-row { opacity: 1; pointer-events: auto; }

/* The peek row (peek-row.css:2-148, MoreInfoDrawer.css:215-285): 56 high,
   20 in on the left and 10 on the right, the face's name and its slash
   muted, the word in the title's 20/24, the status capsule, Keep and
   Expand. */
.p-drawer .peek-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px 0 20px;
  border-radius: 28px 28px 0 0;
  background: var(--color-surface);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.p-drawer .peek-row-lead { display: flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.p-drawer .peek-row-spacer { flex: 1 1 0; align-self: stretch; }
.p-drawer .peek-row-place,
.p-drawer .peek-row-slash {
  flex: 0 0 auto;
  color: var(--color-muted);
  font: 500 20px / 24px var(--font-sans);
}
.p-drawer .peek-row-here {
  flex: 0 1 auto;
  min-width: 0;
  margin: -4px;
  padding: 4px;
  overflow: clip;
  color: var(--color-ink);
  font: 500 20px / 24px var(--font-sans);
  letter-spacing: -0.2px;
}
.p-drawer .peek-row-trailing { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.p-drawer .peek-row-slot { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; }
.p-drawer .hb.peek-row-expand { --hb-glyph: var(--color-muted); }
.p-drawer .hb.peek-row-expand > .material-symbols-rounded { font-size: 20px; }
.p-drawer .moreinfo-peek-status {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-radius: 100px;
}
/* StatusCapsule (status-capsule.css): 36 high, the active fill, the line
   14/18 muted, the spinner in its 18 box 10 in and 6 before the line. */
.p-drawer .status-capsule {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 36px;
  overflow: hidden;
  border-radius: 100px;
  background-color: var(--color-active);
  color: var(--color-muted);
  font: 400 14px / 18px var(--font-sans);
}
.p-drawer .status-capsule-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px 0 10px;
  white-space: nowrap;
}
.p-drawer .status-capsule-glyph {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-muted);
}
@media (max-width: 560px) {
  .p-drawer .peek-row-place,
  .p-drawer .peek-row-slash { display: none; }
}

/* The handle (Stage.css:429-520): a 46 x 5 pill, muted, ink under the
   pointer and while held, 12 and 20 of padding around it, its foot 8 over
   the drawn edge; it rides with the drawer. Shown while the drawer is. */
.p-handle {
  position: absolute;
  left: 50%;
  bottom: calc(var(--p-h) + 8px);
  z-index: 3;
  display: flex;
  padding: 12px 20px;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    bottom var(--motion-drawer) var(--ease-settle),
    opacity 200ms ease-out;
}
.pscene.drawer-up .p-handle { opacity: 1; }
.p-handle .stage-handle-bar {
  display: block;
  width: 46px;
  height: 5px;
  border-radius: 100px;
  background: var(--color-muted);
}
.p-handle[data-hot] .stage-handle-bar { background: var(--color-ink); }
@media (prefers-color-scheme: dark) {
  .p-wash { background: var(--p-wash, rgb(255 255 255 / 0.05)); }
}

/* The scroller (MoreInfoDrawer.css:303-313): 12 above, the drawer's 20 a
   side, 32 below. Where the face is taller than the drawer (a phone, a
   short window) the page scrolls it (lab.js syncDrawer): it is no scroller
   of its own, so a scroll never stops at its end or jumps (Pat 2026-11-08
   13:03). */
.p-drawer .moreinfo-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: hidden;
  padding: 12px 20px calc(32px + var(--p-foot));
  box-sizing: border-box;
}
/* The drawer's foot fades to nothing over its last 80 (Pat 10:04): no hard
   edge as the page scrolls on to the next stage, and the band is the
   page's, not the drawer's: a scroll or a drag there moves the page (the
   foot lies over the scroller and is no scroller itself). The face scrolls
   its end clear of it. The peek row keeps its full body. */
.p-drawer { --p-foot: 80px; }
.p-drawer[data-view='full'] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--p-foot)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--p-foot)), transparent);
}
.p-drawer > .p-drawer-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  height: var(--p-foot);
}
.p-drawer[data-view='peek'] > .p-drawer-foot { display: none; }

/* src/fonts.css, primitives/glyph.css: glyphs are text in the symbols face. */
.p-drawer .material-symbols-rounded,
.p-tip .material-symbols-rounded,
.p-app .material-symbols-rounded {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'FILL' var(--icon-fill), 'wght' var(--icon-wght), 'GRAD' var(--icon-grad), 'opsz' 24;
  font-feature-settings: 'liga' 1;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.p-drawer .glyph,
.p-app .glyph {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--glyph-size);
  height: var(--glyph-size);
  font-size: var(--glyph-size);
  overflow: hidden;
  color: inherit;
}
.p-drawer .glyph[data-size='12'],
.p-app .glyph[data-size='12'] { --glyph-size: 12px; }
.p-drawer .glyph[data-size='16'],
.p-app .glyph[data-size='16'] { --glyph-size: 16px; }
.p-drawer .glyph[data-size='18'],
.p-app .glyph[data-size='18'] { --glyph-size: 18px; }
.p-drawer .glyph[data-size='20'],
.p-app .glyph[data-size='20'] { --glyph-size: 20px; }
.p-drawer [data-component='tooltip-trigger'] { display: inline-flex; }
.p-drawer button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* -------------------------------------------------- the header
   (FaceHeader.css, header-row.css, HeadingDivider.css) */
.p-drawer .face-header-bar {
  position: sticky;
  top: -12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: -12px -20px 4px;
  background: var(--color-surface);
}
.p-drawer .header-row {
  container: header-row / inline-size;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  background: var(--color-surface);
}
.p-drawer .header-row-lead {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: clip;
  isolation: isolate;
}
.p-drawer .header-row-title {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.p-drawer .header-row-lead > .header-row-title ~ * { flex-shrink: 1000000; }
.p-drawer .header-row-place {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: 500 20px / 24px var(--font-sans);
  letter-spacing: -0.2px;
  text-overflow: ellipsis;
  cursor: default;
}
.p-drawer .header-row-title > .title-chevron { flex-shrink: 0; }
/* The gloss, 8 after the chevron (FaceHeader.css:122-134; the lead's 10 gap
   taken back by header-row.css:72-74). */
.p-drawer .face-head-beside {
  min-width: 0;
  margin-left: -10px;
  padding-left: 8px;
  overflow: hidden;
  font: 400 20px / 24px var(--font-sans);
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-drawer .face-head-beside[hidden] { display: none; }
.p-drawer .header-row-trailing {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
@container header-row (max-width: 520px) {
  .p-drawer .header-row-trailing > .history-capsule,
  .p-drawer .header-row-trailing > .face-header-export { display: none; }
}
.p-drawer .heading-divider {
  position: relative;
  flex-shrink: 0;
  height: 1px;
  background: var(--color-hairline);
  overflow: clip;
}
.p-drawer .heading-divider[data-loading]::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(to right, transparent 0, var(--color-muted) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: p-divider-sweep 1.25s ease-in-out infinite;
}
@keyframes p-divider-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

/* -------------------------------------------------- the button kit .hb
   (src/ui/header-button.css): flat at rest; under the pointer the raise
   (hover fill, the top rim, the raise shade), in over 100 and out over
   140; pressed ink with the label in surface and the bowl, at once. */
@property --hb-glyph {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}
@property --hb-dim {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.p-drawer .hb {
  --hb-fill: var(--color-active);
  --hb-label: var(--color-ink);
  --hb-glyph: var(--color-ink);
  --hb-hover-motion: var(--motion-hover);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 100px;
  background-color: var(--hb-fill);
  background-image: none;
  color: var(--hb-label);
  font: 500 14px / 18px var(--font-sans);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  transition:
    background-color var(--hb-hover-motion) ease-out,
    box-shadow var(--hb-hover-motion) ease-out,
    color var(--hb-hover-motion) ease-out,
    --hb-glyph var(--hb-hover-motion) ease-out,
    --hb-dim var(--motion-raise) ease-out;
}
@media (hover: hover) {
.p-drawer .hb:hover { --hb-hover-motion: var(--motion-hover-in); }
}
.p-drawer .hb > .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--hb-glyph);
  opacity: var(--hb-dim);
}
.p-drawer .hb[data-shape='circle'] { width: 36px; padding: 0; }
.p-drawer .hb-capsule {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border-radius: 100px;
  background: var(--color-active);
}
.p-drawer .hb-capsule .hb {
  --hb-fill: transparent;
  --hb-glyph: var(--color-muted);
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
}
@media (hover: hover) {
.p-drawer .hb:hover:not(:active, :disabled, [aria-expanded='true']) {
  --hb-glyph: var(--color-ink);
  background-color: var(--color-hover);
  box-shadow: inset 0 1px 0 var(--raise-rim);
}
}
.p-drawer .hb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--raise-shade);
  opacity: 0;
  transition: opacity var(--hb-hover-motion) ease-out;
}
@media (hover: hover) {
.p-drawer .hb:hover:not(:active, :disabled, [aria-expanded='true'])::before { opacity: 1; }
}
.p-drawer .hb:active:not(:disabled)::before { opacity: 0; transition: none; }
.p-drawer .hb:active:not(:disabled) {
  --hb-label: var(--color-surface);
  --hb-glyph: var(--color-surface);
  background-color: var(--color-ink);
  box-shadow: none;
  transition: none;
}
.p-drawer .hb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--bowl-shade);
  opacity: 0;
  transition: opacity var(--hb-hover-motion) ease-out;
}
.p-drawer .hb:active:not(:disabled)::after { opacity: 1; transition: none; }
.p-drawer .hb:disabled {
  --hb-dim: 0.4;
  color: color-mix(in srgb, var(--hb-label) 40%, transparent);
}
.p-drawer .hb.title-chevron {
  --hb-fill: transparent;
  --hb-glyph: var(--color-muted);
  width: 26px;
  min-width: 26px;
  height: 26px;
}
.p-drawer .hb:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.p-drawer .hb-capsule .hb:focus-visible { outline-offset: -2px; }

/* PressLap (src/ui/rings/rings.css): one lap of a line round the control
   on each press, over 250, ink; none under reduced motion. */
@property --ring-lap {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.p-drawer .ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--color-ink);
  animation: p-ring-sweep var(--motion-press-lap) cubic-bezier(0.33, 1, 0.68, 1) both;
}
.p-drawer .ring-dash {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-dashoffset: calc(var(--ring-behind) + var(--ring-length) - var(--ring-start, 0) - var(--ring-lap));
  opacity: calc(var(--ring-strength) * clamp(0, (var(--ring-lap) - var(--ring-behind)) / var(--ring-length), 1));
}
@keyframes p-ring-sweep {
  0% { --ring-lap: 0; opacity: 1; }
  65% { opacity: 1; }
  100% { --ring-lap: 1; opacity: 0; }
}

/* -------------------------------------------------- the face's grid
   (face-body.css, faces-grid.css): 20 under the header, cells placed by
   the grid's pack, a widget's arrival 0.96 to 1 over 240 on the reflow
   curve (product.js). */
.p-drawer .face-body { position: relative; padding-top: 20px; }
.p-drawer .faces-grid {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  transition: height var(--motion-reflow) var(--ease-reflow);
}
.p-drawer .faces-grid-cell {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Placed in px (product.js layout), so they ease with the drawer's width
     as the app's grid tracks stretch with it. */
  transition:
    left var(--motion-drawer) var(--ease-settle),
    width var(--motion-drawer) var(--ease-settle);
}
.p-drawer .faces-grid-cell > * { flex: 1 1 auto; min-height: 0; }
.p-drawer .faces-grid-cell[hidden] { display: none; }

/* -------------------------------------------------- the widget shell
   (src/ui/faces/widget.css) */
.p-drawer .faces-widget {
  --widget-above: calc(var(--widget-inset) + 20px + 12px);
  --fade-fill: var(--side-menu-well);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: 100%;
  padding: var(--widget-inset);
  border-radius: 16px;
  overflow: clip;
  will-change: transform;
  isolation: isolate;
  background: var(--fade-fill);
  outline: none;
}
.p-drawer .faces-widget[data-action='true'] { transition: background-color var(--motion-hover) ease-out; }
@media (hover: hover) {
.p-drawer .faces-widget[data-action='true']:hover {
  --fade-fill: var(--color-active);
  transition-duration: var(--motion-hover-in);
}
}
.p-drawer .faces-widget[data-action='true']:active { --fade-fill: var(--color-hover); transition: none; }
.p-drawer .faces-widget-head {
  position: relative;
  z-index: 3;
  will-change: transform;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  flex-shrink: 0;
}
.p-drawer .faces-widget-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
  color: var(--color-muted);
}
.p-drawer .faces-widget-kind > .faces-widget-glyph { --icon-wght: 400; }
.p-drawer .eyebrow {
  margin: 0;
  font: 500 13px / 16px var(--font-sans);
  color: var(--color-muted);
}
.p-drawer .faces-widget-eyebrow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-drawer .faces-widget-badge {
  position: relative;
  display: grid;
  place-items: center end;
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  color: var(--color-muted);
}
.p-drawer .faces-widget-badge[hidden] { display: none; }
.p-drawer .faces-widget-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 12px;
  min-height: 0;
  font: 400 14px / 20px var(--font-sans);
}
.p-drawer .faces-widget-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: inherit;
  min-height: 0;
}
/* Arriving: the frame and head alone for the loading look's 240, then the
   content fades in over 160 (Widget.tsx; fade-across.ts). */
.p-drawer .faces-widget[data-phase='frame'] .faces-widget-content { visibility: hidden; }
.p-drawer .faces-widget-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.p-drawer .faces-widget-light > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--light-arrival) 50%, transparent 100%);
  mix-blend-mode: lighten;
  opacity: 0;
  transform: translateX(-100%);
}
/* The source marks wait under the loading look and fade in as it lands
   (widget.css:388-421). */
.p-drawer .faces-widget .faces-widget-badge .chip-mark:not([data-kind='count']) {
  transition: opacity var(--motion-content-fade) ease-out, visibility 0s linear 0s;
}
.p-drawer .faces-widget[data-marks='waiting'] .faces-widget-badge .chip-mark:not([data-kind='count']) {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-content-fade) ease-out, visibility 0s linear var(--motion-content-fade);
}

/* Chip / Mark (primitives/chip.css): 16 high, 12/16 Medium muted on active. */
.p-drawer .chip-mark {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 16px;
  min-width: 16px;
  max-width: 100%;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 100px;
  background: var(--color-active);
  color: var(--color-muted);
  font: 500 12px / 16px var(--font-sans);
  white-space: nowrap;
  cursor: default;
  outline: none;
}
.p-drawer .chip-mark[data-kind='count'] { font-weight: 400; font-variant-numeric: tabular-nums; }
.p-drawer .chip-mark-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Fades (primitives/fade-edge.css): from the fill to clear over 24. */
.p-drawer .fade-edge-fade {
  --fade-depth: 24px;
  --fade-color: var(--fade-fill, var(--color-surface));
  --fade-clear: color-mix(in srgb, var(--fade-color) 0%, transparent);
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-hover) ease-out;
}
.p-drawer .fade-edge-fade[data-size='40'] { --fade-depth: 40px; }
.p-drawer .fade-edge-fade:is([data-edge='top'], [data-edge='bottom']) { right: 0; left: 0; height: var(--fade-depth); }
.p-drawer .fade-edge-fade:is([data-edge='start'], [data-edge='end']) { top: 0; bottom: 0; width: var(--fade-depth); }
.p-drawer .fade-edge-fade[data-edge='top'] { top: 0; background: linear-gradient(to top, var(--fade-clear), var(--fade-color)); }
.p-drawer .fade-edge-fade[data-edge='bottom'] { bottom: 0; background: linear-gradient(to bottom, var(--fade-clear), var(--fade-color)); }
.p-drawer .fade-edge-fade[data-shown='true'] { opacity: 1; transition-duration: var(--motion-hover-in); }
.p-drawer .faces-widget > .fade-edge-fade[data-edge='bottom'] { z-index: 1; }
/* The head's fade (widget.css): solid through the head, clear by the gap
   under it, so what scrolls under the head never shows behind it. */
.p-drawer .faces-widget > .faces-widget-fade { will-change: opacity; }
.p-drawer .faces-widget > .faces-widget-fade[data-edge='top'] {
  z-index: 1;
  height: var(--widget-above);
  background: linear-gradient(
    to bottom,
    var(--fade-color) calc(var(--widget-above) - 16px),
    var(--fade-clear) calc(var(--widget-above) - 4px)
  );
}

/* -------------------------------------------------- the answer band
   (widgets/answer-band.css; the reading from the writing,
   editor/spark/DefineEntry.css:200-244). No fill of its own: it reads on
   the drawer's surface. */
.p-drawer .answer-band {
  --fade-fill: var(--color-surface);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-width: 0;
}
.p-drawer .answer-pane { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.p-drawer .answer-scroll { display: flex; flex-direction: column; gap: 12px; height: 100%; overflow: hidden; }
.p-drawer .answer-main { position: relative; max-width: 524px; }
.p-drawer .answer-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-drawer .define-context-synthesis {
  max-width: 728px;
  margin: 0;
  font: 300 20px / 30px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer .define-cite {
  font-size: 0.66em;
  line-height: 0;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.p-drawer .define-cite button {
  margin: calc(-7em / 11) 0;
  padding: 0 2px;
  border: none;
  border-radius: 4px;
  background: none;
  font: inherit;
  line-height: calc(14 / 11);
  color: var(--color-muted);
  cursor: pointer;
  transition:
    color var(--motion-hover) ease-out,
    background-color var(--motion-hover) ease-out;
}
@media (hover: hover) {
.p-drawer .define-cite button:hover { color: var(--color-ink); background: var(--hover-legacy); }
}
.p-drawer .define-cite-sep { color: var(--color-muted); }
.p-drawer .answer-loading { display: flex; flex-direction: column; gap: 9px; }
.p-drawer .answer-loading[hidden] { display: none; }
.p-drawer .answer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  flex-shrink: 0;
}
.p-drawer .answer-meta-start,
.p-drawer .answer-meta-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.p-drawer .answer-meta-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 100px;
  background-color: var(--color-active);
  font: 400 14px / 20px var(--font-sans);
  color: var(--color-ink);
  white-space: nowrap;
  cursor: default;
  transition:
    background-color var(--motion-hover) ease-out,
    color var(--motion-hover) ease-out;
}
@media (hover: hover) {
.p-drawer .answer-meta-item:hover { background-color: var(--color-hover); transition-duration: var(--motion-hover-in); }
}
.p-drawer .answer-meta-item:active { background-color: var(--color-ink); color: var(--color-surface); transition: none; }
.p-drawer .answer-meta-item .material-symbols-rounded {
  font-size: 18px;
  color: var(--color-muted);
  transition: color var(--motion-hover) ease-out, opacity var(--motion-content-fade) ease-out;
}
@media (hover: hover) {
.p-drawer .answer-meta-item:hover .material-symbols-rounded { color: var(--color-ink); transition-duration: var(--motion-hover-in); }
}
.p-drawer .answer-meta-item:active .material-symbols-rounded { color: var(--color-surface); transition: none; }
.p-drawer .answer-meta-glyph {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.p-drawer .answer-meta-glyph[data-busy='true'] > .material-symbols-rounded { opacity: 0; }
.p-drawer .answer-meta-glyph > .ray-spinner { position: absolute; top: 1px; left: 1px; }
/* Presence (Presence.tsx): an item comes and goes over 160, its width with
   it. */
.p-drawer .faces-presence {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  transition:
    max-width var(--motion-content-fade) ease-out,
    opacity var(--motion-content-fade) ease-out,
    margin-left var(--motion-content-fade) ease-out;
  max-width: 240px;
}
.p-drawer .faces-presence[data-gone] { max-width: 0; opacity: 0; margin-left: -8px; }

/* The ray spinner (ray-spinner.css): 12 rays, a step a twelfth of a turn,
   muted; it fades in over 120. */
.p-drawer .ray-spinner {
  display: block;
  flex: 0 0 auto;
  color: var(--color-muted);
  shape-rendering: geometricPrecision;
  transform-origin: 50% 50%;
  animation: p-ray-turn 1s steps(12, end) infinite;
  transition: opacity var(--motion-appear) ease-out;
}
@starting-style { .p-drawer .ray-spinner { opacity: 0; } }
.p-drawer .ray-spinner line { stroke: currentColor; stroke-linecap: round; fill: none; }
.p-drawer .ray-spinner[data-leaving] { opacity: 0; transition-duration: 996ms; }
@keyframes p-ray-turn { to { transform: rotate(360deg); } }

/* The Lines skeleton (Widget.tsx SkeletonShape, skeleton.css): a 50% x 20
   title on 10, then five 12 bars on 5, 8 apart, in the skeleton's fill
   with skullet's slow shimmer (one band of the highlight at 110deg, 320
   wide in an 800 period, 1.49 s a loop). */
.p-drawer .faces-skeleton-shape { display: flex; flex-direction: column; gap: 8px; }
.p-drawer .faces-skeleton {
  display: block;
  flex-shrink: 0;
  height: 12px;
  max-width: 100%;
  border-radius: 5px;
  background-color: var(--color-active);
  background-image: repeating-linear-gradient(
    110deg,
    transparent 0px,
    color-mix(in srgb, var(--skeleton-highlight) 25%, transparent) 90px,
    color-mix(in srgb, var(--skeleton-highlight) 75%, transparent) 181px,
    var(--skeleton-highlight) 272px,
    color-mix(in srgb, var(--skeleton-highlight) 50%, transparent) 296px,
    transparent 320px,
    transparent 800px
  );
  background-size: 851px 100%;
  background-repeat: repeat-x;
  animation: p-shimmer 1490ms linear infinite;
}
.p-drawer .faces-skeleton-title { height: 20px; margin-bottom: 8px; border-radius: 10px; }
@keyframes p-shimmer {
  from { background-position: 0 0; }
  to { background-position: 851px 0; }
}

/* -------------------------------------------------- In your writing
   (widgets/documents-widget.css) */
.p-drawer .docs-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.p-drawer .docs-body[data-size='2x1'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  column-gap: 16px;
}
.p-drawer .docs-stack { position: relative; flex-shrink: 0; height: 116px; }
.p-drawer .docs-body[data-size='2x1'] > .docs-stack { align-self: center; margin-top: -16px; margin-left: 12px; }
.p-drawer .docs-page-top {
  --docs-lift: var(--motion-hover);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 196px;
  height: 104px;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  background: var(--color-page);
  text-align: left;
  color: inherit;
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--color-hairline), 0 1px 3px var(--shadow-page);
  transform-origin: top left;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    top var(--motion-reflow) var(--ease-reflow),
    width var(--motion-reflow) var(--ease-reflow),
    transform var(--motion-reflow) var(--ease-reflow),
    opacity var(--motion-reflow) var(--ease-reflow),
    visibility 0s linear 0s,
    scale var(--docs-lift) ease-out,
    translate var(--docs-lift) ease-out,
    background-color var(--docs-lift) ease-out,
    box-shadow var(--docs-lift) ease-out;
}
.p-drawer .docs-page-top[data-state='front'] { z-index: 3; }
.p-drawer .docs-page-top[data-state='behind'] { z-index: 2; top: 2px; width: 188px; transform: rotate(1deg); pointer-events: none; }
.p-drawer .docs-page-top:is([data-state='back'], [data-state='next']) { z-index: 1; top: 3px; width: 188px; transform: rotate(2.5deg); pointer-events: none; }
.p-drawer .docs-page-top[data-state='gone'] { z-index: 4; transform: translateY(12px) scale(1.08); }
.p-drawer .docs-page-top:is([data-state='gone'], [data-state='next']) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s, 0s, 0s, var(--motion-reflow), 0s, 0s, 0s, 0s;
}
@media (hover: hover) {
.p-drawer .docs-page-top[data-state='front']:hover {
  --docs-lift: var(--motion-hover-in);
  scale: 1.02;
  translate: -1% -1%;
  background-color: color-mix(in srgb, var(--color-page) 95%, #fff);
  box-shadow: inset 0 0 0 1px var(--color-hairline), 0 1px 3px var(--shadow-page), 0 4px 10px var(--shadow-page);
}
}
.p-drawer .docs-page-top > * { opacity: 0; transition: opacity calc(var(--motion-reflow) / 2) var(--ease-reflow); }
.p-drawer .docs-page-top[data-state='front'] > * { opacity: 1; transition-delay: calc(var(--motion-reflow) / 2); }
.p-drawer .docs-page-title {
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 13px / 16px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer .docs-page-crumb {
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12px / 16px var(--font-sans);
  color: var(--color-muted);
}
.p-drawer .docs-page-passage {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 400 13px / 18px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer .docs-page-term { padding: 0 3px; border-radius: 4px; background: var(--color-mark); }
.p-drawer .docs-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.p-drawer .docs-months { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; margin-block: auto; }
.p-drawer .docs-months-caption,
.p-drawer .docs-months-ends { font: 400 12px / 16px var(--font-sans); color: var(--color-muted); }
.p-drawer .docs-months-caption { overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.p-drawer .docs-months-ticks { display: flex; align-items: flex-end; gap: 6px; width: 248px; max-width: 100%; height: 40px; }
.p-drawer .docs-month { display: flex; flex: 0 0 15px; align-items: flex-end; height: 100%; }
.p-drawer .docs-month > [data-component='tooltip-trigger'] { display: flex; align-items: flex-end; height: 100%; }
.p-drawer .docs-month-tick { display: block; width: 15px; height: 2px; border-radius: 1px; background: var(--color-control); }
.p-drawer .docs-month-tick[data-mentioned='true'] { border-radius: 2px; background: var(--color-ink); }
.p-drawer .docs-months-ends { display: flex; justify-content: space-between; width: 248px; max-width: 100%; }
.p-drawer .docs-foot { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; }
.p-drawer .docs-months + .docs-foot { margin-top: 0; }
.p-drawer .docs-foot > .docs-next { font-weight: 400; }
/* A phone: one column, where the 2x1's month strip has no room; the page
   stack centres over its foot, as the code draws a 2x1 with no chart
   (documents-widget.css data-chart="none"). */
.p-drawer .faces-grid[data-columns='1'] .docs-body[data-size='2x1'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 8px;
}
.p-drawer .faces-grid[data-columns='1'] .docs-body[data-size='2x1'] > .docs-stack { justify-self: center; width: 196px; margin-left: 0; }
.p-drawer .faces-grid[data-columns='1'] .docs-months { display: none; }

/* -------------------------------------------------- Origin
   (widgets/define-widgets.css:1-135) */
.p-drawer .origin-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.p-drawer .origin-takeaway {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 16px / 22px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer .origin-edges { position: relative; margin-top: auto; margin-bottom: 46px; }
.p-drawer .origin-run { display: flex; overflow: hidden; }
.p-drawer .origin-line { position: relative; display: flex; align-items: flex-start; flex: 1 0 auto; min-width: 100%; }
.p-drawer .origin-line::before {
  content: '';
  position: absolute;
  top: calc(22px + 8px + 10px / 2 - 0.5px);
  left: 3.5px;
  right: 3.5px;
  height: 1px;
  background: var(--color-line);
}
.p-drawer .origin-stage { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; }
.p-drawer .origin-stage:first-child { align-items: flex-start; }
.p-drawer .origin-stage:last-child:not(:first-child) { align-items: flex-end; }
.p-drawer .origin-word { font: 400 16px / 22px var(--font-sans); white-space: nowrap; color: var(--color-muted); }
.p-drawer .origin-stage[data-today='true'] .origin-word { font-weight: 500; color: var(--color-ink); }
.p-drawer .origin-dot { display: flex; align-items: center; justify-content: center; height: 10px; margin: 8px 0 6px; }
.p-drawer .origin-dot::before {
  content: '';
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--color-muted);
  border-radius: 100px;
  background: var(--fade-fill, var(--color-surface));
}
.p-drawer .origin-stage[data-today='true'] .origin-dot::before { width: 10px; height: 10px; border: 0; background: var(--color-ink); }
.p-drawer .origin-language { font: 500 12px / 16px var(--font-sans); white-space: nowrap; color: var(--color-muted); }
.p-drawer .origin-change {
  display: flex;
  flex: 1 0 64px;
  justify-content: center;
  margin-top: 10px;
  padding: 0 8px;
  font: 500 12px / 16px var(--font-sans);
  white-space: nowrap;
  color: var(--color-muted);
}

/* -------------------------------------------------- Dictionary differs, the
   2x1 split (widgets/sources-differ-widget.css): the reading and the
   dictionary side by side, each column scrolling on its own under a 24
   bottom fade, parted by a rule in the line colour. */
.p-drawer .differs-split {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  margin: calc(-1 * var(--widget-above)) calc(-1 * var(--widget-inset)) calc(-1 * var(--widget-inset));
}
.p-drawer .differs-split-edges { position: relative; min-height: 0; }
.p-drawer .differs-split-edges + .differs-split-edges { border-left: 1px solid var(--color-line); }
.p-drawer .differs-split-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: var(--widget-above) 16px var(--widget-inset) var(--widget-inset);
  overflow: hidden;
}
.p-drawer .differs-split-edges + .differs-split-edges > .differs-split-column { padding-right: var(--widget-inset); padding-left: 16px; }
.p-drawer .differs-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p-drawer .differs-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  color: var(--color-ink);
  cursor: default;
  transition: background-color var(--motion-hover) ease-out, box-shadow var(--motion-hover) ease-out;
}
@media (hover: hover) {
.p-drawer .differs-value:hover {
  background-color: var(--color-active);
  box-shadow: 0 0 0 var(--list-bleed) var(--color-active);
  transition-duration: var(--motion-hover-in);
}
}
.p-drawer .differs-value-text { display: block; min-width: 0; overflow-wrap: anywhere; font: 400 18px / 24px var(--font-sans); }
.p-drawer .differs-value > .differs-mark { order: -1; flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------- Related
   (widgets/related-widget.css:1-155) */
.p-drawer .related-body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.p-drawer .related-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; align-content: start; }
.p-drawer .related-column { display: flex; flex-direction: column; min-width: 0; }
.p-drawer .related-face,
.p-drawer .related-glyph {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background-color: var(--color-active);
  color: var(--color-muted);
  font: 500 12px / 1 var(--font-sans);
}
.p-drawer .related-glyph > .glyph { --icon-wght: 400; }
.p-drawer .related-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background-color var(--motion-hover) ease-out;
}
@media (hover: hover) {
.p-drawer .related-row:hover { background-color: var(--color-active); transition-duration: var(--motion-hover-in); }
}
.p-drawer .related-row-press {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: default;
}
.p-drawer .related-row-press::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.p-drawer .related-row-words { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.p-drawer .related-row-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 14px / 18px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer .related-row-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12px / 16px var(--font-sans);
  color: var(--color-muted);
}

/* -------------------------------------------------- Sources, the 1x1
   (widgets/sources-widget.css): the first five discs, overlapping 6, on
   the raised fill with the soft raise, the lines under them. */
.p-drawer .sources-compact {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
}
.p-drawer .sources-stack { display: flex; }
.p-drawer .sources-disc {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-raised);
  box-shadow: inset 0 1px 0 var(--soft-raise-rim), 0 1px 3px var(--raised-shadow);
  font: 500 13px / 16px var(--font-sans);
  color: var(--color-ink);
}
.p-drawer .sources-disc + .sources-disc { margin-left: -6px; }
.p-drawer .sources-disc > .material-symbols-rounded { color: var(--color-muted); }
.p-drawer .sources-lines { display: flex; flex-direction: column; align-items: center; font: 400 12px / 16px var(--font-sans); color: var(--color-muted); }

/* -------------------------------------------------- the tooltip
   (src/ui/tooltip.css, KeyCaps): ink, 14/18, 8 by 12, radius 10, its tail
   12 x 9 with the apex rounded; in from 0.97 over 120, out toward its
   trigger over 120 ease-in. It lives in the scene, in the board's units. */
.p-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.p-tip[data-measure] { visibility: hidden; }
.p-tip[hidden] { display: none; }
.p-tip-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink-surface);
  color: var(--ink-surface-text);
  font: 400 14px / 18px var(--font-sans);
  max-width: 280px;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.p-tip-tail { width: 12px; height: 9px; background: var(--ink-surface); }
.p-tip-tail[data-edge='top'] { clip-path: path('M 12 9 L 0 9 L 4.3359 2.4962 A 2 2 0 0 1 7.6641 2.4962 Z'); }
.p-tip-tail[data-edge='bottom'] { clip-path: path('M 0 0 L 12 0 L 7.6641 6.5038 A 2 2 0 0 1 4.3359 6.5038 Z'); }
.p-tip .key-caps { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; margin-left: 8px; }
.p-tip .key-cap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--key-cap-fill);
  font: 500 14px / 20px var(--font-sans);
  color: var(--color-ink);
  text-align: center;
}
.p-tip .key-cap > .material-symbols-rounded { font-size: 16px; }
.p-tip .key-cap:has(> .material-symbols-rounded) { padding-inline: 4px; }
.p-tip .cite-preview { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.p-tip .cite-preview-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.6; }
.p-tip:has(.cite-preview) .p-tip-body { max-width: 360px; }

/* Reduce Motion: the end states, the fades at 80 and no moves
   (the app's reduced-motion rules across these files). */
@media (prefers-reduced-motion: reduce) {
  .p-drawer *,
  .p-drawer *::before,
  .p-drawer *::after {
    animation: none !important;
  }
  .p-drawer .heading-divider[data-loading]::after { width: 100%; transform: none; opacity: 0.4; }
  .p-drawer .ring { display: none; }
  .p-drawer .docs-page-top[data-state='front']:hover { scale: none; translate: none; }
}

/* The grid's places (FacesGrid.tsx, grid-pack.ts): each cell's box and the
   grid's height are set by product.js layout() from the drawer's width;
   the grid is the band's 254 until the content lands. */
.p-drawer .faces-grid { height: 254px; }
.p-drawer .hb:disabled { pointer-events: none; }
.p-drawer { cursor: default; -webkit-user-select: none; user-select: none; }

/* One column folds the meta row's words to their glyphs where they would
   collide (AnswerBand.tsx narrow; answer-band.css .answer-meta-words). */
.p-drawer .answer-meta-words {
  display: inline-block;
  overflow: hidden;
  transition: max-width var(--motion-content-fade) ease-out, margin-left var(--motion-content-fade) ease-out, opacity var(--motion-content-fade) ease-out;
}
.p-drawer .faces-grid[data-columns='1'] .answer-meta-start .answer-meta-words { max-width: 0; margin-left: -4px; opacity: 0; }
.p-drawer .related-row-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Export's glyph sits a point high in its well (the app's ios_share nudge). */
.p-drawer [data-action='export'] > .material-symbols-rounded { translate: 0 -1px; }