html {
  --color: #b3212a;
  --color-bg: #f7f5f0;
  --color-text: #252523;
  --color-area: #ece9e2;
  --accent: #b3212a;
  --width: 84rem;
  --line-height-absolute: .45rem;
  --line-height-relative: 1em;
  --font-1: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-2: Georgia, "Times New Roman", serif;
  color-scheme: light;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-1);
}

body { background: var(--color-bg); color: var(--color-text); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button { cursor: pointer; }
.skip-link { position: fixed; inset: -5rem auto auto 1rem; z-index: 100; background: #fff; padding: .7rem 1rem; }
.skip-link:focus { inset-block-start: 1rem; }

.site-header { position: sticky; z-index: 50; inset-block-start: 0; background: rgba(247,245,240,.94); border-block-end: 1px solid #dedbd4; backdrop-filter: blur(16px); }
.header-inner { max-inline-size: 92rem; padding-inline: clamp(1rem, 3vw, 3rem); margin-inline: auto; min-block-size: 4.75rem; display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 5rem); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; white-space: nowrap; font-size: 1.55rem; font-weight: 780; letter-spacing: -.07em; }
.brand img { inline-size: 1.42rem; block-size: 1.9rem; object-fit: contain; }
.brand small { font: 700 .57rem var(--font-1); letter-spacing: .18em; color: #8a8580; align-self: center; margin-inline-start: .35rem; margin-block-start: .3rem; }
.top-nav { display: flex; align-self: stretch; align-items: center; gap: 2rem; font-size: .85rem; font-weight: 650; }
.top-nav a { display: inline-flex; align-items: center; block-size: 100%; position: relative; color: #68645f; }
.top-nav a[aria-current], .top-nav a:hover { color: #1e1d1b; }
.top-nav a[aria-current]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--accent); }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 1.4rem; }
.header-actions > a { text-decoration: none; white-space: nowrap; font-size: .78rem; font-weight: 700; }
.header-actions > a:hover, .text-link:hover { color: var(--accent); }
.search-trigger { display: flex; align-items: center; gap: .7rem; border: 1px solid #dfdcd5; border-radius: .35rem; background: #fffdf9; color: #77716c; min-inline-size: 14rem; padding: .45rem .6rem; text-align: start; font-size: .78rem; }
.search-trigger:hover { border-color: #bdb7b0; }
.search-trigger kbd { margin-inline-start: auto; background: #f1eee9; padding: .15rem .35rem; border-radius: .2rem; font: 600 .62rem var(--font-1); }
.search-icon { color: #302d29; font-size: 1.3rem; line-height: .7; }

.hero { overflow: hidden; background: #f8f6f1; border-block-end: 1px solid #e3dfd8; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; min-block-size: min(43rem, calc(100svh - 4.75rem)); }
.hero-copy { position: relative; padding-block: clamp(5rem, 10vw, 9rem) 5.5rem; padding-inline-end: clamp(1rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .section-number { font-size: .66rem; letter-spacing: .21em; font-weight: 790; color: var(--accent); }
.eyebrow { display: flex; align-items: center; gap: .75rem; }
.eyebrow-line { inline-size: 1.6rem; block-size: 1px; background: var(--accent); }
.hero h1 { font-size: clamp(3.7rem, 7vw, 7.25rem); letter-spacing: -.092em; line-height: .99; --line-height: .99em; max-inline-size: 10ch; margin-block: 1.75rem 1.5rem; font-weight: 770; }
.hero h1 em { color: var(--accent); font-family: var(--font-2); font-weight: 500; letter-spacing: -.08em; }
.hero-lead { max-inline-size: 34rem; color: #625e58; font-size: clamp(1.03rem, 1.35vw, 1.2rem); --line-height: 1.6em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-block-start: 1.5rem; }
.button-primary { display: inline-flex; align-items: center; justify-content: space-between; min-inline-size: 11.8rem; min-block-size: 3rem; gap: 1.5rem; padding: .8rem 1rem; background: var(--accent); color: white; text-decoration: none; font-size: .78rem; font-weight: 760; border-radius: .1rem; }
.button-primary:hover { background: #8f1720; color: white; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; font-size: .8rem; font-weight: 740; text-decoration: none; border-block-end: 1px solid currentColor; padding-block-end: .25rem; }
.hero-meta { position: absolute; inset-block-end: 2.25rem; display: flex; align-items: center; gap: .6rem; color: #918c84; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.meta-dot { display: block; inline-size: .36rem; block-size: .36rem; background: var(--accent); border-radius: 50%; }
.hero-art { position: relative; display: grid; place-items: center; padding-block: 3rem; }
.art-frame { position: relative; aspect-ratio: 1; inline-size: min(100%, 38rem); border: 1px solid #e2ded6; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #f7f4ed 0 21%, #f1eee7 21.2% 21.4%, transparent 21.6%), radial-gradient(circle, transparent 0 45%, #e7e2d9 45.2% 45.4%, transparent 45.6%); }
.art-frame::before, .art-frame::after { content: ""; position: absolute; inset: 12%; border: 1px solid #dfdbd2; border-radius: 50%; }
.art-frame::after { inset: 27%; }
.art-orbit { position: absolute; inline-size: 76%; block-size: 1px; background: #dfdad1; transform: rotate(30deg); }
.art-orbit-two { transform: rotate(-47deg); }
.art-core { position: relative; z-index: 1; inline-size: 31%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 1.6rem 3.4rem #b3212a2a; color: white; }
.art-core span { font-size: clamp(7rem, 12vw, 12rem); line-height: .6; font-weight: 800; letter-spacing: -.12em; transform: translate(-.13em, -.1em); }
.art-node { position: absolute; z-index: 2; display: grid; place-items: center; inline-size: 3.9rem; aspect-ratio: 1; border: 1px solid #ded9d0; border-radius: 50%; background: #fffefa; color: #5c5650; font-size: .59rem; font-weight: 800; letter-spacing: .08em; box-shadow: 0 .6rem 1.7rem #2a251018; }
.art-node-a { inset-block-start: 14%; inset-inline-start: 17%; }.art-node-b { inset-block-start: 23%; inset-inline-end: 5%; }.art-node-c { inset-block-end: 14%; inset-inline-start: 10%; }.art-node-d { inset-block-end: 16%; inset-inline-end: 15%; }
.art-caption { position: absolute; inset-inline: 5%; inset-block-end: -2rem; display: flex; justify-content: space-between; color: #aea89e; font-size: .58rem; letter-spacing: .15em; }

.intro-section, .path-section { padding-block: clamp(5rem, 8vw, 8rem); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; padding-block-end: 2.6rem; border-block-end: 1px solid #d8d3cb; }
.section-heading h2, .code-layout h2 { font-size: clamp(2.4rem, 4.1vw, 4.3rem); letter-spacing: -.075em; --line-height: 1.05em; margin-block: 1.3rem 0; font-weight: 720; max-inline-size: 12ch; }
.section-heading > p { max-inline-size: 25rem; color: #706a64; font-size: .94rem; --line-height: 1.65em; margin: 0; }
.feature-grid { --u2-Items-width: 17rem; --u2-Gap: 0; margin-block-start: 0; }
.feature-grid > article { position: relative; min-block-size: 17rem; padding: 2.2rem 2rem 2rem 0; border-inline-end: 1px solid #d8d3cb; }
.feature-grid > article:not(:first-child) { padding-inline-start: 2rem; }
.feature-grid > article:last-child { border-inline-end: 0; }
.feature-icon { color: var(--accent); display: block; font-size: 2rem; line-height: 1; margin-block-end: 3.7rem; }
.feature-grid h3 { font-size: 1.09rem; letter-spacing: -.04em; margin-block: 0 .5rem; }
.feature-grid p { max-inline-size: 18rem; color: #706a64; font-size: .81rem; --line-height: 1.6em; }
.feature-grid article > a { position: absolute; inset-block-start: 2rem; inset-inline-end: 2rem; text-decoration: none; color: #b3ada3; }
.feature-grid article > a:hover { color: var(--accent); }
.code-section { background: #202322; color: #f4f4ef; padding-block: clamp(5rem, 8vw, 8rem); }
.code-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); }
.code-layout .section-number { color: #e47076; }
.code-layout h2 { max-inline-size: 11ch; }
.code-layout p { color: #b9bfbb; max-inline-size: 28rem; --line-height: 1.7em; }
.code-layout .text-link { margin-block-start: 1.5rem; color: #fff; }
.code-window { min-inline-size: 0; overflow: hidden; background: #171a19; border: 1px solid #4a4e4b; border-radius: .5rem; box-shadow: 0 2rem 4rem #0004; }
.code-title { display: flex; align-items: center; gap: 1rem; background: #292d2b; padding: .7rem 1rem; border-block-end: 1px solid #3b413d; font: 600 .66rem var(--font-1); color: #bcc4bc; }
.code-title > span:first-child { display: flex; gap: .27rem; }
.code-title i { display: block; inline-size: .38rem; block-size: .38rem; background: #777e77; border-radius: 50%; }
.code-title button { margin-inline-start: auto; padding: .2rem .5rem; color: #d3d9d3; background: transparent; border: 1px solid #646b64; border-radius: .2rem; font: inherit; }
.code-window pre { overflow: auto; margin: 0; padding: 1.5rem; color: #e2e5dc; font: .78rem/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.code-window code { font: inherit; }
.code-foot { display: flex; gap: 1rem; flex-wrap: wrap; padding: .75rem 1.5rem; border-block-start: 1px solid #343a36; font: .66rem ui-monospace, monospace; color: #b9c9b5; }
.code-foot span:first-child { color: #e98e8c; }
.path-list { margin-block-start: 1rem; }
.path-list a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding-block: 2rem; border-block-end: 1px solid #d8d3cb; text-decoration: none; }
.path-list a:hover h3, .path-list a:hover .path-arrow { color: var(--accent); }
.path-index { color: var(--accent); font-size: .7rem; font-weight: 800; }
.path-list h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.06em; margin: 0; }
.path-list p { margin: .3rem 0 0; color: #817b73; font-size: .8rem; }
.path-arrow { font-size: 1.4rem; }

/* The homepage follows the reader's scroll when supported. All content stays visible
   without scroll timelines and when reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero { view-timeline-name: --qino-hero; view-timeline-axis: block; }
    .hero-art .art-core {
      animation: hero-core-scroll linear both;
      animation-timeline: --qino-hero;
      animation-range: exit 0% exit 100%;
    }
    .hero-art .art-node-a, .hero-art .art-node-c {
      animation: hero-node-left linear both;
      animation-timeline: --qino-hero;
      animation-range: exit 0% exit 100%;
    }
    .hero-art .art-node-b, .hero-art .art-node-d {
      animation: hero-node-right linear both;
      animation-timeline: --qino-hero;
      animation-range: exit 0% exit 100%;
    }
    .feature-grid > article, .code-window, .path-list > a {
      animation: section-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    @keyframes hero-core-scroll {
      from { transform: translateY(0) scale(1); }
      to { transform: translateY(-1.5rem) scale(.88); }
    }
    @keyframes hero-node-left {
      from { transform: translate(0, 0); }
      to { transform: translate(-1rem, -1.25rem); }
    }
    @keyframes hero-node-right {
      from { transform: translate(0, 0); }
      to { transform: translate(1rem, 1.25rem); }
    }
    @keyframes section-enter {
      from { opacity: .45; transform: translateY(1.5rem); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

.site-footer { background: #ece9e2; border-block-start: 1px solid #d8d3cb; color: #6f6961; }
.footer-inner { min-block-size: 7rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; font-size: .73rem; }
.footer-inner > span:first-child { color: #242320; font-size: .9rem; font-weight: 800; letter-spacing: -.04em; }.footer-inner i { color: var(--accent); font-style: normal; }
.footer-inner a { text-decoration: none; border-block-end: 1px solid currentColor; }

.docs-shell { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) minmax(10rem, 13rem); max-inline-size: 92rem; min-block-size: calc(100svh - 4.75rem); margin-inline: auto; }
.docs-sidebar { border-inline-end: 1px solid #e2ded7; }
.sidebar-inner { position: sticky; inset-block-start: 4.75rem; max-block-size: calc(100svh - 4.75rem); overflow: auto; padding: 2.75rem 1.2rem 3rem clamp(1rem, 3vw, 3rem); }
.sidebar-top, .docs-toc h2 { color: #aaa298; font-size: .59rem; font-weight: 800; letter-spacing: .17em; }
.sidebar-close { display: none; }
.nav-group { margin-block-start: 2.5rem; }
.nav-group h2 { margin: 0 0 .75rem; color: #35322e; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.docs-nav a { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; margin-inline-start: -.75rem; border-radius: .2rem; font-size: .77rem; color: #67615b; }
.docs-nav > .nav-overview { font-weight: 720; margin-block-start: 1.35rem; }
.docs-nav a span { display: none; }.docs-nav a:hover { color: #2b2824; background: #ece9e2; }.docs-nav a:hover span { display: block; }
.docs-nav .nav-lang { color: #a69e95; font-size: .56rem; font-weight: 800; letter-spacing: .06em; }
.docs-nav a[aria-current] { color: var(--accent); background: #f1e7e3; font-weight: 750; }
.docs-main { min-inline-size: 0; }
.docs-content { max-inline-size: 56rem; padding: 2.6rem clamp(1.5rem, 5vw, 5rem) 6rem; margin-inline: auto; }
.breadcrumb { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; font-size: .69rem; color: #948d84; margin-block-end: 3.5rem; }.breadcrumb a { text-decoration: none; }.breadcrumb strong { color: #403b35; font-weight: 680; }
.prose h1 { font-size: clamp(2.7rem, 4.3vw, 4.3rem); --line-height: 1.05em; letter-spacing: -.075em; margin-block: 0 2rem; font-weight: 740; }
.prose h2 { font-size: clamp(1.65rem, 2.2vw, 2.2rem); --line-height: 1.15em; letter-spacing: -.055em; margin-block: 3.5rem 1rem; padding-block-start: 2rem; border-block-start: 1px solid #e4e0d8; scroll-margin-top: 6rem; }
.prose h3 { font-size: 1.25rem; letter-spacing: -.04em; margin-block: 2.5rem .7rem; scroll-margin-top: 6rem; }
.prose p, .prose li { color: #56514c; font-size: .91rem; --line-height: 1.75em; }
.prose p { margin-block: 0 1.25rem; }.prose li { margin-block: .35rem; }.prose ul, .prose ol { padding-inline-start: 1.5rem; margin-block: 1.3rem; }
.prose a { color: #a51f28; text-decoration-color: #d7a3a6; text-underline-offset: .2em; }.prose a:hover { text-decoration-color: currentColor; }
.prose code { padding: .12rem .3rem; background: #ece9e2; border-radius: .18rem; font: .83em ui-monospace, SFMono-Regular, Consolas, monospace; color: #a51f28; overflow-wrap: anywhere; }
.prose pre { margin-block: 1.6rem 2rem; padding: 1.3rem 1.5rem; background: #222625; color: #ecede6; border-radius: .35rem; overflow: auto; box-shadow: 0 .5rem 1.3rem #1d24201a; }
.prose pre code { display: block; min-inline-size: max-content; padding: 0; background: none; color: inherit; font-size: .77rem; line-height: 1.65; overflow-wrap: normal; }
.doc-code { margin-block: 1.6rem 2rem; border: 1px solid #d8d3cb; border-radius: .35rem; background: #fffefa; overflow: hidden; }
.doc-code-bar { min-block-size: 2.15rem; padding-inline: .85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #eeeae3; border-block-end: 1px solid #d8d3cb; color: #746e66; font: 700 .61rem var(--font-1); letter-spacing: .08em; text-transform: uppercase; }
.doc-code-bar button { border: 0; background: transparent; padding: .2rem .45rem; color: #736c64; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.doc-code-bar button:hover { color: var(--accent); }
.doc-code u2-code { display: block; padding: 1.25rem 1.45rem; font: .77rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; background: #fffefa; color: #242521; max-block-size: 34rem; overflow: auto; }
.doc-code u2-code:not(:defined) { padding: 0; }
.doc-code u2-code:not(:defined) > pre { margin: 0; padding: 1.25rem 1.45rem; background: #fffefa; color: #242521; box-shadow: none; }
.doc-code u2-code:not(:defined) > pre > code { color: inherit; }
.runtime-tabs { display: block; margin-block: 1.7rem 2rem; border: 1px solid #d8d3cb; border-radius: .35rem; overflow: hidden; background: #faf8f3; }
.runtime-tabs::part(tablist) { display: flex; gap: 0; padding-inline: .5rem; border-block-end: 1px solid #d8d3cb; background: #eeeae3; }
.runtime-tabs > h4[role=tab] { margin: 0; padding: .85rem 1.1rem; color: #716a63; font-size: .76rem; font-weight: 760; border-block-end: 2px solid transparent; }
.runtime-tabs > h4[role=tab][aria-selected=true] { color: var(--accent); border-block-end-color: var(--accent); }
.runtime-tabs > section[role=tabpanel] { padding: 1.35rem; }
.runtime-tabs > section .doc-code:last-child { margin-block-end: .5rem; }
.prose blockquote { margin-inline: 0; padding: .5rem 1.5rem; border-inline-start: 3px solid var(--accent); background: #f0ece5; }.prose blockquote p { margin: .5rem 0; }
.prose table { display: block; inline-size: max-content; max-inline-size: 100%; overflow-x: auto; margin-block: 1.5rem 2rem; font-size: .78rem; }.prose th, .prose td { padding: .65rem .8rem; border: 1px solid #d8d3cb; vertical-align: top; }.prose th { background: #ece9e2; text-align: start; }
.prose img { max-inline-size: 100%; block-size: auto; }
.doc-bottom { border-block-start: 1px solid #dedad2; margin-block-start: 4rem; padding-block-start: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .73rem; }.doc-bottom a { color: #7b746d; text-decoration: none; }.doc-bottom a:hover { color: var(--accent); }
.doc-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .75rem; margin-block-start: 4rem; }
.doc-pager a { position: relative; display: flex; flex-direction: column; min-block-size: 6.5rem; gap: .6rem; padding: 1rem 2.5rem 1rem 1rem; border: 1px solid #d8d3cb; background: #faf8f3; text-decoration: none; }
.doc-pager a:hover { border-color: var(--accent); }
.doc-pager small { color: #9a9188; font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; }
.doc-pager strong { color: #302c27; font-size: .88rem; }
.doc-pager a > span { position: absolute; inset-inline-end: 1rem; inset-block-end: 1rem; color: var(--accent); }
.docs-toc { padding: 3rem clamp(1rem, 2vw, 2rem) 2rem 0; }.docs-toc > div { position: sticky; inset-block-start: 7rem; max-block-size: calc(100svh - 9rem); overflow: auto; }.docs-toc h2 { margin: 0 0 1.3rem; }.docs-toc ul { list-style: none; padding: 0; margin: 0; }.docs-toc li { margin-block: .35rem; }.docs-toc li ul { padding-inline-start: .75rem; border-inline-start: 1px solid #dedad2; }.docs-toc a { display: block; padding: .24rem 0; color: #8a837b; text-decoration: none; font-size: .67rem; --line-height: 1.4em; }.docs-toc a:hover { color: var(--accent); }
.docs-toc u2-toc { display: block; }
.docs-toc a.active { color: var(--accent); font-weight: 750; }
.docs-mobile-bar { display: none; }.translation-note { background: #f2ebe3; padding: .8rem 1rem; font-size: .75rem; margin-block-end: 2rem; }.translation-note a { color: var(--accent); }

.overview-main { padding-block: clamp(3rem, 6vw, 6rem) clamp(5rem, 8vw, 8rem); }
.overview-heading { max-inline-size: 52rem; margin-block-end: clamp(3rem, 6vw, 6rem); }
.overview-heading h1 { margin-block: 1.3rem 1.1rem; font-size: clamp(3.6rem, 8vw, 7.5rem); font-weight: 760; letter-spacing: -.09em; --line-height: .98em; }
.overview-heading .period { color: var(--accent); }
.overview-heading p { color: #68625b; max-inline-size: 43rem; font-size: clamp(1rem, 1.6vw, 1.25rem); --line-height: 1.6em; }
.overview-start { display: flex; justify-content: space-between; align-items: end; gap: 3rem; padding: clamp(2rem, 4vw, 4rem); background: #232725; color: #f7f5f0; }
.overview-start .section-number { color: #e48185; }
.overview-start h2 { margin-block: 1.3rem .7rem; font-size: clamp(2rem, 3.5vw, 3.5rem); letter-spacing: -.07em; --line-height: 1.08em; }
.overview-start p { max-inline-size: 30rem; margin: 0; color: #bfc5bf; font-size: .87rem; }
.overview-start .button-primary { flex: none; }
.overview-section-title { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-block: clamp(4rem, 6vw, 6rem) 1.3rem; border-block-end: 1px solid #d8d3cb; }
.overview-section-title h2 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.065em; }
.topic-grid { --u2-Items-width: 17rem; --u2-Gap: 1px; background: #d8d3cb; border: 1px solid #d8d3cb; margin-block-start: 1.4rem; }
.topic-card { position: relative; display: flex; flex-direction: column; align-items: start; min-block-size: 14.5rem; gap: .65rem; padding: 1.6rem; background: #f9f7f2; text-decoration: none; }
.topic-card:hover { background: #fffefa; }
.topic-card-top { display: flex; justify-content: space-between; inline-size: 100%; margin-block-end: auto; }
.topic-glyph { color: var(--accent); font-size: 1.6rem; line-height: 1; }
.topic-lang { border: 1px solid #d8d3cb; padding: .18rem .35rem; font-size: .56rem; font-weight: 800; color: #8b847c; }
.topic-card strong { font-size: 1.15rem; letter-spacing: -.04em; }
.topic-card > span:not(.topic-card-top):not(.topic-arrow) { max-inline-size: 18rem; color: #777068; font-size: .75rem; --line-height: 1.5em; }
.topic-arrow { position: absolute; inset-inline-end: 1.6rem; inset-block-start: 1.6rem; color: #aaa39a; }
.topic-card:hover .topic-arrow { color: var(--accent); }

.search-dialog { position: fixed; inset: 10svh 1rem auto; inline-size: min(42rem, calc(100vw - 2rem)); max-inline-size: none; padding: 0; border: 1px solid #d9d3ca; border-radius: .55rem; background: #faf8f3; box-shadow: 0 2rem 7rem #17171455; color: var(--color-text); }
.search-dialog::backdrop { background: #171a18a8; backdrop-filter: blur(3px); }.search-box { padding: 1.1rem; }.search-box > label { display: block; margin: .25rem .25rem .8rem; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.search-field { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border: 1px solid #cfcac1; border-radius: .3rem; background: white; }.search-field > span { font-size: 1.5rem; line-height: .6; }.search-field input { flex: 1; inline-size: 100%; min-inline-size: 0; border: 0; outline: 0; background: transparent; font-size: .96rem; }.search-field button { border: 1px solid #d8d4cd; color: #878078; background: #f7f5f0; border-radius: .2rem; font-size: .63rem; }.search-result { display: block; padding: 1rem .8rem; border-block-end: 1px solid #e9e5df; text-decoration: none; }.search-result:hover { background: #f2eee7; }.search-result strong { display: block; font-size: .87rem; }.search-result small { display: block; margin-block-start: .3rem; color: #817b74; font-size: .7rem; line-height: 1.4; }.search-empty { padding: 1.5rem .8rem; color: #817b74; font-size: .82rem; }#search-results { max-block-size: 54svh; overflow: auto; }
.result-lang { display: inline-block; margin-inline-start: .3rem; padding: .1rem .3rem; border: 1px solid #d8d3cb; border-radius: .15rem; color: #8c837b; font-size: .55rem; vertical-align: middle; }

@media (max-width: 1050px) { .docs-shell { grid-template-columns: 14rem minmax(0,1fr); }.docs-toc { display: none; }.search-trigger { min-inline-size: auto; }.search-trigger kbd { display: none; } }
@media (max-width: 750px) { .header-inner { min-block-size: 4rem; gap: 1rem; }.top-nav { display: none; }.header-actions { gap: .85rem; }.github-link { display: none; }.search-trigger { border: 0; background: transparent; padding: .3rem; }.search-trigger > span:nth-child(2) { display: none; }.hero-grid, .code-layout { grid-template-columns: 1fr; }.hero-grid { min-block-size: 0; }.hero-copy { padding-block: 4rem 4rem; }.hero h1 { font-size: clamp(3.5rem, 12vw, 5.5rem); }.hero-art { padding-block: 0 4rem; }.art-frame { inline-size: min(80%, 30rem); }.art-core span { font-size: 25vw; }.feature-grid > article, .feature-grid > article:not(:first-child) { padding: 2rem 1rem 1.5rem 0; border-inline-end: 0; border-block-end: 1px solid #d8d3cb; min-block-size: 13rem; }.feature-icon { margin-block-end: 2rem; }.section-heading { display: block; }.section-heading > p { margin-block-start: 1rem; }.docs-shell { display: block; }.docs-sidebar { position: fixed; z-index: 70; inset: 0 auto 0 0; inline-size: min(19rem, 85vw); background: var(--color-bg); box-shadow: 1rem 0 3rem #1717143a; transform: translateX(-110%); transition: transform .2s ease; }.docs-sidebar[data-open] { transform: translateX(0); }.sidebar-inner { inset-block-start: 0; max-block-size: 100svh; }.sidebar-top { display: flex; align-items: center; justify-content: space-between; }.sidebar-close { display: block; border: 0; background: none; font-size: 1.5rem; }.docs-mobile-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; border-block-end: 1px solid #e2ded7; color: #948d84; font-size: .7rem; }.docs-mobile-bar button { border: 0; background: none; padding: .3rem; font-size: .73rem; color: #37332e; }.docs-content { padding: 2rem 1.25rem 4rem; }.breadcrumb { margin-block-end: 2.5rem; }.prose h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); }.footer-inner { min-block-size: 6rem; align-items: start; flex-direction: column; justify-content: center; gap: .4rem; }.overview-start { display: block; }.overview-start .button-primary { margin-block-start: 2rem; }.overview-section-title { display: block; }.overview-section-title h2 { margin-block-start: 1rem; } }
@media (prefers-reduced-motion: reduce) { .docs-sidebar { transition: none; } }