/* Dark product theme: neutral surfaces, quiet borders, restrained green accents. */
:root {
  color-scheme: dark;
  color: #ededef;
  background: #0c0d10;
  --green: #e6e8eb;
  --border: #282a31;
  --muted: #9699a3;
}
body { background: radial-gradient(ellipse 70% 550px at 50% 5%, #20232c66, transparent 80%); }
.nav { border-bottom-color: #23252b; }
.nav nav { color: #a3a5ae; }
.nav a:hover, .nav button:hover { color: #fff; }
.nav-github { background: #1b1d23; border-color: #363841; color: #e6e7ec; }
.eyebrow { background: #1a1c2299; border-color: #30323b; color: #acafb9; }
.status-dot { background: #9cc791; }
h1 { color: #f1f1f3; }
.muted { color: #9295a0; }
.hero-copy { color: #a2a5af; }
.primary { color: #15161b; box-shadow: 0 0 18px #eef0ff0b, inset 0 1px 0 #fff; }
.primary:hover { background: #fff; }
.secondary { background: #1c1e25; color: #e0e1e7; border-color: #373943; }
.secondary:hover { background: #282b34; }
.hero-note, .demo-label, .demo-caption { color: #969aa6; }
.eyebrow-text { color: #959fac; }
.section-intro>p { color: #a2a7b3; }
.feature-grid article { background: linear-gradient(150deg, #1b1d23, #121317); }
.feature-icon { color: #bdc8b7; }
.feature-grid p { color: #a6abb7; }
.feature-foot { color: #a0a7b4; }
.foundation-mark { background: repeating-linear-gradient(0deg, transparent, transparent 15px, #252a32 15px, #252a32 16px), repeating-linear-gradient(90deg, transparent, transparent 15px, #252a32 15px, #252a32 16px); }
.foundation-mark img { box-shadow: 0 12px 40px #90b97816; }
.foundation p { color: #a1a8b5; }
.text-link { color: #c3d2b9; }
.start-section { background: radial-gradient(ellipse at 20% 0%, #23282e, #111216 70%); border-block: 1px solid #2d3039; }
.start-section .eyebrow-text { color: #9ca7b6; }
.start-section h2 { color: #ededf1; }
.start-section p { color: #a4abba; }
.start-links { color: #b3bac7; }
.light { background: #e2e6e0; color: #20271d; }
.light:hover { background: #fff; }
.install { border-color: #393e49; background: #111318; }
.install-top { border-color: #30353e; color: #a3acbc; }
.install button { border-color: #474e5c; background: #242933; color: #d0d8e6; }
.install pre { color: #c2d2b8; }
.migration { background: #1c2128; color: #acb4c3; }
.migration a { color: #d4dfca; }
.footer p { color: #989fad; }
.footer>div { color: #b5bdcc; }
.skip { background: #252932; color: #fff; }
button:focus-visible, a:focus-visible { outline-color: #c7dcb9; }

/* One stable product window; real screenshots remain available at full resolution. */
.hero { padding-top:48px; padding-bottom:36px; }
h1 { font-size:clamp(44px,5.7vw,68px); }
.hero-note { margin-bottom:0; }
.showcase { border:1px solid #30323a; border-radius:14px; overflow:hidden; background:#111216; box-shadow:0 30px 90px #0003; }
.feature-tabs { display:flex; gap:4px; padding:10px; border-bottom:1px solid #292c33; background:#16181d; }
.feature-tabs button { flex:1; border:1px solid transparent; border-radius:7px; padding:13px 8px; background:transparent; color:#969ba7; font-size:13px; }
.feature-tabs button:hover { color:#fff; background:#1e2128; }
.feature-tabs button[aria-selected=true] { background:#292d34; color:#f0f1f3; border-color:#3e444b; box-shadow:0 2px 6px #0003; }
.feature-panel { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; padding:30px; height:510px; align-items:center; }
.feature-panel[hidden] { display:none; }
.feature-description { max-height:450px; overflow:auto; padding:4px; }
.story-index { color:#aebda8; font-size:10px; letter-spacing:.6px; }
.feature-description h2 { font-size:29px; line-height:1.25; letter-spacing:-.8px; margin:18px 0; }
.feature-description p { color:#a6adba; font-size:13px; line-height:1.8; }
.story-action { color:#c3cfbc; font-size:12px; line-height:1.8; border-left:2px solid #6c805f; padding-left:12px; margin-top:22px; }
details { margin-top:22px; }
summary { color:#aab1bd; font-size:12px; cursor:pointer; padding:8px 0; }
summary:focus-visible { outline:2px solid #c7dcb9; }
.detail-link { color:#c3cfbc; font-size:12px; text-decoration:underline; }
.gallery figure { margin:0; min-width:0; }
.gallery figure a { display:flex; height:414px; align-items:center; justify-content:center; border-radius:8px; background:#0c0d10; overflow:hidden; border:1px solid #282c33; }
.gallery img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery figcaption { color:#8f98a6; font-size:10px; padding-top:12px; text-align:right; }
.gallery-disclosure { color:#7e8795; font-size:10px; line-height:1.7; margin:14px auto 0; max-width:850px; text-align:center; }
.foundation { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 28px; padding-block:30px; color:#9ba4b2; font-size:12px; }
.foundation>span:first-child { color:#d1d5dc; }
.start-section { padding-block:44px; }
.start-section h2 { font-size:36px; }
@media(max-width:850px) {
 .feature-panel { grid-template-columns:230px minmax(0,1fr); gap:16px; padding:20px; }
 .feature-description h2 { font-size:25px; }
}
@media(max-width:600px) {
 .hero { padding-top:34px; padding-bottom:28px; }
 html[lang="zh-CN"] h1 { font-size:clamp(29px,8.2vw,40px); letter-spacing:-1px; line-height:1.2; }
 .feature-tabs { gap:2px; padding:6px; }
 .feature-tabs button { font-size:10px; padding:12px 3px; }
 .feature-panel { display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:18px; height:620px; }
 .feature-panel[hidden] { display:none; }
 .feature-description { height:230px; flex:none; }
 .feature-description h2 { font-size:26px; margin:12px 0; }
 .story-action { margin-top:12px; font-size:11px; }
 details { margin-top:8px; }
 .gallery figure a { height:306px; }
 #branch figure img { object-fit:cover; object-position:right center; }
 .gallery figcaption { font-size:9px; }
 .foundation { font-size:11px; gap:10px; padding-block:24px; }
 .foundation .text-link { width:100%; text-align:center; }
}

/* Keep review text within the capture’s Retina pixel budget. */
#review figure a { max-width:720px; margin-inline:auto; }
.feature-tabs button:focus-visible { outline-width:2px; outline-offset:1px; }