/* ============================================================
   AI Playbook — "Aizome" theme for Material for MkDocs
   ------------------------------------------------------------
   Concept: Japanese indigo dye (aizome, 藍染). The kanji 藍 is
   read "ai" — the Japanese word for indigo — which is the whole
   identity in one glyph: AI Playbook, ai-kyoto, indigo brand.
   Light mode is undyed cotton; dark mode is the dye vat at
   night. The hero is the signature: a hand-derived asanoha
   (hemp-leaf) lattice woven over drifting indigo light, with a
   ghosted 藍 dyed into the cloth. Sections are stitched together
   with sashiko dashes; accents follow the real dye scale:
   kamenozoki (pale cyan) → hanada (brand indigo) → kon (navy).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");
/* Single-glyph subset (~2 KB): a Mincho-serif 藍 for the hero */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&text=%E8%97%8D&display=swap");

/* ============================================================
   1 · Design tokens
   ============================================================ */

:root {
  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";

  --ap-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ap-mono: "JetBrains Mono", ui-monospace, monospace;
  --ap-kanji-font: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* The dye scale */
  --ap-indigo: #5b57e0;          /* hanada — the brand */
  --ap-indigo-bright: #7d79f2;
  --ap-violet: #9d7bf5;
  --ap-cyan: #4fd8e8;            /* kamenozoki — "a glimpse into the vat" */
  --ap-kon: #171636;             /* deep navy — the vat itself */

  /* Motion */
  --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The asanoha lattice — hand-derived tile, 32 × 55.43 (1 : √3).
     White strokes for dark surfaces, indigo ink for light ones. */
  --ap-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='55.43'%3E%3Cpath d='M0 0H32M0 27.71H32M0 55.43H32M0 0 32 55.43M32 0 0 55.43M16 9.24 0 0M16 9.24 32 0M16 9.24 16 27.71M32 18.48 32 0M32 18.48 16 27.71M0 18.48 0 0M0 18.48 16 27.71M32 36.95 16 27.71M0 36.95 16 27.71M32 36.95 32 55.43M0 36.95 0 55.43M16 46.19 16 27.71M16 46.19 0 55.43M16 46.19 32 55.43' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='.75'/%3E%3C/svg%3E");
  --ap-asanoha-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='55.43'%3E%3Cpath d='M0 0H32M0 27.71H32M0 55.43H32M0 0 32 55.43M32 0 0 55.43M16 9.24 0 0M16 9.24 32 0M16 9.24 16 27.71M32 18.48 32 0M32 18.48 16 27.71M0 18.48 0 0M0 18.48 16 27.71M32 36.95 16 27.71M0 36.95 16 27.71M32 36.95 32 55.43M0 36.95 0 55.43M16 46.19 16 27.71M16 46.19 0 55.43M16 46.19 32 55.43' fill='none' stroke='%235b57e0' stroke-opacity='.5' stroke-width='.75'/%3E%3C/svg%3E");

  /* Film grain — desaturated fractal noise */
  --ap-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Light scheme: undyed cotton / washi paper ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf9f6;
  --md-code-bg-color: #f2f1ec;
  --ap-surface: #ffffff;
  --ap-surface-2: #f3f2ed;
  --ap-border: #e7e5dd;
  --ap-border-strong: #d7d4c9;
  --ap-muted: #6e6c78;
  --ap-shadow: 30, 28, 60;
  --ap-header-bg: rgba(250, 249, 246, 0.78);
  --ap-ambient: rgba(91, 87, 224, 0.05);
  --ap-weave: var(--ap-asanoha-ink);
  --ap-weave-opacity: 0.07;
}

/* ---- Dark scheme: the dye vat at night ---- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a15;
  --md-code-bg-color: #131327;
  --ap-surface: #11111f;
  --ap-surface-2: #181830;
  --ap-border: #24243e;
  --ap-border-strong: #333356;
  --ap-muted: #9b9bb6;
  --ap-shadow: 0, 0, 0;
  --ap-header-bg: rgba(10, 10, 21, 0.72);
  --ap-ambient: rgba(91, 87, 224, 0.09);
  --ap-weave: var(--ap-asanoha);
  --ap-weave-opacity: 0.1;
  --md-default-fg-color: #e8e8f2;
  --md-typeset-a-color: var(--ap-indigo-bright);
}

/* ---- Brand palette hooks (palette: custom) ---- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--ap-indigo);
  --md-primary-fg-color--light: var(--ap-indigo-bright);
  --md-primary-fg-color--dark: #4541b5;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--ap-indigo-bright);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--ap-indigo) 12%, transparent);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
}

/* ============================================================
   2 · Base atmosphere
   ============================================================ */

