@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --animate-shimmer: shimmer-sweep var(--shimmer-duration, 1000ms) linear
    infinite both;
  @keyframes shimmer-sweep {
    from {
      background-position: 150% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
}

.doc-page-v2 {
  background:
    linear-gradient(90deg, rgba(20, 28, 40, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 28, 40, 0.04) 1px, transparent 1px),
    #f4f5f2;
  background-size: 28px 28px;
}

.doc-hero-v2 {
  min-height: 680px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.12);
  background:
    radial-gradient(circle at 72% 18%, rgba(37, 99, 235, 0.16), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f4f5f2 100%);
}

.doc-hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
  gap: 42px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 28px 88px;
}

.doc-hero-v2-copy {
  align-self: center;
}

.doc-hero-v2-copy h1 {
  margin: 0;
  font-size: clamp(44px, 5.3vw, 76px);
  font-weight: 850;
  line-height: 1.03;
  letter-spacing: 0;
}

.doc-hero-v2-copy p:not(.doc-kicker) {
  max-width: 760px;
  margin: 24px 0 0;
  color: #4f5663;
  font-size: 18px;
  line-height: 1.78;
}

.doc-command-wall {
  align-self: stretch;
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 12px;
  background: #111827;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.18);
  color: #e5e7eb;
  overflow: hidden;
}

.doc-command-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 20px;
  color: #bfdbfe;
  font-weight: 800;
}

.doc-command-head svg {
  width: 18px;
  height: 18px;
}

.doc-command-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  min-height: 82px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.doc-command-row:last-child {
  border-bottom: 0;
}

.doc-command-row span {
  display: grid;
  place-items: center;
  color: #60a5fa;
  font-family: var(--font-mono);
  font-size: 13px;
}

.doc-command-row strong {
  display: flex;
  align-items: center;
  padding-right: 20px;
  font-size: 16px;
}

.doc-objectives {
  padding-top: 54px;
}

.doc-objective-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.doc-objective {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  padding: 18px;
}

.doc-objective > span {
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.doc-objective h3 {
  margin: 0;
  font-size: 17px;
}

.doc-objective p {
  margin: 0;
  color: #5f6571;
  line-height: 1.65;
}

.doc-objective strong {
  color: #16181d;
  line-height: 1.55;
}

.doc-compare-lab {
  max-width: none;
  border-top: 1px solid rgba(22, 24, 29, 0.1);
  border-bottom: 1px solid rgba(22, 24, 29, 0.1);
  background: #eef3f7;
}

.doc-compare-lab > * {
  max-width: 1184px;
  margin-left: auto;
  margin-right: auto;
}

.doc-compare-layout,
.doc-role-grid,
.doc-memory-map,
.doc-skill-workbench-grid {
  display: grid;
  gap: 14px;
}

.doc-compare-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  margin-bottom: 14px;
}

.doc-product-switcher {
  display: grid;
  gap: 10px;
}

.doc-product-switcher button,
.doc-role-tabs button,
.doc-memory-rail button,
.doc-file-tree-v2 button {
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #303642;
  cursor: pointer;
  text-align: left;
}

.doc-product-switcher button {
  display: grid;
  gap: 6px;
  padding: 15px;
}

.doc-product-switcher button.is-selected,
.doc-role-tabs button.is-selected,
.doc-memory-rail button.is-selected,
.doc-file-tree-v2 button.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
}

.doc-product-switcher span {
  font-weight: 850;
}

.doc-product-switcher small {
  color: #667080;
  line-height: 1.45;
}

.doc-product-card,
.doc-role-panel,
.doc-proof-panel,
.doc-memory-detail-v2,
.doc-memory-implementation,
.doc-skill-part,
.doc-skill-steps,
.doc-task-card {
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.doc-product-card {
  padding: 24px;
}

.doc-product-card h3 {
  margin: 0;
  font-size: 34px;
}

.doc-product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.doc-product-facts div {
  border-left: 2px solid #2563eb;
  padding-left: 14px;
}

.doc-product-facts span,
.doc-task-meta span,
.doc-skill-part-grid span,
.doc-memory-grid-v2 span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 850;
}

