@tenphi/starlight 0.1.0 → 0.4.0

package/dist/styles.css

@@ -1,81 +1,1064 @@
-@layer tasty-docs {
+@import "@fontsource-variable/onest/wght.css";
+@import "@fontsource-variable/jetbrains-mono/wght.css";
+
+@layer starlight.reset, starlight.base, starlight.core, starlight.content, starlight.components, starlight.utils, cookbook;
+
+@layer cookbook {
   :root {
+    color-scheme: dark;
+
+    /* Bridge the public Cookbook tokens into Starlight's internal contract. */
+    --sl-font: var(--body-font-family);
+    --sl-font-mono: var(--code-font-family);
+    --sl-line-height: var(--body-line-height);
+    --sl-line-height-headings: var(--heading-line-height);
+    --sl-text-body: var(--body-font-size);
+    --sl-text-body-sm: var(--small-font-size);
+    --sl-text-code: var(--code-font-size);
+    --sl-text-code-sm: var(--small-font-size);
+    --sl-text-h1: var(--h1-font-size);
+    --sl-text-h2: var(--h2-font-size);
+    --sl-text-h3: var(--h3-font-size);
+    --sl-text-h4: var(--h4-font-size);
+    --sl-text-h5: var(--h5-font-size);
+    --sl-content-width: var(--content-width);
+    --sl-sidebar-width: var(--sidebar-width);
+
+    --sl-color-white: var(--td-text);
+    --sl-color-gray-1: var(--td-text);
+    --sl-color-gray-2: var(--td-text-soft);
+    --sl-color-gray-3: color-mix(
+      in oklab,
+      var(--td-text) 66%,
+      var(--td-surface)
+    );
+    --sl-color-gray-4: var(--td-border-strong);
+    --sl-color-gray-5: var(--td-border);
+    --sl-color-gray-6: var(--td-surface-2);
+    --sl-color-gray-7: var(--td-surface-3);
+    --sl-color-black: var(--td-surface);
+    --sl-color-text: var(--td-text-soft);
+    --sl-color-text-accent: var(--td-accent-text);
+    --sl-color-text-invert: var(--td-accent-surface-text);
+    --sl-color-bg: var(--td-surface);
+    --sl-color-bg-nav: var(--td-surface);
+    --sl-color-bg-sidebar: var(--td-surface);
+    --sl-color-bg-inline-code: var(--td-surface-2);
+    --sl-color-bg-accent: var(--td-accent-surface);
+    --sl-color-hairline-light: var(--td-border);
+    --sl-color-hairline: var(--td-border);
+    --sl-color-hairline-shade: var(--td-border);
+    --sl-color-backdrop-overlay: var(--td-overlay);
     --sl-color-accent-low: color-mix(
       in oklab,
-      var(--td-accent-surface) 18%,
+      var(--td-accent-surface) 12%,
       var(--td-surface)
     );
     --sl-color-accent: var(--td-accent-text);
     --sl-color-accent-high: var(--td-accent-text);
-    --sl-content-width: var(--content-width, 50rem);
+    --sl-shadow-sm: none;
+    --sl-shadow-md: 0 0.5rem 1.5rem var(--td-shadow);
+    --sl-shadow-lg: 0 1rem 3rem var(--td-shadow);
+
+    /* Tabler Icons, MIT: https://tabler.io/icons */
+    --td-icon-search: url("./icons/search.svg?no-inline");
+    --td-icon-chevron-down: url("./icons/chevron-down.svg?no-inline");
+    --td-icon-chevron-right: url("./icons/chevron-right.svg?no-inline");
+    --td-icon-arrow-left: url("./icons/arrow-left.svg?no-inline");
+    --td-icon-arrow-right: url("./icons/arrow-right.svg?no-inline");
+    --td-icon-copy: url("./icons/copy.svg?no-inline");
+    --td-icon-menu: url("./icons/menu.svg?no-inline");
+    --td-icon-close: url("./icons/close.svg?no-inline");
+    --td-icon-device: url("./icons/device-desktop.svg?no-inline");
+    --td-icon-sun: url("./icons/sun.svg?no-inline");
+    --td-icon-moon: url("./icons/moon.svg?no-inline");
+    --td-icon-contrast: url("./icons/contrast.svg?no-inline");
+
+    --sl-nav-height: 4.5rem;
+    --sl-nav-pad-x: clamp(1.25rem, 2.5vw, 2rem);
+    --sl-sidebar-pad-x: 1.5rem;
+    --sl-content-pad-x: clamp(1.5rem, 4vw, 4rem);
+    --sl-main-pad: 0 0 5rem;
   }
 
-  :where(a, button, input, select, textarea):focus-visible {
-    outline: 3px solid var(--td-focus);
-    outline-offset: 3px;
+  :root:has(.td-top-tabs) {
+    --sl-nav-height: 7rem;
   }
 
-  .td-card {
+  :root[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root:not([data-theme]) {
+      color-scheme: light;
+    }
+  }
+
+  html,
+  body,
+  button,
+  input,
+  select,
+  textarea {
+    font-family: var(--body-font-family);
+  }
+
+  body,
+  .td-shell {
+    color: var(--td-text);
+    background: var(--td-surface);
+    font-size: var(--body-font-size);
+    font-weight: var(--body-font-weight);
+    line-height: var(--body-line-height);
+    letter-spacing: var(--body-letter-spacing);
+  }
+
+  :where(h1, h2, h3, h4, h5, h6),
+  .site-title {
+    color: var(--td-text);
+    font-family: var(--heading-font-family);
+    font-weight: var(--heading-font-weight);
+    letter-spacing: var(--heading-letter-spacing);
+    text-wrap: balance;
+  }
+
+  h1 {
+    font-size: var(--h1-font-size);
+    line-height: var(--h1-line-height);
+    letter-spacing: var(--h1-letter-spacing);
+  }
+  h2 {
+    font-size: var(--h2-font-size);
+    line-height: var(--h2-line-height);
+    letter-spacing: var(--h2-letter-spacing);
+  }
+  h3 {
+    font-size: var(--h3-font-size);
+    line-height: var(--h3-line-height);
+    letter-spacing: var(--h3-letter-spacing);
+  }
+  h4 {
+    font-size: var(--h4-font-size);
+    line-height: var(--h4-line-height);
+    letter-spacing: var(--h4-letter-spacing);
+  }
+  h5 {
+    font-size: var(--h5-font-size);
+    line-height: var(--h5-line-height);
+    letter-spacing: var(--h5-letter-spacing);
+  }
+  h6 {
+    font-size: var(--h6-font-size);
+    line-height: var(--h6-line-height);
+    letter-spacing: var(--h6-letter-spacing);
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--code-font-family);
+  }
+
+  :where(a, button, input, select, textarea, summary):focus-visible {
+    outline: var(--outline-width) solid var(--td-focus);
+    outline-offset: var(--outline-offset);
+  }
+
+  :where(button, input, select, textarea):not(:where(.expressive-code *)) {
+    min-height: var(--control-height);
+    border-radius: var(--radius);
+    box-shadow: none;
+  }
+
+  .expressive-code {
+    --ec-brdRad: calc(var(--card-radius) - var(--border-width));
+    --ec-brdWd: var(--border-width);
+    --ec-brdCol: var(--td-border);
+    --ec-frm-copyIcon: var(--td-icon-copy);
+  }
+
+  .expressive-code .copy button {
+    border-radius: var(--radius);
+    background: var(--td-surface-3);
+    box-shadow: none;
+  }
+
+  .expressive-code .copy button::before {
+    border-color: var(--td-border);
+    opacity: 1;
+  }
+
+  .expressive-code .copy button div {
+    display: none;
+  }
+
+  .expressive-code .copy button:hover,
+  .expressive-code .copy button:focus-visible {
+    background: var(--td-surface-3-hover);
+  }
+
+  .expressive-code .copy button:active {
+    background: var(--td-surface-3-pressed);
+  }
+
+  starlight-theme-select label,
+  starlight-theme-select select,
+  site-search button[data-open-modal],
+  site-search dialog,
+  .pagination-links a,
+  a[aria-current="page"] {
+    border-radius: var(--radius);
+  }
+
+  #starlight__sidebar a[aria-current="page"],
+  #starlight__sidebar a[aria-current="page"]:hover,
+  #starlight__sidebar a[aria-current="page"]:focus {
+    color: var(--td-accent-text);
+    background: color-mix(
+      in oklab,
+      var(--td-accent-surface) 12%,
+      var(--td-surface)
+    );
+  }
+
+  starlight-theme-select label {
+    box-sizing: border-box;
+    position: relative;
+    justify-content: center;
+    inline-size: var(--control-height);
+    block-size: var(--control-height);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    transition:
+      color 120ms ease,
+      background-color 120ms ease;
+  }
+
+  starlight-theme-select label:hover,
+  starlight-theme-select label:has(select:focus-visible) {
+    color: var(--td-text);
+    background: var(--td-surface-2-hover);
+  }
+
+  starlight-theme-select label:has(select:active) {
+    background: var(--td-surface-2-pressed);
+  }
+
+  starlight-theme-select label:has(select:focus-visible) {
+    outline: var(--outline-width) solid var(--td-focus);
+    outline-offset: var(--outline-offset);
+  }
+
+  starlight-theme-select select {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  starlight-theme-select select:focus-visible {
+    outline: 0;
+  }
+
+  .td-header {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    max-inline-size: calc(var(--layout-width) - (var(--sl-sidebar-pad-x) * 2));
+    block-size: 100%;
+    min-inline-size: 0;
+    margin-inline: auto;
+  }
+
+  .td-header__primary {
+    display: grid;
+    grid-template-columns:
+      minmax(9rem, var(--sidebar-width)) minmax(12rem, 28rem)
+      minmax(5rem, 1fr);
+    align-items: center;
+    flex: 1;
+    gap: clamp(1rem, 2.5vw, 2.5rem);
+    min-block-size: 0;
+  }
+
+  .td-header__title,
+  .td-header__search {
+    min-inline-size: 0;
+  }
+
+  .td-header__tools {
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--gap) * 1.5);
+  }
+
+  .td-header__social {
+    display: flex;
+    align-items: center;
+  }
+
+  .site-title {
+    color: var(--td-text);
+    font-weight: var(--heading-bold-font-weight);
+    letter-spacing: var(--heading-letter-spacing);
+  }
+
+  .td-top-tabs {
+    display: flex;
+    align-items: stretch;
+    gap: clamp(1.25rem, 2.5vw, 2.5rem);
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .td-top-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .td-top-tabs a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    padding-block: calc(var(--gap) * 0.75) var(--gap);
+    color: var(--td-text-soft);
+    font-size: var(--small-font-size);
+    font-weight: var(--body-bold-font-weight);
+    line-height: var(--small-line-height);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .td-top-tabs a:hover {
+    color: var(--td-text);
+  }
+
+  .td-top-tabs a[aria-current="page"] {
+    color: var(--td-accent-text);
+  }
+
+  .td-top-tabs a[aria-current="page"]::after {
+    content: "";
+    position: absolute;
+    inset: auto 0 0;
+    block-size: 2px;
+    border-radius: 999px;
+    background: var(--td-accent-surface);
+  }
+
+  .td-mobile-tabs {
+    display: grid;
+    gap: var(--gap);
+    margin-block-end: calc(var(--gap) * 2);
+    padding-block-end: calc(var(--gap) * 2);
+    border-block-end: var(--border-width) solid var(--td-border);
+  }
+
+  .td-mobile-tabs__label {
+    padding-inline: calc(var(--gap) * 1.25);
+    color: var(--td-text);
+    font-size: var(--small-font-size);
+    font-weight: var(--body-bold-font-weight);
+    line-height: var(--small-line-height);
+  }
+
+  .td-mobile-tabs ul {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--gap);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .td-mobile-tabs li {
+    margin: 0;
+  }
+
+  .td-mobile-tabs a {
+    display: flex;
+    align-items: center;
+    min-block-size: 2.25rem;
+    padding: calc(var(--gap) * 0.75) calc(var(--gap) * 1.25);
+    color: var(--td-text-soft);
+    font-size: var(--small-font-size);
+    font-weight: var(--body-bold-font-weight);
+    line-height: var(--small-line-height);
+    text-decoration: none;
+    border-radius: var(--radius);
+  }
+
+  .td-mobile-tabs a:hover {
+    color: var(--td-text);
+    background: var(--td-surface-2-hover);
+  }
+
+  .td-mobile-tabs a[aria-current="page"] {
+    color: var(--td-accent-text);
+    background: color-mix(
+      in oklab,
+      var(--td-accent-surface) 12%,
+      var(--td-surface)
+    );
+  }
+
+  body > .page > .header,
+  .sidebar-pane,
+  .right-sidebar,
+  .content-panel + .content-panel,
+  mobile-starlight-toc :where(nav, summary) {
+    border: 0;
+  }
+
+  body > .page > .header,
+  .sidebar-pane {
+    background: var(--td-surface);
+  }
+
+  #starlight__sidebar .sidebar-content {
+    gap: calc(var(--gap) * 3);
+    padding-block: calc(var(--gap) * 4) calc(var(--gap) * 6);
+  }
+
+  #starlight__sidebar .top-level > li + li {
+    margin-block-start: calc(var(--gap) * 3);
+  }
+
+  #starlight__sidebar ul ul li {
+    margin-inline-start: calc(var(--gap) * 0.75);
+    padding-inline-start: calc(var(--gap) * 0.75);
+    border-inline-start: 0;
+  }
+
+  #starlight__sidebar :where(summary, a) {
+    padding: calc(var(--gap) * 0.8) calc(var(--gap) * 1.25);
+    line-height: 1.45;
+  }
+
+  #starlight__sidebar a {
+    font-size: 0.9375rem;
+  }
+
+  #starlight__sidebar .large {
+    font-size: 0.9375rem;
+    font-weight: var(--body-bold-font-weight);
+  }
+
+  .right-sidebar-panel {
+    padding-block-start: calc(var(--gap) * 5);
+  }
+
+  .right-sidebar-panel h2 {
+    font-size: 0.9375rem;
+  }
+
+  .right-sidebar-panel a {
+    padding-block: calc(var(--gap) * 0.5);
+    font-size: var(--small-font-size);
+    line-height: 1.45;
+  }
+
+  main > .content-panel:first-of-type {
+    padding-block-start: calc(var(--gap) * 3);
+    padding-block-end: calc(var(--gap) * 2);
+  }
+
+  main > .content-panel:nth-of-type(2) {
+    padding-block-start: calc(var(--gap) * 2);
+  }
+
+  .sl-markdown-content {
+    font-size: 1.025rem;
+  }
+
+  site-search button[data-open-modal] {
+    border: var(--border-width) solid var(--td-border);
+    background: var(--td-surface);
+    box-shadow: none;
+    transition:
+      color 120ms ease,
+      background-color 120ms ease;
+  }
+
+  site-search button[data-open-modal]:hover {
+    border-color: var(--td-border);
+    background: var(--td-surface-2-hover);
+  }
+
+  site-search button[data-open-modal]:active {
+    background: var(--td-surface-2-pressed);
+  }
+
+  .pagination-links a {
+    border-width: var(--border-width);
+    border-color: var(--td-border);
+    background: var(--td-surface-2);
+    box-shadow: none;
+    transition:
+      color 120ms ease,
+      background-color 120ms ease;
+  }
+
+  .pagination-links a:hover {
+    border-color: var(--td-border);
+    background: var(--td-surface-2-hover);
+  }
+
+  .pagination-links a:active {
+    background: var(--td-surface-2-pressed);
+  }
+
+  site-search button[data-open-modal] > svg,
+  .pagination-links a > svg,
+  starlight-theme-select .label-icon,
+  starlight-theme-select .caret,
+  starlight-menu-button button > svg,
+  mobile-starlight-toc .toggle > svg,
+  #starlight__sidebar summary > svg.caret {
+    display: none;
+  }
+
+  site-search button[data-open-modal]::before,
+  site-search button[data-close-modal]::before,
+  .pagination-links a::before,
+  starlight-theme-select label::before,
+  starlight-theme-select label::after,
+  starlight-menu-button button::before,
+  mobile-starlight-toc .toggle::after,
+  #starlight__sidebar summary::after,
+  [data-docs-search-open]::before,
+  [data-docs-search] button[aria-label="Close search"]::before,
+  .td-shell__actions label:has([data-docs-theme])::before {
+    content: "";
     display: block;
-    padding: 1.25rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.75rem;
-    background: var(--sl-color-bg-nav);
+    flex: none;
+    inline-size: 1rem;
+    block-size: 1rem;
+    background: currentColor;
+    mask: var(--td-control-icon) center / contain no-repeat;
+  }
+
+  site-search button[data-open-modal]::before,
+  [data-docs-search-open]::before {
+    --td-control-icon: var(--td-icon-search);
+  }
+
+  site-search button[data-close-modal]::before,
+  [data-docs-search] button[aria-label="Close search"]::before {
+    --td-control-icon: var(--td-icon-close);
+  }
+
+  .pagination-links a::before {
+    --td-control-icon: var(--td-icon-arrow-left);
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+  }
+
+  .pagination-links a[rel="next"]::before {
+    --td-control-icon: var(--td-icon-arrow-right);
+  }
+
+  [dir="rtl"] .pagination-links a[rel="prev"]::before {
+    --td-control-icon: var(--td-icon-arrow-right);
+  }
+
+  [dir="rtl"] .pagination-links a[rel="next"]::before {
+    --td-control-icon: var(--td-icon-arrow-left);
+  }
+
+  starlight-theme-select label::before,
+  starlight-theme-select label::after {
+    position: static;
+    translate: none;
+    pointer-events: none;
+  }
+
+  starlight-theme-select label::after {
+    display: none;
+  }
+
+  starlight-theme-select label::before {
+    --td-control-icon: var(--td-icon-device);
+  }
+
+  starlight-theme-select label:has(option[value="light"]:checked)::before {
+    --td-control-icon: var(--td-icon-sun);
+  }
+
+  starlight-theme-select label:has(option[value="dark"]:checked)::before {
+    --td-control-icon: var(--td-icon-moon);
+  }
+
+  starlight-theme-select label::after {
+    --td-control-icon: var(--td-icon-chevron-down);
+  }
+
+  starlight-menu-button button::before {
+    --td-control-icon: var(--td-icon-menu);
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+
+  starlight-menu-button[aria-expanded="true"] button::before {
+    --td-control-icon: var(--td-icon-close);
+  }
+
+  mobile-starlight-toc .toggle::after,
+  #starlight__sidebar summary::after {
+    --td-control-icon: var(--td-icon-chevron-right);
+    transition: rotate 120ms ease;
+  }
+
+  mobile-starlight-toc details[open] .toggle::after,
+  #starlight__sidebar details[open] > summary::after {
+    rotate: 90deg;
+  }
+
+  site-search dialog {
+    background: var(--td-surface);
+  }
+
+  site-search button[data-close-modal] {
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+    color: var(--td-text);
+    border: var(--border-width) solid var(--td-border);
+    border-radius: var(--radius);
+  }
+
+  #starlight__search {
+    --pagefind-ui-background: var(--td-surface);
+    --pagefind-ui-border: var(--td-border);
+  }
+
+  #starlight__search .pagefind-ui__search-input {
+    border-color: var(--td-border);
+    background: var(--td-surface);
+    box-shadow: none;
+  }
+
+  #starlight__search .pagefind-ui__form::before {
+    inline-size: 1rem;
+    block-size: 1rem;
+    mask: var(--td-icon-search) center / contain no-repeat;
+  }
+
+  #starlight__search .pagefind-ui__search-clear::before {
+    mask: var(--td-icon-close) center / 1rem no-repeat;
+  }
+
+  starlight-menu-button button,
+  mobile-starlight-toc .toggle {
+    color: var(--td-text);
+    border: var(--border-width) solid var(--td-border);
+    border-radius: var(--radius);
+    background: var(--td-surface-3);
+    transition:
+      color 120ms ease,
+      background-color 120ms ease;
+  }
+
+  starlight-menu-button button {
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--sl-menu-button-size);
+    block-size: var(--sl-menu-button-size);
+    min-block-size: 0;
+    padding: 0;
+    color: var(--td-text-soft);
+    box-shadow: none;
+  }
+
+  starlight-menu-button button:hover,
+  mobile-starlight-toc .toggle:hover,
+  mobile-starlight-toc details[open] .toggle {
+    color: var(--td-text);
+    border-color: var(--td-border);
+    background: var(--td-surface-3-hover);
+  }
+
+  starlight-menu-button[aria-expanded="true"] button,
+  starlight-menu-button[aria-expanded="true"] button:hover,
+  starlight-menu-button button:active,
+  mobile-starlight-toc .toggle:active {
+    color: var(--td-text);
+    border-color: var(--td-border);
+    background: var(--td-surface-3-pressed);
+    box-shadow: none;
+  }
+
+  mobile-starlight-toc summary {
+    padding-inline: var(--sl-content-pad-x);
+  }
+
+  mobile-starlight-toc .toggle,
+  mobile-starlight-toc .toggle:hover,
+  mobile-starlight-toc details[open] .toggle,
+  mobile-starlight-toc .toggle:active {
+    gap: var(--gap);
+    padding: 0;
+    color: var(--td-text-soft);
+    font-size: var(--small-font-size);
+    font-weight: var(--body-bold-font-weight);
+    line-height: var(--small-line-height);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  mobile-starlight-toc .toggle:hover,
+  mobile-starlight-toc details[open] .toggle,
+  mobile-starlight-toc .toggle:active {
+    color: var(--td-text);
+  }
+
+  .sl-markdown-content :where(code):not(:where(.not-content *)) {
+    border-radius: calc(var(--radius) * 0.65);
+  }
+
+  .sl-markdown-content :where(table, blockquote, details) {
+    border-color: var(--td-border);
+  }
+
+  .sl-markdown-content table {
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: auto;
+    color: var(--td-text-soft);
+    font-size: var(--small-font-size);
+    line-height: var(--small-line-height);
+    border: var(--border-width) solid var(--td-border);
+    border-radius: var(--card-radius);
+    scrollbar-width: thin;
+  }
+
+  .sl-markdown-content :where(th, td) {
+    padding: calc(var(--gap) * 1.5) calc(var(--gap) * 2);
+    vertical-align: top;
+    border-color: var(--td-border);
+  }
+
+  .sl-markdown-content :where(th, td):first-child {
+    padding-inline-start: calc(var(--gap) * 2);
+  }
+
+  .sl-markdown-content :where(th, td):last-child {
+    padding-inline-end: calc(var(--gap) * 2);
+  }
+
+  .sl-markdown-content tbody tr:last-child td {
+    border-block-end: 0;
+  }
+
+  .sl-markdown-content th {
+    color: var(--td-text);
+    background: var(--td-surface-2);
+  }
+
+  .td-card {
+    display: grid;
+    gap: calc(var(--gap) * 1.5);
+    padding: calc(var(--gap) * 2.5);
+    color: var(--td-text);
+    text-decoration: none;
+    border: var(--border-width) solid var(--td-border);
+    border-radius: var(--card-radius);
+    background: var(--td-surface-2);
+    box-shadow: 0 1px 2px var(--td-shadow);
+    transition:
+      background-color 120ms ease,
+      box-shadow 120ms ease,
+      translate 120ms ease;
+  }
+
+  a.td-card:hover {
+    border-color: var(--td-border);
+    background: var(--td-surface-2-hover);
+    box-shadow: 0 calc(var(--gap) * 0.75) calc(var(--gap) * 2) var(--td-shadow);
+    translate: 0 -1px;
+  }
+
+  a.td-card:active {
+    background: var(--td-surface-2-pressed);
+    translate: 0;
+  }
+
+  .td-card :where(h2, h3, p) {
+    margin: 0;
   }
 
   .td-preview {
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.75rem;
+    margin-inline: 0;
     overflow: clip;
+    color: var(--td-text);
+    border: var(--border-width) solid var(--td-border);
+    border-radius: var(--card-radius);
+    background: var(--td-surface);
+    box-shadow: 0 1px 2px var(--td-shadow);
+  }
+
+  .td-preview > figcaption,
+  .td-preview__code > summary {
+    padding: calc(var(--gap) * 1.5) calc(var(--gap) * 2);
+    font-size: var(--small-font-size);
+    line-height: var(--small-line-height);
+    background: var(--td-surface-2);
   }
 
   .td-preview__stage {
-    padding: 1.5rem;
+    padding: calc(var(--gap) * 3);
+    background: var(--td-surface);
+  }
+
+  .td-preview iframe {
+    display: block;
+    width: 100%;
+    min-height: 18rem;
+    border: 0;
     background: var(--td-surface);
   }
+
   .td-preview__code {
-    border-top: 1px solid var(--sl-color-gray-5);
+    border-top: var(--border-width) solid var(--td-border);
   }
 
-  .td-shell {
-    min-height: 100vh;
-    color: #20232a;
-    background: var(--td-surface);
-    font:
-      1rem/1.7 system-ui,
-      sans-serif;
+  .td-preview__code > summary {
+    cursor: pointer;
   }
-  :root[data-theme="light"] .td-shell {
-    color: #20232a;
+
+  .td-preview__code pre {
+    margin: 0;
+    border-radius: 0;
   }
-  :root[data-theme="dark"] .td-shell {
-    color: #eceef5;
+
+  .td-steps {
+    display: grid;
+    gap: calc(var(--gap) * 2);
+    padding-inline-start: calc(var(--gap) * 4);
+    border-inline-start: var(--border-width) solid var(--td-border);
+  }
+
+  .td-steps > li {
+    padding-inline-start: var(--gap);
+  }
+
+  .td-steps > li::marker {
+    color: var(--td-accent-text);
+    font-weight: var(--body-bold-font-weight);
   }
+
+  .td-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+    padding: var(--gap);
+    border: var(--border-width) solid var(--td-border);
+    border-radius: var(--card-radius);
+    background: var(--td-surface-2);
+  }
+
+  .td-shell {
+    min-height: 100vh;
+  }
+
   .td-shell__header {
     position: sticky;
     top: 0;
     z-index: 2;
+    display: flex;
+    flex-direction: column;
+    padding-inline: clamp(1.25rem, 3vw, 2rem);
+    background: color-mix(in oklab, var(--td-surface) 96%, transparent);
+    backdrop-filter: blur(12px);
+  }
+
+  .td-shell__header-primary {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.8rem 1.25rem;
-    border-bottom: 1px solid color-mix(in oklab, currentColor 18%, transparent);
-    background: color-mix(in oklab, var(--td-surface) 94%, transparent);
-    backdrop-filter: blur(12px);
+    gap: calc(var(--gap) * 3);
+    inline-size: 100%;
+    max-inline-size: calc(var(--layout-width) - (var(--gap) * 6));
+    min-block-size: 4.5rem;
+    margin-inline: auto;
   }
-  .td-shell__header a {
-    color: var(--td-accent-text);
-    font-weight: 700;
+
+  .td-shell__header > .td-top-tabs {
+    max-inline-size: calc(var(--layout-width) - (var(--gap) * 6));
+    margin-inline: auto;
+  }
+
+  .td-shell__header-primary > a {
+    color: var(--td-text);
+    font-family: var(--heading-font-family);
+    font-weight: var(--heading-font-weight);
     text-decoration: none;
   }
+
   .td-shell__actions {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--gap);
+  }
+
+  .td-shell__actions :where(select, button),
+  [data-docs-search] :where(input, button) {
+    padding-inline: calc(var(--gap) * 1.5);
+    color: var(--td-text);
+    border: var(--border-width) solid var(--td-border);
+  }
+
+  .td-shell__actions select,
+  [data-docs-search] input {
+    background: var(--td-surface);
+  }
+
+  .td-shell__actions button,
+  [data-docs-search] button,
+  site-search button[data-close-modal] {
+    background: var(--td-surface-2);
+    transition: background-color 120ms ease;
+  }
+
+  .td-shell__actions button:hover,
+  [data-docs-search] button:hover,
+  site-search button[data-close-modal]:hover {
+    border-color: var(--td-border);
+    background: var(--td-surface-2-hover);
+  }
+
+  .td-shell__actions button:active,
+  [data-docs-search] button:active,
+  site-search button[data-close-modal]:active {
+    background: var(--td-surface-2-pressed);
   }
-  .td-shell__actions :where(select, button) {
-    min-height: 2.25rem;
+
+  .td-shell__actions label:has(select) {
+    position: relative;
   }
+
+  .td-appearance-control {
+    display: grid;
+    place-items: center;
+    inline-size: var(--control-height);
+    block-size: var(--control-height);
+    border-radius: var(--radius);
+  }
+
+  .td-appearance-control:hover {
+    background: var(--td-surface-2-hover);
+  }
+
+  .td-appearance-control select {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .td-shell__actions label:has([data-docs-theme])::before {
+    --td-control-icon: var(--td-icon-device);
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    pointer-events: none;
+  }
+
+  .td-shell__actions
+    label:has([data-docs-theme] option[value="light"]:checked)::before {
+    --td-control-icon: var(--td-icon-sun);
+  }
+
+  .td-shell__actions
+    label:has([data-docs-theme] option[value="dark"]:checked)::before {
+    --td-control-icon: var(--td-icon-moon);
+  }
+
+  .td-shell__actions label:has(select)::after {
+    --td-control-icon: var(--td-icon-chevron-down);
+    content: "";
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 50%;
+    inset-inline-end: 0.75rem;
+    inline-size: 1rem;
+    block-size: 1rem;
+    translate: 0 -50%;
+    background: var(--td-text);
+    mask: var(--td-control-icon) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  .td-appearance-control::after {
+    display: none;
+  }
+
+  .td-appearance-control--contrast::before {
+    --td-control-icon: var(--td-icon-contrast);
+    content: "";
+    display: block;
+    inline-size: 1rem;
+    block-size: 1rem;
+    background: var(--td-text-soft);
+    mask: var(--td-control-icon) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  .td-shell__actions select {
+    padding-inline-end: calc(var(--gap) * 4);
+    appearance: none;
+  }
+
+  .td-shell__actions [data-docs-theme] {
+    padding-inline-start: calc(var(--gap) * 4);
+  }
+
+  [data-docs-search-open] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap);
+  }
+
+  [data-docs-search-open] > kbd {
+    display: flex;
+    gap: 0.125rem;
+    margin-inline-start: calc(var(--gap) * 1.5);
+    color: var(--td-text-soft);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  [data-docs-search-open] kbd {
+    font-family: var(--body-font-family);
+  }
+
+  [data-docs-search] button[aria-label="Close search"] {
+    display: grid;
+    place-items: center;
+    inline-size: var(--control-height);
+    padding: 0;
+    overflow: hidden;
+    color: transparent;
+  }
+
+  [data-docs-search] button[aria-label="Close search"]::before {
+    color: var(--td-text);
+  }
+
   .td-visually-hidden {
     position: absolute;
     width: 1px;
@@ -87,96 +1070,268 @@
     white-space: nowrap;
     border: 0;
   }
+
   .td-shell__layout {
     display: grid;
-    grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
-    max-width: 86rem;
-    margin: auto;
+    grid-template-columns: minmax(13rem, var(--sidebar-width)) minmax(0, 1fr);
+    inline-size: min(100%, var(--layout-width));
+    margin-inline: auto;
   }
+
   .td-shell__nav {
-    padding: 1.5rem;
-    border-inline-end: 1px solid
-      color-mix(in oklab, currentColor 18%, transparent);
+    padding: calc(var(--gap) * 5) calc(var(--gap) * 3);
   }
+
   .td-shell__nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
+
+  .td-shell__nav ul ul {
+    padding-inline-start: calc(var(--gap) * 1.5);
+  }
+
+  .td-shell__nav details > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--gap) * 0.9) calc(var(--gap) * 1.25);
+    color: var(--td-text);
+    font-weight: var(--body-bold-font-weight);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .td-shell__nav details > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .td-shell__nav details > summary::after {
+    content: "";
+    inline-size: 1rem;
+    block-size: 1rem;
+    background: var(--td-text-soft);
+    mask: var(--td-icon-chevron-down) center / contain no-repeat;
+  }
+
+  .td-shell__nav details:not([open]) > summary::after {
+    rotate: -90deg;
+  }
+
   .td-shell__nav a {
     display: block;
-    padding: 0.3rem 0.5rem;
+    padding: calc(var(--gap) * 0.9) calc(var(--gap) * 1.25);
+    color: var(--td-text-soft);
+    border-radius: var(--radius);
+    text-decoration: none;
+  }
+
+  .td-shell__nav a:hover {
+    color: var(--td-text);
+    background: var(--td-surface-2);
+  }
+
+  .td-shell__nav a[aria-current="page"] {
     color: var(--td-accent-text);
-    border-radius: 0.35rem;
+    font-weight: var(--body-bold-font-weight);
+    background: color-mix(
+      in oklab,
+      var(--td-accent-surface) 12%,
+      var(--td-surface)
+    );
   }
+
   .td-shell__main {
-    width: min(100%, var(--content-width, 52rem));
-    padding: 2rem clamp(1.25rem, 4vw, 3rem) 5rem;
+    width: min(100%, var(--content-width));
+    padding: calc(var(--gap) * 3) clamp(1.5rem, 5vw, 4rem) calc(var(--gap) * 10);
   }
+
   .td-shell__main img {
     max-width: 100%;
     height: auto;
+    border-radius: var(--radius);
   }
+
   .td-shell__main :where(pre, table) {
     max-width: 100%;
     overflow: auto;
   }
-  .td-shell__main :where(a) {
+
+  .td-shell__main a {
     color: var(--td-accent-text);
   }
-  .td-shell__main :where(h1, h2, h3) {
-    line-height: 1.2;
-  }
+
   [data-docs-search] {
     width: min(42rem, calc(100% - 2rem));
-    padding: 1.25rem;
-    color: inherit;
+    padding: calc(var(--gap) * 2.5);
+    color: var(--td-text);
     background: var(--td-surface);
-    border: 1px solid var(--td-focus);
-    border-radius: 0.75rem;
+    border: var(--border-width) solid var(--td-border-strong);
+    border-radius: var(--card-radius);
+    box-shadow: var(--sl-shadow-lg);
   }
+
   [data-docs-search]::backdrop {
-    background: rgb(0 0 0 / 0.55);
+    background: var(--td-overlay);
   }
+
   [data-docs-search] form {
     float: inline-end;
   }
+
   [data-docs-search] label,
   [data-docs-search] input {
     display: block;
     width: 100%;
   }
+
   [data-docs-search] input {
-    margin-block: 0.4rem 1rem;
-    padding: 0.6rem;
+    margin-block: var(--gap) calc(var(--gap) * 2);
   }
+
   .td-skip {
     position: fixed;
-    inset: 0.5rem auto auto 0.5rem;
+    inset: var(--gap) auto auto var(--gap);
     z-index: 4;
     translate: 0 -150%;
-    padding: 0.5rem 0.8rem;
-    background: var(--td-accent-surface);
+    padding: var(--gap) calc(var(--gap) * 1.5);
     color: var(--td-accent-surface-text);
+    border-radius: var(--radius);
+    background: var(--td-accent-surface);
   }
+
   .td-skip:focus {
     translate: 0;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .td-shell {
-      color: #eceef5;
+  @media (max-width: 48rem) {
+    .td-shell__header,
+    .td-shell__actions {
+      align-items: stretch;
+    }
+
+    .td-shell__header {
+      padding-inline: 1rem;
+    }
+
+    .td-shell__actions {
+      flex-wrap: wrap;
     }
-  }
 
-  @media (max-width: 48rem) {
     .td-shell__layout {
       grid-template-columns: 1fr;
     }
+
     .td-shell__nav {
-      border-inline-end: 0;
-      border-bottom: 1px solid
-        color-mix(in oklab, currentColor 18%, transparent);
+      padding-block: calc(var(--gap) * 2);
+    }
+  }
+
+  @media (max-width: 49.99rem) {
+    :root,
+    :root:has(.td-top-tabs) {
+      --sl-nav-height: 3.5rem;
+      --sl-nav-pad-x: 1rem;
+      --sl-nav-gap: 0.5rem;
+      --sl-menu-button-size: 2.25rem;
+    }
+
+    .td-header__primary {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--gap);
+    }
+
+    .td-header__search {
+      margin-inline-start: auto;
+    }
+
+    .site-title {
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+    }
+
+    site-search button[data-open-modal] {
+      justify-content: center;
+      inline-size: var(--sl-menu-button-size);
+      block-size: var(--sl-menu-button-size);
+      min-block-size: 0;
+      padding: 0;
+      color: var(--td-text-soft);
+      background: var(--td-surface-3);
+    }
+
+    site-search button[data-open-modal]:hover {
+      color: var(--td-text);
+      background: var(--td-surface-3-hover);
+    }
+
+    site-search button[data-open-modal]:active {
+      color: var(--td-text);
+      background: var(--td-surface-3-pressed);
+    }
+
+    site-search button[data-open-modal]::before {
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+    }
+
+    .td-top-tabs {
+      display: none;
+    }
+  }
+
+  @media (max-width: 71.99rem) {
+    :root[data-has-toc] {
+      --sl-mobile-toc-height: 2.5rem;
+    }
+
+    mobile-starlight-toc nav {
+      border-block-end: var(--border-width) solid var(--td-border);
+    }
+
+    mobile-starlight-toc summary {
+      block-size: 2.5rem;
+    }
+
+    :root[data-has-toc] main > .content-panel:first-of-type {
+      padding-block-start: 0;
+    }
+  }
+
+  @media (min-width: 50rem) and (max-width: 71.99rem) {
+    :root[data-has-toc] {
+      --sl-mobile-toc-height: calc(2.5rem + (var(--gap) * 3));
+    }
+
+    mobile-starlight-toc nav {
+      padding-block-start: calc(var(--gap) * 3);
+      border-block-end: 0;
+    }
+  }
+
+  @media (min-width: 50rem) {
+    .td-mobile-tabs {
+      display: none;
+    }
+
+    :root:has(.td-top-tabs) body > .page > .header {
+      padding-block: 0;
+    }
+
+    :root:has(.td-top-tabs) body > .page > .header,
+    .td-shell__header:has(.td-top-tabs) {
+      border-bottom: var(--border-width) solid var(--td-border);
+    }
+
+    .main-frame {
+      inline-size: min(100%, var(--layout-width));
+      margin-inline: auto;
+    }
+
+    .sidebar-pane {
+      inset-inline-start: max(0px, calc((100% - var(--layout-width)) / 2));
     }
   }