::selection {
  background: color-mix(in srgb, var(--ap-indigo) 85%, transparent);
  color: #ffffff;
}

/* Faint indigo sky bleeding down from the top of every page */
.md-container {
  background: radial-gradient(72rem 30rem at 50% -12rem, var(--ap-ambient), transparent 70%);
}

/* Thin, quiet scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--ap-border-strong);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ap-indigo) 45%, var(--ap-border-strong));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Content settles in like ink into paper (replays on instant nav) */
@keyframes ap-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.md-content__inner {
  animation: ap-rise 360ms var(--ap-ease) both;
}

/* Instant-navigation progress: a thread of dye */
.md-progress {
  background: linear-gradient(90deg, var(--ap-indigo), var(--ap-cyan));
}

/* ============================================================
   3 · Typography
   ============================================================ */

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--ap-display);
  color: var(--md-default-fg-color);
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2.05rem;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin-bottom: 0.8em;
}

/* The dye-scale bar: every page h1 carries the palette's story */
.md-typeset h1:not(.ap-hero__title)::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 3px;
  margin-top: 0.55rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ap-indigo), var(--ap-cyan));
}

/* h2 rules are sashiko stitches — the running stitch that binds
   indigo cloth — with a knot-diamond where the stitch begins */
.md-typeset h2 {
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px dashed var(--ap-border-strong);
  position: relative;
}
.md-typeset h2::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--md-default-bg-color);
  border: 1.5px solid var(--ap-indigo);
  border-radius: 1px;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  margin-top: 1.8em;
}

/* Heading permalinks: quiet indigo, no link underline */
.md-typeset a.headerlink {
  border-bottom: none;
  color: color-mix(in srgb, var(--ap-indigo) 55%, transparent);
}

/* Editorial lede: the paragraph right under the title reads bigger */
.md-typeset h1:not(.ap-hero__title) + p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--md-default-fg-color) 88%, transparent);
}

/* Anchored headings land clear of the sticky header */
.md-typeset :is(h2, h3, h4) {
  scroll-margin-top: 4rem;
}

/* Comfortable reading measure */
.md-grid {
  max-width: 66rem;
}

/* Every page opens on the cloth: a whisper of the weave behind
   the title, fading out before the text begins */
.md-content {
  position: relative;
}
.md-content::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(26rem, 55%);
  height: 15rem;
  background-image: var(--ap-weave);
  background-size: 56px 97px;
  opacity: calc(var(--ap-weave-opacity) * 0.55);
  mask-image: radial-gradient(100% 100% at 100% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000, transparent 75%);
  pointer-events: none;
}

/* ============================================================
   4 · Header — frosted paper under an obi band
   ============================================================ */

.md-header {
  background: var(--ap-header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--ap-border);
  box-shadow: none;
  transition: background 200ms var(--ap-ease), border-color 200ms var(--ap-ease);
}
/* The obi: a thread of dye running across the top of every page */
.md-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ap-indigo), var(--ap-cyan) 42%, transparent 78%);
  pointer-events: none;
}
.md-header--shadow {
  box-shadow: 0 4px 24px color-mix(in srgb, rgb(var(--ap-shadow)) 8%, transparent);
}
.md-header__title {
  font-family: var(--ap-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-header__button {
  color: var(--md-default-fg-color);
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  color: var(--ap-indigo);
}

/* Search field sits softly on the frosted bar */
.md-search__form {
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  box-shadow: none;
  transition: background 160ms var(--ap-ease), border-color 160ms var(--ap-ease);
}
.md-search__form:hover {
  background: var(--ap-surface-2);
  border-color: var(--ap-border-strong);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--ap-indigo);
  border-radius: 10px 10px 0 0;
}
.md-search__input {
  color: var(--md-default-fg-color);
}
.md-search__input::placeholder {
  color: var(--ap-muted);
}
.md-search__icon {
  color: var(--ap-muted);
}
.md-search__output {
  border-radius: 0 0 12px 12px;
  box-shadow: 0 24px 64px color-mix(in srgb, rgb(var(--ap-shadow)) 20%, transparent);
}

/* ============================================================
   5 · Navigation
   ============================================================ */

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    padding-top: 0.4rem;
  }
  /* Section group labels: quiet, upper, tracked — like an index,
     each finished with a hairline running to the edge */
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link,
  .md-nav--primary .md-nav__item--section > .md-nav__link {
    font-family: var(--ap-mono);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ap-muted);
    opacity: 1;
    margin-top: 1.1rem;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .md-nav--primary .md-nav__item--section > .md-nav__link::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ap-border);
  }
}

