/* Palette follows shadcn/ui's zinc base: near-black background, hairline borders,
   monochrome primary. Dark is the default theme. */
:root {
  /* Tailwind's default system font stacks (the site loads no web fonts). */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 0.5rem;
  --ring: #d4d4d8;
  --shell-page-bg: #09090b;
  --shell-page-text: #fafafa;
  --shell-surface: #09090b;
  --shell-surface-alt: #18181b;
  --shell-border: #27272a;
  --shell-border-soft: rgba(255, 255, 255, 0.1);
  --shell-border-strong: #3f3f46;
  --shell-header-shadow: none;
  --shell-header-text: #fafafa;
  --shell-header-subtext: #a1a1aa;
  --shell-nav-link: #a1a1aa;
  --shell-nav-link-hover: #fafafa;
  --shell-nav-link-active: #fafafa;
  --shell-brand-text: #fafafa;
  --shell-auth-bg: #fafafa;
  --shell-auth-text: #18181b;
  --shell-auth-bg-hover: #e4e4e7;
  --shell-toggle-bg-hover: #27272a;
  --shell-toggle-border: #27272a;
  --shell-dropdown-bg: #09090b;
  --shell-dropdown-text: #fafafa;
  --shell-dropdown-title: #fafafa;
  --shell-dropdown-subtitle: #a1a1aa;
  --shell-dropdown-border: #27272a;
  --shell-dropdown-hover: #27272a;
  --shell-footer-border: #27272a;
  --shell-footer-text: #a1a1aa;
  --shell-footer-meta: #71717a;
  --theme-primary-bg: #fafafa;
  --theme-primary-bg-hover: #e4e4e7;
  --theme-primary-text: #18181b;
  --theme-primary-border: #fafafa;
  --theme-hero-solid-bg: #fafafa;
  --theme-hero-solid-bg-hover: #e4e4e7;
  --theme-hero-solid-text: #18181b;
  --theme-hero-outline-border: #27272a;
  --theme-hero-outline-text: #fafafa;
  --theme-hero-outline-text-hover: #fafafa;
  --theme-hero-outline-bg-hover: #27272a;
  --docs-heading: #fafafa;
  --docs-body: #d4d4d8;
  --docs-muted: #a1a1aa;
  --docs-surface: #09090b;
  --docs-surface-hover: #18181b;
  --docs-link: #fafafa;
  --docs-link-hover: #d4d4d8;
  --docs-code-bg: #27272a;
  --docs-code-border: #27272a;
  --docs-code-text: #fafafa;
  --docs-pre-bg: #18181b;
  --docs-blockquote-bg: #18181b;
  --docs-rule: #27272a;
  --docs-table-header-bg: #18181b;
  --skel-base: #27272a;
  --skel-mid: #3f3f46;
  --motion-fast: 150ms;
  --motion-normal: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --btn-danger-bg: #dc2626;
  --btn-danger-bg-hover: #b91c1c;
  --btn-success-bg: #16a34a;
  --btn-success-bg-hover: #15803d;
  --btn-warning-bg: #f97316;
  --btn-warning-bg-hover: #ea580c;
  --btn-secondary-border: #27272a;
  --btn-secondary-text: #fafafa;
  --btn-secondary-bg-hover: #27272a;
  --btn-outline-danger-border: rgba(248, 113, 113, 0.35);
  --btn-outline-danger-text: #f87171;
  --btn-outline-danger-bg-hover: rgba(127, 29, 29, 0.3);
  --badge-gray-bg: #27272a;
  --badge-gray-text: #fafafa;
  --badge-green-bg: rgba(34, 197, 94, 0.15);
  --badge-green-text: #86efac;
  --badge-red-bg: rgba(239, 68, 68, 0.15);
  --badge-red-text: #fca5a5;
  --badge-yellow-bg: rgba(234, 179, 8, 0.15);
  --badge-yellow-text: #fde047;
  --badge-blue-bg: rgba(59, 130, 246, 0.15);
  --badge-blue-text: #93c5fd;
  --badge-orange-bg: rgba(249, 115, 22, 0.15);
  --badge-orange-text: #fdba74;
  --badge-indigo-bg: #fafafa;
  --badge-indigo-text: #18181b;
  --nav-active-border: #fafafa;
  --md-code-bg: #27272a;
  --md-code-text: #fafafa;
  --md-pre-bg: #18181b;
  --md-pre-text: #e4e4e7;
  --accent-fg: #fafafa;
  --accent-fg-hover: #d4d4d8;
  --accent-muted: #a1a1aa;
  --accent-bg: #18181b;
  --accent-bg-hover: #27272a;
  --accent-border: #3f3f46;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --ring: #18181b;
  --shell-page-bg: #ffffff;
  --shell-page-text: #09090b;
  --shell-surface: #ffffff;
  --shell-surface-alt: #f4f4f5;
  --shell-border: #e4e4e7;
  --shell-border-soft: #e4e4e7;
  --shell-border-strong: #d4d4d8;
  --shell-header-shadow: none;
  --shell-header-text: #09090b;
  --shell-header-subtext: #71717a;
  --shell-nav-link: #71717a;
  --shell-nav-link-hover: #09090b;
  --shell-nav-link-active: #09090b;
  --shell-brand-text: #09090b;
  --shell-auth-bg: #18181b;
  --shell-auth-text: #fafafa;
  --shell-auth-bg-hover: #27272a;
  --shell-toggle-bg-hover: #f4f4f5;
  --shell-toggle-border: #e4e4e7;
  --shell-dropdown-bg: #ffffff;
  --shell-dropdown-text: #09090b;
  --shell-dropdown-title: #09090b;
  --shell-dropdown-subtitle: #71717a;
  --shell-dropdown-border: #e4e4e7;
  --shell-dropdown-hover: #f4f4f5;
  --shell-footer-border: #e4e4e7;
  --shell-footer-text: #71717a;
  --shell-footer-meta: #71717a;
  --theme-primary-bg: #18181b;
  --theme-primary-bg-hover: #27272a;
  --theme-primary-text: #fafafa;
  --theme-primary-border: #18181b;
  --theme-hero-solid-bg: #18181b;
  --theme-hero-solid-bg-hover: #27272a;
  --theme-hero-solid-text: #fafafa;
  --theme-hero-outline-border: #e4e4e7;
  --theme-hero-outline-text: #09090b;
  --theme-hero-outline-text-hover: #09090b;
  --theme-hero-outline-bg-hover: #f4f4f5;
  --docs-heading: #09090b;
  --docs-body: #3f3f46;
  --docs-muted: #71717a;
  --docs-surface: #ffffff;
  --docs-surface-hover: #fafafa;
  --docs-link: #09090b;
  --docs-link-hover: #52525b;
  --docs-code-bg: #f4f4f5;
  --docs-code-border: #e4e4e7;
  --docs-code-text: #09090b;
  --docs-pre-bg: #fafafa;
  --docs-blockquote-bg: #fafafa;
  --docs-rule: #e4e4e7;
  --docs-table-header-bg: #fafafa;
  --skel-base: #e4e4e7;
  --skel-mid: #f4f4f5;
  --btn-secondary-border: #e4e4e7;
  --btn-secondary-text: #09090b;
  --btn-secondary-bg-hover: #f4f4f5;
  --btn-outline-danger-border: #fca5a5;
  --btn-outline-danger-text: #dc2626;
  --btn-outline-danger-bg-hover: #fef2f2;
  --badge-gray-bg: #f4f4f5;
  --badge-gray-text: #18181b;
  --badge-green-bg: #dcfce7;
  --badge-green-text: #15803d;
  --badge-red-bg: #fee2e2;
  --badge-red-text: #b91c1c;
  --badge-yellow-bg: #fef9c3;
  --badge-yellow-text: #854d0e;
  --badge-blue-bg: #dbeafe;
  --badge-blue-text: #1d4ed8;
  --badge-orange-bg: #ffedd5;
  --badge-orange-text: #9a3412;
  --badge-indigo-bg: #18181b;
  --badge-indigo-text: #fafafa;
  --nav-active-border: #18181b;
  --md-code-bg: #f4f4f5;
  --md-code-text: #09090b;
  --md-pre-bg: #18181b;
  --accent-fg: #09090b;
  --accent-fg-hover: #52525b;
  --accent-muted: #71717a;
  --accent-bg: #f4f4f5;
  --accent-bg-hover: #e4e4e7;
  --accent-border: #d4d4d8;
}

