:root {
  --md-primary-fg-color: #272b2b;
  --md-primary-fg-color--dark: #202424;
  --md-accent-fg-color: #b44e32;
  --sf-paper: #f6f3ec;
  --sf-ink: #272b2b;
  --sf-muted: #626963;
  --sf-border: #dedbd2;
  --sf-accent: #a7482e;
}
[data-md-color-scheme="default"] {
  --md-default-bg-color: #fcfbf8;
  --md-typeset-a-color: #a7482e;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1e2423;
  --md-accent-fg-color: #f0aa84;
  --md-typeset-a-color: #f0aa84;
  --sf-paper: #252c29;
  --sf-ink: #f4f0e7;
  --sf-muted: #b5beb6;
  --sf-border: #434c46;
  --sf-accent: #f0aa84;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.md-header__button.md-logo img { width: 1.7rem; height: 1.7rem; border-radius: 8px; }
.md-tabs { border-top: 1px solid #ffffff12; }
.md-typeset { font-size: .8rem; line-height: 1.95; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { letter-spacing: -.02em; }
.md-typeset img { border-radius: 8px; }
.sf-home { color: var(--sf-ink); }
.sf-hero { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 2rem; padding: 2.5rem 0; }
.md-typeset .sf-home h1 { margin: .65rem 0 1rem; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.3; font-weight: 750; color: var(--sf-ink); }
.sf-eyebrow { color: var(--sf-accent); font-size: .68rem; font-weight: 650; letter-spacing: .035em; margin: 0; }
.sf-lead { color: var(--sf-muted); font-size: .88rem; line-height: 1.95; }
.sf-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.md-typeset .md-button { border-radius: 6px; padding: .6em 1.2em; border-width: 1px; font-size: .75rem; }
.sf-home .md-button--primary { background: var(--sf-ink); border-color: var(--sf-ink); color: var(--sf-paper); }
.sf-home .md-button:not(.md-button--primary) { color: var(--sf-ink); border-color: var(--sf-border); }
.sf-home .md-button:hover { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-paper); }
.sf-fine { font-size: .65rem; color: var(--sf-muted); line-height: 1.8; }
.md-typeset .sf-home figure { margin: 0; width: 100%; max-width: none; }
.sf-product-shot a, .sf-wide-shot a { display: block; }
.sf-product-shot img, .sf-wide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--sf-border); box-shadow: 0 16px 40px #19211a18; }
.md-typeset .sf-home figcaption { margin: .6rem 0 0; text-align: left; font-size: .62rem; line-height: 1.8; color: var(--sf-muted); }
.sf-principles, .sf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.sf-principles { border-top: 1px solid var(--sf-border); padding: 1.8rem 0 2rem; }
.sf-home h3 { margin: .3rem 0 .6rem; font-size: .95rem; font-weight: 650; }
.sf-principles p, .sf-steps p, .sf-feature-pair p, .sf-guide-grid p { color: var(--sf-muted); font-size: .76rem; }
.sf-section { padding: 2rem 0; border-top: 1px solid var(--sf-border); }
.sf-home h2 { font-size: 1.7rem; line-height: 1.5; font-weight: 700; margin: .4rem 0 1.2rem; }
.sf-steps h3 { color: var(--sf-accent); font-size: .82rem; }
.sf-feature-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.sf-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2rem; }
.sf-guide-grid > div { padding: 1rem 1.2rem; background: var(--sf-paper); border-radius: 8px; border: 1px solid var(--sf-border); }
.sf-home table { font-size: .74rem !important; }
.sf-closing { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 1.8rem; margin: 1rem 0 2rem; background: var(--sf-paper); border-radius: 8px; }
.sf-closing h2 { margin: 0 0 .6rem; }
.sf-closing p { color: var(--sf-muted); font-size: .76rem; }
.sf-closing-links { border-left: 1px solid var(--sf-border); padding-left: 1.5rem; }
.build-provenance { display: flex; flex-wrap: wrap; gap: .4rem 1rem; border-top: 1px solid var(--sf-border); padding: 1rem 0 .3rem; color: var(--sf-muted); font-size: .62rem; }
.build-title { flex-basis: 100%; overflow-wrap: anywhere; }
@media (min-width: 1220px) { .md-grid { max-width: 68rem; } }
@media (max-width: 960px) {
  .sf-hero { grid-template-columns: 1fr; padding: 1.5rem 0 2rem; gap: 1.3rem; }
  .sf-principles, .sf-steps { gap: 1rem; }
}
@media (max-width: 640px) {
  .sf-principles, .sf-steps, .sf-feature-pair, .sf-guide-grid, .sf-closing { grid-template-columns: 1fr; gap: 1rem; }
  .sf-section { padding: 1.5rem 0; }
  .sf-closing { padding: 1.2rem; }
  .sf-closing-links { border-left: 0; border-top: 1px solid var(--sf-border); padding: .5rem 0 0; }
  .sf-home h2 { font-size: 1.35rem; }
  .md-typeset .sf-home h1 { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Keep both language destinations visible in the top header on every screen. */
.sf-language-switch { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; margin: 0 .35rem; white-space: nowrap; border: 1px solid #ffffff45; border-radius: 6px; padding: .12rem; }
.sf-language-switch a { color: #fff; font-size: .65rem; line-height: 1.5; padding: .25rem .4rem; border-radius: 4px; }
.sf-language-switch a[aria-current="true"] { background: #ffffff24; font-weight: 700; }
.sf-language-switch a:hover { background: #ffffff35; }
.sf-language-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .sf-language-switch { margin: 0 .15rem; }
  .sf-language-switch a { padding: .25rem .3rem; font-size: .62rem; }
}