.md-nav {
  font-size: 0.72rem;
}
.md-nav__title {
  font-family: var(--ap-display);
}
/* Sidebar titles ("AI Playbook", "Table of contents") match the
   mono index labels */
@media screen and (min-width: 60em) {
  .md-sidebar .md-nav__title {
    font-family: var(--ap-mono);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ap-muted);
  }
}

/* Nav links: pill hover + active state */
.md-nav__link {
  border-radius: 8px;
  padding: 0.28rem 0.5rem;
  margin: 0.05rem 0;
  transition: background 140ms var(--ap-ease), color 140ms var(--ap-ease);
}
.md-nav__item .md-nav__link:hover {
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-default-fg-color);
}
.md-nav__link--active,
.md-nav__link--active:hover {
  background: color-mix(in srgb, var(--ap-indigo) 14%, transparent);
  color: var(--ap-indigo) !important;
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active:hover {
  color: var(--ap-indigo-bright) !important;
}

/* Right-hand TOC: a hairline rail; the active item takes the indigo */
@media screen and (min-width: 60em) {
  .md-sidebar--secondary .md-nav__list {
    border-left: 1px solid var(--ap-border);
    padding-left: 0.1rem;
  }
  .md-sidebar--secondary .md-nav__list .md-nav__list {
    border-left: none;
    padding-left: 0;
  }
}
.md-sidebar--secondary .md-nav__link {
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
}
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--active:hover {
  background: transparent;
  color: var(--ap-indigo) !important;
}
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link--active:hover {
  color: var(--ap-indigo-bright) !important;
}

/* ============================================================
   6 · Content elements
   ============================================================ */

.md-typeset a {
  color: var(--ap-indigo);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ap-indigo) 28%, transparent);
  transition: border-color 140ms var(--ap-ease), color 140ms var(--ap-ease);
}
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--ap-indigo-bright);
  border-bottom-color: color-mix(in srgb, var(--ap-indigo-bright) 32%, transparent);
}
.md-typeset a:hover {
  border-bottom-color: currentColor;
}

/* Horizontal rules: a dye hairline that fades out */
.md-typeset hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--ap-border-strong), transparent);
}

/* Tables — clean, card-like, numbers that line up */
.md-typeset table:not([class]) {
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px color-mix(in srgb, rgb(var(--ap-shadow)) 5%, transparent);
  font-variant-numeric: tabular-nums;
}
.md-typeset table:not([class]) th {
  background: var(--ap-surface-2);
  font-family: var(--ap-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ap-muted);
  border-bottom: 1px solid var(--ap-border-strong);
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--ap-border);
}
.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(in srgb, var(--ap-indigo) 4%, transparent);
  box-shadow: none;
}

/* Code blocks: bordered cards */
.md-typeset pre > code {
  border-radius: 12px;
  border: 1px solid var(--ap-border);
}
.md-typeset .highlight {
  border-radius: 12px;
}
.md-typeset code {
  border-radius: 5px;
  font-size: 0.86em;
}
/* Inline code: a drop of dye */
.md-typeset :not(pre) > code {
  background: color-mix(in srgb, var(--ap-indigo) 7%, var(--ap-surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ap-indigo) 12%, transparent);
}
.md-clipboard {
  color: var(--ap-muted);
}

/* List markers pick up the dye */
.md-typeset :is(ul, ol) li::marker {
  color: var(--ap-indigo);
}
[data-md-color-scheme="slate"] .md-typeset :is(ul, ol) li::marker {
  color: var(--ap-indigo-bright);
}

/* Definition lists (glossary) */
.md-typeset dl dt {
  font-family: var(--ap-display);
  font-weight: 600;
}

