/* Page composition; visual values come from the app's copied tokens.css. */
/* One top line for the sidebar and every page title, so the logo and the h1 start together. */
:root { --website-top: clamp(1.75rem, 5vh, 3rem); --website-inline-direction: 1; }
:root:dir(rtl) { --website-inline-direction: -1; }
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-block-start: var(--space-6); }
body { margin: 0; background: var(--website-bg); color: var(--website-text); font: calc(var(--type-body-size) * 1.35)/1.6 var(--font-reading); }
.site { min-height: 100svh; --surface: var(--website-bg); --text: var(--website-text); --text-secondary: var(--website-muted); --separator: var(--website-line); position: relative; max-width: 84rem; margin-inline: auto; padding-inline: var(--website-pad); }
a { color: var(--scarlet); text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: var(--ring-width); }
::selection { background: color-mix(in srgb, var(--scarlet) 22%, transparent); color: var(--text); }
:where(a, button, input, select):focus-visible { outline: var(--ring-width) solid var(--ring); outline-offset: var(--ring-offset); border-radius: var(--r-small); }
:focus:not(:focus-visible), :root[data-pointer] :focus { outline: none; }
/* The ring sits outside so it never crosses text; inside only where a scroller or the page edge would clip it. */
:where(.index, .rows, .picker) :focus-visible { outline-offset: calc(-1 * var(--ring-width)); }
/* The sidebar is navigation: a press-and-drag there moves a link, it never starts a text selection across the page. */
.index { -webkit-user-select: none; user-select: none; }
.skip { position: absolute; inset-inline-start: -100vw; }
.skip:focus { inset-inline-start: var(--space-4); inset-block-start: var(--space-4); z-index: var(--z-chrome); background: var(--surface); padding: var(--space-3) var(--space-4); }
.index { padding-top: var(--space-4); margin-bottom: var(--space-6); font-family: var(--font); }
/* The brand export keeps clear space around the mark; --logo-edge pulls its ink to the text edge. */
.logo { --logo-width: 11rem; --logo-edge: calc(var(--logo-width) * -.0513); display: block; width: fit-content; margin-bottom: var(--space-2); margin-inline-start: var(--logo-edge); }
.logo img { display: block; width: var(--logo-width); height: auto; }
.logo .logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
.index-note { margin-bottom: var(--space-5); font-size: var(--type-body-size); color: var(--text-secondary); }
.index-note a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.index-note a:hover { color: var(--text); }
.index ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; padding: 0; margin: 0; }
.index nav a { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding-block: var(--space-2); font-size: var(--type-title-size); color: var(--text-secondary); text-decoration: none; }
.index nav a:hover, .index a[aria-current="location"] { color: var(--text); }
.index a[aria-current="location"] .label { font-weight: 500; }
.row { display: grid; gap: var(--space-3) var(--website-gap); }
.row > *, .text, .journey > li > * { min-width: 0; }
.text, .journey { max-width: 45rem; }
h1 { font-size: clamp(calc(var(--type-search-size) * 1.9), 5.2vw, calc(var(--type-search-size) * 3.25)); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 var(--space-8); text-wrap: balance; }
h2 { font-size: clamp(calc(var(--type-search-size) * 1.3), 3.1vw, calc(var(--type-search-size) * 1.9)); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 var(--website-block-gap); text-wrap: balance; }
h1, h2, h3, strong { font-weight: var(--strong); }
p { margin: 0 0 var(--website-paragraph-gap); }
.text > :last-child { margin-bottom: 0; }
.lede { font-size: calc(var(--type-search-size) * 1.15); line-height: 1.4; }
.small, figcaption { font: var(--type-title-size)/1.55 var(--font); color: var(--text-secondary); }
code, .key { display: inline-block; color: var(--scarlet); background: var(--website-accent-soft); padding: var(--space-1) var(--space-2); border-radius: var(--website-chip-radius); white-space: nowrap; text-decoration: none; font: var(--type-reading-size)/var(--type-title-line) var(--mono); }
.key:not(code) { flex: none; text-align: center; }
.index nav .key { font-size: var(--type-body-size); padding: .2em .45em; }
a:hover .key, .key:not(code):hover { background: var(--scarlet); color: var(--website-bg); text-decoration: none; }
a[aria-current="location"] .key { background: var(--scarlet); color: var(--website-bg); box-shadow: none; }
p:not(.actions) code, p:not(.actions) .key, li code { padding: .1em .35em; font-size: .85em; line-height: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
p:not(.actions) code, li code { display: inline; }
kbd { display: inline-block; direction: ltr; unicode-bidi: isolate; min-inline-size: var(--key); block-size: var(--key); margin: 0; padding: 0 calc(var(--space-1) + var(--border-width)); border: var(--border-width) solid var(--stroke-field); border-radius: var(--r-small); background: var(--fill-control); box-shadow: none; text-align: center; font: 500 var(--type-label-size)/calc(var(--key) - 2 * var(--border-width)) var(--font); }
.key-strip { display: flex; align-items: center; gap: var(--space-2); }
.key-strip > span { color: var(--text-secondary); font: var(--type-body-size)/1 var(--font); }
kbd.pressed { background: var(--fill-control-pressed); }
.outbound { display: inline-block; inline-size: var(--space-3); block-size: var(--space-3); margin-inline-start: var(--space-1); background: currentColor; mask: url("/arrow-up-right.svg") center / contain no-repeat; }
.outbound-end { white-space: nowrap; }
.intro { padding-block: var(--space-8) var(--website-section-pad); }
section { padding-block: var(--website-section-pad); }
.text.after { margin: 0; }
.margin { margin: 0 0 var(--space-3); }
.journey { list-style: none; padding: 0; margin: var(--website-block-gap) 0; counter-reset: step; }
.journey > li { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-top: var(--border-width) solid var(--separator); min-width: 0; }
.journey > li:last-child { border-bottom: var(--border-width) solid var(--separator); }
.action { margin-bottom: var(--space-2); font: var(--type-title-size)/1.6 var(--font); color: var(--text-secondary); }
.journey > li { counter-increment: step; }
.action:first-child::before { content: counter(step) ". "; font-weight: var(--strong); }
.draft { margin: 0; font-size: var(--type-search-size); line-height: 1.55; }
.draft + p { margin-block-start: var(--website-paragraph-gap); }
.caret { display: inline-block; inline-size: var(--border-width); block-size: .75em; vertical-align: -.05em; background: currentColor; }
.draft-end { white-space: nowrap; }
/* Every variant occupies the same cell; only the live content is seen or read. */
.draft-stack { display: grid; }
.draft-stack > * { grid-area: 1 / 1; align-self: start; min-inline-size: 0; }
.draft-reserve { visibility: hidden; pointer-events: none; user-select: none; }
p.draft .key { padding: 0; border: 0; border-radius: 0; background: transparent; white-space: normal; overflow-wrap: anywhere; transition: none; }
/* A citation moves to the next line whole; on the narrowest phones it may break only at a space. */
#shorthand p.draft .key { overflow-wrap: normal; }
@media (min-width: 30rem) { #shorthand p.draft .key { white-space: nowrap; } }
.picker { margin: 0; font: var(--type-body-size)/1.4 var(--font); }
.picker figcaption { margin-bottom: var(--space-3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-8); }
.button { position: relative; display: inline-flex; align-items: center; min-height: var(--website-button-height); padding: var(--space-2) var(--space-4); border-radius: var(--r-control); background: var(--text); color: var(--website-bg); font: var(--strong) var(--type-reading-size) var(--font); text-decoration: none; }
.button:hover { background: color-mix(in srgb, var(--text) 84%, var(--website-bg)); }
.button svg { width: 1em; height: 1em; margin-inline-end: var(--space-2); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linejoin: round; }
.button.quiet { border: 0; background: none; box-shadow: inset 0 0 0 var(--border-width) var(--separator); color: var(--text); cursor: pointer; }
.button:hover .star path { fill: currentColor; }
/* Slim to see, full height to touch. The hit area follows the actual control height. */
:where(.button, a.key, .index nav a, .index-note a, .appearance button, .actions a, .colophon a, .next-page a, .rows a, .chips .key, .try button, .copy) { position: relative; }
:where(.button, a.key, .index nav a, .index-note a, .appearance button, .actions a, .colophon a, .next-page a, .rows a, .chips .key, .try button, .copy)::after { content: ""; position: absolute; inset-block: min(0px, calc((100% - var(--touch-target)) / 2)); inset-inline: 0; }
.copy::after { inset-inline: min(0px, calc((100% - var(--touch-target)) / 2)); }
.button.quiet:hover { background: var(--fill-quiet-hover); }
.closing { padding-block: var(--website-section-pad); }
.pull { margin: 0 0 var(--website-block-gap); }
.pull img { display: block; width: 2rem; height: auto; margin-bottom: var(--space-3); } /* The beak is the opening quote mark. */
.pull p { margin: 0; font-style: italic; }
.signature { margin-bottom: var(--website-block-gap); font: var(--type-reading-size)/1.5 var(--font); color: var(--text-secondary); } /* The beak opens the quote; a key signs it. */
.closing .actions { margin-top: var(--space-5); }
.actions a:not(.button) { padding-block: var(--space-3); font: var(--type-reading-size) var(--font); color: var(--text); text-decoration: none; }
.platform { margin-top: var(--space-8); }
.platform ~ .small { margin-top: var(--space-6); }
.platform h3 { margin: 0; font: 500 var(--type-body-size)/1.5 var(--font); color: var(--text-secondary); }
.install { margin: 0; padding-inline-start: var(--space-6); font-size: var(--type-reading-size); }
.install + .small, .rows + .small + .install { margin-top: var(--space-4); }
.install li { padding-inline-start: var(--space-1); margin-bottom: var(--space-2); }
.rows { list-style: none; padding: 0; margin: var(--website-block-gap) 0; border-top: var(--border-width) solid var(--separator); }
.rows li { border-bottom: var(--border-width) solid var(--separator); }
.rows a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-6); padding-block: var(--space-4); color: var(--text-secondary); text-decoration: none; }
.rows a:hover { color: var(--text); }
.rows strong { font-family: var(--font); }
.rows span { font: var(--type-body-size)/1.5 var(--font); color: var(--text-secondary); }
.rows a:hover span { color: inherit; }
.rows .arrow { flex: none; width: var(--space-4); height: var(--space-4); margin-inline-start: auto; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.rows .arrow .tray { display: none; }
.rows .arrow:dir(rtl), .next-page .arrow:dir(rtl) { scale: -1 1; }
.setup { list-style: none; margin: var(--website-block-gap) 0; padding: 0; counter-reset: setup; }
.setup > li { counter-increment: setup; padding-block: var(--space-4); border-top: var(--border-width) solid var(--separator); }
.setup h3 { margin: 0 0 var(--space-2); font-size: var(--type-heading-size); }
.setup h3::before { content: counter(setup) ". "; }
.setup p { margin: 0; }
.roadmap { list-style: none; padding: 0; margin: var(--website-block-gap) 0; }
.roadmap li { display: flex; gap: var(--space-3); align-items: baseline; padding-block: var(--space-4); border-top: var(--border-width) solid var(--separator); }
.roadmap li > div { min-inline-size: 0; }
.roadmap strong, .roadmap span { display: block; }
.setup > li:last-child, .roadmap li:last-child { border-bottom: var(--border-width) solid var(--separator); }
.roadmap span { font: var(--type-body-size)/1.5 var(--font); color: var(--text-secondary); }
footer { margin-top: var(--space-8); font-family: var(--font); padding-bottom: var(--space-8); font-size: var(--type-reading-size); }
footer > .text { border-top: var(--border-width) solid var(--separator); padding-top: var(--space-8); }
.colophon { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); }
.colophon span { flex-basis: 100%; }
.colophon a { padding-block: var(--space-2); }
.keyboard-help-open { min-block-size: var(--touch-target); border: 0; padding: 0; background: none; color: var(--text-secondary); font: inherit; cursor: pointer; }
.keyboard-help { inline-size: min(35rem, calc(100% - 2 * var(--website-pad))); max-block-size: calc(100svh - 2 * var(--space-6)); padding: var(--space-6); border: var(--border-width) solid var(--website-line); border-radius: var(--r-win); background: var(--website-bg); color: var(--website-text); font: inherit; }
.keyboard-help::backdrop { background: rgb(0 0 0 / 40%); }
@media (min-width: 62rem) {
  footer > .text { position: relative; }
  footer > .text::before { content: ""; position: absolute; inset-block-start: calc(-1 * var(--border-width)); inset-inline-start: calc(var(--website-gap) / -2); width: calc(var(--website-gap) / 2); height: var(--border-width); background: var(--separator); } /* The footer rule meets the margin rule. */
  .site::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--website-pad) + var(--website-margin) + var(--website-gap) / 2); width: var(--border-width); background: var(--separator); }
  .row { grid-template-columns: var(--website-margin) minmax(0, 1fr); }
  .row > .text { grid-column: 2; }
  .index { position: absolute; z-index: var(--z-chrome); inset-block-start: var(--website-top); inset-block-end: 0; inset-inline-start: var(--website-pad); width: var(--website-margin); padding: 0; text-align: end; }
  .index-sticky { position: sticky; inset-block-start: var(--space-6); max-height: calc(100svh - 3rem); overflow-y: auto; scrollbar-width: none; }
  .index-sticky::-webkit-scrollbar { display: none; }
  .logo { --logo-width: 13rem; margin-inline-start: auto; overflow: clip; }
  .logo img { margin-inline-end: var(--logo-edge); } /* Clipping only clear space keeps the sidebar from scrolling sideways. */
  .index ul { display: block; } .index nav a { justify-content: flex-end; font-size: var(--type-reading-size); }
  .intro { padding-block: var(--website-top) var(--website-section-pad); }
  .margin { display: none; } .journey { grid-column: 2; }
}
/* Shared controls use the app's timings, never a website motion copy. */
.appearance { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font: var(--type-body-size)/1.5 var(--font); color: var(--text-secondary); }
.appearance button { border: 0; background: none; color: inherit; padding: 0; font: inherit; cursor: pointer; }
.appearance-toggle { display: flex; align-items: center; gap: var(--space-2); }
.appearance svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.appearance-track { display: block; width: 2.25rem; padding: .2rem; border-radius: var(--r-win); background: color-mix(in srgb, var(--text-secondary) 35%, transparent); }
.appearance-thumb { display: block; width: .85rem; height: .85rem; border-radius: 50%; background: var(--text); }
.appearance-toggle[aria-checked="true"] .appearance-track { background: var(--text); }
.appearance-toggle[aria-checked="true"] .appearance-thumb { background: var(--website-bg); translate: var(--space-4) 0; }
.appearance-toggle[aria-checked="true"] .appearance-thumb:dir(rtl) { translate: calc(-1 * var(--space-4)) 0; }
.appearance-system { text-decoration: underline; text-underline-offset: .2em; }
.appearance-system:disabled { text-decoration: none; cursor: default; }
@media (min-width: 62rem) {
  .index nav a { gap: .65rem; padding-block: .45rem; }
  .appearance { justify-content: flex-end; }
  .appearance:hover, .appearance:focus-within { color: var(--text); }
  footer .appearance { display: none; }
}
@media (max-width: 61.99rem) {
  html { scroll-padding-block-start: 4rem; }
  .index, .index-sticky, .index-content { display: contents; }
  .logo { --logo-width: 7.5rem; padding-top: var(--space-4); }
  .index-note { margin-bottom: 0; }
  .index nav { position: sticky; inset-block-start: 0; z-index: var(--z-chrome); margin-inline: calc(-1 * var(--website-pad)); padding-inline: var(--website-pad); background: var(--website-bg); border-bottom: var(--border-width) solid var(--website-line); }
  .index ul { --nav-fade: 90deg; --nav-gap: var(--space-2); flex-wrap: nowrap; align-items: center; gap: var(--nav-gap); min-block-size: var(--touch-target); overflow-x: auto; scrollbar-width: none; padding-block: .6rem; mask-image: linear-gradient(var(--nav-fade), CanvasText 85%, transparent); }
  .index ul:dir(rtl) { --nav-fade: -90deg; }
  .index li { flex: none; }
  .index nav a { padding: 0; }
  .index nav .key { padding: .2em .45em; scroll-margin-block-start: -4rem; }
  .index ul[data-at-end] { mask-image: none; }
  .index ul[data-at-end]:not([data-at-start]) { mask-image: linear-gradient(var(--nav-fade), transparent, CanvasText 15%); }
  .index ul:not([data-at-end]):not([data-at-start]) { mask-image: linear-gradient(var(--nav-fade), transparent, CanvasText 15%, CanvasText 85%, transparent); }
  .index .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .index .appearance, .margin { display: none; }
  .platform + .platform { margin-top: calc(2 * var(--space-8)); }
}
@media (max-width: 39.99rem) {
  .index ul { --nav-gap: var(--space-1); }
  /* The note shares the logo's row, so the phone header is one line plus the chip bar. */
  .index-note { position: absolute; inset-block-start: calc(var(--space-4) + 7.5rem * 200 / 418 / 2); inset-inline-end: var(--website-pad); translate: 0 -50%; }
  .rows a { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); }
  .rows a > span { grid-column: 1; }
  .rows .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .site { max-width: 46rem; }
  .index ul { justify-content: center; mask-image: none; }
  .logo { margin-inline: auto; padding-top: var(--space-6); }
  .index-note { text-align: center; }
  .intro { padding-top: var(--space-10); }
  .row > .text, .journey, .text, .picker { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  kbd { transition: background-color var(--dur-1) var(--ease-out), translate var(--dur-1) var(--ease-out); }
  kbd.pressed { translate: 0 var(--border-width); }
  .logo.pecking { transform-origin: 20% 80%; animation: peck calc(2 * var(--dur-2)) var(--ease-out); }
  html.smooth { scroll-behavior: smooth; }
  .key, .button, .rows a { transition: inline-size var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out); }
  a:active .key, a.key:active, .button:active { scale: var(--website-press); }
  .star path { transition: fill var(--dur-1) var(--ease-out); }
  .button:hover .star { animation: star var(--dur-2) var(--ease-out); }
  .reveal .pull img { transform-origin: 20% 80%; animation: peck calc(2 * var(--dur-2)) var(--ease-out) var(--dur-2); }
  a { transition: text-decoration-color var(--dur-1) var(--ease-out); }
  .rows .arrow { transition: translate var(--dur-1) var(--ease-out); }
  .rows a:not([href*="/releases/download/"]):hover .arrow { translate: calc(var(--space-1) * var(--website-inline-direction)) 0; }
  .rows a[href*="/releases/download/"] .arrow path:first-child { transform-origin: center; transition: translate var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out); }
  .rows a[href*="/releases/download/"]:hover .arrow path:first-child { translate: 0 calc(var(--space-1) / 4); }
  .rows a[href*="/releases/download/"]:active .arrow path:first-child { translate: 0 calc(var(--space-1) / 2); scale: var(--website-press); }
  .rows .arrow .tray { display: inline; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-2) var(--ease-out); }
  .rows a:hover .arrow .tray { stroke-dashoffset: 0; }
  .appearance-thumb { transition: translate var(--dur-1) var(--ease-out); }
  section:target h2 { animation: land-text var(--dur-2) var(--ease-out); }
  .reveal { animation: reveal var(--dur-2) var(--ease-out) both; }
  .caret { animation: caret-blink calc(5 * var(--dur-2)) step-end infinite; }
}
@keyframes land-text { from { color: var(--scarlet); } }
@keyframes reveal { from { opacity: 0; translate: 0 var(--website-reveal); } }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes star { 50% { scale: 1.2; } }
@keyframes peck { 40% { rotate: -12deg; } }
@keyframes receipt { from { opacity: .4; } }
@media (forced-colors: active) { a[aria-current="location"] .key { forced-color-adjust: none; background: Highlight; color: HighlightText; } .key { border: var(--border-width) solid LinkText; } .site::before { background: CanvasText; } }
/* Pages: the current page's key fills, as the current section's does. */
.index a[aria-current="page"] { color: var(--text); }
.index a[aria-current="page"] .label { font-weight: 500; }
a[aria-current="page"] .key { background: var(--scarlet); color: var(--website-bg); box-shadow: none; }
/* Where you write: the sidebar's key chips as tabs, over the draft sentence. Slim to see, full height to touch. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-2); margin: var(--space-4) 0; }
.chips .key, .try button { position: relative; border: 0; cursor: pointer; padding: .2em .45em; font: var(--type-body-size)/1.5 var(--mono); }
.try button:hover { box-shadow: inset 0 0 0 var(--border-width) currentColor; }
.chips .key[aria-selected="true"] { background: var(--scarlet); color: var(--website-bg); box-shadow: none; }
/* Inactive panels still size the shared cell, so switching setup never moves the next paragraph. */
.tab-panels { display: grid; margin-bottom: var(--website-paragraph-gap); }
.tab-panels > [role="tabpanel"] { grid-area: 1 / 1; align-self: start; min-inline-size: 0; }
.tab-panels > [aria-hidden="true"] { visibility: hidden; }
.tab-panels > [role="tabpanel"] > :last-child { margin-bottom: 0; }
.tab-panels .actions { margin-top: 0; }
.tab-panels .small { margin-bottom: var(--space-2); }
.try button { color: var(--scarlet); background: var(--website-accent-soft); border-radius: var(--website-chip-radius); }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.draft-stack + .try { margin-block-start: var(--website-paragraph-gap); }
.where-doc { margin-bottom: var(--website-paragraph-gap); padding-block: var(--space-4); border-block: var(--border-width) solid var(--separator); }
.where-doc .draft { margin-bottom: var(--space-2); }
.where-doc .small { margin: 0; }
/* Today: one drawn mark per state, filled for what you can use now. */
.roadmap li::before { content: ""; flex: none; align-self: start; margin-block-start: calc(.5lh - .25rem); inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--scarlet); }
.roadmap strong { font-family: var(--font); font-weight: 500; }
[data-status="nightly"] li::before { background: none; box-shadow: inset 0 0 0 var(--border-width) var(--scarlet); }
[data-status="planned"] li::before { background: var(--text-secondary); }
[data-status="notYet"] li::before { background: none; box-shadow: inset 0 0 0 var(--border-width) var(--text-secondary); }
/* The typed shorthand: each part of the search, labelled. */
.label-nightly { display: inline-block; margin-inline-start: var(--space-2); padding: .1em .45em; border-radius: var(--website-chip-radius); background: var(--website-accent-soft); color: var(--scarlet); font: var(--type-body-size)/1.5 var(--mono); vertical-align: .2em; }
/* The shorthand: the demo picker's own search bar (same parts, same app tokens), then each typed word over what it means. */
.shorthand-picker { margin: var(--space-5) 0 var(--space-3); }
.gloss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; column-gap: var(--space-2); block-size: 6rem; max-inline-size: 32rem; margin: 0 0 var(--space-5); padding: 0; padding-inline-start: calc(var(--inset) + var(--row-pad) + var(--tile) + var(--row-gap)); list-style: none; font: var(--type-body-size)/1.5 var(--font); color: var(--text-secondary); }
.gloss li { display: grid; justify-items: start; gap: var(--space-1); min-inline-size: 0; overflow-wrap: anywhere; }
.gloss [data-role="message"] { grid-column: 1 / -1; }
.gloss b { padding-bottom: var(--space-1); border-bottom: var(--ring-width) solid var(--role); color: var(--text); font: var(--type-search-size)/1.3 var(--font); }
.gloss [data-role="before"] { --role: var(--text-secondary); }
.gloss [data-role="reference"] { --role: var(--scarlet); }
.gloss [data-role="locator"] { --role: var(--text); }
@media (min-width: 40rem) { .gloss { block-size: 4rem; } }
@media (prefers-reduced-motion: no-preference) {
  .try button, .copy { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
  .chips .key:active, .try button:active, .copy:active { scale: var(--website-press); }
  .gloss li { animation: receipt var(--dur-1) var(--ease-out); }
  .draft .key.landed { animation: citation-receipt calc(5 * var(--dur-1)) var(--ease-out); }
}
@keyframes citation-receipt { from { background-color: var(--website-accent-soft); } to { background-color: transparent; } }
@media (forced-colors: active) { a[aria-current="page"] .key, .chips .key[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } .code { border: var(--border-width) solid CanvasText; } }
/* Inner pages start with content sooner: their title takes the section-heading size. */
main:not([data-page="home"]) h1 { font-size: clamp(calc(var(--type-search-size) * 1.5), 3.6vw, calc(var(--type-search-size) * 2.2)); margin-bottom: var(--website-block-gap); }
/* The sidebar's two groups: this page's sections, then the other pages. */
.index li.group { position: relative; }
.index li.group::before { content: ""; display: block; inline-size: 5ch; block-size: var(--border-width); margin-inline-start: auto; margin-block: var(--space-2); background: var(--separator); }
@media (max-width: 61.99rem) {
  .index li.group::before { position: absolute; inset-inline-start: calc((var(--nav-gap) + var(--border-width)) / -2); inset-block-start: 50%; translate: 0 -50%; inline-size: var(--border-width); block-size: 1em; margin: 0; }
}
/* Code blocks: the code and its Copy button share one dark block, each in its own column, so text never runs under the button.
   Copy lines up with the first line, or the middle of a one-line block. Terminals are dark in both modes. */
.code { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 var(--website-paragraph-gap); padding: var(--space-2); border-radius: var(--r-control); background: light-dark(var(--text), color-mix(in srgb, var(--text) 8%, var(--website-bg))); color: light-dark(var(--website-bg), var(--text)); }
.code.single { align-items: center; }
/* A prompt is a sentence: it wraps, at the slashes of a long address too. */
.code.prose pre, .code.prose code { white-space: pre-wrap; overflow-wrap: anywhere; }
.code pre { flex: 1; min-width: 0; margin: 0; padding: var(--space-2); overflow-x: auto; scrollbar-width: none; font: var(--type-body-size)/1.6 var(--mono); tab-size: 8; }
.code code { display: inline; padding: 0; background: none; color: inherit; font: inherit; white-space: pre; }
.code .prompt { opacity: .55; }
.code .stderr { color: color-mix(in srgb, var(--scarlet) 55%, white); }
.copy { flex: none; position: relative; display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border: 0; border-radius: var(--r-small); background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; cursor: pointer; opacity: .8; }
.code:not(.single) .copy { margin-top: calc(var(--space-2) + (1.6 * var(--type-body-size) - var(--control-h)) / 2); }
.copy:hover, .copy:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 22%, transparent); }
.copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.copy .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.copy .icon-check, .copy[data-state="copied"] .icon-copy { display: none; }
.copy[data-state="copied"] .icon-check { display: block; }
/* Elements focused only so screen readers announce them (the demo's result, the skip target) show no ring; controls keep theirs. */
main[tabindex="-1"]:focus, [data-result]:focus { outline: none; }
/* The next page: a pager in the sidebar's vocabulary, with no rules of its own; the footer's line is the only separator. */
.next-page { padding-block: var(--space-6) var(--space-2); }
.next-page a { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space-3); align-items: center; padding-block: var(--space-2); color: var(--text-secondary); text-decoration: none; }
.next-label { grid-column: 1 / -1; font: var(--type-body-size)/1.5 var(--font); color: var(--text-secondary); }
.next-name { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--strong) var(--type-heading-size)/1.3 var(--font); }
.next-name .key { font-size: var(--type-body-size); padding: .2em .45em; }
.next-page .arrow { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.next-page a:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .next-page .arrow { transition: translate var(--dur-1) var(--ease-out); } .next-page a:hover .arrow { translate: calc(var(--space-1) * var(--website-inline-direction)) 0; } }
/* Short windows: the sidebar tightens so it always fits; it never shows a scroll bar. */
@media (min-width: 62rem) and (max-height: 46rem) {
  .logo { --logo-width: 10rem; }
  .index nav a { min-height: 0; padding-block: .3rem; }
  .appearance { margin-top: var(--space-3); }
}