/* Option B follows src/styles.css: same OpenBit brand, palette and type scale.
   Loaded only for the design-review alternative; the existing light design stays intact. */
.en-theme-main {
  color-scheme: dark;
  --paper: #080a09;
  --ink: #f1f4ee;
  --muted: #8d9790;
  --line: #29302b;
  --accent: #c9ff43;
  --white: #121613;
  --surface: #0f1210;
  --surface-raised: #1e2320;
  --font-sans: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 23px;
  --fs-hero: clamp(27px, 3vw, 42px);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --r-s: 3px;
  --r-m: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.7;
}
.en-theme-main a:focus-visible, .en-theme-main div[tabindex]:focus-visible { outline-color: var(--accent); }
.en-theme-main .en-skip { background: var(--surface-raised); }
.en-theme-main main, .en-theme-main .en-footer { width: min(1180px, calc(100% - 48px)); }
.en-main-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 70px;
  padding-inline: max(24px, calc((100% - 1320px) / 2));
  border-bottom: 1px solid rgba(241,244,238,.14);
  background: var(--paper);
}
.en-main-brand { display: inline-flex; width: fit-content; }
.en-main-brand img { display: block; width: 139px; height: auto; }
.en-main-header nav { display: flex; gap: var(--sp-6); align-self: stretch; }
.en-main-header nav a { display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-3); text-decoration: none; text-align: center; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; }
.en-main-header nav small { font: 10px/1.7 var(--font-mono); letter-spacing: .08em; margin-top: var(--sp-1); }
.en-main-header nav a.en-main-nav-active { color: var(--ink); border-color: var(--accent); }
.en-main-header nav a.en-main-nav-active small { color: var(--accent); }
.en-main-header nav a:hover, .en-main-language:hover { color: var(--accent); }
.en-main-language { justify-self: end; text-decoration: none; font-size: var(--fs-sm); font-weight: 700; }
.en-main-language span { color: var(--muted); margin-left: var(--sp-2); font-weight: 400; }
.en-theme-main .en-kicker { font: 11px/1.7 var(--font-mono); letter-spacing: .08em; }
.en-main-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-8); align-items: center; padding-block: var(--sp-7); }
.en-main-hero .en-intro { padding: 0; }
.en-theme-main .en-intro { padding-block: var(--sp-7); }
.en-main-hero .en-intro { padding-block: 0; }
.en-theme-main .en-intro h1 { font-size: var(--fs-hero); line-height: 1.1; letter-spacing: -.03em; font-weight: 750; margin-bottom: var(--sp-5); }
.en-theme-main .en-lead { font-size: var(--fs-lg); line-height: 1.7; margin-bottom: var(--sp-5); }
.en-theme-main .en-button { padding: var(--sp-3) var(--sp-5); color: #080a09; border: 0; border-radius: var(--r-m); font-size: var(--fs-md); gap: var(--sp-6); }
.en-theme-main .en-button:hover { background: #d9ff74; }
.en-main-start { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: var(--sp-5); }
.en-main-start > p { margin-bottom: var(--sp-3); }
.en-main-start > a { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-4); border-top: 1px solid var(--line); text-decoration: none; }
.en-main-start > a > span:first-child { grid-column: 1 / -1; color: var(--muted); font: 10px/1.7 var(--font-mono); letter-spacing: .08em; }
.en-main-start strong { font-size: var(--fs-lg); font-weight: 600; }
.en-main-start > a > span:last-child { color: var(--accent); }
.en-main-start > a:hover strong { color: var(--accent); }
.en-theme-main .en-section-heading { padding-bottom: var(--sp-4); }
.en-theme-main .en-section-heading span { font: 11px/1.7 var(--font-mono); }
.en-theme-main .en-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); border-top: 0; }
.en-theme-main .en-guide { position: relative; display: block; padding: var(--sp-5); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-m); }
.en-theme-main .en-guide:hover { border-color: #697b4b; background: #121713; }
.en-theme-main .en-guide-number { display: block; font: 11px/1.7 var(--font-mono); color: var(--accent); margin-bottom: var(--sp-5); padding: 0; }
.en-theme-main .en-guide h2 { font-size: var(--fs-xl); line-height: 1.45; font-weight: 650; letter-spacing: -.02em; margin-bottom: var(--sp-3); }
.en-theme-main .en-guide .en-kicker { font-size: 10px; margin-bottom: var(--sp-3); }
.en-theme-main .en-guide p:not(.en-kicker) { font-size: var(--fs-sm); line-height: 1.7; }
.en-theme-main .en-arrow { position: absolute; top: var(--sp-5); right: var(--sp-5); color: var(--muted); font-size: var(--fs-lg); }
.en-theme-main .en-research { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-6); gap: var(--sp-7); margin-block: var(--sp-7); }
.en-theme-main .en-research h2 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; }
.en-theme-main .en-research li + li { border-color: var(--line); }
.en-theme-main .en-research li a { padding-block: var(--sp-4); }
.en-theme-main .en-research li a span { color: var(--accent); }
.en-theme-main .en-research li a:hover { color: var(--accent); }
.en-theme-main .en-footer { font-size: var(--fs-sm); padding-block: var(--sp-5) var(--sp-7); }
.en-theme-main .en-footer > a:first-child { font-size: var(--fs-lg); }
.en-theme-main .en-article { max-width: 760px; padding-block: var(--sp-6) var(--sp-8); }
.en-theme-main .en-back { margin-bottom: var(--sp-6); color: var(--muted); }
.en-theme-main .en-article > h1 { font-size: var(--fs-hero); line-height: 1.25; letter-spacing: -.03em; }
.en-theme-main .en-meta { font-family: var(--font-mono); font-size: 11px; }
.en-theme-main .en-prose { font-family: var(--font-sans); font-size: var(--fs-lg); line-height: 1.85; color: #cbd1cb; }
.en-theme-main .en-prose h2, .en-theme-main .en-prose h3 { font-family: var(--font-sans); color: var(--ink); letter-spacing: -.02em; }
.en-theme-main .en-prose h2 { font-size: var(--fs-2xl); }
.en-theme-main .en-prose h3 { font-size: var(--fs-xl); }
.en-theme-main .en-prose strong { color: var(--ink); }
.en-theme-main .en-prose a { color: var(--accent); }
.en-theme-main .en-prose a:hover { color: #d9ff74; }
.en-theme-main .en-prose blockquote { background: var(--surface); border-left-color: var(--accent); font-style: normal; padding: var(--sp-5); }
.en-theme-main .en-table { background: var(--surface); border-radius: var(--r-m); }
.en-theme-main .en-table table { font-family: var(--font-sans); font-size: var(--fs-md); }
.en-theme-main .en-table th { background: var(--surface-raised); color: var(--ink); }
@media (max-width: 850px) {
  .en-main-hero { gap: var(--sp-6); }
  .en-theme-main .en-guides { grid-template-columns: 1fr; }
  .en-theme-main .en-guide { padding: var(--sp-5); }
  .en-theme-main .en-guide-number { margin-bottom: var(--sp-3); }
  .en-main-header { grid-template-columns: 1fr auto; padding-inline: var(--sp-5); padding-top: var(--sp-4); }
  .en-main-header nav { grid-row: 2; grid-column: 1 / -1; justify-content: center; margin-top: var(--sp-2); }
  .en-main-language { grid-row: 1; grid-column: 2; }
}
@media (max-width: 600px) {
  .en-theme-main main, .en-theme-main .en-footer { width: calc(100% - 32px); }
  .en-main-header { position: static; padding-inline: var(--sp-4); }
  .en-main-header nav a { font-size: var(--fs-sm); }
  .en-main-hero { grid-template-columns: 1fr; padding-block: var(--sp-6); gap: var(--sp-6); }
  .en-main-start { padding: var(--sp-4); }
  .en-theme-main .en-intro { padding-block: var(--sp-6); }
  .en-main-hero .en-intro { padding: 0; }
  .en-theme-main .en-intro h1 { font-size: 34px; }
  .en-theme-main .en-research { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-3); margin-block: var(--sp-6); }
  .en-theme-main .en-article > h1 { font-size: 30px; }
  .en-theme-main .en-prose blockquote { padding: var(--sp-4); }
}