/* Block images: mounted like prints */
.md-typeset p > img:not(.twemoji, .emojione, .gemoji) {
  border-radius: 12px;
  border: 1px solid var(--ap-border);
  box-shadow: 0 8px 30px color-mix(in srgb, rgb(var(--ap-shadow)) 10%, transparent);
}

/* Code-block filename chips */
.md-typeset .highlight span.filename {
  font-family: var(--ap-mono);
  font-size: 0.68rem;
  color: var(--ap-muted);
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 12px 12px;
}

/* kbd + mark */
.md-typeset kbd {
  border-radius: 6px;
  box-shadow: 0 1px 0 var(--ap-border-strong);
}
.md-typeset mark {
  background: color-mix(in srgb, var(--ap-cyan) 32%, transparent);
  border-radius: 3px;
  padding: 0 0.15em;
}

/* Admonitions / details */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border: 1px solid var(--ap-border);
  border-left-width: 3px;
  box-shadow: 0 1px 3px color-mix(in srgb, rgb(var(--ap-shadow)) 5%, transparent);
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--ap-display);
  font-weight: 600;
}
/* Pull the cool admonition types onto the dye scale */
.md-typeset :is(.admonition, details):is(.note, .abstract, .info) {
  border-left-color: var(--ap-indigo);
}
.md-typeset :is(.note, .abstract, .info) > :is(.admonition-title, summary) {
  background-color: color-mix(in srgb, var(--ap-indigo) 10%, transparent);
}
.md-typeset :is(.note, .abstract, .info) > :is(.admonition-title, summary)::before {
  background-color: var(--ap-indigo);
}
.md-typeset :is(.admonition, details):is(.tip, .hint, .important) {
  border-left-color: var(--ap-cyan);
}
.md-typeset :is(.tip, .hint, .important) > :is(.admonition-title, summary) {
  background-color: color-mix(in srgb, var(--ap-cyan) 12%, transparent);
}
.md-typeset :is(.tip, .hint, .important) > :is(.admonition-title, summary)::before {
  background-color: var(--ap-cyan);
}

/* Content tabs */
.md-typeset .tabbed-labels > label {
  font-family: var(--ap-display);
  font-weight: 600;
}
.md-typeset .tabbed-set {
  border-radius: 12px;
}

/* Blockquotes — the "why this matters" callouts, cut like fabric
   swatches with the weave showing at one corner */
.md-typeset blockquote {
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--ap-indigo);
  background: color-mix(in srgb, var(--ap-indigo) 6%, transparent);
  border-radius: 0 12px 12px 0;
  padding: 0.7rem 1.15rem;
  color: inherit;
}
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: color-mix(in srgb, var(--ap-indigo) 12%, transparent);
}
.md-typeset blockquote::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ap-weave);
  background-size: 44px 76px;
  opacity: calc(var(--ap-weave-opacity) * 0.5);
  mask-image: radial-gradient(60% 130% at 100% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(60% 130% at 100% 0%, #000, transparent 72%);
  pointer-events: none;
}

/* Buttons rendered from Markdown */
.md-typeset .md-button {
  border-radius: 10px;
  font-family: var(--ap-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 140ms var(--ap-ease), box-shadow 140ms var(--ap-ease);
}
.md-typeset .md-button:hover {
  transform: translateY(-1px);
}

/* ============================================================
   7 · Grid cards — hover lift + the weave surfacing
   ============================================================ */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :is(ul, ol) > li {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  background: var(--ap-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, rgb(var(--ap-shadow)) 5%, transparent);
  transition: transform 200ms var(--ap-ease), box-shadow 200ms var(--ap-ease),
    border-color 200ms var(--ap-ease);
}
/* The lattice rises to the surface of the cloth on hover */
.md-typeset .grid.cards > :is(ul, ol) > li::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ap-weave);
  background-size: 48px 83px;
  opacity: 0;
  mask-image: radial-gradient(85% 85% at 100% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(85% 85% at 100% 0%, #000, transparent 72%);
  transition: opacity 300ms var(--ap-ease);
  pointer-events: none;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover::after {
  opacity: var(--ap-weave-opacity);
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ap-indigo) 45%, var(--ap-border));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ap-indigo) 16%, transparent);
}
.md-typeset .grid.cards > :is(ul, ol) > li > hr {
  margin: 0.7rem 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ap-border-strong), transparent);
}
.md-typeset .grid.cards > :is(ul, ol) > li > p > strong {
  font-family: var(--ap-display);
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}
.md-typeset .grid.cards .twemoji.lg svg,
.md-typeset .grid.cards :is(.lg, .middle) svg {
  fill: var(--ap-indigo);
}