/* The same resets Tailwind's preflight applies, repeated here so the header and page edges
   don't shift when the Tailwind Play CDN script finishes generating styles. */
*, ::before, ::after { box-sizing: border-box; }

/* Always reserve the scrollbar's space, so the centered header doesn't jump sideways between
   pages that scroll and pages that don't. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--font-sans);
}

h1, h2, h3 {
  letter-spacing: -0.025em;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
}

html[data-theme="dark"] body {
  background-color: var(--shell-page-bg);
  color: var(--shell-page-text);
}

html[data-theme="light"] body {
  background-color: var(--shell-page-bg);
  color: var(--shell-page-text);
}

.shell-header {
  position: relative;
  z-index: 40;
  /* Transparent so the header sits on the page's own background (the home page's starfield
     runs behind it); the bar isn't sticky, so it never overlaps content. */
  background: transparent;
  color: var(--shell-header-text);
  border-bottom: 1px solid var(--shell-border);
  box-shadow: var(--shell-header-shadow);
}

.shell-header__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.shell-brand,
.shell-brand:hover,
.shell-brand:visited {
  color: var(--shell-header-text);
  text-decoration: none;
}

.shell-brand {
  grid-column: 1;
  justify-self: start;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.shell-brand { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.shell-brand__by {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shell-header-subtext);
}
@media (max-width: 420px) {
  .shell-brand__by { display: none; }
}

.shell-brand-text,
.shell-header-text {
  color: var(--shell-header-text);
}

.shell-header-subtext {
  color: var(--shell-header-subtext);
}

.shell-nav-link {
  color: var(--shell-nav-link);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.shell-nav-link:hover {
  color: var(--shell-nav-link-hover);
}

.shell-nav-link--active {
  color: var(--shell-nav-link-active);
}

.shell-main-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.shell-main-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.shell-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.shell-header__dashboard {
  white-space: nowrap;
}

/* Square icon button, styled like the theme toggle. */
.shell-theme-toggle.shell-header__guide {
  justify-content: center;
  width: 2.25rem;
  padding: 0;
}

@media (max-width: 800px) {
  .shell-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .shell-main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
  }

  .shell-main-nav__link {
    min-width: 0;
    padding: 0.45rem 0.25rem;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
  }

  .shell-header__actions {
    grid-column: 2;
    grid-row: 1;
    gap: 0.5rem;
  }
}

@media (max-width: 380px) {
  .shell-header__inner {
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }

  .shell-brand {
    font-size: 1rem;
  }

  .shell-header__actions {
    gap: 0.375rem;
  }
}

.shell-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--shell-toggle-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--shell-nav-link);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (max-width: 639px) {
  .shell-theme-toggle__label { display: none; }
}

