:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070707;
  --ink: #f6f3ec;
  --mute: #c9c3b8;
  --line: rgba(244, 241, 234, 0.2);
  --card: rgba(18, 18, 18, 0.92);
  --accent: #f4f1ea;
  --btn-ink: #111;
  --ok: #c8f5c0;
  --warn: #f6e0a4;
  --bad: #ff8f8f;
  --input: #141414;
  --menu: #111;
  --fill: rgba(255, 255, 255, 0.04);
  --fill-strong: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.06);
  --orb: rgba(255, 255, 255, 0.16);
  --dot: #222;
  --track: #161616;
  --noise-op: 0.09;
  --ui: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3efe6;
  --ink: #161410;
  --mute: #5e584f;
  --line: rgba(22, 20, 16, 0.12);
  --card: rgba(255, 252, 246, 0.94);
  --accent: #161410;
  --btn-ink: #f6f3ec;
  --ok: #1f7a3a;
  --warn: #8a6414;
  --bad: #b42318;
  --input: #fffdf8;
  --menu: #fffdf8;
  --fill: rgba(22, 20, 16, 0.04);
  --fill-strong: rgba(22, 20, 16, 0.08);
  --hover: rgba(22, 20, 16, 0.06);
  --orb: rgba(80, 60, 30, 0.14);
  --dot: #e7e1d6;
  --track: #e7e1d6;
  --noise-op: 0.045;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3efe6;
    --ink: #161410;
    --mute: #5e584f;
    --line: rgba(22, 20, 16, 0.12);
    --card: rgba(255, 252, 246, 0.94);
    --accent: #161410;
    --btn-ink: #f6f3ec;
    --ok: #1f7a3a;
    --warn: #8a6414;
    --bad: #b42318;
    --input: #fffdf8;
    --menu: #fffdf8;
    --fill: rgba(22, 20, 16, 0.04);
    --fill-strong: rgba(22, 20, 16, 0.08);
    --hover: rgba(22, 20, 16, 0.06);
    --orb: rgba(80, 60, 30, 0.14);
    --dot: #e7e1d6;
    --track: #e7e1d6;
    --noise-op: 0.045;
  }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Newsreader", "Songti SC", serif;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: var(--noise-op);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}
