:root {
  color-scheme: light;

  --bg: #fbfaf8;
  --bg-raised: #ffffff;
  --surface: #ffffff;
  --surface-hi: #f5f4f0;

  --band: #f2f1ec;
  --line: rgba(20, 24, 31, 0.11);
  --line-strong: rgba(20, 24, 31, 0.22);

  --ink: #14181f;
  --ink-soft: #434c59;
  --ink-mute: #636c7a;

  --accent: #1d4ed8;
  --accent-hi: #1b3faf;
  --accent-soft: #eef2ff;
  --teal: #0f766e;
  --teal-soft: #e7f5f2;
  --amber: #b45309;
  --amber-soft: #fdf3e6;

  --ochre: #8a6212;
  --ochre-soft: #f7efd9;
  --ochre-line: rgba(138, 98, 18, 0.45);

  --shadow-s: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-m: 0 10px 30px -12px rgba(20, 24, 31, 0.18);

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 22px;

  --shell: 1120px;
  --gap: clamp(1rem, 2.4vw, 1.5rem);
  --head-h: 69px;

  --flow-pad: clamp(1.1rem, 2.4vw, 1.6rem);
  --flow-gap: 1.75rem;

  --duration-micro: 150ms;
  --duration-normal: 300ms;
  --duration-reveal: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-cjk: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
    "Hiragino Sans TC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body[lang^="zh"] {
  font-family: var(--font-cjk), var(--font);
  line-height: 1.9;
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  position: absolute;
  inset: -25vh 0 auto 0;
  height: 80vh;
  background:
    radial-gradient(55% 50% at 50% 0%, rgba(29, 78, 216, 0.07), transparent 70%),
    radial-gradient(38% 38% at 85% 8%, rgba(15, 118, 110, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }

.link-arrow { width: 16px; height: 16px; flex: none; vertical-align: -0.15em; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-out);
}
a:hover { color: var(--accent-hi); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-m);
  z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(251, 250, 248, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}
.site-head--pinned { border-bottom-color: var(--line); }

.site-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
  min-height: 68px;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: var(--shadow-s);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-hi);
}
.site-nav a {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 450;
  padding: 0.36rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
  transition: color var(--duration-micro) var(--ease-out),
    background var(--duration-micro) var(--ease-out),
    box-shadow var(--duration-micro) var(--ease-out);
}
.site-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 550;
  background: var(--surface);
  box-shadow: var(--shadow-s), 0 0 0 1px var(--line);
}

.site-head__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.site-cta { flex-shrink: 0; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--duration-micro) var(--ease-out),
    background var(--duration-micro) var(--ease-out);
}
.lang-switch:hover { color: var(--ink); background: var(--surface-hi); }
.lang-switch svg { width: 15px; height: 15px; opacity: 0.75; }

@media (max-width: 960px) {
  .site-head__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    row-gap: 0.5rem;
    padding-block: 0.6rem;
    min-height: 0;
  }
  .brand { grid-area: brand; }
  .site-head__actions { grid-area: actions; }
  .site-nav {
    grid-area: nav;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 1 0 auto; }
}

@media (max-width: 560px) {

  .site-head .site-cta { display: none; }
  .site-nav a { padding-inline: 0.55rem; font-size: 0.84rem; }
}

@media (max-width: 430px) {
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: 0.4rem; font-size: 0.8rem; }
}

section { padding-block: clamp(3.5rem, 7.5vw, 6.25rem); }

section[id] { scroll-margin-top: calc(var(--head-h) - 1rem); }

.band {
  background: var(--band);
  border-block: 1px solid var(--line);

  --surface-hi: #faf9f6;
}

.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

body[data-page="roadmap"] section { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
body[data-page="roadmap"] .page-hero { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 2vw, 1.5rem); }

.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
body[lang^="zh"] .eyebrow { letter-spacing: 0.2em; }

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.15;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 3.85rem); }

h2 { font-size: clamp(1.75rem, 3.6vw, 2.55rem); max-width: 30ch; }
p { text-wrap: pretty; }
h3 { font-size: 1.06rem; line-height: 1.4; }