.shell-theme-toggle:hover {
  background: var(--shell-toggle-bg-hover);
  color: var(--shell-nav-link-hover);
}

.shell-auth-area {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
}

.shell-auth-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--shell-auth-bg);
  color: var(--shell-auth-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.shell-auth-link:hover {
  background: var(--shell-auth-bg-hover);
}

.shell-avatar-border {
  border: 1px solid var(--shell-border-soft);
}

.shell-dropdown {
  background: var(--shell-dropdown-bg);
  border: 1px solid var(--shell-dropdown-border);
}

.shell-dropdown-title {
  color: var(--shell-dropdown-title);
}

.shell-dropdown-subtitle {
  color: var(--shell-dropdown-subtitle);
}

.shell-dropdown-link {
  color: var(--shell-dropdown-text);
}

.shell-dropdown-link:hover {
  background: var(--shell-dropdown-hover);
}

/* Signed-in menu in the header: styled here rather than with Tailwind utilities so the bar
   looks final the moment site-shell.js inserts it. */
.shell-user-menu { position: relative; }

.shell-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.shell-avatar {
  display: block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

.shell-user-meta {
  font-size: 0.875rem;
  line-height: 1.25;
  text-align: left;
}

@media (max-width: 639px) {
  .shell-user-meta { display: none; }
}

.shell-user-name { font-weight: 600; }
.shell-user-login { font-size: 0.75rem; }

/* User menu, laid out like GitHub's: avatar and login on top, items with an icon, rounded hover. */
.shell-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  width: 15rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.shell-user-dropdown__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.shell-user-dropdown__who { min-width: 0; }
.shell-user-dropdown__who > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full-width hairline in the menu's own border colour, like GitHub's ActionList divider. */
.shell-user-dropdown__rule {
  height: 1px;
  margin: 0.4375rem -0.5rem 0.5rem;
  background: var(--shell-dropdown-border);
}

.shell-user-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.shell-user-dropdown__item svg {
  flex-shrink: 0;
  color: var(--shell-dropdown-subtitle);
}

.shell-footer {
  border-top: 1px solid var(--shell-footer-border);
}

.shell-footer-text {
  color: var(--shell-footer-text);
}

.shell-footer-meta {
  color: var(--shell-footer-meta);
}

.shell-footer-link {
  transition: color 0.15s ease;
}

.shell-footer-link:hover,
.shell-footer-link:focus-visible {
  color: var(--shell-footer-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shell-socials {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.shell-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--shell-footer-meta);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.shell-social:hover,
.shell-social:focus-visible {
  color: var(--shell-nav-link-hover);
  background: var(--shell-toggle-bg-hover);
}

.shell-social svg {
  width: 1.125rem;
  height: 1.125rem;
}

.skel {
  background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-mid) 50%, var(--skel-base) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Buttons ──
   <button class="btn btn-primary">, plus btn-sm / btn-xs / btn-lg for size.
   Layout (flex-1, w-full, margins) stays as Tailwind classes. */
.btn,
.theme-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.btn:focus-visible,
.theme-primary-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn:disabled,
.theme-primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm { padding: 0.375rem 0.75rem; }
.btn-xs { padding: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1rem; border-radius: 0.375rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; border-radius: var(--radius); }

.btn-primary,
.theme-primary-btn {
  background: var(--theme-primary-bg);
  color: var(--theme-primary-text);
  border-color: var(--theme-primary-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary:hover:not(:disabled),
.theme-primary-btn:hover:not(:disabled) { background: var(--theme-primary-bg-hover); }

.btn-secondary {
  background: transparent;
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); }

.btn-danger { background: var(--btn-danger-bg); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); }

.btn-success { background: var(--btn-success-bg); color: #fff; }
.btn-success:hover:not(:disabled) { background: var(--btn-success-bg-hover); }

.btn-warning { background: var(--btn-warning-bg); color: #fff; }
.btn-warning:hover:not(:disabled) { background: var(--btn-warning-bg-hover); }

.btn-outline-danger {
  background: transparent;
  color: var(--btn-outline-danger-text);
  border-color: var(--btn-outline-danger-border);
}
.btn-outline-danger:hover:not(:disabled) { background: var(--btn-outline-danger-bg-hover); }

/* ── Badges ── <span class="badge badge-green">approved</span> */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-gray { background: var(--badge-gray-bg); color: var(--badge-gray-text); }
.badge-green { background: var(--badge-green-bg); color: var(--badge-green-text); }
.badge-red { background: var(--badge-red-bg); color: var(--badge-red-text); }
.badge-yellow { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
.badge-blue { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.badge-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.badge-indigo { background: var(--badge-indigo-bg); color: var(--badge-indigo-text); }

/* ── Modals ──
   <div class="modal" x-show="open" x-transition:leave.opacity.duration.150ms @keydown.escape.window="open = false">
     <div class="modal-panel max-w-sm mx-4 p-6">…</div>
   </div>
   The open animation is plain CSS: it replays every time x-show un-hides the element. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.8);
  animation: shell-fade-in var(--motion-normal) var(--ease-out);
}
html[data-theme="light"] .modal { background: rgba(31, 35, 40, 0.5); }

.modal-panel {
  width: 100%;
  background: var(--shell-surface);
  border: 1px solid var(--shell-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  animation: shell-pop-in var(--motion-normal) var(--ease-out);
}

/* ── Motion ── one entrance for content that appears (also replays on x-show). */
.motion-enter {
  /* backwards: stay hidden during an animation-delay (used for staggered lists) */
  animation: shell-rise-in var(--motion-normal) var(--ease-out) backwards;
}

@keyframes shell-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shell-pop-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shell-rise-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shell-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Page load & navigation ── */
/* Alpine removes x-cloak once it initialises an element, so x-show content that starts
   hidden never flashes before Alpine boots. */
[x-cloak] { display: none !important; }

/* Hold the header's space until site-shell.js fills it, so the page doesn't jump down. */
[data-site-header]:empty {
  display: block;
  min-height: calc(4.5rem + 1px);
  border-bottom: 1px solid var(--shell-border);
}

@media (max-width: 800px) {
  [data-site-header]:empty { min-height: calc(7.5rem + 1px); }
}

/* Cross-document view transitions (Chromium; other browsers ignore this): a quick
   crossfade between pages instead of a hard swap, with the header held in place. */
@view-transition {
  navigation: auto;
}

.shell-header {
  view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: var(--ease-out);
}

::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
}

/* Without a fade, the old snapshot would show through the new one. */
::view-transition-old(site-header) { display: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── Starfield ── <canvas class="page-sky" data-hero-stars> + /static/hero-stars.js: one fixed
   sky behind the whole page (home and contact pages), dark theme only. */
.page-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  --hero-star-rgb: 250, 250, 250;
}

html[data-theme="light"] .page-sky { display: none; }

/* ── Small shared pieces ── */
/* White text on a coloured/dark background. Unlike .text-white, light mode leaves it alone. */
.text-on-dark { color: #fff; }

.spinner { width: 0.75rem; height: 0.75rem; animation: shell-spin 1s linear infinite; }
.spinner-track { stroke-opacity: 0.25; }
.spinner-arc { fill: currentColor; opacity: 0.75; }

.theme-hero-solid {
  background: var(--theme-hero-solid-bg);
  color: var(--theme-hero-solid-text) !important;
}

.theme-hero-solid:hover {
  background: var(--theme-hero-solid-bg-hover);
}

.theme-hero-outline {
  border-color: var(--theme-hero-outline-border) !important;
  color: var(--theme-hero-outline-text) !important;
}

.theme-hero-outline:hover {
  background: var(--theme-hero-outline-bg-hover) !important;
  color: var(--theme-hero-outline-text-hover) !important;
}

.docs-page .docs-title {
  color: var(--docs-heading) !important;
}

.docs-page .docs-body {
  color: var(--docs-body) !important;
}

.docs-page .docs-muted {
  color: var(--docs-muted) !important;
}

.docs-page .docs-card {
  background: var(--docs-surface) !important;
  border-color: var(--shell-border) !important;
}

.docs-page .docs-card:hover {
  background: var(--docs-surface-hover) !important;
  border-color: var(--shell-border-strong) !important;
}

.docs-page .docs-card-title {
  color: var(--docs-heading) !important;
}

.docs-page .docs-card:hover .docs-card-title,
.docs-page .docs-card:hover .docs-arrow {
  color: var(--docs-link-hover) !important;
}

.docs-page .docs-arrow {
  color: var(--docs-muted) !important;
}

.docs-page .docs-inline-code {
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-code-border);
  color: var(--docs-code-text);
  border-radius: 0.35rem;
  padding: 0.12rem 0.35rem;
}

/* ── Tutorial layout (/docs/<slug>/) ── guide list + sections on the left, built by docs.js */
.docs-layout {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3.5rem;
}

.docs-main {
  min-width: 0;
  max-width: 48rem;
}

.docs-toc {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  scrollbar-width: thin;
}

.docs-toc__label {
  margin: 0 0 0.75rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.docs-toc__guides,
.docs-toc__sections {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-toc__guide + .docs-toc__guide { margin-top: 0.125rem; }

.docs-toc__guide-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--docs-muted);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.docs-toc__guide-link:hover {
  background: var(--docs-surface-hover);
  color: var(--docs-heading);
}

.docs-toc__guide-num {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.docs-toc__guide--current > .docs-toc__guide-link {
  background: var(--docs-surface-hover);
  color: var(--docs-heading);
  font-weight: 500;
}

.docs-toc__sections {
  margin: 0.375rem 0 0.75rem 0.75rem;
  border-left: 1px solid var(--docs-rule);
}

.docs-toc__section-link {
  display: block;
  margin-left: -1px;
  padding: 0.3rem 0.75rem;
  border-left: 1px solid transparent;
  color: var(--docs-muted);
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-toc__section--h3 .docs-toc__section-link { padding-left: 1.5rem; font-size: 0.8125rem; }

.docs-toc__section-link:hover { color: var(--docs-heading); }

.docs-toc__section-link.is-active {
  color: var(--docs-heading);
  border-left-color: var(--docs-heading);
}

/* Narrow screens: the same list, collapsed above the article. */
.docs-toc-mobile {
  margin: 0 0 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--docs-rule);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.docs-toc-mobile__summary {
  padding: 0.5rem 0.25rem;
  font-weight: 500;
  color: var(--docs-heading);
  cursor: pointer;
}

.docs-toc-mobile[open] { padding-bottom: 0.5rem; }

@media (min-width: 1024px) {
  .docs-toc-mobile { display: none; }
}

@media (max-width: 1023px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 2rem;
  }

  .docs-toc { display: none; }
  .docs-main { max-width: none; }
}

html:has(body.docs-page) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html:has(body.docs-page) { scroll-behavior: auto; }
}

.docs-page .md-rendered h2,
.docs-page .md-rendered h3 { scroll-margin-top: 1.5rem; }

/* Math (KaTeX, see docs.js). Wide display equations scroll sideways instead of overflowing the
   column; the one an \eqref link jumps to is briefly highlighted. */
.docs-page .md-rendered .math-display {
  margin: 1.25rem 0;
  padding: 0.25rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-margin-top: 1.5rem;
  border-radius: 0.375rem;
}
.docs-page .md-rendered .math-display .katex-display { margin: 0; }
.docs-page .md-rendered .math-display:target { animation: docs-eq-flash 1.6s ease-out; }
@keyframes docs-eq-flash {
  from { background: var(--docs-code-bg); }
  to { background: transparent; }
}
.docs-page .md-rendered .eqref { white-space: nowrap; }
.docs-page .md-rendered .eqref--missing { color: #f87171; text-decoration: none; cursor: help; }

.docs-page .md-rendered .docs-heading-anchor {
  margin-left: 0.5rem;
  color: var(--docs-muted);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.docs-page .md-rendered h2:hover .docs-heading-anchor,
.docs-page .md-rendered h3:hover .docs-heading-anchor,
.docs-page .md-rendered .docs-heading-anchor:focus-visible { opacity: 1; }

/* ── Downloads (/downloads/ and /downloads/<section>/) ── laid out like the tutorials */
.dl-page__header { margin-bottom: 2rem; }

.dl-page__title {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--docs-heading);
}

.dl-page__lead {
  max-width: 44rem;
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--docs-body);
}

.dl-item { scroll-margin-top: 1.5rem; }

.dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--docs-rule);
  border-radius: 0.75rem;
  overflow: hidden;
}

.dl-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--docs-surface);
  transition: background-color 0.15s ease;
}

.dl-item + .dl-item { border-top: 1px solid var(--docs-rule); }
.dl-item:hover { background: var(--docs-surface-hover); }

.dl-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--docs-rule);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--docs-muted);
}

.dl-item__body { flex: 1; min-width: 0; }

.dl-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--docs-heading);
}

