/* ========== MESHOPTIMISER SITE ==========
   The look of the app's own site (apps/meshoptimiser/*.html, written by
   tools/build-app-site.js). It stands apart from the portfolio and takes
   its tokens from the app itself: one near-black, floating surfaces a tone
   up, one accent, Inter at regular and medium weight, text never pure
   white. No gradients, glows or glass. Script: site.js. */

:root {
  --bg: #131314;
  --surface: #19191a;
  --surface-2: #212123;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --tx: #e6e6e8;
  --tx-2: #a3a3a8;
  --tx-3: #6e6e72;
  --art-line: #77777c;                /* the outline of the small drawings on the cards and clips (the dim part is --art-dim, set where it is drawn) */
  --accent: #0d99ff;
  --accent-hover: #3aadff;
  --claude: #d97757;              /* Claude's own orange: its tile, its band and its page */
  /* The app's own colour for each kind of function (palette-data.json), so the site speaks in the colours of the app: */
  --fn-file: #4db5ff; --fn-view: #35c9c0; --fn-selection: #a78bfa; --fn-edit: #fbbf24; --fn-part: #10b981; --fn-library: #fb923c;
  --soon: #f5a524;                /* Coming soon: amber, so it is never mistaken for a button */
  --new: #5fd3a0;
  --fix: #f58a9c;
  --perf: #f1b561;
  --polish: #c79bf7;
  --refactor: #86b3f8;
  --r: 18px;
  --r-s: 10px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --max: 1240px;
  --bar-h: 60px;
  --band: clamp(72px, 9vw, 136px);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 24px); scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font: 400 15px/1.6 var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, strong, b { font-weight: 500; }