.doc-product-facts p {
  margin: 7px 0 0;
  color: #303642;
  line-height: 1.65;
}

.doc-matrix {
  overflow: hidden;
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 10px;
  background: #ffffff;
}

.doc-matrix-head,
.doc-matrix-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
}

.doc-matrix-head {
  background: #16181d;
  color: #ffffff;
  font-size: 13px;
}

.doc-matrix-head > *,
.doc-matrix-row > * {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-right: 1px solid rgba(22, 24, 29, 0.1);
  padding: 0 14px;
}

.doc-matrix-head > * {
  border-color: rgba(255, 255, 255, 0.12);
}

.doc-matrix-row {
  border-top: 1px solid rgba(22, 24, 29, 0.1);
}

.doc-matrix-row > span {
  color: #303642;
  font-weight: 750;
}

.doc-matrix-row > div {
  justify-content: center;
}

.doc-matrix-row > div.is-highlighted {
  background: #eff6ff;
}

.doc-status {
  width: 18px;
  height: 18px;
}

.doc-status.yes {
  color: #16a34a;
}

.doc-status.partial {
  color: #d97706;
}

.doc-status.no {
  color: #9ca3af;
}

.doc-role-grid {
  grid-template-columns: 240px minmax(0, 1fr) 300px;
}

.doc-role-tabs {
  display: grid;
  gap: 10px;
}

.doc-role-tabs button {
  min-height: 58px;
  padding: 0 16px;
  font-weight: 850;
}

.doc-role-panel,
.doc-proof-panel {
  padding: 24px;
}

.doc-role-panel h3 {
  margin: 0;
  font-size: 30px;
}

.doc-role-question {
  margin-top: 16px;
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  padding: 12px 14px;
  color: #1e40af;
  font-weight: 800;
}

.doc-role-panel p {
  margin: 18px 0 0;
  color: #4f5663;
  line-height: 1.72;
}

.doc-flow-chips,
.doc-source-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doc-flow-chips {
  margin-top: 22px;
}

.doc-flow-chips span {
  border-radius: 999px;
  background: #16181d;
  padding: 8px 11px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 750;
}

.doc-proof-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.09);
  color: #303642;
}

.doc-proof-item:last-child {
  border-bottom: 0;
}

.doc-proof-item svg {
  width: 16px;
  height: 16px;
  color: #16a34a;
}

.doc-task-map {
  max-width: none;
  background: #16181d;
  color: #ffffff;
}

.doc-task-map > * {
  max-width: 1184px;
  margin-left: auto;
  margin-right: auto;
}

.doc-task-map .doc-section-heading p:not(.doc-kicker) {
  color: #c7ceda;
}

.doc-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.doc-task-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  padding: 22px;
}

.doc-task-title {
  display: flex;
  gap: 10px;
  align-items: center;
}

.doc-task-title svg {
  width: 18px;
  height: 18px;
  color: #60a5fa;
}

.doc-task-title h3 {
  margin: 0;
  font-size: 20px;
}

.doc-task-meta {
  margin-top: 18px;
}

.doc-task-meta p,
.doc-task-meta strong {
  display: block;
  margin: 6px 0 0;
  color: #dbe4f0;
  line-height: 1.65;
}

.doc-memory-map {
  grid-template-columns: 300px minmax(0, 1fr);
}

.doc-memory-rail {
  display: grid;
  gap: 10px;
}

.doc-memory-rail button {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 0 14px;
}

.doc-memory-rail button > span {
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 850;
}

.doc-memory-rail strong {
  line-height: 1.45;
}

.doc-memory-detail-v2 {
  padding: 24px;
}

.doc-memory-source a {
  color: #2563eb;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.doc-memory-detail-v2 h3 {
  margin: 12px 0 0;
  font-size: 32px;
}

.doc-memory-grid-v2,
.doc-skill-part-grid {
  display: grid;
  gap: 12px;
}

.doc-memory-grid-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
}

