@charset "UTF-8";
@layer theme {
  :root {
    --font-display: "Nunito", sans-serif;
    --font-body: "InterVariable", "Inter", sans-serif;
    --font-mono: "Space Mono", monospace;
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --font-size-sm: clamp(0.875rem, 0.82rem + 0.28vw, 0.9375rem);
    --font-size-base: clamp(1rem, 0.93rem + 0.35vw, 1.0625rem);
    --font-size-md: clamp(1rem, 0.93rem + 0.35vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --font-size-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 1.9;
    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    --letter-spacing-caps: 0.08em;
    --palette-warm-50: oklch(98.5% 0.005 68);
    --palette-warm-100: oklch(96% 0.007 68);
    --palette-warm-200: oklch(91% 0.009 67);
    --palette-warm-300: oklch(82% 0.011 65);
    --palette-warm-400: oklch(70% 0.012 63);
    --palette-warm-500: oklch(57% 0.012 62);
    --palette-warm-600: oklch(45% 0.01 60);
    --palette-warm-700: oklch(35% 0.009 58);
    --palette-warm-800: oklch(25% 0.008 55);
    --palette-warm-850: oklch(19% 0.008 52);
    --palette-warm-900: oklch(14% 0.007 50);
    --palette-warm-950: oklch(10% 0.005 50);
    --palette-ruby-200: oklch(80% 0.12 27);
    --palette-ruby-300: oklch(68% 0.17 27);
    --palette-ruby-400: oklch(57% 0.21 27);
    --palette-ruby-500: oklch(47.5% 0.212 27);
    --palette-ruby-600: oklch(39% 0.18 27);
    --palette-ruby-700: oklch(31% 0.14 27);
    --color-bg: var(--palette-warm-50);
    --color-bg-secondary: var(--palette-warm-100);
    --color-bg-tertiary: var(--palette-warm-200);
    --color-bg-inverse: var(--palette-warm-900);
    --color-text: var(--palette-warm-900);
    --color-text-secondary: var(--palette-warm-600);
    --color-text-tertiary: var(--palette-warm-400);
    --color-text-inverse: var(--palette-warm-50);
    --color-link: var(--palette-warm-850);
    --color-link-hover: var(--palette-ruby-500);
    --color-link-active: var(--palette-ruby-600);
    --color-border: var(--palette-warm-200);
    --color-border-subtle: var(--palette-warm-100);
    --color-border-focus: var(--palette-ruby-500);
    --color-accent: var(--palette-ruby-500);
    --color-accent-hover: var(--palette-ruby-600);
    --color-accent-active: var(--palette-ruby-700);
    --color-quote-border: var(--palette-ruby-500);
    --color-quote-bg: var(--palette-warm-100);
    --color-quote-text: var(--palette-warm-800);
    --color-quote-cite: var(--palette-warm-500);
    --color-toc-text: var(--palette-warm-500);
    --color-toc-text-hover: var(--palette-warm-800);
    --color-toc-text-active: var(--palette-warm-900);
    --color-toc-border: var(--palette-warm-200);
    --color-toc-marker: var(--palette-ruby-500);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --max-width-prose: 70ch;
    --max-width-content: 72rem;
    --max-width-page: 90rem;
    --toc-width: 14rem;
    --toc-gap: var(--space-8);
    --border-radius-sm: 3px;
    --border-radius-md: 6px;
    --border-radius-lg: 10px;
    --border-radius-full: 9999px;
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
    --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.08);
    --shadow-focus: 0 0 0 3px oklch(47.5% 0.212 27 / 0.35);
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
      --color-bg: var(--palette-warm-900);
      --color-bg-secondary: var(--palette-warm-850);
      --color-bg-tertiary: var(--palette-warm-800);
      --color-bg-inverse: var(--palette-warm-100);
      --color-text: var(--palette-warm-50);
      --color-text-secondary: var(--palette-warm-300);
      --color-text-tertiary: var(--palette-warm-500);
      --color-text-inverse: var(--palette-warm-900);
      --color-link: var(--palette-warm-200);
      --color-link-hover: var(--palette-ruby-300);
      --color-link-active: var(--palette-ruby-400);
      --color-border: var(--palette-warm-700);
      --color-border-subtle: var(--palette-warm-800);
      --color-border-focus: var(--palette-ruby-300);
      --color-accent: var(--palette-ruby-300);
      --color-accent-hover: var(--palette-ruby-400);
      --color-accent-active: var(--palette-ruby-500);
      --color-quote-border: var(--palette-ruby-400);
      --color-quote-bg: var(--palette-warm-850);
      --color-quote-text: var(--palette-warm-200);
      --color-quote-cite: var(--palette-warm-400);
      --color-toc-text: var(--palette-warm-400);
      --color-toc-text-hover: var(--palette-warm-200);
      --color-toc-text-active: var(--palette-warm-50);
      --color-toc-border: var(--palette-warm-700);
      --color-toc-marker: var(--palette-ruby-400);
      --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
      --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.5);
      --shadow-focus: 0 0 0 3px oklch(68% 0.17 27 / 0.4);
    }
  }
  [data-theme=dark] {
    --color-bg: var(--palette-warm-900);
    --color-bg-secondary: var(--palette-warm-850);
    --color-bg-tertiary: var(--palette-warm-800);
    --color-bg-inverse: var(--palette-warm-100);
    --color-text: var(--palette-warm-50);
    --color-text-secondary: var(--palette-warm-300);
    --color-text-tertiary: var(--palette-warm-500);
    --color-text-inverse: var(--palette-warm-900);
    --color-link: var(--palette-warm-200);
    --color-link-hover: var(--palette-ruby-300);
    --color-link-active: var(--palette-ruby-400);
    --color-border: var(--palette-warm-700);
    --color-border-subtle: var(--palette-warm-800);
    --color-border-focus: var(--palette-ruby-300);
    --color-accent: var(--palette-ruby-300);
    --color-accent-hover: var(--palette-ruby-400);
    --color-accent-active: var(--palette-ruby-500);
    --color-quote-border: var(--palette-ruby-400);
    --color-quote-bg: var(--palette-warm-850);
    --color-quote-text: var(--palette-warm-200);
    --color-quote-cite: var(--palette-warm-400);
    --color-toc-text: var(--palette-warm-400);
    --color-toc-text-hover: var(--palette-warm-200);
    --color-toc-text-active: var(--palette-warm-50);
    --color-toc-border: var(--palette-warm-700);
    --color-toc-marker: var(--palette-ruby-400);
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.5);
    --shadow-focus: 0 0 0 3px oklch(68% 0.17 27 / 0.4);
  }
  @font-face {
    font-family: "Space Mono";
    src: local("Space Mono"), url("/assets/fonts/SpaceMono.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: optional;
  }
}
@layer base {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
  }
  h1 {
    font-size: var(--font-size-3xl);
  }
  h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
  }
  h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
  }
  h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
  }
  h5 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
  }
  p {
    margin-bottom: var(--space-4);
  }
  p:last-child {
    margin-bottom: 0;
  }
  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--easing-out);
  }
  a:hover {
    color: var(--color-link-hover);
  }
  a:active {
    color: var(--color-link-active);
  }
  a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
  }
  strong {
    font-weight: var(--font-weight-semibold);
  }
  em {
    font-style: italic;
  }
  ul,
  ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
  }
  ul li,
  ol li {
    margin-bottom: var(--space-2);
  }
  blockquote {
    margin-block: var(--space-6);
    padding-inline-start: var(--space-5);
    border-inline-start: 3px solid var(--color-border);
    color: var(--color-text-secondary);
    font-style: italic;
  }
  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-7);
  }
  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 0.1em 0.35em;
  }
  pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    border-radius: var(--border-radius-md);
    padding: var(--space-5);
    overflow-x: auto;
    margin-bottom: var(--space-5);
  }
  pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
  }
  th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--color-border);
  }
  td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
  }
}
@layer components {
  .site-header {
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding: var(--space-5) var(--space-6);
    gap: var(--space-5);
  }
  .nav__title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-tight);
  }
  .nav__title:hover {
    color: var(--color-accent-hover);
  }
  .nav__title:active {
    color: var(--color-accent-active);
  }
  .nav__title:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--border-radius-sm);
  }
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .nav__links a:not(.nav__icon-link) {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    transition: color var(--duration-fast) var(--easing-out);
  }
  .nav__links a:not(.nav__icon-link):hover {
    color: var(--color-text);
  }
  .nav__links a:not(.nav__icon-link)[aria-current=page] {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }
  .nav__links a:not(.nav__icon-link):focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--border-radius-sm);
  }
  .nav__links .nav__icon-link {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) var(--easing-out);
    margin-left: var(--space-1);
  }
  .nav__links .nav__icon-link:hover {
    color: var(--color-text);
  }
  .nav__links .nav__icon-link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--border-radius-sm);
  }
  .mobile-sticky-header {
    display: none;
  }
  .mobile-sticky-header__title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-sticky-header__title:hover {
    color: var(--color-accent-hover);
  }
  .mobile-sticky-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    gap: var(--space-2);
    border: 0;
    border-inline-start: 1px solid var(--color-border-subtle);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: var(--line-height-snug);
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    text-transform: uppercase;
  }
  .mobile-sticky-header__toggle:hover, .mobile-sticky-header__toggle[aria-expanded=true] {
    color: var(--color-text);
  }
  .mobile-sticky-header__toggle:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
  }
  .mobile-sticky-header__toggle-icon {
    position: relative;
    inline-size: 1rem;
    block-size: 2px;
    border-radius: var(--border-radius-full);
    background: currentColor;
    transition: background-color var(--duration-fast) var(--easing-out);
  }
  .mobile-sticky-header__toggle-icon::before, .mobile-sticky-header__toggle-icon::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    border-radius: var(--border-radius-full);
    background: currentColor;
    transition: transform var(--duration-fast) var(--easing-out);
  }
  .mobile-sticky-header__toggle-icon::before {
    transform: translateY(-5px);
  }
  .mobile-sticky-header__toggle-icon::after {
    transform: translateY(5px);
  }
  .mobile-sticky-header__toggle[aria-expanded=true] .mobile-sticky-header__toggle-icon {
    background: transparent;
  }
  .mobile-sticky-header__toggle[aria-expanded=true] .mobile-sticky-header__toggle-icon::before {
    transform: translateY(0) rotate(45deg);
  }
  .mobile-sticky-header__toggle[aria-expanded=true] .mobile-sticky-header__toggle-icon::after {
    transform: translateY(0) rotate(-45deg);
  }
  .mobile-sticky-header__menu {
    grid-column: 1/-1;
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }
  .mobile-sticky-header__links {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .mobile-sticky-header__links a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: var(--line-height-snug);
    padding-block: var(--space-1);
    text-decoration: none;
    text-transform: uppercase;
  }
  .mobile-sticky-header__links a:hover {
    color: var(--color-text);
  }
  .mobile-sticky-header__links a[aria-current=page] {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .mobile-sticky-header__links a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
  }
  .page-content {
    max-width: var(--max-width-prose);
    margin-inline: auto;
    padding-inline: var(--space-6);
    padding-block: var(--space-8) var(--space-10);
  }
  .site-footer {
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-10);
  }
  .index-layout {
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-6);
    padding-block: var(--space-8) var(--space-10);
  }
  .index-intro,
  .index-body {
    min-width: 0;
    max-width: var(--max-width-prose);
  }
  .index-body {
    margin-top: var(--space-7);
  }
  .index-intro h1 {
    margin-bottom: var(--space-5);
  }
  .index-body h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .index-rail {
    margin-top: var(--space-7);
  }
  .index-rail__link {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
  }
  .index-rail__link:hover {
    color: var(--color-accent-hover);
  }
  .index-rail__guides {
    display: none;
  }
  .index-mobile-guides {
    display: block;
  }
  .index-note__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-3);
  }
  .index-note__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    text-decoration: none;
  }
  .index-note__cta svg {
    flex-shrink: 0;
  }
  .index-note__cta:hover {
    color: var(--color-accent-hover);
  }
  .start-links {
    margin-block: var(--space-5) var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }
  .start-link {
    display: block;
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
  }
  .start-link:hover .start-link__title {
    color: var(--color-accent-hover);
  }
  .start-link:focus-visible {
    outline-offset: 4px;
  }
  .start-link__title {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--easing-out);
  }
  .start-link__description {
    display: block;
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
  }
  .guide-links {
    display: block;
    margin-block: var(--space-5) var(--space-8);
  }
  .guide-link {
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
  }
  .guide-link:last-child {
    border-bottom: 1px solid var(--color-border);
  }
  .testimonial {
    margin-block: var(--space-7);
    border-inline-start: 3px solid var(--color-quote-border);
    background-color: var(--color-quote-bg);
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  }
  .testimonial--plain {
    background-color: transparent;
    border-radius: 0;
    padding-block: var(--space-2);
    padding-inline: var(--space-5) 0;
  }
  .testimonial__quote {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    color: var(--color-quote-text);
  }
  .testimonial__quote p {
    font-size: var(--font-size-md);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
  }
  .testimonial__person {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
  }
  .testimonial__avatar {
    display: block;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: 0 0 auto;
    border-radius: var(--border-radius-full);
    object-fit: cover;
  }
  .testimonial__avatar--initials {
    display: inline-grid;
    place-items: center;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }
  .testimonial__byline {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height-snug);
  }
  .testimonial__name {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }
  .testimonial__conference {
    color: var(--color-text-secondary);
  }
  .tip {
    margin-block: var(--space-7);
    padding-block: var(--space-5);
    border-block: 1px solid var(--color-border);
  }
  .tip__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    color: var(--color-accent);
  }
  .tip--tools .tip__head,
  .tip--tool .tip__head {
    color: var(--color-text-secondary);
  }
  .tip__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: 0 0 auto;
    color: inherit;
  }
  .tip__icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .tip__label {
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: 1;
    text-transform: uppercase;
  }
  .tip__description {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
  }
  .tip__description > :last-child {
    margin-bottom: 0;
  }
  .tip__description a:hover,
  .tip__description a:active {
    color: var(--color-accent);
  }
  .tip__description a:focus-visible {
    outline-color: var(--color-border-focus);
  }
  .tip__description ul,
  .tip__description ol {
    margin-top: var(--space-3);
    margin-bottom: 0;
    padding-left: var(--space-5);
  }
  .disclosure {
    margin-top: var(--space-3);
  }
  .disclosure__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    cursor: pointer;
    color: var(--color-link);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    border-radius: var(--border-radius-sm);
    transition: color var(--duration-fast) var(--easing-out);
    list-style: none;
  }
  .disclosure__summary::-webkit-details-marker {
    display: none;
  }
  .disclosure__summary::before {
    content: "";
    inline-size: 0.4em;
    block-size: 0.4em;
    flex: 0 0 auto;
    margin-inline-start: 0.1em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--duration-fast) var(--easing-out);
  }
  .disclosure[open] .disclosure__summary::before {
    transform: rotate(45deg);
  }
  .disclosure__summary:hover,
  .disclosure__summary:active {
    color: var(--color-accent);
  }
  .disclosure__summary:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
  }
  .disclosure__body {
    margin-top: var(--space-3);
  }
  .eyebrow {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: var(--line-height-snug);
    text-transform: uppercase;
  }
  .status-note {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: var(--line-height-snug);
    text-transform: uppercase;
  }
  .voices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-4) var(--space-5);
  }
  .voice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
  }
  .voice__avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    background: var(--color-bg-tertiary);
  }
  .voice__avatar--initials {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }
  .voice__info {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height-snug);
  }
  .voice__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }
  .voice__conference {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }
  .contribute-inline {
    margin-block: var(--space-7);
  }
  .contribute {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    align-items: start;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-secondary);
    padding: var(--space-5);
  }
  .contribute__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: 2px;
    color: var(--color-accent);
  }
  .contribute__icon svg {
    inline-size: 100%;
    block-size: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .contribute__body {
    min-width: 0;
  }
  .contribute__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--color-text);
  }
  .contribute__text {
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }
  .contribute__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }
  .contribute__cta svg {
    flex: 0 0 auto;
    transition: transform var(--duration-fast) var(--easing-out);
  }
  .contribute__cta:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .contribute__cta:hover svg {
    transform: translateX(2px);
  }
  .contribute__cta:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
  }
  .guide-layout {
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-6);
    padding-block: var(--space-8) var(--space-10);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .guide-content {
    min-width: 0;
    max-width: var(--max-width-prose);
  }
  .guide-content h1 {
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-4);
  }
  .guide-content h1 + p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-7);
  }
  .guide-content h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    letter-spacing: var(--letter-spacing-tight);
  }
  .guide-content h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
  }
  .guide-content p {
    line-height: var(--line-height-relaxed);
  }
  .toc--desktop {
    display: none;
  }
  .toc--mobile {
    display: block;
    margin-block: var(--space-6) var(--space-7);
    padding: var(--space-4);
    border-block: 1px solid var(--color-toc-border);
  }
  .toc--sticky {
    display: block;
  }
  .toc__heading {
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: var(--line-height-snug);
    text-transform: uppercase;
  }
  .toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left: 1px solid var(--color-toc-border);
    padding-left: var(--space-4);
  }
  .toc__item {
    margin: 0;
  }
  .toc__link {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-toc-text);
    text-decoration: none;
    line-height: var(--line-height-snug);
    padding-block: var(--space-1);
    transition: color var(--duration-fast) var(--easing-out);
  }
  .toc__link:hover {
    color: var(--color-toc-text-hover);
  }
  .toc__link.is-active {
    color: var(--color-toc-text-active);
    font-weight: var(--font-weight-medium);
    border-left: 2px solid var(--color-toc-marker);
    margin-left: -1px;
    padding-left: calc(var(--space-4) - 1px);
  }
  .quote {
    margin-block: var(--space-7);
    border-inline-start: 3px solid var(--color-quote-border);
    background-color: var(--color-quote-bg);
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  }
  .quote__text {
    font-size: var(--font-size-md);
    font-style: italic;
    color: var(--color-quote-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-3);
  }
  .quote__text:last-child {
    margin-bottom: 0;
  }
  .quote__attribution {
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-quote-cite);
    font-weight: var(--font-weight-medium);
  }
  .quote__attribution::before {
    content: "— ";
  }
  .footer-inner {
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }
  .footer-copy {
    color: var(--color-text-secondary);
  }
  .footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }
  .footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .footer-link svg {
    flex-shrink: 0;
  }
  .footer-link:hover {
    color: var(--color-link-hover);
  }
}
div.highlighter-rouge,
figure.highlight {
  position: relative;
  margin-block: var(--space-lg);
  font-family: "Space Mono", monospace;
  font-size: var(--font-size-md);
}
[dir=rtl] div.highlighter-rouge,
[dir=rtl] figure.highlight {
  direction: ltr;
  text-align: start;
}
div.highlighter-rouge > pre,
div.highlighter-rouge pre.highlight,
figure.highlight > pre,
figure.highlight pre.highlight {
  margin: 0;
  padding: var(--space-md);
}