.dl-item__desc {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--docs-body);
}

.dl-item__desc code {
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--docs-code-border);
  border-radius: 0.3rem;
  background: var(--docs-code-bg);
}

.dl-item__meta {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--docs-muted);
}

.dl-item__meta a { text-decoration: underline; text-underline-offset: 3px; }

.dl-page__lead code,
.dl-item__meta code {
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--docs-code-border);
  border-radius: 0.3rem;
  background: var(--docs-code-bg);
}

.dl-item--image { align-items: flex-start; }
.dl-item--empty { color: var(--docs-muted); font-size: 0.9375rem; }

/* The pull command for a shared image, with a copy button. */
.dl-pull {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
  border: 1px solid var(--docs-code-border);
  border-radius: var(--radius);
  background: var(--docs-pre-bg);
}

.dl-pull__cmd {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--docs-heading);
  scrollbar-width: none;
}

.dl-pull__copy { flex-shrink: 0; }
.dl-item__action { flex-shrink: 0; text-decoration: none; }

@media (max-width: 639px) {
  .dl-item { flex-wrap: wrap; padding: 1rem; }
  .dl-item__icon { display: none; }
  .dl-item__action { width: 100%; justify-content: center; }
}

/* ── Rendered Markdown ── base (experiment descriptions, comments) */
.md-rendered h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.md-rendered h2 { font-size: 1.3rem; font-weight: 700; margin: 0.9rem 0 0.4rem; }
.md-rendered h3 { font-size: 1.15rem; font-weight: 600; margin: 0.8rem 0 0.3rem; }
.md-rendered h4 { font-size: 1.05rem; font-weight: 600; margin: 0.6rem 0 0.2rem; }
.md-rendered p { margin: 0 0 0.5rem; }
.md-rendered ul { list-style: disc; }
.md-rendered ol { list-style: decimal; }
.md-rendered ul, .md-rendered ol { margin: 0 0 0.5rem; padding-left: 1.5rem; }
.md-rendered ul ul { list-style: circle; }
.md-rendered ul ul ul { list-style: square; }
.md-rendered li { margin: 0.15rem 0; }
.md-rendered a { color: var(--docs-link); text-decoration: underline; }
.md-rendered a:hover { color: var(--docs-link-hover); }
.md-rendered code { background: var(--md-code-bg); color: var(--md-code-text); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.85em; font-family: var(--font-mono); }
.md-rendered pre { background: var(--md-pre-bg); padding: 0.75rem; border-radius: 6px; overflow-x: auto; margin: 0 0 0.75rem; }
.md-rendered pre code { background: transparent; padding: 0; border-radius: 0; font-size: 0.8rem; color: var(--md-pre-text); }
.md-rendered blockquote { border-left: 3px solid var(--shell-border-soft); padding: 0.25rem 0.75rem; margin: 0 0 0.5rem; color: var(--docs-muted); }
.md-rendered hr { border: none; border-top: 1px solid var(--shell-border-soft); margin: 0.75rem 0; }
.md-rendered strong { font-weight: 700; }
.md-rendered em { font-style: italic; }