/* ============================================================
   8 · Home page hero — 藍 in the weave (the signature)
   ============================================================ */

.ap-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(2.8rem, 7vw, 4.8rem) clamp(1.6rem, 5vw, 3.2rem);
  margin: 0.4rem 0 2.6rem;
  /* Vat gradient inside; a conic thread of light along the edge,
     like light catching lacquer */
  border: 1px solid transparent;
  background:
    radial-gradient(120% 140% at 12% 10%, #1d1b40 0%, #0c0b1e 55%, #08070f 100%) padding-box,
    conic-gradient(from 210deg at 50% 50%, #2c2a58, #6c68e8 10%, #4fd8e8 20%, #2c2a58 38%, #232150 62%, #8a63f0 84%, #2c2a58) border-box;
  box-shadow: 0 24px 70px rgba(12, 11, 28, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

/* Indigo light drifting under the weave */
.ap-hero__aurora {
  position: absolute;
  inset: -30%;
  z-index: -4;
  background:
    radial-gradient(32% 42% at 20% 30%, rgba(91, 87, 224, 0.55), transparent 60%),
    radial-gradient(28% 38% at 78% 22%, rgba(157, 123, 245, 0.45), transparent 62%),
    radial-gradient(34% 44% at 64% 86%, rgba(79, 216, 232, 0.34), transparent 60%);
  filter: blur(40px);
  animation: ap-drift 26s var(--ap-ease) infinite alternate;
}
@keyframes ap-drift {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.12);
  }
  100% {
    transform: translate3d(-2%, 4%, 0) scale(1.05);
  }
}

/* 藍 — ai. The word for indigo, dyed into the cloth behind the weave */
.ap-hero__kanji {
  position: absolute;
  right: -1.5rem;
  top: 50%;
  z-index: -3;
  transform: translateY(-48%);
  font-family: var(--ap-kanji-font);
  font-weight: 600;
  font-size: clamp(15rem, 24vw, 21rem);
  line-height: 1;
  color: rgba(109, 105, 235, 0.13);
  -webkit-text-stroke: 1px rgba(168, 164, 255, 0.2);
  user-select: none;
  pointer-events: none;
  animation: ap-dip 2s var(--ap-ease) 0.15s both;
}
@keyframes ap-dip {
  from {
    opacity: 0;
    transform: translateY(-48%) scale(1.04);
  }
  to {
    opacity: 1;
    transform: translateY(-48%) scale(1);
  }
}
@media screen and (max-width: 59.9em) {
  .ap-hero__kanji {
    display: none;
  }
}

/* Film grain — the tooth of the cloth */
.ap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--ap-grain);
  background-size: 180px 180px;
  opacity: 0.055;
  pointer-events: none;
}

/* The asanoha lattice, soaking in on load like dye into cloth */
.ap-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ap-asanoha);
  background-size: 56px 97px;
  opacity: 0.16;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 88%);
  animation: ap-soak 1.6s var(--ap-ease) both;
}
@keyframes ap-soak {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.16;
  }
}

.md-typeset .ap-hero__eyebrow {
  font-family: var(--ap-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: #bcb8f7;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: ap-rise 600ms var(--ap-ease) 0.08s both;
}
.ap-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ap-cyan);
  box-shadow: 0 0 12px var(--ap-cyan);
  animation: ap-pulse 3.2s ease-in-out infinite;
}
@keyframes ap-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px var(--ap-cyan);
  }
  50% {
    box-shadow: 0 0 16px var(--ap-cyan);
  }
}