.orb {
  pointer-events: none;
  position: fixed;
  top: -120px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb), transparent 62%);
  filter: blur(8px);
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 48px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
  margin-right: 12px;
  justify-content: flex-end;
}
.nav a {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mute);
  padding: 8px 12px;
  border-radius: 999px;
}
.nav a:hover, .nav a.on { color: var(--ink); background: var(--hover); }
.nav a { display: inline-flex; align-items: center; gap: 7px; }
.nav-ico {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.nav-ico.gpt { background-color: #10a37f; -webkit-mask-image: url("icons/openai.svg"); mask-image: url("icons/openai.svg"); }
.nav-ico.claude { background-color: #d97757; -webkit-mask-image: url("icons/claude.svg"); mask-image: url("icons/claude.svg"); }
.nav-img { width: 18px; height: 18px; object-fit: cover; border-radius: 4px; }
.nav a.on.nav-gpt { background: rgba(16,163,127,.16); color: #7ee0c5; }
.nav a.on.nav-claude { background: rgba(217,119,87,.16); color: #f0b49a; }
.nav a.on.nav-grok { background: var(--fill-strong); }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px var(--fill);
}
.brand b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.brand small {
  color: var(--mute);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tools { display: flex; align-items: center; gap: 8px; }
.lang { position: relative; }
.lang > button, .lang-menu button, #themeBtn {
  font-family: "Bricolage Grotesque", sans-serif;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.lang-menu {
  position: absolute;
  right: 0;
  margin-top: 8px;
  width: 140px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--menu);
  z-index: 4;
}
.lang-menu button { width: 100%; border: 0; text-align: left; border-radius: 10px; }
.lang-menu button:hover { background: var(--hover); }

.hero { margin-bottom: 28px; }
.hero.compact { margin-bottom: 18px; }
.hero.compact h1 { font-size: clamp(28px, 5vw, 40px); }
.hero.compact .lede { margin-top: 8px; font-size: 16px; }
.kicker {
  margin: 0 0 10px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--mute);
}
.hero h1 {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.lede {
  max-width: 36em;
  margin: 14px 0 0;
  color: var(--mute);
  font-size: 18px;
  line-height: 1.55;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.card {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  backdrop-filter: blur(16px);
}
.row-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.row-head h2 {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 26px;
}
.row-head p { margin: 8px 0 0; color: var(--mute); }
.badge {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mute);
}

.pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 22px;
}
.pill {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--fill);
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.pill:hover { border-color: var(--ink); transform: translateY(-2px); }
.pill-ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.pill-ico svg { width: 26px; height: 26px; display: block; }
.pill.gpt .pill-ico { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #5ee9b5; }
.pill.claude .pill-ico { background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.4); color: #f0b45a; }
.pill.grok .pill-ico { background: rgba(244,241,234,.08); border-color: rgba(244,241,234,.28); color: #f4f1ea; }
.pill > span:last-child { display: grid; gap: 4px; min-width: 0; }
.pill > span:last-child > span { color: var(--mute); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-family: "Bricolage Grotesque", sans-serif; }
.pill strong { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; }
a.pill { text-decoration: none; }
.pill em { display: block; margin-top: 2px; color: var(--mute); font-style: normal; font-size: 12px; font-family: "Bricolage Grotesque", sans-serif; }
.pill-ico {
  background: var(--dot);
}
.pill-ico img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.pill.chatgpt .pill-ico, .prod-head .pill-ico.chatgpt { background: #10382f; border-color: #10a37f; }
.pill.claude .pill-ico, .prod-head .pill-ico.claude { background: #3a221c; border-color: #d97757; }
.pill.grok .pill-ico, .prod-head .pill-ico.grok {
  background: #050505;
  border-color: #3a3a3a;
  padding: 0;
  overflow: hidden;
}
.pill.chatgpt .pill-ico img, .prod-head .pill-ico.chatgpt img {
  filter: invert(54%) sepia(47%) saturate(513%) hue-rotate(115deg) brightness(92%) contrast(92%);
}
.pill.claude .pill-ico img, .prod-head .pill-ico.claude img {
  filter: invert(58%) sepia(34%) saturate(746%) hue-rotate(330deg) brightness(95%) contrast(90%);
}
.pill.grok .pill-ico img, .prod-head .pill-ico.grok img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.product-page > .link {
  color: var(--mute);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.product-page form {
  display: grid;
  gap: 16px;
}
.product-page form > .hint,
.product-page form > .alert,
.product-page form > .inline {
  margin: 0;
}
.product-page textarea { min-height: 92px; }
.inline { align-items: center; }
.product-page .inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.product-page .inline .btn,
.product-page .inline button {
  height: 48px;
  min-height: 48px;
}
.product-page .inline .ghost { min-width: 132px; }
.product-page .inline .primary {
  margin-left: auto;
  min-width: 160px;
}
.prod-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 22px; }
.prod-head h2 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; }
.prod-head p { margin: 4px 0 0; color: var(--mute); }
.qa-jump {
  margin-left: auto;
  min-height: 42px;
  height: 42px;
  padding: 0 16px;
  text-decoration: none;
  display: grid;
  place-items: center;
}
.progress-box { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.progress-top { margin-bottom: 10px; font-family: var(--ui); font-size: 15px; }

.actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}
button, .btn {
  font-family: "Bricolage Grotesque", sans-serif;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
}
.primary { color: var(--btn-ink); background: var(--accent); }
.ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.link {
  border: 0;
  background: none;
  color: var(--mute);
  min-height: auto;
  padding: 0;
  cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif;
}
.actions a.btn { display: grid; place-items: center; text-decoration: none; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 22px;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--mute);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13px;
}
.step i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dot);
  font-style: normal;
}
.step.on { color: var(--ink); border-color: rgba(244,241,234,.35); }
.step.on i { background: var(--ink); color: var(--bg); }
.step.ok { color: var(--ok); }
.step.ok i { background: #173318; color: var(--ok); }

label { display: grid; gap: 8px; font-family: "Bricolage Grotesque", sans-serif; font-size: 13px; letter-spacing: 0.06em; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--input);
  color: var(--ink);
  outline: none;
  font: 16px/1.5 "Bricolage Grotesque", sans-serif;
}
input { height: 50px; padding: 0 14px; }
textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.product-page > .hint { margin: 14px 0 0; }
input:focus, textarea:focus { border-color: var(--ink); }

.form-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.hint {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.65;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.alert {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill-strong);
  border: 1px solid var(--line);
  line-height: 1.6;
  font-size: 15px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.alert.ok { color: var(--ok); border-color: rgba(200,245,192,.28); }
.alert.warn {
  color: var(--warn);
  background: rgba(246, 224, 164, .08);
  border-color: rgba(246, 224, 164, .32);
}
.alert.bad { color: var(--bad); border-color: rgba(255,143,143,.28); }

.block {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--fill);
}
.block strong { display: block; margin-bottom: 6px; font-family: "Bricolage Grotesque", sans-serif; }
.inline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.kv { display: flex; justify-content: space-between; gap: 12px; color: var(--mute); padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border: 0; }
.kv b { color: var(--ink); text-align: right; }

.check { display: flex; gap: 10px; align-items: flex-start; color: var(--mute); }
.check input { width: 18px; height: 18px; }

.status { text-align: center; padding: 28px 8px; }
.bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 18px auto 8px; max-width: 360px; }
.bar > span { display: block; height: 100%; width: 18%; background: var(--ink); animation: load 2.4s ease infinite; }
@keyframes load { 0% { width: 8%; } 50% { width: 72%; } 100% { width: 18%; } }

.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  color: var(--mute);
  font-size: 13px;
}
.foot a { color: var(--ink); }

.rise { animation: rise .55s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.how article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 140px;
}
.how em {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--mute);
  margin-bottom: 8px;
}
.how strong { font-family: "Bricolage Grotesque", sans-serif; display: block; margin-bottom: 6px; }
.how p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }

.primary, .ghost { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.primary:hover, .ghost:hover { transform: translateY(-1px); }
button:disabled {
  cursor: wait;
  opacity: 0.78;
  transform: none !important;
}
button.loading {
  pointer-events: none;
}
button.loading .btn-label { opacity: 0.12; }
button.loading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin .7s linear infinite;
  z-index: 2;
}
.primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shine 2.8s ease infinite;
}
@keyframes shine { 0% { transform: translateX(0); } 100% { transform: translateX(420%); } }

.status-card { text-align: center; }
.ring {
  width: 86px;
  height: 86px;
  margin: 8px auto 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
}
.ring i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(244,241,234,.18);
  border-top-color: var(--ink);
  animation: spin 1s linear infinite;
}
.ring.ok i { animation: none; border-color: var(--ok); background: #173318; }
.ring.ok i::after { content: "✓"; color: var(--ok); font-size: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }
.meter {
  height: 8px;
  max-width: 420px;
  margin: 16px auto 6px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.meter b { display: block; height: 100%; background: var(--ink); transition: width .45s ease; }
.pct { color: var(--mute); font-family: "Bricolage Grotesque", sans-serif; font-size: 12px; letter-spacing: 0.12em; }
.log {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: none;
  text-align: left;
}
.log li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  color: var(--mute);
  font-family: var(--ui);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.log li em { font-style: normal; }
.log li.run { color: var(--ink); }
.log li.done { color: var(--ok); }
.log li.run span { animation: pulse 1.1s ease infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.qa-actions { margin-bottom: 18px; }
.qa-actions .btn { display: inline-grid; place-items: center; text-decoration: none; min-width: 180px; }
.qa-board, .faq-section, .side-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
}
.notice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.notice-head h2, .faq-section h3, .side-card h3 {
  margin: 8px 0 0;
  font-family: var(--ui);
  font-size: 24px;
  letter-spacing: -0.03em;
}
.side-card h3 { font-size: 20px; }
.section-kicker {
  color: var(--mute);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.notice-copy, .section-copy, .side-card-copy, .summary-card p {
  margin: 10px 0 0;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.7;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.notice-badge {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.notice-grid, .summary-grid {
  display: grid;
  gap: 14px;
}
.notice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
}
.notice-card, .summary-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--fill);
}
.notice-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.notice-index {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(244,241,234,.1);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13px;
  flex-shrink: 0;
}
.notice-card-head strong, .summary-card strong {
  font-family: var(--ui);
  font-size: 17px;
}
.notice-list, .check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.notice-list li, .check-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.7;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.notice-bullet, .check-dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 99px;
  background: var(--ink);
}
.notice-formula {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(246,224,164,.28);
  background: rgba(246,224,164,.08);
  color: var(--warn);
  font-family: var(--ui);
  font-size: 14px;
}
.summary-kicker {
  color: var(--mute);
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}
.faq-main { display: grid; gap: 16px; }
.faq-sidebar { display: grid; gap: 16px; position: sticky; top: 20px; }
.faq-list { margin-top: 16px; display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--fill);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--mute); font-size: 20px; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.75;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.qa-chatgpt .notice-index { background: rgba(16,163,127,.18); color: #7ee0c5; }
.qa-claude .notice-index { background: rgba(217,119,87,.18); color: #f0b49a; }
.qa-grok .notice-index { background: rgba(244,241,234,.12); color: var(--ink); }

@media (max-width: 980px) {
  .notice-grid, .summary-grid, .faq-layout { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; }
}
@media (max-width: 720px) {
  .pills, .actions, .steps, .form-row, .how { grid-template-columns: 1fr; }
  .row-head { flex-direction: column; }
  .nav { margin: 0; }
  .top { flex-wrap: wrap; }
  .product-page .inline .primary { margin-left: 0; width: 100%; }
  .qa-jump { margin-left: 0; width: 100%; }
  .prod-head { flex-wrap: wrap; }
}