/* Tutorials (/docs/<slug>/): larger reading typography */
.docs-page .md-rendered h1 { font-size: 2.25rem; line-height: 1.1; font-weight: 800; margin: 0 0 1rem; color: var(--docs-heading); }
.docs-page .md-rendered h2 { font-size: 1.5rem; font-weight: 700; margin: 2.25rem 0 0.8rem; color: var(--docs-heading); }
.docs-page .md-rendered h3 { font-size: 1.15rem; font-weight: 700; margin: 1.6rem 0 0.55rem; color: var(--docs-heading); }
.docs-page .md-rendered p { margin: 0 0 1rem; color: var(--docs-body); }
.docs-page .md-rendered ul, .docs-page .md-rendered ol { margin: 0 0 1rem 1.5rem; padding-left: 0; color: var(--docs-body); }
.docs-page .md-rendered li { margin: 0.35rem 0; }
.docs-page .md-rendered strong { color: var(--docs-heading); }
.docs-page .md-rendered code { background: var(--docs-code-bg); border: 1px solid var(--docs-code-border); color: var(--docs-code-text); padding: 0.12rem 0.35rem; border-radius: 0.35rem; font-size: 0.92em; }
.docs-page .md-rendered pre { background: var(--docs-pre-bg); border: 1px solid var(--docs-code-border); color: var(--docs-body); padding: 1rem; border-radius: var(--radius); margin: 0 0 1.2rem; }
.docs-page .md-rendered pre code { background: transparent; border: none; color: inherit; padding: 0; border-radius: 0; font-size: 0.85rem; }
.docs-page .md-rendered blockquote { margin: 1rem 0; padding: 0.9rem 1rem; border-left: 2px solid var(--shell-border-strong); background: var(--docs-blockquote-bg); border-radius: 0 var(--radius) var(--radius) 0; color: inherit; }
.docs-page .md-rendered hr { border-top-color: var(--docs-rule); margin: 2rem 0; }
.docs-page .md-rendered table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; color: var(--docs-body); }
.docs-page .md-rendered th, .docs-page .md-rendered td { border: 1px solid var(--docs-code-border); padding: 0.7rem; text-align: left; }
.docs-page .md-rendered th { color: var(--docs-heading); background: var(--docs-table-header-bg); }