.md-typeset .ap-hero__title {
  font-family: var(--ap-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
  text-wrap: balance;
  animation: ap-rise 700ms var(--ap-ease) 0.16s both;
}
/* Gradient runs the dye scale: kamenozoki → indigo → violet */
.ap-hero__title .ap-grad {
  background: linear-gradient(100deg, #9ff2f8 0%, #a9a5ff 55%, #cdb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.md-typeset .ap-hero__lede {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #c7c6de;
  max-width: 34rem;
  margin: 0 0 1.8rem;
  text-wrap: pretty;
  animation: ap-rise 700ms var(--ap-ease) 0.24s both;
}

.ap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  animation: ap-rise 700ms var(--ap-ease) 0.32s both;
}
/* Hero CTAs are <a> tags — beat the scheme-scoped link rules on colour + underline */
.md-typeset a.ap-hero__btn,
[data-md-color-scheme="slate"] .md-typeset a.ap-hero__btn {
  border-bottom-color: transparent;
}
.md-typeset a.ap-hero__btn--primary,
[data-md-color-scheme="slate"] .md-typeset a.ap-hero__btn--primary {
  color: #ffffff;
}
.md-typeset a.ap-hero__btn--ghost,
[data-md-color-scheme="slate"] .md-typeset a.ap-hero__btn--ghost {
  color: #eae9fb;
}
.md-typeset .ap-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ap-display);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.62rem 1.1rem;
  border-radius: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 160ms var(--ap-ease), box-shadow 160ms var(--ap-ease),
    background 160ms var(--ap-ease), border-color 160ms var(--ap-ease);
}
.md-typeset .ap-hero__btn--primary {
  background: linear-gradient(100deg, #6360ea, #8a63f0);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(70, 66, 190, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.md-typeset .ap-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(70, 66, 190, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.md-typeset .ap-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e9e8fb;
}
.md-typeset .ap-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* The line that lands the pun */
.md-typeset .ap-hero__note {
  font-family: var(--ap-mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: #8f8dc0;
  margin: 2rem 0 0;
  max-width: 62ch;
  text-wrap: pretty;
  animation: ap-rise 700ms var(--ap-ease) 0.48s both;
}
.md-typeset .ap-hero__note em {
  color: #b3b0e8;
  font-style: italic;
}

/* Embedded walkthrough video — framed like a plate in the cloth */
.md-typeset figure.ap-video {
  margin: 2rem 0 2.4rem;
  width: 100%;
}
.md-typeset figure.ap-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #000;
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px color-mix(in srgb, rgb(var(--ap-shadow)) 12%, transparent);
}
.md-typeset figure.ap-video figcaption {
  font-family: var(--ap-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ap-muted);
  margin-top: 0.7rem;
  text-align: center;
}

/* Eyebrow labels reusable in body (e.g. above card sections) */
.md-typeset .ap-eyebrow {
  font-family: var(--ap-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ap-muted);
  margin: 2.6em 0 0.2em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Diamond tick — a single cell of the lattice */
.md-typeset .ap-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ap-indigo);
  transform: rotate(45deg);
  border-radius: 1px;
  flex: none;
}
.md-typeset .ap-eyebrow + h2 {
  border-top: 0;
  margin-top: 0.1em;
  padding-top: 0;
}
.md-typeset .ap-eyebrow + h2::before {
  display: none;
}

/* ============================================================
   9 · Footer & back-to-top — the selvage of the cloth
   ============================================================ */

.md-footer-meta {
  background: var(--ap-surface-2);
  color: var(--md-default-fg-color);
  position: relative;
  overflow: hidden;
}
.md-footer-meta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ap-weave);
  background-size: 56px 97px;
  opacity: var(--ap-weave-opacity);
  mask-image: linear-gradient(90deg, #000, transparent 55%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%);
  pointer-events: none;
}
.md-footer {
  background: var(--ap-surface);
}
.md-footer__inner:not([hidden]) {
  border-top: 1px solid var(--ap-border);
  padding: 1.1rem 0.6rem;
  gap: 0.8rem;
}
/* Prev / next: quiet cards that light up with dye on hover */
.md-footer__link {
  color: var(--md-default-fg-color);
  border: 1px solid var(--ap-border);
  border-radius: 14px;
  padding: 0.5rem 0.9rem;
  margin-top: 0;
  margin-bottom: 0;
  transition: border-color 160ms var(--ap-ease), box-shadow 160ms var(--ap-ease),
    transform 160ms var(--ap-ease);
}
.md-footer__link:hover {
  color: var(--md-default-fg-color);
  border-color: color-mix(in srgb, var(--ap-indigo) 45%, var(--ap-border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ap-indigo) 12%, transparent);
  transform: translateY(-2px);
}
.md-footer__direction {
  font-family: var(--ap-mono);
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ap-muted);
  opacity: 1;
}
.md-footer__title {
  font-family: var(--ap-display);
  font-weight: 600;
  font-size: 0.85rem;
}