.doc-memory-grid-v2 div,
.doc-skill-part-grid div {
  border-left: 2px solid #2563eb;
  background: rgba(239, 246, 255, 0.65);
  padding: 12px 14px;
}

.doc-memory-grid-v2 p,
.doc-skill-part-grid p {
  margin: 7px 0 0;
  color: #303642;
  line-height: 1.65;
}

.doc-memory-implementation {
  margin-top: 16px;
  padding: 24px;
}

.doc-section-heading.compact {
  margin-bottom: 20px;
}

.doc-memory-pipeline-v2 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.doc-memory-step {
  border: 1px solid rgba(22, 24, 29, 0.1);
  border-radius: 9px;
  background: #ffffff;
  padding: 14px;
}

.doc-memory-step > span {
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 850;
}

.doc-memory-step strong {
  display: block;
  margin-top: 10px;
}

.doc-memory-step p {
  margin: 8px 0 12px;
  color: #5f6571;
  font-size: 13px;
  line-height: 1.55;
}

.doc-memory-step code,
.doc-skill-part code,
.doc-runtime-node code {
  border-radius: 6px;
  background: #eff6ff;
  padding: 5px 7px;
  color: #1d4ed8;
  font-family: var(--font-mono);
  font-size: 11px;
}

.doc-skill-workbench-grid {
  grid-template-columns: 260px minmax(0, 1fr) 280px;
}

.doc-file-tree-v2 {
  display: grid;
  gap: 9px;
}

.doc-file-tree-v2 button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  font-weight: 800;
}

.doc-file-tree-v2 svg {
  width: 16px;
  height: 16px;
  color: #2563eb;
}

.doc-skill-part,
.doc-skill-steps {
  padding: 22px;
}

.doc-skill-part h3 {
  margin: 18px 0;
  font-size: 30px;
}

.doc-skill-part-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doc-skill-steps h3 {
  margin: 0 0 16px;
}

.doc-skill-steps div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.09);
}

.doc-skill-steps div:last-child {
  border-bottom: 0;
}

.doc-skill-steps span {
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 850;
}

.doc-runtime-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.doc-runtime-node {
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
}

.doc-runtime-node > span {
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 850;
}

.doc-runtime-node strong {
  display: block;
  margin-top: 10px;
}

.doc-runtime-node p {
  margin: 8px 0 12px;
  color: #5f6571;
  font-size: 13px;
  line-height: 1.55;
}

.doc-source-links {
  border-top: 1px solid rgba(22, 24, 29, 0.1);
}

.doc-source-grid a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(22, 24, 29, 0.12);
  border-radius: 999px;
  background: #ffffff;
  padding: 9px 12px;
  color: #303642;
  font-weight: 800;
  text-decoration: none;
}

.doc-source-grid svg {
  width: 16px;
  height: 16px;
  color: #2563eb;
}

