/* Original BMAD+ editorial system. CSS custom properties are the token source. */
:root {
  color-scheme: light;
  --paper: oklch(96.1% .012 88);
  --paper-raised: oklch(98.4% .008 88);
  --ink: oklch(24% .015 75);
  --ink-muted: oklch(43% .017 75);
  --line-soft: oklch(82% .018 80);
  --line-strong: oklch(56% .02 75);
  --red: oklch(52% .17 31);
  --red-dark: oklch(43% .145 31);
  --red-pale: oklch(93% .026 45);
  --on-ink: oklch(96.1% .012 88);
  --on-ink-muted: oklch(81% .018 80);
  --background: var(--paper);
  --surface: var(--paper-raised);
  --foreground: var(--ink);
  --text-muted: var(--ink-muted);
  --border: var(--line-soft);
  --control-border: var(--line-strong);
  --primary: var(--red);
  --primary-hover: var(--red-dark);
  --accent-surface: var(--red-pale);
  --inverse: var(--ink);
  --on-inverse: var(--on-ink);
  --muted-inverse: var(--on-ink-muted);
  --ring: var(--red);
  --font-text: Arial, Helvetica, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius: .25rem;
  --duration: 140ms;
  --ease: ease-out;
  --page-width: 80rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-text); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { color: var(--foreground); background: var(--accent-surface); }
