:root{
  --bg:#f3f5f7;
  --bg-2:#e8edf2;
  --paper:#fffdf8;
  --ink:#152238;
  --muted:#667287;
  --line:#d7dee6;
  --accent:#f04b37;
  --accent-strong:#d93a28;
  --yellow:#ffd447;
  --yellow-ink:#152238;
  --dark:#152238;
  --dark-card:#1e2d45;
  --dark-muted:#c7d1dd;
  --success:#1e9f69;
  --radius:16px;
  --shadow:0 18px 48px rgba(21,34,56,.11);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#f3f5f7;--bg-2:#e8edf2;--paper:#fffdf8;--ink:#152238;--muted:#667287;
  --line:#d7dee6;--accent:#f04b37;--accent-strong:#d93a28;--yellow:#ffd447;
  --yellow-ink:#152238;--dark:#152238;--dark-card:#1e2d45;--dark-muted:#c7d1dd;
  --success:#1e9f69;--shadow:0 18px 48px rgba(21,34,56,.11)
}}
body{background:var(--bg)}
.header{border-bottom-color:rgba(21,34,56,.1);background:rgba(243,245,247,.9)}
.brand{letter-spacing:-.035em}
.brand-mark{
  position:relative;
  width:36px;height:36px;border-radius:9px;color:var(--paper);background:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),0 6px 16px rgba(240,75,55,.18);
  transform:none;font-size:17px;font-weight:950
}
.brand-mark::after{width:5px;height:5px;position:absolute;margin:-20px 0 0 21px;border-radius:1.5px;background:var(--yellow);content:""}
.promo-banner{position:relative;color:var(--paper);background:var(--dark)}
.promo-banner::before{position:absolute;inset:0 auto 0 0;width:6px;background:var(--yellow);content:""}
.button{border-radius:9px}
.button-primary{color:#fff;background:var(--accent);box-shadow:0 10px 24px rgba(240,75,55,.2)}
.button-primary:hover{color:#fff;background:var(--accent-strong)}
.button-outline:hover{border-color:rgba(240,75,55,.42);color:var(--accent);background:var(--paper)}
.hero,.inner-hero,.article-hero{isolation:isolate;background:linear-gradient(115deg,rgba(255,212,71,.12),transparent 42%),var(--bg)}
.hero-grid>*,.inner-hero-grid>*{min-width:0}
.hero::after,.inner-hero::after,.article-hero::after{
  position:absolute;z-index:-1;right:-90px;bottom:-42px;width:min(720px,58vw);aspect-ratio:760/300;
  background:url("brand/assets/xunsite-rail-overlay.svg") center/contain no-repeat;content:"";pointer-events:none
}
.hero-copy h1 span{color:var(--accent)}
.inner-hero-grid{grid-template-columns:1.08fr .92fr;gap:70px}
.inner-hero h1{max-width:720px;font-size:clamp(42px,4.5vw,58px);line-height:1.08;letter-spacing:-.04em;text-wrap:pretty}
.section-title h2,.closing h2,.article-hero h1{text-wrap:pretty}
.price-card,.hero-ticket{border:1px solid rgba(21,34,56,.1);box-shadow:0 22px 55px rgba(21,34,56,.13)}
.ticker,.section-dark,.footer{background:var(--dark)}
.section-dark .service-card{background:var(--paper)}
.template-card,.scope-card,.service-card,.tutorial-nav-card,.contact-form,details{
  border-color:rgba(21,34,56,.1);background:var(--paper);box-shadow:0 2px 4px rgba(21,34,56,.025),0 14px 34px rgba(21,34,56,.065)
}
.template-card:hover,.tutorial-nav-card:hover{box-shadow:0 20px 48px rgba(21,34,56,.13)}
.kicker{color:var(--accent)}
.closing{position:relative;overflow:hidden;color:#fff;background:var(--accent)}
.closing::after{position:absolute;right:-90px;bottom:-52px;width:520px;aspect-ratio:760/300;background:url("brand/assets/xunsite-rail-overlay.svg") center/contain no-repeat;filter:brightness(0) invert(1);opacity:.34;content:""}
.closing>.wrap{position:relative;z-index:1}
.closing .button{color:var(--yellow-ink);background:var(--yellow)}
.footer .brand-mark{box-shadow:none}
.icp-link{color:#d6dee8}
@media(max-width:900px){
  .inner-hero-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:720px){
  .hero::after,.inner-hero::after,.article-hero::after{right:-180px;width:620px;opacity:.65}
  .promo-banner::before{width:4px}
  .promo-banner .wrap{min-height:54px;flex-wrap:wrap;padding:7px 8px;gap:2px 8px;line-height:1.35}
  .promo-banner strong,.promo-banner span,.promo-banner a{font-size:12px}
  .hero-copy h1{max-width:100%;font-size:clamp(40px,12vw,48px);letter-spacing:-.045em;text-wrap:pretty;overflow-wrap:anywhere}
  .hero-copy h1 span{overflow-wrap:anywhere}
  .hero-copy>p:not(.kicker),.inner-hero-copy>p:not(.kicker){max-width:100%;overflow-wrap:anywhere}
  .inner-hero h1{max-width:100%;font-size:40px;overflow-wrap:anywhere}
  .hero-ticket{width:100%;max-width:340px;padding:28px;transform:rotate(-1deg)}
}

/* Website advantages navigation */
@media(min-width:901px) and (max-width:1100px){.nav-links{gap:12px;font-size:12px}.nav{gap:15px}}