/* Bloom website. The frame and the landing page follow the reference the owner chose: its tokens, its components'
   measurements and its motion. Tailwind's easing names map to its curves: ease cubic-bezier(.4,0,.2,1), ease-out
   (0,0,.2,1), ease-in (.4,0,1,1); where the reference writes a CSS keyword, the keyword is kept. */

:root {
  color-scheme: light dark;
  --bg: light-dark(#fcfbf8, #071a31);
  --panel: light-dark(#f5f3ee, #0c2d54);
  --card: light-dark(#ffffff, #0e396a);
  --ink: light-dark(#071a31, #fcfbf8);
  --ink-2: light-dark(#5f6d77, rgb(252 251 248 / 72%));
  --ink-3: light-dark(#748491, rgb(252 251 248 / 52%));
  --line: light-dark(rgb(7 26 49 / 10%), rgb(252 251 248 / 12%));
  --line-2: light-dark(#d8dce0, rgb(252 251 248 / 22%));
  --chip: light-dark(rgb(7 26 49 / 5%), rgb(252 251 248 / 12%));
  --chip-2: light-dark(rgb(7 26 49 / 10%), rgb(252 251 248 / 20%));
  --chip-ink: light-dark(#3d464e, #fcfbf8);
  --hover: light-dark(#f5f3ee, rgb(252 251 248 / 8%));
  --button: light-dark(#071a31, #fcfbf8);
  --button-ink: light-dark(#fcfbf8, #071a31);
  --button-hover: light-dark(#0e396a, #c1defe);
  --button-press: light-dark(#1e5ea7, #6bb1ff);
  --link-hover: light-dark(#5f6d77, #c1defe);
  --link-press: light-dark(#1e5ea7, #6bb1ff);
  --ib-bg: light-dark(rgb(7 26 49 / 5%), rgb(252 251 248 / 5%));
  --ib-hover: light-dark(rgb(7 26 49 / 10%), rgb(252 251 248 / 10%));
  --ib-press: light-dark(rgb(7 26 49 / 20%), rgb(252 251 248 / 20%));
  --ib-border: light-dark(rgb(7 26 49 / 5%), rgb(252 251 248 / 10%));
  --focus: #6bb1ff;
  --footer: light-dark(#071a31, #0c2d54);
  --s1: light-dark(#5f6d770a, #0b0d0f33);
  --s2: light-dark(#5f6d7708, #0b0d0f33);
  --s3: light-dark(#5f6d770d, #0b0d0f33);
  --shadow-sm: 0 4px 5px var(--s1), 0 6px 10px var(--s3);
  --shadow-md: 0 4px 5px var(--s1), 0 4px 10px var(--s2), 0 10px 20px var(--s3);
  --shadow-lg: 0 4px 5px var(--s1), 0 8px 15px var(--s2), 0 15px 30px light-dark(#5f6d770f, #0b0d0f33);
  --shadow-xl: 0 4px 5px var(--s1), 0 8px 15px var(--s2), 0 30px 50px light-dark(#5f6d7714, #0b0d0f33);
  --shadow-2xl: 0 4px 5px var(--s1), 0 10px 15px var(--s1), 0 40px 50px light-dark(#5f6d771a, #0b0d0f33);
  --grid-line: light-dark(#e4e6e9, rgb(252 251 248 / 14%));
  --grid-live: light-dark(#ffd39d, rgb(255 211 157 / 45%));
  --grid-key: light-dark(#84c1ff, rgb(132 193 255 / 50%));

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-huge: 72px; --t-h1: 60px; --t-h2: 48px; --t-h3: 36px; --t-h4: 28px; --t-h5: 24px; --t-h6: 20px;
  --t-lg: 18px; --t-md: 16px; --t-sm: 14px; --t-xs: 12px;
  --b-lg: 18px; --b-md: 16px; --b-sm: 14px;
  --track-tighter: -2px; --track-tight: -1px; --track-loose: 1px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* The reference's named spacing, gaps and section padding; they shrink at 1023 and 767 like its own. */
  --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-3xl: 48px; --sp-4xl: 56px;
  --gap-md: 16px; --gap-lg: 24px; --gap-xl: 32px; --gap-2xl: 48px; --gap-3xl: 56px; --gap-4xl: 64px;
  --section: 120px;
  --header-h: 68px;
  --banner-h: 40px;
  /* What covers the top of the screen: the sticky header below 1072px, from there the floating header card (24px from
     the top, 72px tall). Sticky parts and anchor jumps keep clear of it. */
  --cover: var(--header-height, 68px);

  --page-x: 80px;
  --content: 1280px;
  --panel-x: 24px;
}
@media (min-width: 1072px) { :root { --cover: 96px; } }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Four tints shared by the demo panels. */
[data-tone="blue"] { --tone-ink: light-dark(#1e5ea7, #84c1ff); --tone-a: #4890e3; --tone-b: #baf0ec; }
[data-tone="green"] { --tone-ink: light-dark(#556425, #cee67e); --tone-a: #5ddfd7; --tone-b: #dbee9f; }
[data-tone="purple"] { --tone-ink: light-dark(#4d3589, #d4c2ff); --tone-a: #b89ffa; --tone-b: #ffd39d; }
[data-tone="orange"] { --tone-ink: light-dark(#5d3e20, #ffd39d); --tone-a: #f8961f; --tone-b: #ffd39d; }

/* Squircle corners where the browser draws them: the radius doubles, as the reference does. */
.sq { border-radius: var(--r, 16px); }
@supports (corner-shape: squircle) and (background: paint(x)) {
  .sq, .btn:not(.btn-tertiary, .btn-underline), .nav-item, .nav-trigger, .nav-rich, .nav-plain, .theme-toggle, .icon-btn, .badge { corner-shape: squircle; }
  .sq { border-radius: calc(var(--r, 16px) * 2); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Jumps to an anchor land 16px under whatever covers the top of the screen. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--cover) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.4 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, pre { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.i { width: 24px; height: 24px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 1100; padding: 12px 16px; border-radius: 12px; background: var(--button); color: var(--button-ink); }
.skip-link:focus { top: 16px; }

/* The reference's type steps (type-huge … type-overline). */
.t-huge, .t-h1, .t-h2, .t-h3, .t-h5, .t-h6 { font-weight: 500; }
.t-huge { font-size: var(--t-huge); line-height: 1.1; letter-spacing: var(--track-tighter); }
.t-h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: var(--track-tighter); }
.t-h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: var(--track-tighter); }
.t-h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: var(--track-tight); }
.t-h5 { font-size: var(--t-h5); line-height: 1.4; letter-spacing: 0; }
.t-h6 { font-size: var(--t-h6); line-height: 1.4; letter-spacing: 0; }
.t-body-lg { font-size: var(--b-lg); line-height: 1.4; }
.t-body-md { font-size: var(--b-md); line-height: 1.4; }
.t-caption { font-size: 12px; line-height: 1.4; font-weight: 500; }
.t-overline { font-size: 12px; line-height: 1; letter-spacing: var(--track-loose); font-weight: 600; text-transform: uppercase; }
.t-display { font-family: var(--font-display); }
.prose h1 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.1; letter-spacing: var(--track-tight); }
.eyebrow { font-size: var(--t-xs); line-height: 1; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.container { width: min(100% - 2 * var(--page-x), var(--content)); margin-inline: auto; }

/* Buttons: primary, secondary, tertiary, tertiary with an underline, and the sign-up style
   with an icon chip; standard, small and extra-small sizes. Colour changes take 150ms. */
.btn { --icon-size: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; font-family: var(--font-sans); font-weight: 500; line-height: 1.4; letter-spacing: 0; white-space: nowrap; outline: none; cursor: pointer; transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease); }
.btn > .i { width: var(--icon-size); height: var(--icon-size); }
.btn-standard { min-height: 50px; padding: 12px 20px; border-radius: 10px; font-size: 16px; }
.btn-small { --icon-size: 16px; min-height: 48px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
@supports (corner-shape: squircle) and (background: paint(x)) {
  .btn-standard { border-radius: 20px; }
  .btn-small { border-radius: 16px; }
}
.btn-primary { background: var(--button); color: var(--button-ink); }
.btn-primary:hover { background: var(--button-hover); }
.btn-primary:active { background: var(--button-press); }
.btn-primary:focus-visible { border-color: var(--focus); }
.btn-secondary { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.btn-secondary:hover { border-color: var(--button); background: var(--button); color: var(--button-ink); }
.btn-secondary:active { border-color: var(--button-hover); background: var(--button-hover); color: var(--button-ink); }
.btn-secondary:focus-visible { border-color: transparent; outline: 2px solid var(--focus); outline-offset: -2px; }
.btn-tertiary { min-height: 0; padding: 8px 0; background: transparent; color: var(--ink); }
.btn-tertiary:hover { color: var(--link-hover); }
.btn-tertiary:active { color: var(--link-press); }
.btn-tertiary:focus-visible { border-color: var(--focus); }
.btn-underline { min-height: 0; padding: 9.5px 1.5px 8px; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: transparent; color: var(--ink); }
.btn-underline:hover { color: var(--link-hover); }
.btn-underline:active { color: var(--link-press); }
.btn-underline:focus-visible { padding: 8px 0; border: 1.5px solid var(--focus); }
.btn-oauth { gap: 12px; padding: 4px 16px 4px 4px; }
.btn-chip { --r: 8px; display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 9px; background: #fcfbf8; color: #071a31; }
.btn-chip > .i { width: 100%; height: 100%; }

/* Icon-only button: the glyph nudges 2px up and right on hover, 1px while pressed. */
.icon-btn { --icon-size: 24px; display: inline-flex; flex: none; align-items: center; justify-content: center; border: 1px solid var(--ib-border); background: var(--ib-bg); color: var(--ink); outline: none; cursor: pointer; transition: all 150ms var(--ease); }
.icon-btn:hover { background: var(--ib-hover); }
.icon-btn:active { background: var(--ib-press); }
.icon-btn:focus-visible { border-color: transparent; outline: 2px solid var(--focus); outline-offset: 0; }
.icon-btn-xs { --icon-size: 16px; width: 32px; height: 32px; border-radius: 8px; }
.icon-btn > .i { width: var(--icon-size); height: var(--icon-size); transition: transform 150ms var(--ease-out); }
.icon-btn:hover > .i { transform: translate(2px, -2px); }
.icon-btn:active > .i { transform: translate(1px, -1px); }

/* The old shared controls the icon browser and the docs still use. */
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); }
.icon-button:hover { background: var(--chip); }
.icon-button .i { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px; background: var(--chip); color: var(--chip-ink); font-size: var(--t-xs); font-weight: 500; line-height: 1.4; }

/* Badge, in its default colour. */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; border-radius: 4px; background: light-dark(rgb(7 26 49 / 5%), rgb(252 251 248 / 20%)); color: light-dark(#3d464e, #fcfbf8); font-weight: 500; line-height: 1.4; }
.badge-standard { padding: 4px 12px; font-size: 14px; }
.badge-small { padding: 4px 8px; font-size: 12px; }

/* Chips: the reference's squircle, coloured, with a glyph inset by 14.29%. */
.chip-shape { position: relative; display: inline-block; flex: none; color: #071a31; }
.chip-shape > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chip-shape > .i { position: absolute; inset: 14.29%; width: 71.42%; height: 71.42%; }

/* Brand: the mark on its chip and the name, 32px tall like the reference's logo. */
.brand { display: flex; flex: none; align-items: center; border-radius: 4px; }
.brand-logo { --logo-h: 32px; display: flex; align-items: center; gap: calc(var(--logo-h) / 4); height: var(--logo-h); }
.brand-chip { width: var(--logo-h); height: var(--logo-h); }
.brand-name { font-size: calc(var(--logo-h) * 0.82); font-weight: 600; line-height: 1; letter-spacing: calc(var(--logo-h) * -0.025); }

/* Announcement bar: lime, one line, with the pill from 1024px. */
:root[data-note="hidden"] .announce { display: none; }
.announce { position: relative; width: 100%; background: #dbee9f; color: #071a31; transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.announce-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--banner-h); padding: 8px 48px 8px 24px; text-align: center; }
.announce-row { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 32px; }
.announce-message { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.announce-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.announce-icon > .i { width: 16px; height: 16px; }
.announce-text { min-width: 0; text-align: left; font-size: 12px; font-weight: 500; line-height: 20px; }
.announce-text > .i { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: baseline; translate: 0 0.125em; }
.announce-pill { display: none; flex: none; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: rgb(252 251 248 / 40%); color: #3d464e; font-size: 12px; font-weight: 500; line-height: 1.4; }
.announce-pill > .i { width: 12px; height: 12px; }
.announce-close { position: absolute; top: 50%; right: 8px; display: flex; align-items: center; justify-content: center; padding: 8px; border: 0; border-radius: 4px; background: none; color: inherit; opacity: 0.7; translate: 0 -50%; transition: opacity 150ms var(--ease); }
.announce-close:hover { opacity: 1; }
.announce-close > .i { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .announce-link { padding-left: 32px; }
  .announce-message { gap: 12px; }
  .announce-text { display: -webkit-box; overflow: hidden; font-size: 14px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
}
@media (min-width: 1024px) {
  .announce-text > .i { display: none; }
  .announce-pill { display: inline-flex; }
}

/* Header: sticky with a shadow once scrolled below 1072px; from 1072px it scrolls away and a
   floating card takes over while the page's first section is out of view. */
.site-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--bg); transition: box-shadow 200ms var(--ease); }
.header-wrap { max-width: 1920px; margin-inline: auto; }
.header-bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: 24px; }
.header-start { display: flex; align-items: center; gap: 24px; }
.header-end { display: flex; align-items: center; }
@media (max-width: 1071px) { .site-header[data-scrolled] { box-shadow: var(--shadow-sm); } }
@media (min-width: 768px) { .header-bar { padding-inline: 40px; } }
@media (min-width: 1072px) {
  .site-header { position: relative; }
  .announce[data-contained] { pointer-events: none; opacity: 0; transform: translateY(-100%); transition-timing-function: var(--ease-in); }
}
@media (min-width: 1280px) { .header-bar { padding-inline: 48px; } }

/* Main menu: hover or click opens a group's panel, Escape or leaving the bar closes it. */
.nav-menu { display: none; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-item { display: flex; align-items: center; border-radius: 8px; transition: background-color 150ms var(--ease); }
.nav-item:hover, .nav-item[data-open] { background: var(--hover); }
.nav-item:has(:focus-visible) { outline: 2px solid var(--focus); }
.nav-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; }
.nav-trigger:focus-visible { outline: none; }
.nav-trigger > .i { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.nav-trigger[aria-expanded="true"] > .i { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 10; }
.nav-panel::before { content: ""; position: absolute; top: -4px; inset-inline: 0; height: 4px; }
.nav-panel[data-width="product"] { --panel-w: 576px; }
.nav-panel[data-width="default"] { --panel-w: 924px; }
.nav-panel-card { --r: 16px; width: fit-content; overflow: hidden; margin-left: max(16px, min(max(198px, calc((100vw - 1920px) / 2 + 198px)), calc(100vw - var(--panel-w) - 16px))); background: var(--card); box-shadow: var(--shadow-2xl); }
.nav-panel-row { display: flex; align-items: stretch; max-width: var(--panel-w); }
.nav-col { min-width: 0; padding: 32px; background: var(--card); }
.nav-col + .nav-col { border-left: 1px solid var(--line); }
.nav-col-label { display: block; margin-bottom: 24px; padding-left: 8px; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.nav-stack { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.nav-stack-fixed { width: 240px; }
.nav-col-plain .nav-stack { gap: 8px; }
.nav-rich { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; transition: background-color 150ms var(--ease); }
.nav-rich:hover { background: var(--hover); }
.nav-chip { width: 36px; height: 36px; }
.nav-rich-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.nav-rich-label { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.375; text-overflow: ellipsis; white-space: nowrap; }
.nav-rich-line { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 12px; line-height: 1.375; opacity: 0.8; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.nav-plain { display: flex; min-width: 0; align-items: center; padding: 4px 8px; border-radius: 12px; color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.43; transition: background-color 150ms var(--ease); }
.nav-plain:hover { background: var(--hover); }
@media (min-width: 1072px) { .nav-menu { display: flex; } }

/* The buttons on the right: extra-small below 768px, small from there. */
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { --icon-size: 16px; min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.nav-actions .long, .nav-npm, .nav-cli { display: none; }
.theme-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ib-border); border-radius: 8px; background: var(--ib-bg); color: var(--ink); transition: background-color 150ms var(--ease); }
.theme-toggle:hover { background: var(--ib-hover); }
.theme-toggle:active { background: var(--ib-press); }
.theme-toggle .i { width: 20px; height: 20px; }
.when-dark { display: none; }
:root[data-theme="dark"] .when-dark { display: contents; }
:root[data-theme="dark"] .when-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .when-dark { display: contents; }
  :root:not([data-theme="light"]) .when-light { display: none; }
}
@media (min-width: 481px) { .nav-actions .long { display: inline; } .nav-actions .short { display: none; } }
@media (min-width: 768px) {
  .nav-actions .btn { min-height: 48px; padding: 12px 16px; }
  .nav-actions .btn-tertiary { padding: 8px 4px; }
  .nav-cli { display: inline-flex; }
  .theme-toggle { width: 48px; height: 48px; border-radius: 12px; }
}
@media (min-width: 1072px) { .nav-npm { display: inline-flex; } }

/* Menu button: the list icon turns into a cross (200ms). */
.menu-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ink); }
.menu-toggle > .i { position: absolute; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.menu-toggle > .i:last-child, .menu-toggle[aria-expanded="true"] > .i:first-child { opacity: 0; }
.menu-toggle > .i:last-child { transform: rotate(-90deg) scale(0.8); }
.menu-toggle[aria-expanded="true"] > .i:first-child { transform: rotate(90deg) scale(0.8); }
.menu-toggle[aria-expanded="true"] > .i:last-child { opacity: 1; transform: none; }
@media (min-width: 1072px) { .menu-toggle { display: none; } }

/* Phone and tablet menu: slides in from the right under the header; groups fold open. */
.mnav { position: fixed; top: var(--header-height, 0px); bottom: 0; inset-inline: 0; z-index: 999; overflow: hidden; pointer-events: none; }
.mnav[data-open] { pointer-events: auto; }
.mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 100%; max-width: 560px; border-top: 1px solid var(--line); background: var(--bg); transform: translateX(100%); transition: transform 300ms var(--ease); }
.mnav[data-open] .mnav-panel { transform: none; }
.mnav-list { display: flex; flex: 1; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.mnav-row { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 8px 8px 8px 24px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.4; text-align: left; }
.mnav-row-icon { display: flex; flex: none; align-items: center; padding: 8px 16px; }
.mnav-row-icon > .i { width: 24px; height: 24px; transition: transform 200ms var(--ease); }
.mnav-row[aria-expanded="true"] .mnav-row-icon > .i { transform: rotate(180deg); }
.mnav-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease); }
.mnav-fold[data-open] { grid-template-rows: 1fr; }
.mnav-fold-inner { overflow: hidden; }
.mnav-fold-body { padding: 12px 32px 24px; border-bottom: 1px solid var(--line); background: var(--card); }
.mnav-label { display: block; padding-block: 12px; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 1px; text-transform: uppercase; }
.mnav-rich { padding: 8px 12px; }
.mnav-rich .nav-rich-label { line-height: 1.5; }
.mnav-plain { display: block; margin-left: 12px; padding: 12px 0 12px 12px; border-left: 1px solid var(--line); border-radius: 0 12px 12px 0; font-size: 16px; font-weight: 500; }
.mnav-plain:hover { background: var(--hover); }
.mnav-label + .mnav-plain { margin-top: 12px; }
.mnav-actions { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-top: 1px solid var(--line); background: var(--panel); }
.mnav-actions .btn { width: 100%; }
@media (min-width: 481px) { .mnav-row { height: 64px; padding-left: 32px; } }
@media (min-width: 768px) { .mnav-row { padding-right: 24px; } }
@media (min-width: 1072px) { .mnav { display: none; } }

/* Floating header card (from 1072px): in over 300ms ease-out, out over 250ms ease-in. */
.header-float { position: fixed; top: 24px; inset-inline: 40px; z-index: 1000; display: none; max-width: 1824px; margin-inline: auto; opacity: 0; pointer-events: none; transform: translateY(-100%); transition: transform 250ms ease-in, opacity 250ms ease-in; }
.header-float[data-shown] { opacity: 1; pointer-events: auto; transform: none; transition: transform 300ms ease-out, opacity 300ms ease-out; }
.header-float-card { --r: 32px; position: relative; isolation: isolate; box-shadow: var(--shadow-xl); }
.header-float-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--card); corner-shape: inherit; }
.header-float-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; }
.header-float .nav-panel-card { margin-left: max(16px, min(max(174px, calc((100vw - 1440px) / 2 + 174px)), calc(100vw - var(--panel-w) - 16px))); }
@media (min-width: 1072px) { .header-float { display: block; } }
@media (min-width: 1280px) { .header-float { inset-inline: 48px; } }

/* Footer: a midnight card in an 8px (24px from 577px) frame; heading and link columns side by
   side from 1280px, three CSS columns from 768px. */
.site-footer { display: flex; justify-content: center; width: 100%; padding: 8px; }
.footer-card { --r: 32px; display: flex; justify-content: center; width: 100%; max-width: 1920px; overflow: clip; background: var(--footer); color: #fcfbf8; }
.footer-inner { display: flex; flex-direction: column; gap: var(--gap-2xl); width: 100%; max-width: 1280px; padding: 16px; }
.footer-body { display: flex; flex-direction: column; gap: var(--gap-4xl); margin: 32px 0 16px; }
.footer-top { display: flex; flex-direction: column; gap: var(--gap-4xl); }
.footer-head { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.footer-statement { max-width: 400px; font-family: ui-sans-serif, system-ui, sans-serif; font-size: var(--t-h1); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-tighter); }
.footer-nav { display: flex; width: fit-content; flex-direction: column; gap: var(--gap-xl); }
.footer-group { display: flex; width: 200px; max-width: 200px; flex-direction: column; gap: 8px; }
.footer-group h2 { font-size: var(--b-lg); font-weight: 500; line-height: 1.4; }
.footer-group ul { display: flex; flex-direction: column; gap: 8px; }
.footer-group a, .footer-links a { display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; color: rgb(252 251 248 / 70%); font-size: var(--b-sm); line-height: 1.4; transition: color 150ms var(--ease); }
.footer-group a:hover, .footer-links a:hover { color: #fcfbf8; }
.footer-logo { display: flex; width: fit-content; color: #fcfbf8; }
.footer-logo .brand-logo { --logo-h: 42px; }
.footer-logo-wide { display: none; }
.footer-logo-wide .brand-logo { --logo-h: 52px; }
.footer-bottom { display: flex; flex-direction: column; gap: 24px; padding-top: var(--sp-3xl); border-top: 1px solid #0c2d54; }
.footer-meta { color: #fcfbf8; font-size: var(--b-md); font-weight: 500; line-height: 1.4; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-lg); }
.footer-credit { max-width: 380px; color: rgb(252 251 248 / 70%); }
@media (min-width: 577px) { .site-footer { padding: 24px; } }
@media (min-width: 768px) {
  .footer-body { margin: 48px 0 32px; }
  .footer-nav { display: block; columns: 3; column-gap: 32px; }
  .footer-group { margin-bottom: var(--sp-xl); break-inside: avoid; }
}
@media (min-width: 1024px) {
  .footer-inner { padding-inline: 40px; }
  .footer-body { margin: 80px 0 48px; }
  .footer-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .footer-links { justify-content: center; }
  .footer-credit { justify-self: end; text-align: right; }
}
@media (min-width: 1280px) {
  .footer-top { flex-direction: row; justify-content: space-between; gap: 24px; }
  .footer-logo-wide { display: flex; }
  .footer-logo-narrow { display: none; }
}

/* Demos shared by the landing page and the docs. */
.demo { width: 100%; max-width: 480px; }
.demo-note { margin-top: 16px; color: var(--ink-2); font-size: var(--t-sm); text-align: center; }
.demo-searchbox { --r: 16px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--card); box-shadow: var(--shadow-sm); font-weight: 500; }
.demo-searchbox .i { width: 20px; height: 20px; color: var(--ink-2); }
.demo-count { margin-left: auto; color: var(--ink-2); font: 400 var(--t-xs)/1 var(--font-mono); }
.demo-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.demo-result { --r: 14px; display: grid; justify-items: center; gap: 10px; padding: 18px 6px 12px; background: var(--card); font: 400 11px/1.2 var(--font-mono); color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.demo-result .i { width: 28px; height: 28px; color: var(--ink); }
.style-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.style-strip li { display: grid; justify-items: center; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); }
.style-strip-glyph { --r: 18px; display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--card); color: var(--ink); }
.style-strip-glyph .i { width: 48px; height: 48px; }
.demo-grid { display: grid; justify-items: center; gap: 20px; }
.grid-figure { position: relative; width: min(100%, 288px); aspect-ratio: 1; border-radius: 12px; background: var(--card); }
.grid-figure > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid-figure > .i { color: var(--ink); }
.demo-grid figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--ink-2); font-size: var(--t-sm); }
.demo-grid figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.key { width: 14px; height: 14px; border-radius: 4px; }
.key-line { border: 1px solid var(--grid-line); background: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 4px); }
.key-live { border: 2px solid var(--grid-live); }
.key-circle { border: 2px solid var(--grid-key); border-radius: 50%; }
.demo-color ul { display: grid; gap: 10px; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 16px; background: var(--card); }
.color-row[data-tone="ink"] { --tone-ink: var(--ink); }
.color-chip { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 500; }
.color-chip i { width: 14px; height: 14px; border-radius: 50%; background: var(--tone-ink); }
.color-chip code { color: var(--ink-2); font-size: var(--t-xs); }
.color-icons { display: flex; gap: 12px; color: var(--tone-ink); }
.color-icons .i { width: 28px; height: 28px; }
.demo-file { overflow: hidden; border-radius: 16px; background: #071a31; color: #fcfbf8; box-shadow: var(--shadow-md); }
.demo-file figcaption { padding: 12px 18px; border-bottom: 1px solid rgb(252 251 248 / 12%); color: rgb(252 251 248 / 70%); font: 400 var(--t-xs)/1.4 var(--font-mono); }
.demo-file pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.6; }
.demo-file .demo-note { margin: 0; padding: 0 18px 16px; color: rgb(252 251 248 / 70%); text-align: left; }
.demo-checks { display: grid; gap: 8px; }
.demo-checks li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--card); font-size: var(--t-sm); font-weight: 500; }
.demo-checks .i { width: 22px; height: 22px; color: var(--tone-ink); }

/* Docs: a sidebar, the page, and the page's sections. */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 56px; padding-block: 56px 96px; }
.docs-nav, .docs-toc { position: sticky; top: calc(var(--cover) + 16px); align-self: start; max-height: calc(100vh - var(--cover) - 32px); overflow-y: auto; }
.docs-group { margin: 24px 0 8px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.docs-nav .docs-group:first-child, .docs-toc .docs-group:first-child { margin-top: 0; }
.docs-nav ul, .docs-menu ul { display: grid; gap: 2px; }
.docs-nav a, .docs-menu a { display: block; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
.docs-nav a:hover, .docs-menu a:hover { background: var(--chip); color: var(--ink); }
.docs-nav a[aria-current="page"], .docs-menu a[aria-current="page"] { background: var(--chip-2); color: var(--ink); }
.docs-toc ul { display: grid; gap: 8px; border-left: 1px solid var(--line); }
.docs-toc a { display: block; padding-left: 14px; color: var(--ink-2); font-size: var(--t-sm); }
.docs-toc a:hover { color: var(--ink); }
.docs-menu { display: none; }
.docs-main { min-width: 0; max-width: 760px; }
.prose { display: grid; gap: 18px; font-size: var(--t-md); line-height: 1.65; }
.prose > .eyebrow { color: var(--ink-2); }
.prose h2 { margin-top: 32px; font-size: var(--t-h4); line-height: 1.2; letter-spacing: -0.5px; }
.prose h3 { margin-top: 12px; font-size: var(--t-h6); }
.docs-lede { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.5; }
.prose a:not(.next-links a) { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.prose a:not(.next-links a):hover { text-decoration-color: currentColor; }
.prose ul:not([class]) { display: grid; gap: 10px; padding-left: 20px; list-style: disc; }
.prose ul:not([class]) li::marker { color: var(--ink-3); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--chip); font-size: 0.875em; }
.prose pre { position: relative; overflow-x: auto; padding: 18px 20px; border-radius: 16px; background: var(--panel); font-size: 13.5px; line-height: 1.6; }
.prose pre code { padding: 0; background: none; font-size: inherit; }
.copy-code { position: absolute; top: 10px; right: 10px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; box-shadow: var(--shadow-sm); }
.copy-code:hover { color: var(--ink); }
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.5; }
.prose th, .prose td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.prose td .i { display: inline-block; width: 18px; height: 18px; margin-left: 4px; vertical-align: -4px; }
.style-cell { display: flex; gap: 8px; margin-bottom: 6px; }
.style-cell .i { width: 22px; height: 22px; }
.style-table th[scope="row"] { min-width: 140px; font-weight: 500; }
.stat-grid, .next-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-grid div { padding: 18px 20px; border-radius: 16px; background: var(--panel); }
.stat-grid dt { color: var(--ink-2); font-size: var(--t-sm); }
.stat-grid dd { margin-top: 4px; font-size: var(--t-h5); font-weight: 500; line-height: 1.2; letter-spacing: -0.5px; }
.prose .style-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.prose .style-strip-glyph { background: var(--panel); }
.prose .style-strip-glyph .i { width: 36px; height: 36px; }
.prose .demo-grid { margin-block: 8px; }
.prose .grid-figure { background: var(--panel); }
.category-columns { columns: 3 180px; column-gap: 32px; }
.category-columns li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: var(--t-sm); }
.category-columns span { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--t-xs); }
.next-links a { display: grid; gap: 4px; height: 100%; padding: 18px 20px; border-radius: 16px; background: var(--panel); }
.next-links a:hover { background: var(--chip-2); }
.next-links span { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.check-list { display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: #dbee9f; box-shadow: inset 0 0 0 4px light-dark(#f2f8de, #0c2d54); }
.release-date { margin-left: 10px; color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; }
.docs-pager a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; font-weight: 500; }
.docs-pager a:hover { background: var(--chip); }
.docs-pager span { color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.docs-pager-next { text-align: right; }

/* Icon browser: a linen panel with the toolbar card, the categories and the grid. */
/* The toolbar sticks 8px under whatever covers the top of the screen; the categories stick 16px under the toolbar,
   whose height icons.js keeps in --toolbar-h. */
html:has(.browser) { --toolbar-top: calc(var(--cover) + 8px); scroll-padding-top: calc(var(--toolbar-top) + var(--toolbar-h, 66px) + 16px); }
/* The heading and the panel share one frame, up to 1920px and centred like the header and the footer card; the title
   lines up with the toolbar card. */
.browser-head, .browser { width: min(100% - 2 * var(--panel-x), 1920px); margin-inline: auto; }
.browser-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 32px 16px 20px; }
.browser-head p { color: var(--ink-2); }
.browser { --r: 32px; padding: 16px; background: var(--panel); }
/* From 768px the search comes last, so when the row wraps it fills the last line rather than leaving the reset button
   there alone; on phones it moves to the top. */
.toolbar { --r: 18px; position: sticky; top: var(--toolbar-top); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px; background: var(--card); box-shadow: var(--shadow-sm); }
.tool { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; }
.tool > span:first-child:not(.sr-only) { text-transform: uppercase; letter-spacing: 1px; }
.tool[data-disabled] { opacity: 0.4; }
.tool output { min-width: 4.2ch; color: var(--ink); font: 500 var(--t-xs)/1 var(--font-mono); }
.tool-style, .tool-view { padding: 3px; border-radius: 14px; background: var(--chip); }
.style-button { display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--ink); }
.style-button:hover { background: var(--chip); }
.style-button[aria-pressed="true"] { background: var(--card); box-shadow: var(--shadow-sm); }
.style-button .i { width: 20px; height: 20px; }
.tool-value { padding-inline: 8px 6px; color: var(--ink); font-size: var(--t-sm); white-space: nowrap; }
.tool-range input { width: 92px; accent-color: var(--ink); }
.tool-color input { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: none; cursor: pointer; }
.tool-color input::-webkit-color-swatch-wrapper { padding: 3px; }
.tool-color input::-webkit-color-swatch { border: 0; border-radius: 7px; }
.tool-view button { padding: 8px 12px; border: 0; border-radius: 11px; background: transparent; font-size: var(--t-sm); font-weight: 500; }
.tool-view button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.tool-search { flex: 1 1 240px; min-width: 0; padding: 0 12px; border-radius: 14px; background: var(--chip); }
.tool-search .i { width: 18px; height: 18px; }
.tool-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--ink); font-size: var(--t-md); font-weight: 400; outline: none; }
.tool-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.tool-search kbd { padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-3); font-size: var(--t-xs); }
.browser-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.category-nav { position: sticky; top: calc(var(--toolbar-top) + var(--toolbar-h, 66px) + 16px); align-self: start; max-height: calc(100vh - var(--toolbar-top) - var(--toolbar-h, 66px) - 32px); overflow-y: auto; padding: 4px; }
.category-nav ul { display: grid; gap: 1px; }
.category-nav button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font-size: var(--t-sm); text-align: left; }
.category-nav button:hover { background: var(--chip); color: var(--ink); }
.category-nav button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
.category-count { color: var(--ink-3); font: 400 var(--t-xs)/1.7 var(--font-mono); }
.results { min-height: 60vh; padding: 20px; border-radius: 24px; background: var(--card); }
.results-count { margin-bottom: 16px; color: var(--ink-2); font-size: var(--t-sm); }
.results-group + .results-group { margin-top: 28px; }
.results-group h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: var(--t-lg); }
.results-group h2 span { color: var(--ink-3); font: 400 var(--t-xs)/1 var(--font-mono); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(104px, calc(var(--icon-size, 32px) + 56px)), 1fr)); gap: 6px; }
.icon-tile { --r: 16px; display: grid; justify-items: center; align-content: center; gap: 12px; width: 100%; min-height: calc(var(--icon-size, 32px) + 72px); padding: 18px 6px 12px; border: 0; background: transparent; color: var(--icon-color, var(--ink)); }
.icon-tile:hover { background: var(--panel); }
.icon-tile:active { background: var(--ib-press); }
.icon-tile .i { width: var(--icon-size, 32px); height: var(--icon-size, 32px); stroke-width: var(--icon-stroke, 1.5); }
.icon-tile [opacity], .detail-preview [opacity], .variant [opacity] { color: var(--icon-secondary, inherit); opacity: var(--icon-opacity, 0.5); }
.icon-tile [fill-opacity], .detail-preview [fill-opacity], .variant [fill-opacity] { color: var(--icon-secondary, inherit); fill-opacity: var(--icon-surface, 0.2); }
.icon-name { max-width: 100%; overflow: hidden; color: var(--ink-2); font: 400 11px/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.results-empty { padding: 48px 16px; color: var(--ink-2); text-align: center; }

/* Icon detail: a card over the page. */
.detail { --r: 24px; width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow-xl); }
.detail::backdrop { background: rgb(7 26 49 / 45%); backdrop-filter: blur(4px); }
.detail-inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; padding: 28px; }
.detail-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-right: 48px; }
.detail-head h2 { font: 500 var(--t-h5)/1.2 var(--font-mono); letter-spacing: -0.5px; overflow-wrap: anywhere; }
.detail-close { position: absolute; top: 20px; right: 20px; }
.detail-preview { --r: 20px; position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--panel); color: var(--icon-color, var(--ink)); }
.detail-preview > svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.detail-preview > .i { stroke-width: var(--icon-stroke, 1.5); }
.detail-side { display: grid; align-content: start; gap: 20px; min-width: 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-actions button, .detail-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); font-size: var(--t-sm); font-weight: 500; }
.detail-actions button:hover, .detail-actions a:hover { background: var(--chip); }
.detail-actions button:first-child { border-color: transparent; background: var(--button); color: var(--button-ink); }
.detail-actions button:first-child:hover { background: var(--button-hover); }
.detail-status { min-height: 20px; color: var(--ink-2); font-size: var(--t-sm); }
.detail-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--chip); justify-self: start; }
.detail-tabs button { padding: 8px 14px; border: 0; border-radius: 11px; background: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.detail-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.variant { --r: 14px; display: grid; justify-items: center; gap: 8px; padding: 16px 8px 12px; border: 1px solid transparent; background: var(--panel); color: var(--icon-color, var(--ink)); font-size: var(--t-xs); }
.variant span { color: var(--ink-2); }
.variant[aria-pressed="true"] { border-color: var(--ink); }
.variant .i { width: 32px; height: 32px; stroke-width: var(--icon-stroke, 1.5); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list button, .tag-list a { padding: 6px 12px; border: 0; border-radius: 12px; background: var(--chip); color: var(--chip-ink); font-size: var(--t-sm); }
.tag-list button:hover, .tag-list a:hover { background: var(--chip-2); }
.code-block { position: relative; display: grid; gap: 6px; }
.code-block p { color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.code-block pre { max-height: 220px; margin: 0; overflow: auto; padding: 14px 16px; border-radius: 14px; background: var(--panel); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-block .copy-code { top: 28px; }

/* Copy note: a click on an icon copies it and this note rises from the bottom edge, 400ms in and 240ms out on ease
   (the motion spec's Toast row); reduced motion keeps the fade and drops the rise. */
.copy-toast { position: fixed; z-index: 20; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: var(--t-sm); box-shadow: var(--shadow-xl); translate: -50% 0; opacity: 0; transform: translateY(100%); visibility: hidden; transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms; }
.copy-toast[data-open] { opacity: 1; transform: none; visibility: visible; transition: opacity 400ms ease, transform 400ms ease, visibility 0s; }
.copy-toast button { flex: none; padding: 6px 12px; border: 0; border-radius: 10px; background: rgb(255 255 255 / 14%); color: inherit; font-size: var(--t-sm); font-weight: 500; }
.copy-toast button:hover { background: rgb(255 255 255 / 24%); }
/* Reveal: site.js plays it once a block is in view; until then it waits hidden. */
html.can-reveal [data-reveal]:not([data-revealed]) { opacity: 0; translate: 0 25px; }

/* Reduced motion is reduced, not removed: every fade and colour change stays, and nothing slides, rises, turns or
   nudges. The phone menu fades over its 300ms instead of sliding, and chevrons and folds snap to their end. home.css
   does the same for the home page's parts. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.can-reveal [data-reveal]:not([data-revealed]) { translate: none; }
  .icon-btn:hover > .i, .icon-btn:active > .i, .announce[data-contained], .header-float, .copy-toast, .menu-toggle > .i:last-child, .menu-toggle[aria-expanded="true"] > .i:first-child { transform: none; }
  .nav-trigger > .i, .mnav-row-icon > .i, .mnav-fold { transition: none; }
  .mnav-panel { opacity: 0; transform: none; transition-property: opacity; }
  .mnav[data-open] .mnav-panel { opacity: 1; }
}

/* The reference's responsive steps: tokens shrink at 1279, 1023 and 767px. */
@media (max-width: 1279px) {
  :root { --page-x: 40px; --section: 96px; }
  .docs { grid-template-columns: 200px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 1023px) {
  :root {
    --t-huge: 60px; --t-h1: 48px; --t-h2: 36px; --t-h3: 28px; --t-h4: 24px; --t-h5: 22px; --t-h6: 18px; --track-tighter: -1px;
    --banner-h: 36px; --section: 64px; --page-x: 32px;
    --sp-lg: 20px; --sp-xl: 24px; --sp-3xl: 40px; --sp-4xl: 48px;
    --gap-lg: 20px; --gap-xl: 24px; --gap-2xl: 32px; --gap-3xl: 40px; --gap-4xl: 48px;
  }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .docs-nav { display: none; }
  .docs-menu { display: block; border-radius: 16px; background: var(--panel); }
  .docs-menu summary { padding: 14px 18px; font-weight: 500; cursor: pointer; }
  .docs-menu nav { padding: 0 8px 12px; }
  .docs-menu .docs-group { margin: 12px 12px 6px; }
  .browser-body { grid-template-columns: minmax(0, 1fr); }
  .category-nav { position: static; max-height: none; overflow-x: auto; padding: 0; }
  .category-nav ul { display: flex; gap: 6px; width: max-content; }
  .category-nav button { white-space: nowrap; background: var(--card); }
  .toolbar { position: static; }
  html:has(.browser) { scroll-padding-top: calc(var(--cover) + 16px); }
  .detail-inner { grid-template-columns: minmax(0, 1fr); }
  .detail-preview { max-width: 240px; width: 100%; justify-self: center; }
}
@media (max-width: 767px) {
  :root {
    --t-huge: 40px; --t-h1: 36px; --t-h2: 28px; --t-h3: 24px; --t-h4: 22px; --t-h5: 20px; --t-h6: 18px; --t-lg: 16px;
    --b-lg: 16px; --b-md: 14px; --b-sm: 12px;
    --track-tighter: 0px; --track-tight: 0px; --track-loose: 0px;
    --header-h: 64px; --section: 48px; --page-x: 16px; --panel-x: 8px;
    --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-3xl: 32px; --sp-4xl: 32px;
    --gap-md: 12px; --gap-lg: 16px; --gap-xl: 20px; --gap-2xl: 24px; --gap-3xl: 32px; --gap-4xl: 40px;
  }
  .stat-grid, .next-links { grid-template-columns: minmax(0, 1fr); }
  .prose .style-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .docs-pager { grid-template-columns: minmax(0, 1fr); }
  .browser { padding: 8px; }
  .browser-head { padding-inline: 8px; }
  .toolbar { padding: 10px; gap: 10px 12px; }
  .tool-search { order: -1; flex-basis: 100%; }
  .tool-range input { width: 72px; }
  .results { padding: 12px; }
  .icon-grid { grid-template-columns: repeat(auto-fill, minmax(max(84px, calc(var(--icon-size, 32px) + 40px)), 1fr)); }
  .detail { width: 100vw; max-width: 100vw; max-height: 88dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; corner-shape: round; }
  .detail-inner { padding: 20px 16px 24px; gap: 20px; }
  .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}