@media (max-width: 1120px) {
  .doc-objective-grid,
  .doc-memory-pipeline-v2,
  .doc-runtime-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-task-grid,
  .doc-skill-workbench-grid,
  .doc-role-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .doc-hero-v2-grid,
  .doc-compare-layout,
  .doc-memory-map,
  .doc-product-facts,
  .doc-memory-grid-v2,
  .doc-skill-part-grid {
    grid-template-columns: 1fr;
  }

  .doc-matrix-head,
  .doc-matrix-row {
    grid-template-columns: 1.1fr repeat(4, 44px);
  }

  .doc-matrix-head strong {
    writing-mode: vertical-rl;
    justify-content: center;
    padding: 10px 0;
  }
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  :root {
    color-scheme: light;
  }

  :root.dark {
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.doc-page {
    min-height: 100vh;
    background:
      linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
      linear-gradient(0deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
      #f7f7f4;
    background-size: 32px 32px;
    color: #16181d;
  }

  .doc-hero {
    border-bottom: 1px solid rgba(22, 24, 29, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f4 100%);
  }

  .doc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 28px;
  }

  .doc-brand,
  .doc-nav-links,
  .doc-hero-actions,
  .doc-primary-link,
  .doc-secondary-link,
  .doc-flow-item,
  .doc-output-strip,
  .doc-case-title,
  .doc-reference,
  .doc-footer {
    display: flex;
    align-items: center;
  }

  .doc-brand {
    gap: 10px;
    color: #16181d;
    font-weight: 700;
    text-decoration: none;
  }

  .doc-brand-mark {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(22, 24, 29, 0.14);
    border-radius: 8px;
    background: #16181d;
    color: #ffffff;
    font-size: 12px;
  }

  .doc-nav-links {
    gap: 18px;
    font-size: 13px;
  }

  .doc-nav-links a,
  .doc-reference,
  .doc-primary-link,
  .doc-secondary-link {
    color: inherit;
    text-decoration: none;
  }

  .doc-nav-links a {
    color: #5f6571;
  }

  .doc-nav-links a:hover {
    color: #16181d;
  }

  .doc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 48px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 70px 28px 76px;
  }

  .doc-hero-copy {
    align-self: center;
  }

  .doc-kicker {
    margin: 0 0 12px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
  }

  .doc-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(42px, 5.2vw, 76px);
    line-height: 1.02;
    font-weight: 800;
  }

  .doc-hero-lead {
    max-width: 680px;
    margin: 24px 0 0;
    color: #4f5663;
    font-size: 18px;
    line-height: 1.7;
  }

  .doc-hero-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
  }

  .doc-primary-link,
  .doc-secondary-link {
    justify-content: center;
    min-height: 42px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
  }

  .doc-primary-link {
    gap: 8px;
    background: #16181d;
    color: #ffffff;
  }

  .doc-primary-link svg,
  .doc-secondary-link svg,
  .doc-flow-item svg,
  .doc-case-title svg,
  .doc-stack-item svg,
  .doc-skill-notes svg,
  .doc-reference svg,
  .doc-footer svg {
    width: 17px;
    height: 17px;
  }

  .doc-secondary-link {
    border: 1px solid rgba(22, 24, 29, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: #252932;
  }

  .doc-terminal-visual {
    align-self: stretch;
    border: 1px solid rgba(22, 24, 29, 0.14);
    border-radius: 12px;
    background: #111827;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
    color: #e5e7eb;
    overflow: hidden;
  }

  .doc-terminal-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 15px 18px;
    color: #a7b0bf;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .doc-flow-stack {
    display: grid;
    gap: 12px;
    padding: 22px;
  }

  .doc-flow-item {
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 16px;
    font-size: 14px;
  }

  .doc-flow-item span {
    flex: 1;
  }

  .doc-flow-item.is-active {
    border-color: rgba(96, 165, 250, 0.72);
    background: rgba(37, 99, 235, 0.22);
  }

  .doc-output-strip {
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 22px 20px;
  }

  .doc-output-strip span {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    padding: 6px 10px;
    color: #d1d5db;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .doc-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 76px 28px;
  }

  .doc-section-heading {
    max-width: 780px;
    margin-bottom: 28px;
  }

  .doc-section-heading h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
  }

  .doc-section-heading p:not(.doc-kicker) {
    margin: 16px 0 0;
    color: #5f6571;
    font-size: 16px;
    line-height: 1.75;
  }

  .doc-pain-grid,
  .doc-stack-grid,
  .doc-case-grid,
  .doc-reference-grid,
  .doc-memory-layout,
  .doc-deep-layout {
    display: grid;
    gap: 14px;
  }

  .doc-pain-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .doc-pain-item,
  .doc-stack-item,
  .doc-case,
  .doc-product-detail,
  .doc-file-tree,
  .doc-skill-notes > div,
  .doc-reference {
    border: 1px solid rgba(22, 24, 29, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
  }

  .doc-pain-item {
    padding: 20px;
  }

  .doc-pain-item span {
    color: #2563eb;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }

  .doc-pain-item p {
    margin: 16px 0 0;
    color: #2d3340;
    line-height: 1.65;
  }

  .doc-product-map {
    max-width: none;
    border-top: 1px solid rgba(22, 24, 29, 0.1);
    border-bottom: 1px solid rgba(22, 24, 29, 0.1);
    background: #eef3f7;
  }

  .doc-memory-lab {
    max-width: none;
    background:
      radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.1), transparent 28%),
      radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.1), transparent 30%),
      #ffffff;
  }

  .doc-memory-lab > * {
    max-width: 1184px;
    margin-left: auto;
    margin-right: auto;
  }

  .doc-memory-layout {
    grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.45fr);
  }

  .doc-memory-tabs,
  .doc-deep-tabs {
    display: grid;
    gap: 10px;
  }

  .doc-memory-tabs button,
  .doc-deep-tabs button {
    border: 1px solid rgba(22, 24, 29, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: #303642;
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  }

  .doc-memory-tabs button {
    display: grid;
    gap: 5px;
    padding: 16px;
  }

  .doc-memory-tabs button span {
    font-weight: 800;
  }

  .doc-memory-tabs button small {
    color: #717989;
    line-height: 1.5;
  }

  .doc-memory-tabs button:hover,
  .doc-deep-tabs button:hover {
    transform: translateY(-1px);
  }

  .doc-memory-tabs button.is-selected,
  .doc-deep-tabs button.is-selected {
    border-color: #2563eb;
    background: #eff6ff;
  }

  .doc-memory-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
    gap: 14px;
  }

  .doc-memory-card,
  .doc-memory-pipeline,
  .doc-deep-panel,
  .doc-trace-item {
    border: 1px solid rgba(22, 24, 29, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
  }

  .doc-memory-card {
    padding: 24px;
  }

  .doc-memory-card h3 {
    margin: 0;
    font-size: 28px;
  }

  .doc-memory-card dl {
    display: grid;
    gap: 16px;
    margin: 22px 0 0;
  }

  .doc-memory-card dt {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
  }

  .doc-memory-card dd {
    margin: 6px 0 0;
    color: #303642;
    line-height: 1.7;
  }

  .doc-memory-pipeline {
    display: grid;
    gap: 0;
    overflow: hidden;
  }

  .doc-memory-pipeline > div {
    display: grid;
    grid-template-columns: 34px 132px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 70px;
    border-bottom: 1px solid rgba(22, 24, 29, 0.1);
    padding: 12px 16px;
  }

  .doc-memory-pipeline > div:last-child {
    border-bottom: 0;
  }

  .doc-memory-pipeline svg {
    width: 18px;
    height: 18px;
    color: #2563eb;
  }

  .doc-memory-pipeline strong {
    color: #1f2937;
  }

  .doc-memory-pipeline span {
    color: #5f6571;
    line-height: 1.55;
  }

  .doc-code-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .doc-code-strip span,
  .doc-code-callout,
  .doc-trace-item code {
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 7px;
    background: #eff6ff;
    color: #1d4ed8;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .doc-code-strip span {
    padding: 8px 10px;
  }

  .doc-deep-dive {
    border-bottom: 1px solid rgba(22, 24, 29, 0.1);
  }

  .doc-deep-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .doc-deep-tabs button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 16px;
    font-weight: 800;
  }

  .doc-deep-tabs svg {
    width: 17px;
    height: 17px;
    color: #2563eb;
  }

  .doc-deep-panel {
    padding: 28px;
  }

  .doc-deep-title {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .doc-deep-title > svg {
    width: 30px;
    height: 30px;
    color: #2563eb;
  }

  .doc-deep-title h3 {
    margin: 0;
    font-size: 30px;
  }

  .doc-deep-title p {
    margin: 10px 0 0;
    color: #5f6571;
    line-height: 1.7;
  }

  .doc-deep-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
  }

  .doc-deep-panel li {
    border-left: 2px solid #2563eb;
    background: rgba(239, 246, 255, 0.7);
    padding: 12px 14px;
    color: #303642;
    line-height: 1.65;
  }

  .doc-code-callout {
    display: inline-flex;
    margin-top: 22px;
    padding: 9px 11px;
  }

  .doc-product-map > * {
    max-width: 1184px;
    margin-left: auto;
    margin-right: auto;
  }

  .doc-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 18px;
  }

  .doc-coordinate {
    position: relative;
    min-height: 520px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 12px;
    background:
      linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
      linear-gradient(0deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
      #ffffff;
    background-size: 72px 72px;
    overflow: hidden;
  }

  .doc-grid-lines {
    position: absolute;
    inset: 54px 54px 58px 70px;
    border-left: 2px solid #16181d;
    border-bottom: 2px solid #16181d;
  }

  .doc-grid-lines::before,
  .doc-grid-lines::after {
    position: absolute;
    color: #7a8290;
    font-size: 12px;
  }

  .doc-grid-lines::before {
    content: "低";
    left: -30px;
    bottom: -7px;
  }

  .doc-grid-lines::after {
    content: "高";
    right: -10px;
    bottom: -30px;
  }

  .doc-axis {
    position: absolute;
    z-index: 1;
    color: #303642;
    font-size: 13px;
    font-weight: 700;
  }

  .doc-axis-x {
    right: 50px;
    bottom: 22px;
  }

  .doc-axis-y {
    top: 62px;
    left: 20px;
    writing-mode: vertical-rl;
  }

  .doc-point {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, 50%);
    border: 1px solid rgba(22, 24, 29, 0.18);
    border-radius: 999px;
    background: #ffffff;
    padding: 8px 12px;
    color: #252932;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    cursor: pointer;
  }

  .doc-point.is-selected {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
  }

  .doc-product-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 520px;
    padding: 24px;
  }

  .doc-product-detail h3 {
    margin: 0;
    font-size: 30px;
  }

  .doc-product-detail p {
    margin: 14px 0 0;
    color: #5f6571;
    line-height: 1.75;
  }

  .doc-detail-row {
    display: grid;
    gap: 8px;
    border-top: 1px solid rgba(22, 24, 29, 0.12);
    padding-top: 18px;
  }

  .doc-detail-row span {
    color: #7a8290;
    font-size: 12px;
  }

  .doc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .doc-chip {
    border: 1px solid rgba(22, 24, 29, 0.12);
    border-radius: 999px;
    background: #f4f7fa;
    padding: 7px 10px;
    color: #303642;
    font-size: 12px;
  }

  .doc-stack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .doc-stack-item {
    padding: 22px;
  }

  .doc-stack-item svg,
  .doc-skill-notes svg,
  .doc-reference svg {
    color: #2563eb;
  }

  .doc-stack-item h3,
  .doc-skill-notes h3 {
    margin: 16px 0 0;
    font-size: 18px;
  }

  .doc-stack-item p,
  .doc-skill-notes p {
    margin: 10px 0 0;
    color: #5f6571;
    line-height: 1.65;
  }

  .doc-case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .doc-case {
    padding: 22px;
  }

  .doc-case-title {
    gap: 12px;
  }

  .doc-case-title h3 {
    margin: 0;
    font-size: 20px;
  }

  .doc-case-title p {
    margin: 5px 0 0;
    color: #667080;
    font-size: 13px;
  }

  .doc-step-line {
    display: grid;
    gap: 8px;
    margin-top: 22px;
  }

  .doc-step-line span {
    border-left: 2px solid #2563eb;
    padding: 8px 0 8px 12px;
    color: #303642;
    font-size: 13px;
  }

  .doc-output-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
  }

  .doc-output-list span {
    border-radius: 6px;
    background: #eff6ff;
    padding: 6px 9px;
    color: #1d4ed8;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .doc-skill-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 18px;
  }

  .doc-runtime-trace {
    max-width: none;
    background: #eef3f7;
  }

  .doc-runtime-trace > * {
    max-width: 1184px;
    margin-left: auto;
    margin-right: auto;
  }

  .doc-trace-list {
    display: grid;
    gap: 10px;
  }

  .doc-trace-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.56fr);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
  }

  .doc-trace-item strong {
    color: #16181d;
    font-size: 16px;
  }

  .doc-trace-item p {
    margin: 6px 0 0;
    color: #5f6571;
    line-height: 1.6;
  }

  .doc-trace-item code {
    padding: 9px 10px;
    white-space: normal;
  }

  .doc-file-tree {
    display: grid;
    gap: 10px;
    padding: 24px;
    color: #27303d;
    font-family: var(--font-mono);
    font-size: 13px;
  }

  .doc-file-tree div {
    font-weight: 800;
  }

  .doc-file-tree span {
    color: #4f5663;
  }

  .doc-file-tree strong {
    color: #2563eb;
    font-weight: 600;
  }

  .doc-skill-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .doc-skill-notes > div {
    padding: 22px;
  }

  .doc-comparison {
    max-width: none;
    background: #16181d;
    color: #ffffff;
  }

  .doc-comparison > * {
    max-width: 1184px;
    margin-left: auto;
    margin-right: auto;
  }

  .doc-comparison .doc-section-heading p:not(.doc-kicker) {
    color: #bec5d0;
  }

  .doc-table {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
  }

  .doc-table-head,
  .doc-table-row {
    display: grid;
    grid-template-columns: 0.55fr 1fr 1fr;
  }

  .doc-table-head span,
  .doc-table-row > * {
    padding: 18px;
  }

  .doc-table-head {
    background: rgba(255, 255, 255, 0.08);
    color: #dbe4f0;
    font-size: 13px;
    font-weight: 700;
  }

  .doc-table-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .doc-table-row strong {
    color: #ffffff;
  }

  .doc-table-row p {
    margin: 0;
    color: #c7ceda;
    line-height: 1.65;
  }

  .doc-arch-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .doc-arch-node {
    display: grid;
    min-height: 110px;
    place-items: center;
    border: 1px solid rgba(22, 24, 29, 0.12);
    border-radius: 10px;
    background: #ffffff;
    padding: 16px;
    text-align: center;
    font-weight: 700;
  }

  .doc-arch-node.is-agent {
    grid-column: span 2;
    background: #2563eb;
    color: #ffffff;
  }

  .doc-arch-node.is-agent svg {
    margin-bottom: 8px;
  }

  .doc-arch-node.is-user,
  .doc-arch-node.is-output {
    background: #fef3c7;
  }

  .doc-reference-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .doc-reference {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  .doc-reference span {
    font-weight: 800;
  }

  .doc-reference p {
    margin: 0;
    color: #5f6571;
    line-height: 1.6;
  }

  .doc-footer {
    justify-content: center;
    gap: 10px;
    border-top: 1px solid rgba(22, 24, 29, 0.1);
    padding: 28px;
    color: #5f6571;
    font-size: 14px;
  }

  @media (max-width: 980px) {
    .doc-nav {
      align-items: flex-start;
      flex-direction: column;
    }

    .doc-hero-grid,
    .doc-map-layout,
    .doc-skill-layout,
    .doc-memory-layout,
    .doc-memory-detail,
    .doc-deep-layout {
      grid-template-columns: 1fr;
    }

    .doc-pain-grid,
    .doc-stack-grid,
    .doc-case-grid,
    .doc-skill-notes,
    .doc-reference-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .doc-coordinate,
    .doc-product-detail {
      min-height: 440px;
    }

    .doc-deep-panel ul,
    .doc-trace-item {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 680px) {
    .doc-nav-links {
      display: none;
    }

    .doc-hero-grid,
    .doc-section {
      padding-left: 18px;
      padding-right: 18px;
    }

    .doc-pain-grid,
    .doc-stack-grid,
    .doc-case-grid,
    .doc-skill-notes,
    .doc-reference-grid,
    .doc-arch-grid {
      grid-template-columns: 1fr;
    }

    .doc-table-head {
      display: none;
    }

    .doc-table-row {
      grid-template-columns: 1fr;
    }

    .doc-table-row > * {
      padding: 14px 16px;
    }

    .doc-coordinate {
      min-height: 380px;
    }

    .doc-memory-pipeline > div {
      grid-template-columns: 28px 1fr;
    }

    .doc-memory-pipeline span {
      grid-column: 2;
    }

    .doc-point {
      max-width: 112px;
      padding: 7px 9px;
      font-size: 11px;
      white-space: normal;
    }
  }