body[lang^="zh"] h1,
body[lang^="zh"] h2 {
  line-height: 1.32;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body[lang^="zh"] h2 { max-width: 24em; }

@media (max-width: 600px) {
  body[lang^="zh"] h1,
  body[lang^="zh"] h2 { word-break: normal; }
}

.section-lead {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  max-width: 62ch;
  margin: 1.1rem 0 0;
}

.hero {
  padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.hero .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  border-radius: 999px;
  padding: 0.34rem 0.9rem 0.34rem 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.hero h1 { margin-top: 1.5rem; max-width: 24ch; font-size: clamp(2.2rem, 5vw, 3.4rem); }

body[lang^="zh"] .hero h1 { max-width: 12em; }

.hero__lead {
  margin: 1.15rem 0 0;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 58ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.hero__facts {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.5rem;
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.hero__facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  color: var(--teal);
  background: var(--teal-soft);
}

@media (max-width: 600px) {
  .hero { text-align: start; }
  .hero .shell { align-items: flex-start; }
  .hero__actions { justify-content: flex-start; }
  .hero__facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.72rem 1.45rem;
  font-size: 0.95rem;
  font-weight: 550;
  border: 1px solid transparent;
  transition: transform var(--duration-micro) var(--ease-spring),
    background var(--duration-micro) var(--ease-out),
    border-color var(--duration-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-m);
}
.btn--primary:hover { background: var(--accent-hi); color: #ffffff; }
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--compact {
  padding: 0.42rem 0.95rem;
  font-size: 0.84rem;
  box-shadow: var(--shadow-s);
}

.hero__note {
  margin: 1.2rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-mute);
  max-width: 60ch;
}

body[data-page="home"] { --bg: #fffefa; --band: #f4f6fc; }
body[data-page="home"]::before { display: none; }
body[data-page="home"] .shell { --shell: 1240px; }
body[data-page="home"] .site-head { background: rgba(255, 254, 250, 0.94); }
body[data-page="home"] .brand { font-weight: 750; }
body[data-page="home"] .btn--primary { background: #17243b; box-shadow: none; }
body[data-page="home"] .btn--primary:hover { background: var(--accent); }
body[data-page="home"] .btn { min-height: 48px; font-weight: 650; }
body[data-page="home"] h2 { font-weight: 750; letter-spacing: -0.025em; }

.studio-hero { padding-block: clamp(2rem, 5vw, 4rem) 0; text-align: start; }
.studio-hero .studio-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.studio-hero__copy { min-width: 0; padding-block: 1rem 2.5rem; }
.studio-hero__eyebrow {
  margin: 0 0 1.8rem;
  color: #314f86;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.075em;
}
.studio-hero h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.8rem, 6.8vw, 5.9rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.04em;
  word-spacing: 0.045em;
  text-wrap: initial;
}
.studio-hero h1 > span { display: block; }
.studio-hero__accent { max-width: 8ch; color: #2856d8; }
.studio-hero .hero__lead { margin-top: 1.7rem; max-width: 43ch; font-size: 1.12rem; line-height: 1.7; }
.studio-hero .hero__actions { justify-content: flex-start; gap: 0.65rem; margin-top: 1.75rem; }
.studio-hero .hero__actions svg { width: 17px; height: 17px; }
.studio-hero__status { margin-top: 1.7rem; }
.studio-hero .hero-pill {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem 0.7rem;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.76rem;
}
.studio-hero .hero-pill b { display: none; }
.studio-hero .hero-pill__now {
  color: #475263;
  padding: 0;
  border: 0;
  background: transparent;
}
.studio-hero .hero-pill__now::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #6a778c;
  border-radius: 50%;
}
.studio-hero .studio-hero__foundation { display: block; margin-top: 2rem; }
.studio-hero .hero__facts {
  margin: 0;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  justify-content: space-between;
  gap: 0.7rem 1.5rem;
}
.studio-hero .hero__facts li { font-size: 0.83rem; }
.studio-hero .hero__facts svg { color: #2856d8; background: #eaf0ff; }

.studio-spotlight { width: 100%; min-width: 0; margin: 0; }
.studio-spotlight__scene { position: relative; height: 560px; isolation: isolate; }
.studio-spotlight__orb {
  position: absolute;
  z-index: -1;
  inset: 85px 1% auto 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dce8ff;
}
.studio-spotlight__prompt {
  position: absolute;
  top: 20px;
  left: 3%;
  width: 92%;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 1.05rem 1.3rem;
  border: 1px solid #d8dfeb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px -20px #31456655;
  transform: rotate(-3deg);
}
.studio-spotlight__spark { color: #2856d8; font-size: 2rem; line-height: 1; }
.studio-spotlight small { display: block; color: #65728a; font-size: 0.7rem; line-height: 1.6; }
.studio-spotlight__prompt p { margin: 0.1rem 0 0; font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
.studio-companion {
  position: absolute;
  top: 125px;
  left: 19%;
  width: 77%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 15px 8px #5975ad20);
  animation: companion-float 3.6s ease-in-out 1;
}
@keyframes companion-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
.studio-spotlight__source {
  position: absolute;
  top: 304px;
  left: 0;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  max-width: 85%;
  padding: 0.85rem 1rem;
  border: 1px solid #d8dfeb;
  border-radius: 14px;
  color: #23314b;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 550;
  box-shadow: 0 10px 24px -18px #31456655;
  transform: rotate(-4deg);
}
.studio-spotlight__source svg { flex: none; width: 24px; height: 24px; color: #2856d8; }
.studio-spotlight__result {
  position: absolute;
  bottom: 0;
  left: 3%;
  width: 94%;
  padding: 1.2rem 1.3rem;
  border: 1px solid #d8dfeb;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 15px 38px -25px #31456666;
}
.studio-spotlight__team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0 0 1rem;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #e7ebf3;
}
.studio-spotlight__team li { display: flex; align-items: center; gap: 0.5rem; }
.studio-spotlight__team b { display: block; font-size: 0.8rem; line-height: 1.2; }
.studio-spotlight__team .sc-avatar { width: 30px; height: 30px; font-size: 0.75rem; border-radius: 10px; }
.studio-spotlight__outcome { display: flex; align-items: flex-start; gap: 0.8rem; padding-top: 1rem; }
.studio-spotlight__check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf0ff; color: #2856d8; }
.studio-spotlight__check svg { width: 17px; height: 17px; }
.studio-spotlight__outcome h2 { max-width: none; font-size: 1rem; line-height: 1.4; letter-spacing: -0.015em; }
.studio-spotlight__outcome p { margin: 0.35rem 0 0; color: #59677d; font-size: 0.8rem; line-height: 1.65; }
.studio-spotlight figcaption { position: relative; z-index: 1; margin-top: 1.2rem; text-align: center; font-size: 0.75rem; color: #65728a; }
.studio-demo { padding-block: clamp(3.5rem, 7vw, 6rem); }
.studio-demo .hs { margin-top: 2rem; max-width: none; }
body[data-page="home"] .studio-demo .shell > h2,
body[data-page="home"] #coming .shell > h2 { max-width: 23ch; font-size: clamp(2.2rem, 4.2vw, 3.45rem); }
body[data-page="home"] #coming { background: #f4f6fc; border-color: #e2e7f1; }
body[data-page="home"] .showcase__panel { gap: clamp(2rem, 4vw, 3.5rem); }

body[data-page="home"][lang^="zh"] .studio-hero h1 { max-width: 7.6em; font-size: clamp(3.2rem, 5.3vw, 4.7rem); line-height: 1.16; font-weight: 800; letter-spacing: -0.04em; }
body[data-page="home"][lang^="zh"] .studio-hero__accent { max-width: none; }
body[data-page="home"][lang^="zh"] .studio-hero .hero__lead { max-width: 26em; font-size: 1.04rem; line-height: 1.9; }
body[data-page="home"][lang^="zh"] .studio-hero__eyebrow { letter-spacing: 0.14em; }

@media (min-width: 961px) and (max-width: 1160px) {
  body[data-page="home"] .site-nav a { padding-inline: 0.7rem; }
  body[data-page="home"] .site-head__inner { gap: 0.8rem; }
}
@media (max-width: 1000px) {
  .studio-hero .studio-hero__grid { gap: 2rem; }
  .studio-hero h1 { font-size: clamp(3.4rem, 7vw, 4.8rem); }
  .studio-spotlight__scene { height: 500px; }
  .studio-companion { top: 145px; }
  .studio-spotlight__source { top: 285px; font-size: 0.68rem; }
  .studio-spotlight__result { padding: 1rem; }
  .studio-spotlight__team li { gap: 0.35rem; }
  .studio-spotlight__prompt p { font-size: 1.1rem; }
}
@media (max-width: 760px) {
  .studio-hero { padding-top: 2.5rem; }
  .studio-hero .studio-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .studio-hero__copy { padding-block: 0; }
  .studio-hero h1 { max-width: 12ch; font-size: clamp(3.8rem, 10.5vw, 5.5rem); }
  .studio-hero .hero__lead { max-width: 48ch; }
  .studio-hero__eyebrow { margin-bottom: 1.3rem; }
  .studio-spotlight { max-width: 540px; margin: 0 auto; }
  .studio-spotlight__scene { height: 530px; }
  .studio-companion { top: 130px; }
  .studio-spotlight__source { top: 295px; }
  .studio-hero .hero__facts { display: grid; gap: 0.9rem; }
  .studio-hero .studio-hero__foundation { margin-top: 2rem; }
  body[data-page="home"][lang^="zh"] .studio-hero h1 { max-width: 7.6em; font-size: clamp(2.8rem, 8.3vw, 4.2rem); }
}
@media (max-width: 400px) {
  .studio-hero h1 { font-size: 3.5rem; }
  .studio-hero .hero__actions { flex-direction: column; align-items: flex-start; }
  .studio-spotlight__scene { height: 490px; }
  .studio-spotlight__orb { top: 110px; }
  .studio-companion { top: 155px; }
  .studio-spotlight__source { top: 282px; }
  .studio-spotlight__team .sc-avatar { width: 25px; height: 25px; }
  .studio-spotlight__result { padding: 1rem 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-companion { animation: none; }
}

.team-work,
.team-jobs { padding-block: clamp(4rem, 8vw, 7rem); }
.team-work { background: #ffffff; }
.team-work__head { max-width: 760px; margin-bottom: 2.5rem; }
.team-work__head h2,
.team-jobs__copy h2 { max-width: 23ch; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.12; }
.team-work__head .section-lead,
.team-jobs__copy .section-lead { font-size: 1.04rem; line-height: 1.75; }
.team-work__note { margin: 1rem 0 0; max-width: 64ch; color: #657086; font-size: 0.76rem; line-height: 1.75; }
.team-work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.team-card { min-width: 0; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid #eceef3; border-radius: 22px; background: #f5f6f8; }
.team-card h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.team-card__detail { max-width: 45ch; margin: 0.7rem 0 0; color: #576376; font-size: 0.93rem; line-height: 1.7; }
.team-card__visual { width: 100%; min-height: 255px; display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; margin: 1.5rem 0 0; padding: 1.25rem; border-radius: 16px; background: #e9edf5; }
.team-source { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid #dfe5f0; border-radius: 12px; background: #ffffff; }
.team-source svg { flex: none; width: 24px; height: 24px; color: #2856d8; }
.team-source > div { min-width: 0; }
.team-source b,
.team-role b { display: block; color: #23314b; font-size: 0.84rem; font-weight: 650; line-height: 1.5; }
.team-source small,
.team-role small { display: block; margin-top: 0.15rem; color: #657086; font-size: 0.71rem; line-height: 1.5; overflow-wrap: anywhere; }
.team-quote { margin: 0; padding: 1rem 1.1rem; border: 1px solid #dfe5f0; border-left: 3px solid #2856d8; border-radius: 3px 12px 12px 3px; color: #32425b; background: #ffffff; font-size: 0.9rem; line-height: 1.7; }
.team-mini-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; max-width: 100%; padding: 0.25rem 0.6rem; border: 1px solid #d9e2f9; border-radius: 6px; color: #31599e; background: #edf2ff; font-size: 0.66rem; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.team-role-list { display: grid; gap: 0.65rem; }
.team-role { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.7rem 0.9rem; border: 1px solid #dfe5f0; border-radius: 12px; background: #ffffff; }
.team-role .sc-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 0.78rem; }
.team-role-link { display: flex; align-items: center; justify-content: center; gap: 0.45rem; color: #5a6981; font-size: 0.7rem; line-height: 1.5; }
.team-role-link svg { flex: none; width: 16px; height: 16px; color: #2856d8; }
.team-card--review .team-card__visual { align-items: center; gap: 0.45rem; }
.team-draft { width: 100%; padding: 1rem 1.1rem; border: 1px solid #dfe5f0; border-radius: 12px; background: #ffffff; }
.team-draft > span { display: block; margin-bottom: 0.45rem; color: #657086; font-size: 0.66rem; font-weight: 550; }
.team-draft > b { display: block; color: #23314b; font-size: 0.95rem; font-weight: 650; line-height: 1.5; }
.team-draft--old { background: #f5f7fb; }
.team-draft--old > b { color: #69768a; text-decoration-color: #c0c9d8; text-decoration-line: line-through; text-decoration-thickness: 1px; }
.team-draft--new { border-color: #bdcef3; }
.team-draft--new > span { color: #2856d8; }
.team-draft__arrow { color: #2856d8; font-size: 1.1rem; line-height: 1; }
.team-draft__arrow svg { width: 20px; height: 20px; }
.team-decision { width: 100%; padding: 1.1rem; border: 1px solid #dfe5f0; border-radius: 12px; background: #ffffff; }
.team-decision > b { display: block; margin: 0.75rem 0 0; color: #23314b; font-size: 1rem; font-weight: 650; line-height: 1.5; }
.team-decision > p { margin: 0.5rem 0 0; color: #5a6981; font-size: 0.78rem; line-height: 1.7; }
.team-decision__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.team-decision__actions > span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.35rem 0.8rem; border: 1px solid #dce3ee; border-radius: 8px; color: #5a6981; background: #ffffff; font-size: 0.72rem; font-weight: 550; line-height: 1.4; }
.team-decision__actions > span:first-child { border-color: #2856d8; color: #ffffff; background: #2856d8; }

.team-jobs { background: #fffefa; }
.team-jobs__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.team-jobs__copy { min-width: 0; }
.team-jobs__copy h2 { max-width: 14ch; }
.team-jobs__tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.65rem 0 1.4rem; }
.team-jobs__tabs[hidden] { display: none; }
.team-job-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.65rem 0.95rem; border: 1px solid #dfe4ed; border-radius: 999px; color: #47546a; background: #ffffff; font: inherit; font-size: 0.79rem; font-weight: 650; line-height: 1.4; cursor: pointer; transition: background var(--duration-micro) var(--ease-out), color var(--duration-micro) var(--ease-out), border-color var(--duration-micro) var(--ease-out); }
.team-job-tab:hover { border-color: #9eb6ed; color: #2856d8; background: #eef3ff; }
.team-job-tab[aria-selected="true"] { border-color: #17243b; color: #ffffff; background: #17243b; }
.team-job-tab:focus-visible { outline: 2px solid #2856d8; outline-offset: 4px; }
.team-job-description h3 { font-size: 1.06rem; font-weight: 650; line-height: 1.5; }
.team-job-description p { margin: 0.55rem 0 0.8rem; color: #576376; font-size: 0.92rem; line-height: 1.8; }
.team-job-description .inline-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: #2856d8; font-size: 0.82rem; font-weight: 650; }
.team-job-description .inline-link svg { flex: none; width: 16px; height: 16px; }
.team-job-description .inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.team-job-description[hidden],
.team-job-panel[hidden] { display: none; }
.team-jobs__panels { min-width: 0; }
.team-job-panel { overflow: hidden; min-width: 0; border: 1px solid #d7dfea; border-radius: 20px; background: #ffffff; box-shadow: 0 24px 60px -35px #233b6650; }
.team-job-window__chrome { display: flex; align-items: center; gap: 1rem; min-height: 45px; padding: 0.7rem 1rem; border-bottom: 1px solid #e5e9f0; background: #f6f8fb; }
.team-job-window__chrome > span:last-child { color: #647188; font-size: 0.69rem; font-weight: 550; line-height: 1.4; }
.team-job-window__chrome .dottrio { flex: none; display: flex; gap: 5px; }
.team-job-window__chrome .dottrio > i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #c3ccda; }
.team-job-window__body { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 2.2fr); min-height: 455px; }
.team-job-window__rail { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.2rem 0.75rem; border-right: 1px solid #e5e9f0; background: #f8f9fc; }
.team-job-member { display: flex; align-items: flex-start; gap: 0.5rem; padding: 7px; border: 1px solid transparent; border-radius: 8px; min-width: 0; }
.team-job-member--active { border-color: #dae4f8; background: #edf3ff; }
.team-job-member .sc-avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 0.65rem; }
.team-job-member > span:last-child { min-width: 0; }
.team-job-member b { display: block; margin-top: 0.05rem; color: #2d3b51; font-size: 0.73rem; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.team-job-member--active b { color: #2856d8; font-weight: 750; }
.team-job-member small { display: block; margin-top: 0.1rem; color: #657086; font-size: 0.7rem; line-height: 1.5; overflow-wrap: anywhere; }
.team-job-window__conversation { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.2rem; }
.team-job-message--you { align-self: flex-end; max-width: 94%; padding: 0.75rem 0.9rem; border: 1px solid #e0e6f5; border-radius: 13px 13px 4px 13px; background: #edf2ff; }
.team-job-message--you small { color: #4b6493; font-size: 0.7rem; font-weight: 650; }
.team-job-message--you p { margin: 0.3rem 0 0; color: #32425b; font-size: 0.9rem; line-height: 1.75; }
.team-job-message--reply { width: 100%; min-width: 0; }
.team-job-message__who { display: flex; align-items: center; gap: 0.45rem; }
.team-job-message__who b { color: #2d3b51; font-size: 0.72rem; font-weight: 650; line-height: 1.5; }
.team-job-message__who .sc-avatar { width: 23px; height: 23px; font-size: 0.61rem; }
.team-job-message--reply > p { margin: 0.45rem 0 0.55rem; color: #576376; font-size: 0.9rem; line-height: 1.8; }
.team-job-message--reply .team-mini-tag { font-size: 0.68rem; }
.team-job-result { width: 100%; padding: 0.95rem 1rem; border: 1px solid #d6e1f8; border-radius: 12px; background: #f5f8ff; }
.team-job-result > small { display: block; color: #597199; font-size: 0.63rem; font-weight: 550; line-height: 1.5; }
.team-job-result h3 { margin: 0.35rem 0 0; color: #23314b; font-size: 0.96rem; font-weight: 700; line-height: 1.5; }
.team-job-result__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.team-job-result__tags > span { padding: 0.2rem 0.45rem; border: 1px solid #dce5f7; border-radius: 5px; color: #58719b; background: #ffffff; font-size: 0.68rem; line-height: 1.5; }
.team-job-window__composer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 40px; margin-top: auto; padding: 0.6rem 0.7rem; border: 1px solid #e1e6ef; border-radius: 9px; color: #78849a; background: #ffffff; font-size: 0.75rem; line-height: 1.5; }
.team-job-window__composer svg { flex: none; width: 16px; height: 16px; color: #647a9f; }

body[data-page="home"][lang^="zh"] .team-work__head h2,
body[data-page="home"][lang^="zh"] .team-jobs__copy h2 { line-height: 1.35; }
body[data-page="home"][lang^="zh"] .team-jobs__copy h2 { max-width: 10em; }

@media (max-width: 1000px) {
  .team-jobs__grid { gap: 2rem; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .team-job-window__body { grid-template-columns: 110px minmax(0, 1fr); }
  .team-job-window__rail { padding-inline: 0.6rem; }
  .team-job-member { gap: 0.4rem; }
  .team-job-member .sc-avatar { width: 23px; height: 23px; }
  .team-job-window__conversation { padding: 1rem; }
}
@media (max-width: 860px) {
  .team-jobs__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .team-jobs__copy { max-width: 640px; }
  .team-jobs__copy h2 { max-width: 23ch; }
  body[data-page="home"][lang^="zh"] .team-jobs__copy h2 { max-width: 18em; }
  .team-job-window__body { grid-template-columns: minmax(140px, 0.8fr) minmax(0, 2.2fr); }
  .team-job-window__rail { padding: 1.3rem 1rem; }
  .team-job-window__conversation { padding: 1.3rem; }
}
@media (max-width: 620px) {
  .team-work,
  .team-jobs { padding-block: 3.5rem; }
  .team-work__head { margin-bottom: 1.7rem; }
  .team-work__head h2,
  .team-jobs__copy h2 { font-size: clamp(2rem, 7vw, 2.5rem); }
  .team-work__head .section-lead,
  .team-jobs__copy .section-lead { font-size: 0.97rem; }
  .team-work__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .team-card { padding: 1.5rem; border-radius: 18px; }
  .team-card h3 { font-size: 1.4rem; }
  .team-card__visual { min-height: 230px; margin-top: 1.25rem; padding: 1rem; }
  .team-jobs__tabs { gap: 0.4rem; }
  .team-job-tab { padding-inline: 0.8rem; font-size: 0.76rem; }
  .team-job-window__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .team-job-window__rail { flex-direction: row; flex-wrap: wrap; gap: 0.65rem 1rem; padding: 0.85rem 1rem; border-right: 0; border-bottom: 1px solid #e5e9f0; }
  .team-job-member { flex: 1 1 75px; gap: 0.4rem; }
  .team-job-window__rail .team-job-member:not(.team-job-member--active) { display: none; }
  .team-job-member b { font-size: 0.68rem; }
  .team-job-member small { font-size: 0.7rem; }
  .team-job-window__conversation { gap: 1rem; padding: 1rem; }
  .team-job-message--you { max-width: 94%; }
  .team-job-window__composer { margin-top: 0.2rem; }
}

.pipeline {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.pipeline figcaption {
  color: var(--ink-mute);
  font-size: 0.88rem;
  margin-top: 1.2rem;
  max-width: 70ch;
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--flow-gap);
  padding-inline: var(--flow-pad);
}

.flow__device {

  grid-row: 3;
  grid-column: 1 / -1;
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-m);
  padding: clamp(1.9rem, 3.4vw, 2.4rem) var(--flow-pad) clamp(1.1rem, 2vw, 1.4rem);
}

.flow > .flow__device { margin-inline: calc(var(--flow-pad) * -1); }

.flow__boundary {
  position: absolute;
  top: -0.78em;
  inset-inline-start: 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--teal-soft);
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
body[lang^="zh"] .flow__boundary { letter-spacing: 0.08em; }

.flow__self {
  margin: clamp(1.2rem, 2.2vw, 1.5rem) 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 500;
}

.flow__steps {
  display: flex;
  align-items: stretch;
  gap: var(--flow-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow__step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  padding: 1rem 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
}

.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--flow-gap) / -2 - 4px);
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-inline-end: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}

.flow__num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.flow__label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.flow__detail {
  margin: 0.35rem 0 0;
  color: var(--ink-mute);
  font-size: 0.83rem;
  line-height: 1.5;
}

.flow__out {
  margin-top: auto;
  padding-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--ink-soft);
}
body[lang^="zh"] .flow__out { font-family: var(--font-cjk), var(--mono); }
.flow__out::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--line-strong);
}

.flow__link {
  grid-row: 2;
  grid-column: 3;
  display: grid;
  justify-items: center;
  padding-block: 0.9rem;
  position: relative;
}
.flow__link::before,
.flow__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  height: 0.9rem;
  border-inline-start: 2px dashed var(--amber);
}
.flow__link::before { top: 0; }
.flow__link::after { bottom: 0; }

.flow__branch {
  border: 1px solid var(--amber);
  background: var(--bg);
  border-radius: 999px;
  padding: 0.12rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}

.flow__offsite {
  grid-row: 1;
  grid-column: 3 / -1;
  border: 1px dashed var(--amber);
  border-radius: var(--radius);
  background: var(--amber-soft);
  padding: 1.1rem 1.3rem;
}

.flow__offsite-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.35rem;
}
body[lang^="zh"] .flow__offsite-tag { letter-spacing: 0.08em; }

.flow__offsite h3 { font-size: 1rem; }
.flow__offsite p {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

@media (max-width: 820px) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
  .flow > .flow__device { margin-inline: 0; }
  .flow__device {
    grid-row: 1;
    grid-column: 1;
    padding-inline: var(--flow-pad);
  }
  .flow__link { grid-row: 2; grid-column: 1; }
  .flow__offsite { grid-row: 3; grid-column: 1; }
  .flow__steps { flex-direction: column; gap: 1.7rem; }
  .flow__step:not(:last-child)::after {
    inset-inline-end: auto;
    inset-inline-start: 1.35rem;
    top: auto;
    bottom: -1.15rem;
    transform: rotate(135deg);
  }
  .flow__out { margin-top: 0.6rem; }
}

.page-hero {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem);
}
.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  max-width: 20ch;
  margin-top: 0.5rem;
}
body[lang^="zh"] .page-hero h1 { max-width: 14em; }

.crossref {
  margin: 1.2rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-mute);
}
.crossref a { font-weight: 550; }

.page-index {
  position: sticky;
  top: var(--head-h);
  z-index: 30;
  background: rgba(251, 250, 248, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-block: 1px solid var(--line);
}
.page-index__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  min-height: 46px;
}
.page-index__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
body[lang^="zh"] .page-index__label { letter-spacing: 0.18em; }
.page-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(0.9rem, 2vw, 1.4rem);
}
.page-index__list a {
  display: inline-block;
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding-block: 0.7rem;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-micro) var(--ease-out),
    border-color var(--duration-micro) var(--ease-out);
}
.page-index__list a:hover { color: var(--ink); }
.page-index__list a[aria-current="location"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

body[data-page="security"] section[id] { scroll-margin-top: calc(var(--head-h) + 2.5rem); }

@media (max-width: 960px) {
  .page-index { position: static; }
  body[data-page="security"] section[id] { scroll-margin-top: calc(var(--head-h) + 1rem); }
}
@media (max-width: 820px) {
  .page-index__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding-block: 0.6rem;
  }
  .page-index__list a { padding-block: 0.4rem; }
}

.more { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; }
.more__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 550;
}
.more__link svg {
  width: 17px;
  height: 17px;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.more__link:hover svg { transform: translateX(3px); }

.prose {
  max-width: 68ch;
  margin-top: 1.4rem;
}
.prose p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.06rem);
}
.prose p:last-child { margin-bottom: 0; }

.layers-figure { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.layers-figure figcaption {
  color: var(--ink-mute);
  font-size: 0.88rem;
  margin-top: 1.1rem;
}

.layers {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.layer {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.layer:first-child {
  border-top: 0;
  background: var(--accent-soft);
}

.layer__index {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 0.74rem;
  margin-top: 0.15rem;
}

.layer__name { font-size: 1rem; margin: 0; }
.layer__detail {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.ring-figure { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.ring-figure figcaption {
  color: var(--ink-mute);
  font-size: 0.88rem;
  margin-top: 1.2rem;
  max-width: 70ch;
}

.ring {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a core b"
    "c core d";
  align-items: stretch;
}

.ring__area {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}
.ring__area:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

.ring__area--a { grid-area: a; }
.ring__area--b { grid-area: b; }
.ring__area--c { grid-area: c; }
.ring__area--d { grid-area: d; }

.ring__area--core {
  grid-area: core;
  justify-content: center;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}
.ring__area--core:hover { transform: none; box-shadow: none; }

.ring__area--a::after,
.ring__area--b::after,
.ring__area--c::after,
.ring__area--d::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-inline-end: 2px solid var(--accent);
  opacity: 0.8;
}
.ring__area--a::after,
.ring__area--c::after {
  inset-inline-end: calc(clamp(1.4rem, 3vw, 2.4rem) / -2 - 5px);
  transform: translateY(-50%) rotate(45deg);
}
.ring__area--b::after,
.ring__area--d::after {
  inset-inline-start: calc(clamp(1.4rem, 3vw, 2.4rem) / -2 - 5px);
  transform: translateY(-50%) rotate(-135deg);
}

.ring__name { font-size: 1.02rem; margin: 0; }
.ring__area--core .ring__name { color: var(--accent); }
.ring__owns {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.ring__modules {
  margin: auto 0 0;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ring__area--core .ring__modules { margin-top: 1rem; }
.ring__modules code {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid rgba(29, 78, 216, 0.22);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
}
.ring__area--core .ring__modules code { background: var(--surface); }

@media (max-width: 900px) {
  .ring {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "core" "a" "b" "c" "d";
  }
  .ring__area--a::after,
  .ring__area--b::after,
  .ring__area--c::after,
  .ring__area--d::after {
    inset-inline: auto;
    inset-inline-start: 50%;
    top: calc(clamp(1.4rem, 3vw, 2.4rem) / -2 - 5px);
    transform: translateX(-50%) rotate(-45deg);
  }
}

.disk-figure { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.disk-figure figcaption {
  color: var(--ink-mute);
  font-size: 0.88rem;
  margin-top: 1.2rem;
  max-width: 74ch;
}

.disk {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  align-items: start;
}

.disk__inside {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-m);
  padding: clamp(1.7rem, 3vw, 2.1rem) clamp(1rem, 2.2vw, 1.4rem)
    clamp(1.1rem, 2.2vw, 1.4rem);
}

.disk__label {
  position: absolute;
  top: -0.72em;
  inset-inline-start: 1.2rem;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body[lang^="zh"] .disk__label { letter-spacing: 0.08em; }

.disk__blocks {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 0.9rem 1rem 1rem;
}
.block--primary {
  grid-column: 1 / -1;
  background: var(--accent-soft);
  border-color: rgba(29, 78, 216, 0.3);
}

.block__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
}
.block--primary .block__tag,
.disk__outside .block__tag { color: var(--accent); border-color: rgba(29, 78, 216, 0.3); }
.disk__outside .block__tag { color: var(--ink-mute); border-color: var(--line-strong); }

.block__name { font-size: 0.98rem; margin: 0; }
.block__detail {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.87rem;
}

.disk__outside {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-hi);
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  align-self: stretch;
}

@media (max-width: 900px) {
  .disk { grid-template-columns: minmax(0, 1fr); }
  .disk__blocks { grid-template-columns: minmax(0, 1fr); }
  .block--primary { grid-column: 1; }
}

.release-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: var(--radius-l);
  background: linear-gradient(120deg, var(--accent), #2f63e6 55%, #3f7bdd);
  box-shadow: var(--shadow-m);
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.4rem, 3.5vw, 2.2rem);
  color: #ffffff;
}
.release-bar__version {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.release-bar__state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[lang^="zh"] .release-bar__state { letter-spacing: 0.04em; text-transform: none; }
.release-bar__note {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  max-width: 68ch;
}
.release-bar__meta {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
@media (max-width: 700px) {
  .release-bar { grid-template-columns: minmax(0, 1fr); }
  .release-bar__meta { justify-self: start; }

  .release-bar__state { white-space: normal; }
}

.modules {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.module {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  transition: box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}
.module:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.module--teal { border-top-color: var(--teal); }
.module--amber { border-top-color: var(--amber); }
.module--ink { border-top-color: var(--ink); }

.module__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.module__name { font-size: 1rem; }
.module__count {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-mute);
}

.module__list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.55rem;
  align-items: baseline;
  font-size: 0.92rem;
}
.feature__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;

  align-self: start;
  margin-top: calc((1lh - 7px) / 2);
}
.feature--done .feature__dot { background: var(--teal); }
.feature--limited .feature__dot { background: var(--amber); }
.feature--wip .feature__dot {
  background: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.feature__name { color: var(--ink); }

.feature__state { color: var(--ink-mute); font-size: 0.86em; }
.feature--done .feature__state { display: none; }
.feature__detail {
  grid-column: 2;
  margin: 0.15rem 0 0.2rem;
  color: var(--ink-mute);
  font-size: 0.85rem;
  line-height: 1.5;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: start;
  border-radius: 999px;
  padding: 0.08rem 0.55rem 0.08rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.state--done { color: var(--teal); background: var(--teal-soft); }

.state--limited { color: var(--amber); background: var(--amber-soft); }
.state--limited::before {
  background: linear-gradient(180deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.state--wip { color: var(--accent); background: var(--accent-soft); }
.state--wip::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

@media (max-width: 1080px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .modules { grid-template-columns: minmax(0, 1fr); }
}

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 0.8fr);
  align-items: stretch;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
}

.gate__inside,
.gate__outside {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
}
.gate__outside {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface-hi);
  box-shadow: none;
  display: grid;
  place-content: center;
  text-align: center;
}

.gate__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body[lang^="zh"] .gate__label { letter-spacing: 0.08em; }
.gate__label--muted { color: var(--ink-mute); }

.gate__inside ul {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.gate__inside li {
  position: relative;
  padding: 0.3rem 0.6rem 0.3rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.87rem;
}
.gate__inside li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.6rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  opacity: 0.55;
}

.gate__door {
  position: relative;
  align-self: center;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: clamp(1rem, 2vw, 1.3rem) clamp(0.8rem, 1.6vw, 1.1rem);
  text-align: center;
  display: grid;
  gap: 0.2rem;
  min-width: 8.5rem;
}
.gate__door::before,
.gate__door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent);
  border-inline-end: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}
.gate__door::before { inset-inline-start: calc(clamp(0.9rem, 2vw, 1.5rem) / -2 - 4px); }
.gate__door::after { inset-inline-end: calc(clamp(0.9rem, 2vw, 1.5rem) / -2 - 4px); }

.gate__name {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}
.gate__note {
  font-size: 0.76rem;
  color: var(--ink-soft);
}
body[lang^="zh"] .gate__note { font-size: 0.8rem; }

@media (max-width: 820px) {
  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate__door { justify-self: stretch; }
  .gate__door::before,
  .gate__door::after {
    inset-inline: auto;
    inset-inline-start: 50%;
    top: auto;
    transform: translateX(-50%) rotate(135deg);
  }
  .gate__door::before { top: calc(clamp(0.9rem, 2vw, 1.5rem) / -2 - 4px); }
  .gate__door::after { bottom: calc(clamp(0.9rem, 2vw, 1.5rem) / -2 - 4px); }
  .gate__outside { padding-block: 1.6rem; }
}

.stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.stat {
  flex: 1 1 180px;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.stat__value {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.stat__label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body[lang^="zh"] .stat__label { letter-spacing: 0.06em; }

.flow__device--plain {
  padding-top: clamp(1.3rem, 2.4vw, 1.6rem);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split__head {
  position: sticky;
  top: calc(var(--head-h) + 2rem);
}
.split__head h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); }

.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.reason {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: clamp(1.2rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.reason__num {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  padding-top: 0.2rem;
}
.reason h3 { font-size: 1.08rem; }
.reason p {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.split__body .caveat { margin-top: 1.6rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split__head { position: static; }
}

.appshot { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.appshot figcaption {
  color: var(--ink-mute);
  font-size: 0.88rem;
  margin-top: 1.1rem;
  max-width: 70ch;
}

.win {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-m);
  overflow: hidden;
}

.win__chrome {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-hi);
}
.win__chrome i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  opacity: 0.55;
}

.win__body {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 4fr);
  min-height: 300px;
}

.win__side {
  border-inline-end: 1px solid var(--line);
  background: var(--bg);
  padding: 0.95rem 0.85rem;
}
.win__search {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  color: var(--ink-mute);
  background: var(--surface);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win__side ul {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.win__side li {
  font-size: 0.76rem;
  color: var(--ink-mute);
  padding: 0.3rem 0.5rem;
  border-radius: 7px;
}
.win__side li.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.win__main { display: flex; flex-direction: column; min-width: 0; }

.win__status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.win__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.win__panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  flex: 1;
  min-height: 0;
}

.win__pane {
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-content: start;
}
.win__pane--rail {
  border-inline-start: 1px solid var(--line);
  background: var(--bg);
}

.win__pane-name,
.win__control-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.15rem;
}

.win__tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}
.win__tabs span {
  font-size: 0.68rem;
  color: var(--ink-mute);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.win__tabs .is-active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

.win__line {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.win__line--speech { background: rgba(29, 78, 216, 0.22); }

.win__line--w40 { width: 40%; }
.win__line--w48 { width: 48%; }
.win__line--w50 { width: 50%; }
.win__line--w54 { width: 54%; }
.win__line--w56 { width: 56%; }
.win__line--w58 { width: 58%; }
.win__line--w62 { width: 62%; }
.win__line--w64 { width: 64%; }
.win__line--w66 { width: 66%; }
.win__line--w70 { width: 70%; }
.win__line--w72 { width: 72%; }
.win__line--w74 { width: 74%; }
.win__line--w76 { width: 76%; }
.win__line--w78 { width: 78%; }
.win__line--w80 { width: 80%; }
.win__line--w84 { width: 84%; }
.win__line--w86 { width: 86%; }
.win__line--w88 { width: 88%; }
.win__line--w90 { width: 90%; }
.win__line--w92 { width: 92%; }
.win__line--w96 { width: 96%; }
.win__line--w100 { width: 100%; }

.win__line--meta {
  height: 4px;
  opacity: 0.7;
}

.win__controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-hi);
}
.win__control {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-mute);
  opacity: 0.6;
}
.win__control--stop { background: var(--amber); border-color: var(--amber); opacity: 1; }
.win__control-name { margin: 0 0 0 0.25rem; }

@media (max-width: 700px) {
  .win__body { grid-template-columns: minmax(78px, 0.8fr) minmax(0, 3fr); }
  .win__side { padding: 0.7rem 0.55rem; }
  .win__search { display: none; }
  .win__side li { font-size: 0.7rem; padding: 0.28rem 0.4rem; }
  .win__panes { grid-template-columns: minmax(0, 1fr); }
  .win__pane--rail { border-inline-start: 0; border-top: 1px solid var(--line); }
  .win__tabs span { font-size: 0.64rem; padding: 0.18rem 0.3rem; }
}

.win__record {
  display: block;
  margin-top: 0.45rem;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  text-align: center;
}

.win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.win__title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.win__search--inline {
  flex: 0 1 13rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win__segment {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.win__segment span {
  font-size: 0.68rem;
  color: var(--ink-mute);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}
.win__segment .is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-s);
}

.win__tabs--page {
  gap: 0.9rem;
  margin: 0;
  padding: 0.55rem 1rem 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.win__tabs--page span {
  padding: 0.25rem 0 0.45rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.win__tabs--page .is-active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: none;
}

.win__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.win__chip {
  font-size: 0.64rem;
  line-height: 1.5;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.42rem;
  background: var(--surface);
  white-space: nowrap;
}
body[lang^="zh"] .win__chip { font-size: 0.68rem; }

.win__chip--local { color: var(--teal); border-color: rgba(15, 118, 110, 0.3); background: var(--teal-soft); }
.win__chip--cloud { color: var(--amber); border-color: rgba(180, 83, 9, 0.3); background: var(--amber-soft); }
.win__chip--source {
  display: flex;
  align-items: center;
  width: 5.5rem;
  padding-inline: 0.42rem;
  height: 1.1rem;
}
.win__chips--suggest { margin-bottom: 0.15rem; }

.win__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  flex: 1;
  align-content: start;
}
.win__card {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 4.6rem;
}
.win__card .win__chips { margin-top: auto; }

.win__foot {
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--ink-mute);
  background: var(--bg);
}

.win__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.win__stat {
  display: grid;
  gap: 0.3rem;
  min-width: 4.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body[lang^="zh"] .win__stat { text-transform: none; letter-spacing: 0.02em; }

.win__pane-name--sub {
  margin-top: 0.35rem;
  color: var(--ink-mute);
}

.win__attr {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.66rem;
  color: var(--teal);
  border: 1px solid rgba(15, 118, 110, 0.3);
  background: var(--teal-soft);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
body[lang^="zh"] .win__attr { font-size: 0.7rem; }

.win__controls--buttons { gap: 0.4rem; flex-wrap: wrap; }
.win__button {
  font-size: 0.7rem;
  font-weight: 550;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  background: var(--surface);
  white-space: nowrap;
}
.win__button.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.win__transport {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 6rem;
  min-width: 0;
  margin-inline-start: auto;
}
.win__transport .win__line { flex: 1; }

.win__pane--chat { flex: 1; gap: 0.55rem; padding: 0.85rem 1rem; }
.win__ask {
  align-self: flex-end;
  width: 46%;
  border-radius: 10px 10px 2px 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(29, 78, 216, 0.16);
  padding: 0.55rem 0.6rem;
}
.win__ask .win__line { background: rgba(29, 78, 216, 0.3); }
.win__answer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px 10px 10px 2px;
  background: var(--bg);
  padding: 0.6rem;
}
.win__composer {
  margin: 0 1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  color: var(--ink-mute);
}

.win__banner {
  margin: 0.85rem 1rem 0;
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: 9px;
  background: var(--teal-soft);
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 550;
  color: var(--teal);
}
.win__rows {
  display: grid;
  gap: 0;
  padding: 0.85rem 1rem;
  align-content: start;
}
.win__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.win__row > .win__line:first-child { flex: 0 1 40%; }
.win__row .win__chips { margin-inline-start: auto; }
.win__row--progress { border-bottom: 0; }
.win__progress {
  flex: 1 1 4rem;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  overflow: hidden;
  min-width: 3rem;
}
.win__progress i {
  display: block;
  width: 62%;
  height: 100%;
  background: var(--accent);
}

@media (max-width: 700px) {

  .win__record { display: none; }

  .win__bar { flex-wrap: wrap; gap: 0.45rem; }
  .win__segment span { font-size: 0.62rem; padding-inline: 0.4rem; }
  .win__search--inline { display: none; }
  .win__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win__stats { gap: 0.4rem 0.9rem; }
  .win__stat { min-width: 3.6rem; font-size: 0.6rem; }
  .win__row { flex-wrap: wrap; gap: 0.4rem; }
  .win__row .win__chips { margin-inline-start: 0; }
  .win__ask { width: 78%; }
  .win__tabs--page { gap: 0.7rem; }
}

.tour {
  margin: clamp(2.2rem, 4.5vw, 3rem) 0 0;
}
.tour__panels {
  display: grid;
  gap: clamp(3rem, 7vw, 5.5rem);
}

.tour__tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-hi);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tour__tabs[hidden] { display: none; }
.tour__tabs::-webkit-scrollbar { display: none; }

.tour__tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0.62rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--duration-micro) var(--ease-out),
    background var(--duration-micro) var(--ease-out),
    box-shadow var(--duration-micro) var(--ease-out);
}
.tour__tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.tour__tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface);
  box-shadow: var(--shadow-s), 0 0 0 1px var(--line);
}
.tour__tab-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-mute);
  background: var(--surface);
  border: 1px solid var(--line);
}
.tour__tab[aria-selected="true"] .tour__tab-num {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(29, 78, 216, 0.2);
}

[data-tabs-ready] .tour__panels { gap: 0; }

@media (min-width: 861px) {
  [data-tabs-ready] .tour__panel { grid-area: 1 / 1; }
  [data-tabs-ready] .tour__panel[hidden] {
    display: block;
    visibility: hidden;
  }
}
[data-tabs-ready] .tour__panel:not([hidden]) {
  animation: tour-in var(--duration-normal) var(--ease-out);
}

.tour__panel { scroll-margin-top: calc(var(--head-h) + 7.5rem); }
.tour__panel:focus-visible { outline-offset: 8px; }

@keyframes tour-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.tour__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}
.tour__num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-end: 0.7rem;
  vertical-align: 0.12em;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(29, 78, 216, 0.18);
}

[data-tabs-ready] .tour__num { display: none; }
.tour__name {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.015em;
}
.tour__detail {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.96rem, 1.4vw, 1.02rem);
}

.appshot--tour { margin-top: clamp(1.4rem, 3vw, 2rem); }

@media (max-width: 860px) {
  .tour__head { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .tour__tab { flex: 0 0 auto; padding: 0.55rem 0.8rem; font-size: 0.88rem; }
}

.showcase { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; }

.showcase__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.showcase__panel[hidden] { display: none; }
.showcase__figure { margin: 0; }
.showcase__features { min-width: 0; }
.feature-note { margin-top: 0.5rem; }
.feature-note summary,
.showcase__more summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.feature-note summary { padding-block: 0.35rem; }
.showcase__more { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem; }
.showcase__more[open] > summary { margin-bottom: 0.85rem; }
.technical-appendix { border-block: 1px solid var(--line); padding-block: 1.5rem; }
.technical-appendix > summary { cursor: pointer; color: var(--ink); font-size: 1.3rem; font-weight: 650; }
.technical-appendix > .caveat { margin-top: 1rem; }

@media (min-width: 1041px) {
  .showcase__figure {
    position: sticky;
    top: calc(var(--head-h) + 1.25rem);
  }
}

.showcase .win {
  border-style: dashed;
  box-shadow: var(--shadow-s);
}
.showcase .win__body { min-height: 380px; }

.showcase__head {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.4rem;
  max-width: 72ch;
}
.showcase__name {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.015em;
}
.showcase__detail {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.96rem, 1.4vw, 1.02rem);
}

.callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.callout__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}
.callout__detail {
  margin: 0.2rem 0 0;
  color: var(--ink-mute);
  font-size: 0.86rem;
  line-height: 1.55;
}

.pinned { position: relative; }
.pin,
.callout__n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transition: background var(--duration-micro) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}
.pin {
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  z-index: 2;
  box-shadow: 0 0 0 3px var(--surface);
}

.pin--in {
  top: 8px;
  inset-inline-end: 8px;
}
.callout__n { margin-top: 0.12rem; }

.callout:hover .callout__n,
.showcase__panel:has(.callout--1:hover) .pin--1,
.showcase__panel:has(.callout--2:hover) .pin--2,
.showcase__panel:has(.callout--3:hover) .pin--3,
.showcase__panel:has(.callout--4:hover) .pin--4,
.showcase__panel:has(.callout--5:hover) .pin--5,
.showcase__panel:has(.callout--6:hover) .pin--6,
.showcase__panel:has(.callout--7:hover) .pin--7,
.showcase__panel:has(.callout--8:hover) .pin--8 {
  background: var(--accent);
}
.showcase__panel:has(.callout--1:hover) .pin--1,
.showcase__panel:has(.callout--2:hover) .pin--2,
.showcase__panel:has(.callout--3:hover) .pin--3,
.showcase__panel:has(.callout--4:hover) .pin--4,
.showcase__panel:has(.callout--5:hover) .pin--5,
.showcase__panel:has(.callout--6:hover) .pin--6,
.showcase__panel:has(.callout--7:hover) .pin--7,
.showcase__panel:has(.callout--8:hover) .pin--8 {
  transform: scale(1.25);
}

.tab-icon { display: flex; color: var(--ink-mute); }
.tab-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}
.tour__tab[aria-selected="true"] .tab-icon { color: var(--accent); }

.sc-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.7rem;
}
.sc-lang {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.22rem 0.55rem;
  background: var(--surface);
  white-space: nowrap;
}
.sc-meta {
  font-size: 0.66rem;
  color: var(--ink-mute);
}

.sc-panes--translate { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.sc-cols {
  display: grid;
  grid-template-columns: 3.3rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--line);
}
.sc-cols:last-child { border-bottom: 0; }
.sc-cols--head {
  padding-block: 0 0.3rem;
  border-bottom: 1px solid var(--line);
}
.sc-cols--head .win__pane-name { margin: 0; }
.sc-time {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.2;
  color: var(--ink-mute);
}
.sc-cell {
  display: grid;
  gap: 0.35rem;
}
.win__line--tr { background: rgba(20, 24, 31, 0.2); }

.sc-block {
  display: grid;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  padding: 0.55rem 0.6rem;
}
.sc-block .win__pane-name { margin: 0; }
.sc-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
}
.sc-pair span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.08rem 0.35rem;
  background: var(--bg);
  color: var(--ink-mute);
}
.sc-pair span:last-child {
  color: var(--ink);
  font-weight: 600;
}
.sc-pair i {
  font-style: normal;
  color: var(--ink-mute);
}
.sc-bans {
  display: grid;
  gap: 0.35rem;
}

.sc-ban {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sc-ban::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-mute);
  background: linear-gradient(135deg, transparent 42%, var(--ink-mute) 42% 58%, transparent 58%);
}

.sc-find {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.22rem 0.55rem;
  background: var(--surface);
  white-space: nowrap;
}
.sc-find svg { width: 12px; height: 12px; fill: none; stroke: currentColor; }

.sc-cols--flagged {
  background: var(--amber-soft);
  border-radius: 7px;
  margin-inline: -0.4rem;
  padding-inline: 0.4rem;
}
.sc-flag {
  justify-self: start;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  background: var(--surface);
  white-space: nowrap;
}

.sc-push { margin-inline-start: auto; }
.sc-panes--live { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.sc-live {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding-block: 0.45rem;
  border-bottom: 1px dashed var(--line);
}
.sc-live:last-child { border-bottom: 0; }
.win__line--cap {
  background: repeating-linear-gradient(90deg, rgba(20, 24, 31, 0.24) 0 7px, transparent 7px 10px);
}
.sc-frags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sc-frags .win__line { flex: 1 1 auto; }
.sc-frags b {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  padding-inline: 0.1rem;
}
.sc-frag {
  flex: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(29, 78, 216, 0.22);
}
.sc-frag--a { width: 1.4rem; }
.sc-frag--b { width: 0.9rem; }
.sc-frag--c { width: 1.7rem; }
.sc-note {
  justify-self: start;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent);
}
.sc-typing { display: inline-flex; gap: 3px; padding-top: 0.15rem; }
.sc-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}
.sc-term {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sc-term .win__line { flex: 0 1 auto; }
.sc-term__yes,
.sc-term__no {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.5rem;
  line-height: 1;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  background: var(--surface);
}
.sc-term__yes { margin-inline-start: auto; }
.sc-block .win__button { justify-self: start; margin-top: 0.15rem; }
.sc-legend {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.win__chip--dashed { border-style: dashed; }

.sc-panes--proj { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sc-dec {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sc-dec .win__line { flex: 0 1 auto; }
.sc-dec .sc-time { margin-inline-start: auto; }
.sc-dec__mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  font-size: 0.55rem;
  color: var(--teal);
  background: var(--teal-soft);
}
.sc-commit {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.sc-commit .win__pane-name { margin: 0; }
.sc-flagrow,
.sc-rel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sc-flagrow .win__line,
.sc-rel .win__line { flex: 0 1 auto; }
.sc-rel .sc-note { margin-inline-start: auto; white-space: nowrap; }
.win__chip--flag {
  flex: none;
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

.sc-panes--ctl { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.sc-picker {
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sc-picker .win__pane-name { margin: 0; }
.sc-pick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sc-pick .win__line { flex: 0 1 auto; }
.sc-pick .sc-term__yes {
  margin-inline-start: auto;
  color: var(--accent);
  border-color: rgba(29, 78, 216, 0.35);
}
.sc-panes--ctl .win__pane > .sc-flag { margin-top: 0.2rem; }
.sc-panes--ctl .win__composer { margin-top: auto; }
.sc-run {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sc-run .win__line { flex: 0 1 auto; }
.sc-run .win__chip,
.sc-run .win__button { margin-inline-start: auto; }
.sc-run__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.sc-run__dot--run {
  background: transparent;
  border: 2px solid var(--accent);
  border-right-color: transparent;
}
.sc-toggle {
  flex: none;
  margin-inline-start: auto;
  width: 22px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  position: relative;
}
.sc-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.sc-storage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-hi);
}
.sc-storage .win__pane-name { margin: 0; }
.sc-meter {
  flex: 1 1 6rem;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.sc-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: var(--ink-mute);
  opacity: 0.55;
}

.sc-export {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.sc-docs {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 0.85rem 1rem;
}
.sc-drop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem 0.55rem;
  border: 1.5px dashed rgba(29, 78, 216, 0.35);
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 0.6rem 0.7rem;
}
.sc-drop__icon { display: flex; }
.sc-drop__icon svg,
.sc-cmdk svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}
.sc-drop__icon { color: var(--accent); }
.sc-drop__text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
}
.sc-drop .win__chips { grid-column: 1 / -1; }
.sc-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.sc-file {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  padding: 0.5rem;
}
.sc-kind {
  justify-self: start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.02rem 0.35rem;
  color: var(--ink-soft);
  background: var(--surface-hi);
}
.sc-kind--rec {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(29, 78, 216, 0.2);
}

.sc-kind--web {
  color: #ffffff;
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

.sc-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.sc-page {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  padding: 0.45rem;
  box-shadow: var(--shadow-s);
}
.sc-page .win__line { height: 3px; }
.sc-page__h {
  width: 62%;
  height: 6px;
  border-radius: 3px;
  background: rgba(20, 24, 31, 0.3);
}
.sc-page__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.sc-page__cols > span {
  display: grid;
  gap: 0.28rem;
  align-content: start;
}
.sc-page__table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: auto;
}
.sc-page__table i {
  height: 7px;
  border: 1px solid var(--line);
  background: var(--surface-hi);
}
.sc-page__foot {
  width: 40%;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.sc-page--tr .win__line { background: rgba(29, 78, 216, 0.3); }
.sc-page--tr .sc-page__h { background: var(--accent); }
.sc-page--tr .sc-page__table i { border-color: rgba(29, 78, 216, 0.25); }
.sc-pages__labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  font-size: 0.66rem;
  color: var(--ink-mute);
  text-align: center;
}

.sc-greet {
  display: grid;
  gap: 0.3rem;
  min-width: 4.5rem;
}
.sc-eyebrow {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}
.sc-cmdk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 19rem;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0.3rem 0.5rem;
  background: var(--surface);
  font-size: 0.68rem;
  color: var(--ink-mute);
}
.sc-cmdk svg { flex: none; width: 13px; height: 13px; }
.sc-cmdk span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-cmdk kbd {
  font-family: var(--mono);
  font-size: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 0.25rem;
  background: var(--bg);
}

.sc-daily {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem 1rem;
}
.sc-stack {
  display: grid;
  gap: 0.8rem;
}
.sc-brief,
.sc-topic,
.sc-day {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.7rem 0.75rem;
}
.sc-brief {
  border-color: rgba(29, 78, 216, 0.18);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 75%);
}
.sc-brief .win__pane-name,
.sc-topic .win__pane-name,
.sc-day .win__pane-name { margin: 0; }
.sc-brief__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.sc-mini {
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.45rem 0.5rem;
}

.sc-thread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}
.sc-thread::before {
  content: "";
  position: absolute;
  inset-inline: 5px 20%;
  top: 4px;
  height: 2px;
  background: rgba(29, 78, 216, 0.25);
}
.sc-thread li {
  position: relative;
  display: grid;
  gap: 0.4rem;
}
.sc-thread__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
}
.sc-thread li:last-child .sc-thread__dot { background: var(--accent); }
.sc-event {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  border-inline-start: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface-hi);
  padding: 0.35rem 0.45rem;
}
.sc-day .win__pane-name--sub { margin-top: 0.3rem; }
.sc-task {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.2rem;
}
.sc-check {
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
}
.sc-task .win__chip { margin-inline-start: auto; }

@media (max-width: 1040px) {
  .showcase__panel { grid-template-columns: minmax(0, 1fr); }
  .callouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (min-width: 861px) {
  [data-tabs-ready] .showcase__panel[hidden] { display: none; }
}

@media (max-width: 700px) {
  .callouts { grid-template-columns: minmax(0, 1fr); }

  .showcase .win__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .showcase .win__side { display: none; }
  .sc-panes--translate,
  .sc-panes--live,
  .sc-panes--proj,
  .sc-panes--ctl,
  .sc-split,
  .sc-daily { grid-template-columns: minmax(0, 1fr); }
  .sc-split .win__pane--rail { border-inline-start: 0; border-top: 1px solid var(--line); }
  .sc-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-cols { grid-template-columns: 2.9rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.45rem; }
  .sc-tools { justify-content: flex-start; }
  .sc-pages { max-width: 16rem; }
}

.boundary {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(2.2rem, 4vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.panel--stay { border-top: 3px solid var(--teal); }
.panel--leave { border-top: 3px solid var(--amber); }
.panel--none { border-top: 3px solid var(--ink); }
.panel--none p {
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

@media (max-width: 960px) {
  .boundary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel--none { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .boundary { grid-template-columns: minmax(0, 1fr); }
}

.panel h3 { font-size: 1rem; }
.panel ul {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.panel li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
}
.panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.panel--stay li::before { background: var(--teal); }
.panel--leave li::before { background: var(--amber); }

.note {
  margin-top: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-hi);
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
}
.note h3 { font-size: 1rem; }
.note p { margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }

.caveat {
  margin-top: 1.4rem;
  color: var(--ink-mute);
  font-size: 0.86rem;
  max-width: 78ch;
  border-inline-start: 2px solid var(--line-strong);
  padding-inline-start: 1rem;
}

.status-list {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  display: grid;
  gap: 0;
}
.status-item {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  align-items: start;
}
.status-item:last-child { border-bottom: 1px solid var(--line); }
.status-item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 720px) {
  .status-item { grid-template-columns: 1fr; gap: 0.5rem; }
}

.closing {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.closing__status h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); }

.closing__status p:not(.eyebrow) {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  max-width: 58ch;
}
.closing__status .more__link { margin-top: 1.3rem; }

.closing__contact {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-m);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.closing__contact h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.closing__contact p { margin: 0.7rem 0 0; color: var(--ink-soft); }
.closing__contact .btn { margin-top: 1.4rem; }

@media (max-width: 860px) {
  .closing { grid-template-columns: minmax(0, 1fr); }
}

.platforms {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.platforms__title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.platforms p.platforms__lead {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.platforms__scroll {
  margin-top: 1.1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.platforms__table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.platforms__table th,
.platforms__table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
}
.platforms__table tbody tr:last-child > * { border-bottom: 0; }
.platforms__table thead th,
.platforms__corner {
  background: var(--surface-hi);
  vertical-align: bottom;
}
.platforms__corner {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.platforms__table thead th { text-align: center; width: 20%; }
.platforms__table thead th span {
  display: block;
  font-weight: 650;
  color: var(--ink);
}
.platforms__table thead th small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 450;
  line-height: 1.4;
  color: var(--ink-mute);
}
.platforms__table tbody th {
  font-weight: 500;
  color: var(--ink-soft);
}
.platforms__table .platforms__cell { text-align: center; }

.platforms__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.platforms__cell--done .platforms__dot { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }

.platforms__cell--limited .platforms__dot {
  background: linear-gradient(90deg, var(--amber) 50%, transparent 50%);
  border: 1.5px solid var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}
.platforms__cell--none .platforms__dot {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}

.platforms__legend {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}
.platforms__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.platforms__reqs { display: none; }
@media (max-width: 600px) {
  .platforms__table { min-width: 0; font-size: 0.82rem; }
  .platforms__table th,
  .platforms__table td { padding: 0.65rem 0.45rem; }
  .platforms__table th:first-child,
  .platforms__table td:first-child { padding-inline-start: 0.8rem; }
  .platforms__table thead th { width: 17%; }
  .platforms__table thead th small { display: none; }
  .platforms__corner { font-size: 0.64rem; letter-spacing: 0.06em; }
  .platforms__reqs {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--ink-mute);
  }
  .platforms__reqs b { color: var(--ink-soft); font-weight: 600; margin-inline-end: 0.3rem; }
}
.platforms p.platforms__note {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-mute);
  max-width: 64ch;
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(70% 160% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-m);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 3rem);
}
.cta-band h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.cta-band p {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  max-width: 62ch;
}
.cta-band .btn { flex: none; }

@media (max-width: 720px) {
  .cta-band { flex-direction: column; align-items: flex-start; }
}

[data-reveal] .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal] .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-soft: #23282f;
    --ink-mute: #333a44;
    --line: rgba(20, 24, 31, 0.34);
    --line-strong: rgba(20, 24, 31, 0.62);
    --accent: #1734a6;
    --teal: #0b5a54;
    --amber: #8a3f07;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-head {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.next-pages {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.next-pages .eyebrow { color: var(--ink-mute); }

.next-pages__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.next-page {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  transition: border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}
.next-page:hover {
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}
.next-page__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ink);
}
.next-page__title svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.next-page:hover .next-page__title svg { transform: translateX(3px); }
.next-page__desc {
  color: var(--ink-mute);
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .next-pages__list { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
}

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2.2rem, 5vw, 3.2rem) 2.4rem;
  color: var(--ink-mute);
  font-size: 0.88rem;
  background: var(--band);
}
.early-access {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 760px;
}
.early-access h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.early-access p { color: var(--ink-soft); }
.early-access .early-access__status { color: var(--teal); font-weight: 600; }
.early-access .btn { margin-top: 0.6rem; }
.early-access .btn svg { width: 18px; height: 18px; flex: none; }
.early-access { scroll-margin-top: calc(var(--head-h) + 1rem); }

.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
.site-foot__about p {
  margin: 0.8rem 0 0;
  max-width: 34ch;
}
.site-foot__heading {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
body[lang^="zh"] .site-foot__heading { letter-spacing: 0.08em; }
.site-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.site-foot__col a { color: var(--ink-soft); }
.site-foot__col a:hover { color: var(--accent); }

.site-foot__legal {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 2rem;
}
.site-foot__legal p { margin: 0; }
.site-foot__top {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.site-foot__top svg { width: 14px; height: 14px; }

@media (max-width: 820px) {
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); }

  .site-foot__about,
  .site-foot__col--contact { grid-column: 1 / -1; }
}

.latest__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.latest__version {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
  box-shadow: var(--shadow-s);
}
.latest__version b {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}

.latest__grid {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.latest__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  transition: border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.latest__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-m); }
.latest__icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1rem;
}
.latest__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.latest__label {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.latest__item h3 { font-size: 1.06rem; line-height: 1.4; margin: 0 0 0.5rem; }
.latest__item p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.1rem; }
.latest__item a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.latest__item a svg {
  width: 15px;
  height: 15px;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.latest__item a:hover svg { transform: translateX(3px); }
@media (max-width: 1080px) {
  .latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .latest__grid { grid-template-columns: minmax(0, 1fr); }
}

.hero__stage { margin-top: clamp(1.6rem, 3.5vw, 2.2rem); }

.hs {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: start;
}

.hs::before {
  content: "";
  position: absolute;
  inset: 6% 3% 14% 3%;
  z-index: -1;
  background:
    radial-gradient(55% 60% at 30% 45%, rgba(29, 78, 216, 0.1), transparent 70%),
    radial-gradient(40% 50% at 82% 70%, rgba(138, 98, 18, 0.08), transparent 70%);
  pointer-events: none;
}

.hs__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-bottom-color: var(--line);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--surface-hi);
}
.hs__dots { display: flex; gap: 0.4rem; }
.hs__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  opacity: 0.55;
}
.hs__chrome .hs__play { margin-inline-start: auto; }

.hs__tag {
  display: inline-flex;
  align-items: center;
  border: 1px dashed rgba(29, 78, 216, 0.45);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.75rem;
}
.hs__play {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out);
}
.hs__play:hover { border-color: var(--accent); }
.hs__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hs__play i {
  width: 0;
  height: 0;
  margin-inline-start: 3px;
  border-block: 6px solid transparent;
  border-inline-start: 9px solid var(--ink);
}
.hs[data-playing] .hs__play i {
  width: 10px;
  height: 11px;
  margin: 0;
  border: 0;
  border-inline: 3px solid var(--ink);
}

.hs__win {
  border-top: 0;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  box-shadow: 0 32px 64px -30px rgba(20, 24, 31, 0.32), 0 2px 6px rgba(20, 24, 31, 0.05);
}

.hs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.hs__crumb { display: grid; gap: 0.1rem; }
.hs__crumb small {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hs__crumb b { font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.hs__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  font-size: 0.74rem;
}
.hs-kv { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.hs-kv small { font-size: 0.7rem; color: var(--ink-mute); }
.hs-kv .hs-slot { font-weight: 600; color: var(--ink); }

.hs__needs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-hi);
  color: var(--ink-mute);
  font-weight: 650;
  transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
.hs__needs b {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--line-strong);
  color: #ffffff;
  font-size: 0.6rem;
  transition: background var(--duration-normal) var(--ease-out);
}
.hs__needs.is-on { background: var(--ochre-soft); color: var(--ochre); }
.hs__needs.is-on b { background: var(--ochre); }

.hs-slot { display: inline-grid; }
.hs-slot > .hs-v {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
}
.hs-slot > .hs-v.is-on { opacity: 1; visibility: visible; }

.hs__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  height: 350px;
}

.hs-map {
  position: relative;
  overflow: hidden;
  border-inline-end: 1px solid var(--line);
  background:
    radial-gradient(circle, rgba(20, 24, 31, 0.08) 1px, transparent 1.3px) 0 0 / 18px 18px,
    var(--bg);
}
.hs-map__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hs-map__edges--tall { display: none; }
.hs-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  transition: stroke var(--duration-normal) var(--ease-out);
}
.hs-edge.is-used { stroke: rgba(20, 24, 31, 0.3); stroke-dasharray: none; }
.hs-edge.is-live { stroke: var(--accent); stroke-width: 2.25; stroke-dasharray: 7 6; }
.hs-edge--ask.is-live,
.hs-edge--accept.is-live { stroke: var(--ochre); }
.hs-edge--accept.is-used { stroke: var(--teal); stroke-width: 2; }

@keyframes hs-flow { to { stroke-dashoffset: -13; } }
.hs[data-playing] .hs-edge.is-live { animation: hs-flow 0.8s linear infinite; }

.hs-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.6rem 0.38rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-s);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.hs-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}
.hs-node.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12), var(--shadow-m);
}
.hs-node.is-needs {
  border-color: var(--ochre);
  box-shadow: 0 0 0 4px rgba(138, 98, 18, 0.14), var(--shadow-m);
}
.hs-node.is-done { border-color: rgba(15, 118, 110, 0.45); }
@keyframes hs-ping {
  from { opacity: 0.6; transform: scale(1); }
  to { opacity: 0; transform: scale(1.14); }
}
.hs[data-playing] .hs-node.is-active::after { border-color: var(--accent); animation: hs-ping 1.6s var(--ease-out) infinite; }
.hs[data-playing] .hs-node.is-needs::after { border-color: var(--ochre); animation: hs-ping 1.6s var(--ease-out) infinite; }

.hs-node__who { display: grid; gap: 0.08rem; }
.hs-node__who b { font-size: 0.74rem; font-weight: 650; color: var(--ink); }
.hs-node__who small,
.hs-node__who .hs-slot { font-size: 0.64rem; color: var(--ink-mute); }
.hs-state {
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: var(--surface-hi);
  font-size: 0.6rem;
  font-weight: 650;
  color: var(--ink-mute);
  transition: background var(--duration-normal) var(--ease-out);
}
.hs-node.is-active .hs-state { background: var(--accent-soft); }
.hs-node.is-needs .hs-state { background: var(--ochre-soft); }
.hs-node.is-done .hs-state { background: var(--teal-soft); }
.hs-v--active { color: var(--accent); }
.hs-v--needs { color: var(--ochre); }
.hs-v--done { color: var(--teal); }

.hs-node--in { left: 14%; top: 50%; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.4rem; }
.hs-node--mira { left: 38%; top: 24%; }
.hs-node--theo { left: 38%; top: 76%; }
.hs-node--quinn { left: 60%; top: 51%; }
.hs-node--out { left: 86%; top: 50%; }
.hs-node--you { left: 63%; top: 11%; border-radius: 999px; padding: 0.3rem 0.7rem 0.3rem 0.35rem; }

.hs-file {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  background: var(--surface-hi);
}
.hs-file i {
  flex: none;
  width: 11px;
  height: 14px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 3px;
}
.hs-file--rec i {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hs-file span { display: grid; }
.hs-file b { font-size: 0.7rem; font-weight: 600; color: var(--ink); }
.hs-file small { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-mute); }

.hs-file em {
  margin-inline-start: 0.3rem;
  padding: 0.02rem 0.38rem;
  font-family: var(--font);
  border: 1px solid rgba(15, 118, 110, 0.3);
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 700;
}
.hs-doc {
  flex: none;
  width: 18px;
  height: 22px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 3px;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--line-strong) 4px 5px) 3px 5px / 9px 12px no-repeat;
  transition: border-color var(--duration-normal) var(--ease-out);
}
.hs-node--out.is-done .hs-doc { border-color: var(--teal); }
.hs-you {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #ffffff 0 3.5px, transparent 4px),
    radial-gradient(ellipse 7px 5px at 50% 100%, #ffffff 0 99%, transparent 100%),
    var(--ink-soft);
}

.hs-feed {
  list-style: none;
  margin: 0;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.55rem;
  overflow: hidden;
  background: #fcfbf9;
  mask-image: linear-gradient(to bottom, transparent, #000 2.6rem);
}
.hs-feed > li:not(.is-on) { display: none; }
@keyframes hs-in { from { opacity: 0; transform: translateY(10px); } }
.hs[data-stage-ready] .hs-feed > li.is-on { animation: hs-in 480ms var(--ease-out) both; }

.hs-msg {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}
.hs-msg__body {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  background: var(--surface);
  font-size: 0.72rem;
}
.hs-msg__body b { font-size: 0.7rem; font-weight: 650; color: var(--ink); }
.hs-msg__body p { margin: 0; line-height: 1.45; color: var(--ink-soft); }

.hs-msg--you {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  align-self: flex-end;
  width: fit-content;
  max-width: 88%;
  padding: 0.5rem 0.7rem;
  border-radius: 12px 12px 4px 12px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.74rem;
}
.hs-msg--you p { margin: 0; line-height: 1.45; }
.hs-msg--you .win__chip {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.hs-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hs-chip--cite {
  border-color: rgba(29, 78, 216, 0.25);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
}

.hs-card {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.72rem;
  transition: border-color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}
.hs-card p { margin: 0; font-weight: 600; color: var(--ink); }
.hs-card > small { font-size: 0.66rem; color: var(--ink-mute); }
.hs-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.hs-card__head small {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre);
}
.hs-card__head b { font-size: 0.8rem; font-weight: 650; }
.hs-card__head .hs-slot { font-size: 0.62rem; font-weight: 700; }
.hs-card.is-needs { border-color: var(--ochre-line); background: var(--ochre-soft); }
.hs-card--result.is-done { border-color: rgba(15, 118, 110, 0.4); background: var(--teal-soft); }
.hs-card__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hs-card__actions:not(.is-on) { display: none; }
.hs-btn {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.66rem;
  font-weight: 650;
  color: var(--ink);
}
.hs-btn--ochre { border-color: var(--ochre); background: var(--ochre); color: #ffffff; }
.hs-btn--primary { border-color: var(--ink); background: var(--ink); color: #ffffff; }

.hs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-hi);
  font-size: 0.7rem;
}
.hs__controls { display: flex; gap: 0.9rem; font-weight: 600; color: var(--ink-soft); }

.hs-rail {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
.hs-rail__step { position: relative; }
.hs-rail__step::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.hs-rail__step,
.hs-rail__btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.2rem 0.3rem;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-mute);
}

.hs[data-stage-ready] .hs-rail__step { padding: 0; }
.hs-rail__btn {
  position: relative;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.hs-rail__btn:hover { color: var(--ink); }
.hs-rail__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.hs-rail__n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
.hs-rail__fill {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.hs-rail__step.is-done .hs-rail__fill { width: 100%; background: rgba(29, 78, 216, 0.35); }
.hs-rail__step.is-done .hs-rail__n { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.hs-rail__step.is-current { color: var(--ink); font-weight: 600; }
.hs-rail__step.is-current .hs-rail__btn { color: var(--ink); }
.hs-rail__step.is-current .hs-rail__n { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.hs-rail__step.is-current .hs-rail__fill { width: 100%; }

@keyframes hs-fill { from { width: 0; } to { width: 100%; } }
.hs[data-playing] .hs-rail__step.is-current .hs-rail__fill { animation: hs-fill 3.2s linear both; }

.hs figcaption {
  margin-top: 0.8rem;
  max-width: 72ch;
  color: var(--ink-mute);
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .hs__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hs-map { height: 400px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .hs-feed { height: 290px; }
  .hs-map__edges--wide { display: none; }
  .hs-map__edges--tall { display: block; }
  .hs-node--in { left: 50%; top: 10%; flex-direction: row; }
  .hs-node--mira { left: 27%; top: 34%; }
  .hs-node--theo { left: 73%; top: 34%; }
  .hs-node--quinn { left: 50%; top: 60%; }
  .hs-node--out { left: 50%; top: 88%; }
  .hs-node--you { left: 13%; top: 62%; }
  .hs-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.25rem; }
}
@media (max-width: 560px) {
  .hs__status { gap: 0.3rem 0.8rem; }
  .hs-node { gap: 0.35rem; padding: 0.32rem 0.45rem 0.32rem 0.32rem; }
  .hs-node__who small { display: none; }
  .hs-node--in { gap: 0.25rem; padding: 0.3rem; }
  .hs-file { padding: 0.25rem 0.35rem; }
  .hs-file em { display: none; }
  .hs-rail__label { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hs[data-playing] .hs-edge.is-live,
  .hs[data-playing] .hs-node::after,
  .hs[data-playing] .hs-rail__step.is-current .hs-rail__fill,
  .hs[data-stage-ready] .hs-feed > li.is-on { animation: none; }
}

.cite {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--surface);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.hero-ask__source {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.65rem 0.25rem 0.3rem;
  border: 1px solid rgba(29, 78, 216, 0.25);
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--accent);
  white-space: nowrap;
}
.hero-ask__source .cite { box-shadow: none; width: 16px; height: 16px; font-size: 0.58rem; }
.hero-ask__source .win__line {
  flex: 1 1 0;
  min-width: 1.5rem;
  background: rgba(29, 78, 216, 0.3);
}

.pipeline--intro { margin-top: 0; }
.flow--intro .flow__intro {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: center;
  padding-inline-end: 1rem;
  margin-inline-start: calc(var(--flow-pad) * -1);
}
.flow--intro .flow__offsite { align-self: end; }
@media (max-width: 820px) {
  .flow--intro .flow__intro {
    grid-row: 1;
    grid-column: 1;
    margin-inline-start: 0;
    padding-inline-end: 0;
    margin-bottom: clamp(2rem, 6vw, 2.75rem);
  }
  .flow--intro > .flow__device { grid-row: 2; }
  .flow--intro .flow__link { grid-row: 3; }
  .flow--intro .flow__offsite { grid-row: 4; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.usecases {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.usecase {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.usecase__head { display: flex; gap: 0.85rem; align-items: flex-start; }
.usecase__status {
  align-self: flex-start;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.5;
}
.usecase__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--teal-soft);
  color: var(--teal);
}
.usecase__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.usecase h3 { font-size: 1.08rem; }
.usecase__context { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--ink-mute); }
.usecase__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  margin: 0;
}
.usecase__body dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.4rem;
}
.usecase__body dt:first-child { margin-top: 0; }
.usecase__body dd { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.usecase__outcome {
  margin: auto 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--ink);
}
.usecase__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.45rem;
  padding-block: 0.3rem;
  font-size: 0.87rem;
  font-weight: 600;
}
.usecase__link svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 760px) {
  .usecases { grid-template-columns: minmax(0, 1fr); }
}

body[data-page="useCases"] #use-cases { padding-block: 1rem clamp(2.5rem, 5vw, 4rem); }
.case-browser { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.case-browser:has(.case-tabs:not([hidden])) { grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 1fr); }
.case-tabs { display: grid; gap: 0.55rem; }
.case-tabs[hidden],
.case-panel[hidden] { display: none; }
.case-tab {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem 0.7rem;
  min-height: 80px;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink-soft);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--duration-micro), background var(--duration-micro), color var(--duration-micro);
}
.case-tab:hover { border-color: #b6c6e9; background: #f6f8fd; }
.case-tab[aria-selected="true"] { border-color: #b4c7f4; background: #edf3ff; color: var(--accent); }
.case-tab:focus-visible,
.case-panel:focus-visible,
.docs-modules summary:focus-visible,
.capabilities-location summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.case-tab__icon { display: inline-grid; place-items: center; grid-column: 1; grid-row: 1 / 3; }
.case-tab__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; }
.case-tab__label { grid-column: 2; font-size: 0.94rem; font-weight: 650; line-height: 1.5; }
.case-tab .status { grid-column: 2; color: var(--ink-mute); font-size: 0.73rem; font-weight: 450; line-height: 1.5; }
.case-panels { display: grid; gap: 1.5rem; min-width: 0; }
.case-panel { min-width: 0; padding: clamp(1.25rem, 2.4vw, 1.8rem); border: 1px solid #dfe5ef; border-radius: 16px; background: #ffffff; scroll-margin-top: calc(var(--head-h) + 1rem); }
.case-panel__status { display: inline-block; margin: 0 0 0.55rem; color: var(--accent); font-size: 0.76rem; font-weight: 650; line-height: 1.5; }
.case-panel__head h2 { max-width: none; font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 700; line-height: 1.35; }
.case-panel__summary { max-width: 64ch; margin: 0.65rem 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.75; }
.case-panel__body { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.case-panel__body > * { min-width: 0; }
.case-inputs h3,
.case-steps h3 { color: var(--ink-mute); font-size: 0.77rem; font-weight: 650; line-height: 1.5; letter-spacing: 0.06em; }
.case-inputs ul { display: grid; gap: 0.5rem; margin: 0.7rem 0 0; padding-inline-start: 1.15rem; color: var(--ink-soft); font-size: 0.89rem; line-height: 1.7; }
.case-inputs li::marker { color: #92a1b9; }
.case-steps ol { display: grid; gap: 0.8rem; list-style: none; counter-reset: case-step; margin: 0.7rem 0 0; padding: 0; }
.case-steps li { position: relative; min-width: 0; counter-increment: case-step; padding-inline-start: 2rem; }
.case-steps li::before { content: counter(case-step); position: absolute; inset-inline-start: 0; top: 0.12rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; color: var(--accent); background: #eef3ff; font-family: var(--mono); font-size: 0.72rem; line-height: 1; }
.case-steps strong { display: block; font-size: 0.91rem; font-weight: 650; line-height: 1.6; }
.case-steps p { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.7; }
.case-example { margin-top: 1.5rem; padding: 1.05rem 1.15rem; border-radius: 10px; background: #f3f6fb; }
.case-example__label { margin: 0 0 0.35rem; color: #577196; font-size: 0.72rem; font-weight: 650; line-height: 1.5; }
.case-example h3 { font-size: 1rem; font-weight: 650; line-height: 1.5; }
.case-example ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1rem; list-style: none; margin: 0.65rem 0 0; padding: 0; color: var(--ink-soft); font-size: 0.84rem; line-height: 1.7; }
.case-example li { min-width: 0; padding-inline-start: 0.7rem; border-inline-start: 2px solid #cfdaeb; }
.case-example__note { margin: 0.65rem 0 0; color: var(--ink-mute); font-size: 0.73rem; line-height: 1.6; }
.case-panel__footer { margin-top: 1.1rem; }
.case-panel__footer > p { margin: 0; color: var(--ink-mute); font-size: 0.81rem; line-height: 1.75; }
.case-panel__footer > p strong { color: var(--ink-soft); font-weight: 650; }
.case-panel__links { display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; margin-top: 0.5rem; }
.case-panel__links a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 0; max-width: 100%; color: var(--accent); font-size: 0.84rem; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.case-panel__links a svg { width: 16px; height: 16px; flex: none; }
.case-panel__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .case-browser:has(.case-tabs:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .case-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
  .case-tab { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.75rem; }
  .case-tab__icon { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 0.2rem; }
  .case-tab__label, .case-tab .status { grid-column: 1; }
}
@media (max-width: 640px) {
  .case-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .case-tab { grid-template-columns: 20px minmax(0, 1fr); gap: 0.15rem 0.5rem; min-height: 72px; }
  .case-tab__icon { grid-row: 1 / 3; margin: 0; }
  .case-tab__icon svg { width: 20px; height: 20px; }
  .case-tab__label, .case-tab .status { grid-column: 2; }
  .case-tab__label { font-size: 0.85rem; }
  .case-tab .status { font-size: 0.68rem; }
  .case-panel { padding: 1.1rem; }
  .case-panel__body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .case-example { padding: 0.9rem; }
  .case-example ul { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

.plans {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.plan--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-m);
  background:
    radial-gradient(120% 60% at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
}

.plan__badge {
  position: absolute;
  top: -0.75rem;
  inset-inline-start: 1.4rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--accent);
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
}
.plan__name { font-size: 1.05rem; color: var(--ink-soft); }
.plan__price { margin: 0.6rem 0 0; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.plan__amount {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.plan__period { font-size: 0.9rem; color: var(--ink-mute); }
.plan__blurb { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 0.92rem; min-height: 3.2em; }
.plan__cta { margin-top: 1.2rem; justify-content: center; }
.plan__includes { margin: 1.3rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.plan__features {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.plan__cta + .plan__features { margin-top: 1.4rem; }
.plan__features li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.plan__features svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  margin-top: 0.1rem;
  border-radius: 50%;
  color: var(--teal);
  background: var(--teal-soft);
}
.plan--featured .plan__features svg { color: var(--accent); background: var(--accent-soft); }
.plan__note {
  margin: auto 0 0;
  padding-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}

.faq { display: grid; gap: 0.6rem; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color var(--duration-micro) var(--ease-out),
    box-shadow var(--duration-micro) var(--ease-out);
}
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-s); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  font-weight: 550;
  font-size: 0.98rem;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--ink-mute), var(--ink-mute)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink-mute), var(--ink-mute)) center / 2px 12px no-repeat;
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq__item[open] summary::after {
  background: linear-gradient(var(--accent), var(--accent)) center / 12px 2px no-repeat;
}
.faq__item summary:hover { color: var(--accent); }
.faq__item p {
  margin: 0;
  padding: 0 1.15rem 1.05rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.7;
}

.docs {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.docs-nav {
  position: sticky;
  top: calc(var(--head-h) + 1.5rem);
  max-height: calc(100vh - var(--head-h) - 3rem);
  overflow-y: auto;
}
.docs-nav--disclosure,
.docs-nav__links { min-width: 0; }
.docs-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  margin: 0 0 0.6rem;
  padding: 0;
  color: var(--ink-mute);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.docs-nav__toggle::-webkit-details-marker { display: none; }
.docs-nav__toggle::after {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
}
.docs-nav--disclosure[open] > .docs-nav__toggle::after { background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat; }
.docs-nav__toggle:hover { color: var(--accent); }
.docs-nav__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.docs-nav__label {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.docs-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 1px solid var(--line);
  display: grid;
}
.docs-nav a {
  display: block;
  padding: 0.38rem 0 0.38rem 0.95rem;
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.docs-nav a:hover { color: var(--ink); }
.docs-nav a[aria-current="location"] {
  color: var(--accent);
  border-inline-start-color: var(--accent);
  font-weight: 550;
}
.docs-body { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); min-width: 0; }

.doc { max-width: 46rem; padding-block: 0; }
.doc[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
.doc h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); max-width: none; }
.doc__intro { margin: 0.8rem 0 0; color: var(--ink-soft); }
.doc__steps,
.doc__list { margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.doc__steps { list-style: none; counter-reset: step; }
.doc__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.6rem;
  color: var(--ink-soft);
}
.doc__steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.12rem;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}
.doc__list { padding-inline-start: 1.2rem; color: var(--ink-soft); }
.doc__list li::marker { color: var(--ink-mute); }
.doc__note {
  margin: 1.1rem 0 0;
  padding: 0.8rem 1rem;
  border-inline-start: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: var(--teal-soft);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.ui {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9em;
  font-weight: 550;
  line-height: 1.5;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline;
}
kbd {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.82em;
  line-height: 1.5;
}
@media (max-width: 960px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; max-height: none; }
  .docs-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .docs-nav--disclosure { border-bottom: 1px solid var(--line); }
  .docs-nav__toggle { min-height: 48px; margin: 0; padding-inline: 0.15rem; color: var(--ink-soft); font-size: 0.88rem; letter-spacing: 0; text-transform: none; }
  .docs-nav__links { padding-block: 0.5rem 0.9rem; }
}

.doc-capabilities { max-width: none; }
.docs-modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 1.2rem; border-top: 1px solid #dce3ee; }
.docs-modules .module { display: block; min-width: 0; padding: 0; border: 0; border-bottom: 1px solid #dce3ee; border-radius: 0; background: transparent; box-shadow: none; transition: none; }
.docs-modules .module:hover { transform: none; box-shadow: none; }
.docs-modules .roadmap-module > .module__head { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.8rem 0; border: 0; list-style: none; cursor: pointer; scroll-margin-top: calc(var(--head-h) + 1rem); }
.docs-modules .module__head:hover .module__name { color: var(--accent); }
.docs-modules .module__name { font-size: 1.05rem; font-weight: 650; line-height: 1.5; }
.docs-modules .module__count { min-width: 0; max-width: 100%; font-family: var(--font); font-size: 0.78rem; line-height: 1.6; color: var(--ink-mute); text-align: right; }
.docs-modules .module__lead { max-width: 72ch; margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.91rem; line-height: 1.8; }
.docs-modules .module__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 1.75rem; margin: 0 0 1.25rem; }
.docs-modules .feature { min-width: 0; padding: 0.65rem 0; border-top: 1px solid rgba(20, 24, 31, 0.07); font-size: 0.89rem; line-height: 1.75; overflow-wrap: anywhere; }
.docs-modules .feature__detail { font-size: 0.8rem; line-height: 1.75; }
.doc-capabilities > .note { margin-top: 1rem; font-size: 0.84rem; }
.doc-capabilities .inline-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; max-width: 100%; margin-top: 0.5rem; color: var(--accent); font-size: 0.86rem; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.doc-capabilities .inline-link svg { width: 16px; height: 16px; flex: none; }
.doc-capabilities .inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .docs-modules .roadmap-module > .module__head { grid-template-columns: minmax(0, 1fr) 28px; gap: 0.2rem 0.6rem; }
  .docs-modules .module__name { grid-column: 1; }
  .docs-modules .module__count { grid-column: 1; text-align: left; }
  .docs-modules .roadmap-module > summary::after { grid-column: 2; grid-row: 1 / 3; }
  .docs-modules .module__list { grid-template-columns: minmax(0, 1fr); }
  .docs-nav a { display: flex; align-items: center; min-height: 44px; }
}

.stages {
  position: relative;
  list-style: none;
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
}
.stages::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px);
}
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 3.1rem;
}
.stage__node {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px dashed var(--line-strong);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.stage--now .stage__node {
  background: var(--accent);
  border: 2px solid var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.stage__now {
  position: absolute;
  top: 8px;
  inset-inline-start: 48px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  padding-inline: 0.35rem;
}
.stage__name { font-size: 1rem; line-height: 1.35; }
.stage__goal { margin: 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; }
.stage__items {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.stage__items li,
.stage__items a {
  font-size: 0.75rem;
  line-height: 1.4;
}
.stage__items li { color: var(--ink-soft); }
.stage__items a,
.stage__items li:not(:has(a)) {
  display: inline-block;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  background: var(--surface);
  color: var(--ink-soft);
}
.stage__items a:hover { border-color: var(--accent); color: var(--accent); }
.stage--now .stage__items a { border-style: solid; border-color: rgba(29, 78, 216, 0.3); color: var(--accent); background: var(--accent-soft); }
.stage__gate {
  margin: auto 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

.stage__gate span { font-weight: 600; color: var(--ink-soft); margin-inline-end: 0.3em; }
body[lang^="zh"] .stage__gate span { margin-inline-end: 0; }

.lane {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.8rem 2rem;
  align-items: center;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.lane h3 { font-size: 1rem; }
.lane p { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--ink-soft); }
@media (max-width: 1000px) {
  .stages { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .stages::before {
    top: 18px;
    bottom: 18px;
    left: 17px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 11px);
  }
  .stage { padding-top: 0.35rem; padding-inline-start: 3.4rem; }
  .stage__now { position: static; align-self: flex-start; padding: 0; }
  .lane { grid-template-columns: minmax(0, 1fr); }
}

.stage-tag {
  display: inline-block;
  margin-inline-start: 0.35rem;
  vertical-align: 0.1em;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(29, 78, 216, 0.3);
  border-radius: 999px;
  padding: 0.02rem 0.45rem;
  white-space: nowrap;
}
.stage-tag--track { color: var(--ink-mute); border: 1px dashed var(--line-strong); }

.notplanned {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem var(--gap);
}
.notplanned li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.notplanned__mark {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-mute);
  background: linear-gradient(135deg, transparent 42%, var(--ink-mute) 42% 58%, transparent 58%);
}
@media (max-width: 900px) {
  .notplanned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .notplanned { grid-template-columns: minmax(0, 1fr); }
}

.hero-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0.3rem 0.95rem 0.3rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-s);
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.hero-pill b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.hero-pill__now {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(15, 118, 110, 0.3);
  background: var(--teal-soft);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}
.hero-pill a { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 550; }
.hero-pill a svg { width: 14px; height: 14px; flex: none; }
.hero-pill + h1 { margin-top: 1.1rem; }

.part-head {
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.part-sub { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 0.4rem; }

.sc-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 0.22rem 0.55rem;
  background: var(--surface);
  white-space: nowrap;
}
.sc-live-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.sc-reader {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  flex: 1;
  background: var(--surface-hi);
}
.sc-paper {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.sc-paper--tr { border-color: rgba(29, 78, 216, 0.3); }
.sc-paper__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sc-paper__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.sc-paper__cols > span { display: grid; gap: 0.35rem; align-content: start; }
.sc-mark {
  display: block;
  padding: 0.12rem 0.15rem;
  margin-inline: -0.15rem;
  border-radius: 3px;
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.sc-mark .win__line { background: rgba(29, 78, 216, 0.3); }
.sc-figure {
  display: block;
  height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 48%, var(--line) 48% 52%, transparent 52%),
    var(--surface-hi);
}
.sc-askbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--line);
}
.sc-askbar__q {
  flex: 1 1 12rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  background: var(--surface);
}

.sc-panes--agents { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.sc-thread-pane { gap: 0.6rem; }
.sc-turn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}
.sc-turn__body { display: grid; gap: 0.3rem; justify-items: start; }
.sc-turn__body .win__line { justify-self: stretch; }
.sc-turn__who { font-size: 0.66rem; font-weight: 650; color: var(--ink-soft); }
.sc-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffffff;
}
.sc-avatar--0 { background: #1d4ed8; }
.sc-avatar--1 { background: #0f766e; }
.sc-avatar--2 { background: #6b4fbb; }
.sc-you {
  justify-self: end;
  display: grid;
  gap: 0.3rem;
  width: 70%;
  padding: 0.45rem 0.6rem;
  border-radius: 10px 10px 3px 10px;
  background: var(--accent-soft);
}
.sc-you > span { font-size: 0.64rem; font-weight: 650; color: var(--accent); }
.sc-you .win__line { background: rgba(29, 78, 216, 0.3); }
.sc-role { font-size: 0.68rem; color: var(--ink-soft); }
.sc-run .sc-role + .win__chip { margin-inline-start: auto; }

.sc-panes--memory { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sc-topicline {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.sc-topicline .win__pane-name { margin: 0; }
.sc-topicline .sc-thread { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.sc-topicline .sc-thread li { display: inline-flex; align-items: center; gap: 0.3rem; }
.sc-memo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.sc-memo .win__line { flex: 1 1 3rem; }
.sc-origin {
  font-size: 0.6rem;
  color: var(--ink-mute);
  white-space: nowrap;
}
.sc-inbox {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.sc-inbox .win__line { justify-self: stretch; }
@media (max-width: 700px) {
  .sc-panes--agents,
  .sc-panes--memory { grid-template-columns: minmax(0, 1fr); }
  .sc-reader { grid-template-columns: minmax(0, 1fr); }
  .sc-reader .sc-paper--tr { display: none; }
}

.sc-mark .win__line { display: block; }

.sc-askbar .pin--in,
.sc-storage .pin--in { top: 50%; margin-top: -10px; inset-inline-end: 6px; }
.sc-askbar { padding-inline-end: 2.2rem; }
.sc-storage { padding-inline-end: 2.2rem; }
.sc-reader { align-items: start; }

#requirements .platforms { margin-top: 0; padding-top: 0; border-top: 0; }

.win__main:has(.ov-head) { background: #fbfaf6; }
.ov-side { background: #f5f3ee; }
.ov-side ul { margin-top: 0; }
.ov-side li { display: flex; align-items: center; gap: 0.45rem; }
.ov-count {
  margin-inline-start: auto;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ochre);
  background: var(--ochre-soft);
  border-radius: 999px;
  padding: 0 0.4rem;
}
.ov-side__label {
  display: block;
  margin: 0.9rem 0 0.3rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ov-team { position: relative; }
.ov-team li { align-items: flex-start; }
.ov-team li > span:last-child { display: grid; line-height: 1.3; }
.ov-team small { font-size: 0.6rem; color: var(--ink-mute); font-weight: 400; }
.ov-team li.is-active small { color: var(--ochre); }
.ov-side li.is-active { background: #ffffff; color: var(--ink); box-shadow: var(--shadow-s); }
.ov-ring {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink-mute);
}
.sc-avatar--you { background: var(--ink-soft); }

.ov-head {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 1rem 0.55rem;
}
.ov-eyebrow {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ov-titlebar { display: flex; align-items: center; gap: 0.6rem; }
.ov-titlebar .win__line { flex: 0 1 auto; }
.win__line--head { height: 9px; border-radius: 4px; background: var(--line-strong); opacity: 0.7; }
.ov-needs {
  margin-inline-start: auto;
  font-size: 0.64rem;
  font-weight: 650;
  color: var(--ochre);
  background: var(--ochre-soft);
  border-radius: 7px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}
.ov-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-size: 0.62rem;
  color: var(--ink-mute);
}
.ov-status b { color: var(--ink); font-weight: 600; }
.ov-tabs {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
}
.ov-tabs span {
  font-size: 0.7rem;
  color: var(--ink-mute);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.ov-tabs .is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

.ov-thread { display: grid; gap: 0.7rem; padding: 0.8rem 1rem; flex: 1; align-content: start; }
.ov-msg {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}
.ov-msg__body { display: grid; gap: 0.32rem; justify-items: start; }
.ov-msg__body > .win__line { justify-self: stretch; }
.ov-who { font-size: 0.68rem; font-weight: 650; color: var(--ink); }
.ov-who small { font-weight: 400; color: var(--ink-mute); margin-inline-start: 0.25rem; }
.ov-routes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ov-route {
  font-size: 0.6rem;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
  background: var(--surface);
}
.ov-cites { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ov-cite {
  font-size: 0.6rem;
  color: var(--accent);
  border-bottom: 1px solid rgba(29, 78, 216, 0.4);
}

.ov-request {
  display: grid;
  gap: 0.4rem;
  margin-inline-start: 1.9rem;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--ochre-line);
  border-radius: 10px;
  background: var(--surface);
}
.ov-request__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ov-need {
  font-size: 0.6rem;
  font-weight: 650;
  color: var(--ochre);
  background: var(--ochre-soft);
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
}
.ov-code {
  display: grid;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem;
  border-radius: 7px;
  background: #f1efe9;
}
.ov-request__actions,
.ov-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.ov-btn {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0.2rem 0.6rem;
  background: var(--surface);
  white-space: nowrap;
}
.ov-btn--primary { background: #2f3a2c; border-color: #2f3a2c; color: #ffffff; }
.ov-scope { margin-inline-start: auto; font-size: 0.58rem; color: var(--ink-mute); }
.ov-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.5rem 2.2rem 0.5rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.6rem;
  color: var(--ink-soft);
  background: #f5f3ee;
}
.ov-foot__actions { margin-inline-start: auto; display: flex; gap: 0.8rem; font-weight: 600; color: var(--ink); }
.ov-foot .pin--in,
.ov-usage .pin--in { top: 50%; margin-top: -10px; inset-inline-end: 6px; }

.ov-docbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
}
.ov-docname { font-size: 0.68rem; font-weight: 600; color: var(--ink); }
.ov-doclinks { display: flex; gap: 0.9rem; font-size: 0.62rem; color: var(--ink-mute); }
.ov-doclinks .is-active { color: var(--ink); font-weight: 600; }
.ov-doc {
  display: grid;
  gap: 0.42rem;
  padding: 0.9rem 1.4rem;
  flex: 1;
  align-content: start;
}
.ov-headline { display: grid; gap: 0.4rem; margin: 0.2rem 0 0.3rem; }
.ov-headline .win__line { height: 12px; border-radius: 5px; opacity: 0.6; }
.ov-meta { display: grid; gap: 0.1rem; font-size: 0.6rem; color: var(--ink-mute); margin-bottom: 0.3rem; justify-self: start; }
.ov-reviewbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--line);
  background: #f5f3ee;
}
.ov-delivery {
  margin-inline-start: auto;
  font-size: 0.6rem;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 0.12rem 0.45rem;
}

.ov-usage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-hi);
}
.ov-reading { display: grid; gap: 0.05rem; }
.ov-reading > span { font-size: 0.56rem; color: var(--ink-mute); }
.ov-reading b { font-size: 0.74rem; color: var(--ink); font-weight: 650; }
.ov-reading small { font-size: 0.54rem; color: var(--ink-mute); }

@media (max-width: 700px) {
  .ov-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-request { margin-inline-start: 0; }
}

.scope-board {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
}
.scope-col {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.scope-col h3 { font-size: 1rem; }
.scope-col > p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--ink-mute); }
.scope-col ul {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.scope-col li {
  font-size: 0.78rem;
  line-height: 1.4;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  color: var(--ink-soft);
  background: var(--bg);
}
.scope-col--first { border-top: 3px solid var(--accent); }
.scope-col--first li { border-color: rgba(29, 78, 216, 0.35); color: var(--ink); }
.scope-col--selected { border-top: 3px dashed var(--line-strong); }
.scope-col--later { background: var(--surface-hi); }
.scope-col--later li { color: var(--ink-mute); }
@media (max-width: 900px) {
  .scope-board { grid-template-columns: minmax(0, 1fr); }
}

.ov-side li { white-space: nowrap; font-size: 0.7rem; }
.ov-side .ov-team li > span:last-child { white-space: normal; }
.ov-routes.pinned,
.ov-doclinks .pinned,
.ov-meta.pinned { padding-inline-end: 1rem; }
.ov-delivery.pinned { padding-inline-end: 1.4rem; }

@media (max-width: 700px) {
  .showcase .win__side.ov-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.6rem 0.8rem;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .showcase .ov-side ul { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
  .showcase .ov-side__label { display: none; }
  .showcase .ov-team li { padding: 0.2rem 0.4rem; }
  .showcase .ov-team small { display: none; }
}

.faq-cats { display: grid; gap: 0.7rem; }
.faq-cat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.faq-cat > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.15rem;
  font-weight: 650;
  font-size: 1rem;
}
.faq-cat > summary::-webkit-details-marker { display: none; }
.faq-cat > summary::after {
  content: "";
  margin-inline-start: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq-cat[open] > summary::after { transform: rotate(-135deg); }
.faq-cat > summary:hover { color: var(--accent); }
.faq-cat__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.45rem;
}
.faq--nested { padding: 0 0.7rem 0.7rem; gap: 0.45rem; }
.faq--nested .faq__item { background: var(--bg); }

.plan__options {
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.plan__options > div {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
body[lang^="zh"] .plan__options > div { grid-template-columns: 4.6rem minmax(0, 1fr); }
.plan__options > div:first-child { border-top: 0; }
.plan__options dt { color: var(--ink-mute); font-weight: 600; }
.plan__options dd { margin: 0; color: var(--ink-soft); }
.plan__options b { color: var(--ink); font-weight: 650; }
.plan__options s { color: var(--ink-mute); }
.plan__options small { color: var(--teal); font-weight: 600; font-size: 0.74rem; }
.plan--featured .plan__options > div { background: rgba(255, 255, 255, 0.7); }

.billing {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: 1.2rem 1.4rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-hi);
}
.billing__title { font-size: 1.05rem; }
.billing__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 0.9rem;
}
.billing__col {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.billing__col h4 { margin: 0; font-size: 0.95rem; }
.billing__col ul { margin: 0.6rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: 0.4rem; }
.billing__col li { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; }
.billing__col li::marker { color: var(--ink-mute); }
@media (max-width: 760px) {
  .billing__cols { grid-template-columns: minmax(0, 1fr); }
}

.plan__options > div,
body[lang^="zh"] .plan__options > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.05rem;
  padding: 0.45rem 0.65rem;
}
.plan__options dt { font-size: 0.7rem; letter-spacing: 0.04em; }
.plan__options dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem; }

.plan__options small { color: var(--ink-soft); }

.plan-compare { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }

.tour__tabs.plan-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 26rem);
  margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  padding: 4px;
  border-radius: 999px;
  overflow: visible;
  background: var(--surface-hi);
  border: 1px solid var(--line);
}
.tour__tabs.plan-switch[hidden] { display: none; }
.plan-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-m);
  transition: transform var(--duration-normal) var(--ease-spring),
    background var(--duration-normal) var(--ease-out);
}
.plan-switch:has(> .plan-switch__tab:nth-child(2)[aria-selected="true"])::before {
  transform: translateX(100%);
  background: var(--accent);
}
.tour__tab.plan-switch__tab {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  transition: color var(--duration-normal) var(--ease-out);
}
.plan-switch__tab span { font-weight: 650; font-size: 0.98rem; }
.plan-switch__tab small { font-size: 0.72rem; color: var(--ink-mute); transition: color var(--duration-normal) var(--ease-out); }
.tour__tab.plan-switch__tab[aria-selected="true"] { color: var(--ink); background: transparent; box-shadow: none; }
.tour__tab.plan-switch__tab:nth-child(2)[aria-selected="true"],
.tour__tab.plan-switch__tab:nth-child(2)[aria-selected="true"] small { color: #ffffff; }

.plan-panel {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-m);
}
.plan-panel--pro {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-m);
  background:
    radial-gradient(90% 60% at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
}
.plan-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.plan-panel__name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan__badge--inline { position: static; letter-spacing: 0; text-transform: none; }
.plan-panel__tagline { margin-top: 0.5rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; }
.plan-panel__who { margin: 0.5rem 0 0; color: var(--ink-soft); }
.plan-panel__price {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.plan-panel__price .plan__price { margin: 0; }
.plan-panel__price .plan__cta { width: 100%; }
.plan-panel__includes {
  margin: clamp(1.4rem, 3vw, 1.8rem) 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.gains {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.6rem;
}
.plan-panel--pro .gains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-panel--standard .gains { margin-top: clamp(1.4rem, 3vw, 1.8rem); }
.gain {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}
.gain__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.plan-panel--standard .gain__icon { background: var(--teal-soft); color: var(--teal); }
.gain__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.gain b { display: block; font-size: 0.98rem; color: var(--ink); }
.gain b + span { display: block; margin-top: 0.2rem; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }

.gain b a { color: inherit; text-decoration: none; }
.gain b a:hover,
.gain b a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

.gain__items { display: block; margin-top: 0.3rem; font-size: 0.84rem; line-height: 1.6; color: var(--ink-soft); }

.gain__items > span { display: inline-block; max-width: 100%; }
.gain__items > span:not(:last-child)::after { content: "·"; margin: 0 0.45em; color: var(--ink-mute); }
.gain__note { display: block; margin-top: 0.35rem; font-size: 0.78rem; line-height: 1.5; color: var(--ink-mute); }
.plan-panel__soon {
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-mute);
}
.plan-panel__soon a {
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.plan-panel__soon a:hover,
.plan-panel__soon a:focus-visible { border-color: var(--accent); color: var(--accent); }

@keyframes plan-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }
@keyframes gain-in { from { opacity: 0; transform: translateY(8px); } }
[data-tabs-ready] .plan-panel:not([hidden]) { animation: plan-in 420ms var(--ease-out) both; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain { animation: gain-in 420ms var(--ease-out) both; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(2) { animation-delay: 60ms; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(3) { animation-delay: 120ms; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(4) { animation-delay: 180ms; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(5) { animation-delay: 240ms; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(6) { animation-delay: 300ms; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(7) { animation-delay: 360ms; }
[data-tabs-ready] .plan-panel:not([hidden]) .gain:nth-child(8) { animation-delay: 420ms; }

.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.price-card__name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink-soft);
}
.price-card__badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.price-card .plan__price { margin-top: 0.5rem; }
.price-card__was { font-size: 0.95rem; color: var(--ink-mute); }
.price-card__sub { margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.cmp {
  margin: 1rem 0 0;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: var(--surface-hi);
  display: grid;
  gap: 0.45rem;
}
.cmp__title { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.cmp__row {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
body[lang^="zh"] .cmp__row { grid-template-columns: 4.6rem minmax(0, 1fr) auto; }
.cmp__row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp__bar {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--line-strong);
  transform-origin: left center;
  transition: transform 800ms var(--ease-out) 200ms;
}
.cmp__row + .cmp__row .cmp__bar { background: var(--accent); }
.cmp__bar--w100 { width: 100%; }
.cmp__bar--w60 { width: 60%; }
.cmp__bar--w50 { width: 50%; }
[data-reveal] .price-card:not(.is-visible) .cmp__bar { transform: scaleX(0); }
.cmp__save { margin: 0.1rem 0 0; font-size: 0.84rem; font-weight: 650; color: var(--accent); }
.price-card__facts {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.price-card__facts li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.price-card__facts svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  margin-top: 0.1rem;
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--surface-hi);
}
.price-card .plan__cta { margin-top: auto; padding-top: 0; align-self: flex-start; }
.price-card__facts + .plan__cta { margin-top: 1.2rem; }

@media (max-width: 900px) {
  .plan-panel__head { grid-template-columns: minmax(0, 1fr); }
  .plan-panel--pro .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .gains,
  .plan-panel--pro .gains { grid-template-columns: minmax(0, 1fr); }
}

.plan-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.plan-panel__price { position: sticky; top: calc(var(--head-h) + 1rem); }
.plan-panel--pro .gains,
.plan-panel--standard .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-panel--standard .gains { margin-top: 1.3rem; }
@media (max-width: 900px) {
  .plan-panel { grid-template-columns: minmax(0, 1fr); }
  .plan-panel__price { position: static; }
}
@media (max-width: 600px) {
  .plan-panel--pro .gains,
  .plan-panel--standard .gains { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 861px) {
  [data-tabs-ready] .plan-panel[hidden] { display: none; }
}

.plan-panel[hidden] { display: none; }

.sc-tools .win__chips.pinned { padding-inline-end: 0.65rem; }
.doc code {
  font-family: var(--mono);
  font-size: 0.84em;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; list-style: none; padding: 0; margin: 2.2rem 0 0; }
.benefit { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 2.7vw, 2rem); }
.benefit__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent); border-radius: 11px; }
.benefit__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; }
.benefit__status { float: right; color: var(--ink-mute); font-size: .73rem; padding-block: .6rem; }
.benefit h3 { margin-top: 1.25rem; font-size: 1.35rem; }
.benefit h3 a { color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.benefit h3 a:hover { color: var(--accent); }
.benefit h3 svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.benefit p { font-size: 0.94rem; color: var(--ink-soft); margin: 0.85rem 0 0; line-height: 1.8; }
.benefits__note { color: var(--ink-mute); font-size: 0.82rem; margin-top: 1rem; }
@media (max-width: 540px) {
  .benefits { grid-template-columns: minmax(0, 1fr); }
}

.site-menu { display: none; }
.team-job-panel { scroll-margin-top: calc(var(--head-h) + 1rem); }

@media (max-width: 640px) {
  .site-head__inner {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand actions menu";
    gap: 0.4rem;
    min-height: 60px;
    padding-block: 0.4rem;
  }
  .site-nav--desktop { display: none; }
  .site-head .site-cta { display: none; }
  .site-head .brand { min-height: 44px; min-width: 0; }
  .site-head__actions { min-width: 0; gap: 0; }
  .lang-switch { justify-content: center; min-height: 44px; padding-inline: 0.55rem; font-size: 0.78rem; }
  .site-menu { display: block; grid-area: menu; }
  .site-menu > summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--surface);
    list-style: none;
    cursor: pointer;
  }
  .site-menu > summary::-webkit-details-marker { display: none; }
  .site-menu > summary svg { width: 24px; height: 24px; }
  .site-menu > summary:hover,
  .site-menu[open] > summary { border-color: #b4c7ee; color: var(--accent); background: var(--accent-soft); }
  .site-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .site-menu__nav {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 2;
    width: min(calc(100vw - 2.5rem), 340px);
    display: grid;
    gap: 0.2rem;
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 15px 35px -15px #23314b45;
  }
  .site-menu__nav a { display: block; min-height: 44px; padding: 0.7rem 0.85rem; border-radius: 8px; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; }
  .site-menu__nav a:hover { color: var(--accent); background: var(--surface-hi); }
  .site-menu__nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
}

@media (max-width: 600px) {
  .sc-flag { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  .tour__tabs button { min-height: 44px; }
  .hs__play { width: 44px; height: 44px; }
  .hs-node--in { width: min(calc(100% - 2rem), 360px); max-width: calc(100% - 2rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .hs-node--in .hs-file { min-width: 0; }
  .hs-node--in .hs-file span { min-width: 0; }
  .hs-node--in .hs-file b,
  .hs-node--in .hs-file small { white-space: normal; overflow-wrap: anywhere; }
  .hs-node--mira,
  .hs-node--theo,
  .hs-node--quinn {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    width: 33%;
    max-width: 138px;
    gap: 0.3rem;
    white-space: normal;
  }
  .hs-node--mira .sc-avatar,
  .hs-node--theo .sc-avatar,
  .hs-node--quinn .sc-avatar { width: 24px; height: 24px; }
  .hs-node__who { min-width: 0; }
  .hs-node--mira .hs-state,
  .hs-node--theo .hs-state,
  .hs-node--quinn .hs-state { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
  .hs-rail__step,
  .hs-rail__btn,
  .hs-rail__label { min-width: 0; }
  .hs-rail__label { white-space: normal; overflow-wrap: anywhere; }
  .hs-rail__btn { min-height: 44px; }
}

@media (max-width: 400px) {
  .hs-map { height: 440px; }
  .hs-node--in { grid-template-columns: minmax(0, 1fr); }
  .hs-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.65rem; }
  .studio-spotlight__orb { top: 100px; }
  .studio-companion { top: 132px; }
}

@media (max-width: 600px) {
  .studio-spotlight__scene {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto;
    padding-top: clamp(295px, 77vw, 390px);
  }
  .studio-spotlight__source {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-start;
    max-width: 100%;
    transform: none;
  }
  .studio-spotlight__result {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .brand { gap: 0.4rem; font-size: 0.84rem; }
  .brand img { width: 26px; height: 26px; }
  .lang-switch { padding-inline: 0.4rem; }
  .lang-switch svg { display: none; }
}

body[data-page="roadmap"] {
  --bg: #fffefa;
  --band: #f3f6fc;
  --shell: 1240px;
}
body[data-page="roadmap"]::before { display: none; }
body[data-page="roadmap"] .site-head .brand { font-weight: 750; }
body[data-page="roadmap"] .site-head .btn--primary { background: #17243b; box-shadow: none; }
body[data-page="roadmap"] .site-head .btn--primary:hover { background: var(--accent); }
body[data-page="roadmap"] section { padding-block: clamp(2.2rem, 4vw, 3.5rem); }
body[data-page="roadmap"] .band { background: var(--band); border-color: #e1e7f1; }
body[data-page="roadmap"] h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 750; letter-spacing: -0.035em; }
body[data-page="roadmap"] h3 { font-weight: 700; }
body[data-page="roadmap"] .section-lead { max-width: 70ch; font-size: 1rem; line-height: 1.65; }
body[data-page="roadmap"] section[id],
body[data-page="roadmap"] .stage[id],
body[data-page="roadmap"] .roadmap-stage__header[id],
body[data-page="roadmap"] .module__head[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
body[data-page="roadmap"] .inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  max-width: 100%;
  font-size: 0.89rem;
  font-weight: 650;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body[data-page="roadmap"] .inline-link svg { width: 16px; height: 16px; flex: none; }
body[data-page="roadmap"] .inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
body[data-page="roadmap"] .roadmap-hero { padding-block: clamp(2rem, 4vw, 3.25rem) 1.25rem; }
.roadmap-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.roadmap-hero__copy,
.roadmap-hero__grid > *,
.roadmap-overview > *,
.roadmap-stages > *,
.roadmap-scope > *,
.roadmap-modules > * { min-width: 0; }
.roadmap-hero__copy h1 { max-width: 14ch; font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; word-spacing: 0.045em; line-height: 1.1; }
.roadmap-hero__copy .hero__lead { max-width: 50ch; margin: 1rem 0 0; font-size: 1.04rem; line-height: 1.65; }
.roadmap-hero__note { max-width: 66ch; margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--ink-mute); line-height: 1.6; }
.roadmap-build-card {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid #dce3ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 60px -38px rgba(30, 48, 80, 0.32);
}
.roadmap-build-card__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.15rem; font-weight: 700; font-size: 0.87rem; }
.roadmap-build-card__brand img { width: 44px; height: 44px; flex: none; }
.roadmap-build-card small { display: block; font-size: 0.8rem; color: var(--ink-mute); }
.roadmap-build-card__version { display: block; margin-top: 0.3rem; color: #17243b; font-family: var(--mono); font-size: clamp(2.3rem, 3vw, 2.8rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.06em; overflow-wrap: anywhere; }
.roadmap-build-card > p { margin: 0.7rem 0 0.2rem; color: var(--ink-soft); font-size: 0.91rem; line-height: 1.6; }
.roadmap-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.75rem; }
.roadmap-overview-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.2rem; border: 1px solid #e1e6ed; border-radius: 14px; background: #ffffff; }
.roadmap-overview-card--current { background: #eef5f0; border-color: #dbe8df; }
.roadmap-overview-card--planned { background: #edf2ff; border-color: #dbe4fb; }
.roadmap-overview-card--research { background: #f4f2ee; border-color: #e7e2d9; }
.roadmap-status { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; font-size: 0.73rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.045em; color: #4a5870; }
.roadmap-status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.roadmap-overview-card--current .roadmap-status { color: #287452; }
.roadmap-overview-card--planned .roadmap-status { color: #2856d8; }
body[data-page="roadmap"] .roadmap-overview-card h2 { margin-top: 0.65rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.35; letter-spacing: -0.025em; }
.roadmap-overview-card > p { margin: 0.5rem 0 0.5rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }
.roadmap-overview-card > .inline-link { margin-top: auto; }
.roadmap-nav-band { padding-block: 0.55rem; border-block: 1px solid #e1e6ed; background: #ffffff; }
.roadmap-index { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; margin: 0; padding: 0; border: 0; }
.roadmap-index__label { color: var(--ink-mute); font-size: 0.78rem; font-weight: 600; line-height: 1.5; }
.roadmap-index ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.roadmap-index li { min-width: 0; max-width: 100%; }
.roadmap-index a { display: flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 0.5rem 0.65rem; border-radius: 8px; background: #f4f6fa; color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; line-height: 1.4; text-align: center; overflow-wrap: anywhere; transition: background 160ms, color 160ms; }
.roadmap-index a:hover { color: var(--accent); background: #eaf1ff; }
.roadmap-index a:focus-visible,
.stage__details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-page="roadmap"] #path { padding-top: clamp(1.5rem, 2.5vw, 2rem); border-top: 0; }
body[data-page="roadmap"] #path .eyebrow { margin-bottom: 0.65rem; }
body[data-page="roadmap"] .roadmap-stages { display: block; margin-top: 1.25rem; border: 1px solid #dfe5ef; border-radius: 12px; overflow: hidden; background: #ffffff; }
body[data-page="roadmap"] .roadmap-stages::before { display: none; }
body[data-page="roadmap"] .roadmap-stages .stage { display: block; padding: 0; border: 0; border-radius: 0; background: #ffffff; }
body[data-page="roadmap"] .roadmap-stages .stage + .stage { border-top: 1px solid #e3e8f0; }
body[data-page="roadmap"] .roadmap-stages .stage--now { grid-column: auto; background: #edf3ff; border-color: #d4e1fc; }
body[data-page="roadmap"] .roadmap-stages .stage__node { position: static; width: 26px; height: 26px; flex: none; border: 1px solid #d1d9e6; background: #f4f6fa; box-shadow: none; color: #4a5870; font-family: var(--mono); font-size: 0.75rem; }
body[data-page="roadmap"] .roadmap-stages .stage--now .stage__node { background: #2856d8; border-color: #2856d8; color: #ffffff; }
.stage--now .roadmap-status { color: #2856d8; }
body[data-page="roadmap"] .roadmap-stages .stage__name { min-width: 0; max-width: none; font-size: 0.98rem; font-weight: 650; line-height: 1.5; letter-spacing: 0; }
.roadmap-stage__summary { min-width: 0; max-width: none; margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.stage__details { margin: 0; border: 0; }
body[data-page="roadmap"] .roadmap-stages .stage__details > summary { display: grid; grid-template-columns: 26px minmax(170px, 0.7fr) minmax(0, 1.3fr) 110px 20px; align-items: center; gap: 0.9rem; min-height: 64px; padding: 0.6rem 1rem; list-style: none; cursor: pointer; }
body[data-page="roadmap"] .roadmap-stages .stage__details > summary:hover { background: rgba(29, 78, 216, 0.035); }
body[data-page="roadmap"] .roadmap-stage__header .roadmap-status { justify-self: start; font-size: 0.7rem; }
.roadmap-stage__content { padding: 0.2rem 1.2rem 1rem 3.55rem; border-top: 1px solid #e3e8f0; }
.stage__details > summary::-webkit-details-marker,
.roadmap-module > summary::-webkit-details-marker { display: none; }
.stage__details > summary::after,
.roadmap-module > summary::after { content: ""; flex: none; display: block; width: 28px; height: 28px; color: var(--ink-soft); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: center; background-size: 12px 2px, 2px 12px; background-repeat: no-repeat; }
body[data-page="roadmap"] .roadmap-stage__header::after { width: 20px; height: 20px; }
.stage__details[open] > summary::after,
.roadmap-module[open] > summary::after { background-image: linear-gradient(currentColor, currentColor); background-size: 12px 2px; }
body[data-page="roadmap"] .roadmap-stages .stage__goal { margin-top: 0.5rem; font-size: 0.91rem; line-height: 1.65; }
body[data-page="roadmap"] .roadmap-stages .stage__items,
body[data-page="roadmap"] .lane .stage__items { display: grid; gap: 0; margin: 0.7rem 0 1rem; }
body[data-page="roadmap"] .roadmap-stages .stage__items li,
body[data-page="roadmap"] .lane .stage__items li { display: block; min-width: 0; padding: 0.6rem 0; border: 0; border-bottom: 1px solid rgba(20, 24, 31, 0.07); border-radius: 0; background: none; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; overflow-wrap: anywhere; }
body[data-page="roadmap"] .roadmap-stages .stage__items a,
body[data-page="roadmap"] .lane .stage__items a { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font-size: inherit; line-height: inherit; text-decoration: underline; text-decoration-color: #bdccee; text-underline-offset: 4px; }
body[data-page="roadmap"] .roadmap-stages .stage__items a:hover,
body[data-page="roadmap"] .lane .stage__items a:hover { text-decoration-color: var(--accent); }
body[data-page="roadmap"] .roadmap-stages .stage__gate { padding-top: 0.75rem; border-top: 0; font-size: 0.83rem; line-height: 1.75; }
body[data-page="roadmap"] .lane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; margin-top: 1rem; padding: 1.3rem; border: 1px solid #dfe5ef; border-radius: 16px; background: #f2f6fc; }
body[data-page="roadmap"] .lane h3 { max-width: 36ch; font-size: 1.15rem; }
body[data-page="roadmap"] .lane p { margin-top: 0.5rem; font-size: 0.91rem; line-height: 1.65; }
body[data-page="roadmap"] .lane .stage__items { margin: 0; }
body[data-page="roadmap"] .roadmap-scope { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-items: start; gap: 0.85rem; margin-top: 1.4rem; }
body[data-page="roadmap"] .roadmap-scope .scope-col { min-width: 0; padding: 1.25rem; border: 1px solid #dce3ee; border-radius: 16px; background: #ffffff; }
body[data-page="roadmap"] .roadmap-scope .scope-col--first { grid-row: auto; border-color: #d3dffc; background: #eaf1ff; }
body[data-page="roadmap"] .roadmap-scope .scope-col--later { background: #f9f8f5; border-color: #e2dfd9; }
.roadmap-scope .scope-col--first .roadmap-status { color: #2856d8; }
.scope-col__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 0.4rem 0.6rem; min-height: 90px; }
body[data-page="roadmap"] .roadmap-scope .scope-col h3 { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: 28ch; font-size: 1.25rem; line-height: 1.35; }
.scope-col__count { grid-column: 2; grid-row: 1; padding: 0.1rem 0.4rem; border-radius: 5px; background: rgba(20, 24, 31, 0.045); color: var(--ink-mute); font-size: 0.75rem; line-height: 1.6; white-space: nowrap; }
.scope-col__note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
body[data-page="roadmap"] .roadmap-scope .scope-col ul { display: grid; gap: 0; margin-top: 0.75rem; }
body[data-page="roadmap"] .roadmap-scope .scope-col--first ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
body[data-page="roadmap"] .roadmap-scope .scope-col li { min-width: 0; padding: 0.38rem 0; border: 0; border-bottom: 1px solid rgba(20, 24, 31, 0.08); border-radius: 0; background: transparent; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
body[data-page="roadmap"] .roadmap-scope .scope-col li:last-child { border-bottom: 0; }
body[data-page="roadmap"] #product .showcase { margin-top: 2.4rem; }
.capabilities-location { margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid #dce3ee; color: var(--ink-soft); scroll-margin-top: calc(var(--head-h) + 1rem); }
.capabilities-location > p { margin: 0; font-size: 0.91rem; line-height: 1.75; }
.capabilities-location > p a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; max-width: 100%; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.capabilities-location a svg { width: 16px; height: 16px; flex: none; }
.capabilities-location__legacy { margin-top: 0.35rem; }
.capabilities-location__legacy > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; list-style: none; color: var(--ink-mute); font-size: 0.8rem; line-height: 1.6; cursor: pointer; }
.capabilities-location__legacy > summary::-webkit-details-marker { display: none; }
.capabilities-location__legacy > summary::after { content: ""; display: block; flex: none; width: 20px; height: 20px; background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat; }
.capabilities-location__legacy[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat; }
.capabilities-location__legacy ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.capabilities-location__legacy a { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; max-width: 100%; color: var(--accent); font-size: 0.83rem; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; scroll-margin-top: calc(var(--head-h) + 1rem); }
body[data-page="roadmap"] #latest { background: #ffffff; }
body[data-page="roadmap"] .latest__grid { margin-top: 1.4rem; }
body[data-page="roadmap"] .latest__item { border-color: #e0e5ed; border-radius: 18px; box-shadow: none; }
body[data-page="roadmap"] .roadmap-modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 1.4rem; border-top: 1px solid #dce3ee; }
body[data-page="roadmap"] .roadmap-modules .module { display: block; min-width: 0; padding: 0; border: 0; border-bottom: 1px solid #dce3ee; border-radius: 0; background: transparent; box-shadow: none; transition: none; }
body[data-page="roadmap"] .roadmap-modules .module:hover { transform: none; box-shadow: none; }
.roadmap-module { min-width: 0; }
body[data-page="roadmap"] .roadmap-module > .module__head { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 1rem; min-height: 64px; padding: 0.8rem 0; border: 0; list-style: none; cursor: pointer; }
body[data-page="roadmap"] .roadmap-module .module__name { font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 650; line-height: 1.4; }
body[data-page="roadmap"] .roadmap-module .module__count { min-width: 0; max-width: 100%; font-family: var(--font); font-size: 0.83rem; line-height: 1.6; color: var(--ink-mute); text-align: right; }
.roadmap-module .module__lead { max-width: 72ch; margin: 0 0 1.2rem; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.8; }
body[data-page="roadmap"] .roadmap-module .module__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin: 0 0 1.5rem; }
body[data-page="roadmap"] .roadmap-module .feature { min-width: 0; padding: 0.75rem 0; border-top: 1px solid rgba(20, 24, 31, 0.07); font-size: 0.93rem; line-height: 1.8; overflow-wrap: anywhere; }
body[data-page="roadmap"] .roadmap-module .feature__detail { font-size: 0.84rem; line-height: 1.75; }

body[data-page="roadmap"][lang^="zh"] .roadmap-hero__copy h1 { max-width: 9em; line-height: 1.25; letter-spacing: -0.025em; }
body[data-page="roadmap"][lang^="zh"] h2 { line-height: 1.35; letter-spacing: -0.015em; }
body[data-page="roadmap"][lang^="zh"] .roadmap-status { letter-spacing: 0.015em; }

@media (max-width: 1099px) {
  body[data-page="roadmap"] .roadmap-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="roadmap"] .roadmap-scope .scope-col--first { grid-column: 1 / -1; }
  .scope-col__head { min-height: 98px; }
}
@media (max-width: 900px) {
  .roadmap-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 2rem; }
  .roadmap-overview { gap: 0.75rem; }
  .roadmap-overview-card { padding: 1.2rem; }
  body[data-page="roadmap"] .roadmap-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="roadmap"] .roadmap-stages .stage { padding: 0; }
  body[data-page="roadmap"] .roadmap-stages .stage__details > summary { grid-template-columns: 26px minmax(0, 1fr) 110px 20px; gap: 0.35rem 0.75rem; }
  body[data-page="roadmap"] .roadmap-stage__header .stage__node { grid-column: 1; grid-row: 1 / 3; }
  body[data-page="roadmap"] .roadmap-stage__header .stage__name { grid-column: 2; grid-row: 1; }
  body[data-page="roadmap"] .roadmap-stage__header .roadmap-stage__summary { grid-column: 2; grid-row: 2; }
  body[data-page="roadmap"] .roadmap-stage__header .roadmap-status { grid-column: 3; grid-row: 1 / 3; }
  body[data-page="roadmap"] .roadmap-stage__header::after { grid-column: 4; grid-row: 1 / 3; }
  .roadmap-index { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .roadmap-index__label { font-size: 0.75rem; }
}
@media (max-width: 700px) {
  body[data-page="roadmap"] section { padding-block: 2.1rem; }
  body[data-page="roadmap"] .roadmap-hero { padding-block: 2rem 1.3rem; }
  .roadmap-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .roadmap-hero__copy h1 { max-width: 16ch; font-size: clamp(2.4rem, 7.8vw, 3.1rem); }
  .roadmap-hero__copy .hero__lead { font-size: 1rem; margin-top: 1.1rem; }
  .roadmap-build-card { padding: 1.15rem; }
  .roadmap-build-card__brand { margin-bottom: 1rem; }
  .roadmap-overview { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; margin-top: 1.4rem; }
  .roadmap-overview-card { padding: 1.1rem; }
  body[data-page="roadmap"] .roadmap-overview-card h2 { margin-top: 0.75rem; font-size: 1.35rem; }
  .roadmap-overview-card > p { margin-block: 0.55rem 0.3rem; }
  .roadmap-nav-band { padding-block: 0.7rem; }
  .roadmap-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
  .roadmap-index a { padding-inline: 0.45rem; font-size: 0.82rem; }
  .capabilities-location__legacy ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
  body[data-page="roadmap"] .roadmap-stages { margin-top: 1.2rem; }
  body[data-page="roadmap"] .roadmap-stages .stage--now { grid-column: auto; }
  body[data-page="roadmap"] .roadmap-stages .stage { padding: 0; }
  body[data-page="roadmap"] .roadmap-stages .stage__details > summary { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 0.25rem 0.6rem; min-height: 64px; padding: 0.6rem 0.75rem; }
  body[data-page="roadmap"] .roadmap-stage__header .stage__node { grid-row: 1 / 3; }
  body[data-page="roadmap"] .roadmap-stage__header .roadmap-status { grid-column: 2; grid-row: 2; }
  body[data-page="roadmap"] .roadmap-stage__header .roadmap-stage__summary { display: none; }
  body[data-page="roadmap"] .roadmap-stage__header::after { grid-column: 3; grid-row: 1 / 3; }
  .roadmap-stage__content { padding: 0.4rem 0.9rem 0.9rem; }
  body[data-page="roadmap"] .lane { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding: 1.1rem; }
  body[data-page="roadmap"] .roadmap-scope { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; margin-top: 1.2rem; }
  body[data-page="roadmap"] .roadmap-scope .scope-col { padding: 1.1rem; }
  body[data-page="roadmap"] .roadmap-scope .scope-col--first { grid-row: auto; grid-column: auto; }
  body[data-page="roadmap"] .roadmap-scope .scope-col--first ul { grid-template-columns: minmax(0, 1fr); }
  .scope-col__head { min-height: 0; }
  body[data-page="roadmap"] .roadmap-module > .module__head { grid-template-columns: minmax(0, 1fr) 28px; gap: 0.25rem 0.7rem; min-height: 64px; }
  body[data-page="roadmap"] .roadmap-module .module__name { grid-column: 1; font-size: 1.15rem; }
  body[data-page="roadmap"] .roadmap-module .module__count { grid-column: 1; text-align: left; font-size: 0.78rem; }
  .roadmap-module > summary::after { grid-column: 2; grid-row: 1 / 3; }
  body[data-page="roadmap"] .roadmap-module .module__list { grid-template-columns: minmax(0, 1fr); }
  body[data-page="roadmap"] #screen-models .win__tabs--page { flex-wrap: wrap; overflow-x: visible; gap: 0.2rem 0.8rem; }
  body[data-page="roadmap"][lang^="zh"] .roadmap-hero__copy h1 { max-width: 9em; word-break: keep-all; overflow-wrap: normal; }
  body[data-page="roadmap"] .roadmap-stages .stage__items li,
  body[data-page="roadmap"] .lane .stage__items li { padding: 0; }
  body[data-page="roadmap"] .roadmap-stages .stage__items a,
  body[data-page="roadmap"] .lane .stage__items a { display: flex; align-items: center; min-height: 44px; padding-block: 0.6rem; }
}
@media (max-width: 360px) {
  body[data-page="roadmap"] .shell { width: calc(100% - 2rem); }
  .roadmap-hero__copy h1 { font-size: 2.35rem; }
  body[data-page="roadmap"] h2 { font-size: 1.65rem; }
  body[data-page="roadmap"] .lane,
  body[data-page="roadmap"] .roadmap-scope .scope-col { padding: 1rem; }
  .roadmap-build-card { padding: 1.1rem; }
  .roadmap-build-card__brand { gap: 0.65rem; font-size: 0.87rem; }
  .roadmap-build-card__brand img { width: 48px; height: 48px; }
  .roadmap-index ul { gap: 0.35rem; }
  .roadmap-index a { font-size: 0.83rem; }
}

.studio-hero { padding-top: clamp(3rem, 7vw, 6.4rem); background: radial-gradient(ellipse at 85% 25%, #edf1ff 0, transparent 48%), var(--bg); }
.studio-hero__grid { grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.studio-hero h1 { font-size: clamp(2.8rem, 4.7vw, 4.7rem); letter-spacing: -0.055em; line-height: 1.05; max-width: 10ch; }
.studio-hero__copy .hero__lead { max-width: 43ch; font-size: 1.04rem; line-height: 1.8; }
.studio-hero__eyebrow { margin-bottom: 1.6rem; }
.studio-hero__status { max-width: 45ch; }
.workspace-preview { margin: 0; min-width: 0; border: 1px solid #d8deee; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px -38px #354e9a55, 0 2px 8px #1d285008; overflow: hidden; text-align: left; }
.workspace-preview__chrome { display: flex; align-items: center; gap: 9px; padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 12px; }
.workspace-preview__brand { color: var(--accent); font-size: 20px; }
.workspace-preview__concept { margin-left: auto; color: var(--ink-mute); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.workspace-preview__question { padding: 20px 24px; background: #f7f8fc; border-bottom: 1px solid var(--line); }
.workspace-preview__question > span { font: 10px var(--mono); letter-spacing: .06em; color: var(--ink-mute); text-transform: uppercase; }
.workspace-preview__question p { font-size: 16px; font-weight: 600; line-height: 1.5; margin: 8px 0 0; }
.workspace-preview__body { display: grid; grid-template-columns: 43px minmax(0, 1fr); }
.workspace-preview__rail { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 26px; color: #78839b; background: #fafbfe; border-right: 1px solid var(--line); }
.workspace-preview__rail > span { line-height: 20px; }
.workspace-pane { padding: 24px; min-height: 324px; }
.workspace-preview[data-enhanced] .workspace-pane { min-height: 360px; display: flex; flex-direction: column; }
.workspace-preview[data-enhanced] .workspace-pane[hidden] { display: none; }
.workspace-pane__eyebrow { font: 10px var(--mono); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.workspace-pane h3 { font-size: 21px; letter-spacing: -.03em; line-height: 1.25; margin: 10px 0 20px; }
.workspace-files { display: grid; gap: 9px; }
.workspace-files > div { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.workspace-file-icon { width: 30px; height: 34px; background: var(--accent-soft); border-radius: 5px; display: grid; place-items: center; color: var(--accent); font-size: 21px; }
.workspace-files b, .workspace-files small { display: block; font-size: 11px; }
.workspace-files small { color: var(--ink-mute); margin-top: 3px; font-size: 10px; }
.workspace-file-check { margin-left: auto; color: var(--teal); font-size: 13px; }
.workspace-quote { margin: 14px 0; padding: 10px 13px; border-left: 2px solid #90a6ed; background: #f6f8ff; font-size: 12px; line-height: 1.6; color: #394a71; }
.workspace-pane__foot { display: flex; align-items: center; gap: 7px; color: var(--ink-mute); font-size: 10px; line-height: 1.6; margin-top: auto; padding-top: 14px; }
.workspace-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #477e72; }
.workspace-messages { display: grid; gap: 13px; }
.workspace-message { display: flex; align-items: flex-start; gap: 10px; }
.workspace-message .sc-avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; flex-shrink: 0; }
.workspace-message b { font-size: 11px; }
.workspace-message small { font-weight: 400; color: var(--ink-mute); padding-left: 5px; font-size: 10px; }
.workspace-message p { font-size: 11px; line-height: 1.6; margin: 4px 0 0; color: var(--ink-soft); }
.workspace-proposal { border: 1px solid var(--line); border-radius: 9px; padding: 14px; box-shadow: var(--shadow-s); }
.workspace-proposal__meta { display: flex; justify-content: space-between; gap: 5px; color: var(--ink-mute); font: 9px var(--mono); }
.workspace-proposal h4 { font-size: 15px; margin: 12px 0 7px; }
.workspace-proposal > p { font-size: 11px; line-height: 1.6; margin: 0 0 10px; color: var(--ink-soft); }
.workspace-proposal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 10px; }
.workspace-proposal li span { color: var(--accent); margin-right: 7px; }
.workspace-proposal__foot { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; color: var(--teal); }
.workspace-preview__controls { display: flex; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); gap: 4px; }
.workspace-preview__controls[hidden] { display: none; }
.workspace-preview__controls [role="tablist"] { display: flex; flex: 1; gap: 4px; }
.workspace-preview__controls [role="tab"] { flex: 1; border: 0; border-radius: 6px; color: var(--ink-mute); background: transparent; min-height: 44px; font: 11px var(--font); cursor: pointer; }
.workspace-preview__controls [role="tab"] span { font: 9px var(--mono); margin-right: 7px; opacity: .75; }
.workspace-preview__controls [aria-selected="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.workspace-preview__pause { border: 1px solid var(--line); width: 44px; height: 44px; background: white; border-radius: 6px; color: var(--ink-soft); cursor: pointer; }
.workspace-preview figcaption { font-size: 10px; color: var(--ink-mute); text-align: center; padding: 10px 12px; background: #fafbfe; border-top: 1px solid var(--line); margin: 0; }
.workflow-story { padding: clamp(4rem, 8vw, 7rem) 0 3rem; background: #fff; }
.workflow-story__head { max-width: 760px; margin: 0 auto 2.6rem; text-align: center; }
.workflow-story__head h2 { font-size: clamp(2.1rem, 4vw, 3.35rem); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; margin: 14px 0 20px; }
.workflow-story__head > p:not(.eyebrow) { max-width: 61ch; margin: auto; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.8; }
.workflow-story__head > small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 17px; }
.workflow-path { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 2.7rem 0 1rem; border-block: 1px solid var(--line); }
.workflow-path li + li { border-left: 1px solid var(--line); }
.workflow-path a { display: flex; align-items: center; gap: 12px; padding: 18px 24px; text-decoration: none; font-size: 13px; font-weight: 600; }
.workflow-path a > span:last-child { margin-left: auto; color: #8997b4; }
.workflow-path svg { width: 16px; height: 16px; }
.workflow-number { color: var(--accent); font: 11px var(--mono); font-weight: 500; }
.workflow-row { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); padding: 4.8rem 0; border-bottom: 1px solid var(--line); }
.workflow-row--1 .workflow-row__copy { order: 2; }
.workflow-row--1 { grid-template-columns: 1.12fr .88fr; }
.workflow-kicker { display: flex; align-items: center; gap: 12px; font: 11px var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.workflow-row h3 { font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.16; letter-spacing: -.04em; margin: 20px 0; }
.workflow-row__copy > p:not(.workflow-kicker) { color: var(--ink-soft); line-height: 1.85; font-size: 15px; }
.workflow-row__copy > a { margin-top: 12px; font-size: 13px; }
.workflow-canvas { background: #f1f4fb; border: 1px solid #e6eaf3; border-radius: 20px; padding: clamp(20px, 3.3vw, 40px); min-width: 0; }
.context-paper { margin-right: 34px; background: #fff; border: 1px solid #dce1eb; border-radius: 9px; padding: 23px; box-shadow: 0 9px 20px -15px #12213966; }
.context-paper__meta { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--ink-mute); border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.context-paper h4 { font-size: 17px; margin: 19px 0 10px; }
.context-paper > p { font-size: 12px; line-height: 1.8; color: var(--ink-mute); }
.context-paper blockquote { padding: 3px 4px; margin: 15px 0; font-size: 14px; line-height: 1.8; color: #314d99; background: #eaf0ff; box-shadow: -5px 0 #eaf0ff, 5px 0 #eaf0ff; }
.context-paper .context-paper__source { font: 10px var(--mono); }
.context-answer { position: relative; margin: -4px 0 0 30px; border-radius: 9px; padding: 20px; border: 1px solid #c8d4f8; background: #fff; box-shadow: 0 14px 25px -20px #12213966; }
.context-answer > span:first-child { font: 10px var(--mono); color: var(--accent); text-transform: uppercase; }
.context-answer p { font-size: 13px; line-height: 1.7; margin: 9px 0 14px; }
.context-citation { display: inline-block; color: #3a5994; background: #edf2ff; border-radius: 4px; padding: 4px 7px; font-size: 10px; }
.workflow-row--1 .workflow-canvas { background: #edf5f2; border-color: #e0ece6; }
.perspective-board { border: 1px solid #d2e1da; border-radius: 12px; background: #fff; padding: 24px; box-shadow: 0 9px 20px -15px #12213966; }
.canvas-label { display: block; font: 11px var(--mono); color: var(--teal); border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.perspective-row { display: flex; align-items: flex-start; gap: 13px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.perspective-row .sc-avatar { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.perspective-row b { font-size: 13px; }
.perspective-row small { font-weight: 400; color: var(--ink-mute); margin-left: 10px; font-size: 10px; }
.perspective-row p { font-size: 13px; color: var(--ink-soft); line-height: 1.75; margin: 7px 0 0; }
.perspective-foot { padding-top: 17px; font-size: 11px; color: var(--teal); }
.workflow-row--2 .workflow-canvas { background: #f6f2ec; border-color: #ece6dd; }
.revision-note { background: #fff; border: 1px solid #e4ddd3; border-radius: 8px; padding: 15px 20px; margin-bottom: 16px; }
.revision-note span { font: 10px var(--mono); color: var(--ink-mute); }
.revision-note p { font-size: 13px; margin: 7px 0 0; line-height: 1.7; }
.revision-sheet { background: #fff; border: 1px solid #e4ddd3; padding: 24px; border-radius: 10px; box-shadow: 0 9px 20px -15px #12213966; }
.revision-sheet__head { display: flex; justify-content: space-between; gap: 8px; font: 10px var(--mono); color: var(--ink-mute); }
.revision-sheet h4 { margin: 18px 0; font-size: 21px; line-height: 1.3; }
.revision-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.revision-compare > div { background: #f7f6f3; border-radius: 6px; padding: 12px; }
.revision-compare > div + div { background: #eef5f1; }
.revision-compare small { font: 9px var(--mono); color: var(--ink-mute); }
.revision-compare p { font-size: 13px; line-height: 1.65; margin: 7px 0 0; }
.revision-state { display: inline-block; color: var(--ochre); background: var(--ochre-soft); padding: 5px 8px; border-radius: 4px; font-size: 10px; }
.revision-choice { font-size: 11px; color: var(--ink-mute); line-height: 1.7; margin-bottom: 0; }
.workflow-availability { display: flex; align-items: baseline; gap: 12px; padding: 25px 0 0; }
.workflow-availability p { flex: 1; font-size: 12px; color: var(--ink-mute); line-height: 1.8; margin: 0; }
.workflow-availability b { color: var(--ink-soft); }
.workflow-availability a { white-space: nowrap; font-size: 12px; color: var(--accent); }
.workflow-availability a svg { width: 13px; height: 13px; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) {
  .workspace-preview[data-enhanced] .workspace-pane:not([hidden]) { animation: workspace-arrive 400ms ease-out; }
  @keyframes workspace-arrive { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 960px) {
  .studio-hero__grid { gap: 32px; }
  .studio-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); }
  .workspace-pane { padding: 20px; }
  .workspace-preview[data-enhanced] .workspace-pane { min-height: 390px; }
  .workspace-preview__concept { font-size: 9px; }
}
@media (max-width: 760px) {
  .studio-hero__grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .studio-hero h1 { max-width: 15ch; font-size: clamp(2.8rem, 9vw, 4.4rem); }
  .studio-hero__copy .hero__lead { max-width: 54ch; }
  .workspace-preview { max-width: 560px; width: 100%; margin: 0 auto; }
  .workspace-preview[data-enhanced] .workspace-pane { min-height: 350px; }
  .workflow-row, .workflow-row--1 { grid-template-columns: 1fr; gap: 28px; padding: 3.2rem 0; }
  .workflow-row--1 .workflow-row__copy { order: 0; }
  .workflow-row h3 { max-width: 20ch; }
  .workflow-row__copy > p:not(.workflow-kicker) { max-width: 59ch; }
  .workflow-canvas { max-width: 580px; width: 100%; margin: auto; }
  .workflow-availability { flex-wrap: wrap; }
  .workflow-availability a { margin-left: 18px; }
  .workflow-path a { padding: 15px 10px; gap: 8px; font-size: 11px; }
  .workflow-path a > span:last-child { display: none; }
}
@media (max-width: 430px) {
  .workspace-preview__question { padding: 17px; }
  .workspace-preview__question p { font-size: 14px; }
  .workspace-preview__body { grid-template-columns: 32px minmax(0,1fr); }
  .workspace-pane { padding: 18px 15px; }
  .workspace-pane h3 { font-size: 18px; }
  .workspace-preview[data-enhanced] .workspace-pane { min-height: 390px; }
  .workspace-preview__controls { padding: 8px; }
  .workspace-preview__controls [role="tab"] { font-size: 10px; }
  .workspace-preview__controls [role="tab"] span { display: none; }
  .workspace-preview__chrome { padding: 13px 15px; }
  .workspace-preview__concept { font-size: 8px; }
  .workflow-canvas { padding: 18px; }
  .context-paper { padding: 18px; margin-right: 14px; }
  .context-answer { margin-left: 10px; padding: 17px; }
  .perspective-board, .revision-sheet { padding: 18px; }
  .revision-compare { gap: 8px; }
  .revision-compare > div { padding: 10px; }
  .workflow-availability p { flex-basis: 80%; }
}

.docs-welcome { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.docs-welcome__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.docs-welcome__top .eyebrow { margin: 0; }
.docs-build-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.65rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; }
.docs-build-label > span { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ochre); }
.docs-build-label b { font-weight: 550; }
.docs-welcome__heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: clamp(1.5rem, 6vw, 5rem); margin-top: 1.3rem; }
.docs-welcome__heading h1 { max-width: 14ch; margin: 0; font-size: clamp(2.65rem, 5.4vw, 4.4rem); font-weight: 650; line-height: 1.07; letter-spacing: -0.055em; }
.docs-welcome__heading > p { max-width: 42ch; margin: 0 0 0.2rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.8; }
body[lang^="zh"] .docs-welcome__heading h1 { max-width: 11ch; line-height: 1.35; letter-spacing: -0.035em; }
.docs-search { max-width: 54rem; margin-top: clamp(1.7rem, 4vw, 2.7rem); }
.docs-search[hidden], .docs-search [hidden] { display: none; }
.docs-search > label { display: block; margin-bottom: 0.55rem; color: var(--ink-soft); font-size: 0.79rem; font-weight: 600; }
.docs-search__field { display: flex; align-items: center; gap: 0.85rem; min-height: 64px; padding: 0.45rem 0.6rem 0.45rem 1.15rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: 0 4px 18px -12px rgba(20, 24, 31, 0.2); }
.docs-search__field:focus-within { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
.docs-search__icon { position: relative; display: block; width: 16px; height: 16px; flex: none; margin-inline-end: 0.2rem; border: 1.5px solid var(--ink-mute); border-radius: 50%; }
.docs-search__icon::after { position: absolute; right: -5px; bottom: -3px; width: 7px; height: 1.5px; background: var(--ink-mute); content: ""; transform: rotate(45deg); }
.docs-search__field input { width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.98rem; }
.docs-search__field input::placeholder { color: var(--ink-mute); opacity: 1; }
.docs-search__field input::-webkit-search-cancel-button { display: none; }
.docs-search__clear { min-width: 44px; min-height: 44px; padding: 0.4rem 0.75rem; border: 0; border-radius: 6px; background: var(--surface-hi); color: var(--ink-soft); font: inherit; font-size: 0.79rem; cursor: pointer; }
.docs-search__clear:hover { color: var(--accent); background: var(--accent-soft); }
.docs-search__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docs-search__key { display: grid; place-items: center; width: 27px; height: 27px; flex: none; margin-inline: 0.2rem 0.5rem; border-color: var(--line); background: var(--surface-hi); color: var(--ink-mute); }
.docs-search--active .docs-search__key { display: none; }
.docs-search__hint { margin: 0.55rem 0 0; color: var(--ink-mute); font-size: 0.76rem; line-height: 1.6; }
.docs-search__results { margin-top: 0.9rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.docs-search__status { margin: 0; padding: 0.2rem 0.4rem 0.55rem; color: var(--ink-mute); font-size: 0.79rem; font-weight: 550; }
.docs-search__results ol { display: grid; max-height: 28rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.docs-search__results li + li { border-top: 1px solid var(--line); }
.docs-search__results a { display: grid; gap: 0.25rem; min-height: 44px; padding: 0.8rem 0.5rem; border-radius: 5px; }
.docs-search__results a:hover { background: var(--accent-soft); }
.docs-search__results a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.docs-search__results strong { color: var(--ink); font-size: 0.92rem; font-weight: 600; line-height: 1.6; }
.docs-search__results a > span { color: var(--ink-soft); font-size: 0.81rem; line-height: 1.7; overflow-wrap: anywhere; }
.docs-search__results mark { padding: 0 0.08em; background: var(--ochre-soft); color: inherit; }
.docs-search__empty { margin: 0.2rem 0.4rem 0.5rem; color: var(--ink-soft); font-size: 0.88rem; }
.docs-scope { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.8rem; padding-block: 1.2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.docs-scope > div { max-width: 77ch; }
.docs-scope__label { color: var(--ochre); font-size: 0.72rem; font-weight: 650; }
.docs-scope p { margin: 0.25rem 0 0; color: var(--ink-mute); font-size: 0.79rem; line-height: 1.75; }
.docs-scope > a { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; min-height: 44px; color: var(--accent); font-size: 0.79rem; font-weight: 600; }
.docs-scope > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.docs-start { padding-block: clamp(2.2rem, 5vw, 3.5rem) 1rem; }
.docs-start__heading { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
.docs-start__heading .eyebrow { margin: 0; }
.docs-start__heading h2 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.docs-journeys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.docs-journey { position: relative; display: grid; align-content: start; padding: 1.3rem 1.3rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.docs-journey__number { margin-bottom: 1rem; color: var(--accent); font-family: var(--mono); font-size: 0.74rem; line-height: 1; }
.docs-journey h3 { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; }
.docs-journey > p { min-height: 3.5em; margin: 0.5rem 0 0.7rem; color: var(--ink-mute); font-size: 0.83rem; line-height: 1.75; }
.docs-journey ul { margin: 0; padding: 0; list-style: none; }
.docs-journey li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--line); }
.docs-journey li > a { display: flex; align-items: center; width: 100%; min-height: 44px; padding-block: 0.45rem; color: var(--ink-soft); font-size: 0.79rem; font-weight: 550; line-height: 1.6; }
.docs-journey li > span { color: var(--ink-mute); }
.docs-journey a:hover { color: var(--accent); }
.docs--experience { gap: clamp(2rem, 5vw, 4rem); padding-top: 2.5rem; }
.docs--experience .docs-nav__toggle { margin-bottom: 0.5rem; }
.docs-nav__group + .docs-nav__group { margin-top: 1.4rem; }
.docs-nav__group-title { margin: 0 0 0.4rem; padding-inline-start: 0.95rem; color: var(--ink); font-size: 0.7rem; font-weight: 650; line-height: 1.6; }
.docs--experience .docs-nav a { min-height: 44px; padding-block: 0.45rem; font-size: 0.79rem; line-height: 1.6; }
.docs--experience .docs-body { gap: 0; }
.doc--guide { padding-block: 2rem; border-bottom: 1px solid var(--line); }
.doc--guide:first-child { padding-top: 0; }
.doc__heading { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 44px; align-items: baseline; column-gap: 0.5rem; }
.doc__heading h2 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.5; letter-spacing: -0.025em; }
.doc__number { color: var(--ink-mute); font-family: var(--mono); font-size: 0.67rem; font-weight: 500; }
.doc__permalink { display: grid; place-items: center; align-self: center; min-width: 44px; min-height: 44px; color: var(--ink-mute); font-family: var(--mono); font-size: 1rem; opacity: 0.55; }
.doc__permalink:hover, .doc__permalink:focus-visible { color: var(--accent); opacity: 1; }
.doc--guide .doc__steps { gap: 0.85rem; }
.doc--guide .doc__list { gap: 0.7rem; }
.doc--guide .doc__intro, .doc--guide .doc__steps, .doc--guide .doc__list { font-size: 0.92rem; line-height: 1.85; }
.doc--guide code { overflow-wrap: anywhere; }
.doc__next { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin: 1.3rem 0 0; font-size: 0.76rem; line-height: 1.6; }
.doc__next > span { color: var(--ink-mute); }
.doc__next a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.7rem; min-height: 44px; color: var(--accent); text-align: right; }
.doc__next a:hover { text-decoration: underline; text-underline-offset: 4px; }
.docs--experience .doc-capabilities { margin-top: 2.5rem; }
.docs--experience .doc-capabilities > .eyebrow { margin-top: 0; }
[id^="docs-faq-"] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
@media (max-width: 960px) {
  .docs-welcome__heading { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .docs-welcome__heading h1 { max-width: 18ch; }
  .docs-welcome__heading > p { max-width: 62ch; }
  .docs-search { max-width: none; }
  .docs-scope { gap: 1.5rem; }
  .docs-scope > a { max-width: 12rem; flex-shrink: 0; }
  .docs--experience { gap: 2rem; padding-top: 1.5rem; }
  .docs--experience .docs-nav__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; padding-bottom: 1.2rem; }
  .docs-nav__group + .docs-nav__group { margin-top: 0; }
  .docs--experience .docs-nav ol { grid-template-columns: minmax(0, 1fr); }
  .docs--experience .docs-nav a { min-height: 44px; }
}
@media (max-width: 700px) {
  .docs-welcome { padding-top: 2.2rem; }
  .docs-welcome__heading h1 { font-size: clamp(2.4rem, 9vw, 3.3rem); }
  .docs-welcome__heading > p { font-size: 0.93rem; }
  .docs-build-label { font-size: 0.65rem; }
  .docs-search__field { gap: 0.65rem; min-height: 58px; padding-inline-start: 0.9rem; }
  .docs-search__field input { font-size: 0.88rem; }
  .docs-search__key { display: none; }
  .docs-scope { display: block; }
  .docs-scope > a { max-width: none; margin-top: 0.2rem; }
  .docs-start { padding-top: 2rem; }
  .docs-start__heading { gap: 0.4rem; }
  .docs-start__heading > * { width: 100%; }
  .docs-journeys { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .docs-journey { grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.65rem; padding: 1.2rem 0 0.5rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .docs-journey__number { grid-column: 1; grid-row: 1; margin: 0.45rem 0 0; }
  .docs-journey h3 { grid-column: 2; font-size: 1.05rem; }
  .docs-journey > p { grid-column: 2; min-height: 0; margin-top: 0.3rem; }
  .docs-journey ul { grid-column: 2; }
  .docs-journey li { border-top: 0; }
  .docs-journey li > a { padding-block: 0.35rem; }
  .doc__heading { grid-template-columns: 1.3rem minmax(0, 1fr) 44px; column-gap: 0.3rem; }
  .doc--guide .doc__intro, .doc--guide .doc__steps, .doc--guide .doc__list { font-size: 0.88rem; }
  .doc__next { flex-wrap: wrap; }
  .doc__next a { margin-inline-start: auto; }
}
@media (max-width: 390px) {
  .docs--experience .docs-nav__links { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .docs-search__field { gap: 0.55rem; }
  .docs-search__clear { padding-inline: 0.55rem; }
}

.docs-welcome--portal { padding-top: clamp(1.8rem,3vw,2.6rem); }
.docs-welcome--portal .docs-welcome__heading { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 3rem; }
.docs-welcome--portal .docs-welcome__heading h1 { max-width: 16ch; font-size: clamp(2.4rem,4vw,3.4rem); }
.docs-welcome--portal .docs-search { max-width: 100%; margin-top: 1.4rem; }
.docs-welcome--portal .docs-scope { margin-top: 1rem; padding-block: .8rem; }
.docs-portal { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: start; gap: clamp(2rem,4.5vw,4rem); padding-block: 2.5rem 4rem; }
.docs-portal > *, .docs-portal__main > * { min-width: 0; }
.docs-collection-nav { position: sticky; top: calc(var(--head-h) + 1rem); max-height: calc(100dvh - var(--head-h) - 2rem); overflow: auto; padding-right: .8rem; }
.docs-collection-nav > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; cursor: pointer; color: var(--ink-mute); font-size: .72rem; font-weight: 600; }
.docs-collection-nav > summary::-webkit-details-marker { display: none; }
.docs-collection-nav > summary::after { content: '−'; font-size: 1rem; }
.docs-collection-nav:not([open]) > summary::after { content: '+'; }
.docs-collection-nav a { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .5rem .65rem; border-radius: 6px; font-size: .8rem; line-height: 1.65; color: var(--ink-soft); }
.docs-collection-nav a:hover { color: var(--accent); background: var(--surface-hi); }
.docs-collection-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.docs-collection-nav a:focus-visible, .docs-collection-nav summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docs-collection-nav__guide > span { font: .62rem var(--mono); color: var(--ink-mute); }
.docs-collection-nav__group { margin-top: .3rem; }
.docs-collection-nav ol { list-style: none; margin: .2rem 0 .8rem .75rem; padding: 0 0 0 .6rem; border-left: 1px solid var(--line); }
.docs-collection-nav ol a { font-size: .74rem; color: var(--ink-mute); }
.docs-collection-nav a[aria-current="location"] { color: var(--accent); font-weight: 600; }
.docs-portal__collection-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.docs-portal__collection-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.docs-portal__collection-head > span { font: .75rem var(--mono); color: var(--ink-mute); }
.docs-collections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.docs-collection { position: relative; display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.docs-collection:nth-child(2) { background: #f1f5ff; border-color: #d5e0f7; }
.docs-collection__number { color: var(--accent); font: .67rem var(--mono); }
.docs-collection h3 { margin: .8rem 0 .5rem; font-size: 1.25rem; line-height: 1.5; letter-spacing: -.025em; }
.docs-collection h3 a { display: flex; align-items: start; justify-content: space-between; gap: 1rem; min-height: 44px; color: var(--ink); }
.docs-collection h3 a > span { color: var(--ink-mute); font-weight: 400; }
.docs-collection h3 a:hover { color: var(--accent); }
.docs-collection > p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .86rem; line-height: 1.8; }
.docs-collection__count { display: block; margin-top: auto; color: var(--ink-mute); font: .67rem var(--mono); }
.docs-collection ul { display: grid; gap: .1rem; list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); }
.docs-collection li a { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-size: .77rem; line-height: 1.65; }
.docs-collection li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.docs-reading-preview { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; margin-top: 2rem; padding: 1.8rem; border: 1px solid #d6e3e7; border-radius: 12px; background: #f1f7f6; }
.docs-reading-preview h2 { margin: 0 0 .7rem; max-width: 28ch; font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1.35; letter-spacing: -.03em; }
.docs-reading-preview p:not(.eyebrow) { margin: 0; max-width: 65ch; color: var(--ink-soft); font-size: .9rem; line-height: 1.8; }
.docs-reading-preview .more-link { margin-top: .7rem; }
.docs-reading-preview .reading-visual { margin: 0; }
.docs-legacy { margin-top: 1.5rem; border-block: 1px solid var(--line); padding-block: .2rem; }
.docs-legacy > summary { min-height: 44px; padding-block: .8rem; color: var(--ink-mute); font-size: .77rem; cursor: pointer; }
.docs-legacy ul { list-style: none; padding: 0; margin: 0; columns: 2; }
.docs-legacy li { break-inside: avoid; }
.docs-legacy a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: .78rem; }
.docs-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.8rem; }
.docs-breadcrumb nav { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .76rem; color: var(--ink-mute); }
.docs-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); }
.docs-portal--guide { padding-top: 1.5rem; }
.docs-guide-head { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.docs-guide-head > .eyebrow { margin-top: .5rem; }
.docs-guide-head h1 { margin: 0; font-size: clamp(2.2rem,4vw,3.5rem); line-height: 1.15; letter-spacing: -.045em; }
body[lang^="zh"] .docs-guide-head h1 { line-height: 1.35; letter-spacing: -.025em; }
.docs-guide-head > p:not(.eyebrow) { max-width: 66ch; margin: 1rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.docs-guide-head .docs-search { margin-top: 1.5rem; max-width: none; }
.docs-guide-head .docs-search__field { min-height: 54px; }
.docs-guide-head .docs-search__field input { font-size: .88rem; }
.docs-guide-toc { display: flex; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-top: 1.3rem; }
.docs-guide-toc > span { color: var(--ink-mute); font-size: .7rem; }
.docs-guide-toc ol { display: flex; flex-wrap: wrap; gap: .15rem 1rem; list-style: none; padding: 0; margin: 0; }
.docs-guide-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: .73rem; line-height: 1.65; color: var(--accent); }
.docs-guide-body .doc { max-width: none; padding-block: 2rem; }
.docs-guide-body .doc:first-child { padding-top: 1.8rem; }
.docs-guide-body .doc > .reading-visual { margin-block: 1.3rem 1.6rem; }
.docs-guide-body .doc__note { margin-top: 1rem; }
.docs-guide-body #faq { padding-block: 2rem; }
.docs-guide-body #faq > .shell { width: auto; max-width: none; margin: 0; padding: 0; display: block; }
.docs-guide-body #faq .split__head { margin-bottom: 1.2rem; }
.docs-guide-body #faq h2 { max-width: none; font-size: 1.7rem; }
.docs-guide-body #faq .reveal { opacity: 1; transform: none; }
.docs-guide-adjacent { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.docs-guide-adjacent a { display: grid; gap: .3rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; min-height: 80px; }
.docs-guide-adjacent a:last-child { text-align: right; }
.docs-guide-adjacent a:hover { border-color: var(--accent); background: var(--accent-soft); }
.docs-guide-adjacent span { color: var(--ink-mute); font-size: .69rem; }
.docs-guide-adjacent strong { color: var(--accent); font-size: .85rem; line-height: 1.7; font-weight: 600; }
.docs-portal--guide .docs-scope { display: block; margin-top: 2rem; }
.docs-portal--guide .docs-scope > a { margin-top: .5rem; }
.roadmap-overview { grid-template-columns: repeat(4,minmax(0,1fr)); }
.roadmap-reading { padding-block: clamp(2.5rem,5vw,4rem); border-block: 1px solid var(--line); background: #f3f7fb; }
.roadmap-reading__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3rem; align-items: end; }
.roadmap-reading__head h2 { max-width: none; margin: 0; font-size: clamp(1.8rem,3vw,2.6rem); line-height: 1.3; }
.roadmap-reading__head > div > p { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.8; }
.roadmap-reading__head .roadmap-status { display: inline-flex; margin-top: .7rem; }
.roadmap-reading__items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; padding: 0; margin: 1.8rem 0; list-style: none; }
.roadmap-reading__items li { border-top: 1px solid #ccd8e7; padding-top: 1rem; }
.roadmap-reading__items svg { width: 24px; height: 24px; color: var(--accent); }
.roadmap-reading__items h3 { font-size: 1.02rem; line-height: 1.5; margin-top: .7rem; }
.roadmap-reading__items p { font-size: .83rem; line-height: 1.8; color: var(--ink-soft); }
.roadmap-reading__items a { display: inline-flex; min-height: 44px; align-items: center; font-size: .78rem; color: var(--accent); }
.roadmap-reading__note { font-size: .77rem; color: var(--ink-mute); line-height: 1.8; border-top: 1px solid var(--line); padding-top: 1rem; }
@media (max-width: 1080px) {
  .roadmap-overview, .roadmap-reading__items { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .docs-portal { grid-template-columns: 180px minmax(0,1fr); gap: 2rem; }
}
@media (max-width: 800px) {
  .docs-portal { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding-top: 1.5rem; }
  .docs-collection-nav { position: static; max-height: none; border-bottom: 1px solid var(--line); padding: .25rem 0 .6rem; }
  .docs-collection-nav nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .2rem .8rem; }
  .docs-collection-nav__home { grid-column: 1/-1; }
  .docs-collection-nav__group { margin: 0; }
  .docs-collection-nav__group:has([aria-current="page"]) { grid-column: 1/-1; grid-row: 2; }
  .docs-collection-nav__group ol { display: flex; flex-wrap: wrap; gap: 0 .6rem; margin: .25rem 0 .5rem; padding-left: .65rem; }
  .docs-welcome--portal .docs-welcome__heading { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .docs-welcome--portal .docs-welcome__heading h1 { max-width: 22ch; }
  .roadmap-reading__head { grid-template-columns: minmax(0,1fr); gap: 1rem; }
}
@media (max-width: 560px) {
  .docs-welcome--portal .docs-welcome__heading h1 { font-size: 2.4rem; }
  .docs-collections { grid-template-columns: minmax(0,1fr); }
  .docs-collection { padding: 1.2rem; }
  .docs-collection h3 { font-size: 1.2rem; }
  .docs-reading-preview { padding: 1.2rem; }
  .docs-breadcrumb { padding-top: 1rem; gap: .3rem; }
  .docs-guide-head h1 { font-size: 2.2rem; }
  .docs-guide-head > p:not(.eyebrow) { font-size: .92rem; }
  .docs-guide-toc { display: block; }
  .docs-guide-toc ol { margin-top: .3rem; }
  .docs-guide-adjacent { gap: .6rem; }
  .docs-guide-adjacent a { padding: .8rem; }
  .docs-legacy ul { columns: 1; }
  .roadmap-overview, .roadmap-reading__items { grid-template-columns: minmax(0,1fr); }
}

.reading-visual { --rv-blue: #2553d9; --rv-teal: #117d79; --rv-line: #d7dfed; margin: 1.4rem 0; color: #26364e; font-family: inherit; }
.reading-visual, .reading-visual * { box-sizing: border-box; }
.reading-visual__window { min-width: 0; overflow: hidden; border: 1px solid var(--rv-line); border-radius: 13px; background: #f1f5fc; box-shadow: 0 10px 35px -26px #344766; }
.reading-visual__window-head { display: flex; align-items: center; gap: 0.5rem; min-height: 41px; padding: 0.65rem 1rem; border-bottom: 1px solid var(--rv-line); background: #fff; color: #455875; font-size: 0.72rem; font-weight: 600; line-height: 1.3; }
.reading-visual__document-icon { width: 12px; height: 15px; border: 1.5px solid var(--rv-blue); border-radius: 2px; }
.reading-visual__document-icon::after { display: block; width: 6px; height: 1px; margin: 5px auto 0; background: var(--rv-blue); box-shadow: 0 3px 0 var(--rv-blue); content: ""; }
.reading-visual__format { margin-inline-start: auto; color: #6c7d94; font-family: var(--mono, monospace); font-size: 0.64rem; font-weight: 500; }
.reading-visual__toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.55rem; padding: 0.7rem 1rem; }
.reading-visual__views { display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 3px; border: 1px solid #dae2ef; border-radius: 7px; background: #e9eef8; }
.reading-visual__views > span { padding: 0.35rem 0.55rem; border-radius: 4px; color: #61738f; font-size: 0.65rem; line-height: 1.3; }
.reading-visual__views > .is-selected { background: #fff; color: var(--rv-blue); font-weight: 650; box-shadow: 0 1px 3px #cbd5e8; }
.reading-visual__page-count { color: #73829a; font-family: var(--mono, monospace); font-size: 0.64rem; }
.reading-visual__action { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: start; padding: 0.4rem 0.6rem; border: 1px solid #cad7f6; border-radius: 5px; background: #edf2ff; color: var(--rv-blue); font-size: 0.66rem; font-weight: 600; line-height: 1.5; }
.reading-visual__spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 0 1rem 0.9rem; }
.reading-visual__page { min-width: 0; }
.reading-visual__page-label { margin: 0 0 0.4rem; color: #687b96; font-size: 0.63rem; font-weight: 550; line-height: 1.4; }
.reading-visual__paper { padding: 1rem 0.9rem 0.8rem; border: 1px solid var(--rv-line); border-radius: 4px; background: #fff; }
.reading-visual__paper-title { width: 68%; height: 6px; margin-bottom: 0.65rem; border-radius: 2px; background: #91a3bc; }
.reading-visual__bars { display: grid; gap: 5px; width: 100%; }
.reading-visual__bars > i { display: block; width: 100%; height: 4px; border-radius: 2px; background: #d5ddeb; }
.reading-visual__bars > i:nth-child(2) { width: 91%; }
.reading-visual__bars > i:nth-child(3) { width: 74%; }
.reading-visual__bars--short > i:nth-child(1) { width: 84%; }
.reading-visual__bars--short > i:nth-child(2) { width: 65%; }
.reading-visual__bars--short > i:nth-child(3) { display: none; }
.reading-visual__passage { position: relative; margin-block: 0.7rem; padding: 0.6rem 0; }
.reading-visual__passage--selected { padding: 0.65rem; border: 1px solid #bfd0fa; border-radius: 5px; background: #edf2ff; }
.reading-visual__page--translated .reading-visual__passage { margin-inline: -0.4rem; padding-inline: 0.4rem; border: 1px solid #b9ddd7; border-radius: 4px; background: #eff9f6; }
.reading-visual__page--translated .reading-visual__passage .reading-visual__bars > i { background: #aed2ca; }
.reading-visual__chart { display: flex; align-items: end; justify-content: center; gap: 8%; height: 40px; margin: 0.1rem 12% 0.7rem; border-bottom: 1px solid #dbe3ee; }
.reading-visual__chart > i { width: 9%; height: 47%; border-radius: 2px 2px 0 0; background: #bdd1f8; }
.reading-visual__chart > i:nth-child(2) { height: 70%; }
.reading-visual__chart > i:nth-child(3) { height: 59%; }
.reading-visual__chart > i:nth-child(4) { height: 90%; }
.reading-visual__chart > i:nth-child(5) { height: 76%; }
.reading-visual__page--translated .reading-visual__chart > i { background: #a9d6cd; }
.reading-visual__destinations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rv-line); background: #fff; }
.reading-visual__destinations > span { display: flex; justify-content: center; align-items: center; gap: 0.4rem; padding: 0.8rem 0.4rem; color: #516581; text-align: center; font-size: 0.64rem; line-height: 1.5; }
.reading-visual__destinations > span + span { border-inline-start: 1px solid #e2e8f2; }
.reading-visual__destinations b { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 5px; background: #edf2ff; color: var(--rv-blue); font-size: 0.76rem; font-weight: 600; }
.reading-visual__footnote { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.7rem 1rem; border-top: 1px solid var(--rv-line); background: #fff; color: #5b718b; font-size: 0.66rem; line-height: 1.6; }
.reading-visual__dot { width: 5px; height: 5px; flex: none; align-self: center; border-radius: 50%; background: var(--rv-teal); }
.reading-visual figcaption { display: flex; justify-content: space-between; gap: 0.3rem 1rem; flex-wrap: wrap; margin-top: 0.6rem; color: #74829a; font-size: 0.66rem; line-height: 1.7; }
.reading-visual__link-flow { display: grid; grid-template-columns: minmax(0, 1fr) 35px minmax(0, 1fr); align-items: center; padding: 1.2rem; }
.reading-visual__source-card, .reading-visual__note-card { min-width: 0; align-self: stretch; padding: 1rem; border: 1px solid var(--rv-line); border-radius: 7px; background: #fff; }
.reading-visual__panel-label { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; color: #354b6b; font-size: 0.74rem; font-weight: 650; line-height: 1.5; }
.reading-visual__saved { margin-inline-start: auto; color: var(--rv-teal); font-size: 0.59rem; font-weight: 500; }
.reading-visual__ref { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; margin-top: 0.4rem; padding: 0.15rem 0.3rem; border: 1px solid #ccdaf7; border-radius: 4px; background: #edf2ff; color: var(--rv-blue); font-family: var(--mono, monospace); font-size: 0.62rem; font-weight: 500; line-height: 1.5; }
.reading-visual__source-link { display: inline-block; margin-top: 0.7rem; color: var(--rv-blue); font-size: 0.62rem; line-height: 1.5; }
.reading-visual__transfer { display: grid; place-items: center; color: var(--rv-blue); font-size: 1.25rem; }
.reading-visual__quoted { margin-block: 0.8rem; padding: 0.7rem; border-inline-start: 3px solid #4e84e8; background: #f0f5ff; }
.reading-visual__quoted .reading-visual__bars > i { background: #becfee; }
.reading-visual__action--quote { background: #eff8f6; border-color: #beddd5; color: var(--rv-teal); }
.reading-visual__research { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; padding: 1rem; }
.reading-visual__study, .reading-visual__question { min-width: 0; padding: 1rem; border: 1px solid var(--rv-line); border-radius: 7px; background: #fff; }
.reading-visual__mini-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #eaf0ff; color: var(--rv-blue); font-size: 0.8rem; }
.reading-visual__study .reading-visual__mini-icon { background: #e7f5f0; color: var(--rv-teal); }
.reading-visual__study-point { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.5rem; margin-top: 1rem; }
.reading-visual__point-number { color: #6c938c; font-family: var(--mono, monospace); font-size: 0.55rem; line-height: 1; }
.reading-visual__study-point .reading-visual__bars > i { background: #cadfd8; }
.reading-visual__study-point .reading-visual__source-link { margin-top: 0.4rem; }
.reading-visual__scope-label { margin: 0 0 0.3rem; color: #71829b; font-size: 0.58rem; line-height: 1.5; }
.reading-visual__scope { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.reading-visual__scope > span { padding: 0.3rem 0.4rem; border: 1px solid #dfe6f2; border-radius: 4px; color: #6b7d97; font-size: 0.59rem; line-height: 1.5; }
.reading-visual__scope > .is-selected { border-color: #bfd0fb; background: #edf2ff; color: var(--rv-blue); }
.reading-visual__query { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem; padding: 0.6rem; border: 1px solid #cedbf3; border-radius: 5px; color: var(--rv-blue); }
.reading-visual__query .reading-visual__bars { flex: 1; }
.reading-visual__query .reading-visual__bars > i { height: 3px; }
.reading-visual__answer { padding: 0.9rem 0.2rem 0; }
.reading-visual__answer > p { display: flex; align-items: center; gap: 0.35rem; margin: 0.55rem 0 0; color: #637998; font-size: 0.59rem; }
.reading-visual__answer .reading-visual__ref { min-width: 21px; margin: 0; font-size: 0.55rem; }
@media (max-width: 600px) {
  .reading-visual__window-head { padding-inline: 0.8rem; }
  .reading-visual__toolbar { padding: 0.65rem 0.7rem; }
  .reading-visual__views > span { padding-inline: 0.4rem; font-size: 0.61rem; }
  .reading-visual__spread { gap: 0.5rem; padding-inline: 0.7rem; }
  .reading-visual__paper { padding: 0.8rem 0.55rem 0.65rem; }
  .reading-visual__chart { gap: 7%; height: 31px; }
  .reading-visual__destinations > span { flex-direction: column; gap: 0.3rem; font-size: 0.6rem; }
  .reading-visual__link-flow { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0.8rem; }
  .reading-visual__transfer { height: 24px; }
  .reading-visual__transfer > span { transform: rotate(90deg); }
  .reading-visual__source-card, .reading-visual__note-card { padding: 0.85rem; }
  .reading-visual__research { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 0.8rem; }
  .reading-visual__study, .reading-visual__question { padding: 0.85rem; }
  .reading-visual__footnote { padding-inline: 0.8rem; }
}

.studio-hero__support-links { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1.25rem; list-style: none; padding: 0; margin: .6rem 0 0; }
.studio-hero__support-links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--ink-soft); font-size: .76rem; line-height: 1.6; }
.studio-hero__support-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.workflow-support { padding-block: clamp(2.4rem,4vw,3.5rem); border-bottom: 1px solid var(--line); }
.workflow-support__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 3rem; margin-bottom: 1.6rem; align-items: end; }
.workflow-support__head .eyebrow { grid-column: 1/-1; margin-bottom: .7rem; }
.workflow-support__head h2 { margin: 0; max-width: 25ch; font-size: clamp(1.8rem,2.6vw,2.4rem); line-height: 1.25; letter-spacing: -.03em; }
.workflow-support__head > p:not(.eyebrow) { color: var(--ink-soft); font-size: .93rem; line-height: 1.85; margin: 0; }
.workflow-support__cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; }
.workflow-support__card { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border: 1px solid #dbe2ed; border-radius: 12px; background: #f5f8fc; }
.workflow-support__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .68rem; line-height: 1.6; color: var(--teal); }
.workflow-support__icon { color: var(--accent); display: flex; }
.workflow-support__icon svg { width: 24px; height: 24px; }
.workflow-support__card h3 { margin: 1rem 0 .6rem; font-size: 1.3rem; line-height: 1.5; letter-spacing: -.02em; }
.workflow-support__card > p { color: var(--ink-soft); font-size: .88rem; line-height: 1.85; margin: 0; }
.workflow-support__card > ul { list-style: none; padding: 0; margin: 1rem 0 1.2rem; }
.workflow-support__card > ul li { display: flex; gap: .6rem; align-items: start; margin-top: .45rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.75; }
.workflow-support__card > ul svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; }
.workflow-support__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.3rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); }
.workflow-support__actions a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .8rem; }
.workflow-entry { display: grid; grid-template-columns: minmax(0,1.35fr) repeat(2,minmax(0,1fr)); gap: .8rem; padding-block: .6rem 2rem; }
.workflow-entry__card { display: flex; flex-direction: column; gap: .4rem; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.2rem; color: var(--ink); background: var(--surface); }
.workflow-entry__card--main { border-color: #c7d5f6; background: #edf2ff; }
.workflow-entry__card small { color: var(--ink-mute); font-size: .67rem; line-height: 1.6; }
.workflow-entry__card strong { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 650; line-height: 1.5; }
.workflow-entry__card strong svg { margin-left: auto; flex: none; color: var(--accent); }
.workflow-entry__card > span { color: var(--ink-soft); font-size: .78rem; line-height: 1.8; }
.workflow-entry__card:hover { border-color: var(--accent); }
.workflow-entry__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-page="useCases"] #use-cases { padding-top: 2rem; }
body[data-page="useCases"] .pr-demo { border-top: 1px solid var(--line); padding-top: 2rem; background: #f8faff; }
@media (max-width: 760px) {
  .workflow-support__head { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .workflow-support__cards { grid-template-columns: minmax(0,1fr); }
  .workflow-entry { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow-entry__card--main { grid-column: 1/-1; }
}
@media (max-width: 430px) {
  .workflow-entry { grid-template-columns: minmax(0,1fr); gap: .6rem; }
  .workflow-support__card { padding: 1.2rem; }
}
body[data-page="useCases"] .page-hero { padding-block: clamp(1.8rem,3.5vw,2.8rem) 1rem; }
body[data-page="useCases"] .page-hero h1 { max-width: 29ch; }
body[data-page="useCases"] .page-hero .hero__lead { max-width: 74ch; font-size: .98rem; line-height: 1.8; margin-top: 1rem; }
.docs-reading-preview .more { display: inline-block; margin-right: 1rem; }

@media (min-width: 901px) {
  body[data-page="useCases"] .page-hero .shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: .7rem 3rem; }
  body[data-page="useCases"] .page-hero .eyebrow { grid-column: 1/-1; margin: 0; }
  body[data-page="useCases"] .page-hero h1 { font-size: clamp(2rem,3.5vw,2.9rem); margin: 0; line-height: 1.12; }
  body[data-page="useCases"] .page-hero .hero__lead { margin: 0; font-size: .9rem; }
}

.workflow-extra-wrap { padding-block: 1.5rem 2.5rem; }
.workflow-extra { border-block: 1px solid var(--line); }
.workflow-extra > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding-block: 1rem; color: var(--ink-soft); font-size: .94rem; font-weight: 600; line-height: 1.7; list-style: none; cursor: pointer; }
.workflow-extra > summary::-webkit-details-marker { display: none; }
.workflow-extra > summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; font-weight: 400; flex: none; }
.workflow-extra[open] > summary::after { content: '−'; }
.workflow-extra > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.workflow-extra .shell { width: 100%; max-width: none; margin: 0; }
.workflow-extra .workflow-story { padding-top: 1rem; }

.showcase-planned { margin-top: 1rem; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.showcase-planned > summary { min-height: 44px; display: flex; align-items: center; gap: .6rem; cursor: pointer; color: var(--ink-soft); font-size: .8rem; font-weight: 600; }
.showcase-planned > summary::after { content: '+'; margin-left: auto; color: var(--accent); }
.showcase-planned[open] > summary::after { content: '−'; }
.showcase-planned > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.showcase-planned ul { list-style: none; padding: 0; margin: 0; }
.showcase-planned li { padding-block: .8rem; border-top: 1px solid var(--line); }
.showcase-planned h4 { font-size: .85rem; line-height: 1.65; margin: 0; }
.showcase-planned p { color: var(--ink-soft); font-size: .8rem; line-height: 1.8; margin: .3rem 0 0; }

.pr-demo { padding-block: 1rem 3.4rem; scroll-margin-top: 90px; }
.pr-demo *, .pr-demo *::before, .pr-demo *::after { box-sizing: border-box; }
.pr-demo [hidden] { display: none; }
.pr-demo__head { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); gap: 2.5rem; align-items: end; }
.pr-demo__head .eyebrow { margin: 0 0 .65rem; }
.pr-demo__head h2 { margin: 0; max-width: 29ch; font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -.035em; line-height: 1.22; }
.pr-demo__head > p { margin: 0; font-size: .91rem; color: var(--ink-soft); line-height: 1.8; }
.pr-demo__example { display: flex; align-items: center; gap: 1rem; padding: .85rem 0 .65rem; margin-top: .85rem; }
.pr-example-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 650; line-height: 1.6; color: #365a98; flex-shrink: 0; }
.pr-example-label > span { font-size: 1rem; }
.pr-demo__example > p { margin: 0; font-size: .69rem; line-height: 1.7; color: var(--ink-mute); }
.pr-demo__hint { margin: .1rem 0 .8rem; font-size: .72rem; color: var(--ink-mute); }
.pr-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #d6ddeb; border-radius: 10px; overflow: hidden; background: #f7f9fd; }
.pr-steps > a { min-height: 66px; display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; text-decoration: none; color: #4a5870; line-height: 1.5; border-right: 1px solid #dce2ee; }
.pr-steps > a:last-child { border-right: 0; }
.pr-steps > a > span { font: .65rem var(--mono); color: var(--ink-mute); }
.pr-steps > a > b { font-size: .76rem; font-weight: 600; }
.pr-steps > a > i { margin-left: auto; font-size: .9rem; font-style: normal; color: var(--ink-mute); }
.pr-steps > a:hover { background: #edf2fe; }
.pr-steps > a[aria-selected="true"] { background: #e9efff; color: #1747c0; box-shadow: inset 0 -3px #2c54d8; }
.pr-steps > a[aria-selected="true"] > span, .pr-steps > a[aria-selected="true"] > i { color: #2c54d8; }
.pr-steps > a:focus-visible, .pr-demo button:focus-visible, .pr-demo summary:focus-visible, .pr-demo a:focus-visible { outline: 3px solid #4269dc; outline-offset: 3px; }
.pr-stage { padding: 1.2rem 0 0; scroll-margin-top: 90px; }
.pr-stage + .pr-stage { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.pr-demo[data-pr-ready] .pr-stage { margin-top: 0; border: 0; padding-top: 1.2rem; }
.pr-stage__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; align-items: center; margin-bottom: 1rem; }
.pr-stage__intro > div { display: flex; align-items: flex-start; gap: .7rem; }
.pr-stage__number { font: .65rem var(--mono); color: #4065b7; padding-top: .3rem; }
.pr-stage__intro h3 { margin: 0; font-size: 1.05rem; font-weight: 650; line-height: 1.55; letter-spacing: -.015em; }
.pr-stage__intro > p { margin: 0; font-size: .76rem; line-height: 1.8; color: var(--ink-mute); }
.pr-window { border: 1px solid #d4ddef; border-radius: 14px; background: #f0f3fa; overflow: hidden; box-shadow: 0 18px 50px -35px #28447466; }
.pr-toolbar { display: flex; align-items: center; min-height: 54px; gap: .85rem; padding: .7rem 1.25rem; background: #fff; border-bottom: 1px solid #dce3ef; font-size: .68rem; color: #5a6880; }
.pr-toolbar__title { display: inline-flex; align-items: center; gap: .4rem; color: #263c60; font-weight: 600; }
.pr-toolbar__title svg { width: 18px; height: 18px; }
.pr-toolbar__file { padding-left: .85rem; border-left: 1px solid #e0e5ed; overflow-wrap: anywhere; }
.pr-toolbar__mode { margin-left: auto; border-radius: 4px; padding: .3rem .5rem; background: #eaf0ff; color: #2852c4; font-weight: 600; white-space: nowrap; }
.pr-toolbar__action { display: inline-flex; align-items: center; gap: .6rem; border-left: 1px solid #e0e5ed; padding-left: .85rem; color: #3c5074; }
.pr-view-label { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .8rem 1.4rem .55rem; color: #61708a; font-size: .65rem; }
.pr-view-label > span:last-child { text-align: right; }
.pr-view-label > i { font-style: normal; color: var(--ink-soft); }
.pr-spread { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.1rem; padding: 0 1.25rem 1.25rem; align-items: start; }
.pr-page { min-width: 0; padding: clamp(1rem,2.2vw,1.7rem); background: #fff; border: 1px solid #dce2ec; box-shadow: 0 3px 8px #263a5c05; color: #2c3340; }
.pr-page__meta { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 1.1rem; color: var(--ink-mute); font: .61rem var(--mono); }
.pr-page h4 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 .4rem; letter-spacing: -.02em; font-family: Georgia, 'Times New Roman', serif; color: #1b2535; }
.pr-page[lang^="zh"] h4 { font-family: inherit; font-size: 1.1rem; line-height: 1.5; }
.pr-page__subtitle { margin: 0 0 1.1rem; font-size: .62rem; line-height: 1.6; color: var(--ink-soft); }
.pr-page__section { padding: 0; margin-top: .75rem; }
.pr-page__section h5 { font-size: .73rem; margin: 0 0 .2rem; font-weight: 700; line-height: 1.5; }
.pr-page__section p { margin: 0; font-size: .85rem; line-height: 1.8; font-family: Georgia, 'Times New Roman', serif; }
.pr-page[lang^="zh"] .pr-page__section p { font-family: inherit; line-height: 1.9; }
.pr-page__section--selected { border-left: 2px solid #83a5fa; padding: .4rem .55rem; margin-inline: -.55rem; background: #f0f4ff; }
.pr-chart { border-top: 1px solid #e8ebf1; padding-top: .7rem; margin: .9rem 0 0; }
.pr-chart figcaption { font-size: .58rem; color: var(--ink-mute); margin-bottom: .5rem; }
.pr-chart__row { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr) auto; align-items: center; gap: .5rem; margin: .35rem 0; font-size: .57rem; color: #58677e; }
.pr-chart__track { height: 8px; border-radius: 2px; background: #edf0f5; }
.pr-chart__bar { display: block; height: 100%; border-radius: 2px; background: #658ce8; }
.pr-chart__bar--a { width: 78%; }
.pr-chart__bar--b { width: 62%; background: #a5b8d7; }
.pr-chart__row > b { font-weight: 500; font-variant-numeric: tabular-nums; color: #53637c; }
.pr-workspace { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 1.2rem; padding: 1.4rem; align-items: start; }
.pr-answer-panel, .pr-study-panel, .pr-note-destination { min-width: 0; }
.pr-kicker { display: block; font-size: .65rem; font-weight: 600; line-height: 1.6; color: var(--ink-soft); }
.pr-scope { display: flex; align-items: baseline; gap: .6rem; font-size: .65rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.pr-scope > b { font-weight: 500; color: #31589a; background: #e2eafd; border: 1px solid #d1def8; border-radius: 4px; padding: .25rem .45rem; }
.pr-question { border: 1px solid #d3def4; background: #e6edfc; padding: 1rem 1.1rem; border-radius: 10px; }
.pr-question h4 { font-size: .94rem; line-height: 1.6; margin: .4rem 0 0; font-weight: 600; color: #233a63; }
.pr-answer { margin-top: 1.1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid #dce3ef; border-radius: 10px; }
.pr-answer > p { font-size: .85rem; line-height: 1.9; color: #34445e; margin: .5rem 0 .9rem; }
.pr-answer__sources { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .7rem; border-top: 1px solid #e8edf5; padding-top: .6rem; }
.pr-answer__sources > span { font-size: .62rem; color: var(--ink-soft); }
.pr-citation { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: #2856b5; font-size: .69rem; line-height: 1.7; text-decoration: none; overflow-wrap: anywhere; }
.pr-citation:hover { text-decoration: underline; }
.pr-citation > span { font-size: .75rem; }
.pr-source, .pr-quote-source { min-width: 0; border: 1px solid #dae1ed; padding: 1.15rem; background: #fff; border-radius: 10px; }
.pr-source__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.pr-file-chip { color: var(--ink-mute); font: .58rem var(--mono); }
.pr-source > h4, .pr-quote-source > h4 { font: 600 1.05rem/1.4 Georgia, 'Times New Roman', serif; color: #2a3b56; margin: 0 0 .7rem; }
.pr-source__hint { font-size: .8rem; line-height: 1.8; color: var(--ink-soft); margin: 0 0 .7rem; }
.pr-source summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-block: .7rem; border-top: 1px solid #e4e9f2; list-style: none; font-size: .72rem; color: #305bae; cursor: pointer; }
.pr-source summary::-webkit-details-marker { display: none; }
.pr-source summary > span { font-size: .9rem; }
.pr-source details[open] summary > span { transform: rotate(90deg); }
.pr-source__passages { padding-top: .1rem; }
.pr-source__passage { margin-block: .5rem; padding: .65rem; border: 1px solid transparent; border-radius: 4px; scroll-margin-top: 110px; }
.pr-source__passage h5, .pr-quote-passage h5 { margin: 0 0 .35rem; font-size: .7rem; color: #3d4d66; }
.pr-source__passage p, .pr-quote-passage p { margin: 0; font: .79rem/1.85 Georgia, 'Times New Roman', serif; color: #4b5669; }
.pr-source__passage.is-highlighted, .pr-quote-passage.is-highlighted { background: #fff5d5; border-color: #ead791; }
.pr-source__passage:focus-visible, .pr-quote-passage:focus-visible, .pr-saved-note:focus-visible { outline: 2px solid #4269dc; outline-offset: 3px; }
.pr-study-panel { background: #fff; padding: 1.1rem; border: 1px solid #dce3ef; border-radius: 10px; }
.pr-study-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding-bottom: .65rem; }
.pr-action-label { font-size: .65rem; color: #44649b; }
.pr-study-points { margin: 0; padding: 0; list-style: none; }
.pr-study-points > li { display: flex; align-items: flex-start; gap: .7rem; border-top: 1px solid #e4eaf3; padding-top: 1rem; margin-top: .6rem; }
.pr-study-points__number { font: .61rem var(--mono); color: var(--ink-mute); padding-top: .35rem; }
.pr-study-points h4 { font-size: .88rem; line-height: 1.6; margin: 0 0 .25rem; color: #30425e; }
.pr-study-points p { font-size: .84rem; line-height: 1.8; color: var(--ink-soft); margin: 0; }
.pr-check-note { display: flex; gap: .5rem; font-size: .65rem; color: var(--ink-soft); margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid #e4eaf3; }
.pr-check-note > span { color: var(--ink-mute); }
.pr-quote-passage { border: 1px solid #ead791; border-radius: 5px; padding: .9rem; margin-top: 1rem; scroll-margin-top: 110px; }
.pr-quote-hint { color: var(--ink-soft); font-size: .74rem; line-height: 1.8; margin: 1rem 0 .7rem; }
.pr-quote-button { min-height: 44px; width: 100%; display: flex; justify-content: center; align-items: center; gap: .7rem; padding: .65rem .9rem; border: 1px solid #244fc4; border-radius: 7px; color: #fff; background: #2856cb; cursor: pointer; font: 600 .74rem/1.6 var(--font); }
.pr-quote-button:hover { background: #1d45b2; }
.pr-note-destination { min-height: 280px; background: #fff; border: 1px solid #dce3ef; border-radius: 10px; padding: 1.15rem; }
.pr-note-destination__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.pr-saved { color: var(--ink-mute); font-size: .61rem; }
.pr-saved-note h4 { margin: 0 0 .85rem; font-size: .94rem; line-height: 1.6; color: #30425e; }
.pr-saved-note blockquote { border-left: 3px solid #97b1ed; background: #f3f6fc; padding: .8rem .9rem; margin: 0; font: .78rem/1.85 Georgia, 'Times New Roman', serif; color: #596880; }
.pr-saved-note .pr-citation { margin-top: .4rem; }
.pr-note-reflection { font-size: .76rem; line-height: 1.8; color: var(--ink-soft); border-top: 1px solid #e4eaf3; padding-top: .9rem; margin: .8rem 0 0; }
.pr-note-empty { border: 1px dashed #d1dcee; border-radius: 6px; padding: 1.2rem; text-align: center; }
.pr-note-empty > span { color: var(--ink-mute); font-size: 1.5rem; }
.pr-note-empty h4 { margin: .5rem 0; font-size: .87rem; line-height: 1.6; color: var(--ink-mute); }
.pr-note-empty p { margin: 0; font-size: .8rem; line-height: 1.8; color: var(--ink-soft); }
.pr-stage__outcome { display: flex; gap: .5rem; margin: .65rem 0 0; font-size: .69rem; line-height: 1.8; color: var(--ink-soft); }
.pr-stage__outcome > span { color: #406bc3; }
.pr-demo__footer { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 2.5rem; padding-top: 1.3rem; margin-top: 1.3rem; border-top: 1px solid #e0e6ef; }
.pr-demo__footer p { margin: .4rem 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.9; }
.pr-demo__links { display: flex; flex-direction: column; align-items: flex-start; }
.pr-demo__links > span { color: var(--ink-mute); font-size: .66rem; line-height: 1.8; margin-bottom: .4rem; }
.pr-demo__links > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: #315ab5; text-decoration: none; font-size: .73rem; }
.pr-demo__links > a:hover { text-decoration: underline; }
.pr-demo__links > a svg { width: 14px; height: 14px; }
@media (max-width: 1000px) {
  .pr-steps > a { gap: .4rem; padding-inline: .75rem; }
  .pr-steps > a > i { display: none; }
  .pr-toolbar__file { max-width: 40%; }
  .pr-toolbar__action { font-size: .62rem; }
}
@media (max-width: 760px) {
  .pr-demo__head { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .pr-demo__head h2 { max-width: none; }
  .pr-demo__example { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .pr-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pr-steps > a { min-height: 54px; padding: .65rem .8rem; }
  .pr-steps > a:nth-child(2) { border-right: 0; }
  .pr-steps > a:nth-child(-n+2) { border-bottom: 1px solid #dce2ee; }
  .pr-steps > a > b { font-size: .73rem; }
  .pr-stage__intro { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .pr-stage__intro h3 { font-size: 1rem; }
  .pr-stage__intro > p { padding-left: 1.6rem; }
  .pr-spread { gap: .75rem; padding-inline: .85rem; }
  .pr-page { padding: 1rem; }
  .pr-page h4 { font-size: 1.05rem; }
  .pr-toolbar { padding-inline: .9rem; flex-wrap: wrap; gap: .5rem; }
  .pr-toolbar__file { max-width: none; flex: 1; font-size: .6rem; }
  .pr-toolbar__action { border-left: 0; padding: 0; }
  .pr-workspace { grid-template-columns: minmax(0,1fr); padding: .85rem; gap: .85rem; }
  .pr-source, .pr-quote-source, .pr-study-panel, .pr-note-destination { padding: 1rem; }
  .pr-demo__footer { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .pr-demo__links { flex-direction: row; flex-wrap: wrap; gap: .15rem 1.1rem; }
  .pr-demo__links > span { width: 100%; }
}
@media (max-width: 540px) {
  .pr-demo { padding-block: .5rem 2.5rem; }
  .pr-demo__head h2 { font-size: 1.5rem; line-height: 1.35; }
  .pr-demo__head > p { font-size: .85rem; }
  .pr-spread { grid-template-columns: minmax(0,1fr); gap: .9rem; }
  .pr-view-label { padding-inline: 1rem; font-size: .6rem; }
  .pr-view-label > span:last-child { max-width: 10em; }
  .pr-page { padding: 1.2rem; }
  .pr-page h4 { font-size: 1.2rem; }
  .pr-page__section p { font-size: .77rem; }
  .pr-page__subtitle { font-size: .65rem; }
  .pr-page__section h5 { font-size: .72rem; }
  .pr-toolbar__file { width: calc(100% - 75px); }
  .pr-toolbar__mode { margin-left: 0; }
  .pr-toolbar__action { margin-left: auto; }
  .pr-chart__row { font-size: .62rem; }
  .pr-chart figcaption { font-size: .62rem; }
  .pr-stage__intro > p { padding-left: 0; }
  .pr-answer > p { font-size: .83rem; }
  .pr-note-destination__head { flex-wrap: wrap; }
  .pr-note-empty { padding: 1rem; }
}

.site-nav--desktop { position: relative; isolation: isolate; }
.site-nav__indicator { position: absolute; top: 0; left: 0; z-index: -1; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); pointer-events: none; }
.site-nav--desktop[data-motion-ready] .site-nav__indicator { transition: transform 240ms var(--ease-out), width 240ms var(--ease-out), height 240ms var(--ease-out); }
.site-nav--desktop[data-motion-ready] a[aria-current="page"], .site-nav--desktop[data-motion-ready] a:hover { background: transparent; box-shadow: none; }
.site-nav--desktop a { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.site-head .brand img { transition: transform 220ms var(--ease-out); }
.site-head .brand:hover img { transform: rotate(-7deg); }

body[data-page="home"] .studio-hero { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: 0; }
.studio-hero .studio-hero__grid { grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr); gap: clamp(2rem,4.5vw,4rem); align-items: center; }
.studio-hero__copy { padding-block: 0.4rem 0.8rem; }
body[data-page="home"] .studio-hero h1 { max-width: none; margin-top: 0; word-spacing: normal; font-size: clamp(2.8rem,4.5vw,4.25rem); line-height: 1.08; letter-spacing: -.045em; }
body[data-page="home"] .studio-hero__accent { max-width: none; }
.studio-hero__phrase { display: block; }
.studio-hero__eyebrow { margin-bottom: 1.3rem; }
body[data-page="home"] .studio-hero .hero__lead { max-width: 47ch; margin-top: 1.35rem; font-size: 1rem; line-height: 1.8; }
.studio-hero__status { margin-top: 1.3rem; max-width: none; }
body[data-page="home"][lang^="zh"] .studio-hero h1 { max-width: none; font-size: clamp(2.1rem,4.4vw,3.8rem); line-height: 1.23; letter-spacing: -.02em; word-spacing: normal; word-break: normal; overflow-wrap: normal; text-wrap: wrap; }
body[data-page="home"][lang^="zh"] .studio-hero .hero__lead { max-width: 29em; font-size: 1rem; line-height: 1.85; }
body[data-page="home"][lang^="zh"] .studio-hero__eyebrow { letter-spacing: .07em; }
.studio-hero .studio-hero__foundation { margin-top: 1.5rem; }
.studio-hero .hero__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding-block: 1.05rem; text-align: left; align-items: start; }
.studio-hero .hero__facts li { display: flex; align-items: flex-start; justify-content: flex-start; gap: .55rem; min-width: 0; padding-inline: 1.25rem; font-size: .8rem; line-height: 1.7; }
.studio-hero .hero__facts li:first-child { padding-left: 0; }
.studio-hero .hero__facts li + li { border-left: 1px solid var(--line); }
.studio-hero .hero__facts svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: .15rem; }

.workflow-story { padding-block: clamp(2.4rem,4vw,3.3rem) 1.5rem; }
.workflow-story__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); column-gap: clamp(2rem,6vw,5rem); max-width: none; text-align: left; margin: 0; }
.workflow-story__head .eyebrow { grid-column: 1/-1; margin: 0 0 .8rem; }
.workflow-story__head h2 { grid-column: 1; grid-row: 2/4; margin: 0; font-size: clamp(1.8rem,2.6vw,2.4rem); line-height: 1.24; letter-spacing: -.035em; max-width: 24ch; }
.workflow-story__head > p:not(.eyebrow) { margin: 0; max-width: none; font-size: .95rem; line-height: 1.85; }
.workflow-story__head > small { grid-column: 2; font-size: .7rem; margin: .8rem 0 0; }
.workflow-path { margin: 1.65rem 0 .3rem; }
.workflow-path a { padding-block: 14px; }
.workflow-row { padding-block: clamp(2rem,3.8vw,3.2rem); gap: clamp(2rem,5vw,4rem); }
.workflow-row h3 { font-size: clamp(1.7rem,2.6vw,2.35rem); margin-block: 14px; }
.workflow-canvas { padding: clamp(18px,2.6vw,32px); border-radius: 16px; }
.workflow-availability { padding-top: 1.2rem; }
.studio-demo { padding-block: clamp(2.8rem,5vw,4rem); }
body[data-page="home"] #coming { padding-block: clamp(2.8rem,5vw,4rem); }

.agent-workflow { padding-block: clamp(2.6rem,4.5vw,4rem); background: #f5f7fb; border-block: 1px solid #e5eaf2; }
.agent-workflow__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); align-items: end; gap: clamp(2rem,6vw,5rem); margin-bottom: 1.8rem; }
.agent-workflow__heading h2 { max-width: 23ch; font-size: clamp(1.9rem,2.9vw,2.65rem); line-height: 1.18; letter-spacing: -.035em; }
body[lang^="zh"] .agent-workflow__heading h2 { max-width: none; line-height: 1.3; word-break: normal; }
.agent-workflow__heading > div > p:not(.eyebrow) { font-size: .94rem; line-height: 1.85; color: var(--ink-soft); margin: 0; }
.agent-workflow__heading small { display: block; font-size: .7rem; line-height: 1.7; color: var(--ink-mute); margin-top: .7rem; }
.agent-loop { border: 1px solid #ccd7ec; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px -24px #233b6b55; overflow: hidden; }
.agent-loop__top { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.5rem; background: #edf2fc; border-bottom: 1px solid #dce4f3; font: .69rem var(--mono); color: #3b5383; }
.agent-loop__top span:last-child { color: var(--ink-mute); }
.agent-loop__brief { padding: 1.3rem 1.5rem .8rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.6fr); align-items: center; gap: 2rem; }
.agent-loop__brief small { font-size: .67rem; color: var(--ink-mute); }
.agent-loop__brief h3 { font-size: 1.15rem; line-height: 1.6; margin-top: .3rem; }
.agent-loop__brief > p { font-size: .78rem; line-height: 1.75; color: var(--ink-mute); margin: 0; padding-left: 1rem; border-left: 2px solid #dbe4f7; }
.agent-outer-route { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; list-style: none; margin: .2rem 1.5rem 1.1rem; padding: 0; }
.agent-outer-route li { display: flex; align-items: center; gap: .6rem; font-size: .76rem; min-height: 44px; }
.agent-outer-route li > span { font: .63rem var(--mono); color: var(--accent); }
.agent-outer-route i { margin-left: auto; font-style: normal; color: #98a7c3; }
.agent-loop__inner { margin: 0 1.5rem; padding: 1.25rem; border: 1px solid #d5dfef; border-radius: 12px; background: #f7f9fd; }
.agent-loop__inner-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.agent-loop__inner-head p { margin: 0 0 .4rem; font: .65rem var(--mono); color: var(--accent); }
.agent-loop__inner-head h3 { font-size: 1.05rem; line-height: 1.5; }
.agent-loop__inner-head > span { font-size: .66rem; color: var(--ink-mute); }
.agent-loop__tabs { margin: 1rem 0; gap: .4rem; padding-bottom: .9rem; border-bottom: 1px solid #dce4f2; }
.agent-loop__tabs button { min-height: 44px; padding: .45rem .85rem; font-size: .76rem; }
.agent-loop__tabs button > span { opacity: .6; font: .6rem var(--mono); margin-right: .3rem; }
.agent-loop-panel { padding: 0; }
.agent-loop-panel[hidden] { display: none; }
.agent-loop-panel + .agent-loop-panel { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.agent-loop-panel[role="tabpanel"] { margin: 0; padding: 0; border: 0; }
.agent-handoff { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.agent-coordinator { display: grid; place-items: center; border-radius: 8px; width: 30px; height: 30px; flex-shrink: 0; color: var(--accent); background: #e7eeff; }
.agent-handoff > div > span { color: var(--accent); font-size: .65rem; }
.agent-handoff h3 { margin-top: .2rem; font-size: .98rem; line-height: 1.6; }
.agent-handoff p { margin: .3rem 0 0; font-size: .8rem; line-height: 1.75; color: var(--ink-soft); }
.agent-lanes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; list-style: none; margin: 0; padding: 0; }
.agent-lanes > li { min-width: 0; background: white; border: 1px solid #dce3ef; border-radius: 10px; padding: 1rem; }
.agent-lane__who { display: flex; align-items: center; gap: .6rem; }
.agent-lane__who .sc-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; font-size: .65rem; }
.agent-lane__who b, .agent-lane__who small { display: block; }
.agent-lane__who b { font-size: .78rem; }
.agent-lane__who small { font-size: .64rem; color: var(--ink-mute); margin-top: 2px; }
.agent-lanes li > p { min-height: 3.4em; font-size: .79rem; line-height: 1.7; color: var(--ink-soft); margin: .8rem 0; }
.agent-lane__artifact { display: block; font-size: .65rem; color: var(--ink-mute); margin-bottom: .8rem; }
.agent-lane__state { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; line-height: 1.5; border-radius: 4px; padding: 4px 6px; color: #516177; background: #f0f3f8; }
.agent-lane__state i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.agent-lane__state--working { background: #eaf0ff; color: #3c5bae; }
.agent-lane__state--done { background: #e8f3ed; color: #30705a; }
.agent-lane__state--revise { background: #faf0d9; color: #856017; }
.agent-checkback { display: flex; align-items: baseline; gap: .65rem; margin-top: 1rem; font-size: .72rem; color: var(--ink-mute); }
.agent-checkback > span { color: #4867a9; font-size: 1rem; }
.agent-checkback p { margin: 0; line-height: 1.8; }
.agent-checkback b { font-weight: 600; color: var(--ink-soft); }
.agent-deliverable { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 1.5rem; background: #fff; border: 1px solid #d7e1f1; border-radius: 8px; padding: .9rem 1rem; margin-top: .9rem; }
.agent-deliverable span { color: var(--ink-mute); font-size: .63rem; }
.agent-deliverable h3 { font-size: .9rem; line-height: 1.6; margin-top: .2rem; }
.agent-deliverable > p { margin: 0; font-size: .77rem; line-height: 1.75; color: var(--ink-soft); }
.agent-loop__return { display: flex; align-items: baseline; gap: .7rem; padding: 1.1rem 1.5rem; }
.agent-loop__return > span { color: var(--accent); }
.agent-loop__return p { font-size: .75rem; line-height: 1.8; color: var(--ink-mute); margin: 0; flex: 1; }
.agent-loop__return b { color: var(--ink-soft); font-weight: 600; }
.agent-loop__return a { font-size: .72rem; white-space: nowrap; color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.agent-loop__return a svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .site-nav--desktop[data-motion-ready] .site-nav__indicator, .site-head .brand img { transition: none; }
  .site-head .brand:hover img { transform: none; }
}
@media (max-width: 900px) {
  .studio-spotlight { max-width: 540px; margin-inline: auto; }
  .studio-hero .studio-hero__grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .studio-hero__copy { max-width: 650px; }
  body[data-page="home"] .studio-hero h1 { font-size: clamp(2.7rem,7vw,3.8rem); }
  body[data-page="home"][lang^="zh"] .studio-hero h1 { font-size: clamp(2.1rem,5.8vw,3.4rem); }
  .studio-hero__phrase { display: inline; }
  body[lang^="zh"] .studio-hero__phrase { display: inline-block; }
  .workflow-story__head, .agent-workflow__heading { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .workflow-story__head h2 { grid-column: 1; grid-row: auto; max-width: 28ch; }
  .workflow-story__head > small { grid-column: 1; margin: 0; }
  .agent-workflow__heading h2 { max-width: 28ch; }
}
@media (max-width: 700px) {
  .studio-hero .hero__facts { grid-template-columns: minmax(0,1fr); gap: .7rem; }
  .studio-hero .hero__facts li { padding: 0; }
  .studio-hero .hero__facts li + li { border: 0; }
  .agent-loop__brief { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .agent-outer-route { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 .8rem; }
  .agent-outer-route li:nth-child(2) i { visibility: hidden; }
  .agent-loop__inner-head { align-items: start; flex-direction: column; gap: .4rem; }
  .agent-lanes { grid-template-columns: minmax(0,1fr); gap: .65rem; }
  .agent-lanes > li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem .6rem; padding: .85rem; }
  .agent-lanes li > p { grid-column: 1/-1; min-height: 0; margin: .2rem 0; }
  .agent-lane__artifact { grid-column: 1; margin: 0; }
  .agent-lane__state { grid-row: 1; grid-column: 2; align-self: center; }
  .agent-deliverable { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .agent-loop__return { flex-wrap: wrap; }
  .agent-loop__return a { margin-left: 1.2rem; }
}
@media (max-width: 430px) {
  .agent-lanes > li { grid-template-columns: minmax(0,1fr); }
  .agent-lane__state { grid-row: auto; grid-column: 1; justify-self: start; }
  body[data-page="home"] .studio-hero { padding-top: 1.6rem; }
  .studio-hero__eyebrow { font-size: .65rem; margin-bottom: 1rem; }
  body[data-page="home"] .studio-hero .hero__lead { font-size: .92rem; }
  .studio-hero .hero__actions { margin-top: 1.2rem; }
  .workflow-story__head h2 { font-size: 1.8rem; }
  .workflow-path a { padding-inline: 8px; font-size: .7rem; }
  .agent-loop__top { padding-inline: .9rem; font-size: .62rem; }
  .agent-loop__brief { padding-inline: .9rem; }
  .agent-outer-route { margin-inline: .9rem; }
  .agent-loop__inner { margin-inline: .65rem; padding: .8rem; }
  .agent-loop__return { padding-inline: .9rem; }
  .agent-loop__tabs { gap: .35rem; }
  .agent-loop__tabs button { padding: .35rem .6rem; font-size: .69rem; }
  .agent-loop__tabs button > span { display: none; }
}

.studio-spotlight .studio-companion { animation-play-state: paused; }
.studio-spotlight[data-spotlight-playing] .studio-companion { animation-play-state: running; }

body[data-page="apply"] .site-head__inner { display: flex; justify-content: space-between; }
.application-back { font-size: 13px; color: var(--accent); }
.application-page { max-width: 1120px; padding-block: 40px 64px; }
.application-intro, .application-note { max-width: 950px; margin: 0 auto 24px; }
.application-intro .eyebrow { margin: 0; }
.application-intro h1 { margin: 10px 0 12px; font-size: 36px; line-height: 1.3; letter-spacing: -1px; }
.application-intro > p:last-child { max-width: 800px; margin: 0; color: var(--ink-mute); font-size: 15px; line-height: 1.8; }
.application-note { padding: 16px 20px; border: 1px solid #cedbf8; border-radius: 12px; background: #f0f5ff; }
.application-note strong { display: block; color: #173a8f; font-size: 15px; font-weight: 650; }
.application-note p { margin: 4px 0 0; color: #4a5b79; font-size: 13px; line-height: 1.8; }
.application-layout { display: grid; grid-template-columns: 260px minmax(0, 650px); justify-content: center; align-items: start; gap: 40px; }
.application-guide { min-width: 0; padding-top: 16px; }
.application-guide > h2 { margin: 0; color: var(--accent); font-size: 12px; font-weight: 650; letter-spacing: .04em; }
.application-timeline { margin: 22px 0 28px; padding: 0; list-style: none; }
.application-timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 25px; }
.application-timeline li:last-child { padding-bottom: 0; }
.application-timeline li > span { z-index: 1; display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border: 1px solid #c8d5ee; border-radius: 50%; background: var(--bg); color: var(--accent); font-size: 12px; }
.application-timeline li:not(:last-child)::after { position: absolute; top: 32px; bottom: 0; left: 16px; border-left: 1px solid var(--line); content: ""; }
.application-timeline h3 { margin: 2px 0 5px; font-size: 15px; font-weight: 600; line-height: 1.6; }
.application-timeline p { margin: 0; color: var(--ink-mute); font-size: 13px; line-height: 1.8; }
.application-help { margin-top: 24px; color: var(--ink-mute); font-size: 12px; line-height: 1.8; }
.application-help p { margin: 0 0 5px; }
.application-help .application-help__contact { margin-top: 20px; }
.application-page a { overflow-wrap: anywhere; }
.application-card { min-width: 0; padding: 28px 32px; border: 1px solid #e0e3e8; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #14181f05; }
.application-card [hidden] { display: none !important; }
.application-card button, .application-card input { font: inherit; }
.application-card button { cursor: pointer; }
.application-card button:disabled { cursor: wait; opacity: .6; }
.application-card h2 { margin: 0 0 8px; font-size: 23px; font-weight: 650; line-height: 1.4; letter-spacing: -.4px; }
.application-steps { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 25px; padding: 0 0 22px; border-bottom: 1px solid var(--line); list-style: none; }
.application-steps li { display: flex; align-items: center; gap: 7px; color: var(--ink-mute); font-size: 12px; white-space: nowrap; }
.application-steps span { display: grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #edf0f4; font-size: 12px; }
.application-steps [aria-current] { color: var(--accent); font-weight: 650; }
.application-steps [aria-current] span { background: var(--accent); color: #fff; }
.application-steps .application-progress-complete { color: #345891; }
.application-progress-complete span { background: #e6eeff; color: var(--accent); }
.application-section-heading p { margin: 0 0 24px; color: var(--ink-mute); font-size: 13px; line-height: 1.8; }
.application-card fieldset { min-width: 0; margin: 0 0 25px; padding: 0; border: 0; }
.application-card legend { margin: 0 0 14px; padding: 0; color: #414b5a; font-size: 13px; font-weight: 650; }
.application-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px 16px; }
.application-field--full { grid-column: 1 / -1; }
.application-field { min-width: 0; }
.application-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.application-field input { width: 100%; min-width: 0; height: 46px; padding: 10px 12px; border: 1px solid #c9cfd8; border-radius: 7px; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.4; transition: border-color 150ms ease; }
.application-field input:hover { border-color: #8897b0; }
.application-field input:focus { border-color: var(--accent); }
.application-field small { display: block; margin-top: 6px; color: var(--ink-mute); font-size: 12px; line-height: 1.7; }
.application-error { display: block; margin-top: 5px; color: #b42318; font-size: 12px; line-height: 1.7; }
.application-error:empty, .application-submit-status:empty { display: none; }
.application-card input[aria-invalid="true"] { border-color: #b42318; }
.application-error-summary { margin-bottom: 20px; padding: 12px 15px; border: 1px solid #efc4bf; border-radius: 8px; background: #fff4f2; color: #b42318; font-size: 13px; line-height: 1.8; }
.application-data-notice { margin: 0 0 24px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb; color: var(--ink-mute); font-size: 12px; }
.application-data-notice summary { min-height: 44px; padding: 11px 14px; color: #414b5a; font-size: 13px; font-weight: 600; cursor: pointer; }
.application-data-notice[open] summary { border-bottom: 1px solid var(--line); }
.application-data-notice > div { padding: 12px 14px 14px; }
.application-data-notice p { margin: 0 0 9px; line-height: 1.8; }
.application-data-notice p:last-child { margin-bottom: 0; }
.application-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.application-actions > span { color: var(--ink-mute); font-size: 12px; line-height: 1.7; }
.application-card .application-primary, .application-card .application-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 11px 18px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.6; text-align: center; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease; }
.application-card .application-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.application-card .application-primary:hover { border-color: var(--accent-hi); background: var(--accent-hi); }
.application-card .application-secondary { border-color: #cfd6e0; background: #fff; color: var(--accent); }
.application-card .application-secondary:hover { border-color: #aebcda; background: #f5f7fc; }
.application-review-data { margin: 22px 0; }
.application-review-data > div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.application-review-data dt { color: var(--ink-mute); font-size: 12px; }
.application-review-data dd { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.application-review-intent { margin: 22px 0; padding: 14px 16px; border: 1px solid #cedbf8; border-radius: 9px; background: #f0f5ff; color: #374c73; font-size: 13px; line-height: 1.8; }
.application-agreement { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0; padding: 16px; border-radius: 9px; background: #f4f6f9; font-size: 13px; line-height: 1.8; }
.application-agreement input { flex-shrink: 0; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--accent); }
.application-submit-status { color: var(--ink-soft); font-size: 13px; }
.application-success-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 10px 0 20px; border-radius: 50%; background: #e9f0ff; color: var(--accent); font-size: 25px; }
#success h2 { margin-top: 10px; font-size: 28px; }
.application-success-copy { color: var(--ink-mute); font-size: 14px; line-height: 1.9; }
.application-receipt { margin: 24px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fc; }
.application-receipt dl { margin: 0; }
.application-receipt dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.application-receipt dl > div:first-child { padding-top: 0; }
.application-receipt dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.application-receipt dt { color: var(--ink-mute); font-size: 13px; }
.application-receipt dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
#success .application-actions { margin-top: 26px; }
.application-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 850px) {
  .application-page { padding-block: 32px 48px; }
  .application-layout { grid-template-columns: minmax(0, 650px); gap: 32px; }
  .application-intro, .application-note { max-width: 650px; }
  .application-guide { order: 2; padding-top: 0; }
  .application-card { order: 1; padding: 26px; }
  .application-help { margin-top: 20px; }
}
@media (max-width: 600px) {
  body[data-page="apply"] .site-head__inner { gap: 14px; padding-block: 16px; }
  body[data-page="apply"] .site-head__actions { flex-direction: column; align-items: flex-end; gap: 0; }
  body[data-page="apply"] .site-head .brand { gap: 8px; font-size: 15px; }
  body[data-page="apply"] .site-head .brand img { width: 28px; height: 28px; }
  body[data-page="apply"] .lang-switch { padding-inline: 0; }
  .application-back { max-width: 140px; text-align: right; font-size: 12px; }
  .application-page { width: calc(100% - 32px); padding-block: 26px 40px; }
  .application-intro h1 { font-size: 28px; line-height: 1.35; letter-spacing: -.6px; }
  .application-intro > p:last-child { font-size: 14px; }
  .application-note { padding: 14px 16px; }
  .application-card { padding: 22px 18px; border-radius: 13px; }
  .application-steps { gap: 8px; padding-bottom: 20px; }
  .application-steps li { flex: 1; flex-direction: column; gap: 6px; min-width: 0; white-space: normal; text-align: center; }
  .application-card h2 { font-size: 22px; }
  .application-fields { grid-template-columns: minmax(0, 1fr); }
  .application-field label { font-size: 15px; }
  .application-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .application-actions > span { margin-bottom: 2px; }
  .application-actions .application-primary, .application-actions .application-secondary { width: 100%; }
  .application-receipt { padding: 16px; }
  .application-receipt dl > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}