.md-top {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  color: var(--md-default-fg-color);
  box-shadow: 0 8px 24px color-mix(in srgb, rgb(var(--ap-shadow)) 14%, transparent);
}
.md-top:hover,
.md-top:focus {
  background: var(--ap-indigo);
  border-color: var(--ap-indigo);
  color: #ffffff;
}

/* ============================================================
   10 · Accessibility & motion
   ============================================================ */

.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.ap-hero__btn:focus-visible,
.md-typeset .grid.cards > :is(ul, ol) > li:focus-within {
  outline: 2px solid var(--ap-indigo-bright);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .ap-hero__aurora,
  .ap-hero::before,
  .ap-hero::after,
  .ap-hero__kanji,
  .ap-hero__eyebrow::before,
  .md-typeset .ap-hero__eyebrow,
  .md-typeset .ap-hero__title,
  .md-typeset .ap-hero__lede,
  .ap-hero__actions,
  .md-typeset .ap-hero__note,
  .md-content__inner {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   11 · Contribute modal — the invitation to the vat
   ============================================================ */

/* ---- Header trigger: a small obi-band pill ---- */
.ap-contribute-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  flex: none;
  margin-left: 0.5rem;
  padding: 0.36rem 0.85rem;
  font-family: var(--ap-display);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--ap-indigo), var(--ap-violet));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(70, 66, 190, 0.4);
  transition: transform 180ms var(--ap-ease), box-shadow 180ms var(--ap-ease);
}
.ap-contribute-trigger::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ap-cyan);
  transform: rotate(45deg);
  border-radius: 1px;
  flex: none;
}
.ap-contribute-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(70, 66, 190, 0.55);
}
.ap-contribute-trigger:focus-visible {
  outline: 2px solid var(--ap-cyan);
  outline-offset: 2px;
}
@media screen and (max-width: 44em) {
  .ap-contribute-trigger {
    padding: 0.3rem 0.6rem;
    font-size: 0.6rem;
  }
}

/* ---- Hero variant: kamenozoki edge on the dark hero ----
   A <button> among <a> siblings. It needs no font reset: .ap-hero__btn already
   sets family, size and weight, and a `font: inherit` shorthand here would
   clobber all three. Only line-height has to be pulled back from the UA. */
.md-typeset .ap-hero__btn--contribute {
  line-height: inherit;
  background: rgba(79, 216, 232, 0.08);
  border-color: rgba(79, 216, 232, 0.42);
  color: #d3f6fb;
  cursor: pointer;
}
.md-typeset .ap-hero__btn--contribute:hover {
  background: rgba(79, 216, 232, 0.16);
  border-color: rgba(79, 216, 232, 0.7);
  transform: translateY(-2px);
}

/* ---- The dialog ---- */
.ap-modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  background: var(--ap-surface);
  color: var(--md-default-fg-color);
  box-shadow: 0 30px 80px color-mix(in srgb, rgb(var(--ap-shadow)) 32%, transparent);
  /* auto, not hidden: still clips the panel's gradient rule to the rounded
     corners, but a form taller than the viewport stays reachable. */
  overflow: auto;
  overscroll-behavior: contain;
}
.ap-modal::backdrop {
  background: rgba(10, 10, 21, 0.55);
  backdrop-filter: blur(3px);
}
/* An overflowing dialog can become a focusable scroll container in Chrome, so
   the dialog itself may take keyboard focus. Give it the same ring as every
   other control rather than letting it fall back to the UA default. */
.ap-modal:focus-visible {
  outline: 2px solid var(--ap-indigo-bright);
  outline-offset: 2px;
}
.ap-modal[open] {
  animation: ap-modal-in 260ms var(--ap-ease) both;
}
@keyframes ap-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ap-modal__panel {
  position: relative;
  padding: 2rem 2rem 1.5rem;
}
/* A thread of the weave along the top edge, as on the cards */
.ap-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--ap-indigo), var(--ap-violet), var(--ap-cyan));
}

.ap-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ap-muted);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms var(--ap-ease), color 160ms var(--ap-ease);
}
.ap-modal__close:hover {
  background: var(--ap-surface-2);
  color: var(--md-default-fg-color);
}
.ap-modal__close:focus-visible {
  outline: 2px solid var(--ap-indigo-bright);
  outline-offset: 2px;
}