.highlight table {
  margin-bottom: 0;
  border: 0;
}
.highlight table td {
  padding: 0;
  width: calc(100% - 1em);
  border: 0;
  /* line numbers*/
}
.highlight table td.gutter, .highlight table td.rouge-gutter {
  padding-inline-end: 1em;
  width: 1em;
  color: var(--color-grey-100);
  border-inline-end: 1px solid --color-grey-100;
  text-align: end;
}
.highlight table td {
  /* code */
}
.highlight table td.code, .highlight table td.rouge-code {
  padding-inline-start: 1em;
}
.highlight table pre {
  margin: 0;
}

.highlight {
  color: #faf6e4;
  background-color: #122b3b;
  border-radius: var(--border-radius-sm);
}

.highlight .gl {
  color: #dee5e7;
  background-color: #4e5d62;
}

.highlight .gp {
  color: #a8e1fe;
}

.highlight .c,
.highlight .ch,
.highlight .cd,
.highlight .cm,
.highlight .cpf,
.highlight .c1,
.highlight .cs {
  color: #6c8b9f;
  font-style: italic;
}

.highlight .cp {
  color: #b2fd6d;
}

.highlight .err {
  color: #fefeec;
  background-color: #cc0000;
}

.highlight .gr {
  color: #cc0000;
  font-style: italic;
}

