/* Import after design-tokens.css. All theme styles are scoped to .fe-theme. */
.fe-theme { margin: 0; background: var(--fe-bg-page); color: var(--fe-text); font-family: var(--fe-font-body); font-size: var(--fe-size-body); line-height: var(--fe-leading-body); }
.fe-theme *, .fe-theme *::before, .fe-theme *::after { box-sizing: border-box; }
.fe-theme :where(h1,h2,h3,p,ul,ol,figure,blockquote,pre) { margin: 0; }
.fe-theme :where(p,li,h1,h2,h3,td,th,a) { overflow-wrap: anywhere; text-wrap: pretty; }
.fe-theme :where(h1,h2,h3) { color: var(--fe-text-title); font-family: var(--fe-font-sans); }
.fe-theme h1 { font-size: clamp(28px, 3.2vw, var(--fe-size-title)); line-height: var(--fe-leading-title); font-weight: 700; max-width: 30em; }
.fe-theme h2 { font-size: var(--fe-size-section); line-height: 1.35; }
.fe-theme h3 { font-size: var(--fe-size-card); line-height: 1.4; font-weight: 650; }
.fe-theme a { color: var(--fe-primary); text-decoration: underline; text-underline-offset: 3px; }
.fe-theme a:hover { color: var(--fe-text-accent); }
.fe-theme a:active { text-decoration-thickness: 2px; }
.fe-theme :focus-visible { outline: 2px solid var(--fe-focus); outline-offset: 4px; }
.fe-theme img { display: block; max-width: 100%; height: auto; }
.fe-theme code, .fe-theme pre { font-family: var(--fe-font-mono); font-size: .9em; }
.fe-theme pre { overflow-x: auto; background: var(--fe-bg-card); padding: var(--fe-space-5); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-card); white-space: pre; }
.fe-page { max-width: var(--fe-page-max); margin-inline: auto; padding: var(--fe-space-10); }
.fe-paper { background-color: var(--fe-bg-paper); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, var(--fe-paper-rule) 41px, var(--fe-paper-rule) 42px); }
.fe-masthead { border-bottom: 1px solid var(--fe-divider); padding-bottom: var(--fe-space-6); margin-bottom: var(--fe-space-8); }
.fe-label { font-family: var(--fe-font-mono); font-size: var(--fe-size-caption); line-height: 1.5; font-weight: 600; color: var(--fe-text-accent); letter-spacing: .06em; }
.fe-masthead h1 { margin-top: var(--fe-space-3); }
.fe-deck { margin-top: var(--fe-space-3) !important; color: var(--fe-text-secondary); max-width: 54em; }
.fe-nav { display: flex; flex-wrap: wrap; gap: var(--fe-space-2) var(--fe-space-5); margin-top: var(--fe-space-5); font-size: var(--fe-size-secondary); }
.fe-section { margin-top: var(--fe-space-10); }
.fe-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--fe-space-3); margin-bottom: var(--fe-space-5); }
.fe-grid { display: grid; gap: var(--fe-space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fe-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fe-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fe-grid > * { min-width: 0; }
.fe-card { background: var(--fe-bg-card); border: var(--fe-border-width) solid var(--fe-border); border-radius: var(--fe-radius-card); padding: var(--fe-space-5); box-shadow: var(--fe-shadow-card); }
.fe-card > * + * { margin-top: var(--fe-space-2); }
.fe-card h2 { font-size: var(--fe-size-card); }
.fe-card--primary { background: var(--fe-primary); color: var(--fe-text-inverse-secondary); border-color: var(--fe-primary); }
.fe-card--primary :where(h2,h3,.fe-label,a) { color: var(--fe-text-inverse); }
.fe-theme .fe-card--primary a { color: var(--fe-text-inverse); }
.fe-theme .fe-card--primary a:hover { color: var(--fe-text-inverse); text-decoration-thickness: 2px; }
.fe-card--primary :focus-visible { outline-color: var(--fe-text-inverse); }
.fe-card--sage { background: var(--fe-bg-secondary); }
.fe-card--warning { background: var(--fe-bg-warning); border-color: var(--fe-border-warning); }
.fe-card--insight { background: var(--fe-bg-highlight); }
.fe-secondary { color: var(--fe-text-secondary); font-size: var(--fe-size-secondary); }
.fe-caption { color: var(--fe-text-secondary); font-size: var(--fe-size-caption); }
.fe-metric { background: var(--fe-bg-card); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-card); padding: var(--fe-space-5); }
.fe-metric strong { display: block; color: var(--fe-primary); font-family: var(--fe-font-sans); font-size: 30px; line-height: 1.4; margin-block: var(--fe-space-2); }
.fe-prose { max-width: var(--fe-prose-max); margin-inline: auto; }
.fe-prose > * + * { margin-top: var(--fe-space-5); }
.fe-prose h2 { margin-top: var(--fe-space-10); }
.fe-prose ul, .fe-prose ol { padding-left: 1.5em; }
.fe-table-wrap { overflow-x: auto; border: 1px solid var(--fe-border); border-radius: var(--fe-radius-card); background: var(--fe-bg-card); }
.fe-theme table { border-collapse: collapse; width: 100%; text-align: left; font-size: var(--fe-size-secondary); }
.fe-theme :where(th,td) { padding: var(--fe-space-3) var(--fe-space-4); vertical-align: top; border-bottom: 1px solid var(--fe-divider); }
.fe-theme th { background: var(--fe-bg-secondary); color: var(--fe-primary); font-weight: 650; }
.fe-theme tr:last-child td { border-bottom: 0; }
.fe-theme .fe-table-wrap:focus-visible { outline-offset: 2px; }
.fe-timeline { list-style: none; padding: 0; display: grid; gap: var(--fe-space-6); grid-template-columns: repeat(4, minmax(0,1fr)); margin-block: var(--fe-space-10) !important; }
.fe-timeline li { position: relative; padding-right: var(--fe-space-2); }
.fe-timeline li::before { content: ''; position: absolute; top: 19px; left: 40px; width: calc(100% - 16px); height: 2px; background: var(--fe-line); }
.fe-timeline li:last-child::before { display: none; }
.fe-step { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--fe-space-5); border-radius: 50%; background: var(--fe-primary); color: var(--fe-text-inverse); font: 14px var(--fe-font-mono); position: relative; z-index: 1; }
.fe-step--accent { background: var(--fe-accent); }
.fe-timeline h2 { font-size: var(--fe-size-card); }
.fe-swatch { min-height: 84px; padding: var(--fe-space-4); display: flex; flex-direction: column; justify-content: end; border-radius: var(--fe-radius-small); border: 1px solid var(--fe-border); background: var(--swatch-bg); color: var(--swatch-text, var(--fe-primary)); }
.fe-swatch code { font-size: var(--fe-size-caption); }
.fe-palette { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--fe-space-3); }
.fe-figure { background: var(--fe-bg-card); padding: var(--fe-space-5); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-card); }
.fe-diagram-scroll { overflow-x: auto; padding: var(--fe-space-2); }
.fe-diagram { display: block; width: 100%; min-width: 720px; height: auto; }
.fe-diagram text { font-family: var(--fe-font-body); fill: var(--fe-primary); font-size: 18px; }
.fe-diagram .fe-svg-note { fill: var(--fe-text-secondary); font-size: 14px; }
.fe-diagram .fe-svg-card { fill: var(--fe-bg-card); stroke: var(--fe-border); }
.fe-diagram .fe-svg-sage { fill: var(--fe-bg-secondary); stroke: var(--fe-border); }
.fe-diagram .fe-svg-primary { fill: var(--fe-primary); stroke: var(--fe-primary); }
.fe-diagram .fe-svg-warning { fill: var(--fe-bg-warning); stroke: var(--fe-border-warning); }
.fe-diagram .fe-svg-inverse { fill: var(--fe-text-inverse); }
.fe-diagram .fe-svg-edge { stroke: var(--fe-line); stroke-width: 1.5; fill: none; }
.fe-diagram .fe-svg-arrow { fill: var(--fe-line); }
.fe-diagram .fe-svg-return { stroke: var(--fe-accent); stroke-dasharray: 5 4; }
.fe-footer { margin-top: var(--fe-space-12); padding-top: var(--fe-space-4); border-top: 1px solid var(--fe-divider); color: var(--fe-text-secondary); font-size: var(--fe-size-caption); }
.fe-footer p + p { margin-top: var(--fe-space-2); }
.fe-reference-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--fe-space-5); }
.fe-reference-grid figcaption { margin-top: var(--fe-space-2); }
@media (max-width: 760px) {
  .fe-page { padding: var(--fe-space-6) var(--fe-space-5); }
  .fe-grid, .fe-grid--three, .fe-grid--four { grid-template-columns: 1fr; }
  .fe-reference-grid { grid-template-columns: 1fr; }
  .fe-palette { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fe-timeline { grid-template-columns: 1fr; gap: var(--fe-space-5); }
  .fe-timeline li { padding-left: 56px; min-height: 80px; }
  .fe-timeline li::before { left: 19px; top: 40px; width: 2px; height: calc(100% - 20px + var(--fe-space-5)); }
  .fe-step { position: absolute; left: 0; top: 0; }
  .fe-section { margin-top: var(--fe-space-8); }
  .fe-theme h2 { font-size: 21px; }
  .fe-card h2, .fe-timeline h2 { font-size: var(--fe-size-card); }
}
@media print {
  .fe-theme { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .fe-page { max-width: none; padding: 12mm; }
  .fe-nav { display: none; }
  .fe-card, .fe-metric, .fe-figure { break-inside: avoid; }
  .fe-prose { max-width: none; }
  .fe-table-wrap, .fe-diagram-scroll { overflow: visible; }
  .fe-diagram { min-width: 0; }
  .fe-theme h2, .fe-theme h3 { break-after: avoid; }
  .fe-footer { margin-top: var(--fe-space-6); }
  @page { margin: 8mm; }
}