/* Three accents, one Xiaoshi. The approved silver XS is inherited unchanged. */
:root {
  --blue: #2457f5;
  --blue-light: #91b0ff;
  --mint: #46e3ae;
  --mint-ink: #006341;
  --coral: #ff795f;
  --coral-ink: #a92f1c;
  --accent: var(--blue);
  --accent-ink: var(--blue);
  --accent-soft: #edf2ff;
  --line: #dbe4ff;
}

.page-products-tice,
.page-guides-tice,
.page-scenarios-training,
.page-news-different-movement {
  --accent: var(--mint);
  --accent-ink: var(--mint-ink);
  --accent-soft: #e4fff3;
}
.page-products-run,
.page-guides-run,
.page-scenarios-routes,
.page-scenarios-desktop {
  --accent: var(--coral);
  --accent-ink: var(--coral-ink);
  --accent-soft: #fff0e9;
}

::selection { background: var(--blue); color: #fff; }
:focus-visible { outline-color: var(--blue); }
.site-header { border-bottom-color: #dbe4ff; }
.home .site-header { border-bottom-color: #ffffff24; }
.main-nav > a.active { color: var(--blue); }
.main-nav > a.active:after { background: var(--blue); }
.main-nav > a:hover, .nav-disclosure > summary:hover { color: var(--blue); }
.home .main-nav > a:hover, .home .nav-disclosure > summary:hover { color: var(--blue-light); }
.header-cta, .home .header-cta {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  transition: background .25s, transform .25s;
}
.header-cta:hover { background: #1744d3; transform: translateY(-1px); }
.header-cta { display: inline-flex; align-items: center; gap: 12px; }
.nav-arrow { width: 14px; height: 14px; flex-shrink: 0; }
.nav-disclosure > summary { display: flex; align-items: center; gap: 6px; }
.nav-disclosure > summary:after { display: none; }
.nav-chevron { width: 12px; height: 12px; transition: transform .2s; }
.nav-disclosure[open] > summary .nav-chevron { transform: rotate(180deg); }
.nav-panel > a:last-child { justify-content: space-between; }
.mobile-nav > a .nav-arrow { width: 18px; height: 18px; }
.nav-panel { border-color: #c9d8ff; }
.nav-panel a:hover { background: #edf2ff; }
.home .nav-panel { border-color: #ffffff30; }
.home .nav-panel a:hover { background: var(--blue); }
.mobile-nav > a { border-bottom-color: #dbe4ff; }
.home .mobile-nav > a { border-bottom-color: #ffffff25; }
.btn, .btn:hover { background: var(--blue); color: #fff; }
.btn:hover { background: #1744d3; }
.btn.secondary { background: #fff; color: var(--blue); border-color: #b7caff; }
.btn.secondary:hover { background: #edf2ff; border-color: var(--blue); }
.text-link { color: var(--accent-ink); }
.text-link:hover { color: #000; }
.eyebrow { color: var(--accent-ink); }
.eyebrow:before { background: var(--accent); }

/* First screen: silver sculpture, blue typography and a clear primary action. */
.hero-v2-copy h1 > span { color: var(--blue-light); }
.hero-v2-eyebrow > span { background: var(--mint); box-shadow: 0 0 0 4px #46e3ae18; }
.hero-v2-eyebrow { color: #fff; }
.home .hero-v2-copy .btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.home .hero-v2-copy .btn:hover { background: #1744d3; border-color: #1744d3; }
.home .hero-v2-copy .btn.secondary { background: transparent; color: #fff; border-color: #ffffff55; }
.home .hero-v2-copy .btn.secondary:hover { background: #fff; color: #000; border-color: #fff; }
.hero-v2-index { border-top-color: #ffffff26; padding-block: 0; }
.hero-v2-index a {
  position: relative;
  min-height: 104px;
  border-right-color: #ffffff26;
  transition: background .25s;
}
.hero-v2-index a:before {
  content: "";
  position: absolute;
  height: 3px;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--blue);
}
.hero-v2-index a:nth-child(2):before { background: var(--mint); }
.hero-v2-index a:nth-child(3):before { background: var(--coral); }
.hero-v2-index a:hover { background: #2457f51f; }
.hero-v2-index a:nth-child(2):hover { background: #46e3ae15; }
.hero-v2-index a:nth-child(3):hover { background: #ff795f18; }
.hero-v2-index a:nth-child(1) .arrow { color: var(--blue-light); }
.hero-v2-index a:nth-child(2) .arrow { color: var(--mint); }
.hero-v2-index a:nth-child(3) .arrow { color: var(--coral); }
.story-v2 h2 > span { color: var(--blue); }
.story-v2 .eyebrow { color: var(--blue); }
.family-v2 .section-head .eyebrow { color: var(--blue); }

/* Product identity is carried by broad color fields, with the real UI intact. */
.showcase-music .product-v2-label { color: var(--blue); }
.music-screen-v2 {
  background: var(--blue);
  border: 0;
  box-shadow: none;
  border-radius: 24px;
}
.screen-bar i:first-child { background: var(--coral); }
.screen-bar i:nth-child(2) { background: var(--mint); }
.screen-bar i:nth-child(3) { background: #fff; }
.music-screen-v2 > img { border-color: #ffffff40; box-shadow: 0 20px 50px #03184c33; }
.screen-bar span, .music-screen-v2 .screen-note { color: #fff; }
.showcase-tice { border-top-color: #b2efd7; }
.showcase-tice .product-v2-label, .showcase-tice .product-v2-status { color: var(--mint-ink); }
.tice-copy-v2 h4 { color: var(--mint-ink); }
.showcase-tice .text-link { color: var(--mint-ink); }
.phone-stage-v2 {
  background: var(--mint);
  border-radius: 24px;
}
.phone-stage-v2 .screen-note { color: #004d33; }
.showcase-run { border-top-color: #ffc9bc; }
.showcase-run .product-v2-label, .showcase-run .text-link { color: var(--coral-ink); }
.run-stage-v2 { background: var(--coral); border-radius: 24px; }
.run-stage-v2 .screen-note { color: #601c12; }

/* A black chapter links the family; mint and coral mark its branches. */
.connection-v2 { background: #000; }
.connection-v2-heading h2 > span { color: var(--mint); }
.connection-v2-heading .eyebrow:before { background: var(--mint); }
.connection-v2-heading .text-link, .connection-v2-heading .text-link:hover { color: #fff; }
.ecosystem-v2-links { border-top-color: #ffffff40; }
.ecosystem-v2-link { border-right-color: #ffffff40; position: relative; }
.ecosystem-v2-link .num { color: #fff; }
.ecosystem-v2-link:nth-child(2) .num { color: var(--mint); }
.ecosystem-v2-link:nth-child(3) .num { color: #ffe1d8; }
.ecosystem-v2-link .text-link { color: #fff; border-color: #ffffff65; }
.ecosystem-v2-link:hover h3, .ecosystem-v2-link:hover .text-link { color: #fff; }
.ecosystem-v2-link:hover .text-link { border-color: #fff; }
.scene-card { background: #fff; border-color: #dbe4ff; }
.scene-card:first-child .scene-art { background: #dce7ff; }
.scene-card:nth-child(2) { border-color: #a4ebd0; }
.scene-card:nth-child(2) .scene-art { background: var(--mint); }
.scene-card:first-child .kicker { color: var(--blue); }
.scene-card:nth-child(2) .kicker { color: var(--mint-ink); }
.scene-card:first-child .circle-arrow { color: var(--blue); border-color: #b7caff; }
.scene-card:nth-child(2) .circle-arrow { color: var(--mint-ink); border-color: #83d9b9; }
.scene-card:hover .circle-arrow { background: var(--blue); color: #fff; border-color: var(--blue); }
.scene-card:nth-child(2):hover .circle-arrow { background: var(--mint-ink); border-color: var(--mint-ink); }
.journal-art.a1 { background: #dce7ff; }
.journal-art.a2 { background: #ffd5ca; }
.journal-art.a3 { background: #c6f8e6; }
.journal-card .text-link { color: var(--blue); border-color: #b7caff; }
.journal-card:nth-child(2) .text-link { color: var(--coral-ink); border-color: #ffc9bc; }
.journal-card:nth-child(3) .text-link { color: var(--mint-ink); border-color: #a4ebd0; }

/* Interior pages inherit a theme, while keeping the text on a clean surface. */
.breadcrumb { padding-bottom: 24px; }
.page-hero {
  padding: 58px 48px;
  margin-bottom: 44px;
  border-radius: 24px;
  background: linear-gradient(112deg, #fff 5%, var(--accent-soft) 100%);
  border: 1px solid var(--accent-soft);
  border-top: 4px solid var(--accent);
}
.page-hero .display { color: #000; }
.page-hero .eyebrow { color: var(--accent-ink); }
.page-hero .lead { color: #000; max-width: 760px; }
.hero-brand.tongxue { background: #cddcff !important; }
.hero-brand.tice { background: var(--mint) !important; }
.hero-brand.run { background: var(--coral) !important; }
.hero-brand:before, .hero-brand:after { border-color: #ffffff80; }
.hero-brand img { border-radius: 28%; box-shadow: 0 16px 42px #00000014; }
.product-card { border-color: #c9d8ff; }
.product-card.tice { border-color: #a4ebd0; }
.product-card.run { border-color: #ffc9bc; }
.product-card.tongxue .card-art { background: #cddcff; }
.product-card.tice .card-art { background: var(--mint); }
.product-card.run .card-art { background: var(--coral); }
.product-card .card-art img { border-radius: 26%; }
.product-card .eyebrow, .product-card .card-actions { color: var(--blue); }
.product-card.tice .eyebrow, .product-card.tice .card-actions { color: var(--mint-ink); }
.product-card.run .eyebrow, .product-card.run .card-actions { color: var(--coral-ink); }
.card-actions a:hover { text-decoration: underline; text-underline-offset: 5px; }
.tags span, .badge { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.product-card.tongxue .tags span { background: #edf2ff; color: var(--blue); border-color: #edf2ff; }
.product-card.tice .tags span { background: #e4fff3; color: var(--mint-ink); border-color: #e4fff3; }
.product-card.run .tags span { background: #fff0e9; color: var(--coral-ink); border-color: #fff0e9; }
.filter-btn { border-color: #c9d8ff; }
.filter-btn:hover { background: #edf2ff; }
.filter-btn[aria-pressed=true] { background: var(--blue); color: #fff; border-color: var(--blue); }
.filter-input, .search-dialog input { border-color: #b7caff; }
.content-grid .info-card { border-top: 3px solid var(--blue); }
.content-grid .info-card:nth-child(3n+2) { border-top-color: var(--mint); }
.content-grid .info-card:nth-child(3n+3) { border-top-color: var(--coral); }
.content-grid .info-card .num { color: var(--blue); }
.content-grid .info-card:nth-child(3n+2) .num { color: var(--mint-ink); }
.content-grid .info-card:nth-child(3n+3) .num { color: var(--coral-ink); }
.statement em, .page-ecosystem .statement em { color: var(--accent-ink); }
.wide-visual { background: #dce7ff !important; }
.wide-visual.phone-gallery { background: #bdf4df !important; }
.page-products-run .wide-visual,
.page-scenarios-routes .wide-visual,
.page-scenarios-desktop .wide-visual { background: #ffd5ca !important; }
.dark-section { background: #000; }
.network-core { background: var(--blue); border-color: #91b0ff; box-shadow: 0 0 80px #2457f530; }
.network-node.n1 { background: var(--blue); border-color: #91b0ff; color: #fff; }
.network-node.n2 { background: var(--mint); border-color: var(--mint); color: #002f20; }
.network-node.n3 { background: var(--coral); border-color: var(--coral); color: #49170d; }
.network:before, .network:after { border-color: #91b0ff80; }
.notice { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.page-products-tice .notice, .page-guides-tice .notice { background: #e4fff3; border-color: var(--mint); color: var(--mint-ink); }
.copy-box { background: var(--accent-soft); }
.copy-box code { color: var(--accent-ink); }
.copy-box button { color: var(--blue); border-color: #b7caff; }
.compare-table th { background: #edf2ff; }
.compare-table th, .compare-table td,
.directory-link, .step, .faq details, .content-block, .filters, .line { border-color: #dbe4ff; }
.step:before { color: var(--accent-ink); }
.directory-link:hover .arrow { color: var(--blue); }
.directory-link:nth-child(3n+1) .num { color: var(--blue); }
.directory-link:nth-child(3n+2) .num { color: var(--mint-ink); }
.directory-link:nth-child(3n+3) .num { color: var(--coral-ink); }
.faq details[open] summary { color: var(--blue); }
.side-nav a:hover, .prose a { color: var(--accent-ink); }
.brand-showcase { background: #edf2ff; border-color: #c9d8ff; }
.brand-sample { border-color: #c9d8ff; }
.palette { grid-template-columns: repeat(5, 1fr); }
.swatch small { opacity: 1; }
.search-dialog { border-color: #b7caff; }
.search-result:hover { background: #edf2ff; border-radius: 8px; }
.search-result strong { color: var(--blue); }
.back-top { color: var(--blue); border-color: #b7caff; }

/* A calm ending, signed by the three accents. */
.cta-panel {
  position: relative;
  border-top: 0;
  border-radius: 24px;
  background: #edf2ff;
  padding: 62px 48px;
  margin-top: 12px;
  margin-bottom: 70px;
}
.cta-panel:before {
  content: "";
  position: absolute;
  top: 0;
  left: 48px;
  width: 44px;
  height: 4px;
  background: var(--blue);
  box-shadow: 44px 0 var(--mint), 88px 0 var(--coral);
  border-radius: 0 0 4px 4px;
}
.cta-panel .text-link { color: var(--blue); }
.site-footer {
  position: relative;
  background: #000;
  border-top: 0;
}
.site-footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0 33.333%, var(--mint) 33.333% 66.666%, var(--coral) 66.666% 100%);
}
.footer-col:nth-child(2) h3 { color: var(--blue-light); }
.footer-col:nth-child(3) h3 { color: var(--mint); }
.footer-col:nth-child(4) h3 { color: var(--coral); }
.footer-col a:hover { color: var(--blue-light); }
.footer-bottom { border-top-color: #ffffff30; }
.footer-mail { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--blue-light); font-size: 12px; margin-top: 20px; }
.footer-mail > span { width: 100%; font-size: 10px; color: #fff; }
.footer-mail:hover { color: #fff; }
.footer-mail .nav-arrow { width: 12px; height: 12px; }
.official-mailbox { padding: 34px 38px; border: 1px solid #c9d8ff; background: #edf2ff; border-radius: 22px; margin-bottom: 45px; }
.official-mailbox .eyebrow { margin-bottom: 18px; }
.official-mailbox h2 { font-size: 22px; margin-bottom: 13px; }
.mail-address { display: inline-block; color: var(--blue); font-size: clamp(22px, 3vw, 38px); font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.mail-address:hover { color: #000; }
.official-mailbox > p { color: #000; font-size: 14px; margin-top: 16px; }

@media (max-width: 1100px) {
  .page-hero { padding: 44px 30px; }
  .page-hero.split { gap: 30px; }
  .cta-panel { padding: 50px 32px; }
  .cta-panel:before { left: 32px; }
}
@media (max-width: 850px) {
  .header-cta { display: none; }
  .hero-v2-index a { min-height: 90px; }
  .page-hero { padding: 40px 26px; }
  .page-hero .display { font-size: clamp(38px, 5.7vw, 58px); }
  .page-hero.split { grid-template-columns: 1fr; }
  .page-hero.split .hero-brand { min-height: 245px; }
  .palette { grid-template-columns: repeat(3, 1fr); }
  .cta-panel { gap: 30px; }
}
@media (max-width: 600px) {
  .official-mailbox { padding: 26px 22px; border-radius: 18px; margin-bottom: 30px; }
  .official-mailbox h2 { font-size: 19px; }
  .official-mailbox > p { font-size: 13px; }
  .official-mailbox .btn { font-size: 12px; padding: 12px 20px; gap: 20px; }
  .hero-v2-index { margin-top: 21px; padding-block: 0; }
  .hero-v2-index a { padding-top: 20px; padding-bottom: 20px; min-height: 130px; }
  .music-screen-v2, .phone-stage-v2, .run-stage-v2 { border-radius: 16px; }
  .ecosystem-v2-link { border-bottom-color: #ffffff40; }
  .breadcrumb { padding-bottom: 20px; }
  .page-hero { padding: 34px 22px; border-radius: 18px; margin-bottom: 32px; }
  .page-hero .display { font-size: clamp(32px, 8.4vw, 42px); line-height: 1.25; }
  .page-hero .lead { font-size: 13px; }
  .page-hero .btn { gap: 16px; font-size: 12px; padding: 12px 18px; }
  .hero-brand { border-radius: 14px; }
  .palette { grid-template-columns: repeat(2, 1fr); }
  .cta-panel { padding: 44px 24px; border-radius: 18px; margin-bottom: 44px; }
  .cta-panel:before { left: 24px; }
  .cta-panel h2 { font-size: 30px; }
}