.highlight .k,
.highlight .kd,
.highlight .kv {
  color: #f6dd62;
}

.highlight .o,
.highlight .ow {
  color: #4df4ff;
}

.highlight .p,
.highlight .pi {
  color: #4df4ff;
}

.highlight .gd {
  color: #cc0000;
}

.highlight .gi {
  color: #b2fd6d;
}

.highlight .ge {
  font-style: italic;
}

.highlight .gt {
  color: #dee5e7;
  background-color: #4e5d62;
}

.highlight .kc {
  color: #f696db;
}

.highlight .kn {
  color: #ffb000;
}

.highlight .kp {
  color: #ffb000;
}

.highlight .kr {
  color: #ffb000;
}

.highlight .gh {
  color: #ffb000;
}

.highlight .gu {
  color: #ffb000;
}

.highlight .kt {
  color: #b2fd6d;
}

.highlight .no {
  color: #b2fd6d;
}

.highlight .nc {
  color: #b2fd6d;
}

.highlight .nd {
  color: #b2fd6d;
}

.highlight .nn {
  color: #b2fd6d;
}

.highlight .bp {
  color: #b2fd6d;
}

.highlight .ne {
  color: #b2fd6d;
}

.highlight .nl {
  color: #ffb000;
}

.highlight .nt {
  color: #ffb000;
}