.ap-modal__eyebrow {
  font-family: var(--ap-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ap-indigo);
  margin: 0 0 0.5rem;
}
/* --ap-indigo only reaches 3.46:1 on the dark surface, and at 13px/600 this is
   not large text. The brighter tint is what section 3 already uses for link
   text in slate for the same reason; here it measures 5.24:1. */
[data-md-color-scheme="slate"] .ap-modal__eyebrow {
  color: var(--ap-indigo-bright);
}
.ap-modal__title {
  font-family: var(--ap-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.ap-modal__lede {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ap-muted);
  margin: 0 0 1.4rem;
  text-wrap: pretty;
}

.ap-modal__label {
  display: block;
  font-family: var(--ap-display);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.ap-modal__hint {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--ap-muted);
  margin: 0 0 0.55rem;
}

.ap-modal__form textarea,
.ap-modal__form input[type="email"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--md-default-fg-color);
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-border-strong);
  border-radius: 10px;
  transition: border-color 160ms var(--ap-ease), box-shadow 160ms var(--ap-ease);
}
.ap-modal__form textarea {
  min-height: 6.5rem;
  resize: vertical;
  margin-bottom: 1.2rem;
}
.ap-modal__form input[type="email"] {
  margin-bottom: 1.2rem;
}
.ap-modal__form textarea::placeholder,
.ap-modal__form input[type="email"]::placeholder {
  color: var(--ap-muted);
}
.ap-modal__form textarea:focus,
.ap-modal__form input[type="email"]:focus {
  outline: none;
  border-color: var(--ap-indigo);
  box-shadow: 0 0 0 3px rgba(91, 87, 224, 0.18);
}

/* Honeypot — off-screen and unpaintable, so a human never sees or reaches it,
   but it stays in the DOM as a plain text input for a bot to fill in. Kept
   off-screen rather than display:none, which the better bots know to skip.
   Non-focusable and unannounced comes from the markup (tabindex="-1",
   aria-hidden="true"); this rule is the visual half of that contract. */
.ap-modal__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ap-modal__error {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: baseline;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.24);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  margin: 0 0 1rem;
}
/* An author `display` beats the UA's [hidden] rule whatever the specificity,
   so the box has to opt back out by hand or it never hides. */
.ap-modal__error[hidden] {
  display: none;
}
[data-md-color-scheme="slate"] .ap-modal__error {
  color: #ff9b8f;
  background: rgba(255, 107, 90, 0.1);
  border-color: rgba(255, 107, 90, 0.28);
}
.ap-modal__fallback {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ap-modal__fallback:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
  border-radius: 4px;
}

.ap-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.ap-modal__btn {
  padding: 0.55rem 1.1rem;
  font-family: var(--ap-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 160ms var(--ap-ease), box-shadow 160ms var(--ap-ease),
    background 160ms var(--ap-ease);
}
.ap-modal__btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.ap-modal__btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.ap-modal__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ap-indigo), var(--ap-violet));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 18px rgba(70, 66, 190, 0.42);
}
.ap-modal__btn--primary:hover:not(:disabled) {
  box-shadow: 0 12px 26px rgba(70, 66, 190, 0.55);
}
.ap-modal__btn:focus-visible {
  outline: 2px solid var(--ap-indigo-bright);
  outline-offset: 2px;
}

/* ---- Thank-you panel ---- */
.ap-modal__panel--thanks {
  text-align: center;
}
.ap-modal__panel--thanks .ap-modal__actions {
  justify-content: center;
}
.ap-modal__check {
  width: 3rem;
  height: 3rem;
  margin: 0.4rem auto 1rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--ap-cyan);
  background: rgba(79, 216, 232, 0.12);
  border: 1px solid rgba(79, 216, 232, 0.35);
  border-radius: 50%;
}
.ap-modal__echo {
  text-align: left;
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.3rem;
}
.ap-modal__echo .ap-modal__eyebrow {
  color: var(--ap-muted);
  margin-bottom: 0.25rem;
}
.ap-modal__echo-value {
  font-family: var(--ap-mono);
  font-size: 0.74rem;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .ap-modal[open] {
    animation: none;
  }
}