.md-rendered img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--docs-code-border);
}

.md-rendered figure {
  margin: 1.5rem 0;
  text-align: center;
}

.md-rendered figure img {
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  transition: box-shadow 0.2s ease;
}

.md-rendered figure a:hover img {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.2);
}

.md-rendered figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--docs-muted);
}

#userDropdown {
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  pointer-events: none;
}

#userDropdown.dropdown-open {
  animation: dropdown-in 0.15s ease-out forwards;
}

@keyframes dropdown-in {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
    pointer-events: none;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

html[data-theme="dark"] .bg-gray-100 {
  background-color: var(--shell-page-bg) !important;
}

html[data-theme="dark"] .bg-white.shadow-sm,
html[data-theme="dark"] .bg-white.shadow,
html[data-theme="dark"] .bg-white.shadow-lg,
html[data-theme="dark"] .bg-white.border,
html[data-theme="dark"] .bg-white.rounded-xl.border,
html[data-theme="dark"] .bg-white.rounded-2xl.border,
html[data-theme="dark"] .bg-white.rounded-xl.shadow-sm,
html[data-theme="dark"] .bg-white.rounded-2xl.shadow-sm,
html[data-theme="dark"] .bg-white.shadow-2xl {
  background-color: var(--shell-surface) !important;
}

html[data-theme="dark"] .bg-gray-50 {
  background-color: var(--shell-surface-alt) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-700,
html[data-theme="dark"] .border-gray-800 {
  border-color: var(--shell-border) !important;
}

html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 {
  color: #fafafa !important;
}

html[data-theme="dark"] .text-gray-700 {
  color: #e4e4e7 !important;
}

html[data-theme="dark"] .text-gray-600 {
  color: #d4d4d8 !important;
}

html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 {
  color: #a1a1aa !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: transparent !important;
  color: #fafafa !important;
  border-color: var(--shell-border) !important;
}

/* A select's option list is drawn by the browser from the select's own background, and a
   transparent one counts as white: white text on white, or a white flash as the list opens.
   So selects get a solid surface colour (the same as the cards they sit on) and a dark
   color-scheme for the browser-drawn parts. */
html[data-theme="dark"] select {
  background-color: var(--shell-surface) !important;
  color-scheme: dark;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background-color: #18181b;
  color: #fafafa;
}

/* Where the browser supports it (Chromium), selects open a page-drawn list styled like the
   site's other menus instead of the native one, which still flashed white in dark mode. The
   rules above stay as the fallback elsewhere. */
@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }

  select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
  }

  select::picker-icon {
    color: var(--shell-header-subtext);
    transition: rotate 0.2s var(--ease-out);
  }

  select:open::picker-icon {
    rotate: 180deg;
  }

  ::picker(select) {
    margin-top: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--shell-dropdown-border);
    border-radius: 0.5rem;
    background: var(--shell-dropdown-bg);
    color: var(--shell-dropdown-text);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease, overlay 0.15s allow-discrete, display 0.15s allow-discrete;
  }

  ::picker(select):popover-open {
    opacity: 1;
  }

  @starting-style {
    ::picker(select):popover-open {
      opacity: 0;
    }
  }

  html select option,
  html[data-theme] select option {
    padding: 0.4rem 0.6rem;
    border-radius: 0.35rem;
    background-color: transparent;
    color: inherit;
    font-size: 0.875rem;
  }

  html[data-theme] select option:hover,
  html[data-theme] select option:focus-visible {
    background-color: var(--shell-dropdown-hover);
    outline: none;
  }

  html[data-theme] select option:checked {
    font-weight: 600;
  }

  select option::checkmark {
    color: var(--shell-header-subtext);
  }
}