.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo,
.highlight .mx {
  color: #f696db;
}

.highlight .ld {
  color: #f696db;
}

.highlight .ss {
  color: #f696db;
}

.highlight .s,
.highlight .sb,
.highlight .dl,
.highlight .sd,
.highlight .s2,
.highlight .sh,
.highlight .sx,
.highlight .sr,
.highlight .s1 {
  color: #fff0a6;
}

.highlight .sa {
  color: #f6dd62;
}

.highlight .se {
  color: #4df4ff;
}

.highlight .sc {
  color: #4df4ff;
}

.highlight .si {
  color: #4df4ff;
}

.highlight .ni {
  color: #999999;
}

.highlight .w {
  color: #bbbbbb;
}

.highlight .go {
  color: #bbbbbb;
}

.highlight .nf,
.highlight .fm {
  color: #a8e1fe;
}

.highlight .py {
  color: #a8e1fe;
}

.highlight .na {
  color: #a8e1fe;
}

.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi,
.highlight .vm {
  color: #a8e1fe;
}

@media (max-width: 767px) {
  .mobile-sticky-header {
    position: fixed;
    z-index: 20;
    inset-block-start: max(var(--space-3), env(safe-area-inset-top));
    inset-inline: var(--space-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-block: 1px solid var(--color-border);
    border-inline: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    background: color-mix(in oklch, var(--color-bg) 96%, transparent);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-1 * var(--space-6)));
    transition: opacity var(--duration-normal) var(--easing-out), transform var(--duration-normal) var(--easing-out);
  }
  @supports (backdrop-filter: blur(8px)) {
    .mobile-sticky-header {
      backdrop-filter: blur(8px);
    }
  }
  .mobile-sticky-header[data-visible] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .mobile-sticky-header__menu[hidden] {
    display: none;
  }
  .mobile-sticky-header__menu .toc__list {
    max-height: min(55vh, 28rem);
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-header,
  .mobile-sticky-header__toggle-icon,
  .mobile-sticky-header__toggle-icon::before,
  .mobile-sticky-header__toggle-icon::after,
  .contribute__cta svg,
  .disclosure__summary,
  .disclosure__summary::before {
    transition: none;
  }
}
@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  .nav__title {
    flex: 1 0 100%;
    font-size: var(--font-size-base);
  }
  .nav__links {
    gap: var(--space-4);
  }
  .page-content {
    padding-inline: var(--space-4);
    padding-block: var(--space-6) var(--space-8);
  }
  .guide-layout,
  .index-layout {
    padding-inline: var(--space-4);
    padding-block: var(--space-6) var(--space-8);
  }
  .guide-content h2 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
  }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .footer-links {
    gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .guide-layout {
    grid-template-columns: minmax(0, 1fr) var(--toc-width);
    gap: var(--toc-gap);
    align-items: start;
  }
  .index-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--toc-width);
    grid-template-areas: "intro rail" "body  rail";
    column-gap: var(--toc-gap);
    row-gap: var(--space-7);
    align-items: start;
  }
  .index-intro {
    grid-area: intro;
  }
  .index-body {
    grid-area: body;
    margin-top: 0;
  }
  .index-rail {
    grid-area: rail;
    margin-top: 0;
    position: sticky;
    top: var(--space-6);
  }
  .index-rail__guides {
    display: block;
  }
  .index-mobile-guides {
    display: none;
  }
  .index-note {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
  }
  .guide-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .guide-link {
    border-block: 1px solid var(--color-border-subtle);
  }
  .guide-link + .guide-link {
    border-top: 1px solid var(--color-border-subtle);
    margin-top: 0;
  }
  .toc--mobile {
    display: none;
  }
  .toc--desktop {
    display: block;
    position: sticky;
    top: var(--space-8);
    max-height: calc(100vh - var(--space-10));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
}
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .text-sm {
    font-size: var(--font-size-sm);
  }
  .text-base {
    font-size: var(--font-size-base);
  }
  .text-lg {
    font-size: var(--font-size-lg);
  }
  .text-secondary {
    color: var(--color-text-secondary);
  }
  .text-tertiary {
    color: var(--color-text-tertiary);
  }
  .mt-0 {
    margin-top: 0;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/*# sourceMappingURL=main.css.map */