@font-face {
  font-family: 'Geist';
  src: url('fonts/geist.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Geist', system-ui, 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background:
    radial-gradient(1000px 600px at 8% -8%, var(--accent-dim) 0%, transparent 55%),
    radial-gradient(800px 500px at 100% 5%, var(--accent-dim) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ─── Theme tokens (minimal, single accent) ───────────────────── */
:root[data-theme="dark"] {
  --bg:            #0a0a0d;
  --bg-elev:       #131218;
  --bg-elev-2:     #17161e;
  --bg-sidebar:    #0a0a0d;
  --fg:            #ede9f5;
  --fg-muted:      #a29cb2;
  --fg-strong:     #ffffff;
  --border:        #232128;
  --border-hi:     #322f3a;
  --accent:        #b866ff;
  --accent-hi:     #d99cff;
  --accent-dim:    rgba(184, 102, 255, 0.16);
  --accent-gradient: linear-gradient(135deg, #9900ff 0%, #b866ff 55%, #d99cff 100%);
  --accent-glow: 0 8px 26px -6px rgba(153, 0, 255, 0.60);
  --code-bg:       #0e0d13;

  --tip-fg:        #4ade80;  --tip-bg:      #4ade8014;  --tip-bd:      #4ade8033;
  --note-fg:      #56b6ff;  --note-bg:    #56b6ff12;  --note-bd:    #56b6ff30;
  --warn-fg:      #f5c451;  --warn-bg:    #f5c45112;  --warn-bd:    #f5c45130;
  --crit-fg:      #ff6b6b;  --crit-bg:    #ff6b6b12;  --crit-bd:    #ff6b6b30;
}
:root[data-theme="light"] {
  --bg:            #fbfaff;
  --bg-elev:       #ffffff;
  --bg-elev-2:     #f3f0fa;
  --bg-sidebar:    #ffffff;
  --fg:            #17131f;
  --fg-muted:      #57506a;
  --fg-strong:     #17131f;
  --border:        #ece7f5;
  --border-hi:     #dcd4ec;
  --accent:        #9900ff;
  --accent-hi:     #7a00cc;
  --accent-dim:    rgba(153, 0, 255, 0.10);
  --accent-gradient: linear-gradient(135deg, #7a00cc 0%, #9900ff 55%, #b84dff 100%);
  --accent-glow: 0 6px 20px -6px rgba(153, 0, 255, 0.55);
  --code-bg:       #100e18;

  --tip-fg:        #15803d;  --tip-bg:      #15803d0f;  --tip-bd:      #15803d2e;
  --note-fg:      #1d6fd6;  --note-bg:    #1d6fd60d;  --note-bd:    #1d6fd62b;
  --warn-fg:      #a16207;  --warn-bg:    #a162070f;  --warn-bd:    #a1620730;
  --crit-fg:      #c0392b;  --crit-bg:    #c0392b0d;  --crit-bd:    #c0392b2b;
}

/* ─── Layout ──────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 22px 14px;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 10px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #14161c; font-size: 16px;
}
.brand-name { font-weight: 700; color: var(--fg-strong); font-size: 16px; letter-spacing: 0.04em; }
.brand-sub  { font-size: 10.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border-radius: 7px;
  color: var(--fg);
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--bg-elev); }
.nav-item.active { background: var(--accent-dim); color: var(--fg-strong); font-weight: 600; }
.nav-item .nico { width: 17px; height: 17px; flex-shrink: 0; color: var(--fg-muted); display: inline-flex; }
.nav-item.active .nico { color: var(--accent); }
.nav-item .nico svg { width: 100%; height: 100%; }

.nav-head { color: var(--fg-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.11em; padding: 15px 11px 5px; }
.nav-sub { margin-left: 17px; border-left: 1px solid var(--border); padding-left: 7px; margin-bottom: 4px; }
.nav-sub .nav-item { padding: 6px 10px; font-size: 12.5px; color: var(--fg-muted); }
.nav-sub .nav-item:hover { color: var(--fg); }

/* ─── Main ────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 11px 26px;
  display: flex; align-items: center; gap: 12px;
}
.hamburger {
  display: none;
  background: none; border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 10px; color: var(--fg);
}
.search { flex: 1; max-width: 440px; position: relative; }
.search input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  color: var(--fg);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.12s;
}
.search input:focus { border-color: var(--accent); }
.search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--fg-muted);
}
.topbar-spacer { flex: 1; }

.seg { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.seg button {
  border: none; background: transparent;
  color: var(--fg-muted); font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 6px;
  display: inline-flex; align-items: center;
  transition: background 0.12s, color 0.12s;
}
.seg button.active { background: var(--bg-elev-2); color: var(--fg-strong); }
.seg button:hover:not(.active) { color: var(--fg); }
.seg button svg { width: 15px; height: 15px; }

/* ─── Content ─────────────────────────────────────────────────── */
.content { padding: 34px 40px 90px; max-width: 880px; width: 100%; margin: 0 auto; }

.crumb { color: var(--fg-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 6px; }
h1.page-title { font-size: 30px; margin: 0 0 8px; color: var(--fg-strong); font-weight: 750; letter-spacing: -0.01em; }
.page-intro { color: var(--fg-muted); font-size: 15px; margin: 0 0 26px; max-width: 680px; }

/* ─── Subtab switch ───────────────────────────────────────────── */
.subtabs { display: inline-flex; gap: 4px; margin-bottom: 30px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.subtabs button {
  border: none; background: transparent; color: var(--fg-muted);
  font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.subtabs button.active { background: var(--accent-dim); color: var(--fg-strong); }
.subtabs button:hover:not(.active) { color: var(--fg); }

/* ─── Section group (clear grouping via rail) ─────────────────── */
.group { margin-bottom: 40px; scroll-margin-top: 76px; }
.group-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.group-head .bar { width: 4px; height: 20px; border-radius: 3px; background: var(--accent); flex-shrink: 0; }
.group-head h2 { font-size: 19px; margin: 0; color: var(--fg-strong); font-weight: 700; }
.group-intro { color: var(--fg-muted); font-size: 13.5px; margin: 0 0 14px 15px; }
.group-cards {
  margin-left: 1px;
  padding-left: 22px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}

/* ─── Feature card ────────────────────────────────────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  scroll-margin-top: 76px;
  transition: border-color 0.14s;
}
.card::before {
  content: "";
  position: absolute; left: -22px; top: 22px;
  width: 14px; height: 1px; background: var(--border);
}
.card:hover { border-color: var(--border-hi); }
.card.hit { border-color: var(--accent); }

.card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.card-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 7px;
  background: var(--bg-elev-2);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.card-ico svg { width: 18px; height: 18px; }
.card-title { font-size: 16px; font-weight: 650; color: var(--fg-strong); flex: 1; min-width: 0; }

.demo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--accent-dim);
  color: var(--accent);
}
.demo-badge svg { width: 13px; height: 13px; }
.card.has-demo { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

.card-desc { color: var(--fg); font-size: 14px; margin: 0; }
.card-desc strong { color: var(--fg-strong); font-weight: 650; }

.card-values { margin: 10px 0 0; padding-left: 18px; }
.card-values li { margin: 3px 0; color: var(--fg); font-size: 13.5px; }
.card-values li strong { color: var(--fg-strong); }

.card-related {
  margin-top: 13px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px;
}
.card-related-label { color: var(--fg-muted); }
.card-related a {
  padding: 3px 9px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--fg);
  font-weight: 500;
}
.card-related a:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Notes / callouts (4 semantic kinds) ─────────────────────── */
.note {
  margin: 12px 0 0;
  border: 1px solid var(--nb);
  background: var(--nbg);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--fg);
  display: flex; gap: 10px; align-items: flex-start;
}
.note-tag {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--nf);
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--nbg);
  border: 1px solid var(--nb);
  margin-top: 1px;
}
.note-text strong { color: var(--fg-strong); }
.note.intro-note { margin: 0 0 24px; padding: 14px 16px; font-size: 14.5px; }
.note-tip      { --nf: var(--tip-fg);  --nbg: var(--tip-bg);  --nb: var(--tip-bd); }
.note-note    { --nf: var(--note-fg); --nbg: var(--note-bg); --nb: var(--note-bd); }
.note-warn    { --nf: var(--warn-fg); --nbg: var(--warn-bg); --nb: var(--warn-bd); }
.note-critical{ --nf: var(--crit-fg); --nbg: var(--crit-bg); --nb: var(--crit-bd); }
.note-rec     { --nf: var(--tip-fg);  --nbg: var(--tip-bg);  --nb: var(--tip-bd); }
.note-alt     { --nf: var(--note-fg); --nbg: var(--note-bg); --nb: var(--note-bd); }
.note-key {
  --nf: var(--accent);
  --nbg: var(--accent-dim);
  --nb: color-mix(in srgb, var(--accent) 38%, transparent);
  border-left: 3px solid var(--accent);
}

/* ─── Video slot ──────────────────────────────────────────────── */
.card-video, .qs-video {
  margin-top: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.card-demo { margin: 13px 0 0; }
.card-demo figcaption, .card-video figcaption, .qs-video figcaption {
  padding: 9px 13px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-demo figcaption svg, .card-video figcaption svg, .qs-video figcaption svg { width: 15px; height: 15px; }
.card-video video, .qs-video video { width: 100%; display: block; background: #000; }
.video-host video { width: 100%; display: block; background: #000; border-top: 1px solid var(--border); }
.video-ph {
  height: 190px;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px;
  color: var(--fg-muted); font-size: 12.5px;
  background: var(--bg-elev-2);
  border-top: 1px solid var(--border);
}
.video-ph svg { width: 26px; height: 26px; opacity: 0.5; }
.video-ph .path { font-family: monospace; font-size: 11px; opacity: 0.5; }

.qs-guide { margin: 0 0 28px; }
.qs-guide .task-kicker { margin-bottom: 12px; }
.qs-guide-video {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elev);
}
.qs-guide-video .video-host video {
  width: 100%;
  display: block;
  background: #000;
  aspect-ratio: 16 / 9;
  border-top: 0;
}
.qs-guide-video .video-ph {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 220px;
  border-top: 0;
  font-size: 13.5px;
}
.qs-guide-video .video-ph svg { width: 34px; height: 34px; }

/* ─── Home ────────────────────────────────────────────────────── */
.home-hero { padding: 4px 0 8px; }
.home-mark {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--accent); color: #14161c;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 24px; margin-bottom: 20px;
}
.home-hero h1 { font-size: 44px; font-weight: 800; margin: 0 0 6px; color: var(--fg-strong); letter-spacing: -0.02em; }
.home-hero .tagline { color: var(--accent); font-size: 15px; font-weight: 600; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.home-hero .desc { color: var(--fg); font-size: 15px; margin: 0 0 26px; max-width: 560px; }
.home-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--fg); font-weight: 600; font-size: 13.5px;
  transition: border-color 0.12s, background 0.12s;
}
.btn:hover { border-color: var(--border-hi); color: var(--fg-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #14161c; }
.btn.primary:hover { background: var(--accent-hi); color: #14161c; }

.home-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 26px; }
.tile { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; padding: 20px; }
.tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tile-ico { width: 30px; height: 30px; border-radius: 7px; background: var(--bg-elev-2); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tile-ico svg { width: 18px; height: 18px; }
.tile h3 { margin: 0; font-size: 15px; color: var(--fg-strong); font-weight: 700; }
.tile p { margin: 0; color: var(--fg-muted); font-size: 13.5px; }
.tile-links { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.chip { font-size: 12px; color: var(--fg); padding: 4px 11px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 20px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Banner (home) ───────────────────────────────────────────── */
.banner-wrap { margin: 0 0 28px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.banner-wrap img { width: 100%; display: block; }
.banner-ph {
  aspect-ratio: 1920 / 620;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  background: repeating-linear-gradient(45deg, var(--bg-elev), var(--bg-elev) 12px, var(--bg-elev-2) 12px, var(--bg-elev-2) 24px);
  color: var(--fg-muted); font-size: 13px; text-align: center; padding: 20px;
}
.banner-ph svg { width: 30px; height: 30px; opacity: 0.5; }
.banner-ph .path { font-family: monospace; font-size: 11.5px; opacity: 0.6; }

/* ─── Quick Start ─────────────────────────────────────────────── */
.qs-step {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 11px; padding: 18px 20px; margin-bottom: 12px;
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  scroll-margin-top: 76px;
}
.qs-num {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
}
.qs-body h3 { margin: 0 0 5px; color: var(--fg-strong); font-size: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-body p { margin: 0 0 9px; color: var(--fg); font-size: 14px; }
.qs-body > .note { margin: 12px 0; }
.qs-stage {
  margin: 12px 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev-2);
}
.qs-stage-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
}
.qs-stage-head .bar {
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent);
  flex-shrink: 0;
}
.qs-stage-head h4 {
  margin: 0;
  color: var(--fg-strong);
  font-size: 13.5px;
  font-weight: 700;
}
.qs-stage > p { margin: 0; }
.qs-stage .note { margin-top: 8px; }
.qs-stage .note:first-of-type { margin-top: 0; }
.note-text { min-width: 0; flex: 1; }
.note-text p { margin: 0; }
.qs-lines {
  margin: 8px 0 0;
  padding-left: 18px;
}
.qs-lines li {
  margin: 5px 0;
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.55;
}
.qs-stage > .qs-lines { margin-top: 8px; }
.qs-body p strong { color: var(--fg-strong); }
.qs-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-muted); padding: 3px 9px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 20px; }
.qs-link svg { width: 12px; height: 12px; }

/* ─── FAQ ─────────────────────────────────────────────────────── */
.faq-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 10px; overflow: hidden; scroll-margin-top: 76px; }
.faq-item summary {
  padding: 15px 18px; cursor: pointer; color: var(--fg-strong);
  font-size: 14.5px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 12px; transition: background 0.12s;
}
.faq-item summary:hover { background: var(--bg-elev-2); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .qn { color: var(--accent); font-family: monospace; font-weight: 700; flex-shrink: 0; font-size: 13px; }
.faq-item summary .plus { margin-left: auto; color: var(--fg-muted); font-size: 17px; transition: transform 0.15s; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-body { padding: 2px 18px 16px; color: var(--fg); font-size: 14px; }
.faq-body strong { color: var(--fg-strong); }
.faq-body .card-related { margin-top: 12px; }

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: 0; width: 260px; z-index: 20; transform: translateX(-100%); transition: transform 0.2s; }
  .sidebar.open { transform: translateX(0); box-shadow: 0 8px 40px rgba(0,0,0,0.4); }
  .hamburger { display: inline-flex; }
  .content { padding: 22px; }
  .home-hero h1 { font-size: 34px; }
  .backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 15; }
  .backdrop.visible { display: block; }
}
@media (max-width: 500px) {
  .group-cards { padding-left: 14px; }
  .card::before { left: -14px; width: 8px; }
  .qs-step { grid-template-columns: 34px 1fr; gap: 12px; padding: 15px; }
  .qs-num { width: 34px; height: 34px; font-size: 15px; }
  .home-hero h1 { font-size: 30px; }
}

/* ─── Print ───────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .card-video, .qs-video, .card-demo, .qs-guide, .hamburger, .demo-badge { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .content { max-width: none; padding: 0; }
  .card, .qs-step, .faq-item, .note { break-inside: avoid; }
  a { color: #000; }
}

/* ─── No results ──────────────────────────────────────────────── */
.no-results { padding: 60px 20px; text-align: center; color: var(--fg-muted); font-size: 14px; }
.no-results svg { width: 34px; height: 34px; opacity: 0.4; display: block; margin: 0 auto 12px; }

/* ─── Task-first guide framework ─────────────────────────────── */
:root { --topbar-h: 60px; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 14px; border-radius: 8px; background: var(--fg-strong);
  color: var(--bg); transform: translateY(-70px);
}
.skip:focus { transform: none; }

.language-gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 20px; background:
    radial-gradient(700px 420px at 50% 15%, var(--accent-dim), transparent 65%),
    var(--bg);
}
.language-gate[hidden] { display: none; }
.language-card { width: min(100%, 560px); padding: clamp(28px, 6vw, 48px); border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elev); text-align: center; box-shadow: var(--accent-glow), 0 28px 80px rgba(0,0,0,.32); }
.language-mark { display: grid; place-items: center; width: 92px; height: 55px; margin: 0 auto 18px; }
.language-mark img { display: block; width: 100%; height: auto; }
.language-kicker { margin: 0 0 8px; color: var(--accent); font: 700 11px/1.3 monospace; letter-spacing: .12em; }
.language-card h1 { margin: 0 0 8px; color: var(--fg-strong); font-size: clamp(26px, 6vw, 36px); line-height: 1.15; }
.language-help { margin: 0 0 26px; color: var(--fg-muted); }
.language-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.language-options button { min-height: 82px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev-2); color: var(--fg-strong); cursor: pointer; }
.language-options button:hover { border-color: var(--accent); background: var(--accent-dim); }
.language-options button span { display: block; margin-bottom: 4px; color: var(--accent); font: 700 11px/1 monospace; letter-spacing: .08em; }
.language-options button strong { font-size: 15px; letter-spacing: .04em; }
.language-soon { margin: 20px 0 0; color: var(--fg-muted); font-size: 12.5px; }

.topbar {
  height: var(--topbar-h); padding: 0 clamp(14px, 3vw, 28px); z-index: 40;
  gap: 14px; background: color-mix(in oklab, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.top-brand { display: flex; align-items: center; gap: 10px; color: var(--fg-strong); font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.brand-mark { background: transparent; border-radius: 6px; overflow: hidden; }
.brand-mark img { display: block; width: auto; height: 100%; }
.top-brand .brand-mark { width: 54px; height: 32px; box-shadow: 0 6px 18px -6px rgba(153, 0, 255, 0.55); }
.current-section { color: var(--fg-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
}
.topbar .search { flex: 0 1 360px; }
.seg button, .hamburger { min-width: 44px; min-height: 44px; justify-content: center; cursor: pointer; }
.hamburger { padding: 0; align-items: center; }
.theme-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 999px; background: transparent; color: var(--fg-muted);
  font-size: 13px;
}
.theme-toggle:hover { border-color: var(--border-hi); color: var(--fg-strong); background: var(--bg-elev); }
.theme-toggle svg { width: 15px; height: 15px; }
.brand .brand-mark { width: 54px; height: 32px; flex: 0 0 54px; }

.app.shell {
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  max-width: 1200px; min-height: calc(100vh - var(--topbar-h)); margin: 0 auto;
}
.sidebar {
  top: var(--topbar-h); height: calc(100dvh - var(--topbar-h));
  padding: 26px 14px; z-index: 30;
}
.sidebar > .brand { display: none; }
.nav-head { padding-top: 20px; font-weight: 700; }
.nav-item { min-height: 44px; text-decoration: none; }
.nav-marker {
  display: grid; place-items: center; flex: 0 0 28px; height: 24px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elev);
  color: var(--fg-muted); font: 700 10px/1 monospace;
}
.nav-item .nico { display: none; }
.nav-item.active .nav-marker { color: #fff; border-color: transparent; background: var(--accent-gradient); box-shadow: var(--accent-glow); }
.main { min-width: 0; }
.content { max-width: 768px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) 90px; }

.toc { display: none; position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; padding: 34px 24px; border-left: 1px solid var(--border); }
.toc-label { margin: 0 0 10px; color: var(--fg-muted); font: 700 10px/1.2 monospace; letter-spacing: .1em; text-transform: uppercase; }
.toc a { display: block; padding: 7px 0 7px 12px; border-left: 1px solid var(--border); color: var(--fg-muted); font-size: 12.5px; line-height: 1.35; text-decoration: none; }
.toc a:hover { color: var(--fg-strong); border-left-color: var(--accent); }

.task-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.task-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--accent); font: 700 11px/1.3 monospace; letter-spacing: .1em; text-transform: uppercase; }
.task-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 99px; background: var(--accent); }
.task-head .page-title { margin-bottom: 10px; }
.task-goal { margin: 0; max-width: 60ch; color: var(--fg-muted); font-size: 15px; line-height: 1.65; }
.task-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0 0; }
.task-meta div { min-width: 0; padding-right: 24px; border-right: 1px solid var(--border); }
.task-meta div:last-child { padding-right: 0; border-right: 0; }
.task-meta dt { margin-bottom: 4px; color: var(--fg-muted); font: 700 10px/1.2 monospace; letter-spacing: .08em; text-transform: uppercase; }
.task-meta dd { margin: 0; color: var(--fg-strong); font-size: 12.5px; font-weight: 650; }

.qs-step { border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.qs-body p { line-height: 1.7; }
.step-result { margin: 12px 0 10px; padding: 10px 12px; border: 1px solid var(--tip-bd); border-radius: 8px; background: var(--tip-bg); color: var(--fg); font-size: 13.5px; }
.step-result strong { color: var(--tip-fg); }
.qs-link { min-height: 44px; padding: 8px 11px; color: var(--accent); text-decoration: none; }

.group { margin-bottom: 34px; }
.group-cards { gap: 8px; }
details.card { padding: 0; overflow: hidden; }
.card-head { min-height: 58px; margin: 0; padding: 13px 16px; list-style: none; cursor: pointer; }
.card-head::-webkit-details-marker { display: none; }
.card-plus { margin-left: 4px; color: var(--fg-muted); font-size: 20px; transition: transform .16s ease; }
.card[open] .card-plus { transform: rotate(45deg); }
.card-body { padding: 0 16px 16px 57px; }
.card::before { top: 28px; }
.card-desc { line-height: 1.7; }
.card-related a { min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; }

.faq-item summary { min-height: 56px; }

@media (min-width: 1280px) {
  .app.shell { grid-template-columns: 264px minmax(0, 1fr) 224px; max-width: 1440px; }
  .toc { display: block; }
}
@media (max-width: 900px) {
  .app.shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { top: 0; height: 100dvh; padding-top: 28px; z-index: 50; }
  .sidebar > .brand { display: flex; }
  .content { padding-top: 28px; }
}
@media (max-width: 720px) {
  .topbar .search { display: none; }
  .top-brand-name { display: none; }
  .current-section { max-width: 28vw; }
}
@media (max-width: 500px) {
  .topbar { padding-inline: 10px; gap: 7px; }
  .top-brand { display: none; }
  .current-section { max-width: none; flex: 1; }
  .theme-toggle span:last-child { display: none; }
  .theme-toggle { width: 44px; padding: 0; }
  .content { padding-inline: 18px; }
  .task-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .task-meta div { padding-right: 8px; }
  .qs-step { grid-template-columns: 34px minmax(0, 1fr); }
  .card-body { padding-left: 16px; }
  .language-options { grid-template-columns: 1fr; }
  .language-options button { min-height: 68px; }
}

/* Main Frame parity layer */
:root {
  --topbar-h: 60px; --ease: cubic-bezier(.32,.72,0,1);
  --bg-raised: var(--bg-elev); --bg-sunken: var(--bg-elev-2);
  --ink: var(--fg-strong); --ink-2: var(--fg); --ink-3: var(--fg-muted);
  --line: var(--border); --line-strong: var(--border-hi);
  --accent-strong: var(--accent-hi); --accent-soft: var(--accent-dim);
  --nav-active-bg: var(--accent-dim); --nav-badge-bg: var(--bg-elev-2);
  --shadow-drawer: 0 24px 64px rgba(0,0,0,.42);
}
html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; text-rendering: optimizeLegibility; }
[id] { scroll-margin-top: calc(var(--topbar-h) + 24px); }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.topbar {
  position: sticky; inset: 0 0 auto; z-index: 40; display: flex; align-items: center;
  gap: 14px; width: 100%; height: var(--topbar-h); padding-inline: clamp(16px,3vw,28px);
  background: color-mix(in oklab,var(--bg) 94%,transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } }
.top-brand { gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.top-brand .brand-mark { width: auto; min-width: 54px; height: 32px; }
.current-section { max-width: 220px; margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--line-strong); font-size: 13px; font-weight: 450; }
.hamburger { width: 38px; height: 38px; border-radius: 8px; color: var(--ink-2); }
.hamburger:hover { background: var(--bg-sunken); color: var(--ink); }
.search { max-width: 360px; }
.search input { height: 38px; border-radius: 9px; background: var(--bg-raised); }
.seg { border-color: var(--line); border-radius: 9px; background: var(--bg-raised); }
.seg button { min-width: 32px; min-height: 30px; }
.theme-toggle { min-height: 36px; padding: 7px 14px; border-radius: 999px; background: transparent; }
.progress { position: absolute; inset: auto 0 -1px; width: 100%; height: 2px; background: var(--accent-gradient); box-shadow: 0 0 12px rgba(153,0,255,.6); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: reading-progress linear both; animation-timeline: scroll(root); }
  @keyframes reading-progress { to { transform: scaleX(1); } }
}

