/* xiats help center · Toolkit DESIGN-SYSTEM v5, public showroom layer. */
:root{
  --grad:linear-gradient(135deg,#2563eb 0%,#9333ea 100%);
  --grad-hover:linear-gradient(135deg,#1d4ed8 0%,#7e22ce 100%);
  --hero:linear-gradient(120deg,#edf8ff 0%,#f1edff 65%,#fff 100%);
  --ink:#0e1318;--ink-2:#4b4d52;--ink-3:#686b70;--line:#e4e7ec;
  --bg:#fff;--bg-soft:#f8f9fc;--brand:#6941c6;--blue:#2563eb;
  --selected:#f0ebff;--ok:#2f7613;--warn:#8a6108;
  --radius:16px;--maxw:960px;
  --font-display:40px;--font-title:32px;--font-section:24px;--font-card:18px;
  --font-body:16px;--font-reading:16px;--font-label:15px;--font-meta:14px;
}
:root{
  --surface:#fff;--nav-bg:#fff;--callout-bg:#faf8ff;--warn-bg:#fff9eb;
  --hover-line:#c5b4ec;--focus:#b69de9;--card-shadow:0 2px 8px rgba(24,34,48,.04);
  --primary-bg:var(--grad);--primary-hover:var(--grad-hover);--primary-ink:#fff;
  --danger:#b53333;--danger-bg:#fff0f0;--success-bg:#eaf4e7;--media-bg:#000;
  --icon-ink:#fff;--insights:#456de5;--human:#8b3df3;--image:#ee37a2;
  --video:#ef7b24;--download:#00a9b2;--more:#756b8d;
}
/* Static help pages opt in without rewriting the light workshop tokens. */
:root.theme-dark{
  color-scheme:dark;
  --bg:#050508;--surface:#101014;--bg-soft:#17171d;--nav-bg:#0b0b10;
  --ink:#f5f6f8;--ink-2:#a7abb3;--ink-3:#8e939b;--line:rgba(255,255,255,.08);
  --brand:#c7d2fe;--blue:#93b5ff;--selected:rgba(199,210,254,.1);
  --hero:radial-gradient(75% 120% at 0% 0%,rgba(37,99,235,.18),transparent 70%),radial-gradient(75% 120% at 100% 100%,rgba(147,51,234,.13),transparent 70%),var(--surface);
  --callout-bg:var(--surface);--hover-line:rgba(199,210,254,.45);--focus:#a5b4fc;
  --card-shadow:0 8px 24px rgba(0,0,0,.24);
  --primary-bg:#c7d2fe;--primary-hover:#dde4fe;--primary-ink:#0b0b12;
  --ok:#7ddc8a;--warn:#f1ba57;--warn-bg:#27211a;
  --danger:#ff9595;--danger-bg:#281b1e;--success-bg:#19231e;--media-bg:var(--bg);
  --insights:#86a9ff;--human:#c4a1ff;--image:#f99ad4;
  --video:#ffb56b;--download:#5cdbcf;--more:#ab9cc1;--icon-ink:#0b0b12;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);
  font:400 var(--font-reading)/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
img{max-width:100%;height:auto;display:block}

/* Brand and navigation. The mark is the same SVG used by the Web shell. */
.top{position:sticky;top:0;z-index:10;background:var(--nav-bg);border-bottom:1px solid var(--line)}
.top .in{max-width:var(--maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);font-size:var(--font-card)}
.brand .mk{width:32px;height:32px;flex:none;object-fit:contain}
.top nav{margin-left:auto;display:flex;gap:20px;font-size:var(--font-body);font-weight:500}
.top nav a{color:var(--ink-2);padding:8px 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
main{padding:32px 0 8px}
.crumb{font-size:var(--font-meta);color:var(--ink-3);margin:0 0 24px}
.crumb a{color:var(--ink-3)}
.crumb b{color:var(--ink-2);font-weight:600}
.hero{padding:8px 0 16px}
.hero .eyebrow{display:inline-block;font-size:var(--font-meta);font-weight:600;color:var(--brand);margin-bottom:10px;
  padding:3px 10px;border-radius:999px;background:var(--selected)}
h1{font-size:var(--font-title);font-weight:700;line-height:1.3;margin:.1em 0 .4em}
.help-index .hero{padding:32px;border-radius:24px;background:var(--hero);margin-bottom:32px}
.help-index h1{font-size:var(--font-display)}
.lead{font-size:var(--font-reading);font-weight:400;color:var(--ink-2);margin:0 0 8px;max-width:720px}
h2{font-size:var(--font-section);font-weight:700;line-height:1.4;margin:40px 0 16px;scroll-margin-top:88px}
h3{font-size:var(--font-card);font-weight:600;line-height:1.45;margin:28px 0 12px}
p{margin:12px 0;font-weight:400}
ul,ol{margin:12px 0;padding-left:24px}
li{margin:8px 0}
strong,b{font-weight:600}
figure{margin:24px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
figure img{width:100%;border-bottom:1px solid var(--line)}
figcaption{padding:12px 16px;font-size:var(--font-meta);color:var(--ink-3);line-height:1.6}

/* Instructions and persistent notes. */
.steps{list-style:none;counter-reset:s;padding:0;margin:24px 0}
.steps>li{counter-increment:s;position:relative;padding:2px 0 2px 48px;margin:20px 0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--selected);color:var(--brand);font-weight:600;display:grid;place-items:center;font-size:var(--font-body)}
.steps>li b{display:block;color:var(--ink);font-size:var(--font-reading)}
.steps>li span{color:var(--ink-2)}
.note{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--bg-soft);
  border-radius:10px;padding:16px;margin:20px 0;font-size:var(--font-body);color:var(--ink-2)}
.note.tip{border-left-color:var(--ok)}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note b{color:var(--ink)}

/* Filled Phosphor entry icons use stable category colors, not card order. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}
.card{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--surface);
  transition:border-color .16s,box-shadow .16s}
.card:hover{border-color:var(--hover-line);box-shadow:var(--card-shadow);text-decoration:none}
.card .ic{width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--icon-ink);margin-bottom:20px}
.card .ic svg{width:32px;height:32px;display:block}
.ic-insights{--category:var(--insights);background:var(--category)}.ic-human{--category:var(--human);background:var(--category)}.ic-image{--category:var(--image);background:var(--category)}
.ic-video{--category:var(--video);background:var(--category)}.ic-download{--category:var(--download);background:var(--category)}.ic-more{--category:var(--more);background:var(--category)}
.theme-dark .card .ic{color:var(--category);background:color-mix(in srgb,var(--category) 12%,transparent);border:1px solid color-mix(in srgb,var(--category) 40%,transparent)}
.card h3{margin:0 0 10px;color:var(--ink);font-size:var(--font-card)}
.card p{margin:0;font-size:var(--font-body);color:var(--ink-2);line-height:1.7}
.faq{margin:20px 0}
.faq details{border:1px solid var(--line);border-radius:12px;padding:2px 20px;margin:12px 0;background:var(--surface)}
.faq summary{cursor:pointer;font-size:var(--font-body);font-weight:600;color:var(--ink);padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋";color:var(--brand);font-weight:600;margin-right:12px}
.faq details[open] summary::before{content:"－"}
.faq details>p{margin:0 0 16px;color:var(--ink-2);font-size:var(--font-body)}
.next{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.next a{display:inline-flex;align-items:center;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:var(--font-label);font-weight:600;color:var(--ink-2)}
.next a:hover{border-color:var(--hover-line);color:var(--brand);text-decoration:none}
.cta{background:var(--callout-bg);color:var(--ink);border-radius:var(--radius);padding:24px;margin:32px 0;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta b{font-size:var(--font-card)}
.cta p{margin:8px 0 0;color:var(--ink-2);font-size:var(--font-body)}
.cta a{display:inline-flex;align-items:center;min-height:44px;background:var(--primary-bg);color:var(--primary-ink);font-size:var(--font-label);font-weight:600;border-radius:10px;padding:10px 18px;white-space:nowrap}
.cta a:hover{text-decoration:none;background:var(--primary-hover)}
footer.foot{border-top:1px solid var(--line);margin-top:40px;background:var(--bg-soft)}
footer.foot .in{max-width:var(--maxw);margin:0 auto;padding:32px 24px;font-size:var(--font-meta);color:var(--ink-3)}
footer.foot .links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
footer.foot .links a{color:var(--ink-2)}
footer.foot .cp{color:var(--ink-3)}
.card .new,.badge-new{display:inline-block;vertical-align:2px;margin-left:8px;font-size:var(--font-meta);font-weight:600;
  line-height:1.5;padding:2px 8px;border-radius:999px;color:var(--brand);background:var(--selected)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.compare figure{margin:0}
.compare figcaption{padding:12px 16px;font-size:var(--font-meta)}
.compare .tag{display:inline-block;font-size:var(--font-meta);font-weight:600;padding:2px 8px;border-radius:999px;margin-right:8px}
.compare .tag.before{color:var(--danger);background:var(--danger-bg)}.compare .tag.after{color:var(--ok);background:var(--success-bg)}
.vid{margin:24px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--media-bg)}
.vid video{width:100%;display:block}
.vid+.vid-cap{margin:-12px 0 24px;font-size:var(--font-meta);color:var(--ink-3)}
.ptable{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--font-body);font-variant-numeric:tabular-nums;
  display:block;overflow-x:auto;white-space:nowrap}
.ptable th,.ptable td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:top}
.ptable thead th{background:var(--bg-soft);color:var(--ink-2);font-size:var(--font-label);font-weight:600;white-space:nowrap}
.ptable td b{color:var(--ink)}
.ptable td .muted{color:var(--ink-3);font-size:var(--font-meta)}
.ptable tbody tr:hover{background:var(--callout-bg)}
@media(min-width:760px){.ptable{display:table;white-space:normal}}
.fn{border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:24px 0;background:var(--surface)}
.fn>h3{margin:0 0 12px;display:flex;align-items:center;gap:12px;font-size:var(--font-card)}
.fn>h3 .n{flex:none;width:32px;height:32px;border-radius:8px;background:var(--selected);color:var(--brand);
  display:grid;place-items:center;font-size:var(--font-label);font-weight:600}
.fn .meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.fn .meta span{font-size:var(--font-meta);color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.fn p{margin:12px 0;font-size:var(--font-body);color:var(--ink-2)}
.fn .ex{margin:12px 0 0;padding:12px 16px;border-radius:10px;background:var(--bg-soft);border-left:3px solid var(--brand);font-size:var(--font-body);color:var(--ink-2)}
.fn .ex b{color:var(--ink)}
.dl{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.dl a{display:inline-flex;flex-direction:column;gap:4px;border-radius:12px;padding:12px 18px;border:1px solid var(--line);background:var(--surface);min-width:190px}
.dl a:hover{border-color:var(--hover-line);text-decoration:none}
.dl a b{font-size:var(--font-label);color:var(--ink)}
.dl a span{font-size:var(--font-meta);color:var(--ink-3)}
.dl a.primary{background:var(--primary-bg);border-color:transparent}
.dl a.primary:hover{background:var(--primary-hover)}
.dl a.primary b,.dl a.primary span{color:var(--primary-ink)}
@media(max-width:680px){
  :root{--font-title:28px;--font-display:32px}
  .grid,.compare{grid-template-columns:1fr}
  .top nav{display:none}
  .wrap{padding:0 16px}
  .help-index .hero{padding:24px 20px}
  .cta{flex-direction:column;align-items:flex-start}
  .dl a{min-width:0;flex:1 1 100%}
  .next a{min-height:44px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Locale control stays available beside navigation on narrow screens. */
.help-language { display: inline-flex; align-items: center; }
.help-language select, .top nav a.help-language { min-height: 44px; min-width: 44px; max-width: 110px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--surface); color: inherit; font: inherit; justify-content: center; }
.help-language select:focus-visible, .top nav a.help-language:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.help-contact { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding-top: 24px; padding-bottom: 32px; }
.help-contact img { object-fit: contain; background: white; border-radius: 12px; }
.help-contact p { flex: 1; min-width: 200px; }
html[lang="en"] .top .in { gap: 12px; }
html[lang="en"] .top nav { flex-wrap: wrap; gap: 12px; }
html[lang="en"] .hero h1 { line-height: 1.2; overflow-wrap: anywhere; }
@media (max-width: 540px) { .top .in { flex-wrap: wrap; } .top nav { margin-left: auto; gap: 10px; } .help-language select, .top nav a.help-language { max-width: 94px; padding: 0 6px; } }
@media (max-width: 680px) { .top nav { display: flex; } .top nav > a { display: none; } }