h1, h2 { font-weight: 300; }
dt { font-weight: 400; }
i, em { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 8px 14px; border-radius: var(--r-s); background: var(--surface-2); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- the bar: the app's name, its pages, and the way to get it ---- */
.bar { position: sticky; top: 0; z-index: 20; background: none; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }      /* (it leaves slowly, after a beat; it comes back at once, below) */
html:not(.bar-away) .bar { transition-duration: 0.3s; transition-delay: 0s; }
html.bar-away .bar { transform: translateY(-130%); pointer-events: none; }      /* (the bar leaves on the way down and returns on the way up: site.js) */
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
/* no bar behind the menu: on scroll the menu, the name and the button float over the page, the menu as a pill with its own glass */
.bar .nav, .bar .brand { transition: background-color 0.25s ease, box-shadow 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease; }
.bar.is-scrolled .nav { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 30px rgba(0, 0, 0, 0.35); }
.bar.is-scrolled .brand { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 30px rgba(0, 0, 0, 0.35); }
.bar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px; height: var(--bar-h); max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.bar .brand { justify-self: start; margin: -6px 0 -6px -7px; padding: 6px 14px 6px 7px; border-radius: 999px; }
.brand img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-strong); transition: border-radius 0.3s ease; }
.bar.is-scrolled .brand img { border-radius: 50%; }
/* at the very top of the page the menu has no pill around it (on a phone it is a dropdown and keeps its panel) */
@media (min-width: 761px) { .bar:not(.is-scrolled) .nav { background: transparent; box-shadow: none; } }
.brand i {
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--tx));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.nav a { padding: 6px 14px; border-radius: 999px; color: var(--tx-2); font-size: 14px; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.nav a:hover { color: var(--tx); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.nav-out { display: inline-flex; align-items: center; gap: 7px; }
.nav-out svg { width: 14px; height: 14px; flex: none; }
.btn-gh { gap: 8px; }
.btn-gh svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 761px) { .nav .nav-out { display: none; } }          /* on a wide screen GitHub is the button under the title on the home page; in the phone menu it stays a link */
.nav a[aria-current] { color: var(--tx); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bar-get { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.bar-get svg { width: 16px; height: 16px; flex: none; }
.bar-menu { display: none; }

/* ---- buttons and links ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--tx);
  font: 500 14px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.btn:hover { background: #28282b; }
.btn.is-primary { background: var(--accent); color: #fff; }
.btn.is-primary:hover { background: var(--accent-hover); }
.btn.is-large { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.more { color: var(--tx-2); font-size: 14px; text-decoration: none; white-space: nowrap; transition: color 0.15s ease; }
.more::after { content: ' →'; }
.more:hover { color: var(--tx); }
.actions .more { margin-left: 8px; }

/* ---- type ---- */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--tx-3); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.kicker b { color: var(--line-strong); font-weight: 400; }
/* The type scale. Inter: 11, 12, 14, 15, 17, 20 px; mono: 12 px; Fraunces: the four fluid sizes below and 21 px for caption titles.
   Fluid sizes are rounded to whole pixels. */
:root { --t-lead: round(clamp(17px, 1.5vw, 20px), 1px); --t-title: round(clamp(22px, 2.2vw, 30px), 1px); --t-figure: round(clamp(26px, 2.8vw, 40px), 1px); --t-section: round(clamp(30px, 3.6vw, 48px), 1px); }
:root { --head-size: round(clamp(40px, 6.6vw, 88px), 1px); }      /* the size of an h1, and of the headline of a section */
h1 { font-size: var(--head-size); line-height: 1.0; letter-spacing: -0.045em; text-wrap: balance; }
h2 { font-size: var(--t-section); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.lead { max-width: 62ch; color: var(--tx-2); font-size: var(--t-lead); line-height: 1.55; text-wrap: pretty; }
p { text-wrap: pretty; }
code, kbd { font-family: var(--mono); font-size: 0.86em; font-weight: 400; }
code { padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--tx); }

/* ---- home: the opening ---- */
/* The timelapse under the title: wider than the text column, and the first screen ends 30% of the way down it, so it pokes up from the
   bottom edge. The hero above fills the first screen minus that share of the video (min-height); the variables are on :root so both can read them. */
:root { --peek-show: 0.3; }      /* how much of the video shows on the first screen */
@media (max-width: 1500px), (max-height: 950px) { :root { --peek-show: 0.15; } }      /* a smaller screen: just the top edge */
:root { --peek-bar: clamp(22px, 1.9vw, 30px); --peek-w: min(100vw - clamp(24px, 4vw, 64px), 1640px, max(560px, ((100svh - var(--bar-h) - 440px) / var(--peek-show) - var(--peek-bar)) / 0.5625)); --peek-h: calc(var(--peek-w) * 0.5625 + var(--peek-bar)); }
.hero:has(+ .hero-peek) { min-height: calc(100svh - var(--bar-h) - var(--peek-h) * var(--peek-show)); padding-bottom: clamp(24px, 3vw, 44px); box-sizing: border-box; }
.hero-peek { width: var(--peek-w); max-width: none; margin-inline: auto; padding-inline: 0; }
.peek-frame { overflow: hidden; border-radius: clamp(10px, 1.2vw, 18px); border: 1px solid var(--line, rgba(255, 255, 255, 0.1)); background: #101010; box-shadow: var(--shadow); }
.peek-bar { position: relative; display: flex; align-items: center; justify-content: center; height: var(--peek-bar); background: #1c1c1e; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.peek-lights { position: absolute; left: clamp(10px, 1.1vw, 16px); display: flex; gap: clamp(6px, 0.6vw, 8px); }
.peek-lights i { width: clamp(8px, 0.7vw, 10px); aspect-ratio: 1; border-radius: 50%; background: #ff5f57; }
.peek-lights i:nth-child(2) { background: #febc2e; }
.peek-lights i:nth-child(3) { background: #28c840; }
.peek-title { color: #9a9a9e; font-size: 11px; letter-spacing: 0.01em; }
.peek-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hero { padding-top: clamp(64px, 9vw, 128px); }
.hero h1 { max-width: 13ch; margin-top: 22px; font-size: round(clamp(44px, 7.6vw, 104px), 1px); }
.hero .lead { margin-top: clamp(22px, 2.6vw, 34px); }
.hero .actions { margin-top: clamp(28px, 3vw, 40px); }
.hero-shot { margin-top: clamp(48px, 6vw, 88px); }
.hero-shot img { width: 100%; border-radius: clamp(8px, 1vw, 14px); box-shadow: var(--shadow); background: var(--surface); }
.hero-shot figcaption { display: none; }

/* a picture that opens full size */
.zoom { display: block; border-radius: inherit; cursor: zoom-in; }
figcaption { margin-top: 12px; color: var(--tx-3); font-size: 14px; line-height: 1.5; }

/* ---- bands: the page's sections, a hairline between them ---- */
.band { margin-top: var(--band); padding-top: var(--band); border-top: 1px solid var(--line); }
.band.is-first { margin-top: clamp(48px, 6vw, 88px); border-top: 0; }
.page-head + .band, .hero + .band { border-top: 0; }
.page-head + .band.is-first { padding-top: 0; margin-top: calc(clamp(48px, 6vw, 88px) + 32px); }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.band-head .kicker { grid-column: 1 / -1; }
.band-head h2 { max-width: 22ch; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.split-head { display: grid; gap: 14px; justify-items: start; position: sticky; top: calc(var(--bar-h) + 32px); }
.split-body { display: grid; gap: 18px; color: var(--tx-2); font-size: 17px; }
/* the "why" band: three short rows with a thin line between them */
.why-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.why-points li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.why-points span { color: var(--tx-3); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.why-points p { margin: 0; color: var(--tx); font-size: var(--t-lead); font-weight: 300; }

/* the claims: big type on tiles, as on a product page */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.bento > .tile { grid-column: span 2; }
.bento > .tile:nth-child(n+4) { grid-column: span 3; }
.tile { display: flex; flex-direction: column; gap: 20px; min-height: clamp(250px, 23vw, 310px); padding: clamp(20px, 2vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: clamp(20px, 2.2vw, 32px); position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.3s ease; }
/* The hover. The tile is filled with its own colour, and the fill grows out from the point where the pointer came in (and shrinks back to the point
   where it left): site.js sets --mx and --my. Nothing moves. Its text goes dark and every line of the drawing goes
   black a moment after the fill reaches them. Only for a real pointer: on touch there is no hover. */
@property --mx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --my { syntax: '<length>'; inherits: true; initial-value: 0px; }
/* The fill is a big circle of the tile's colour that is only moved (translate) and scaled: the browser animates both on the graphics card, so the
   drawing under it can keep moving without the hover stuttering. --mx and --my are the point where the pointer came in or left (site.js). */
.tile::before { display: none; content: ""; position: absolute; left: 0; top: 0; width: 1800px; height: 1800px; margin: -900px 0 0 -900px; z-index: -1; pointer-events: none; border-radius: 50%; background: var(--tile-c, var(--accent)); translate: var(--mx) var(--my); scale: 0; will-change: scale; transition: scale 0.7s cubic-bezier(0.45, 0.05, 0.25, 1); }
.tile-label, .tile h2, .tile h2 span, .tile-line { transition: color 0.4s ease 0.1s; }
.tile-art, .tile-art .art-hot, .tile-art .art-dim { transition: color 0.4s ease 0.1s, stroke 0.4s ease 0.1s; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { border-color: transparent; }
  .tile:hover::before { scale: 1; }
  .tile:hover .tile-label, .tile:hover h2, .tile:hover .tile-line { color: #101010; }
  .tile:hover h2 span { color: rgba(16, 16, 16, 0.55); }
  .tile:hover .tile-art { color: #101010; --art-dim: #101010; }
  .tile:hover .tile-art .art-hot, .tile:hover .tile-art .art-dim { stroke: #101010; }
  .tile:hover .tile-art text.art-t { fill: #101010; }
  /* the parts that are coloured by an animation (a hit, a find, a glow) are black too: !important beats an animation; they take currentColor, not #101010, so they darken with the
     drawing's own colour once the fill has come in (an instant #101010 left them black on the dark card for a moment) */
  .tile:hover .tile-art :is(path, circle, rect, ellipse, line, polyline, polygon):not(.art-solid):not(.art-fnd):not(.art-face):not(.art-hole) { stroke: currentColor !important; filter: none !important; }
  .tile:hover .tile-art :is(.art-hole, .art-face) { fill: currentColor !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .tile::before, .tile-label, .tile h2, .tile h2 span, .tile-line, .tile-art, .tile-art .art-hot, .tile-art .art-dim { transition: none; }
}
.tile-label { margin-top: 14px; margin-bottom: -12px; color: var(--tile-c, var(--accent)); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.tile h2 { padding-top: 0; max-width: 15ch; font-size: var(--t-figure); font-weight: 500; line-height: 1.04; letter-spacing: -0.045em; color: var(--tx); text-wrap: balance; }
.tile h2 span { color: var(--tx-3); }
.tile-line { margin-top: -12px; max-width: 40ch; color: var(--tx-2); font-size: 14px; line-height: 1.45; }
/* tile drawings: thin strokes, grey with a little blue; they move only while the tile is on screen */
.tile-art { --cycle: 5s; flex: 0 0 auto; align-self: stretch; width: 100%; height: clamp(110px, 11vw, 150px); margin: 0; color: var(--art-line); --art-dim: #46464a; overflow: visible; }
.tile-art .art-hot { stroke: var(--tile-c, var(--accent)); }
.tile-art .art-edge { opacity: 0; }
.tile-art .art-dim { stroke: var(--art-dim); }
.tile-art text.art-t { fill: var(--tx-3); stroke: none; font: 400 12px var(--mono); letter-spacing: 0.08em; }
.tile-art .art-flow { stroke-dasharray: 4 7; }
.tile-art .art-scan { transform-box: fill-box; }
.tile-art .art-rep,
.tile-art .art-gear { transform-box: fill-box; }
.tile-art .art-rep { transform-origin: center; }
.tile-art .art-gear { transform-origin: center; }
.tile-art .art-low { opacity: 0; }
.tile-art .art-float,
.tile-art .art-shackle,
.tile-art .art-lockbody { transform-box: fill-box; }
.tile-art .art-lockbody { transform-origin: center; }
.tile-art .art-boxes { transform-box: fill-box; transform-origin: center; }
.tile-art .art-box, .tile-art .art-bounce { transform-box: fill-box; transform-origin: center; }
.tile-art .art-bounce { transform-origin: center; }
.tile-art .art-dots { stroke-dasharray: 0.1 10; stroke-width: 3; }
.tile-art .art-ring { opacity: 1; }
.tile-art .art-mesh { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.7; stroke-width: 1; }
.tile-art, .tile-art * { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  .tile-art .art-flow { animation: art-flow 1.25s linear infinite; }
  .tile-art .art-scan { animation: art-scan var(--cycle) linear infinite; }
  .tile-art .art-fine { animation: art-fine var(--cycle) ease-in-out infinite; }
  .tile-art .art-low { animation: art-low var(--cycle) ease-in-out infinite; }
  .tile-art .art-wipeclip { animation: art-clipwipe var(--cycle) linear infinite; }
  .tile-art .art-parts { animation: art-partsin var(--cycle) ease-in-out infinite; }
  .tile-art .art-box { animation: art-hop var(--cycle) linear infinite; animation-delay: calc(var(--i) * 0.28s); }
  .tile-art .art-shackle { animation: art-shackle var(--cycle) ease-in-out infinite; }
  .tile-art .art-lockbody { animation: art-lockpop var(--cycle) ease-in-out infinite; }
  .tile-art .art-lockg { animation: art-lockc var(--cycle) ease-in-out infinite; }
  .tile-art .art-dots { animation: art-dots 1s linear infinite; }
  .tile-art .art-ring { animation: art-ring var(--cycle) ease-in-out infinite; animation-delay: calc(var(--k) * 0.11s); }
  .tile-art .art-mesh { animation: art-meshin var(--cycle) ease-in-out infinite; animation-delay: 1.4s; }
  .tile-art .art-rep { animation: art-merge var(--cycle) ease-in-out infinite; }
  .tile-art .art-edge { animation: art-edge var(--cycle) ease-in-out infinite; }
  .tile-art .art-gear { animation: art-gear var(--cycle) linear infinite; }
  .tile-art .art-cursor { animation: art-blink 1.25s steps(2, jump-none) infinite; }
}
@media (prefers-reduced-motion: reduce) { .tile-art .art-low { opacity: 1; } .tile-art .art-fine { opacity: 0.3; } .tile-art .art-rep { opacity: 0.4; } }
@keyframes art-flow { to { stroke-dashoffset: -22; } }
/* the dots of the Convert tile move by exactly one gap (0.1 + 10), so the loop has no jump; the line is seven gaps long, centred between the sheet and the mesh */
@keyframes art-dots { to { stroke-dashoffset: -10.1; } }
@keyframes art-draw { 0%, 10% { stroke-dashoffset: 1; } 55%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes art-scan { 0%, 12% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 58% { transform: translateX(268px); opacity: 1; } 61%, 100% { transform: translateX(268px); opacity: 0; } }
@keyframes art-clipwipe { 0%, 12% { transform: translateX(0); } 58%, 77.9% { transform: translateX(268px); } 78%, 100% { transform: translateX(0); } }
@keyframes art-partsin { 0%, 77.9% { opacity: 1; } 78% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes art-hida { 0%, 15% { opacity: 0.7; } 18%, 27% { opacity: 1; } 32%, 92% { opacity: 0; } 100% { opacity: 0.7; } }
@keyframes art-hidb { 0%, 30% { opacity: 0.7; } 33%, 47% { opacity: 1; } 52%, 92% { opacity: 0; } 100% { opacity: 0.7; } }
@keyframes art-hidc { 0%, 49% { opacity: 0.7; } 52%, 58% { opacity: 1; } 63%, 92% { opacity: 0; } 100% { opacity: 0.7; } }
@keyframes art-fine { 0%, 22% { opacity: 1; } 48%, 78% { opacity: 0; } 100% { opacity: 1; } }
/* Repair mesh: the edge of the hole lights up in the tile colour and glows, then the hole closes (art-fine fades from 22 %) and the glow goes with it */
@keyframes art-edge { 0%, 4% { opacity: 0; filter: none; } 16%, 24% { opacity: 1; filter: none; } 40%, 100% { opacity: 0; filter: none; } }
@keyframes art-low { 0%, 22% { opacity: 0; } 48%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes art-edit { 0%, 8% { opacity: 0; transform: scale(0.4); } 20%, 48% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes art-bounce { 0%, 100% { transform: translateY(0) scale(1.1, 0.88); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); } 45% { transform: translateY(-13px) scale(0.94, 1.08); animation-timing-function: cubic-bezier(0.7, 0, 0.8, 0.3); } }
/* a box slides to the computer and fades out as it goes in through the screen (no scaling), then comes back by fading in where it started */
@keyframes art-hop { 0%, 22% { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 27% { opacity: 1; } 37% { opacity: 0; } 40%, 70% { transform: translate(var(--tx), var(--ty)); opacity: 0; } 70.1% { transform: translate(0, 0); opacity: 0; } 84%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes art-gone { 0%, 28% { opacity: 1; transform: scale(1); animation-timing-function: ease-out; } 33% { opacity: 0; transform: scale(0.5); } 93% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes art-gone-r { 0%, 33% { opacity: 1; transform: scale(1); animation-timing-function: ease-out; } 38% { opacity: 0; transform: scale(0.5); } 93% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes art-shackle { 0%, 60% { transform: translateY(-9px); animation-timing-function: cubic-bezier(0.3, 1.7, 0.5, 1); } 68% { transform: translateY(0); } 90% { transform: translateY(0); } 97%, 100% { transform: translateY(-9px); } }
@keyframes art-lockpop { 0%, 64% { transform: scale(1); animation-timing-function: ease-out; } 68% { transform: scale(1.08); animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); } 78%, 100% { transform: scale(1); } }
@keyframes art-lockc { 0%, 62% { stroke: var(--tx-3); } 68%, 90% { stroke: var(--tile-c, var(--accent)); } 98%, 100% { stroke: var(--tx-3); } }
@keyframes art-ring { 0% { opacity: 0; transform: translateY(14px); } 8%, 82% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes art-meshin { 0%, 4% { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 0.7; } 45%, 72% { stroke-dashoffset: 0; opacity: 0.7; } 84%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes art-merge { 0%, 15% { transform: translate(0, 0) scale(1); opacity: 1; } 48% { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 1; } 54%, 84% { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes art-core { 0%, 40% { transform: scale(1); stroke: var(--tx-3); } 62%, 84% { transform: scale(2.55); stroke: var(--accent); } 100% { transform: scale(1); stroke: var(--tx-3); } }
@keyframes art-once { 0%, 45% { opacity: 0; } 60%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes art-nut { 0%, 15% { transform: translateX(0); } 45%, 55% { transform: translateX(-130px); } 85%, 100% { transform: translateX(0); } }
@keyframes art-back { 0%, 45% { stroke-dashoffset: 150; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -150; } }
@keyframes art-head { 0%, 56% { opacity: 0; } 62%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes art-gear { to { transform: rotate(360deg); } }
@keyframes art-blink { 50% { opacity: 0; } }
@media (max-width: 1020px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > .tile, .bento > .tile:nth-child(n+4) { grid-column: span 1; } .bento > .tile:last-child { grid-column: span 2; } .tile h2 { font-size: var(--t-figure); } }
/* the clean-up tools: the same line drawings, one per card */
.tile-art .art-solid { fill: var(--card-bg, var(--surface)); stroke: none; }
:is(.clip, .star) .clip-art { display: block; width: 100%; height: auto; aspect-ratio: 592 / 370; padding: 8px; background: var(--surface); border-radius: var(--r); color: var(--art-line); --art-dim: #46464a; overflow: visible; transition: background 0.25s ease; }
:is(.clip, .star) .clip-art { --art-sw: 1px; stroke-width: var(--art-sw); }
/* Hairline: every part of every feature drawing is one stroke, 1px on screen at any card size (non-scaling), round ends and joins.
   Weight never carries meaning: the bright line, the dim line and the dotted guide say it by colour and dash, not by width, glow, fill or opacity. */
:is(.clip, .star) .clip-art :is(path, circle, rect, ellipse, line, polyline, polygon) { stroke-width: var(--art-sw); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* The same hover as the claim tiles: the picture fills with its colour from the point where the pointer comes in, and its lines go black. */
@property --fill-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --glow { syntax: '<number>'; inherits: false; initial-value: 0; }
:is(.clip, .star) .clip-art .art-hot, :is(.clip, .star) .clip-art .art-dim { transition: stroke 0.4s ease 0.1s; }
@media (hover: hover) and (pointer: fine) {
  :is(.clip, .star) .clip-art { background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, var(--glow)), rgba(255, 255, 255, 0) 70%), radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--tile-c, var(--accent)) var(--fill-r), rgba(0, 0, 0, 0) calc(var(--fill-r) + 1.5px)), var(--surface); transition: --fill-r 0.42s cubic-bezier(0.22, 0.8, 0.18, 1), --glow 0.3s ease, color 0.22s ease 0.05s; }
  .tile::before { display: block; }
  :is(.clip, .star):hover .clip-art { --fill-r: 1100px; --glow: 0.09; --card-bg: var(--tile-c, var(--accent)); color: #101010; --art-dim: #101010; }
  :is(.clip, .star):hover .clip-art .art-hot, :is(.clip, .star):hover .clip-art .art-dim { stroke: #101010; }
  :is(.clip, .star):hover .clip-art text.art-t { fill: #101010; }
  :is(.clip, .star):hover .clip-art :is(path, circle, rect, ellipse, line, polyline, polygon):not(.art-solid):not(.art-fnd) { stroke: currentColor !important; filter: none !important; }
}
@media (prefers-reduced-motion: reduce) { :is(.clip, .star) .clip-art, :is(.clip, .star) .clip-art .art-hot, :is(.clip, .star) .clip-art .art-dim { transition: none; } }
.tile-art .art-hole, .tile-art .art-sa, .tile-art .art-sb, .tile-art .art-fnd { transform-box: fill-box; transform-origin: center; }
.tile-art .art-fnd { transform-origin: 50% 85%; }
.tile-art .art-fnd { fill: var(--card-bg, var(--surface)); }
.tile-art .art-sil { stroke: none; }
.tile-art .art-face { fill: none; stroke: var(--tile-c, #fff); opacity: 0; }
.tile-art .art-bolt { transform-box: fill-box; }
.tile-art .art-plane { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.tile-art .art-found { stroke: var(--art-dim); }
.tile-art .art-shell-dash { opacity: 0; stroke: var(--art-dim); stroke-dasharray: 1 3; }
.tile-art .art-spin, .tile-art .art-spinr { transform-origin: 0 0; }
.tile-art :is(circle, path)[style*='non-scaling-stroke'], .tile-art .art-found circle { vector-effect: non-scaling-stroke; }
.tile-art .art-brk { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tile-art .art-fit { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-live .tile-art, .is-live .tile-art * { animation-play-state: running; }
/* (each drawing's own `animation:` rule sets the play state again, so on its own the pause above never held: the cards animated all the time, on screen or not,
   which costs battery on a phone. This wins over them: a card moves only while it is on screen.) */
:is(.tile, .clip, .star):not(.is-live) .tile-art, :is(.tile, .clip, .star):not(.is-live) .tile-art * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
  .tile-art .art-hole { animation: art-close var(--cycle) ease-in-out infinite; animation-delay: calc(var(--i) * 0.16s); }
  .tile-art .art-sa { animation: art-apart-l var(--cycle) ease-in-out infinite; }
  .tile-art .art-sb { animation: art-apart-r var(--cycle) ease-in-out infinite; }
  .tile-art .art-face { animation: art-flash var(--cycle) ease-in-out infinite; }
  .tile-art .art-bolt { animation: art-bolt var(--cycle) ease-in-out infinite; }
  .tile-art .art-plane { animation: art-plane var(--cycle) ease-in-out infinite; }
  .tile-art .art-shell-solid { animation: art-shellsolid var(--cycle) ease-in-out infinite; }
  .tile-art .art-shell-dash { animation: art-shelldash var(--cycle) ease-in-out infinite; }
  .tile-art .art-found { animation: art-found var(--cycle) ease-in-out infinite; }
  .tile-art .art-spin { animation: art-spin var(--cycle) linear infinite; }
  .tile-art .art-spinr { animation: art-spinr var(--cycle) linear infinite; }
  .tile-art .art-brk { animation: art-brk var(--cycle) ease-in-out infinite; }
  .tile-art .art-fnd { animation: var(--snap) var(--cycle) linear infinite; }
  .tile-art .art-f0 { --snap: art-snap0; } .tile-art .art-f1 { --snap: art-snap1; } .tile-art .art-f2 { --snap: art-snap2; } .tile-art .art-f3 { --snap: art-snap3; } .tile-art .art-f4 { --snap: art-snap4; }
  .tile-art .art-dense2 { animation: art-dense2 var(--cycle) ease-in-out infinite; }
  .tile-art .art-fit { animation: art-fit var(--cycle) ease-in-out infinite; }
}
@keyframes art-close { 0%, 12% { stroke: var(--art-line); opacity: 1; transform: scale(1); filter: none; } 22% { stroke: var(--tile-c, #fff); opacity: 1; transform: scale(1.12); filter: none; } 32% { stroke: var(--tile-c, #fff); opacity: 1; transform: scale(1); filter: none; } 46%, 86% { stroke: var(--tile-c, #fff); opacity: 0; transform: scale(1); filter: none; } 100% { stroke: var(--art-line); opacity: 1; transform: scale(1); filter: none; } }
@keyframes art-apart-l { 0%, 47% { transform: translate(0, 0); animation-timing-function: ease-in; } 50% { transform: translate(2px, 1.1px); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 56% { transform: translate(-22px, -12.7px); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 62% { transform: translate(-13px, -7.5px); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 66%, 86% { transform: translate(-16px, -9.2px); animation-timing-function: ease-in-out; } 100% { transform: translate(0, 0); } }
@keyframes art-apart-r { 0%, 47% { transform: translate(0, 0); animation-timing-function: ease-in; } 50% { transform: translate(-2px, -1.1px); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 56% { transform: translate(22px, 12.7px); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 62% { transform: translate(13px, 7.5px); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 66%, 86% { transform: translate(16px, 9.2px); animation-timing-function: ease-in-out; } 100% { transform: translate(0, 0); } }
@keyframes art-bolt { 0%, 100% { transform: none; } }
@keyframes art-plane { 0%, 22% { stroke-dashoffset: 1; opacity: 0; } 26% { opacity: 1; } 38%, 47% { stroke-dashoffset: 0; opacity: 1; } 50%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes art-flash { 0%, 49% { opacity: 0; } 53% { opacity: 1; } 62% { opacity: 0.9; } 76%, 100% { opacity: 0; } }
@keyframes art-cut { 0%, 16% { opacity: 0; } 32%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes art-shellsolid { 0%, 16% { opacity: 1; } 34%, 80% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes art-shelldash { 0%, 16% { opacity: 0; } 34%, 80% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes art-found { 0%, 20% { stroke: var(--art-dim); } 36%, 82% { stroke: var(--tile-c, #fff); } 100% { stroke: var(--art-dim); } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-spinr { from { transform: rotate(15deg); } to { transform: rotate(-345deg); } }
@keyframes art-brk { 0%, 30% { stroke-dashoffset: 1; opacity: 0; } 46%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* Fasteners: they light up and snap off almost together (a small offset each), hang there until the last has lifted, then dissolve together; they come back one by one, each with a small bounce that grows from its own foot. Twice in the cycle. */
@keyframes art-snap0 { 0%, 3% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 6% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 7.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 9% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 11% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 13%, 24% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 31% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 31.01%, 33.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 34% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 37.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 40% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 42% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } 53% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 55% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 56% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 57.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 59% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 61% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 63%, 74% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 81% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 81.01%, 83.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 84% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 87.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 90% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 92%, 100% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-snap1 { 0%, 5.5% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 7.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 8.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 10% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 11.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 13.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 15.5%, 24% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 31% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 31.01%, 35.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 36% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 39.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 42% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 44% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } 55.5% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 57.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 58.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 60% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 61.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 63.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 65.5%, 74% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 81% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 81.01%, 85.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 86% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 89.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 92% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 94%, 100% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-snap2 { 0%, 8% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 10% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 11% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 12.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 14% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 16% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 18%, 24% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 31% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 31.01%, 37.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 38% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 41.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 44% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 46% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } 58% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 60% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 61% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 62.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 64% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 66% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 68%, 74% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 81% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 81.01%, 87.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 88% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 91.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 94% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 96%, 100% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-snap3 { 0%, 10.5% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 12.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 13.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 15% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 16.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 18.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 20.5%, 24% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 31% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 31.01%, 39.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 40% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 43.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 46% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 48% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } 60.5% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 62.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 63.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 65% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 66.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 68.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 70.5%, 74% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 81% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 81.01%, 89.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 90% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 93.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 96% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 98%, 100% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-snap4 { 0%, 13% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 15% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 16% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 17.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 19% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 21% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 23%, 24% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 31% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 31.01%, 41.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 42% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 45.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 48% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 50% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } 63% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; } 65% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 66% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(1.8px) scale(1); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 67.5% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-24px) scale(1); animation-timing-function: ease-in-out; } 69% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-21.5px) scale(1); animation-timing-function: ease-in-out; } 71% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22.4px) scale(1); animation-timing-function: ease-in-out; } 73%, 74% { stroke: var(--tile-c, #fff); filter: none; opacity: 1; transform: translateY(-22px) scale(1); animation-timing-function: ease-in; } 81% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(-28px) scale(1); } 81.01%, 91.99% { stroke: var(--tile-c, #fff); filter: none; opacity: 0; transform: translateY(0) scale(1); } 92% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(0.82); } 95.5% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(1.06); } 98% { stroke: var(--art-line); opacity: 1; transform: translateY(0) scale(0.99); } 100%, 100% { stroke: var(--art-line); filter: none; opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-find { 0%, 26% { stroke: var(--art-line); filter: none; transform: translateY(0); animation-timing-function: ease-out; } 38% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(0); } 47% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(0); animation-timing-function: ease-in; } 50% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(1.6px); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); } 56% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(-26px); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 62% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(-14px); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 66%, 84% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(-17px); animation-timing-function: ease-in-out; } 94% { stroke: var(--tile-c, #fff); filter: none; transform: translateY(0); } 100% { stroke: var(--art-line); filter: none; transform: translateY(0); } }
@keyframes art-dense2 { 0%, 20% { opacity: 1; } 52%, 84% { opacity: 0; } 100% { opacity: 1; } }
@keyframes art-fit { 0%, 20% { stroke-dashoffset: 1; opacity: 1; } 52%, 82% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
/* each drawing starts at once, a little way into its loop (no waiting, nothing staggered): the idle part at the start of every loop is skipped */
@media (max-width: 760px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento > .tile, .bento > .tile:last-child { grid-column: span 1; } .tile { min-height: 0; gap: 40px; } }
/* headline figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(28px, 4vw, 48px); counter-reset: fig; }
.figures > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-top: 18px; border-top: 1px solid var(--line-strong); counter-increment: fig; }
.figures > div::before { content: counter(fig, decimal-leading-zero); margin-bottom: 22px; color: var(--tx-3); font: 400 12px/1 var(--mono); letter-spacing: 0.06em; }
.figures dt { align-self: start; font-weight: 300; font-size: var(--t-figure); line-height: 1.08; letter-spacing: -0.03em; }
.figures dd { margin-top: 14px; max-width: 34ch; color: var(--tx-2); font-size: 15px; line-height: 1.5; }

/* what the pipeline collapses: a drawing sheet. Hairlines only; each input is joined to what it becomes by a dimension line */
.collapse, .collapse tbody { display: block; width: 100%; }
.collapse { margin-top: 18px; counter-reset: row; font-variant-numeric: tabular-nums; }
.collapse caption { display: block; width: 100%; padding: 0 0 12px; border-bottom: 1px solid var(--tx-3); color: var(--tx-3); font: 400 12px/1 var(--mono); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; caption-side: top; }
.collapse caption::before { content: 'Fig. 01 — '; color: var(--tx-2); }
.collapse tr { display: grid; grid-template-columns: 24px minmax(0, 1.1fr) minmax(32px, 0.35fr) minmax(0, 1.55fr); align-items: center; column-gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); counter-increment: row; }
.collapse tr::before { content: counter(row, decimal-leading-zero); color: var(--tx-3); font: 400 12px/1 var(--mono); }
.collapse th, .collapse td { padding: 0; text-align: left; font-weight: 400; }
.collapse th { color: var(--tx); font: 300 var(--t-lead)/1.2 var(--font); letter-spacing: -0.015em; }
.collapse td { color: var(--tx-2); font: 400 15px/1.4 var(--font); }
/* the arrow cell becomes a dimension line: a hairline with a tick at the start and an arrowhead at the end */
.collapse td:nth-child(2) { position: relative; height: 13px; font-size: 0; color: var(--tx-3); }
.collapse td:nth-child(2)::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: currentColor; }
.collapse td:nth-child(2)::after { content: ''; position: absolute; right: 0; top: 2px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; rotate: 45deg; translate: -2px 0; }
.collapse tr:hover td:nth-child(2) { color: var(--tx); }
@media (max-width: 560px) { .collapse tr { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; } .collapse td:nth-child(2) { display: none; } .collapse td:last-child { grid-column: 2; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); list-style: none; }
.steps li { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.steps i { color: var(--tx-3); font: 400 12px/1 var(--mono); }
.steps h3 { margin-top: 18px; font-size: 21px; }
.steps p { margin-top: 10px; color: var(--tx-2); font-size: 15px; }
/* clips: short loops of a tool at work */
.clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.clip video { width: 100%; aspect-ratio: 592 / 370; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.clip.is-tap video { cursor: pointer; }
.clip { display: flex; flex-direction: column; }
.clip figcaption { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; align-content: start; flex: 1; gap: 4px 10px; margin-top: 14px; }
.clip figcaption i { display: none; } .clip figcaption i.x { color: var(--tx-3); font: 400 12px/1.7 var(--mono); }
.clip figcaption strong { color: var(--tx); font-size: 15px; }
.clip figcaption span { grid-column: 1; }
.clip figcaption .clip-more { grid-column: 1; justify-self: start; align-self: end; margin-top: 6px; color: var(--accent-hover); font-size: 14px; text-decoration: none; transition: color 0.15s ease; }
.clip figcaption .clip-more:hover { color: #fff; }
.clip figcaption .clip-more .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clip figcaption .clip-more > span:not(.sr) { display: inline; grid-column: auto; }

/* a closer look: a picture and what it shows, side by side */
.spots { display: grid; gap: clamp(48px, 7vw, 112px); }
.spot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4.4vw, 72px); align-items: center; }
.spot img { width: 100%; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.spot i { color: var(--tx-3); font: 400 12px/1 var(--mono); }
.spot h3 { margin-top: 16px; font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.spot p { margin-top: 14px; color: var(--tx-2); font-size: 15px; }

/* the strip of screenshots: paged, it always rests with one picture in the
   middle (site.js settles a mouse drag the same way and frees the strip,
   .is-free, while it has it) */
.strip {
  display: flex;
  gap: clamp(28px, 4.2vw, 72px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: -32px 0 -64px;
  padding: 40px max(var(--gutter), (100% - var(--max)) / 2) 100px;
  scroll-padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
}
.strip::-webkit-scrollbar { display: none; }
.strip.is-free { scroll-snap-type: none; }
.strip figure { flex: none; width: min(86%, 1240px); scroll-snap-align: center; scroll-snap-stop: always; }
.strip img { width: 100%; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
.strip .zoom { cursor: inherit; }
.rm-shot { margin: 0; }
/* the clip is the app edge to edge, so a big radius would cut into its own corners */
.rm-shot video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 70px -20px rgba(0, 0, 0, 0.55); cursor: default; outline: none; }
/* tips up out of the page as it scrolls in (--t 0 to 1, set by site.js) */
.rm-shot.is-tilt .rm-lean { perspective: 1100px; }
.rm-shot.is-tilt video { transform-origin: 50% 50%; transform: rotateX(calc((1 - var(--t, 0)) * -32deg)) scale(calc(0.82 + 0.18 * var(--t, 0))); border-radius: calc(6px + (1 - var(--t, 0)) * 18px); opacity: calc(0.35 + 0.65 * var(--t, 0)); will-change: transform; }
/* the full-size viewer (overlay.css) takes its black from tokens.css, which this site does not load */
body .lightbox { background: #000; }   /* (overlay.css loads after this file and would win at equal weight) */
.rm-shot figcaption { margin-top: 20px; max-width: 62ch; color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.strip video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); cursor: inherit; }
.strip figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin-top: 20px; max-width: 62ch; }
.strip figcaption i { color: var(--tx-3); font: 400 12px/1.9 var(--mono); font-style: normal; }
.strip figcaption strong { color: var(--tx); font-size: 17px; font-weight: 500; line-height: 1.4; }
.strip figcaption span { grid-column: 2; color: var(--tx-2); font-size: 15px; line-height: 1.55; }
@media (hover: hover) and (pointer: fine) {
  .strip { cursor: grab; user-select: none; -webkit-user-select: none; }
  .strip.is-held { cursor: grabbing; }
}
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background-color 0.25s ease; }
.dots i.is-active { background: var(--tx); }

/* tagged changes (the latest release, the changelog) */
.changes, .log-body ul { display: grid; gap: 12px; margin-top: 8px; list-style: none; }
.changes li, .log-body li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 12px; font-size: 15px; color: var(--tx-2); }
.changes b, .log-body b { font: 500 11px/2.1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
b.is-new { color: var(--new); }
b.is-fix { color: var(--fix); }
b.is-perf { color: var(--perf); }
b.is-polish { color: var(--polish); }
b.is-refactor { color: var(--refactor); }

/* ---- inner pages: the opening ---- */
.page-head { padding-top: clamp(56px, 8vw, 112px); }
.page-head h1 { max-width: 20ch; margin-top: 20px; font-size: round(clamp(34px, 5vw, 64px), 1px); line-height: 1.04; letter-spacing: -0.035em; }
.page-head h1 span { color: var(--tx-3); }
.page-head .lead { margin-top: 22px; }
.page-head .actions { margin-top: 32px; }
.page-head + .wrap { margin-top: clamp(40px, 5vw, 72px); }

/* features: a list per group */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); list-style: none; }
.tools-wrap { display: grid; gap: clamp(24px, 3vw, 40px); }
.tools-wrap .split-head { position: static; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); list-style: none; }
.tools li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.tools .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--ico, var(--accent)); background: color-mix(in srgb, var(--ico, var(--accent)) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico, var(--accent)) 26%, transparent); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.tools .ico svg { width: 20px; height: 20px; }
.tools li:hover .ico { background: color-mix(in srgb, var(--ico, var(--accent)) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico, var(--accent)) 44%, transparent); }
.tools div { display: grid; gap: 5px; align-content: start; padding-top: 1px; }
.tools strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 500; }
.allfeat { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.allfeat summary { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17px; color: var(--tx); }
.allfeat summary::-webkit-details-marker { display: none; }
.allfeat summary i { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 4px; }
.allfeat[open] summary i { transform: rotate(-135deg); }
.allfeat-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); padding: 8px 0 28px; }
.allfeat h3 { margin-bottom: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-3); }
.allfeat ul { list-style: none; display: grid; gap: 0; }
.allfeat li { padding: 4px 0; font-size: 15px; line-height: 1.4; color: var(--tx-2, var(--tx)); }
@media (max-width: 1060px) { .allfeat-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .allfeat-body { grid-template-columns: 1fr; } }
.tools .tag-new { margin-left: 0; height: 18px; padding: 0 8px; line-height: 1; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--tx)); font: 500 11px/1.4 var(--font); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: baseline; }
.tools span { color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.features li { display: grid; gap: 6px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.features strong { font-size: 15px; }
.features span { color: var(--tx-2); font-size: 15px; line-height: 1.5; }

.credit { max-width: 44ch; margin-top: clamp(40px, 5vw, 72px); color: var(--tx-3); font-size: 12px; line-height: 1.55; }
.credit a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.credit a:hover { text-decoration-color: currentColor; }

/* ---- docs: a knowledge base. The home lists every article by group, with
   a search; an article has the index of all of them beside it ---- */
.kb { display: grid; gap: clamp(56px, 7vw, 104px); min-width: 0; }
.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.kb-rail { position: sticky; top: calc(var(--bar-h) + 28px); display: grid; gap: 1px; align-content: start; }
.kb-rail h2 { margin: 0 0 8px; color: var(--tx-3); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.kb-rail h2:not(:first-child) { margin-top: 26px; }
.kb-rail a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--tx-2); font-size: 14px; line-height: 1.4; text-decoration: none; transition: color 0.15s ease; }
.kb-rail a:hover { color: var(--tx); }
.kb-rail svg { width: 15px; height: 15px; flex: none; color: var(--tx-3); }
.kb-rail a:hover svg { color: var(--tx); }
/* as wide as the group headings beside the lists, and it stays under the bar while the docs scroll */
.kb-search { position: sticky; top: calc(var(--bar-h) + 12px); z-index: 6; width: calc((100% - clamp(20px, 4vw, 72px)) / 3); min-width: 240px; }
.kb-search input {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--tx);
  font: 400 15px/1 var(--font);
  box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.4);
  outline: none;
}
.kb-search-row { display: flex; align-items: center; gap: 8px; }
.kb-search-btn, .kb-pills, .kb-search-mark { display: none; }
.kb-search input::placeholder { color: var(--tx-3); }
.kb-search input:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(0, 0, 0, 0.4); }
.kb-none { margin-top: 20px; color: var(--tx-2); }
.kb-none a, .kb-body a, .kb-article .kicker a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.kb-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 72px); align-items: start; scroll-margin-top: calc(var(--bar-h) + 84px); }
.kb-group[hidden] { display: none; }
.kb-group-head { position: sticky; top: calc(var(--bar-h) + 84px); display: grid; gap: 10px; }
.kb-group-head h2 { font-size: var(--t-title); }
.kb-group-head p { max-width: 32ch; color: var(--tx-2); font-size: 15px; }
.kb-list { display: grid; list-style: none; counter-reset: kb; }
.kb-list li { counter-increment: kb; border-top: 1px solid var(--line); }
.kb-list li[hidden] { display: none; }
.kb-list a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 2px 8px; padding: 16px 0 18px; text-decoration: none; }
.kb-list a::before { content: counter(kb, decimal-leading-zero); grid-row: 1 / 3; color: var(--tx-3); font: 400 12px/2 var(--mono); }
.kb-list strong { font-size: 15px; transition: color 0.15s ease; }
.kb-list span { grid-column: 2; color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.kb-list a:hover strong { color: var(--accent-hover); }

.kb-page { display: grid; grid-template-columns: 232px minmax(0, 1fr) 200px; gap: clamp(32px, 6vw, 104px); align-items: start; padding-top: clamp(40px, 5vw, 72px); }
.kb-nav { position: sticky; top: calc(var(--bar-h) + 28px); display: grid; gap: 1px; align-content: start; max-height: calc(100vh - var(--bar-h) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 20px 10px 36px; margin: -20px -10px 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 36px), transparent 100%); }
.kb-nav::-webkit-scrollbar { display: none; }
.kb-nav h2 { margin: 22px 0 6px; color: var(--tx-3); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.kb-nav h2:first-of-type { margin-top: 14px; }
.kb-nav a { display: block; margin: 0 -10px; padding: 6px 10px; border-radius: 8px; color: var(--tx-2); font-size: 14px; line-height: 1.35; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; }
.kb-nav a:hover { color: var(--tx); background: var(--surface); }
.kb-nav a[aria-current] { color: var(--accent); background: var(--surface); }
.kb-nav-home::before { content: '← '; }
.kb-article { min-width: 0; max-width: 760px; }
.kb-article .kicker a { text-decoration: none; }
.kb-article h1 { margin-top: 18px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; }
.kb-article .lead { margin-top: 20px; }
.kb-body { display: grid; gap: 18px; margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); font-size: 17px; line-height: 1.65; }
.kb-body > * { min-width: 0; }
.kb-body p, .kb-body li { color: var(--tx-2); }
.kb-body h2 { margin-top: clamp(20px, 2.6vw, 36px); font-size: var(--t-title); letter-spacing: -0.02em; scroll-margin-top: calc(var(--bar-h) + 24px); }
.kb-body h2:first-child { margin-top: 0; }
.kb-body a:hover { text-decoration-color: currentColor; }
.ui { color: var(--tx); }
.kb-steps { display: grid; gap: 0; list-style: none; counter-reset: step; }
.kb-steps li { counter-increment: step; position: relative; padding: 13px 0 13px 46px; border-top: 1px solid var(--line); }
.kb-steps li:last-child { border-bottom: 1px solid var(--line); }
.kb-steps li::before { content: counter(step); position: absolute; left: 0; top: 13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--tx); font: 400 12px/1 var(--mono); }
.kb-points { display: grid; gap: 8px; padding-left: 1.15em; }
.kb-points li::marker { color: var(--tx-3); }
.kb-note { padding: 16px 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
.kb-note p { color: var(--tx); font-size: 15px; }
.kb-code { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 18px; border-radius: var(--r); background: var(--surface); }
.kb-code code { flex: 1; min-width: 0; padding: 0; background: none; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 14px; }
.kb-keys > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.kb-keys dt { display: flex; flex: none; gap: 4px; order: 2; }
.kb-keys dd { color: var(--tx-2); }
.kb-figure img { width: 100%; border-radius: var(--r); background: var(--surface); }
.kb-see { margin-top: clamp(16px, 2vw, 28px); }
.kb-see h2 { margin: 0 0 8px; color: var(--tx-3); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.kb-see ul { display: grid; gap: 6px; list-style: none; }
.kb-see li::before { content: '→ '; color: var(--tx-3); }
.kb-turn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 80px); }
.kb-turn a { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r); background: var(--surface); text-decoration: none; transition: background-color 0.15s ease; }
.kb-turn a:hover { background: var(--surface-2); }
.kb-turn a.is-after { text-align: right; }
.kb-turn span { color: var(--tx-3); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.kb-turn strong { font-size: 15px; }
.log-more a, .foot-end a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.foot-end a:hover { text-decoration-color: currentColor; }

.table > div { display: grid; grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.table dt { color: var(--tx); }
.table dd { min-width: 0; color: var(--tx-2); overflow-wrap: anywhere; }

.releases { list-style: none; }
.releases li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.releases li:last-child { border-bottom: 1px solid var(--line); }
.rel-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rel-name strong { font-size: 20px; font-weight: 500; }
.rel-name em { color: var(--accent); font-size: 12px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.rel-name span { color: var(--tx-3); font-size: 14px; }
/* a release's name, beside its number */
.rel-code { margin-left: 0.45em; color: var(--tx-2); font-weight: 400; }
.rel-actions { display: flex; align-items: center; gap: 16px; }
.split-note { color: var(--tx-2); font-size: 15px; max-width: 32ch; }

.commands { display: grid; gap: 8px; margin-top: 4px; }
.commands > div { display: grid; grid-template-columns: minmax(110px, 0.22fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: var(--r); background: var(--surface); }
.commands dt { color: var(--tx-2); font-size: 14px; font-weight: 400; }
.commands dd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.commands code { flex: 1; min-width: 0; padding: 0; background: none; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 14px; }
.steps + .commands { margin-top: clamp(32px, 4vw, 56px); }
.copy { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--surface-2); color: var(--tx-2); font: 400 14px/1 var(--font); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; }
.copy:hover { color: var(--tx); background: #28282b; }
.copy.is-done { color: var(--new); }

kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 5px; background: var(--surface-2); color: var(--tx); font-size: 12px; white-space: pre; }

/* changelog */
.log { display: grid; list-style: none; }
.log > li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 4vw, 72px); padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--line); }
.log-head { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 10px; position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; }
.log-head strong { font-size: var(--t-title); letter-spacing: -0.02em; }
.log-head em { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--tx)); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.log-head span { flex-basis: 100%; color: var(--tx-3); font-size: 14px; }
.log-body { display: grid; gap: 18px; max-width: 760px; }
.log-body > p { font-size: 17px; color: var(--tx); }
.log-more { margin-top: 32px; }

/* ---- the way to get it, at the foot of every page ---- */
.get h2 { font-size: round(clamp(34px, 5vw, 68px), 1px); letter-spacing: -0.035em; line-height: 1.02; }
.get p { max-width: 52ch; margin-top: 18px; color: var(--tx-2); font-size: 17px; }

/* ---- footer ---- */
.foot { margin-top: var(--band); border-top: 1px solid var(--line); background: #0c0c0c; }
.foot-in { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); padding-block: clamp(48px, 6vw, 80px) 40px; }
.foot-brand p { max-width: 30ch; margin-top: 14px; color: var(--tx-3); font-size: 14px; }
.foot nav { display: grid; gap: 9px; align-content: start; }
.foot nav h2 { margin-bottom: 6px; color: var(--tx-3); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.foot nav a { color: var(--tx-2); font-size: 14px; text-decoration: none; transition: color 0.15s ease; }
.foot nav a:hover { color: var(--tx); }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px 28px; border-top: 1px solid var(--line); color: var(--tx-3); font-size: 14px; }

/* ---- narrower windows ---- */
@media (max-width: 1000px) {
  .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .log > li { grid-template-columns: minmax(0, 1fr); }
  .split-head, .log-head { position: static; }
  .spot { grid-template-columns: minmax(0, 1fr); }
  .kb-group, .kb-page, .kb-layout { grid-template-columns: minmax(0, 1fr); }
  .kb-rail { display: none; }
  .kb-search { width: 100%; max-width: 560px; }
  .kb-group-head { position: static; }
  .kb-nav { display: none; }
  .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* the search folds into a round button once the page has moved on; the sections of the page sit beside it as pills */
  .kb-search-mark { display: block; height: 0; }
  .kb-search { transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  html.kb-bar-away .kb-search { top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .bar { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  html.kb-bar-away .bar { transform: translateY(-130%); pointer-events: none; }
  .kb-search-row input { width: auto; flex: 1 1 auto; min-width: 0; transition: flex-basis 0.25s ease, opacity 0.2s ease, padding 0.25s ease; }
  .kb-search-btn { flex: none; width: 48px; height: 48px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--tx); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .kb-search-btn svg { width: 20px; height: 20px; }
  .kb-pills { gap: 8px; flex: 1 1 0; min-width: 0; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding: 4px var(--gutter) 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  /* the pills run to the edge of the screen; once they have moved sideways they fade out under the search button */
  .kb-pills.is-faded { mask-image: linear-gradient(90deg, transparent, #000 32px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); }
  .kb-pills::-webkit-scrollbar { display: none; }
  .kb-pills a { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--tx-2); font-size: 14px; white-space: nowrap; text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(0, 0, 0, 0.3); -webkit-tap-highlight-color: transparent; }
  .kb-pills a.is-on { color: var(--tx); box-shadow: 0 0 0 1px var(--accent), 0 8px 20px rgba(0, 0, 0, 0.3); }
  .kb-search.is-compact .kb-search-btn { display: grid; }
  .kb-search.is-compact:not(.is-open) .kb-pills { display: flex; animation: kb-pills-in 0.25s ease both; }
  .kb-search.is-compact:not(.is-open) input { flex: 0 0 0; width: 0; padding: 0; opacity: 0; pointer-events: none; box-shadow: none; }
  .kb-search.is-compact.is-open .kb-search-btn { box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(0, 0, 0, 0.4); }
  @keyframes kb-pills-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
  .bar-in { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .bar-get { display: none; }                      /* no Download in the top bar on a phone: the page has its own Download buttons */
  .bar-menu { display: grid; place-content: center; gap: 8px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bar-menu span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--tx); transition: translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .bar-menu[aria-expanded='true'] span:first-child { translate: 0 5px; rotate: 45deg; }
  .bar-menu[aria-expanded='true'] span:last-child { translate: 0 -5px; rotate: -45deg; }
  /* the name and the mark are larger on a phone too, and the bar a little taller to hold them (whole pixels) */
  :root { --bar-h: 68px; }
  .brand { font-size: 18px; gap: 12px; }
  .brand span { font-size: 21px; }
  .bar .brand img { width: 40px; height: 40px; border-radius: 12px; }
  .bar .brand { padding: 6px 16px 6px 6px; margin-left: -6px; }
  .nav { position: fixed; left: 12px; right: 12px; top: calc(var(--bar-h) + 8px); z-index: 21; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 96%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 50px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.94); transform-origin: top right; transition: opacity 0.2s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.38s; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  /* the links arrive one after the other, a little below where they rest */
  .nav > * { opacity: 0; translate: 0 -8px; transition: opacity 0.18s ease, translate 0.18s ease, color 0.15s ease, background-color 0.15s ease; }
  .nav.is-open > * { opacity: 1; translate: 0 0; transition: opacity 0.35s ease calc(0.06s + var(--k, 0) * 0.05s), translate 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.06s + var(--k, 0) * 0.05s), color 0.15s ease, background-color 0.15s ease; }
  .nav > :nth-child(2) { --k: 1; } .nav > :nth-child(3) { --k: 2; } .nav > :nth-child(4) { --k: 3; } .nav > :nth-child(5) { --k: 4; } .nav > :nth-child(6) { --k: 5; }
  .nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 13px; font-size: 17px; letter-spacing: -0.01em; }
  .nav a:active { background: var(--surface-2); }
  .nav a.nav-out { justify-content: flex-start; gap: 10px; }
  .nav .nav-out svg { width: 18px; height: 18px; }
  .nav a[aria-current]::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .nav a[aria-current] { box-shadow: none; }
  html.nav-open { overflow: hidden; }
  body::before { content: ''; position: fixed; inset: 0; z-index: 19; background: transparent; opacity: 0; pointer-events: none; }
  html.nav-open body::before { opacity: 1; pointer-events: auto; }      /* (it only catches the tap that closes the menu: the page stays as it is) */
  .nav a:hover { background: none; }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .features,
.tools,
.kb-turn { grid-template-columns: minmax(0, 1fr); }
  .kb-turn a.is-after { text-align: left; }
  .band-head { grid-template-columns: minmax(0, 1fr); }
  .strip figure { width: 86%; }
  .commands > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 8px 8px 16px; }
  .collapse th { width: 44%; }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .clips { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .brand i { display: none; }
  .actions .btn.is-large { flex: 1 1 auto; }
  .actions .more { flex-basis: 100%; margin: 4px 0 0; }
}
/* ---- home: the part steps out of the window ----
   Two layers in one frame: the app without its model, and the model cut
   out and placed where it was. site.js sets --p (0 at rest, 1 when the
   scroll is done) on .pop; the window settles back and fades while the part
   comes forward, turns a little and rises over the empty page. On a phone,
   or with reduced motion, nothing is pinned and nothing moves. */
.pop { --p: 0; position: relative; height: 230vh; margin-top: clamp(40px, 5vw, 72px); }
.pop-pin { position: sticky; top: var(--bar-h); height: max(calc(100vh - var(--bar-h)), 560px); height: max(calc(100svh - var(--bar-h)), 560px); display: grid; align-items: center; }
.pop-stage { position: relative; max-width: min(calc(var(--max) + var(--gutter) * 2), max(calc((100svh - var(--bar-h) - 56px) * 1.547 + var(--gutter) * 2), 900px)); }
.pop-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pop-copy { position: absolute; left: var(--gutter); bottom: clamp(8px, 4vw, 56px); width: min(34ch, 38%); opacity: clamp(0, calc((var(--p) - 0.45) * 4), 1); transform: translate3d(0, calc((1 - var(--p)) * 24px), 0); pointer-events: none; }
/* the part cards slot in on the right while the model pulls itself apart, laid out like the app's Properties card; the one the scroll is on lights up */
.pop-parts { position: absolute; right: var(--gutter); top: clamp(16px, 5%, 56px); display: grid; gap: 7px; width: min(232px, 24%); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pop-parts li { --at: calc(0.1 + var(--k) * 0.06); --t: clamp(0, calc((var(--p) - var(--at)) * 9), 1); display: grid; gap: 6px; padding: 9px 13px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(25, 25, 26, 0.94); opacity: var(--t); transform: translate3d(calc((1 - var(--t)) * 36px), 0, 0); transition: border-color 0.25s ease, background 0.25s ease, translate 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pop-parts li.is-cur { translate: -10px 0; border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 9%, rgba(25, 25, 26, 0.94)); }
.pop-copy h2 { margin-top: 14px; font-size: var(--head-size); line-height: 1.02; }      /* this section's headline is as big as an h1 */
.pop-copy p:last-child { margin-top: 14px; color: var(--tx-2); font-size: 15px; }
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .pop { height: auto; }
  .pop-pin { position: static; height: auto; display: block; }
  .pop-copy { display: none; }
  .pop-parts { display: none; }
}

/* things that arrive as they come into view (site.js adds .is-in once) */
.has-reveal [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms); }
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- the design band: a plan of the window and its numbers ---- */
.design-lead, .lib-lead { margin-top: calc(clamp(32px, 4vw, 56px) * -0.55); }
.design-lead { margin-bottom: clamp(32px, 4vw, 56px); }

.plan { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.plan-head h3 { font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.025em; }
.plan-head p { margin-top: 14px; color: var(--tx-2); font-size: 15px; }
.plan-art { grid-column: 2; grid-row: 1 / span 2; }
.plan-notes { grid-column: 1; list-style: none; counter-reset: n; display: grid; gap: 0; border-top: 1px solid var(--line); }
.plan-notes li { counter-increment: n; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.plan-notes li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; color: var(--tx-3); font: 400 12px/1.9 var(--mono); }
.plan-notes strong { font-size: 15px; }
.plan-notes span { color: var(--tx-2); font-size: 14px; line-height: 1.5; }
.plan-window { display: grid; aspect-ratio: 1728 / 1117; gap: 6px; padding: 8px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.plan-window > div { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); color: var(--tx-2); font-size: clamp(10px, 1.1vw, 13px); line-height: 1.2; min-width: 0; }
.plan-window b { color: var(--accent); font: 400 clamp(10px, 1vw, 12px)/1.2 var(--mono); white-space: nowrap; }
.plan-window b::after { content: ' px'; color: var(--tx-3); }
.plan-left, .plan-right { flex-direction: column; gap: 4px; }
.plan-top { grid-column: 1 / -1; align-items: center !important; }
.plan-left { grid-column: 1; }
.plan-view { grid-column: 2; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); }
.plan-right { grid-column: 3; }
.plan-foot { grid-column: 1 / -1; align-items: center !important; }
.plan-view b::after { content: ' px wide'; }
.plan-dock { position: absolute; left: 50%; bottom: 8%; display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: var(--surface-2); transform: translateX(-50%); }
.plan-dock u { width: clamp(8px, 1.5vw, 18px); aspect-ratio: 1; border-radius: 3px; background: var(--line-strong); }
.plan-dock u:nth-child(3) { background: var(--accent); }
.plan-card { position: absolute; left: 6%; top: 24%; width: 24%; height: 44%; border-radius: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.plan-cube { position: absolute; right: 5%; top: 13%; width: clamp(14px, 2.4vw, 30px); aspect-ratio: 1; border-radius: 5px; background: var(--line-strong); }
.tokens { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.tokens dt { font-size: var(--t-figure); line-height: 1.1; letter-spacing: -0.03em; font-weight: 300; }
.tokens dd { margin-top: 8px; color: var(--tx-2); font-size: 14px; line-height: 1.45; }
@media (max-width: 1000px) {
  .tokens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .plan { grid-template-columns: minmax(0, 1fr); }
  .plan-art { grid-column: 1; grid-row: auto; }
  .plan-notes { grid-column: 1; }
}
@media (max-width: 640px) {
  .tokens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- the search, working ---- */
.demo { position: relative; height: 560px; border-radius: clamp(14px, 1.6vw, 22px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(16px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden; }
.pal { position: relative; border-radius: 14px; background: #19191a; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.06); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; border-bottom: 1px solid var(--line); color: var(--tx-3); cursor: text; }
.pal-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--tx); font: 400 15px/1 var(--font); }
.pal-in input::placeholder { color: var(--tx-3); }
.pal-list { list-style: none; height: 318px; overflow-y: auto; padding: 4px 6px; scrollbar-width: thin; }
.pal-list .pal-h { padding: 10px 10px 6px; color: var(--tx-3); font-size: 12px; letter-spacing: 0.01em; }
.pal-list .pal-r { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 10px; border-radius: 6px; color: var(--tx); font-size: 14px; cursor: pointer; }
.pal-list .pal-r svg { flex: none; color: var(--tx-3); }
.pal-list .pal-r b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.pal-list .pal-r mark { background: none; color: var(--tx); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.28); text-underline-offset: 3px; }
.pal-list .pal-r span { color: var(--tx-3); font-size: 12px; }
.pal-list .pal-r.is-on { background: #242426; }
.pal-list .pal-sum { display: flex; align-items: baseline; gap: 12px; padding: 12px 12px; color: var(--tx-2); font-size: 14px; }
.pal-list .pal-sum b { color: var(--tx); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.pal-list .pal-none { padding: 22px 12px; color: var(--tx-3); font-size: 14px; text-align: center; }
.pal-foot { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--tx-3); font-size: 12px; }
.pal-foot kbd { display: inline-block; min-width: 20px; margin-right: 4px; padding: 1px 6px; border-radius: 4px; background: #232325; color: var(--tx-2); font: 400 11px/1.5 var(--font); text-align: center; }
.pal-foot em { margin-left: auto; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-out { position: relative; min-height: 22px; color: var(--tx-2); font-size: 14px; text-align: center; }
.demo-out b { color: var(--tx); font-weight: 500; }
@media (max-width: 1000px) {
  .pal-foot em { display: none; }
}

/* ---- what it saves: bars from the app's own report ---- */
.sv-lead { margin-top: 0; }
.sv { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); align-items: stretch; }
.sv-big, .sv-rows, .sv-levels { padding-top: 20px; border-top: 1px solid var(--line); }
.sv-big { display: grid; gap: 6px; align-content: start; }
.sv-big .sv-sub { margin-bottom: 14px; }
.sv-big b { font-size: clamp(72px, 9vw, 132px); font-weight: 400; line-height: 0.95; letter-spacing: -0.04em; color: var(--fn-edit); }
.sv-big b small { font-size: 0.42em; letter-spacing: 0; margin-left: 4px; color: var(--tx-2); }
.sv-big span { font-size: 17px; color: var(--tx); }
.sv-big em { font-size: 14px; line-height: 1.4; font-weight: 400; font-style: normal; color: var(--tx-3); }
.sv-rows { display: grid; gap: 24px; align-content: start; }
.sv-rows .sv-sub { margin-bottom: -4px; }
.sv-row { display: grid; gap: 8px; }
.sv-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.sv-label em { font-size: 14px; line-height: 1; font-weight: 400; font-style: normal; color: var(--c, var(--fn-edit)); }
.sv-bar { position: relative; height: 34px; border-radius: 3px; background: color-mix(in srgb, var(--surface) 80%, transparent); overflow: hidden; }
.sv-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--surface-2); transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; }
.sv-bar.is-after i { background: var(--c, var(--fn-edit)); box-shadow: none; transition-delay: 0.45s; }
.sv-bar b { position: relative; display: block; padding: 0 12px; font-size: 14px; line-height: 34px; font-weight: 400; color: var(--tx); white-space: nowrap; }
.sv-bar.is-after b, .sv-bar.is-draco b { color: var(--tx); }
/* The label is light, which reads on the dark track; the part of it that lies on the colour is drawn again in dark (a copy of the text, cut off at the end of the bar). */
.sv-bar.is-after b::after, .sv-bar.is-draco b::after { content: attr(data-t); position: absolute; inset: 0; padding: 0 12px; color: #0f0f10; clip-path: inset(0 calc(100% - var(--w, 100%)) 0 0); transition: opacity 0.3s ease 1.4s; }
.has-reveal .sv:not(.is-in) .sv-bar b::after { opacity: 0; }
.has-reveal .sv:not(.is-in) .sv-bar i { width: 0; }
.sv-levels { display: flex; flex-direction: column; min-width: 0; }
.sv-sub { margin-bottom: 18px; color: var(--tx-3); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.sv-cols { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); align-items: end; flex: 1; min-height: 280px; }
.sv-col { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: end; gap: 10px; height: 100%; }
.sv-col b { font-size: 14px; line-height: 1; font-weight: 400; color: var(--tx-2); }
.sv-col i { position: relative; display: block; width: 100%; max-width: 120px; height: var(--h); align-self: end; border-radius: 3px 3px 1px 1px; background: var(--c, var(--fn-edit)); transform-origin: bottom; transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.2s + var(--i) * 0.12s); }
.sv-col.is-original i { background: var(--surface-2); }
.sv-col span { font-size: 14px; }
.sv-col em { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 14px; line-height: 1; font-weight: 400; font-style: normal; color: #0f0f10; }
.has-reveal .sv:not(.is-in) .sv-col i { transform: scaleY(0); }
.sv-note { margin-top: 24px; max-width: 72ch; color: var(--tx-3); font-size: 14px; line-height: 1.55; }
@media (max-width: 1100px) { .sv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sv-big { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: end; column-gap: 24px; } .sv-big .sv-sub { grid-column: 1 / -1; } }
@media (max-width: 760px) { .sv { grid-template-columns: minmax(0, 1fr); } .sv-cols { flex: none; height: 220px; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .sv-bar i, .sv-col i { transition: none; } }

/* ---- the Quick wand, working: the ring alone, in the middle of the page ---- */
.wand-band .band-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.wand-band .band-head h2 { max-width: none; }
.wand-band .lead.wand-lead { margin-left: auto; margin-right: auto; max-width: 56ch; text-align: center; }
.wand-lead { margin-top: 0; }
.wand-demo { position: relative; margin-top: clamp(24px, 4vw, 48px); display: grid; justify-items: center; gap: 18px; user-select: none; -webkit-user-select: none; }
.wand-stage { position: relative; width: min(100%, 720px); height: 400px; touch-action: pan-y; cursor: default; outline: none; }
.wand-stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(100%, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.062) 12%, rgba(255, 255, 255, 0.046) 26%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.016) 58%, rgba(255, 255, 255, 0.006) 78%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 0; }
.wand-stage.has-spot::before { opacity: 0; transition: opacity 1.6s cubic-bezier(0.2, 0.6, 0.2, 1); }
.wand-stage.has-spot.is-lit::before { opacity: 1; }
.wand-out { text-wrap: balance; min-height: 22px; max-width: 64ch; text-align: center; color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.wand-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wand-modes button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx-2); font: 400 14px/1 var(--font); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.wand-modes button:hover { color: var(--tx); background: var(--surface-2); }
.wand-modes button[aria-pressed='true'] { color: var(--tx); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wand-modes .wand-reset { background: transparent; box-shadow: none; color: var(--tx-3); }
.wand-modes .wand-reset:hover { background: transparent; color: var(--tx); }
.wand-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 56px); list-style: none; }
.wand-tips li { display: grid; gap: 10px; align-content: start; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--tx-2); font-size: 14px; line-height: 1.5; }
.wand-tips kbd { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--tx); font: 400 12px/1.2 var(--mono); }
.wand-band .wand-tips { gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(40px, 5vw, 72px); }
.wand-band .wand-tips li { justify-items: center; align-content: start; gap: 14px; padding: 0; text-align: center; background: none; border: 0; color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.wand-band .wand-tips li > * { max-width: 28ch; }
.wand-band .wand-tips kbd { display: inline-flex; align-items: center; justify-content: center; justify-self: center; height: 32px; padding: 0 16px; border-radius: 9.6px; background: #252525; border: 1px solid #2c2c2c; color: #e6e6e8; font: 500 14px/1 var(--font); letter-spacing: 0; text-transform: none; transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease; }
.wand-band .wand-tips li:hover kbd { background: #2f2f2f; border-color: #444; }
/* The ring is the app's own (#quick-wand in its index.html): same colours, same timings, same shapes. */
.wq { --ac: var(--accent); --er: #ff6b6b; --pop: #161616; --bg3: #252525; --wtx: #ededed; --wtx2: #b0b0b0; --ease: cubic-bezier(0.23, 1, 0.32, 1); position: absolute; z-index: 3; width: 0; height: 0; display: none; pointer-events: none; user-select: none; -webkit-user-select: none; color: var(--wtx); font: 400 11px/1.1 var(--font); opacity: 0; transition: opacity 0.08s var(--ease); }
.wq.is-in { opacity: 1; }
.wq .wq-ring { position: absolute; width: 0; height: 0; transform: scale(0.88); transition: transform 0.15s var(--ease); }
.wq.is-in .wq-ring { transform: none; }
.wq-svg { position: absolute; overflow: visible; }
.wq-slice, .wq-sub { fill: var(--pop); stroke: var(--pop); stroke-width: 1; stroke-linejoin: round; transition: fill 0.08s var(--ease), stroke 0.08s var(--ease); }
.wq-slice.is-hot, .wq-sub.is-hot { fill: var(--ac); stroke: var(--ac); }
.wq-slice.danger.is-hot, .wq-sub.danger.is-hot { fill: var(--er); stroke: var(--er); }
.wq-sub { fill: var(--bg3); stroke: var(--bg3); transform-origin: 0 0; animation: wq-fan-in 0.22s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 24ms); }
.wq-pop, .wq-pop2 { fill: var(--ac); stroke: var(--ac); stroke-width: 1; stroke-linejoin: round; opacity: 0; transform: scale(1); transform-origin: 0 0; pointer-events: none; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.42)); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s var(--ease); }
.wq-pop.is-on { opacity: 1; transform: scale(1.075); }
.wq-pop2.is-on { opacity: 1; transform: scale(1.03); }
.wq-pop.danger { fill: var(--er); stroke: var(--er); }
.wq-pop2 { fill: color-mix(in srgb, var(--ac) 40%, var(--bg3)); stroke: color-mix(in srgb, var(--ac) 40%, var(--bg3)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28)); transition: transform 0.15s var(--ease), opacity 0.12s var(--ease); }
.wq-pop2.danger { fill: color-mix(in srgb, var(--er) 40%, var(--bg3)); stroke: color-mix(in srgb, var(--er) 40%, var(--bg3)); }
.wq-sub.is-hot { fill: color-mix(in srgb, var(--ac) 40%, var(--bg3)); stroke: color-mix(in srgb, var(--ac) 40%, var(--bg3)); }
.wq-sub.danger.is-hot { fill: color-mix(in srgb, var(--er) 40%, var(--bg3)); stroke: color-mix(in srgb, var(--er) 40%, var(--bg3)); }
.wq-subico { transition: translate 0.15s var(--ease); animation: wq-fade-in 0.22s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 24ms + 30ms); }
.wq-subico.is-hot { translate: var(--dx, 0) var(--dy, 0); }
.wq-subico div { display: grid; place-items: center; width: calc(18px * var(--k, 1)); height: calc(18px * var(--k, 1)); color: var(--wtx2); }
.wq-subico svg { width: calc(14px * var(--k, 1)); height: calc(14px * var(--k, 1)); stroke: currentColor; fill: none; stroke-width: 2; }
.wq-subico.is-hot div { color: var(--wtx); }
.wq-items, .wq-fanlabels { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.wq-item { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 2px; width: calc(56px * var(--k, 1)); text-align: center; line-height: 1.1; color: var(--wtx); font-size: calc(11px * var(--k, 1)); transition: scale 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wq-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wq-item svg { width: calc(16px * var(--k, 1)); height: calc(16px * var(--k, 1)); stroke: currentColor; fill: none; stroke-width: 2; color: var(--wtx2); }
.wq-item.is-hot { scale: 1.08; translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); }
.wq-item.is-hot, .wq-item.is-hot svg { color: #fff; }
.wq-item.danger, .wq-item.danger svg { color: var(--er); }
.wq-item.danger.is-hot, .wq-item.danger.is-hot svg { color: #fff; }
.wq .is-off { opacity: 0.42; }
.wq-lab { position: absolute; white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: var(--pop); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); color: var(--wtx2); font-size: calc(11px * var(--k, 1)); visibility: hidden; }
.wq-lab-r { margin-left: 8px; opacity: 0.55; font-size: 11px; }
.wq-lab.is-hot { visibility: visible; background: color-mix(in srgb, var(--ac) 40%, var(--bg3)); color: var(--wtx); }
@keyframes wq-fan-in { from { opacity: 0; transform: scale(0.86); } }
@keyframes wq-fade-in { from { opacity: 0; } }
/* the ring pops in from its centre when the demo plays itself (site.js), as it does in the app */
.wq.is-intro .wq-ring { animation: wq-intro 0.6s var(--ease) both; }
@keyframes wq-intro { from { opacity: 0; transform: scale(0.2); } 55% { opacity: 1; transform: scale(1.07); } to { opacity: 1; transform: none; } }
/* the hand that plays the demo while nobody is using it (site.js) */
.wand-ghost { position: absolute; left: 0; top: 0; z-index: 6; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; will-change: transform; }
.wand-ghost.is-on { opacity: 1; }
.wand-ghost svg { position: absolute; left: 0; top: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.wand-ghost-tap { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.75); opacity: 0; }
.wand-ghost.is-tap .wand-ghost-tap { animation: wand-tap 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes wand-tap { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .wq-sub, .wq-subico, .wq-lab { animation: none; } .wq-pop, .wq-pop2, .wand-part { transition: none; } .wq-pop.is-on, .wq-pop2.is-on { transform: none; } .wq-item.is-hot { scale: 1; translate: -50% -50%; } }
/* (a fixed height of 480px used to stand here for screens up to 1000px: the stage, the caption and the buttons need about 500px, so the grid squeezed the caption to one line and its text ran over the buttons) */

/* ---- the library: the parts, to look at ---- */
.lib-lead { margin-bottom: clamp(28px, 3.4vw, 48px); }
.lib-show { display: grid; gap: clamp(36px, 5vw, 64px); }
.lib-tiles { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
.lib-tiles li { display: grid; justify-items: center; gap: 8px; padding: 16px 6px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lib-tiles img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); }
.lib-tiles span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-2); font-size: 12px; }
/* always two rows: the grid has 10, 8, 6 or 4 columns and the tiles past two rows are left out */
@media (max-width: 1100px) { .lib-tiles { grid-template-columns: repeat(8, 1fr); } .lib-tiles li:nth-child(n+17) { display: none; } }
@media (max-width: 860px) { .lib-tiles { grid-template-columns: repeat(6, 1fr); } .lib-tiles li:nth-child(n+13) { display: none; } }
@media (max-width: 560px) { .lib-tiles { grid-template-columns: repeat(4, 1fr); gap: 8px; } .lib-tiles li:nth-child(n+9) { display: none; } }

/* ---- the design band: the app's own parts on a stage ----
   Each .ap is a shadow root that site.js fills from ui-parts.json with the
   app's own stylesheet (ui.css), so the parts look exactly as they do in the
   window. The stage is drawn at 1240 x 880 and scaled to fit (--k). */
.appui { --k: 1; --mx: 0; --my: 0; position: relative; width: 100%; aspect-ratio: 1240 / 500; contain: layout; }
.appui-stage { position: absolute; left: 0; top: 0; width: 1240px; height: 500px; transform: scale(var(--k)); transform-origin: 0 0; }
.ap { position: absolute; left: var(--x); top: var(--y); border-radius: 10px;
  transition: opacity 0.8s ease var(--d), translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d); }
.has-reveal .appui:not(.is-in) .ap { opacity: 0; translate: 0 56px; }
.appui-note { margin-top: 14px; color: var(--tx-3); font-size: 14px; text-align: center; }
@media (max-width: 900px) {
  .appui { aspect-ratio: auto; height: auto; padding: 16px; contain: none; }
  .appui-stage { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .ap { position: static; transform: none; translate: none; }
  .has-reveal .appui:not(.is-in) .ap { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .has-reveal [data-reveal] { opacity: 1; transform: none; }
  .appui:not(.is-in) .ap, .appui .ap { translate: none !important; opacity: 1 !important; transition: none; }
}

/* ---- report a problem: a form that is put together in the browser (report.js) ---- */
.rp { margin-top: clamp(32px, 4vw, 56px); padding-bottom: var(--band); }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.rp-form { display: grid; gap: 20px; min-width: 0; }
.rp-rail { position: sticky; top: calc(var(--bar-h) + 24px); display: grid; gap: 20px; min-width: 0; }
.rp-card { min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rp-card h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 18px; font: 400 20px/1.3 var(--font); letter-spacing: -0.01em; }
.rp-card h2 i { color: var(--tx-3); font: 400 12px/1 var(--mono); letter-spacing: 0.06em; }
.rp-count { color: var(--tx-3); font: 400 14px/1 var(--font); letter-spacing: 0; }
.rp-lead { max-width: 64ch; margin-bottom: 18px; color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.rp-lead .ui, .rp-hint .ui { color: var(--tx); }
.rp code, .rp kbd { font-size: 14px; }
.rp-hint, .rp-note { color: var(--tx-3); font-size: 14px; line-height: 1.5; }
.rp-note { margin: 8px 0 18px; }
.rp-restored { margin-bottom: 20px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); color: var(--tx); font-size: 14px; }

/* fields */
.rp-field { display: grid; gap: 8px; margin-top: 16px; min-width: 0; }
.rp-field:first-of-type { margin-top: 0; }
.rp-field label { color: var(--tx-2); font-size: 14px; }
.rp-field label b { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--tx)); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.rp input[type='text'], .rp input[type='url'], .rp input[type='email'], .rp select, .rp textarea {
  width: 100%;
  border: 0;
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--tx);
  font: 400 15px/1.45 var(--font);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 0.15s ease;
}
.rp input[type='text'], .rp input[type='url'], .rp input[type='email'], .rp select { height: 44px; padding: 0 14px; }
.rp textarea { min-height: 88px; padding: 12px 14px; resize: vertical; }
.rp textarea.mono { font: 400 12px/1.55 var(--mono); }
.rp input::placeholder, .rp textarea::placeholder { color: var(--tx-3); }
.rp input:hover, .rp select:hover, .rp textarea:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx-3) 70%, transparent); }
.rp input:focus-visible, .rp select:focus-visible, .rp textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.rp select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a3a3a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.rp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
.rp-two .rp-field { margin-top: 0; }
.rp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.rp-fields .rp-field { margin-top: 0; }
.rp-detect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.rp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the kinds of problem, and the choices of the model: pills that are really radio buttons */
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { position: relative; display: inline-flex; }
.rp-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.rp-chip span { padding: 10px 16px; border-radius: 999px; background: var(--surface-2); color: var(--tx-2); font-size: 14px; line-height: 1.2; transition: background-color 0.15s ease, color 0.15s ease; }
.rp-chip:hover span { background: #28282b; color: var(--tx); }
.rp-chip input:checked + span { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); color: var(--tx); box-shadow: inset 0 0 0 1px var(--accent); }
.rp-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-tip { margin-top: 14px; color: var(--tx-3); font-size: 14px; line-height: 1.55; }
.rp-tip[data-set='1'] { color: var(--tx-2); }

/* logs: one box per place the text can come from */
.rp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.rp-tab { position: relative; padding: 10px 14px; border: 0; background: none; color: var(--tx-2); font: 400 14px/1.2 var(--font); cursor: pointer; transition: color 0.15s ease; }
.rp-tab:hover { color: var(--tx); }
.rp-tab[aria-selected='true'] { color: var(--tx); box-shadow: inset 0 -2px 0 var(--accent); }
.rp-tab.has::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.rp-panel .rp-hint { margin-bottom: 10px; }
.rp-panel textarea { min-height: 180px; }

/* drop zones: a button that accepts files */
.rp-drop { position: relative; display: grid; place-items: center; gap: 6px; padding: 30px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--tx-2); text-align: center; font-size: 14px; line-height: 1.5; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.rp-drop strong { color: var(--tx); font-size: 15px; }
.rp-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rp-drop:hover, .rp-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rp-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.rp-drop.is-slim { margin-top: 14px; padding: 14px 16px; }
.rp-files { display: grid; gap: 10px; margin-top: 16px; list-style: none; }
.rp-files li { position: relative; display: grid; gap: 4px; padding: 12px 44px 12px 14px; border-radius: var(--r-s); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.rp-files li strong { overflow-wrap: anywhere; }
.rp-files.is-shots li { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.rp-files.is-shots .rp-thumb { grid-row: 1 / span 2; width: 96px; height: 68px; border-radius: 6px; background: var(--surface); object-fit: cover; }
.rp-files.is-shots input { height: 36px; padding: 0 10px; font-size: 14px; }
.rp-meta { color: var(--tx-3); font-size: 14px; overflow-wrap: anywhere; }
.rp-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--tx-3); font: 400 20px/1 var(--font); cursor: pointer; }
.rp-x:hover { background: var(--surface-2); color: var(--tx); }

/* the rail: what is missing, and the ways to send it */
.rp-meter { color: var(--tx-2); font-size: 14px; }
.rp-track { height: 4px; margin: 10px 0 18px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rp-track i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.25s ease; }
.rp-check { display: grid; gap: 10px; list-style: none; }
.rp-check li { display: flex; align-items: flex-start; gap: 12px; color: var(--tx-2); font-size: 14px; line-height: 1.4; }
.rp-check li[data-ok='1'] { color: var(--tx); }
.rp-mark { flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rp-check li[data-ok='1'] .rp-mark { background: var(--accent); box-shadow: none; position: relative; }
.rp-check li[data-ok='1'] .rp-mark::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.rp-consent { display: flex; align-items: flex-start; gap: 12px; color: var(--tx-2); font-size: 14px; line-height: 1.5; cursor: pointer; }
.rp-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.rp-why { min-height: 20px; margin: 12px 0 14px; color: var(--tx-3); font-size: 14px; line-height: 1.5; }
.rp-send .btn { width: 100%; }
.rp-send .btn.is-large { height: 48px; }
.rp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rp-row .btn { padding: 0 10px; font-size: 14px; }
.rp-row .btn:first-child { grid-column: 1 / -1; }
.rp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rp-send .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rp-send .btn:disabled:hover { background: var(--surface-2); }
.rp-send .btn.is-primary:disabled:hover { background: var(--accent); }
.rp-status { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--tx-2); }
.rp-status:empty { display: none; }
.rp-status[data-kind='ok'] { color: var(--new); }
.rp-status[data-kind='err'] { color: var(--fix); }
.rp-status[data-kind='warn'] { color: var(--perf); }
.rp-after { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-s); background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); font-size: 14px; line-height: 1.5; color: var(--tx-2); }
.rp-after a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rp-preview { margin-top: 18px; }
.rp-preview summary { color: var(--tx-2); font-size: 14px; cursor: pointer; }
.rp-preview pre { max-height: 300px; margin-top: 12px; padding: 14px; overflow: auto; border-radius: var(--r-s); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx-2); font: 400 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-reset { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--tx-3); font: 400 14px/1 var(--font); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rp-reset:hover { color: var(--tx); }
.rp-ref { margin-bottom: 14px; color: var(--tx-3); font-size: 14px; }
.rp-ref b { color: var(--tx); font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; }

@media (max-width: 1020px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-rail { position: static; }
}
@media (max-width: 640px) {
  .rp-two, .rp-fields { grid-template-columns: minmax(0, 1fr); }
  .rp-two .rp-field + .rp-field { margin-top: 16px; }
  .rp-files.is-shots li { grid-template-columns: minmax(0, 1fr); }
  .rp-files.is-shots .rp-thumb { grid-row: auto; width: 100%; height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-track i, .rp input, .rp select, .rp textarea, .rp-chip span, .rp-drop { transition: none; }
}

@media (prefers-reduced-motion: reduce) { .bar, .nav, .nav a, .bar-menu span, body::before, .nav > * { transition: none !important; } }

@media (max-width: 760px) {
  .wand-stage { height: 360px; }
  .wand-tips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
  .wand-band .wand-tips { gap: 32px 16px; }                          /* room between the two rows of tips, more than the slide-in of the second one */
  .has-reveal [data-reveal] { transform: translate3d(0, 12px, 0); }  /* a shorter slide on a phone, so what is still arriving never lands on its neighbour */
}

@media (min-width: 761px) and (max-width: 1060px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the demo needs a window of at least 960 px, so phones do not get the button */
.btn-lite { gap: 8px; }
.btn-lite svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .btn-lite { display: none; } }

/* ========== CLAUDE ==========
   The strip on the home page (.cl-band), and claude.html: the example session (.cx), the tool groups (.cl-groups), what stays
   in the user's hands (.cl-points, .cl-shots), prompts to copy (.cl-asklist). Written by tools/build-app-site.js from site.claude. */
.tag-soon { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--soon) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soon) 42%, transparent); color: var(--soon); font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }

.cl-say { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; list-style: none; }
.cl-say li { padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx); font-size: 15px; }
.cl-say li::before { content: '\201C'; color: var(--tx-3); }
.cl-say li::after { content: '\201D'; color: var(--tx-3); }
/* the example session: drawn like a Claude conversation (warm dark, the reply in a serif, tool calls as quiet rows) */
.cx-wrap { max-width: 860px; margin: 0 auto; }
.cx { --cx-bg: #262624; --cx-user: #30302e; --cx-tx: #faf9f5; --cx-mu: #9c9a92; --cx-line: rgba(255, 255, 255, 0.09); --cx-coral: #d97757;
  display: flex; flex-direction: column; border-radius: 18px; background: var(--cx-bg); box-shadow: 0 0 0 1px var(--cx-line), var(--shadow); color: var(--cx-tx); overflow: hidden; }
.cx-bar { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 18px; border-bottom: 1px solid var(--cx-line); color: var(--cx-mu); font-size: 14px; }
.cx-thread { display: flex; flex-direction: column; gap: 26px; padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 44px) clamp(24px, 3vw, 32px); list-style: none; }
.cx-you { align-self: flex-end; max-width: min(88%, 600px); }
.cx-you p { padding: 11px 16px; border-radius: 16px; background: var(--cx-user); color: var(--cx-tx); font-size: 15px; line-height: 1.5; }
.cx-ai { align-self: flex-start; width: 100%; max-width: 720px; }
.cx-ai > p { color: var(--cx-tx); font: 400 17px/1.6 ui-serif, Georgia, Cambria, 'Times New Roman', serif; }
.cx-tools { display: grid; gap: 6px; margin-top: 14px; list-style: none; }
.cx-tools li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cx-line); color: var(--cx-mu); font-size: 14px; }
.cx-ico { flex: none; width: 16px; height: 16px; color: var(--cx-mu); }
.cx-tools code { flex: none; padding: 0; background: none; color: var(--cx-tx); font: 400 12px/1.4 var(--mono); }
.cx-tools span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-chev { flex: none; width: 15px; height: 15px; color: var(--cx-mu); opacity: 0.7; }
.cx-app { margin-top: 14px; }
.cx-wait { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cx-mu); font: 400 14px/1.4 var(--font); }
.cx-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-coral); animation: cx-pulse 1.4s ease-in-out infinite; }
@keyframes cx-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .cx-wait i { animation: none; } }
.cx-ask { display: grid; gap: 4px; max-width: 440px; padding: 16px 18px; border-radius: 12px; background: #19191a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35); font-family: var(--font); }
.cx-ask small { color: var(--tx-3); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.cx-ask small::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--new); vertical-align: 1px; }
.cx-ask b { margin-top: 4px; color: var(--tx); font-size: 15px; font-weight: 500; }
.cx-ask span { color: var(--tx-2); font-size: 14px; line-height: 1.45; }
.cx-ask div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cx-ask em { padding: 7px 14px; border-radius: var(--r-s); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--tx); font-size: 14px; font-style: normal; }
.cx-ask em.is-yes { background: var(--accent); box-shadow: none; color: #fff; }
.cx-ai > p.cx-result { margin-top: 14px; padding: 0; border: 0; color: var(--cx-tx); font: 400 17px/1.6 ui-serif, Georgia, Cambria, 'Times New Roman', serif; font-variant-numeric: tabular-nums; }
.cx-ai > p.cx-result::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--new); vertical-align: 1px; }
.cx-spark { display: block; width: 22px; height: 22px; margin-top: 18px; color: var(--cx-coral); }
.cx-composer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 clamp(14px, 3vw, 28px) clamp(14px, 3vw, 24px); padding: 14px 14px 14px 20px; border-radius: 22px; background: var(--cx-user); box-shadow: inset 0 0 0 1px var(--cx-line); color: var(--cx-mu); font-size: 15px; }
.cx-composer i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--cx-coral); color: #fff; opacity: 0.55; }
.cx-composer svg { width: 17px; height: 17px; }
.cx-wrap figcaption { margin-top: 14px; color: var(--tx-3); font-size: 14px; text-align: center; }

.cl-fine { max-width: 70ch; margin-top: 16px; color: var(--tx-3); font-size: 14px; line-height: 1.55; }
.cl-fine code { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); font: 400 12px/1.4 var(--mono); }

/* what Claude can do */
.cl-asks { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--perf) 13%, transparent); color: var(--perf); font-size: 11px; font-style: normal; letter-spacing: 0.04em; }

/* what stays in the user's hands */
.cl-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: clamp(28px, 4vw, 48px); }
.cl-points > div { padding: 18px 0 20px; border-top: 1px solid var(--line-strong); }
.cl-points dt { font-size: 17px; font-weight: 500; }
.cl-points dd { margin-top: 6px; max-width: 52ch; color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.cl-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(32px, 4vw, 56px); }
.cl-shots img { width: 100%; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 70px -20px rgba(0, 0, 0, 0.55); }
.cl-shots.cl-one { grid-template-columns: minmax(0, 1fr); }
.cl-shots figcaption { margin-top: 12px; color: var(--tx-3); font-size: 14px; line-height: 1.5; }
.cl-privacy { max-width: 70ch; margin-top: clamp(40px, 5vw, 72px); }
.cl-privacy h3 { font-size: 20px; font-weight: 500; }
.cl-privacy p { margin-top: 12px; color: var(--tx-2); font-size: 15px; line-height: 1.6; }

/* prompts to copy */
.cl-asklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(14px, 2vw, 24px); list-style: none; }
.cl-asklist li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 14px 14px 20px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cl-asklist p { color: var(--tx); font-size: 15px; line-height: 1.45; }
.cl-asklist p::before { content: '\201C'; color: var(--tx-3); }
.cl-asklist p::after { content: '\201D'; color: var(--tx-3); }
.cl-faq > div { grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr); }

@media (max-width: 1020px) {
  }
@media (max-width: 760px) {
  .cl-points, .cl-shots, .cl-asklist { grid-template-columns: minmax(0, 1fr); }
  .cl-faq > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cx-you { max-width: 100%; }
}

/* Coming soon, made obvious: a banner across the page, a larger tag, a ribbon on the home picture and a badge in the menu */
.tag-soon.is-large { height: 30px; padding: 0 14px; background: var(--soon); box-shadow: none; color: #1b1200; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.soon-banner { border-bottom: 1px solid color-mix(in srgb, var(--soon) 34%, transparent); background: color-mix(in srgb, var(--soon) 11%, var(--bg)); }
.soon-banner-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; padding-block: 13px; font-size: 15px; text-align: center; }
.soon-banner strong { padding: 3px 12px; border-radius: 999px; background: var(--soon); color: #1b1200; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.soon-banner span { color: var(--tx); }
.nav-soon { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--soon); color: #1b1200; font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }
/* the chat and the part beside it */
.cx-grid { display: block; }
.cx-view { display: none; }
@media (min-width: 1000px) and (hover: hover) {
  .cx-grid.has-3d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(24px, 3vw, 48px); align-items: start; max-width: 1240px; margin: 0 auto; }
  .cx-grid.has-3d .cx-wrap { max-width: none; width: 100%; }
  .cx-view { display: block; position: sticky; top: calc(var(--bar-h) + 24px); height: min(640px, calc(100vh - var(--bar-h) - 56px)); border-radius: 18px; background: radial-gradient(120% 90% at 50% 40%, #232326, #141415 70%); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow); overflow: hidden; }
  .cx-view[hidden] { display: none; }
  .cx-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
}
.cx3d-hud { position: absolute; left: 20px; top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 80%; }
.cx3d-hud b { font-size: 30px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cx3d-hud span { color: var(--tx-2); font-size: 14px; }
.cx3d-hud em { flex-basis: 100%; color: var(--tx-3); font-size: 13px; font-style: normal; }
.cx3d-tool { position: absolute; left: 20px; bottom: 18px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); color: color-mix(in srgb, var(--accent) 70%, #fff); font: 400 12px/1.4 var(--mono); }
.cx3d-tool[hidden] { display: none; }

/* what Claude arrives knowing */
.kn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.kn-card { padding: clamp(20px, 2.6vw, 32px); border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.kn-card h3 { font-size: 17px; font-weight: 500; }
.kn-card p { margin-top: 12px; color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.kn-sub { margin-top: 26px; }
.kn-list, .kn-jobs { margin-top: 14px; list-style: none; counter-reset: kn; }
.kn-list li, .kn-jobs li { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); }
.kn-list li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; counter-increment: kn; }
.kn-list li::before { content: counter(kn, decimal-leading-zero); grid-row: span 2; color: var(--tx-3); font: 400 12px/1.6 var(--mono); }
.kn-list strong, .kn-jobs strong { font-size: 15px; font-weight: 500; }
.kn-list span, .kn-jobs span { grid-column: 2; color: var(--tx-2); font-size: 14px; line-height: 1.5; }
.kn-jobs li { grid-template-columns: minmax(0, 1fr); }
.kn-jobs span { grid-column: 1; }
.kn-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.kn-figures > div { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.kn-figures dt { color: var(--tx); font-size: var(--t-figure); font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kn-figures dd { margin-top: 10px; max-width: 30ch; color: var(--tx-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 1020px) { .kn-grid { grid-template-columns: minmax(0, 1fr); } .kn-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 560px) { .kn-figures { grid-template-columns: minmax(0, 1fr); } }

/* the badge and its dropdown */
.cl-badge { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.cl-badge img { width: 100%; height: auto; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 70px -20px rgba(0, 0, 0, 0.55); }
.cl-badge figcaption { margin-top: 12px; color: var(--tx-3); font-size: 14px; }
.cl-badge h3 { margin-top: 14px; max-width: 24ch; font-size: var(--t-title); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.cl-badge .lead { margin-top: 14px; font-size: 15px; }
.cl-points.is-one { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
@media (max-width: 860px) { .cl-badge { grid-template-columns: minmax(0, 1fr); } .cl-badge figure { max-width: 420px; } }

/* pictures for a client */
.cl-renders { margin-top: clamp(28px, 4vw, 48px); }
.cl-points-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1020px) { .cl-points-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cl-points-3 { grid-template-columns: minmax(0, 1fr); } }

/* Claude after its release: a small accent tag where the amber "Coming soon" used to be */
.tag-new { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
.tag-new.is-large { height: 30px; padding: 0 14px; background: var(--accent); box-shadow: none; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-new { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }

.steps-note { max-width: 62ch; margin: 28px 0 0; color: var(--tx-2); font-size: 15px; line-height: 1.6; }
.steps-note a { color: var(--accent); }
.chrome-note { display: flex; align-items: center; gap: 14px; max-width: 62ch; margin: 28px 0 0; padding: 14px 18px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.chrome-note b { color: var(--tx); font-weight: 500; }
.chrome-note a { color: var(--accent); }
.chrome-ico { flex: 0 0 34px; width: 34px; height: 34px; }
.allfeat li .tag-new { margin-left: 8px; height: 18px; padding: 0 7px; font-size: 11px; }

/* Claude's strip on the home page and the Claude page: its own orange is the accent in them */
.cl-band, .page-claude .band { --accent: var(--claude); --accent-hover: color-mix(in srgb, var(--claude) 80%, #fff); }

/* ---- compression: a third bar and column for Draco, and the three notes under the charts ---- */
.sv-bar.is-draco i { background: var(--fn-selection); transition-delay: 0.7s; }
.sv-col.is-draco i { background: var(--fn-selection); }
.cp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.cp-points > div { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.cp-points dt { font-size: 17px; color: var(--tx); }
.cp-points dd { margin-top: 8px; color: var(--tx-2); font-size: 15px; }
@media (max-width: 760px) { .cp-points { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- clean-up showcase on the features page ---- */
.stars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(18px, 2vw, 32px); margin-top: clamp(32px, 4vw, 56px); }
.star video, .star img { display: block; width: 100%; aspect-ratio: 592 / 370; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.star figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin-top: 16px; }
.star figcaption i { color: var(--tx-3); font: 400 12px/1.9 var(--mono); }
.star figcaption strong { color: var(--tx); font-size: 21px; font-weight: 500; }
.star figcaption span { grid-column: 2; color: var(--tx-2); font-size: 15px; }
.star figcaption .clip-more { justify-self: start; margin-top: 4px; color: var(--accent-hover); font-size: 14px; text-decoration: none; }
.star figcaption .clip-more { grid-column: 2; }
.star figcaption .clip-more:hover { color: #fff; }
.star .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1060px) { .stars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stars { grid-template-columns: minmax(0, 1fr); } }

/* features page: a row of cards per group, scrolled sideways, running off the right edge */
.fcar { --edge: calc((100vw - min(100vw, var(--max) + var(--gutter) * 2)) / 2 + var(--gutter)); margin-inline: calc(var(--edge) * -1); }      /* --edge: how far the text column is from the edge of the screen */          /* the row runs from one edge of the screen to the other: a card scrolled out of the way goes off the edge, not off the text column */
.fcar-track { display: flex; gap: 16px; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--edge) var(--gutter); scroll-padding-inline: var(--edge) 0; }      /* (at rest the first card stands where the text does) */
.fcar-track::-webkit-scrollbar { display: none; }
.fcar-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-right: var(--edge); }
.fcar-nav button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--tx); cursor: pointer; transition: opacity 0.2s ease, background-color 0.2s ease; }
.fcar-nav button:hover:not(:disabled) { background: var(--line-strong); }
.fcar-nav button:disabled { opacity: 0.35; cursor: default; }
.fcar-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the last band: white, two columns, the online version beside the installed app */
.band.compare { margin-top: var(--band); padding-block: clamp(72px, 9vw, 128px); border-top: 0; background: #fff; color: #1d1d1f; }
main:has(.compare) + .foot { margin-top: 0; }
.compare h2 { max-width: 14ch; margin-inline: auto; text-align: center; font-size: round(clamp(34px, 5vw, 64px), 1px); letter-spacing: -0.035em; line-height: 1.04; color: #1d1d1f; }
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 80px); max-width: 900px; margin: clamp(48px, 6vw, 80px) auto 0; }
.cmp-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cmp-tag { color: #bf4800; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.cmp-col h3 { margin-top: 6px; font-size: var(--t-title); font-weight: 500; letter-spacing: -0.02em; color: #1d1d1f; }
.cmp-sub { max-width: 24ch; margin-top: 10px; color: #1d1d1f; font-size: 17px; font-weight: 500; line-height: 1.3; }
.cmp-act { display: grid; justify-items: center; gap: 16px; margin-top: 26px; }
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #0071e3; color: #fff; font-size: 17px; text-decoration: none; transition: background-color 0.15s ease; }
.cmp-btn:hover { background: #0077ed; }
.cmp-link { color: #0066cc; font-size: 17px; text-decoration: none; }
.cmp-link::after { content: ' ›'; }
.cmp-link:hover { text-decoration: underline; }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; gap: 64px; } .compare .btn-lite, .cmp-btn.btn-lite { display: none; } }

.compare .cmp-col p { max-width: none; margin-top: 0; }
.compare .cmp-tag { color: #bf4800; }
.compare .cmp-sub { max-width: 24ch; margin-top: 10px; color: #1d1d1f; }
main { overflow-x: clip; }
.clip figcaption strong { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.clip figcaption span { font-size: 17px; line-height: 1.45; }
.clip figcaption .clip-more { font-size: 17px; }
.tools strong { font-size: 17px; } .tools span { font-size: 15px; }
.allfeat li { font-size: 15px; } .allfeat h3 { font-size: 14px; }
.fcar-stars .stars.fcar-track { display: flex; margin-top: 0; }
.fcar-stars .star { flex: none; width: clamp(260px, 24vw, 320px); scroll-snap-align: start; }
.fcar-stars .star .clip-art { aspect-ratio: 3 / 4; padding: 12px; }
.fcar-stars { margin-top: clamp(32px, 4vw, 56px); }
.star figcaption strong { font-size: 21px; } .star figcaption span { font-size: 17px; } .star figcaption .clip-more { font-size: 17px; }
/* Claude band: the screenshot fills the width, the words sit on it */
.band.cl-band { padding-top: 0; border-top: 0; }
.cl-hero { position: relative; display: grid; min-height: clamp(560px, 62vw, 880px); overflow: hidden; background: #0b0b0c; }
.cl-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cl-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(8, 8, 9, 0.58); }
.cl-hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(56px, 8vw, 120px) var(--gutter); }
.cl-hero-in h2 { max-width: 16ch; margin-top: 18px; font-size: round(clamp(40px, 6.4vw, 92px), 1px); letter-spacing: -0.04em; line-height: 1; }
.cl-hero-in .lead { max-width: 40ch; margin-top: 22px; color: var(--tx); font-size: var(--t-lead); }
.cl-hero-in .actions { margin-top: 30px; }
.cl-hero-in .cl-say { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: clamp(40px, 6vw, 80px); gap: 12px; }
.cl-hero-in .cl-say li { padding: 11px 20px; font-size: 17px; background: rgba(20, 20, 22, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tile-art .art-m-flash,
.tile-art .art-m-stack { transform-box: fill-box; transform-origin: center; }
.tile-art .art-m-flash { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tile-art .art-m-flash { animation: art-m-flash var(--cycle) ease-in-out infinite; }
  .tile-art .art-m-stack { animation: art-m-stack var(--cycle) ease-in-out infinite; }
}
/* Delete small parts: the little parts sit on the model in the same grey, then light up in the tile colour (picked out), then fade away one after another (no scaling) */
@keyframes art-m-small { 0% { opacity: 0; stroke: var(--art-line); filter: none; } 8%, 28% { opacity: 1; stroke: var(--art-line); filter: none; } 38%, 46% { opacity: 1; stroke: var(--tile-c, #fff); filter: none; } 58%, 100% { opacity: 0; stroke: var(--tile-c, #fff); filter: none; } }
/* Remove floating pieces: a stray piece pops out of sight at once; a burst of short lines (drawn out and then wiped away, never faded) (a drawn "poof") mark where it was */
.tile-art .art-piece { transform-box: fill-box; transform-origin: center; }
.tile-art .art-pop { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tile-art .art-m-fade { animation: art-m-fade var(--cycle) linear infinite; animation-delay: calc(var(--i) * 0.14s); }
  .tile-art .art-pop { animation: art-pop var(--cycle) ease-out infinite; animation-delay: calc(var(--i) * 0.14s); }
}
/* (the card-wide start offset of this tile would otherwise win over the stagger above) */
.tile-art.art-floating .art-m-fade, .tile-art.art-floating .art-pop { animation-delay: calc(var(--i) * 0.14s); }
@keyframes art-m-fade { 0%, 22% { opacity: 1; transform: scale(1); } 22.01%, 89.99% { opacity: 0; transform: scale(1); } 90% { opacity: 1; transform: scale(0.82); } 94% { opacity: 1; transform: scale(1.07); } 97% { opacity: 1; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }
@keyframes art-pop { 0%, 22% { stroke-dashoffset: 1; opacity: 0; } 22.01% { stroke-dashoffset: 1; opacity: 1; } 26% { stroke-dashoffset: 0; opacity: 1; } 31% { stroke-dashoffset: -1; opacity: 1; } 31.01%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes art-m-away { 0%, 24% { opacity: 1; transform: translate(0, 0) scale(1); } 46%, 88% { opacity: 0; transform: translate(0, -10px) scale(0.3); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes art-m-flash { 0%, 14% { opacity: 0; } 24%, 44% { opacity: 1; } 58%, 88% { opacity: 0; } 100% { opacity: 0; } }
@keyframes art-m-stack { 0%, 12% { opacity: 1; transform: translate(26px, -16px); } 40%, 52% { opacity: 1; transform: translate(0, 0); } 66%, 88% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(26px, -16px); } }
.cmp { display: block; max-width: 980px; }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 48px); }
.cmp-head::before { content: ''; }
.cmp-head .cmp-col { grid-column: auto; }
.cmp-table { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid #d2d2d7; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 48px); align-items: center; min-height: 72px; border-bottom: 1px solid #d2d2d7; }
.cmp-a { display: grid; justify-items: center; color: #1d1d1f; font-size: 15px; text-align: center; }
.cmp-yes { width: 26px; height: 26px; color: #0071e3; }
.cmp-no { color: #86868b; font-size: 20px; line-height: 1; }
.cmp-note { margin-top: 22px; color: #6e6e73; font-size: 14px; text-align: center; }
.compare .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) { .cmp-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmp-head::before { display: none; } .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 14px; } }
.fcar,
.fcar-track,
.star,
.clip { position: relative; }
.cmp-row, .cmp-a, .compare { position: relative; }
.cmp-col h3 { white-space: nowrap; }
.fcar-stars .star .clip-art { padding: 0; }
/* (the cards of the carousel used to force transform-box: view-box on every part of a drawing, so each part scaled about the middle of the card; the drawings set fill-box themselves: each part grows from its own place) */
/* Claude band, second take: big headline at the left, the whole screenshot below it, the prompts on the picture */
.band.cl-band { padding-top: clamp(72px, 9vw, 136px); }
.cl-hero { display: block; min-height: 0; background: none; overflow: visible; }
.cl-hero::before { display: none; }
.cl-hero-in { position: static; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 clamp(24px, 5vw, 80px); align-items: end; padding: 0 var(--gutter); text-align: left; }
.cl-hero-in .kicker { grid-column: 1 / -1; }
.cl-hero-in h2 { max-width: none; margin-top: 18px; font-size: round(clamp(44px, 7.4vw, 112px), 1px); letter-spacing: -0.045em; line-height: 0.98; }
.cl-hero-side { padding-bottom: 10px; }
.cl-hero-in .lead { max-width: 34ch; margin: 0; color: var(--tx-2); font-size: var(--t-lead); }
.cl-hero-in .actions { margin-top: 24px; }
.cl-shot { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.cl-shot > img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.cl-shot .cl-say { position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vw, 44px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin: 0; padding: 0 var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; }
.cl-shot .cl-say li { padding: 11px 20px; font-size: 17px; background: rgba(20, 20, 22, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 760px) { .cl-hero-in { grid-template-columns: 1fr; } .cl-hero-side { padding-top: 22px; } .cl-shot .cl-say { position: static; padding-top: 18px; } }
.tile-art .art-scaled, .tile-art .art-scaled * { vector-effect: non-scaling-stroke; }
.fcar-track { cursor: grab; }
.fcar-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.fcar-track a { cursor: pointer; }
/* the whole card is the link to its page: the "Read more" link is stretched over it, and the hover fill says so (a drag in the carousel does not follow it: see the click guard in site.js) */
:is(.clip, .star):not(.kb-anim) { position: relative; }
:is(.clip, .star):not(.kb-anim) figcaption .clip-more { position: static; }
:is(.clip, .star):not(.kb-anim) figcaption .clip-more::after { content: ''; position: absolute; inset: 0; }
.star figcaption { grid-template-columns: minmax(0, 1fr); }
.star figcaption i { display: none; }
.star figcaption span, .star figcaption .clip-more { grid-column: 1; }
/* on hover the picture is filled with its colour (see the hover above); the parts that knock out what is behind them take the same colour */
:is(.clip, .star):hover .clip-art .art-solid, :is(.clip, .star):hover .clip-art .art-fnd { fill: var(--card-bg); }
/* the colours the drawings take from the card are registered so that they fade with it instead of switching */
@property --art-dim { syntax: '<color>'; inherits: true; initial-value: #46464a; }
@property --card-bg { syntax: '<color>'; inherits: true; initial-value: #19191a; }
:is(.clip, .star) .clip-art { transition: --fill-r 0.7s cubic-bezier(0.45, 0.05, 0.25, 1), --glow 0.5s ease, color 0.4s ease 0.1s, stroke-width 0.35s ease, --art-dim 0.4s ease 0.1s, --card-bg 0.5s ease; }
:is(.clip, .star) .clip-art .art-hot { transition: filter 0.4s ease, stroke 0.4s ease 0.1s; }
:is(.clip, .star):hover .clip-art .art-hot { filter: none; }      /* (the coloured glow of the lines goes: they are black on the fill) */
.tile-art .art-m-small { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .tile-art .art-m-small { animation: art-m-small var(--cycle) ease-in-out infinite; animation-delay: calc(var(--i) * 0.09s); } }
.tile-art .art-m-bob { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .tile-art .art-m-bob { animation: art-m-bob 2.5s ease-in-out infinite; animation-delay: var(--bd); } }
@keyframes art-m-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--bx), var(--by)); } }
.tile-art .art-m-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: no-preference) { .tile-art .art-m-draw { animation: art-m-draw var(--cycle) ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .tile-art .art-m-draw { stroke-dashoffset: 0; } }
/* the cards that take something away: the part that is wrong goes from the line colour to the bright one and is gone; the result is drawn in (art-m-draw) as it goes */
@media (prefers-reduced-motion: no-preference) { .tile-art .art-old { animation: art-old var(--cycle) ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .tile-art .art-old { opacity: 0; } }
/* a gear turning, drawn straight in screen space (a turning group in the isometric shear would draw an uneven line): 12 frames of the gear 2.5 degrees apart, one visible at a time; the 12 teeth make the picture repeat every 30 degrees, so the loop is seamless. 72 degrees a second, as it was. */
.tile-art .art-gf { opacity: 0; }
.tile-art .art-gf0 { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .tile-art .art-gf { animation: art-gframe 0.4167s step-end infinite; animation-delay: calc(var(--k) * 0.034722s); } }
@keyframes art-gframe { 0% { opacity: 1; } 8.3333% { opacity: 0; } 100% { opacity: 0; } }
@keyframes art-old { 0%, 16% { stroke: var(--art-line); opacity: 1; } 30% { stroke: var(--tile-c, #fff); opacity: 1; } 46%, 88% { stroke: var(--tile-c, #fff); opacity: 0; } 100% { stroke: var(--art-line); opacity: 1; } }
@keyframes art-m-draw { 0%, 26% { stroke-dashoffset: 1; opacity: 1; } 56%, 82% { stroke-dashoffset: 0; opacity: 1; } 94% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
/* Claude band: the picture sits inside the page margins with rounded corners, not edge to edge */
.cl-shot { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.cl-shot > img { border-radius: clamp(18px, 2.4vw, 32px); box-shadow: 0 0 0 1px var(--line); }
.cl-shot .cl-say { left: var(--gutter); right: var(--gutter); max-width: none; margin-inline: 0; padding: 0 clamp(16px, 2.4vw, 36px); bottom: clamp(16px, 2.6vw, 40px); }
@media (max-width: 760px) { .cl-shot .cl-say { left: auto; right: auto; padding: 18px 0 0; } }
/* the comparison, centred: two equal columns, each row's question in the middle above its two answers */
.cmp { max-width: 820px; }
.cmp-head, .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-head::before { display: none; }
.cmp-row { grid-template-rows: auto auto; row-gap: 10px; align-items: start; padding-block: 22px; min-height: 0; }
.cmp-a { min-height: 26px; align-content: center; }
.cmp-row { grid-template-rows: auto; padding-block: 0; min-height: 64px; align-items: center; }
.cmp-a { display: flex; justify-content: center; }
.cmp-on, .cmp-off { display: inline-flex; align-items: center; gap: 10px; }
.cmp-off { color: #86868b; }
.cmp-off .cmp-no { font-size: 17px; }
.cmp-on, .cmp-off { width: 180px; justify-content: flex-start; }
.cmp-off .cmp-no { display: inline-grid; place-items: center; width: 26px; flex: none; }
.cl-shot > video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 940; object-fit: cover; border-radius: clamp(18px, 2.4vw, 32px); box-shadow: 0 0 0 1px var(--line); background: var(--surface); cursor: pointer; }
/* the prompts on the video are white pills */
.cl-shot .cl-say li { background: rgba(255, 255, 255, 0.94); color: #1d1d1f; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cl-shot .cl-say li::before, .cl-shot .cl-say li::after { color: #86868b; }
/* the prompts sit under the video, not on it */
.cl-shot .cl-say { position: static; left: auto; right: auto; bottom: auto; margin: 22px 0 0; padding: 0; max-width: none; justify-content: flex-start; }
.cl-shot .cl-say li { box-shadow: none; }
/* the prompts under the video are dark pills again */
.cl-shot .cl-say li { background: var(--surface); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cl-shot .cl-say li::before, .cl-shot .cl-say li::after { color: var(--tx-3); }
/* a full picture of the app under the derailleur */
/* no focus frame around a picture in the strip */
.strip, .strip figure, .strip .zoom, .strip img { outline: none; }
.strip .zoom:focus, .strip .zoom:focus-visible, .strip figure:focus, .strip figure:focus-visible, .strip:focus, .strip:focus-visible { outline: none; box-shadow: none; }

/* Pick how you run it: in the site's own dark look. It used to be a white band in the style of Apple's comparison pages
   (pill buttons, circled ticks, orange tags, "›" links). */
.band.compare { background: transparent; color: var(--tx); border-top: 1px solid var(--line); padding-block: clamp(64px, 8vw, 112px); }
.compare h2 { max-width: 22ch; margin-inline: 0; text-align: left; font-size: var(--t-section); letter-spacing: -0.03em; line-height: 1.1; color: var(--tx); }
.cmp { max-width: none; margin-top: clamp(32px, 4vw, 56px); }
.cmp-col { align-items: flex-start; text-align: left; }
.cmp-tag, .compare .cmp-tag { color: var(--tx-3); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.cmp-col h3 { color: var(--tx); font-size: var(--t-title); font-weight: 500; letter-spacing: -0.02em; }
.cmp-sub, .compare .cmp-sub { max-width: 34ch; margin-top: 8px; color: var(--tx-2); font-size: 15px; font-weight: 400; line-height: 1.5; }
.cmp-act { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 18px; margin-top: 20px; }
.cmp-btn { min-height: 0; height: 36px; padding: 0 16px; border-radius: var(--r-s); background: var(--accent); color: #fff; font: 500 14px/1 var(--font); }
.cmp-btn:hover { background: var(--accent-hover); }
.cmp-btn.btn-lite { background: var(--surface-2); color: var(--tx); }
.cmp-btn.btn-lite:hover { background: #28282b; }
.cmp-link { color: var(--tx-2); font-size: 14px; }
.cmp-link::after { content: ' →'; }
.cmp-link:hover { color: var(--tx); text-decoration: none; }
.cmp-table { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.cmp-row { min-height: 56px; border-bottom: 1px solid var(--line); }
.cmp-a { color: var(--tx); font-size: 15px; }
.cmp-a { justify-content: flex-start; }
.cmp-on, .cmp-off { width: auto; }
.cmp-yes { width: 18px; height: 18px; color: var(--accent); }
.cmp-off, .cmp-no { color: var(--tx-3); }
.cmp-off .cmp-no { width: 18px; font-size: 15px; }
.cmp-note { margin-top: 18px; color: var(--tx-3); font-size: 14px; text-align: left; }
@media (max-width: 760px) { .cmp-act { grid-auto-flow: row; } }
/* no thin lines between the sections of the home page */
.page-home .band, .page-home .band.compare, .page-home .foot { border-top: 0; }
/* Quick wand band: the title, the line and the ring sit closer together */
.wand-band .band-head { margin-bottom: 14px; gap: 8px; }
.wand-band .lead.wand-lead { margin-top: 0; }
.wand-demo { margin-top: clamp(0px, 1vw, 12px); }
/* Titles and the lines under them sit closer together everywhere */
.band-head { gap: 8px 32px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.split-head { gap: 10px; }
.hero h1 { margin-top: 16px; }
.hero .lead { margin-top: clamp(14px, 1.6vw, 20px); }
.hero .actions { margin-top: clamp(20px, 2vw, 28px); }
.page-head h1 { margin-top: 14px; }
.page-head .lead { margin-top: 14px; }
.page-head .actions { margin-top: 24px; }
.cl-hero-in h2 { margin-top: 12px; }
.cl-hero-in .lead { margin-top: 14px; }
.cl-hero-in .actions { margin-top: 22px; }
/* The five claim cards on a phone: a strip to swipe, with the next card peeking in, and cards that are no taller than they need to be */
@media (max-width: 760px) {
  .bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .bento::-webkit-scrollbar { display: none; }
  .bento > .tile, .bento > .tile:nth-child(n+4), .bento > .tile:last-child { flex: 0 0 min(78%, 320px); grid-column: auto; scroll-snap-align: start; min-height: 0; gap: 10px; padding: 18px; border-radius: 22px; }
  .tile-art { height: 92px; }
  .tile-label { margin: 4px 0 0; }
  .tile h2 { max-width: none; margin: 0; font-size: 26px; line-height: 1.08; }
  .tile-line { margin: 2px 0 0; font-size: 14px; }
}

/* ---- the opening: the axle on the page's own background, pulled apart by the scroll ----
   Only the model (hero3d.js draws it into .pop-3d, full width of the pinned screen); the poster stands in until it is drawn, on a phone, and
   without WebGL or with reduced motion. Small print under it says what the page shows and where the model comes from. */
.pop.is-axle { height: 228vh; margin-top: clamp(56px, 8vw, 120px); }
.pop.is-axle .pop-stage { position: relative; display: block; height: 100%; max-width: calc(var(--max) + var(--gutter) * 2); }
.pop.is-axle .pop-poster { position: absolute; left: 0; right: 0; top: 0; bottom: 56px; width: 100%; height: calc(100% - 56px); object-fit: contain; pointer-events: none; }
.pop.is-axle.is-3d .pop-poster { visibility: hidden; }
.pop.is-axle .pop-3d { z-index: 0; }
.pop.is-axle .pop-copy { z-index: 1; left: var(--gutter); bottom: clamp(64px, 8vw, 104px); width: min(32ch, 36%); opacity: 1; transform: none; }
/* the headline arrives with the scroll, one row after another (--p is how far the model is pulled apart; each row has its own start --s) */
.pop-copy h2 .pop-row { display: block; }
.pop.is-axle .pop-row { --t: clamp(0, calc((var(--p) - var(--s)) * 10), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 22px)); }
@media (prefers-reduced-motion: reduce) { .pop.is-axle .pop-row { opacity: 1; transform: none; } }
/* the corner at the top right: how far the model is pulled apart, a small graph of what was saved, and the small print */
.pop-info { position: absolute; z-index: 1; top: clamp(20px, 3.4vw, 48px); right: var(--gutter); width: min(300px, 38%); display: grid; gap: 8px; justify-items: end; pointer-events: none; text-align: right; }
.pop-info-top { display: grid; gap: 8px; justify-items: end; width: 100%; }
.pop-bars { display: grid; gap: 4px; width: 100%; }
.pop-bars small { color: var(--tx-3); font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
.pb { display: grid; grid-template-columns: 52px minmax(0, 1fr) 54px; align-items: center; gap: 8px; color: var(--tx-3); font-size: 11px; line-height: 1; }
.pb i { font-style: normal; text-align: left; }
.pb s { display: block; width: var(--w); height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); justify-self: start; transform-origin: left; }
.pop.is-armed .pb s { transform: scaleX(0); }
.pop.is-armed.is-in .pb s { transform: scaleX(1); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.25s + var(--i, 0) * 0.14s); }
.pop.is-armed .pb em { opacity: 0; }
.pop.is-armed.is-in .pb em { opacity: 1; transition: opacity 0.6s ease calc(0.6s + var(--i, 0) * 0.14s); }
.pb.is-last s { background: var(--accent); }
.pb em { font-style: normal; color: var(--tx-2); font-variant-numeric: tabular-nums; text-align: right; }
.pop-note { margin: 0; max-width: 30ch; color: var(--tx-3); font-size: 11px; line-height: 1.5; }
.pop-info-top .pop-note + .pop-note { margin-top: -8px; }   /* the credit line follows the result line with no gap: one small print */
@media (max-width: 860px) {
  .pop.is-axle { height: 212vh; }
  .pop.is-axle .pop-pin { position: sticky; top: var(--bar-h); height: max(calc(100svh - var(--bar-h)), 520px); display: block; }
  .pop.is-axle .pop-stage { position: relative; height: 100%; }
  .pop.is-axle .pop-poster { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: calc(100% - 40px); object-fit: contain; }
  .pop.is-axle .pop-copy { display: block; width: auto; right: var(--gutter); bottom: 22px; }
  .pop.is-axle .pop-3d { inset: 0; height: 100%; }                  /* the model fills the screen: it is wider than a phone, so its sides are cropped */
  .pop-info { display: contents; }
  .pop-info-top { position: absolute; z-index: 1; top: 14px; right: var(--gutter); width: min(210px, 56%); gap: 10px; pointer-events: none; }
  .pop-info-top .pop-note { max-width: none; margin-top: -4px; text-align: right; }
  .pop-info-top .pop-note + .pop-note { margin-top: -10px; }

  .pop.is-axle .pop-copy { bottom: 20px; }
  .pb { grid-template-columns: 50px minmax(0, 1fr) 44px; font-size: 11px; }
  .pb i { white-space: nowrap; }
  .pop-note { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop.is-axle { height: auto; margin-top: 56px; }
  .pop.is-axle .pop-pin { position: static; height: auto; display: block; }
  .pop.is-axle .pop-stage { height: auto; }
  .pop.is-axle .pop-poster { position: static; width: 100%; height: auto; }
  .pop.is-axle .pop-copy { position: static; display: block; width: auto; margin-top: 24px; }
  .pop-info { position: static; width: auto; margin-top: 16px; justify-items: start; text-align: left; }
}

/* Credits page: groups of libraries, one row each (name and maker, what it does, licence) */
.credits { display: grid; gap: clamp(32px, 4vw, 56px); }
.credit-group h2 { margin-bottom: 14px; color: var(--tx-3); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.credit-group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.credit-group li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 8px 28px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.credit-name a { color: var(--tx); font-size: 17px; font-weight: 500; text-decoration: none; }
.credit-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.credit-name span { display: block; margin-top: 3px; color: var(--tx-3); font-size: 14px; }
.credit-group li p { margin: 0; color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.credit-group li em { color: var(--tx-3); font-size: 14px; font-style: normal; text-align: right; }
.credit-note { max-width: 62ch; color: var(--tx-2); font-size: 14px; line-height: 1.6; }
.credit-note a { color: var(--tx); }
@media (max-width: 720px) { .credit-group li { grid-template-columns: 1fr; } .credit-group li em { text-align: left; } }

/* Live models on the features page (features3d.js): a picture until the model is drawn, then a canvas with the numbers over it */
.live-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.live-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.live.is-live .live-poster { display: none; }
.live.is-live .live-stage { touch-action: none; user-select: none; }
.live[data-live="wipe"].is-live .live-stage { cursor: ew-resize; }
.live[data-live="fast"].is-live .live-stage { cursor: grab; }
.live-stage.is-drag { cursor: grabbing !important; }
.live-note { max-width: 72ch; margin-top: 14px; color: var(--tx-3); font-size: 14px; line-height: 1.55; }
.live-bar { position: absolute; inset: 20px 24px auto; display: flex; justify-content: space-between; gap: 24px; pointer-events: none; }
.live-bar.is-single { justify-content: flex-start; gap: 48px; }
.live-side { display: grid; gap: 3px; }
.live-side.is-after { text-align: right; }
.live-side small { color: var(--tx-3); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.live-side strong { font-size: var(--t-figure); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.live-side span { color: var(--tx-2); font-size: 14px; }
.live-handle { position: absolute; top: 0; bottom: 0; width: 48px; margin-left: -24px; display: grid; place-items: center; cursor: ew-resize; outline-offset: -6px; }
.live-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.9); }
.live-handle i { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f3; color: #111; font-style: normal; font-size: 15px; letter-spacing: 2px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.live-handle i::before { content: '‹ ›'; }
.live-chips { position: absolute; bottom: 20px; left: 50%; display: flex; gap: 4px; padding: 4px; transform: translateX(-50%); border-radius: 999px; background: rgba(16, 16, 16, 0.82); box-shadow: inset 0 0 0 1px var(--line-strong); }
.live-chips button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--tx-2); font: inherit; font-size: 14px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.live-chips button:hover { color: var(--tx); }
.live-chips button[aria-pressed="true"] { background: var(--accent); color: #fff; }
/* the step button of the Fasteners model: flat like the other buttons, a pill with an arrow that nudges on hover */
.btn.live-step { border: 0; cursor: pointer; gap: 10px; height: 46px; padding: 0 16px 0 22px; border-radius: 999px; }
.live-step svg { flex: none; transition: transform 0.2s ease; }
.live-step:hover svg { transform: translateX(3px); }
.live-step[data-phase="2"] svg { transform: rotate(180deg); }
.live-step[data-phase="2"]:hover svg { transform: rotate(180deg) translateX(3px); }
.btn.live-step:focus, .btn.live-step:focus-visible { outline: none; border-radius: 999px; }
.btn.live-step:focus-visible { background: var(--accent-hover); }
@media (prefers-reduced-motion: reduce) { .live-step svg { transition: none; } }
.live-go { position: absolute; bottom: 20px; left: 24px; display: flex; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .live-chips button { transition: none; } }

/* The search section is laid out like the Quick wand's: the palette sits on the page itself, with a soft spotlight behind it, the tips in a row below */
.demo-band .demo { position: relative; display: grid; justify-items: center; align-content: center; gap: 18px; height: auto; min-height: 460px; padding: 0; margin-top: clamp(0px, 1vw, 12px); overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.demo-band .demo::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(100%, 860px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.062) 12%, rgba(255, 255, 255, 0.046) 26%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.016) 58%, rgba(255, 255, 255, 0.006) 78%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 0; }
.demo-band .pal { z-index: 1; width: min(100%, 640px); }
.demo-band .demo-out { z-index: 1; max-width: 64ch; }

/* the search rows as the app draws them: the icon in the colour of its kind, the shortcut as keys */
.pal-list .pal-r span { display: inline-flex; gap: 3px; align-items: center; }
.pal-list .pal-r span kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 4px; background: #232325; color: var(--tx-2); font: 400 11px/1.5 var(--font); text-align: center; }
.demo-band .pal-list { height: 352px; }
.demo-band .demo { grid-template-columns: minmax(0, 1fr); }
.pal-list .pal-r span kbd { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; line-height: 1; }
.demo-band .lead.wand-lead { margin-bottom: clamp(28px, 3.4vw, 48px); }

/* a soft light on the page behind the axle, so the model stands out from the dark (the same kind of spotlight as behind the Quick wand) */
.pop.is-axle .pop-pin::before { content: ''; position: absolute; left: 55%; top: 55%; width: min(96%, 1240px); height: min(92%, 840px); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.043) 12%, rgba(255, 255, 255, 0.032) 26%, rgba(255, 255, 255, 0.021) 42%, rgba(255, 255, 255, 0.011) 58%, rgba(255, 255, 255, 0.004) 78%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.pal-list .pal-r span .pal-g { margin-right: 8px; color: var(--tx-3); font-size: 12px; font-style: normal; white-space: nowrap; }

/* home hero: centred */
.hero { text-align: center; }
.hero .kicker, .hero .actions { justify-content: center; }
.hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero .lead { margin-left: auto; margin-right: auto; max-width: 52ch; }

/* tile drawings: a touch lighter, nearer white */
.tile-art { color: #9a9a9f; --art-dim: #5e5e63; }
/* the first screen holds this in its vertical middle, with the first cards just showing under it */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(90svh - var(--bar-h)); padding-block: 0; }
.hero + .band.is-first { margin-top: 0; padding-top: 0; }
.live .sv-lead { margin-bottom: clamp(32px, 4vw, 56px); }
.live-stage { margin-top: 0; }
.page-features .band, .page-features .foot { border-top: 0; }
/* clean-up carousel: every "Read more" sits on the same line at the bottom of its card */
.fcar-stars .star { display: flex; flex-direction: column; }
.fcar-stars .star figcaption { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fcar-stars .star figcaption .clip-more { margin-top: auto; padding-top: 10px; }
/* clean-up carousel: "Read more" shows only while the pointer is over the card (always there on touch, and for keyboard focus) */
@media (hover: hover) {
  .fcar-stars .star figcaption .clip-more { opacity: 0; transition: opacity 0.2s ease, color 0.15s ease; }   /* (no slide: a transformed link would no longer be the card's stretched link) */
  .fcar-stars .star:hover figcaption .clip-more, .fcar-stars .star:focus-within figcaption .clip-more { opacity: 1; }
}
/* docs: the drawing of a function, under the title */
.kb-anim { margin: clamp(24px, 3vw, 36px) 0 0; pointer-events: none; }   /* (the picture on a docs page is not a card: no hover fill) */
.kb-anim .clip-art { max-height: 340px; }
.kb-rail .rail-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--soon) 16%, transparent); color: var(--soon); font-size: 11px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; }
/* Claude page: the opening is a headline, centred; the conversation is further down */
.page-claude .page-head { text-align: center; padding-top: clamp(72px, 10vw, 148px); }
.page-claude .page-head .kicker, .page-claude .page-head .actions { justify-content: center; }
.page-claude .page-head h1 { max-width: 11ch; margin-left: auto; margin-right: auto; margin-top: 18px; font-size: round(clamp(48px, 8.4vw, 116px), 1px); line-height: 0.98; letter-spacing: -0.05em; }
.page-claude .page-head .lead { max-width: 46ch; margin-left: auto; margin-right: auto; margin-top: clamp(18px, 2vw, 26px); }
.page-claude .page-head + .band.is-first, .page-claude .soon-banner + .page-head + .band.is-first { margin-top: clamp(88px, 11vw, 168px); }

/* Claude page, what Claude can do: tabs on the left, one list at a time on the right (all panels share one cell, so the height does not jump) */
.cl-explore { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.cl-tabs { display: grid; gap: 2px; position: sticky; top: calc(var(--bar-h) + 24px); }
.cl-tabs button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--tx-2); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.cl-tabs button:hover { color: var(--tx); background: var(--surface); }
.cl-tabs button[aria-selected='true'] { color: var(--tx); background: var(--surface-2); }
.cl-tabs .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ico, var(--accent)); background: color-mix(in srgb, var(--ico, var(--accent)) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico, var(--accent)) 26%, transparent); }
.cl-tabs .ico svg { width: 16px; height: 16px; }
.cl-tabs em { color: var(--tx-3); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.cl-panels { display: grid; }
.cl-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.2s ease; }
.cl-panel.is-on { visibility: visible; opacity: 1; }
.cl-panel-note { max-width: 60ch; margin-bottom: 18px; color: var(--tx-2); font-size: 15px; line-height: 1.5; }
.cl-panel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.cl-panel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-content: start; padding: 14px 16px 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cl-panel li code { background: none; padding: 0; color: var(--tx); font: 400 12px/1.4 var(--mono); overflow-wrap: anywhere; }
.cl-panel li span { grid-column: 1 / -1; color: var(--tx-2); font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) {
  .cl-explore { grid-template-columns: minmax(0, 1fr); }
  .cl-tabs { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .cl-tabs::-webkit-scrollbar { display: none; }
  .cl-tabs button { flex: none; grid-template-columns: 28px auto auto; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface); }
  .cl-tabs .ico { width: 28px; height: 28px; border-radius: 50%; }
}
@media (max-width: 640px) { .cl-panel ul { grid-template-columns: minmax(0, 1fr); } }
/* on a phone the section is as tall as the panel that is open: the others do not hold the space (on a wide screen they do, so the page does not jump between tabs) */
@media (max-width: 760px) { .cl-panel:not(.is-on) { display: none; } .cl-panel { grid-area: auto; } }
/* picture strips: the title on the left, what it says on the right */
@media (min-width: 761px) {
  .strip figcaption { grid-template-columns: 2.4em minmax(0, 15em) minmax(0, 44ch); justify-content: start; max-width: none; gap: 6px clamp(18px, 3vw, 48px); align-items: baseline; }
  .strip figcaption span { grid-column: 3; }
}

/* the example session on claude.html plays inside a box of its own: the conversation and the model are the same height, and the chat scrolls in its box */
@media (min-width: 1000px) and (hover: hover) {
  .cx-grid.is-play { align-items: stretch; }
  .cx-grid.is-play .cx-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: clamp(540px, calc(100svh - var(--bar-h) - 72px), 700px); }
  .cx-grid.is-play .cx { min-height: 0; }
  .cx-grid.is-play .cx-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
  .cx-grid.is-play .cx-thread > li:not(.is-in) { display: none; }
  .cx-grid.is-play .cx-thread > li.is-in { animation: cx-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .cx-grid.is-play .cx-view { position: relative; top: auto; height: auto; }
}
@keyframes cx-in { from { opacity: 0; transform: translateY(14px); } }
/* the example session: the site's own sans (no serif), and an even rhythm: the same space at the sides, between messages and above the composer */
.cx { --cx-pad: clamp(20px, 3vw, 32px); }
.cx-bar { height: 52px; font-size: 14px; letter-spacing: 0.01em; }
.cx-thread { gap: 22px; padding: var(--cx-pad) var(--cx-pad) var(--cx-pad); }
.cx-you { max-width: min(86%, 560px); }
.cx-you p { padding: 12px 18px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
.cx-ai > p, .cx-ai > p.cx-result { font: 400 15px/1.6 var(--font); letter-spacing: -0.005em; }
.cx-tools { gap: 6px; margin-top: 12px; }
.cx-tools li { padding: 10px 14px; }
.cx-ai > p.cx-result { margin-top: 12px; }
.cx-composer { margin: 0 var(--cx-pad) var(--cx-pad); padding: 12px 12px 12px 20px; font: 400 15px/1.4 var(--font); }
/* the model beside the example session stands on the page itself, not in a card */
@media (min-width: 1000px) and (hover: hover) {
  .cx-view { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
}

/* the readout beside the example session: a technical panel, on black */
.cx3d-hud { display: grid; gap: 10px; width: min(300px, 92%); max-width: none; padding: 16px 18px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); font-family: var(--mono); }
.cx3d-hud .hud-k { color: var(--tx-3); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.cx3d-hud .hud-n { display: flex; align-items: baseline; gap: 8px; }
.cx3d-hud .hud-n b { font: 300 34px/1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cx3d-hud .hud-n span { color: var(--tx-3); font-size: 12px; }
.cx3d-hud .hud-d { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cx3d-hud .hud-d s { color: var(--tx-3); }
.cx3d-hud .hud-d em { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--tx-2); font-style: normal; }
.cx3d-hud .hud-d em.is-down { background: color-mix(in srgb, var(--new) 16%, transparent); color: var(--new); }
.cx3d-hud .hud-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.cx3d-hud .hud-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 2px; background: var(--claude); }
.cx3d-hud .hud-bar u { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255, 255, 255, 0.55); }
.cx3d-hud .hud-rows { display: grid; gap: 0; margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cx3d-hud .hud-rows > div { display: flex; justify-content: space-between; padding: 7px 0 0; font-size: 12px; }
.cx3d-hud .hud-rows dt { color: var(--tx-3); }
.cx3d-hud .hud-rows dd { color: var(--tx); font-variant-numeric: tabular-nums; }
.cx3d-tool { background: color-mix(in srgb, var(--claude) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--claude) 45%, transparent); color: color-mix(in srgb, var(--claude) 70%, #fff); }

/* the readout starts at the top edge of the conversation */
.cx-view .cx3d-hud { top: 0; left: 0; }

/* the bubbles under the Claude headline: they rise in one by one, then one at a time is swapped for a new request */
.cl-say[data-pool] li { animation: cl-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cl-say[data-pool] li:nth-child(2) { animation-delay: 0.12s; }
.cl-say[data-pool] li:nth-child(3) { animation-delay: 0.24s; }
.cl-say[data-pool] li.is-out { animation: cl-out 0.35s ease forwards; }
.cl-say[data-pool] li.is-new { animation: cl-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes cl-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cl-out { to { opacity: 0; transform: translateY(-8px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .cl-say[data-pool] li, .cl-say[data-pool] li.is-new { animation: none; } .cl-say[data-pool] li.is-out { animation: none; opacity: 0; } }

.credit-i { display: inline-block; width: 13px; height: 13px; margin: -2px 7px 0 0; vertical-align: middle; }
.wand-band .wand-tips kbd svg { flex: none; width: 15px; height: 15px; margin-right: 8px; color: var(--tx-2); }

/* Inter, the text face: hosted here (SIL Open Font License) and preloaded, so no page asks another server for a font. One variable file per script range, weights 300 to 500. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-0105, U+0108-010B, U+010E-010F, U+0112-015F, U+0162-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* č ć đ š ž alone (3.5 KB, cut from the latin-ext file): the name in the footer then never pulls the 83 KB latin-ext file */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/inter-sl.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }
/* the few symbols the site writes that neither file above has: ← → ↵ ≈ ⌘ (5.5 KB, from Google Fonts' Inter; fetched only on a page that shows one) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/inter-symbols.woff2') format('woff2'); unicode-range: U+2190, U+2192, U+21B5, U+2248, U+2318; }

/* Fraunces, the headline font: hosted here (SIL Open Font License) and preloaded by every page, so the headlines are drawn in it from the first paint.
   One variable file per script range; the weights are 300 and 400. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* Headlines are Fraunces Light. The serif has a smaller x-height than Inter, so every headline size above is a step larger than it was.
   (Small uppercase labels that are h2 keep Inter.) */
:root { --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; }
h1, h2 { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; }
.hero h1, .page-head h1 { letter-spacing: -0.022em; }
.tile h2 { font-weight: 300; letter-spacing: -0.025em; }
.kb-rail h2, .kb-nav h2, .kb-see h2, .foot nav h2, .credit-group h2, .rp-card h2 { font-family: var(--font); }
/* The name next to the logo is in the same serif, everywhere (the bar and the foot of every page). */
.brand span { font-family: var(--serif); font-weight: 300; font-size: 18px; letter-spacing: -0.005em; }
/* the big figures (a result like -79%, the figures rows, the token and knowledge numbers) are in the same light serif */
.sv-big b, .figures dt, .tokens dt, .kn-figures dt { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; }
.sv-big b { letter-spacing: -0.03em; }
/* Titles that are headlines in their own right use the same serif on every page: caption titles of the screenshots and clips, and the h3 titles of
   steps, spotlights, plans and the comparison columns. (Small labels, buttons and numbers stay Inter.) */
.clip figcaption strong, .star figcaption strong, .steps h3, .spot h3, .plan-head h3, .cmp-col h3 { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; }

/* ---- a phone: room to breathe ----
   The side margin goes from 20 to 28 px on every page (everything reads --gutter), and the opening gets more air: a calmer kicker line, a looser headline, a lead with a longer line height, and the buttons set apart from the text. */
@media (max-width: 560px) {
  :root { --gutter: 28px; }
  .hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(94svh - var(--bar-h)); padding-block: 0; }      /* (this sits in the middle of the first screen, with the first cards showing under it) */
  .hero .kicker, .page-head .kicker { gap: 6px 10px; font-size: 11px; letter-spacing: 0.08em; line-height: 1.5; }
  .hero h1 { margin-top: 28px; font-size: clamp(40px, 11.4vw, 54px); line-height: 1.06; }
  .hero .lead { margin-top: 28px; font-size: 17px; line-height: 1.62; }
  .hero .actions { margin-top: 40px; gap: 12px; }
  .hero + .band.is-first { margin-top: 0; padding-top: 0; }
  .page-head { padding-top: 40px; }
  .page-head .lead { margin-top: 22px; line-height: 1.62; }
  .page-head .actions { margin-top: 36px; }
  .sv-big { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .cmp-col h3 { white-space: normal; font-size: 20px; line-height: 1.15; overflow-wrap: normal; }      /* (two columns on a phone: the names wrap instead of running into each other) */
  .cmp-head { gap: 0 24px; }
  .band-head h2, .band > h2, .compare h2, .cl-band h2 { font-size: clamp(40px, 11.4vw, 54px); line-height: 1.06; }
  .page-head h1 { font-size: clamp(40px, 11.4vw, 54px); line-height: 1.06; }
  .band-head { gap: 18px; }
  .band-head .lead { line-height: 1.62; }
}
/* the version of a mesh tool, small beside its name (tv() in tools/site/build-app-site.js) */
.tv { display: inline-block; margin-left: 8px; font: 300 11px/1 var(--font); font-style: normal; letter-spacing: 0.02em; text-transform: none; color: var(--tx-3, var(--tx)); opacity: 0.85; vertical-align: baseline; white-space: nowrap; cursor: default; }
h1 .tv { font-size: 14px; margin-left: 12px; }

/* ---- the words over the timelapse ----
   The video pins on the screen (centred) while the page is scrolled through the section, 80vh a word; site.js sets --o / --y / --b on each word and
   Without script, on a phone or with reduced motion: no pin, the words are a row of
   plain words under the video. */
.hero-peek { --slot: 80vh; --stick: max(var(--bar-h), calc((100svh - var(--peek-h)) / 2)); height: calc(var(--peek-h) + var(--n, 0) * var(--slot)); }
.peek-pin { position: sticky; top: var(--stick); height: var(--peek-h); }
.peek-frame { position: relative; }
.hero-peek.is-live .peek-frame { transform: scale(var(--s, 0.9)); will-change: transform; }      /* a little smaller at the start and the end, full size in the middle (site.js) */
.hero-peek.is-live .words-over { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.word { grid-area: 1 / 1; display: grid; justify-items: center; gap: clamp(6px, 0.8vw, 12px); text-align: center; padding-inline: var(--gutter); }
.hero-peek.is-live .word h2 .ch { display: inline-block; opacity: var(--o, 0); translate: 0 var(--y, 0); filter: blur(var(--b, 0px)); will-change: opacity, translate, filter; }      /* letter by letter (site.js) */
.hero-peek.is-live .word h2 { scale: var(--z, 1); transform-origin: 50% 55%; will-change: scale; }      /* the zoom in and through (site.js) */
.hero-peek.is-live .word p { opacity: var(--po, 0); translate: 0 var(--py, 0); filter: blur(var(--pb, 0px)); }
.word h2 { font-size: round(clamp(72px, 15vw, 260px), 1px); line-height: 1; margin-bottom: -0.12em; letter-spacing: -0.05em; }      /* (none of the words has a tail below the line, so the line under it comes up into that room; a word with a g or p would need it back) */
.word p { max-width: 34ch; margin: 0; color: var(--tx); font-size: var(--t-lead); line-height: 1.4; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 24px rgba(0, 0, 0, 0.8); }
@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  .hero-peek, .hero-peek.is-live { height: auto; }
  .peek-pin, .hero-peek.is-live .peek-pin { position: static; height: auto; }
  .words-over { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding-top: clamp(20px, 5vw, 36px); }
  .hero-peek .word, .hero-peek.is-live .word { grid-area: auto; padding: 0; }
  .hero-peek.is-live .word h2 .ch { display: inline; opacity: 1; translate: none; filter: none; }
  .word h2 { font-size: clamp(30px, 9vw, 52px); padding-bottom: 0; text-shadow: none; }
  .word p { display: none; }
}

/* the text under the timelapse: no title, a narrow column, big and quiet */
.intro { display: grid; justify-items: center; gap: clamp(18px, 2vw, 28px); padding-block: clamp(120px, 16vw, 260px) clamp(120px, 16vw, 260px); }
.intro p { max-width: 36em; margin: 0; color: var(--tx-2); font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.008em; text-align: center; text-wrap: balance; }
.intro + .band { margin-top: 0; padding-top: 0; border-top: 0; }      /* (the text's own padding is the gap on both sides) */
.intro p:first-child { color: var(--tx); }

/* the text under the video slides up and fades in, a paragraph after the other (site.js adds .is-armed, then .is-in when it is in view) */
.intro.is-armed p { opacity: 0; translate: 0 36px; transition: opacity 1s ease, translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro.is-armed p + p { transition-delay: 0.18s; }
.intro.is-in p { opacity: 1; translate: 0 0; }

/* the narrowest phones (under 340 px, a 320 px iPhone SE or a split screen): a 16 px side margin and a tighter logo, so the name never runs into the menu button */
@media (max-width: 339px) {
  :root { --gutter: 16px; }
  .brand { gap: 8px; }
}