.app.shell { display: grid; grid-template-columns: 264px minmax(0,1fr); width: 100%; max-width: 1200px; min-height: calc(100dvh - var(--topbar-h)); margin-inline: auto; }
.sidebar { position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); padding: 28px 16px 28px clamp(16px,3vw,28px); overflow-y: auto; border-right: 1px solid var(--line); background: transparent; scrollbar-width: thin; }
.sidebar > .brand { display: none; }
.nav-label { margin: 0 0 10px 12px; color: var(--ink-3); font-size: 11px; font-weight: 550; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-head { margin: 14px 0 -2px 12px; padding: 0; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); font-size: 14px; transition: background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease); }
.nav-item:hover { background: var(--bg-sunken); color: var(--ink); }
.nav-marker { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--nav-badge-bg); color: var(--ink-3); font: 700 11px/1 'Geist Mono',monospace; letter-spacing: .04em; }
.nav-item.active { background: var(--nav-active-bg); color: var(--accent-strong); font-weight: 650; }
.nav-item.active .nav-marker { color: #fff; border-color: transparent; background: var(--accent-gradient); box-shadow: var(--accent-glow); }

.main { min-width: 0; }
.content { width: 100%; max-width: 768px; margin-inline: auto; padding: clamp(32px,5vw,56px) clamp(20px,4vw,48px) 48px; }
.page-title,.home-hero h1 { margin: 0 0 16px; color: var(--ink); font-size: clamp(1.9rem,4.5vw,2.6rem); font-weight: 640; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.crumb { margin-bottom: 10px; color: var(--accent-strong); font-family: 'Geist Mono',monospace; font-weight: 700; }
.page-intro { max-width: 58ch; margin-bottom: 32px; color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.task-head { margin-bottom: 22px; padding-bottom: 18px; }
.task-head .page-title { margin-bottom: 10px; }
.task-kicker { color: var(--accent-strong); }
.task-kicker::before,.group-head .bar,.qs-stage-head .bar { background: var(--accent-gradient); }
.task-meta div { border-right: 0; }
.task-meta div:not(:last-child) { padding-right: 24px; border-right: 1px solid var(--line); }
.banner-wrap { border-radius: 12px; background: var(--bg-raised); }
.home-hero { padding-top: 0; }
.home-hero .tagline { color: var(--accent-strong); font: 700 11px/1.4 'Geist Mono',monospace; }
.home-hero .desc { max-width: 58ch; color: var(--ink-2); line-height: 1.65; }
.btn,.tile,.card,.faq-item,.qs-step,.qs-guide-video { border-radius: 12px; background: var(--bg-raised); }
.btn { min-height: 44px; padding: 10px 16px; }
.btn.primary { color: #fff; border-color: transparent; background: var(--accent-gradient); box-shadow: var(--accent-glow); }
.btn.primary:hover { color: #fff; transform: translateY(-1px); }
.tile { transition: border-color .18s var(--ease),transform .18s var(--ease); }
.tile:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.card,.faq-item { overflow: clip; }
.card:hover { border-color: var(--line-strong); }
.card.hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.group { margin-bottom: 42px; }
.note { border-radius: 9px; }
.step-result { border-left: 3px solid var(--tip-fg); border-radius: 0 9px 9px 0; }
.faq-item summary { min-height: 58px; }

.panel-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.panel-nav a { display: flex; flex-direction: column; justify-content: center; min-height: 70px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); color: var(--ink); text-decoration: none; transition: transform .18s var(--ease),border-color .18s var(--ease); }
.panel-nav a:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.panel-nav a:last-child { align-items: flex-end; text-align: right; }
.panel-nav a[data-direction='next'] { color: #fff; border-color: transparent; background: var(--accent-gradient); box-shadow: var(--accent-glow); }
.panel-nav small { margin-bottom: 4px; color: var(--ink-3); font: 600 10px/1 'Geist Mono',monospace; letter-spacing: .08em; text-transform: uppercase; }
.panel-nav a[data-direction='next'] small { color: rgba(255,255,255,.74); }
.panel-nav strong { font-size: .9rem; font-weight: 620; }
.panel-nav--single { grid-template-columns: 1fr; }
.panel-nav--single a { align-items: flex-start !important; text-align: left !important; }

.toc { display: none; position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); padding: 44px 24px 28px 4px; overflow-y: auto; border-left: 0; scrollbar-width: thin; }
.toc-label { margin: 0 0 12px 14px; font-family: inherit; font-size: 11px; font-weight: 550; }
.toc a { margin-left: 0; padding: 5px 14px; border-left: 2px solid transparent; color: var(--ink-2); line-height: 1.45; }
.toc a:hover { color: var(--ink); }
.toc a.active { border-color: var(--accent); color: var(--ink); font-weight: 550; }
.language-gate { background: color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter: blur(18px); }
.language-card { border-radius: 16px; background: var(--bg-raised); }
.language-options button { border-radius: 12px; background: var(--bg-sunken); transition: border-color .18s var(--ease),transform .18s var(--ease); }
.language-options button:hover { transform: translateY(-1px); }

@media (min-width: 1280px) { .app.shell { grid-template-columns: 264px minmax(0,1fr) 224px; max-width: 1440px; } .toc { display: block; } }
@media (max-width: 1023.5px) {
  .app.shell { grid-template-columns: minmax(0,1fr); }
  .hamburger { display: grid; place-items: center; }
  .sidebar { position: fixed; top: 0; left: 0; z-index: 50; width: min(300px,84vw); height: 100dvh; padding: 24px 16px; background: var(--bg-raised); transform: translateX(-102%); transition: transform .32s var(--ease); }
  .sidebar.open { transform: none; box-shadow: var(--shadow-drawer); }
  .backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(15,14,12,.45); opacity: 0; transition: opacity .28s var(--ease); }
  .backdrop.visible { display: block; opacity: 1; }
}
@media (min-width: 1024px) { .hamburger { display: none; } }
@media (max-width: 760px) { .current-section { display: none; } .topbar .search { flex-basis: 180px; } .top-brand-name { display: none; } }
@media (max-width: 620px) { .panel-nav { grid-template-columns: 1fr; } .panel-nav a,.panel-nav a:last-child { align-items: flex-start; text-align: left; } .search { display: none; } }
@media (max-width: 479.5px) { .topbar { gap: 8px; padding-inline: 10px; } .top-brand { display: flex; } .current-section { display: none; } .theme-toggle span { display: none; } .theme-toggle { width: auto; padding: 7px 10px; } .content { padding-inline: 18px; } .home-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .content > * { animation: panel-rise .32s var(--ease) backwards; }
  .content > *:nth-child(2) { animation-delay: .04s; } .content > *:nth-child(3) { animation-delay: .08s; }
  @keyframes panel-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media print { .topbar,.sidebar,.toc,.backdrop,.skip,.panel-nav { display: none !important; } .app.shell { display: block; max-width: none; } .content { max-width: none; padding: 0; } }

/* Loader entry, route video and support footer */
.loader-start {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
}
.loader-start-copy { min-width: 0; }
.loader-start .task-kicker { margin-bottom: 7px; }
.loader-start h2 { margin: 0 0 7px; color: var(--ink); font-size: 1.15rem; line-height: 1.3; }
.loader-start-copy > p:not(.task-kicker) { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.loader-start .loader-result { margin-top: 8px !important; color: var(--accent-strong) !important; font-weight: 600; }
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--accent-gradient);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  box-shadow: var(--accent-glow),0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform .18s var(--ease),box-shadow .18s var(--ease);
  white-space: nowrap;
}
.download-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(153,0,255,.6),0 0 0 1px rgba(255,255,255,.24) inset; }
.download-btn:active { transform: translateY(0); }
.download-btn svg { width: 20px; height: 20px; }
.download-btn-labels { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.download-btn-sub { font-size: 11px; font-weight: 500; opacity: .8; letter-spacing: .02em; }
.loader-start > .download-btn,
.loader-component > .download-btn { width: 290px; justify-content: center; justify-self: end; }
.download-btn--secondary { color: var(--accent-strong); border: 1.5px solid var(--accent-soft); background: var(--bg-raised); box-shadow: 0 2px 10px -6px rgba(153,0,255,.35); }
.download-btn--secondary:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--bg-raised); box-shadow: 0 8px 22px -8px rgba(153,0,255,.4); }
.loader-component { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); }
.loader-component-copy { min-width: 0; }
.loader-component .task-kicker { margin-bottom: 7px; }
.loader-component h3 { margin: 0 0 8px; color: var(--ink); font-size: 1rem; }
.loader-component ol { margin: 0; padding-left: 21px; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.loader-component .loader-result { margin: 9px 0 0; color: var(--accent-strong); font-size: .9rem; font-weight: 600; }
.loader-walkthrough { grid-column: 1 / -1; min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.loader-walkthrough h3 { margin: 0 0 5px; color: var(--ink); font-size: 1rem; }
.loader-walkthrough > p { margin: 0 0 12px; color: var(--ink-2); font-size: .9rem; }
.youtube-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--code-bg); color: #fff; text-decoration: none; isolation: isolate; }
.youtube-preview img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.youtube-preview-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58)); }
.youtube-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #ff0033; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .18s var(--ease); }
.youtube-play svg { width: 30px; height: 30px; }
.youtube-preview-label { position: absolute; left: 18px; bottom: 16px; color: #fff; font-size: .9rem; font-weight: 650; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.youtube-preview:hover { color: #fff; }
.youtube-preview:hover .youtube-play { transform: scale(1.06); }
.youtube-preview:active .youtube-play { transform: scale(.98); }

.page-video { margin: 0 0 34px; }
.page-video > h2 { margin: 0 0 6px; color: var(--ink); font-size: 1.15rem; }
.page-video > p { margin: 0 0 13px; color: var(--ink-2); font-size: .9rem; }
.page-video .video-host { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--code-bg); }
.page-video video { display: block; width: 100%; max-height: 430px; background: #0e0d13; }

.doc-foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.support-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raised); }
.support-card-body { flex: 1 1 220px; min-width: 0; }
.support-card-title { margin: 0 0 4px; color: var(--ink); font-size: 1rem; font-weight: 600; }
.support-card-text { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.support-btn { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 11px 18px; border-radius: 10px; background: #5865f2; color: #fff; text-decoration: none; font-size: .95rem; font-weight: 600; box-shadow: 0 6px 20px -6px rgba(88,101,242,.55),inset 0 1px 0 rgba(255,255,255,.18); transition: transform .18s var(--ease),box-shadow .18s var(--ease); }
.support-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(88,101,242,.65),inset 0 1px 0 rgba(255,255,255,.24); }
.support-btn:active { transform: translateY(0); }
.support-btn svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
  .loader-start { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .loader-component { grid-template-columns: 1fr; gap: 14px; }
  .download-btn,
  .loader-start > .download-btn,
  .loader-component > .download-btn { width: 100%; justify-content: center; justify-self: stretch; white-space: normal; }
}
@media (max-width: 479.5px) {
  .support-card { padding: 18px; gap: 14px; }
  .support-btn { width: 100%; justify-content: center; }
}
@media print { .doc-foot { display: none !important; } }

/* Brand mark must remain fully transparent: no tile, crop, radius or glow. */
.brand-mark,
.top-brand .brand-mark,
.brand .brand-mark,
.language-mark {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.brand-mark img,
.language-mark img { filter: none !important; box-shadow: none !important; }

/* Quick-start action list and Apply label. */
.qs-actions { list-style: none; counter-reset: qs-action; display: grid; gap: 16px; padding: 0; margin: 18px 0; }
.qs-actions > li { counter-increment: qs-action; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--fg); }
.qs-actions > li::before { content: counter(qs-action); display: grid; place-items: center; flex: 0 0 25px; height: 25px; border: 1px solid var(--border); border-radius: 50%; font-size: 12px; color: var(--fg-muted); }
.qs-actions strong { color: var(--fg-strong); }
.qs-apply-label { display: inline-block; padding: 4px 12px; border: 1px solid var(--tip-bd); border-radius: 6px; background: var(--tip-bg); color: var(--tip-fg); font-weight: 700; }
.qs-explanation { margin: 16px 0; }
.qs-explanation summary {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 6px 16px 6px 6px;
  border-radius: 999px; background: var(--accent-dim);
  color: var(--fg-strong); font-size: 14px; font-weight: 600; line-height: 1.3;
  list-style: none; cursor: pointer; user-select: none;
  transition: background .18s ease, transform .12s ease;
}
.qs-explanation summary::-webkit-details-marker { display: none; }
.qs-explanation summary::marker { content: ''; }
.qs-explanation summary:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.qs-explanation summary:active { transform: scale(.98); }
.qs-explanation summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.qs-why-icon {
  position: relative; flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--accent); transition: transform .24s cubic-bezier(.32,.72,0,1);
}
.qs-why-icon::before, .qs-why-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #fff;
}
.qs-why-icon::after { transform: rotate(90deg); }
.qs-explanation[open] .qs-why-icon { transform: rotate(45deg); }
.qs-explanation p {
  margin: 10px 0 0; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-elev-2); color: var(--fg); font-size: 14px; line-height: 1.55;
  max-width: 62ch;
}
.qs-explanation[open] p { animation: qs-why-in .22s cubic-bezier(.32,.72,0,1); }
@keyframes qs-why-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .qs-why-icon, .qs-explanation summary { transition: none; }
  .qs-explanation[open] p { animation: none; }
}

.qs-model-choice { margin: 12px 0 16px; }
.qs-model-options { display: grid; width: fit-content; max-width: 100%; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.qs-model-options li { font-size: 14px; color: var(--fg); padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev-2); }

.qs-model-options strong { color: var(--fg-strong); }
.qs-body { min-width: 0; }

.qs-action-detail { display: block; margin-top: 8px; }
.qs-action-detail > code {
  display: inline-block; padding: 7px 12px; border: 1px solid var(--accent);
  border-radius: 7px; background: var(--accent-dim); color: var(--fg-strong);
  font-size: 14px; white-space: nowrap;
}