html[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: var(--shell-surface-alt) !important;
}

html[data-theme="dark"] .hover\:bg-red-50:hover {
  background-color: #3f1d1d !important;
}

html[data-theme="light"] .bg-gray-950,
html[data-theme="light"] .bg-gray-900 {
  background-color: var(--shell-surface) !important;
}

html[data-theme="light"] .bg-gray-800 {
  background-color: var(--shell-surface-alt) !important;
}

html[data-theme="light"] .border-gray-800,
html[data-theme="light"] .border-gray-700 {
  border-color: var(--shell-border) !important;
}

html[data-theme="light"] .text-white {
  color: #09090b !important;
}

html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200 {
  color: #09090b !important;
}

html[data-theme="light"] .bg-gray-700.text-gray-300 {
  color: #fafafa !important;
}

html[data-theme="light"] .text-red-400 {
  color: #b91c1c !important;
}

html[data-theme="light"] .text-yellow-400 {
  color: #a16207 !important;
}

html[data-theme="light"] .text-blue-300 {
  color: #1d4ed8 !important;
}

html[data-theme="light"] .text-green-400 {
  color: #15803d !important;
}

html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .text-gray-400 {
  color: #52525b !important;
}

html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600,
html[data-theme="light"] .text-gray-700 {
  color: #71717a !important;
}

