/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }


body { margin: 0; background: var(--color-bg); color: var(--color-text); text-wrap: pretty;
    font-family: var(--font-body), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    opacity: 0; animation: __pageFadeIn .45s ease forwards; }
  /* 注意：这里不能出现 transform —— animation-fill-mode:forwards 会让它永久生效，
     使 body 成为 position:fixed 后代的包含块，点击放大的遮罩层会因此错位。 */
  @keyframes __pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .brand-logo { display: block; width: 180px; height: 38px; flex-shrink: 0; }
  .brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  @media (max-width: 480px) { .nav .brand-logo { width: 140px; height: 30px; } }
  @media (prefers-reduced-motion: reduce) { body { animation: none; opacity: 1; } }
  h1, h2, h3, h4 { font-family: var(--font-heading), "PingFang SC", "Microsoft YaHei", sans-serif; }
  a { color: var(--color-accent-700); text-decoration: none; }
  a:hover { color: var(--color-accent-600); text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* trilingual copy — one span per language, only the active one shows */
  [data-l] { display: none; }
  [data-l="zh"] { display: inline; }
  [data-lang="ru"] [data-l="zh"] { display: none; }
  [data-lang="ru"] [data-l="ru"] { display: inline; }
  [data-lang="en"] [data-l="zh"] { display: none; }
  [data-lang="en"] [data-l="en"] { display: inline; }

  /* pages */
  [data-page] { display: none; }
  [data-page="home"] { display: block; }
  [data-view] [data-page] { display: none; }
  [data-view="home"] [data-page="home"] { display: block; }
  [data-view="product"] [data-page="product"] { display: block; }
  [data-view="about"] [data-page="about"] { display: block; }
  [data-view="demo"] [data-page="demo"] { display: block; }
  [data-view="sol-h"] [data-page="sol-h"] { display: block; }
  [data-view="sol-s"] [data-page="sol-s"] { display: block; }
  [data-view="sol-p"] [data-page="sol-p"] { display: block; }
  [data-view="platform"] [data-page="platform"] { display: block; }
  [data-view="tut-pda"] [data-page="tut-pda"] { display: block; }
  [data-view="tut-admin"] [data-page="tut-admin"] { display: block; }
  [data-view="watch"] [data-page="watch"] { display: block; }


  /* nav state */
  [data-nav] { appearance: none; background: none; border: 0; font: inherit; font-size: 14px;
    letter-spacing: 0.02em; color: inherit; cursor: pointer; padding: 7px 0; white-space: nowrap; }
  [data-nav]:hover { color: var(--color-accent-600); }
  [data-view="home"] [data-nav="home"],

  [data-view="about"] [data-nav="about"],
  [data-view="demo"] [data-nav="demo"],
  [data-view="sol-h"] [data-nav="solution"], [data-view="sol-s"] [data-nav="solution"], [data-view="sol-p"] [data-nav="solution"], [data-view="platform"] [data-nav="solution"],
  [data-view="tut-pda"] [data-nav="help"], [data-view="tut-admin"] [data-nav="help"], [data-view="watch"] [data-nav="help"] { color: var(--color-accent-700); box-shadow: inset 0 -1px 0 var(--color-accent); }

  /* 窄屏主导航：汉堡键 + 左侧抽屉。两者默认隐藏，只在 860px 以下接管导航 */
  [data-burger] { display: none; appearance: none; padding: 0; cursor: pointer;
    width: 36px; height: 34px; align-items: center; justify-content: center;
    border: 1px solid var(--color-divider); background: none; color: var(--color-text); }
  [data-burger]:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
  [data-drawer-open] { display: none; }
  [data-drawer-open="1"] { display: block; }
  [data-drawer] [data-nav] { width: 100%; padding: 15px 0; font-size: 16px; text-align: left;
    border-bottom: 1px solid var(--color-divider); }
  [data-drawer] [data-dsub] { appearance: none; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 14px; color: color-mix(in srgb, var(--color-text) 72%, transparent);
    display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 11px 0 11px 14px;
    border-bottom: 1px solid var(--color-divider); text-align: left; }
  [data-drawer] [data-dsub] > i { font-style: normal; font: 600 11px/1 var(--font-heading), sans-serif;
    letter-spacing: .1em; color: var(--color-accent-700); }
  [data-drawer] [data-dsub]:hover { color: var(--color-accent-700); }
  [data-drawer-x] { appearance: none; border: 1px solid var(--color-divider); background: none;
    color: var(--color-text); font: 400 20px/1 var(--font-body); width: 32px; height: 32px; cursor: pointer; }
  /* solutions dropdown */
  [data-menu] { position: relative; display: inline-flex; }
  [data-submenu] { position: absolute; top: 100%; left: -18px; min-width: 268px; background: var(--color-bg);
    border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); padding: 6px 0; z-index: 40;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  [data-menu]:hover [data-submenu], [data-menu]:focus-within [data-submenu] { opacity: 1; visibility: visible; transform: none; }
  [data-menu="faq"] [data-submenu] { min-width: 360px; }
  a[data-nav], a[data-subitem], a[data-dsub] { text-decoration: none; }
  [data-subitem] { appearance: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
    display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 18px; color: inherit; }
  [data-subitem]:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
  [data-subitem] > i { font-style: normal; font: 600 11px/1.4 var(--font-heading), sans-serif; letter-spacing: .12em;
    color: var(--color-accent-700); min-width: 46px; }
  [data-subitem] > b { font-weight: 400; font-size: 14px; }
  [data-subitem] > s { text-decoration: none; margin-left: auto; font-size: 11px; letter-spacing: .06em;
    color: color-mix(in srgb, var(--color-text) 45%, transparent); }


  /* 视频教程：系列色（PDA 暖 / 云平台冷，与片子一致）、系列卡、每期卡 */
  [data-series] { --s-ink: var(--color-accent-700); --s-tint: var(--color-accent-100); }
  [data-series="pda"] { --s-ink: #9A7A5E; --s-tint: #EFEBE4; }
  [data-series="admin"] { --s-ink: #5F7C95; --s-tint: #E8ECEF; }
  [data-facts] { border-collapse: collapse; font-size: 13px; line-height: 1.5; }
  [data-facts] td { padding: 6px 0; vertical-align: top; border-top: 1px solid var(--color-divider); }
  [data-facts] td:first-child { width: 5em; padding-right: 12px; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
  [data-meta] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
  [data-chip] { display: inline-block; padding: 5px 11px; font-size: 12px; letter-spacing: .04em; line-height: 1.3;
    color: var(--s-ink); border: 1px solid color-mix(in srgb, var(--s-ink) 45%, transparent); background: var(--s-tint); }
  [data-back] { appearance: none; background: none; border: 0; padding: 0; margin-bottom: 18px; cursor: pointer;
    font: 600 13px/12px var(--font-heading), sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-300); }
  [data-back]:hover { color: #f2f2f3; }
  [data-ep] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  [data-ep] figure { margin: 0; position: relative; aspect-ratio: 16 / 9; background: var(--s-tint); }
  [data-ep] figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
  [data-dur] { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; font-size: 12px; line-height: 1.2;
    letter-spacing: .04em; color: #f2f2f3; background: rgba(29,45,61,.78); }
  [data-ep] > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
  [data-ep] [data-idx] { color: var(--s-ink); margin-bottom: 2px; }
  [data-ep] h3 { font-size: 18px; line-height: 1.3; margin: 0; }
  [data-ep] [data-who] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .04em; color: var(--s-ink); }
  [data-ep] [data-who]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-ink); }
  [data-ep] p { font-size: 14px; line-height: 1.65; margin: 2px 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
  /* B 站链接还没填（href 为空）时：按钮置灰、不可点，文案换成「链接整理中」 */
  [data-watch][href=""] { pointer-events: none; opacity: .45; }
  [data-watch] [data-soon] { display: none; }
  [data-watch][href=""] [data-ready] { display: none; }
  [data-watch][href=""] [data-soon] { display: inline; }
  .watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
  .watch-player { aspect-ratio: 16 / 9; background: #101820; }
  .watch-player iframe { display: block; width: 100%; height: 100%; border: 0; }
  .guide-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
  .guide-link { display: block; padding: 20px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); transition: border-color .2s, box-shadow .2s; }
  .guide-link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); text-decoration: none; }
  .guide-link[aria-current="page"] { border-color: var(--color-accent); background: var(--color-accent-100); }
  .guide-link img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 16px; }
  .guide-link h3 { font-size: 21px; line-height: 1.3; margin: 10px 0; }
  .guide-link p { font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 75%, transparent); margin: 0 0 16px; }
  .guide-link-action { font-size: 14px; color: var(--color-accent-700); }
  .home-video-meta { font-size: 12px; letter-spacing: .04em; color: var(--color-accent-700); }
  @media (max-width: 860px) { .guide-links { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 1180px) {
    [data-navlinks], [data-navcta] { display: none !important; }
    [data-burger] { display: inline-flex; }
    .nav > .seg { margin-left: auto !important; }
  }
  .watch-list { display: flex; flex-direction: column; gap: 8px; }
  .watch-item { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-divider); color: var(--color-text); font-size: 14px; line-height: 1.5; }
  .watch-item[aria-current="page"] { background: var(--color-accent-100); border-color: var(--color-accent); color: var(--color-accent-700); }
  .watch-item small { margin-left: auto; white-space: nowrap; opacity: .7; }
  .tutorial-entry { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 28px; padding: 18px; background: #f2f2f3; color: #1d2d3d; border-top: 3px solid var(--s-ink); }
  .tutorial-entry img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .tutorial-entry h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; }
  .tutorial-entry p { margin: 0; font-size: 13px; line-height: 1.6; color: #516170; }
  .tutorial-entry-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
  .tutorial-entry-actions .btn { min-height: 40px; padding-inline: 16px; font-size: 14px; }
  .tutorial-entry-actions > a:not(.btn) { color: #385c7e; font-size: 14px; }
  @media (max-width: 480px) { .tutorial-entry { grid-template-columns: 96px minmax(0, 1fr); padding: 14px; gap: 14px; } .tutorial-entry h2 { font-size: 18px; } }
  @media (max-width: 1080px) { .watch-layout { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 1080px) { [data-eps] { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 860px) { [data-eps] { grid-template-columns: 1fr !important; } }
  /* language switch */
  [data-langbtn] { appearance: none; border: 0; font: inherit; font-size: 12px; letter-spacing: 0.06em;
    cursor: pointer; padding: 6px 10px; background: none; color: inherit; }
  [data-langbtn="zh"] { background: var(--color-accent); color: var(--color-bg); }
  [data-langbtn] + [data-langbtn] { border-left: 1px solid var(--color-divider); }
  [data-lang] [data-langbtn] { background: none; color: inherit; }
  [data-lang="zh"] [data-langbtn="zh"], [data-lang="ru"] [data-langbtn="ru"],
  [data-lang="en"] [data-langbtn="en"] { background: var(--color-accent); color: var(--color-bg); }


  /* scroll reveal — only armed once the script runs */
  [data-rev-on] [data-rev]:not([data-in]) { opacity: 0; transform: translateY(10px); }
  [data-rev] { transition: opacity .55s ease, transform .55s ease; }
  @media (prefers-reduced-motion: reduce) { [data-rev-on] [data-rev]:not([data-in]) { opacity: 1; transform: none; } }

  /* lightbox */
  [data-lb-open] { display: none; }
  [data-lb-open="1"] { display: flex; }
  [data-cmp-open] { display: none; }
  [data-cmp-open="1"] { display: flex; }

  /* form sent */
  [data-sent="1"] [data-form-body] { display: none; }
  [data-form-ok] { display: none; }
  [data-sent="1"] [data-form-ok] { display: block; }
  [data-sending="1"] [data-form-body] button[type="submit"] { opacity: .6; pointer-events: none; }
  [data-form-error] { display: none; }
  [data-error="1"] [data-form-error] { display: block; }

  /* hero motion — the drawing assembles itself, then the reader scans it */
  @keyframes drawIn { from { stroke-dashoffset: var(--dash, 400); } to { stroke-dashoffset: 0; } }
  @keyframes beam { 0% { transform: translateY(0); opacity: 0; }
    8% { opacity: 1; } 92% { opacity: 1; }
    100% { transform: translateY(300px); opacity: 0; } }
  @keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  #hero-draw [data-draw] { stroke-dasharray: var(--dash, 400); animation: drawIn 1.1s cubic-bezier(.2,.7,.3,1) both; }
  #hero-draw [data-beam] { animation: beam 3.6s cubic-bezier(.55,0,.45,1) 1s infinite; }
  #hero-draw [data-blink] { animation: blink 2.4s ease-in-out 1.4s infinite; }
  [data-hero-rise] { animation: riseIn .7s cubic-bezier(.2,.7,.3,1) both; }
  @media (prefers-reduced-motion: reduce) {
    #hero-draw [data-draw], #hero-draw [data-beam], #hero-draw [data-blink], [data-hero-rise] { animation: none; stroke-dashoffset: 0; }
  }
  /* solution hero motion — every blueprint acts out its own line:
     PDA 扣扳机扫码 / 相机一次成像 / 产线运转与喷码，都按同一节拍循环 */
  @keyframes solRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes solBlip { 0% { opacity: 0 } 4% { opacity: 1 } 13% { opacity: 1 } 20%, 100% { opacity: 0 } }
  @keyframes solHold { 0% { opacity: 0 } 4% { opacity: var(--lit, .34) } 84% { opacity: var(--lit, .34) } 94%, 100% { opacity: 0 } }
  @keyframes solSweep { 0% { opacity: 0; transform: translateY(0) }
    4% { opacity: .9 }
    24% { opacity: .9; transform: translateY(var(--sweep, 50px)) }
    28%, 100% { opacity: 0; transform: translateY(var(--sweep, 50px)) } }
  @keyframes solMarch { to { stroke-dashoffset: -24 } }
  @keyframes solWipe { 0% { transform: translateX(-112px); opacity: 1 }
    18% { transform: translateX(0); opacity: 1 }
    24%, 100% { transform: translateX(0); opacity: 0 } }
  @keyframes solAlarm { 0%, 44% { opacity: 0 } 48% { opacity: 1 } 55% { opacity: .25 } 62% { opacity: 1 }
    69% { opacity: .25 } 76% { opacity: 1 } 88%, 100% { opacity: 0 } }
  @keyframes solBelt { from { transform: translateX(0) } to { transform: translateX(90px) } }
  [data-sol-svg] [data-sol] { animation-duration: var(--cyc, 4.4s); animation-timing-function: linear;
    animation-iteration-count: infinite; animation-delay: var(--d, 0s); animation-fill-mode: both; }
  [data-sol-svg] [data-sol="blip"] { animation-name: solBlip; }
  [data-sol-svg] [data-sol="hold"] { animation-name: solHold; }
  [data-sol-svg] [data-sol="sweep"] { animation-name: solSweep; }
  [data-sol-svg] [data-sol="wipe"] { animation-name: solWipe; }
  [data-sol-svg] [data-sol="march"] { animation-name: solMarch; animation-duration: 1.1s; animation-delay: 0s; }
  [data-sol-svg] [data-sol="alarm"] { animation-name: solAlarm; }
  [data-sol-svg] [data-sol="belt"] { animation-name: solBelt; animation-duration: var(--cyc, 3s); }
  [data-sol-svg] [data-solstep] { animation: solRise .6s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--rd, 0s); }
  @media (prefers-reduced-motion: reduce) {
    [data-sol-svg] [data-sol], [data-sol-svg] [data-solstep] { animation: none; }
  }
  /* inverted actions on the steel field */
  [data-btn="paper"] { background: var(--color-bg); color: var(--color-accent-900); border-color: var(--color-bg); }
  [data-btn="paper"]:hover { background: var(--color-accent-100); border-color: var(--color-accent-100); }
  [data-btn="wire"] { color: var(--color-bg); border-color: color-mix(in srgb, #f2f2f3 45%, transparent); }
  [data-btn="wire"]:hover { background: color-mix(in srgb, #f2f2f3 12%, transparent); border-color: var(--color-bg); }
  /* framed objects answer the pointer */
  [data-page] .blueprint { transition: border-color .25s ease; }
  [data-page] .blueprint:hover { border-color: color-mix(in srgb, var(--color-accent) 65%, transparent); }
  /* the steel band — framed objects and copy reverse onto the field */
  [data-band="steel"] .blueprint { border-color: color-mix(in srgb, #f2f2f3 30%, transparent); }
  [data-band="steel"] .blueprint > .corner { color: color-mix(in srgb, #f2f2f3 55%, transparent); }
  [data-band="steel"] .blueprint:hover { border-color: color-mix(in srgb, #f2f2f3 72%, transparent); }
  [data-band="steel"] p { color: color-mix(in srgb, #f2f2f3 76%, transparent) !important; }
  [data-band="steel"] .tutorial-entry p { color: #516170 !important; }
  [data-band="steel"] .tag-outline { border-color: var(--color-accent-300); color: var(--color-accent-300); }
  [data-band="steel"] .tag-accent { background: var(--color-accent-200); color: var(--color-accent-900); }
  [data-band="steel"] .btn-secondary { border-color: color-mix(in srgb, #f2f2f3 40%, transparent); color: var(--color-bg); }
  [data-band="steel"] .btn-secondary:hover { background: color-mix(in srgb, #f2f2f3 10%, transparent); }

  /* 03b — 选型对照表：默认高亮 POP·H 列，鼠标悬停到别的方案列时切换过去；
     各列之间任何时候都有一条分隔线，不必等悬停才看出边界。 */
  [data-cmp="1"] th[data-col], [data-cmp="1"] td[data-col] {
    border-left: 1px solid var(--color-divider);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  [data-cmp="1"] [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) [data-hcol="3"] {
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    border-left-color: var(--color-accent); border-right: 1px solid var(--color-accent);
  }
  [data-cmp="1"] thead [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) thead [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) thead [data-hcol="3"] {
    background: var(--color-accent-900); color: var(--color-bg); border-top: 2px solid var(--color-accent);
  }
  [data-cmp="1"] tbody tr:last-child [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) tbody tr:last-child [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) tbody tr:last-child [data-hcol="3"] {
    border-bottom: 2px solid var(--color-accent);
  }
  [data-cmp="1"] tfoot [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) tfoot [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) tfoot [data-hcol="3"] {
    border-top-color: var(--color-accent); border-bottom: 2px solid var(--color-accent);
  }
  [data-cmp="1"] tfoot [data-hcol="1"] button, [data-cmp="1"]:has([data-col="2"]:hover) tfoot [data-hcol="2"] button,
  [data-cmp="1"]:has([data-col="3"]:hover) tfoot [data-hcol="3"] button {
    background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent);
  }
  /* POP·H 列在别的列被悬停时退回普通样式（button 除外，见上面已单独处理其它列） */
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) [data-hcol="1"]:not(tfoot *) {
    background: none; border-left-color: var(--color-divider); border-right-color: var(--color-divider);
    border-top-color: transparent; color: color-mix(in srgb, var(--color-text) 60%, transparent);
  }
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) tbody tr:last-child [data-hcol="1"] {
    border-bottom-color: var(--color-divider);
  }
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) tfoot [data-hcol="1"] {
    border-top-color: var(--color-divider); border-bottom-color: var(--color-divider); background: none;
  }
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) tfoot [data-hcol="1"] button {
    background: none; color: var(--color-text); border-color: var(--color-divider);
  }
  @media (hover: none) {
    /* 触屏没有真正的 hover：始终显示默认高亮，不做切换 */
    [data-cmp="1"] [data-hcol="1"] { background: color-mix(in srgb, var(--color-accent) 7%, transparent) !important;
      border-left-color: var(--color-accent) !important; border-right-color: var(--color-accent) !important; }
    /* thead 那格的深底被上面压成了浅色，白字必须一并改回深色，否则表头不可读 */
    [data-cmp="1"] thead [data-hcol="1"] { color: var(--color-text) !important; }
  }

  /* 06 — the scroll-driven screen sequence: the machine docks right, the copy and the screen swap */
  [data-sticky] { position: sticky; top: 57px; height: calc(100vh - 57px); min-height: min(540px, calc(100vh - 57px));
    display: grid; align-items: center; }
  [data-laptop] { transition: transform .85s cubic-bezier(.2,.7,.3,1); will-change: transform; }
  [data-shot-col] { transition: opacity .5s ease, transform .5s ease; }
  [data-stage0] { transition: opacity .4s ease; }
  [data-stage="0"] [data-laptop] { transform: translateX(-33%) scale(1.42); }
  /* 矮窗口收一档，避免初始态被 sticky 视口高度裁掉 */
  @media (max-height: 900px) { [data-stage="0"] [data-laptop] { transform: translateX(-33%) scale(1.24); } }
  [data-stage="0"] [data-shot-col] { opacity: 0; transform: translateY(12px); }
  [data-stage="1"] [data-stage0] { opacity: 0; }
  [data-screen] { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
  [data-screen="1"] { opacity: 1; }
  [data-shot] [data-screen] { opacity: 0; }
  [data-shot="1"] [data-screen="1"], [data-shot="2"] [data-screen="2"],
  [data-shot="3"] [data-screen="3"], [data-shot="4"] [data-screen="4"],
  [data-shot="5"] [data-screen="5"], [data-shot="6"] [data-screen="6"] { opacity: 1; }
  [data-shot-text] { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
  [data-shot-text="1"] { opacity: 1; transform: none; pointer-events: auto; }
  [data-shot] [data-shot-text] { opacity: 0; transform: translateY(14px); pointer-events: none; }
  [data-shot="1"] [data-shot-text="1"], [data-shot="2"] [data-shot-text="2"],
  [data-shot="3"] [data-shot-text="3"], [data-shot="4"] [data-shot-text="4"],
  [data-shot="5"] [data-shot-text="5"], [data-shot="6"] [data-shot-text="6"] { opacity: 1; transform: none; pointer-events: auto; }
  [data-tick] { appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center; gap: 10px; font: inherit; font-size: 13px; color: inherit;
    white-space: nowrap; opacity: .45; transition: opacity .3s ease; }
  [data-tick]:hover { opacity: .8; }
  [data-tick] > i { display: block; width: 26px; height: 2px; background: currentColor; transition: width .35s ease; }
  [data-tick="1"] { opacity: 1; }
  [data-tick="1"] > i { width: 52px; }
  [data-shot] [data-tick] { opacity: .45; }
  [data-shot] [data-tick] > i { width: 26px; }
  [data-shot="1"] [data-tick="1"], [data-shot="2"] [data-tick="2"],
  [data-shot="3"] [data-tick="3"], [data-shot="4"] [data-tick="4"],
  [data-shot="5"] [data-tick="5"], [data-shot="6"] [data-tick="6"] { opacity: 1; }
  [data-shot="1"] [data-tick="1"] > i, [data-shot="2"] [data-tick="2"] > i,
  [data-shot="3"] [data-tick="3"] > i, [data-shot="4"] [data-tick="4"] > i,
  [data-shot="5"] [data-tick="5"] > i, [data-shot="6"] [data-tick="6"] > i { width: 52px; }
  /* 06b — 屏幕序列外的 MacBook 外壳：上盖 + 摄像头 + 底座 */
  [data-mac] { position: relative; padding: 11px 11px 13px; border-radius: 15px 15px 5px 5px;
    background: linear-gradient(174deg, var(--color-neutral-700), var(--color-neutral-900) 58%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #f2f2f3 26%, transparent),
      0 24px 46px -22px color-mix(in srgb, var(--color-text) 62%, transparent);
    transition: box-shadow .3s ease; }
  [data-mac]:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, #f2f2f3 34%, transparent),
      0 30px 56px -20px color-mix(in srgb, var(--color-text) 72%, transparent); }
  [data-mac-cam] { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: color-mix(in srgb, #f2f2f3 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1d1f20 55%, transparent); }
  [data-mac-screen] { appearance: none; border: 0; padding: 0; display: block; width: 100%;
    background: var(--color-neutral-900); border-radius: 4px; overflow: hidden; cursor: zoom-in; }
  [data-mac-base] { display: block; position: relative; width: 118%; height: 15px; margin-left: -9%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, var(--color-neutral-600), var(--color-neutral-800) 78%);
    box-shadow: 0 14px 22px -14px color-mix(in srgb, var(--color-text) 55%, transparent); }
  [data-mac-base]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: color-mix(in srgb, #1d1f20 45%, transparent); }
  [data-mac-base]::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 15%; height: 6px;
    margin-left: -7.5%; border-radius: 6px 6px 0 0;
    background: color-mix(in srgb, #1d1f20 40%, transparent); }
  /* 06b — 两台设备叠在同一格里，按镜头号交叉淡出淡入 */
  [data-devstack] { display: grid; }
  [data-devstack] > * { grid-area: 1 / 1; }
  [data-dev] { transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease;
    will-change: transform, opacity; }
  [data-dev="pda"] { opacity: 0; transform: translateY(30px) scale(.9); pointer-events: none;
    justify-self: center; width: clamp(170px, 42%, 250px); }
  [data-shot="2"] [data-dev="pda"], [data-shot="3"] [data-dev="pda"] {
    opacity: 1; transform: none; pointer-events: auto; }
  [data-shot="2"] [data-dev="mac"], [data-shot="3"] [data-dev="mac"] {
    opacity: 0; transform: translateY(-24px) scale(.94); filter: blur(3px); pointer-events: none; }

  /* PDA 外壳：车间在用的东集 AUTOID 工业 PDA 实拍图（已去背）。
     屏幕区域由程序测出：left 11.852% / top 10.236% / w 74.444% / h 52.362%。
     截图比例 480:696 比屏幕框 402:665 更宽，因此按宽度贴齐顶部，
     下方留白用截图自身的背景色 #f4f7fb 补足，视觉上像屏幕内容自然延续。 */
  [data-pda] { position: relative; display: block;
    filter: drop-shadow(0 26px 38px color-mix(in srgb, var(--color-text) 45%, transparent)); }
  [data-pda-frame] { display: block; width: 100%; height: auto; position: relative; z-index: 1;
    pointer-events: none; }
  [data-pda-screen] { appearance: none; border: 0; padding: 0; margin: 0; cursor: zoom-in;
    position: absolute; z-index: 2; overflow: hidden; background: #f4f7fb;
    left: 11.852%; top: 10.236%; width: 74.444%; height: 52.362%; }

  @media (max-width: 860px) {
    [data-stage="0"] [data-laptop] { transform: none; }
    [data-stage="0"] [data-shot-col] { opacity: 1; transform: none; }
  }
  /* solution cards */
  [data-customer-grid] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  [data-customer-grid] > a { display: flex; flex-direction: column; min-width: 0; padding: 26px; color: var(--color-text); text-decoration: none; }
  [data-customer-grid] h3 { font-size: 21px; line-height: 1.4; margin: 14px 0 8px; }
  [data-customer-grid] p { line-height: 1.8; font-size: 15px; margin: 0 0 20px; }
  [data-customer-grid] .customer-number { font-size: 22px; color: var(--color-accent-600); }
  [data-customer-grid] .customer-more { margin-top: auto; font-size: 14px; line-height: 1.6; color: var(--color-accent-600); }
  [data-customer-grid] > a:hover, [data-customer-grid] > a:focus-visible { border-color: var(--color-accent-600); }
  @media (max-width: 860px) { [data-customer-grid] { grid-template-columns: minmax(0, 1fr); } }
  [data-product-grid] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
  [data-product-grid] > [data-sol] { min-width: 0; overflow-wrap: anywhere; }
  [data-product-grid] > [data-sol] > svg { height: 112px !important; flex-shrink: 0; }
  @media (max-width: 1080px) { [data-product-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { [data-product-grid] { grid-template-columns: minmax(0, 1fr); } }
  [data-sol="1"] { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; padding: 20px; background: none; }
  [data-sol="1"]:hover { border-color: color-mix(in srgb, #f2f2f3 75%, transparent); }
  [data-solmore] { display: block; margin-top: auto; padding-top: 18px; font: 600 13px/1 var(--font-heading), sans-serif;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-200); }
  [data-sol="1"]:hover [data-solmore] { color: #f2f2f3; }
  /* reading progress */
  #scroll-bar { width: var(--scroll-pct, 0%); }
  .shots { scrollbar-width: thin; }
  @media (min-width: 1080px) { [data-hero-split] { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; } }
  /* 深色带：整段反相，靠重绑 design token 让段内所有 var() 自动跟着走 */
  [data-invert] { background: var(--color-accent-900); color: var(--color-bg);
    --color-text: #f2f2f3;
    --color-divider: color-mix(in srgb, #f2f2f3 22%, transparent);
    --color-accent: var(--color-accent-300);
    --color-accent-100: color-mix(in srgb, #f2f2f3 10%, transparent);
    --color-accent-400: color-mix(in srgb, #f2f2f3 48%, transparent);
    --color-accent-700: var(--color-accent-300);
    --color-accent-800: #f2f2f3; }
  /* 三行标题：俄文/英文比中文长得多，单独定字号与行宽，保持和中文一样的 3 行 */
  [data-lang="ru"] [data-hero-h1] { font-size: clamp(16px, 2.2vw, 25px) !important; max-width: none !important; }
  [data-lang="en"] [data-hero-h1] { font-size: clamp(24px, 3.4vw, 48px) !important; max-width: none !important; }
  /* 规格表：细线分隔的能力网格，替代成排的描线卡片 */
  [data-spec] { display: grid; gap: 0; border-top: 1px solid var(--color-divider); }
  [data-spec] > * { padding: 22px clamp(14px,1.6vw,26px) 26px; border-bottom: 1px solid var(--color-divider); }
  [data-spec="4"] { grid-template-columns: repeat(4, 1fr); }
  [data-spec="3"] { grid-template-columns: repeat(3, 1fr); }
  [data-spec="2"] { grid-template-columns: repeat(2, 1fr); }
  [data-spec="4"] > *:not(:nth-child(4n+1)), [data-spec="3"] > *:not(:nth-child(3n+1)),
  [data-spec="2"] > *:not(:nth-child(2n+1)) { border-left: 1px solid var(--color-divider); }
  [data-spec="4"] > *:nth-child(4n+1), [data-spec="3"] > *:nth-child(3n+1),
  [data-spec="2"] > *:nth-child(2n+1) { padding-left: 0; }
  /* 流程轨道：编号步骤连成一条线，节点用底色挖断细线 */
  [data-track] { display: grid; column-gap: 0; row-gap: 34px; }
  [data-track="6"] { grid-template-columns: repeat(6, 1fr); }
  [data-track="4"] { grid-template-columns: repeat(4, 1fr); }
  [data-track] > * { position: relative; padding: 28px clamp(14px,1.8vw,30px) 0 0; }
  [data-track] > *::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--color-divider); }
  [data-track] > *::after { content: ""; position: absolute; left: 0; top: -4px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent-700);
    box-shadow: 0 0 0 5px var(--color-bg); }
  /* 两种版式共用的序号 */
  [data-idx] { display: block; font: 600 12px/1 var(--font-body); letter-spacing: .14em;
    color: var(--color-accent-700); margin-bottom: 12px; }
  @media (max-width: 1080px) {
    [data-spec="4"], [data-spec="3"] { grid-template-columns: repeat(2, 1fr); }
    [data-track="6"] { grid-template-columns: repeat(3, 1fr); }
    [data-spec="4"] > *, [data-spec="3"] > * { border-left: 1px solid var(--color-divider);
      padding-left: clamp(14px,1.6vw,26px); }
    [data-spec="4"] > *:nth-child(2n+1), [data-spec="3"] > *:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  }
  @media (max-width: 860px) {
    [data-spec] { grid-template-columns: 1fr !important; }
    [data-spec] > * { border-left: 0 !important; padding-left: 0 !important; }
    [data-track] { grid-template-columns: 1fr !important; }
    [data-track] > * { padding-right: 0; padding-bottom: 24px; }
  }
  /* 产品概览 01 —— 四步转码流程：内容格与箭头交替占列，窄屏收成两列并撤掉箭头 */
  [data-flow] { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    column-gap: clamp(6px,1vw,16px); }
  [data-flow] > i { align-self: start; margin-top: 30px; font-style: normal; line-height: 0;
    color: color-mix(in srgb, var(--color-accent) 65%, transparent); }
  /* 产品概览 02 —— 三层级：层级名 / 图示 / 说明三列；连接线自成一行，只占中间列，
     因此层级行与连接行必须共用同一套列宽 */
  [data-level], [data-link] { display: grid;
    grid-template-columns: minmax(0,150px) minmax(0,1.15fr) minmax(0,1.25fr);
    column-gap: clamp(16px,2.4vw,40px); align-items: center; }
  [data-link] > * { grid-column: 2; }
  @media (max-width: 1080px) { [data-cells] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-strip] > div { padding: 18px !important; }
    [data-flow] { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    [data-flow] > i { display: none; } }
  @media (max-width: 860px) { [data-cells] { grid-template-columns: 1fr !important; }
    [data-photos] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(3, 150px) !important; }
    [data-photos] > figure:first-child { grid-column: span 2 !important; grid-row: span 1 !important; }
    [data-split] { grid-template-columns: 1fr !important; }
    [data-flow] { grid-template-columns: 1fr !important; }
    [data-level] { grid-template-columns: 1fr !important; row-gap: 10px; text-align: left; }
    [data-link] { display: none !important; }
    /* 横排导航与「预约演示」在窄屏放不下，交给汉堡抽屉（抽屉里两者都在） */
    [data-navlinks] { display: none !important; }
    [data-navcta] { display: none !important; }
    [data-burger] { display: inline-flex; }
    /* 01 转码流程：窄屏单列后四步之间的留白按桌面版走会拉出一屏多的空档，整体收紧 */
    [data-sec="flow"] [data-split] { gap: 16px !important; }
    [data-sec="flow"] hr { margin-bottom: 20px !important; }
    [data-flow] { row-gap: 16px !important; }
    [data-flow] > div > div:first-child { height: 44px !important; }
    [data-flow] > div > h3 { margin-top: 10px !important; }
    [data-flow] > div > div:nth-of-type(2) { margin-top: 8px !important; }
    [data-flow] > div > p { margin-top: 8px !important; }
    /* 03 滚动剧场：窄屏内容远矮于 100vh，居中会在上下各留一大块空白，改为贴顶按内容高 */
    [data-sticky] { height: auto !important; min-height: 0 !important; align-items: start !important; }
    /* 两台设备叠在同一格，格高按更高的 PDA 算；窄屏 mac 当主角时下方就空出一大截。
       把 PDA 脱出文档流(仍靠 margin 居中，不动 transform，交叉淡入淡出照旧)，格高只跟随当前 mac */
    [data-devstack] { position: relative; }
    [data-dev="pda"] { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; } }
  /* 采集机台 slider：两张实拍图同尺寸裁切、交叉淡入淡出 */
  [data-solsslide] figure[data-solsimg] { opacity: 0; transition: opacity .5s ease; }
  [data-solsslide="0"] figure[data-solsimg="0"] { opacity: 1; }
  [data-solsslide="1"] figure[data-solsimg="1"] { opacity: 1; }
  [data-solsdot] { appearance: none; border: 1px solid color-mix(in srgb, #fff 55%, transparent); background: color-mix(in srgb, #000 25%, transparent); padding: 0; width: 8px; height: 8px; border-radius: 999px; cursor: pointer; transition: width .25s ease, background .25s ease; }
  [data-solsslide="0"] [data-solsdot="0"], [data-solsslide="1"] [data-solsdot="1"] { width: 22px; border-radius: 4px; background: #fff; }

/* PopCode Signal — navy foundation, coral actions, ice-blue data accents. */
html[data-theme] {
  color-scheme: dark;
  --brand-coral: #ff6f61;
  --brand-ink: #1f2340;
  --signal-blue: #7bdde8;
  --text-muted: #a9b4cc;
  --color-bg: #090d1a;
  --color-surface: #121a2d;
  --color-text: #f2f5ff;
  --color-accent: #ff6f61;
  --color-accent-2: #7bdde8;
  --color-divider: #ffffff1c;
  --color-accent-100: #261d2b;
  --color-accent-200: #ffd2c9;
  --color-accent-300: #ffae9f;
  --color-accent-400: #ff9788;
  --color-accent-500: #ff8374;
  --color-accent-600: #ffa393;
  --color-accent-700: #ff9c8d;
  --color-accent-800: #ffd2c9;
  --color-accent-900: #11172a;
  --color-accent-2-100: #122937;
  --color-accent-2-200: #c7f6f8;
  --color-accent-2-300: #a0e9ef;
  --color-accent-2-400: #7bdde8;
  --color-accent-2-500: #68c9d7;
  --color-accent-2-600: #83dce6;
  --color-accent-2-700: #a0e9ef;
  --color-accent-2-800: #c7f6f8;
  --color-accent-2-900: #101e30;
  --color-neutral-100: #141c2e;
  --color-neutral-200: #1b263b;
  --color-neutral-300: #c6cde0;
  --color-neutral-400: #a8b3ca;
  --color-neutral-500: #8490ac;
  --color-neutral-600: #606c88;
  --color-neutral-700: #39445e;
  --color-neutral-800: #212c42;
  --color-neutral-900: #060a14;
  --font-heading: "Avenir Next", "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Inter", "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading-weight: 650;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 4px 16px #00000020;
  --shadow-md: 0 16px 40px #00000030;
  --shadow-lg: 0 28px 80px #00000050;
}

html[data-theme] body {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 { font-weight: 650; text-wrap: balance; }
html[data-theme] a { text-underline-offset: 5px; }
html[data-theme] :focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 5px; }
html[data-theme] ::selection { color: #fff; background: #ac4038; }

/* Navigation and shared controls. */
html[data-theme] .nav {
  min-height: 72px;
  background: #090d1aeb !important;
  border-bottom: 1px solid var(--color-divider);
  backdrop-filter: blur(20px) saturate(140%) !important;
}
html[data-theme] .brand-logo { width: 170px; height: 36px; }
html[data-theme] .nav-brand { margin-right: 0; }
html[data-theme] [data-nav] { font-size: 13px; font-weight: 550; padding-block: 12px; }
html[data-theme] [data-submenu] {
  background: #11182af5;
  border-radius: 14px;
  padding: 8px;
  min-width: 284px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
}
html[data-theme] [data-subitem] { border-radius: 8px; padding: 12px; }
html[data-theme] [data-subitem]:hover { background: #ff6f6112; color: #fff; }
html[data-theme] .seg { border-radius: 10px; padding: 3px; background: #ffffff05; }
html[data-theme] [data-langbtn] { border: 0; border-radius: 6px; font-size: 11px; padding: 5px 8px; }
html[data-theme] [data-burger],
html[data-theme] [data-drawer-x] { border-radius: 9px; }
html[data-theme] [data-drawer] { background: #0e1527 !important; border-right: 1px solid var(--color-divider); }
html[data-theme] #scroll-bar { background: linear-gradient(90deg, #ff6f61, #ffb299) !important; box-shadow: 0 0 12px #ff6f6170; }

html[data-theme] .btn {
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
html[data-theme] .btn-primary,
html[data-theme] [data-btn="paper"] {
  background: var(--brand-coral);
  border-color: var(--brand-coral);
  color: #171b30;
  box-shadow: 0 6px 24px #ff6f6122, inset 0 1px 0 #ffffff30;
}
html[data-theme] .btn-primary:hover,
html[data-theme] [data-btn="paper"]:hover {
  color: #171b30;
  background: #ff9282;
  border-color: #ff9282;
  box-shadow: 0 8px 32px #ff6f6138;
  text-decoration: none;
}
html[data-theme] .btn-secondary,
html[data-theme] [data-btn="wire"] {
  color: var(--color-text);
  background: #ffffff04;
  border-color: #ffffff30;
}
html[data-theme] .btn-secondary:hover,
html[data-theme] [data-btn="wire"]:hover { background: #ffffff0b; border-color: #ffffff60; text-decoration: none; }
html[data-theme] .nav .btn { min-height: 38px; padding: 9px 16px; font-size: 13px; }

/* Hero: luminous workbench with the existing animated capture diagram. */
html[data-theme] .home-hero {
  color: var(--color-text) !important;
  background: #0b1020 !important;
  border-bottom: 1px solid var(--color-divider);
}
html[data-theme] .home-hero > div:first-child { opacity: .13 !important; mask-image: linear-gradient(#000, transparent); }
html[data-theme] .home-hero > div:nth-child(2) {
  background: radial-gradient(ellipse at 84% 34%, #ff6f611a, transparent 53%), radial-gradient(ellipse at 48% 100%, #3b71b51c, transparent 58%) !important;
}
.hero-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 32px; }
.hero-label { display: inline-flex; align-items: center; gap: 10px; color: #ffb4a7; font-size: 11px; letter-spacing: .12em; }
.hero-label > i { width: 6px; height: 6px; flex: none; background: var(--brand-coral); border-radius: 50%; box-shadow: 0 0 16px #ff6f6180; }
.hero-edition { font-size: 9px; letter-spacing: .15em; color: #8793b0; }
html[data-theme] .home-hero [data-hero-split] { min-height: 530px; padding-block: 66px 76px !important; gap: clamp(28px, 4vw, 64px) !important; }
html[data-theme] [data-hero-h1] { font-size: clamp(34px, 4.1vw, 54px) !important; line-height: 1.2 !important; letter-spacing: -.025em !important; }
html[data-theme] [data-hero-h1] [data-l] > span { color: var(--brand-coral) !important; }
html[data-theme] [data-lang="en"] [data-hero-h1] { font-size: clamp(29px, 3.2vw, 44px) !important; }
html[data-theme] [data-lang="ru"] [data-hero-h1] { font-size: clamp(25px, 2.45vw, 34px) !important; }
html[data-theme] .home-hero [data-hero-rise] > p { color: #afb9d0 !important; font-size: 15px !important; line-height: 1.95 !important; }
html[data-theme] .hero-console {
  position: relative;
  padding: 24px !important;
  border: 1px solid #ffb9ac38 !important;
  border-radius: 24px;
  background: linear-gradient(145deg, #20263cf0, #101a2bf0 70%);
  box-shadow: 0 24px 80px #00000040, 0 0 64px #ff6f610c, inset 0 1px 0 #ffffff13;
}
.console-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid #ffffff12; color: #afbad2; font-size: 10px; letter-spacing: .12em; }
.console-dots { display: flex; gap: 5px; margin-right: auto; }
.console-dots i { width: 5px; height: 5px; background: #46506b; border-radius: 50%; }
.console-dots i:first-child { background: #ff8575; }
.console-signal { margin-left: auto; width: 22px; height: 8px; background: repeating-linear-gradient(90deg, #7bdde8 0 2px, transparent 2px 5px); opacity: .8; }
html[data-theme] #hero-draw { filter: drop-shadow(0 0 8px #7bdde812); }
html[data-theme] #hero-draw > rect:first-of-type { fill: #7bdde8; opacity: .2; }
html[data-theme] #hero-draw g[clip-path="url(#hero-print)"] { fill: #c2f4f7; }

/* Replace light/dark inversions with two complementary dark surfaces. */
html[data-theme] [data-invert] {
  --color-text: #f2f5ff;
  --color-divider: #ffffff1c;
  --color-accent: #ff6f61;
  --color-accent-100: #261d2b;
  --color-accent-400: #ff9788;
  --color-accent-700: #ff9c8d;
  --color-accent-800: #ffd2c9;
}
html[data-theme] [data-band="steel"] {
  color: var(--color-text) !important;
  background: linear-gradient(115deg, #11182c, #101729 60%, #141b2e) !important;
  border-block: 1px solid #ffffff0c;
}
html[data-theme] [data-band="steel"] > div[style*="pointer-events:none"] { opacity: .12 !important; }
html[data-theme] [data-band="steel"] b { color: var(--color-text) !important; }
html[data-theme] [data-band="steel"] p { color: #b4bed3 !important; }
html[data-theme] [data-band="steel"] .tag-accent { background: #ff6f6115; color: #ffae9f; }
html[data-theme] [data-back] { color: var(--text-muted); }
html[data-theme] [data-back]:hover { color: #fff; }

/* Shared diagram palette: retain geometry and animations. */
html[data-theme] [data-page] svg [stroke="#94bce3"],
html[data-theme] [data-page] svg [stroke="#b5d9fd"] { stroke: var(--signal-blue); }
html[data-theme] [data-page] svg [fill="#b5d9fd"],
html[data-theme] [data-page] svg [fill="#94bce3"] { fill: var(--signal-blue); }
html[data-theme] [data-page] svg [stroke="#f2f2f3"] { stroke: #e1e7fa; }
html[data-theme] [data-page] svg [stroke="#eef6ff"] { stroke: #ff9c8d; }
html[data-theme] [data-page] svg [fill="#eef6ff"] { fill: #ff9c8d; }

/* Cards, workflow nodes, and video surfaces. */
.video-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; }
.video-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #d65343; background: #fffffff0; border: 1px solid #ffd8cf; box-shadow: 0 3px 12px #24365714; backdrop-filter: blur(6px); transition: background .2s, color .2s, box-shadow .2s; pointer-events: none; }
.cover-play svg { margin-left: 2px; }
.cover-play-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-theme] .video-cover:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -4px; border-radius: inherit; }
.video-cover:hover .cover-play, .video-cover:focus-visible .cover-play { color: #c44838; background: #fff0eb; border-color: #ffad9c; box-shadow: 0 4px 16px #ff6f6126; }
.video-cover-compact { border-radius: 8px; }
.video-cover-compact .cover-play { width: 38px; height: 38px; }
.video-cover-compact .cover-play svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .cover-play { transition: none; } }
html[data-theme] .blueprint { border-radius: 18px; border-color: var(--color-divider); }
html[data-theme] .blueprint > .corner { display: none; }
html[data-theme] [data-page] .blueprint:hover { border-color: #ff6f6166; }
html[data-theme] [data-sol="1"],
html[data-theme] [data-ep],
html[data-theme] .guide-link {
  background: linear-gradient(145deg, #182137aa, #11192bf5);
  border: 1px solid #ffffff20;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #ffffff06;
  transition: border-color .22s, background .22s, box-shadow .22s, transform .22s;
}
html[data-theme] [data-sol="1"] { padding: 26px; }
html[data-theme] .guide-link { display: flex; flex-direction: column; padding: 18px; }
html[data-theme] .guide-link img { border-radius: 10px; margin-bottom: 22px; }
html[data-theme] .guide-link h3 { font-size: 20px; margin: 10px 0 12px; }
html[data-theme] .guide-link p { color: var(--text-muted); line-height: 1.9; }
html[data-theme] .guide-link-action { margin-top: auto; padding-top: 12px; color: #ffab9c; }
html[data-theme] .home-video-meta { color: #8291b1; font-size: 11px; letter-spacing: .06em; }
html[data-theme] [data-sec="home-guides"] { padding-top: 76px !important; padding-bottom: 40px !important; }
html[data-theme] [data-sec="home-guides"] > h2 { font-size: clamp(26px, 3vw, 36px) !important; margin-bottom: 32px !important; }
html[data-theme] [data-flow] > div { padding: 22px 18px; background: #ffffff03; border: 1px solid var(--color-divider); border-radius: 16px; }
html[data-theme] [data-flow] > i { margin-top: 52px; color: #ff9c8d; }
html[data-theme] [data-track] > *::after { background: var(--brand-coral); box-shadow: 0 0 0 5px var(--color-bg), 0 0 18px #ff6f6140; }
html[data-theme] [data-level] > div:first-child { border-radius: 8px; }
html[data-theme] [data-series="pda"] { --s-ink: #ffad98; --s-tint: #2b2030; }
html[data-theme] [data-series="admin"] { --s-ink: #9de6ed; --s-tint: #152c3a; }
html[data-theme] [data-chip] { border-radius: 100px; }
html[data-theme] [data-ep] > div { padding: 22px; gap: 10px; }
html[data-theme] [data-ep] h3 { line-height: 1.55; }
html[data-theme] [data-dur] { border-radius: 6px; background: #090d1adc; }
html[data-theme] .tutorial-entry {
  background: #182239;
  color: var(--color-text);
  border: 1px solid #ffffff22;
  border-left: 3px solid var(--s-ink);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
html[data-theme] .tutorial-entry img { border-radius: 8px; }
html[data-theme] .tutorial-entry p,
html[data-theme] [data-band="steel"] .tutorial-entry p { color: #b4bed3 !important; }
html[data-theme] .tutorial-entry-actions > a:not(.btn) { color: var(--s-ink); }
html[data-theme] .watch-player { overflow: hidden; border-radius: 18px; border: 1px solid #ffffff26; background: #050813; box-shadow: var(--shadow-lg); }
html[data-theme] .watch-item { background: #11192b; border-radius: 10px; padding: 14px; }
html[data-theme] .watch-item[aria-current="page"] { background: #ff6f6115; color: #ffb4a7; border-color: #ff6f6160; }
html[data-theme] [data-page="guide"],
html[data-theme] [data-page="watch"] { background: radial-gradient(ellipse at 100% 0, #ff6f610a, transparent 45%); }

/* Forms, selection matrix, and footer are part of the same theme. */
html[data-theme] .input { border-radius: 10px; min-height: 46px; padding: 11px 14px; background: #10182a; }
html[data-theme] .input:focus-visible { border-color: #ff9788; outline: 3px solid #ff6f6120; outline-offset: 0; }
html[data-theme] .input::placeholder { color: #74829e; }
html[data-theme] textarea.input { min-height: 132px; }
html[data-theme] [data-cmp-open] > div { border-radius: 20px; box-shadow: var(--shadow-lg); }
html[data-theme] [data-cmp] { border-radius: 14px; }
html[data-theme] [data-cmp="1"] thead [data-hcol] { color: var(--color-text); }
html[data-theme] [data-cmp="1"] thead [data-hcol="1"],
html[data-theme] [data-cmp="1"]:has([data-col="2"]:hover) thead [data-hcol="2"],
html[data-theme] [data-cmp="1"]:has([data-col="3"]:hover) thead [data-hcol="3"] { background: #ff6f611c; }
html[data-theme] footer { background: #060a14; border-top: 1px solid #ff6f6122 !important; }
html[data-theme] footer > div { padding-top: 52px !important; }
html[data-theme] img[src^="assets/qr/"] { background: #fff !important; border: 5px solid #fff; border-radius: 8px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-theme] .guide-link:hover,
  html[data-theme] [data-sol="1"]:hover { transform: translateY(-4px); border-color: #ff9c8d70; box-shadow: 0 16px 36px #00000035; }
  html[data-theme] .btn:hover { transform: translateY(-1px); }
}
@media (min-width: 861px) {
  html[data-theme] [data-sticky] { top: 72px; height: calc(100vh - 72px); min-height: min(540px, calc(100vh - 72px)); }
}
@media (max-width: 1320px) {
  html[data-theme] [data-navlinks],
  html[data-theme] [data-navcta] { display: none !important; }
  html[data-theme] [data-burger] { display: inline-flex; }
  html[data-theme] .nav > .seg { margin-left: auto !important; }
  .hero-edition { display: none; }
  html[data-theme] .nav-brand { margin-right: auto; }
}
@media (max-width: 860px) {
  html[data-theme] .home-hero [data-hero-split] { min-height: 0; padding-block: 40px 48px !important; gap: 40px !important; }
  html[data-theme] [data-hero-h1] { font-size: clamp(32px, 6.7vw, 50px) !important; }
  html[data-theme] [data-lang="en"] [data-hero-h1] { font-size: clamp(27px, 5.8vw, 42px) !important; }
  html[data-theme] [data-lang="ru"] [data-hero-h1] { font-size: clamp(21px, 4.6vw, 32px) !important; }
  html[data-theme] .hero-console { max-width: 520px !important; padding: 20px !important; border-radius: 18px; }
  html[data-theme] [data-flow] > div { padding: 22px !important; }
  html[data-theme] [data-sec="home-guides"] { padding-top: 48px !important; padding-bottom: 12px !important; }
  html[data-theme] .watch-player { border-radius: 12px; }
}
@media (max-width: 480px) {
  html[data-theme] .nav { min-height: 64px; padding-inline: 14px !important; gap: 8px !important; }
  html[data-theme] .nav .brand-logo { width: 112px; height: 28px; }
  html[data-theme] .nav [data-langbtn] { padding-inline: 7px; }
  .hero-eyebrow { padding-top: 24px; }
  .hero-label { font-size: 10px; letter-spacing: .08em; }
  .console-heading { gap: 8px; margin-bottom: 18px; font-size: 9px; }
  html[data-theme] .home-hero [data-hero-rise] > p { font-size: 14px !important; }
  html[data-theme] .guide-link { padding: 16px; }
  html[data-theme] .btn { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .btn,
  html[data-theme] .guide-link,
  html[data-theme] [data-sol="1"] { transition: none; }
}

/* Preserve intrinsic image proportions while reserving layout space. */
img[width][height] { height: auto; }

/* Shared theme control; the light palette overrides Signal's shared layout. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-divider); border-radius: 10px; background: transparent; color: var(--color-text); cursor: pointer; }
.theme-toggle:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-icon-moon { display: block; }
.theme-icon-sun { display: none; }
html[data-theme="signal"] .theme-icon-sun { display: block; }
html[data-theme="signal"] .theme-icon-moon { display: none; }
html[data-theme] .drawer-section-label { display: block; cursor: default; }
html[data-theme] .nav > .seg { margin-left: 0 !important; flex-shrink: 0; }

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-text: #1f2340;
  --text-muted: #59657c;
  --signal-blue: #248296;
  --color-divider: #24365720;
  --color-accent: #ff6f61;
  --color-accent-100: #fff0eb;
  --color-accent-200: #984a40;
  --color-accent-300: #bd483a;
  --color-accent-400: #e96958;
  --color-accent-500: #f47765;
  --color-accent-600: #b74336;
  --color-accent-700: #ab3f33;
  --color-accent-800: #78392f;
  --color-accent-900: #edf2f8;
  --color-accent-2: #248296;
  --color-accent-2-100: #eaf5f8;
  --color-accent-2-200: #d8edf2;
  --color-accent-2-300: #448c9b;
  --color-accent-2-400: #348798;
  --color-accent-2-500: #2c7f90;
  --color-accent-2-600: #236d7f;
  --color-accent-2-700: #25657b;
  --color-accent-2-800: #1c5265;
  --color-accent-2-900: #e9f1f8;
  --color-neutral-100: #eef2f7;
  --color-neutral-200: #e4eaf2;
  --color-neutral-300: #cbd4e2;
  --color-neutral-400: #9daabe;
  --color-neutral-500: #7b89a0;
  --color-neutral-600: #5e6d87;
  --color-neutral-700: #43516a;
  --color-neutral-800: #2b354d;
  --color-neutral-900: #182036;
  --shadow-sm: 0 4px 16px #26395708;
  --shadow-md: 0 16px 40px #2639570e;
  --shadow-lg: 0 28px 80px #26395718;
}
html[data-theme="light"] ::selection { color: #1f2340; background: #ffd7cf; }
html[data-theme="light"] .nav { background: #ffffffed !important; box-shadow: 0 4px 20px #22365904; }
html[data-theme="light"] [data-submenu] { background: #fffffffa; }
html[data-theme="light"] [data-subitem]:hover { background: #fff0eb; color: #1f2340; }
html[data-theme="light"] .seg { background: #f0f3f8; }
html[data-theme="light"] [data-lang="zh"] [data-langbtn="zh"],
html[data-theme="light"] [data-lang="ru"] [data-langbtn="ru"],
html[data-theme="light"] [data-lang="en"] [data-langbtn="en"] { color: #1f2340; }
html[data-theme="light"] [data-drawer] { background: #fff !important; }
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] [data-btn="wire"] { color: #2f3854; border-color: #c6cfde; background: #ffffffa8; }
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] [data-btn="wire"]:hover { background: #fff; border-color: #e18375; }

/* Bright, airy hero with a softly tinted workbench. */
html[data-theme="light"] .home-hero { background: #f7f9fc !important; }
html[data-theme="light"] .home-hero > div:first-child { opacity: .4 !important; background-image: linear-gradient(#48658d0c 1px, transparent 1px), linear-gradient(90deg, #48658d0c 1px, transparent 1px) !important; background-size: 72px 72px; }
html[data-theme="light"] .home-hero > div:nth-child(2) { background: radial-gradient(ellipse at 86% 28%, #ffded078, transparent 52%), radial-gradient(ellipse at 36% 100%, #dcecf77a, transparent 60%) !important; }
html[data-theme="light"] .hero-label { color: #a2473b; }
html[data-theme="light"] .hero-edition { color: #78849a; }
html[data-theme="light"] [data-hero-h1] [data-l] > span { color: #c14d3e !important; }
html[data-theme="light"] .home-hero [data-hero-rise] > p { color: #59657c !important; }
html[data-theme="light"] .hero-console { background: linear-gradient(145deg, #ffffffeb, #f1f5fbf5) !important; border-color: #c8d3e3 !important; box-shadow: 0 24px 70px #37507712, 0 0 60px #ff6f6108, inset 0 1px 0 #fff; }
html[data-theme="light"] .console-heading { border-color: #24365718; color: #5e6a81; }
html[data-theme="light"] .console-dots i { background: #c2ccdc; }
html[data-theme="light"] .console-dots i:first-child { background: #ff8575; }
html[data-theme="light"] .console-signal { background: repeating-linear-gradient(90deg, #248296 0 2px, transparent 2px 5px); }
html[data-theme="light"] #hero-draw { filter: none; }
html[data-theme="light"] #hero-draw > rect:first-of-type { fill: #a8d4df; opacity: .3; }
html[data-theme="light"] #hero-draw g[clip-path="url(#hero-print)"] { fill: #334e70; }

html[data-theme="light"] [data-invert] {
  --color-text: #1f2340;
  --color-divider: #24365720;
  --color-accent: #ff6f61;
  --color-accent-100: #fff0eb;
  --color-accent-400: #e96958;
  --color-accent-700: #ab3f33;
  --color-accent-800: #78392f;
}
html[data-theme="light"] [data-band="steel"] { background: linear-gradient(120deg, #edf2f8, #f2f6fb 60%, #eef4f8) !important; border-color: #2436570c; }
html[data-theme="light"] [data-band="steel"] > div[style*="pointer-events:none"] { opacity: .2 !important; background-image: linear-gradient(#48658d16 1px, transparent 1px), linear-gradient(90deg, #48658d16 1px, transparent 1px) !important; background-size: 72px 72px; }
html[data-theme="light"] [data-band="steel"] p { color: #546079 !important; }
html[data-theme="light"] [data-band="steel"] .tag-accent { color: #a3483b; background: #ffe8e0; }
html[data-theme="light"] [data-back]:hover { color: #ab3f33; }
html[data-theme="light"] [data-page] svg [stroke="#f2f2f3"] { stroke: #334e70; }
html[data-theme="light"] [data-page] svg [stroke="#eef6ff"] { stroke: #d65f50; }
html[data-theme="light"] [data-page] svg [fill="#eef6ff"] { fill: #d65f50; }

html[data-theme="light"] [data-sol="1"],
html[data-theme="light"] [data-ep],
html[data-theme="light"] .guide-link { background: #fff; border-color: #dae1eb; box-shadow: 0 6px 24px #26395706; }
html[data-theme="light"] [data-band="steel"] .blueprint { border-color: #cbd6e4; }
html[data-theme="light"] [data-page] .blueprint:hover { border-color: #ec9e91; }
html[data-theme="light"] [data-solmore],
html[data-theme="light"] .guide-link-action { color: #ab3f33; }
html[data-theme="light"] [data-sol="1"]:hover [data-solmore] { color: #81382f; }
html[data-theme="light"] .home-video-meta { color: #64738e; }
html[data-theme="light"] [data-flow] > div { background: #fff; }
html[data-theme="light"] [data-flow] > i { color: #bc665a; }
html[data-theme="light"] [data-series="pda"] { --s-ink: #a85643; --s-tint: #fff0e8; }
html[data-theme="light"] [data-series="admin"] { --s-ink: #266f83; --s-tint: #eaf5f8; }
html[data-theme="light"] .tutorial-entry { background: #fff; border-color: #d7e1ec; border-left-color: var(--s-ink); }
html[data-theme="light"] .tutorial-entry p,
html[data-theme="light"] [data-band="steel"] .tutorial-entry p { color: #59657c !important; }
html[data-theme="light"] .watch-player { border-color: #cbd6e4; }
html[data-theme="light"] .watch-item { background: #fff; }
html[data-theme="light"] .watch-item[aria-current="page"] { background: #fff0eb; color: #9e4033; border-color: #e8a496; }
html[data-theme="light"] .input { background: #fff; border-color: #cbd4e2; }
html[data-theme="light"] .input::placeholder { color: #77849a; }
html[data-theme="light"] [data-cmp="1"] thead [data-hcol="1"],
html[data-theme="light"] [data-cmp="1"]:has([data-col="2"]:hover) thead [data-hcol="2"],
html[data-theme="light"] [data-cmp="1"]:has([data-col="3"]:hover) thead [data-hcol="3"] { background: #ffebe4; }
html[data-theme="light"] [data-cmp="1"] tfoot [data-hcol="1"] button,
html[data-theme="light"] [data-cmp="1"]:has([data-col="2"]:hover) tfoot [data-hcol="2"] button,
html[data-theme="light"] [data-cmp="1"]:has([data-col="3"]:hover) tfoot [data-hcol="3"] button { color: #1f2340; }
html[data-theme="light"] footer { background: #edf2f7; border-top-color: #d7dfea !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-theme="light"] .guide-link:hover,
  html[data-theme="light"] [data-sol="1"]:hover { box-shadow: 0 16px 36px #26395712; border-color: #e99d8e; }
}
@media (max-width: 480px) { .theme-toggle { width: 32px; height: 32px; } }
@media (max-width: 380px) {
  html[data-theme] .nav { gap: 6px !important; }
  html[data-theme] .nav .brand-logo { width: 96px; }
  html[data-theme] .nav [data-langbtn] { padding-inline: 5px; }
}