html { color-scheme: light; scroll-padding-top: calc(var(--s-19) + var(--s-9)); }
body { min-width: 320px; font-family: var(--font-marketing); }
button { border: 0; cursor: pointer; background: none; }
[hidden] { display: none !important; }
.icon { width: var(--icon-lg); height: var(--icon-lg); flex: none; }
.skip-link { position: fixed; top: var(--s-4); left: var(--s-4); z-index: 10; padding: var(--s-7); background: var(--bg-canvas); box-shadow: var(--shadow-raised); border-radius: var(--r-xl); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 3; background: var(--bg-canvas); box-shadow: var(--shadow-hairline); }
.header-main, .header-bottom, .docs-layout { max-width: calc(var(--container-wide) + var(--sidebar)); margin-inline: auto; }
.header-main { height: var(--s-16); padding: 0 var(--s-11); display: flex; align-items: center; gap: var(--s-12); }
.brand { display: inline-flex; align-items: center; gap: var(--s-4); flex: none; min-height: var(--h-cta); min-width: calc(var(--sidebar) - var(--s-12)); }
.brand > span:first-of-type { font-family: var(--font-marketing); font-weight: var(--fw-bold); font-size: var(--t-title-lg); letter-spacing: var(--t-title-lg-ls); }
.docs-badge { margin-left: var(--s-3); padding: var(--s-1) var(--s-4); color: var(--ink-2); font-size: var(--t-label); border-radius: var(--r-sm); background: var(--bg-hover); box-shadow: var(--shadow-ring); }
.search-trigger { display: flex; align-items: center; gap: var(--s-6); width: min(100%, var(--w-dialog-sm)); height: var(--s-12); padding: 0 var(--s-6); color: var(--ink-2); border-radius: var(--r-lg); background: var(--bg-subtle); box-shadow: var(--shadow-ring); text-align: left; transition: var(--transition-ghost); }
.search-trigger:hover { background: var(--a-2); }
.search-trigger > span { flex: 1; }
kbd { display: inline-block; font-family: var(--font-mono); font-size: var(--t-micro); line-height: var(--t-body-lh); padding: 0 var(--s-2); border-radius: var(--r-sm); box-shadow: var(--shadow-ring); color: var(--ink-2); background: var(--bg-canvas); white-space: nowrap; }
.header-links { display: flex; align-items: center; gap: var(--s-9); margin-left: auto; white-space: nowrap; }
.header-links a, .header-bottom a { display: inline-flex; align-items: center; gap: var(--s-4); min-height: var(--h-cta); }
.website-link { color: var(--ink-2); }
.header-links .icon, .header-bottom .icon { width: var(--icon); height: var(--icon); }
.app-link { padding-inline: var(--s-7); border-radius: var(--r-xl); background: var(--n-900); color: var(--ink-on-dark); box-shadow: var(--shadow-raised); transition: var(--transition-button); }
.app-link:hover { background: var(--n-800); }
.header-bottom { height: var(--s-13); padding-inline: var(--s-11); display: flex; align-items: center; gap: var(--s-11); color: var(--ink-2); }
.header-tab { height: 100%; display: flex; align-items: center; position: relative; color: var(--accent-hover); }
.header-tab::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: var(--s-1); background: var(--accent); border-radius: var(--r-pill); }
.header-bottom .header-support { margin-left: auto; }
.header-bottom a:hover, .website-link:hover { color: var(--ink); }
.docs-layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) calc(var(--s-17) * 2); padding-inline: var(--s-11); align-items: start; }
.sidebar { position: sticky; top: var(--s-19); height: calc(100dvh - var(--s-19)); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-11) var(--s-8) var(--s-9) 0; scrollbar-width: thin; }
.nav-group + .nav-group { margin-top: var(--s-9); }
.nav-group p { font-size: var(--t-label); font-weight: var(--fw-semibold); color: var(--ink); margin: 0 var(--s-5) var(--s-4); }
.nav-group ul { list-style: none; display: grid; gap: var(--s-1); }
.nav-group a { display: flex; align-items: center; gap: var(--s-5); min-height: var(--h-row); padding: var(--s-4) var(--s-5); color: var(--ink-2); border-radius: var(--r-lg); transition: var(--transition-ghost); font-size: var(--t-body); line-height: var(--t-body-lh); }
.nav-group a .icon { width: var(--icon); height: var(--icon); color: var(--ink-3); }
.nav-group a:hover { background: var(--a-1); color: var(--ink); }
.nav-group a[aria-current] { background: var(--accent-50); color: var(--accent-hover); }
.nav-group a[aria-current] .icon { color: var(--accent); }
.sidebar-help { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6) var(--s-5); margin-top: var(--s-11); box-shadow: var(--shadow-ring); border-radius: var(--r-xl); font-size: var(--t-label); }
.sidebar-help > span { flex: 1; }
.sidebar-help small { display: block; color: var(--ink-2); font-size: var(--t-label); line-height: var(--t-label-lh); margin-top: var(--s-2); }
.sidebar-help:hover { background: var(--a-1); }
main { min-width: 0; padding: var(--s-12) var(--s-13) 0 var(--s-12); }
.breadcrumb { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-11); color: var(--ink-2); font-size: var(--t-label); line-height: var(--t-label-lh); }
.breadcrumb > span:last-child { color: var(--ink); }
.eyebrow { display: block; font-size: var(--t-label); line-height: var(--t-label-lh); font-weight: var(--fw-medium); color: var(--accent-hover); }
.article-header h1 { margin-top: var(--s-6); font-size: var(--t-display-lg); font-weight: var(--fw-black); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-hero-ls); text-wrap: balance; }
.article-header > p { margin-top: var(--s-7); color: var(--ink-2); font-size: var(--t-prose-lg); line-height: 1.55; font-weight: var(--fw-regular); letter-spacing: var(--t-prose-lg-ls); text-wrap: pretty; }
.article-header { margin-bottom: var(--s-11); }
.prose { font-size: var(--t-prose); line-height: 1.7; font-weight: var(--fw-regular); color: var(--ink-2); letter-spacing: var(--t-prose-ls); overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--s-7); }
.prose h2 { display: block; margin-top: var(--s-12); margin-bottom: var(--s-7); color: var(--ink); font-size: var(--t-title-lg); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: var(--t-title-lg-ls); text-wrap: pretty; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-9); color: var(--ink); font-size: var(--t-prose-lg); font-weight: var(--fw-semibold); }
.prose strong { color: var(--ink); font-weight: var(--fw-semibold); }
.prose a:not(.start-banner, .guide-card, .explore-list a, .heading-anchor) { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-200); }
.prose a:not(.start-banner, .guide-card, .explore-list a, .heading-anchor):hover { text-decoration-color: currentColor; }
.prose .heading-anchor { padding: 0 var(--s-4); color: var(--ink-2); font-size: var(--t-prose-lg); opacity: 0; }
.prose h2:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.prose ul, .prose ol { padding-left: var(--s-9); }
.prose li { padding-left: var(--s-2); margin-block: var(--s-5); }
.prose li::marker { color: var(--accent-hover); font-weight: var(--fw-medium); }
.prose code { font-family: var(--font-mono); font-size: var(--t-body); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--bg-hover); color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; text-align: left; font-size: var(--t-body); line-height: 1.6; }
.prose th, .prose td { padding: var(--s-6); border: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--bg-subtle); color: var(--ink); font-weight: var(--fw-semibold); }
.callout { background: var(--accent-50); border-radius: var(--r-xl); box-shadow: var(--shadow-ring); padding: var(--s-8) var(--s-9); color: var(--ink-2); font-size: var(--t-body); line-height: 1.7; }
.callout > strong { color: var(--tag-purple-fg); font-size: var(--t-body); }
.callout p { margin-top: var(--s-3); }
.start-banner { display: flex; align-items: center; min-height: calc(var(--s-19) * 2); position: relative; isolation: isolate; overflow: hidden; padding: var(--s-11); border-radius: var(--r-3xl); background: var(--bg-subtle) url('/assets/sky.webp') center 62% / cover; box-shadow: var(--shadow-ring); margin-bottom: var(--s-9); }
.start-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg-canvas), color-mix(in srgb, var(--bg-canvas) 80%, transparent) 50%, transparent); }
.start-banner > div { position: relative; z-index: 1; width: 75%; }
.start-banner strong { display: block; font-size: var(--t-title-lg); line-height: var(--t-title-lg-lh); letter-spacing: var(--t-title-lg-ls); margin-top: var(--s-5); }
.start-banner p { margin-top: var(--s-6); font-size: var(--t-body); line-height: 1.7; max-width: var(--col-half); }
.start-banner img { position: absolute; right: calc(-1 * var(--s-4)); bottom: 0; width: 34%; height: auto; z-index: 0; }
.banner-link { display: inline-flex; align-items: center; gap: var(--s-6); margin-top: var(--s-8); font-size: var(--t-body); font-weight: var(--fw-medium); color: var(--ink); }
.start-banner:hover .banner-link { color: var(--accent-hover); }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
.guide-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-9); box-shadow: var(--shadow-ring); border-radius: var(--r-2xl); transition: var(--transition-ghost); }
.guide-card:hover { background: var(--a-1); box-shadow: var(--shadow-raised); }
.card-icon { display: inline-flex; justify-content: center; align-items: center; width: var(--h-row); height: var(--h-row); background: var(--bg-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-ring); color: var(--accent-hover); flex: none; }
.guide-card strong { display: block; margin-top: var(--s-7); font-size: var(--t-prose); line-height: var(--t-prose-lh); }
.guide-card p { margin-top: var(--s-4); font-size: var(--t-body); line-height: 1.6; }
.card-link { width: 100%; display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-7); margin-top: auto; color: var(--ink); font-size: var(--t-label); font-weight: var(--fw-medium); }
.guide-card:hover .card-link { color: var(--accent-hover); }
.explore-list { display: grid; gap: var(--s-4); }
.explore-list a { display: flex; align-items: center; gap: var(--s-7); padding: var(--s-7) var(--s-6); border-radius: var(--r-xl); transition: var(--transition-ghost); }
.explore-list a:hover { background: var(--a-1); }
.explore-list a > span:nth-child(2) { flex: 1; }
.explore-list strong { display: block; font-size: var(--t-body); }
.explore-list a > span:nth-child(2) > span { display: block; font-size: var(--t-body); line-height: 1.6; margin-top: var(--s-2); }
.table-of-contents { position: sticky; top: var(--s-19); max-height: calc(100dvh - var(--s-19)); overflow-y: auto; padding: var(--s-12) 0 var(--s-9) var(--s-7); font-size: var(--t-label); line-height: 1.5; }
.table-of-contents nav > p { font-weight: var(--fw-semibold); margin-bottom: var(--s-6); }
.table-of-contents ul { list-style: none; box-shadow: -1px 0 0 var(--border); }
.table-of-contents li + li { margin-top: var(--s-1); }
.table-of-contents nav a { display: block; padding: var(--s-3) var(--s-6); color: var(--ink-2); }
.table-of-contents nav a:hover, .table-of-contents nav a[aria-current] { color: var(--accent-hover); box-shadow: -1px 0 0 var(--accent); }
.toc-help { margin-top: var(--s-12); padding-top: var(--s-9); box-shadow: 0 -1px 0 var(--border); }
.toc-mark { color: var(--ink-2); }
.toc-help strong { display: block; margin-top: var(--s-6); font-weight: var(--fw-medium); }
.toc-help p { margin-top: var(--s-4); color: var(--ink-2); }
.toc-help a { display: inline-flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); color: var(--accent-hover); min-height: var(--h-control-lg); }
.toc-help .icon { width: var(--icon); height: var(--icon); }
.article-help { display: flex; justify-content: space-between; align-items: center; gap: var(--s-7); padding-top: var(--s-9); margin-top: var(--s-13); box-shadow: 0 -1px 0 var(--border); font-size: var(--t-label); color: var(--ink-2); }
.article-help a { display: inline-flex; align-items: center; gap: var(--s-4); color: var(--ink); min-height: var(--h-cta); }
.article-help .icon { width: var(--icon); height: var(--icon); }
.page-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin-top: var(--s-7); }
.page-neighbor { display: block; border-radius: var(--r-xl); box-shadow: var(--shadow-ring); padding: var(--s-7) var(--s-8); transition: var(--transition-ghost); }
.page-neighbor:hover { background: var(--a-1); }
.page-neighbor > span { display: block; color: var(--ink-2); font-size: var(--t-label); }
.page-neighbor strong { display: block; margin-top: var(--s-4); font-size: var(--t-body); font-weight: var(--fw-medium); }
.page-neighbor.next { text-align: right; }
.article-footer { display: flex; justify-content: space-between; gap: var(--s-7); margin-block: var(--s-11); font-size: var(--t-label); line-height: 1.6; color: var(--ink-2); }
.article-footer > div { display: flex; gap: var(--s-7); }
.article-footer a:hover { color: var(--ink); }
.mobile-navigation, .mobile-toc { display: none; }
.search-dialog { width: min(var(--w-dialog-task), calc(100% - var(--s-11))); max-height: calc(100dvh - var(--s-15)); margin: var(--s-16) auto auto; padding: var(--s-4); border: 0; border-radius: var(--r-3xl); background: var(--bg-canvas); color: var(--ink); box-shadow: var(--shadow-overlay), var(--shadow-band); overflow: auto; }
.search-dialog::backdrop { background: color-mix(in srgb, var(--n-900) 30%, transparent); backdrop-filter: blur(4px); }
body:has(dialog[open]) { overflow: hidden; }
.search-heading { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-7); }
.search-heading h2 { font-size: var(--t-body); font-weight: var(--fw-semibold); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--s-13); height: var(--s-13); border-radius: var(--r-lg); }
.icon-button:hover { background: var(--a-1); }
.search-field { display: flex; align-items: center; gap: var(--s-6); padding-inline: var(--s-7); margin-inline: var(--s-6); border-radius: var(--r-lg); box-shadow: var(--shadow-ring); background: var(--bg-subtle); }
.search-field:focus-within { outline: 1px solid var(--accent); outline-offset: 1px; }
.search-field input { width: 100%; min-width: 0; height: var(--h-cta); background: none; border: 0; outline: none; font-size: var(--t-prose); }
.search-field input::placeholder { color: var(--ink-2); }
#search-status { padding: var(--s-7) var(--s-8) var(--s-4); color: var(--ink-2); font-size: var(--t-label); font-weight: var(--fw-regular); }
#search-results { list-style: none; padding: var(--s-4); max-height: min(50dvh, var(--w-dialog-sm)); overflow-y: auto; overscroll-behavior: contain; }
#search-results a { display: block; padding: var(--s-6) var(--s-7); border-radius: var(--r-xl); }
#search-results a:hover, #search-results a:focus { background: var(--accent-50); }
#search-results strong { display: block; margin-block: var(--s-2); font-size: var(--t-body); font-weight: var(--fw-semibold); }
#search-results p { color: var(--ink-2); font-size: var(--t-label); font-weight: var(--fw-regular); line-height: 1.6; }
.result-section { color: var(--accent-hover); font-size: var(--t-micro); }
.search-footer { display: flex; justify-content: space-between; gap: var(--s-7); padding: var(--s-6) var(--s-7); color: var(--ink-2); font-size: var(--t-label); box-shadow: 0 -1px 0 var(--border); }
@media (max-width: 1200px) {
  .docs-layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .table-of-contents { display: none; }
  main { padding-right: var(--s-7); }
  .mobile-toc { display: block; padding: var(--s-6) var(--s-7); margin-bottom: var(--s-9); box-shadow: var(--shadow-ring); border-radius: var(--r-xl); color: var(--ink-2); }
  .mobile-toc summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: var(--h-control-lg); }
  .mobile-toc summary::-webkit-details-marker { display: none; }
  .mobile-toc nav > p { display: none; }
  .mobile-toc ul { list-style: none; padding-block: var(--s-4); }
  .mobile-toc a { display: block; padding-block: var(--s-4); }
  .website-link { display: none !important; }
  .header-main { gap: var(--s-9); }
}
@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--s-19) + var(--s-9)); }
  .header-main { height: var(--s-15); padding-inline: var(--s-8); gap: var(--s-7); }
  .brand { min-width: auto; }
  .brand > span:first-of-type { font-size: var(--t-title); }
  .brand img { width: var(--h-control); height: var(--h-control); }
  .search-trigger { margin-left: auto; width: var(--h-cta); height: var(--h-cta); padding: 0; align-items: center; justify-content: center; background: transparent; box-shadow: none; }
  .search-trigger > span, .search-trigger > kbd { display: none; }
  .header-links { margin-left: 0; }
  .header-links .app-link { min-height: var(--h-cta); font-size: var(--t-label); padding-inline: var(--s-6); }
  .header-links .app-link .icon { display: none; }
  .header-bottom { padding-inline: var(--s-8); gap: var(--s-8); font-size: var(--t-label); }
  .header-bottom .header-support { display: none; }
  .docs-layout { display: block; padding: 0; }
  .sidebar { display: none; }
  .mobile-navigation { display: block; background: var(--bg-subtle); padding: 0 var(--s-8); box-shadow: 0 1px 0 var(--border); }
  .mobile-navigation > summary { display: flex; align-items: center; gap: var(--s-5); min-height: var(--s-13); cursor: pointer; }
  .mobile-navigation > summary > span { margin-left: auto; }
  .mobile-navigation > summary::-webkit-details-marker { display: none; }
  .mobile-navigation nav { padding: var(--s-7) 0 var(--s-9); }
  .nav-group a { min-height: var(--s-13); }
  .nav-group + .nav-group { margin-top: var(--s-7); }
  main { max-width: var(--container-text); margin: auto; padding: var(--s-9) var(--s-8) 0; }
  .breadcrumb { margin-bottom: var(--s-9); }
  .article-header h1 { font-size: var(--t-display-md); line-height: var(--t-display-md-lh); }
  .article-header > p { font-size: var(--t-prose); line-height: 1.6; }
  .article-header { margin-bottom: var(--s-9); }
  .mobile-toc { font-size: var(--t-label); }
  .mobile-toc summary { min-height: var(--s-12); }
  .mobile-toc a { min-height: var(--s-13); display: flex; align-items: center; }
  .prose h2 { font-size: var(--t-title); line-height: 1.4; }
  .start-banner { min-height: calc(var(--s-19) * 2); padding: var(--s-9); }
  .start-banner img { width: 30%; }
  .start-banner strong { font-size: var(--t-title); }
  .start-banner > div { width: 80%; }
  .guide-card { padding: var(--s-8); }
  .article-footer { flex-direction: column; margin-bottom: var(--s-9); }
  .article-footer a { display: inline-flex; min-height: var(--s-13); align-items: center; }
  .search-dialog { margin-top: var(--s-8); max-height: calc(100dvh - var(--s-12)); }
  .search-footer { font-size: var(--t-micro); gap: var(--s-4); }
}
@media (max-width: 520px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { display: grid; grid-template-columns: var(--h-row) 1fr; column-gap: var(--s-7); }
  .guide-card .card-icon { grid-row: 1 / 4; }
  .guide-card strong { margin: 0; }
  .guide-card p, .guide-card .card-link { grid-column: 2; }
  .start-banner > div { width: 92%; }
  .start-banner p { max-width: 85%; }
  .start-banner img { width: 28%; right: calc(-1 * var(--s-5)); }
  .start-banner::before { background: linear-gradient(90deg, var(--bg-canvas), color-mix(in srgb, var(--bg-canvas) 85%, transparent) 60%, transparent); }
  .callout { padding: var(--s-7); }
  .page-neighbor { padding: var(--s-6); }
  .explore-list a { padding-inline: 0; gap: var(--s-6); }
}
@media (pointer: coarse) { .nav-group a, .toc-help a { min-height: var(--s-13); } .heading-anchor { opacity: 1 !important; } }
@media print {
  .site-header, .sidebar, .table-of-contents, .mobile-navigation, .mobile-toc, .search-dialog, .article-help, .page-pagination, .skip-link, .heading-anchor { display: none !important; }
  .docs-layout { display: block; }
  main { padding: 0; }
  .prose h2 { break-after: avoid; }
  .guide-card, .callout { break-inside: avoid; }
}