html[data-theme="light"] .hover\:bg-white\/10:hover {
  background-color: var(--shell-toggle-bg-hover) !important;
}

/* ── Monochrome accents ──
   The markup uses Tailwind blue for links, labels and selection; shadcn/ui keeps those neutral.
   Status colours (bg-blue-500 dots, .badge-blue, text-blue-300 log lines) are left blue on purpose. */
html[data-theme] .text-blue-400,
html[data-theme] .text-blue-500,
html[data-theme] .text-blue-600,
html[data-theme] .text-blue-700,
html[data-theme] .text-blue-800,
html[data-theme] .text-blue-900 {
  color: var(--accent-fg) !important;
}

html[data-theme] h1 .text-blue-400 {
  color: var(--accent-muted) !important;
}

html[data-theme] .hover\:text-blue-400:hover,
html[data-theme] .hover\:text-blue-600:hover,
html[data-theme] .hover\:text-blue-800:hover {
  color: var(--accent-fg-hover) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

html[data-theme] .bg-blue-50,
html[data-theme] .bg-blue-600\/20 {
  background-color: var(--accent-bg) !important;
}

html[data-theme] .hover\:bg-blue-50:hover,
html[data-theme] .hover\:bg-blue-100:hover {
  background-color: var(--accent-bg-hover) !important;
}

html[data-theme] .border-blue-100,
html[data-theme] .border-blue-200,
html[data-theme] .border-blue-600\/30,
html[data-theme] .hover\:border-blue-400:hover {
  border-color: var(--accent-border) !important;
}

html[data-theme] .border-blue-400,
html[data-theme] .border-blue-600 {
  border-color: var(--accent-fg) !important;
}

html[data-theme] .ring-blue-400 {
  --tw-ring-color: var(--ring) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-fg);
}

/* shadcn-style neutral focus rings in place of the blue ones in the markup. */
html[data-theme] [class*="focus:ring-blue"]:focus,
html[data-theme] [class*="focus:ring-indigo"]:focus {
  --tw-ring-color: var(--ring) !important;
  border-color: var(--shell-border-strong) !important;
}