button, input, select { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button[hidden] { display: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--ring); border-radius: var(--radius); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
h2 { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.04em; }
h2 > span { display: block; }
h3, h4 { line-height: 1.35; }
p { max-width: 66ch; }
section[id] { scroll-margin-block-start: var(--space-8); }
code { font-family: var(--font-text); font-weight: 600; overflow-wrap: anywhere; }
.wrap { width: min(var(--page-width), calc(100% - 3rem)); margin-inline: auto; }
.section { padding-block: var(--space-20); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -8rem; z-index: 20; padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--foreground); }
.skip-link:focus { inset-block-start: var(--space-4); }
.site-header { display: flex; gap: var(--space-8); align-items: center; min-height: 5rem; border-bottom: 1px solid var(--border); }
.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; font-size: var(--text-2xl); font-weight: 800; line-height: 1; letter-spacing: -.08em; min-height: 44px; padding-block: var(--space-2); }
.wordmark span { color: var(--primary); font-weight: 400; margin-inline-start: var(--space-1); font-size: var(--text-3xl); line-height: .6; }
.primary-nav { display: none; gap: var(--space-8); margin-inline-start: auto; }
.primary-nav a, .header-cta { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-3); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.primary-nav a:hover, .header-cta:hover, .footer-bottom a:hover { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
.language-menu { position: relative; }
.language-menu > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); min-height: 44px; cursor: pointer; list-style: none; font-size: var(--text-sm); }
summary::-webkit-details-marker { display: none; }
.language-menu nav { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); z-index: 5; min-width: 11rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); }
.language-menu nav a { display: block; padding: var(--space-3) var(--space-4); text-decoration: none; }
.language-menu nav a:hover { background: var(--accent-surface); }
.language-menu a[aria-current] { text-decoration: underline; font-weight: 700; }
.hero { display: grid; gap: var(--space-12); padding-block: var(--space-12) var(--space-16); align-items: center; }
.eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.edition-mark { display: inline-grid; place-items: center; color: var(--primary); font-size: var(--text-xl); line-height: 1; }
h1 { font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: 1.02; letter-spacing: -.065em; padding-block-end: var(--space-2); }
h1 > span { display: block; }
h1 > span:last-child { font-style: italic; color: var(--primary); letter-spacing: -.065em; }
.hero-lead { margin-top: var(--space-6); max-width: 45ch; font-size: var(--text-lg); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-4) var(--space-6); min-height: 56px; border: 1px solid var(--primary); border-radius: var(--radius); color: var(--surface); background: var(--primary); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: background-color var(--duration) var(--ease); }
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button > span { font-size: var(--text-lg); line-height: 1; }
.text-link { display: inline-flex; gap: var(--space-4); align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; }
.hero-note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.workflow { border: 1px solid var(--border); padding: var(--space-6); background: var(--surface); }
.workflow-heading { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.workflow-sign { color: var(--primary); font-size: var(--text-3xl); line-height: 1; }
.workflow-heading h2 { max-width: 17ch; font-family: var(--font-text); font-size: var(--text-lg); line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
.workflow ol { list-style: none; margin: 0; padding: 0; }
.workflow li { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--border); }
.step-number { color: var(--text-muted); font-size: var(--text-xs); }
.workflow-role { color: var(--primary); font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-1); }
.workflow h3 { font-size: var(--text-lg); font-weight: 500; }
.workflow-footer { display: flex; gap: var(--space-4); padding-top: var(--space-6); }
.workflow-footer > span { color: var(--primary); font-size: var(--text-xl); }
.workflow-footer p { font-size: var(--text-sm); font-weight: 600; }
.workflow-footer div > span { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.compatibility { padding-block: var(--space-6); display: grid; gap: var(--space-4); border-block: 1px solid var(--border); }
.compatibility p { color: var(--text-muted); font-size: var(--text-xs); }
.compatibility ul { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); font-weight: 600; }
.section-intro { display: grid; gap: var(--space-8); align-items: start; }
.section-intro p { color: var(--text-muted); }
.section-intro .annotation { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--foreground); }
.roles-layout { display: grid; gap: var(--space-8); margin-top: var(--space-16); }
.roles-label h3 { font-size: var(--text-lg); max-width: 20ch; }
.roles-label p { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-3); max-width: 32ch; }
.editorial-plus { display: none; color: var(--primary); font-family: var(--font-display); font-size: 10rem; font-weight: 400; line-height: 1; }
.role { border-top: 1px solid var(--border); }
.role:last-child { border-bottom: 1px solid var(--border); }
.role summary { display: grid; grid-template-columns: 1.5rem 1fr 1rem; gap: var(--space-3); align-items: baseline; padding-block: var(--space-6); list-style: none; cursor: pointer; }
.role-index { font-size: var(--text-xs); color: var(--text-muted); }
.role-name { font-size: var(--text-xl); font-weight: 500; letter-spacing: -.03em; }
.role-job { grid-column: 2; font-size: var(--text-sm); color: var(--text-muted); }
.role summary .disclosure-mark { grid-column: 3; grid-row: 1; }
.disclosure-mark { display: inline-block; position: relative; width: 1rem; height: 1rem; flex: 0 0 1rem; }
.disclosure-mark::before, .disclosure-mark::after { content: ''; position: absolute; inset-block-start: .5rem; inset-inline-start: 0; width: 1rem; height: 1px; background: currentColor; }
.disclosure-mark::after { transform: rotate(90deg); }
details[open] > summary .disclosure-mark::after { transform: none; }
.role-body { padding: 0 0 var(--space-8) var(--space-10); }
.role-body h4 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.role-body > p { color: var(--text-muted); font-size: var(--text-sm); }
.prompt { margin-top: var(--space-6); border-inline-start: 2px solid var(--primary); padding-inline-start: var(--space-4); }
.prompt p { font-size: var(--text-xs); color: var(--text-muted); }
.prompt blockquote { margin: var(--space-2) 0 0; font-size: var(--text-sm); max-width: 60ch; }
.packs-section { background: var(--accent-surface); border-block: 1px solid var(--border); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-12) 0; border-block: 1px solid var(--border); }
.facts > div { display: flex; flex-direction: column-reverse; padding-block: var(--space-6); padding-inline-end: var(--space-3); }
.facts > div + div { border-inline-start: 1px solid var(--border); padding-inline-start: var(--space-4); }
.facts dt { color: var(--text-muted); font-size: var(--text-xs); }
.facts dd { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: -.04em; line-height: 1.3; }
.pack-list { display: grid; grid-template-columns: 1fr; }
.pack { padding-block: var(--space-6); border-top: 1px solid var(--border); }
.pack-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.pack h3 { font-size: var(--text-lg); font-weight: 600; }
.pack-heading span { color: var(--text-muted); font-size: var(--text-xs); }
.pack p { color: var(--text-muted); margin-top: var(--space-3); font-size: var(--text-sm); max-width: 42ch; }
.pack-core { background: var(--inverse); color: var(--on-inverse); padding: var(--space-6); margin-bottom: var(--space-6); border: 0; }
.pack-core .pack-heading span, .pack-core p { color: var(--muted-inverse); }
.pack-core h3 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.install-block { margin-top: var(--space-12); padding: var(--space-6); background: var(--inverse); color: var(--on-inverse); }
.command-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-xs); color: var(--muted-inverse); }
.command-heading strong { font-weight: 500; color: var(--on-inverse); }
.command-line { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.command-line code { font-size: var(--text-lg); line-height: 1.5; font-weight: 500; }
.copy-button { flex-shrink: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--muted-inverse); border-radius: var(--radius); color: var(--on-inverse); background: transparent; font-size: var(--text-sm); min-width: 8rem; }
.copy-button:hover { color: var(--foreground); background: var(--on-inverse); }
.copy-status { min-height: 1.5em; font-size: var(--text-xs); margin-top: var(--space-2); color: var(--muted-inverse); }
.prerequisite { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-4); }
.start-steps { list-style: none; padding: 0; margin: var(--space-12) 0; display: grid; gap: var(--space-8); }
.start-steps li { display: flex; gap: var(--space-6); }
.start-steps li > span { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--primary); line-height: 1.2; }
.start-steps h3 { font-size: var(--text-base); }
.start-steps p { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.update-note { display: grid; gap: var(--space-6); border-block: 1px solid var(--border); padding-block: var(--space-8); }
.update-note h3 { font-size: var(--text-lg); max-width: 28ch; }
.update-note p { font-size: var(--text-sm); color: var(--text-muted); }
.update-note code { display: block; margin-top: var(--space-4); font-size: var(--text-sm); }
.update-note .text-link { margin-top: var(--space-3); }
.faq-section { display: grid; gap: var(--space-8); padding-top: 0; }
.faq-section > h2 { max-width: 15ch; }
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); font-weight: 600; padding-block: var(--space-6); list-style: none; cursor: pointer; line-height: 1.5; }
.faq-list p { color: var(--text-muted); font-size: var(--text-sm); padding-block-end: var(--space-6); padding-inline-end: var(--space-8); }
.closing-section { background: var(--primary); color: var(--surface); padding-block: var(--space-16); }
.closing-section > div { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.closing-section h2 { max-width: 23ch; font-size: var(--text-3xl); }
.button-light { color: var(--foreground); background: var(--surface); border-color: var(--surface); }
.button-light:hover { background: var(--background); border-color: var(--background); }
.button-light:focus-visible { box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px var(--surface); }
.site-footer { padding-block: var(--space-12) var(--space-8); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border); }
.footer-top > p { color: var(--text-muted); font-size: var(--text-sm); }
.footer-top > a:last-child { margin-inline-start: auto; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-top: var(--space-6); color: var(--text-muted); font-size: var(--text-xs); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a[aria-current] { font-weight: 700; color: var(--foreground); }
@media (min-width: 768px) {
  .wrap { width: min(var(--page-width), calc(100% - 6rem)); }
  .primary-nav { display: flex; }
  .header-actions { margin-inline-start: var(--space-6); gap: var(--space-6); }
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); }
  h1 { font-size: clamp(3rem, 5.6vw, 6.5rem); }
  .workflow { padding: var(--space-6); }
  .compatibility { grid-template-columns: 12rem 1fr; align-items: center; }
  .compatibility ul { justify-content: space-between; gap: var(--space-3) var(--space-4); }
  .section-intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-16); }
  .roles-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: var(--space-16); }
  .editorial-plus { display: block; margin-top: var(--space-6); }
  .role summary { grid-template-columns: 1.5rem minmax(6rem, .65fr) 1fr 1rem; gap: var(--space-3); }
  .role-job { grid-column: auto; }
  .role summary .disclosure-mark { grid-column: auto; grid-row: auto; }
  .facts dd { font-size: var(--text-5xl); }
  .facts > div { padding-block: var(--space-6); }
  .facts > div + div { padding-inline-start: var(--space-8); }
  .pack-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
  .pack { padding-block: var(--space-6); }
  .pack-core { margin: 0; padding: var(--space-6); }
  .start-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .start-steps li { display: block; }
  .start-steps li > span { display: block; margin-bottom: var(--space-4); }
  .install-block { padding: var(--space-8); }
  .command-line code { font-size: var(--text-xl); }
  .update-note { grid-template-columns: 1fr 1.5fr; gap: var(--space-16); }
  .faq-section { grid-template-columns: 1fr 1.5fr; gap: var(--space-16); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-24); }
  .hero { gap: var(--space-16); padding-block: var(--space-16); }
  .hero-lead { font-size: var(--text-lg); }
  .workflow { margin-inline-start: var(--space-8); padding: var(--space-8); }
  .workflow li { padding-block: var(--space-6); }
  h2 { font-size: var(--text-4xl); }
  .faq-section { padding-top: 0; }
  .closing-section h2 { font-size: var(--text-4xl); }
}
@media (max-width: 767px) {
  .hero h1 { font-size: clamp(2.375rem, 8.5vw, 4rem); }
  .header-cta { font-size: var(--text-xs); gap: var(--space-2); }
  .site-header { gap: var(--space-3); }
  .header-actions { gap: var(--space-2); }
  .hero-lead { font-size: var(--text-base); }
  .closing-section h2 { font-size: var(--text-2xl); }
  .footer-top > p { flex-basis: calc(100% - 9rem); }
  .footer-top > a:last-child { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid CanvasText; }
  .button, .copy-button, .language-menu nav { border: 1px solid ButtonText; }
}