/* Current visual direction: graphite, cool surfaces, electric blue, one language at a time. */
:root { --sb-section-y: clamp(44px, 6vw, 92px); }
.js[data-lang="en"] [data-translation="zh"],
.js[data-lang="zh"] [data-translation="en"] { display: none !important; }
.js .sb-bi { --bi-sub-size: 1em; --bi-lead-size: 1em; }
.js .sb-copy > [data-translation="zh"] { font-size: 1rem; line-height: 1.65; margin-top: 0; }
.js[data-lang="zh"] .sb-head > .sb-h2-zh { font-size: var(--sb-fs-h2); font-weight: 600; line-height: 1.15; }
.sb-h1, .sb-h2, .sb-h3, .home-display, .sb-slab, .sb-nav__en, .sb-ticker__track { font-style: normal; font-weight: 600; letter-spacing: -.045em; }
.sb-slab { clip-path: none; border-radius: 0 10px 10px 0; }
.sb-tag, .sb-chip, .sb-caption { clip-path: none; border-radius: 6px; font-style: normal; }
.sb-btn::before, .sb-toggle::before, .fb-foldbtn::before { clip-path: none; border-radius: 12px; }
.sb-nav { background: color-mix(in srgb, var(--sb-paper) 92%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--sb-line); }
.sb-nav__en { text-transform: none; }
.sb-nav__toggle::before { border-radius: 12px; }
.sb-nav__toggle .sb-bi::before, .sb-nav__toggle .sb-bi::after { content: none; }
.sb-sticker { display: none; }
.sb-ticker, .home-marquee { font-style: normal; }
.sb-ticker__track, .home-marquee .sb-marquee { font-weight: 500; }
/* A quiet reading rail uses the same traced bike as the demonstrations. */
.fb-progress { height: 2px; background: transparent; }
.fb-progress .fbp-fill { background: var(--sb-red); }
.fb-progress .fbp-lane { opacity: 0; transition: opacity .25s; }
.fb-progress.is-riding .fbp-lane { opacity: 1; }
/* Photography remains real; the frame and controls provide the technical character. */
.home-hero { background: #10141c; }
.home-hero::after { background: linear-gradient(180deg, #10141ca8, transparent 52%, #10141ced); }
.home-hero__english { font-weight: 450; }
.home-hero__explore { border-color: #a9b7ca70; }
.home-hero__arrow { background: #2454e6; color: #fff; border-radius: 12px; }
.home-hero__caption { font-size: 1rem; }
.home-intro__copy .sb-lede { max-width: 18em; font-size: clamp(2rem, 4.5vw, 4.5rem); }
.home-intro .home-note { max-width: 40em; }
.home-hero__chinese { font-size: clamp(2rem, 6vw, 4.5rem); }
@media (min-width: 700px) {
  .home-hero::after { background: linear-gradient(90deg, #10141c 12%, #10141c00 82%), linear-gradient(0deg, #10141cb3, transparent 55%); }
}
:is(.pp-hero, .pg-hero, .st-hero, .jn-hero) .sb-slab { --sb-slab-bg: #10141ce8; --sb-slab-fg: #fff; padding-block: .2em; }
:is(.pp-hero, .pg-hero, .st-hero, .jn-hero) .sb-slab--sub { --sb-slab-bg: #2454e6; }
:is(.pg-trip__figure, .pg-scene__media, .pg-mosaic, .pp-photo, .st-origin__fig) { border-radius: 18px; overflow: hidden; }
.sb-surface--red { background: #2454e6; }
.sb-surface--brick { background: #263856; }
/* A single precise technical illustration language, including the travel and progress bikes. */
.fd__stage { background: #10141c; border-color: #2d3747; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 28px 28px; }
.fd__stage .fd-art { --fd-paper: #10141c; --fd-ink: #f3f5f7; --fd-muted: #a9b7ca; --fd-line: #2d3747; --fd-accent: #6d91ff; }
.fd__scrub, .fd__toggle { border-radius: 12px; }
.fd__toggle .sb-toggle::before { border-radius: 8px; }
.fd__step { --bi-lead-size: 1rem; }
.fd__note { font-size: .8125rem; }
.fd__explanation { padding-top: 20px; border-top: 1px solid var(--sb-line); }
.fold-ride, .fold-carry { --paper: var(--sb-paper); --ink: var(--sb-ink); }
.fb .fd-ride-art { position: absolute; inset: 0; fill: none; }
.fb .fd-ride-art .fd-gnd, .fb .fd-ride-art [data-fd="shadow"] { display: none; }
.fb .fd-ride-art [data-fd="rw"] { transform-origin: 105.4px 193.86px; }
.fb .fd-ride-art [data-fd="fw"] { transform-origin: 257.21px 193.86px; }
.fb-ride .fd-ride-art [data-fd="rw"], .fb-ride .fd-ride-art [data-fd="fw"] { animation: sbRealWheel var(--fb-wheel-dur, 1.2s) linear infinite; }
@keyframes sbRealWheel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fb .fd-ride-art * { animation: none !important; }
  .fb-progress .fbp-lane { display: none; }
}
.fold-block { --fold-paper: var(--sb-paper); --fold-paper2: var(--sb-sand); --fold-ink: var(--sb-ink); --fold-ink2: var(--sb-ink-2); --fold-accent: var(--sb-red); --fold-dot: var(--sb-red); }
.fold-title { font-style: normal; font-weight: 600; letter-spacing: -.055em; text-transform: none; }
.fold-tag { clip-path: none; border-radius: 6px; font-style: normal; }
.fold-ride .fr-scene { margin-inline: 20px; border-radius: 20px; background: #10141c; }
.fold-ride .fr-scene .fd-art { --fd-paper: #10141c; --fd-ink: #f3f5f7; --fd-muted: #a9b7ca; --fd-accent: #6d91ff; }
.fold-ride .fr-sun { background: #2454e6; filter: blur(35px); }
.fold-ride .fr-mid { display: none; }
.fold-ride .fr-sky svg { fill: #a9b7ca; }
.fold-ride .fr-ground { background: #10141c; border-top: 1px solid #6d91ff; }
.fold-ride .fr-road svg pattern rect { fill: #6d91ff; }
.fold-ride .fr-specs li { border-radius: 10px; }
.js[data-lang="zh"] .fold-title-cn { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 600; }
.js[data-lang="en"] .sb-bi > [lang|="zh"], .js[data-lang="zh"] .sb-bi > [lang="en"] { display: none !important; }
.sb-skip:focus-visible { outline-color: var(--sb-ink); box-shadow: 0 0 0 2px var(--sb-paper); }
.pp-toggle-buttons .sb-toggle:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px #10141c; }
