/* Shared homepage palette and navigation for exported tutorial pages. */
:root { --bg:#fcfbff; --surface:#fff; --surface-strong:#fff; --text:#191728; --muted:#625f70; --line:#e8e4f0; --brand:#6d5df5; --brand-soft:#f0edff; --shadow:0 12px 36px rgba(77,60,133,.06); }
body { background:#fcfbff; font-family:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.tutorial-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); border-bottom:1px solid #e9e5f1; backdrop-filter:blur(18px); }
.tutorial-nav-inner { max-width:1240px; margin:auto; min-height:84px; padding:16px 24px; display:flex; align-items:center; gap:24px; }
.tutorial-brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:18px; font-weight:850; white-space:nowrap; }
.tutorial-brand img { width:42px; height:42px; border-radius:50%; filter:saturate(1.12) contrast(1.06); box-shadow:0 0 0 3px rgba(255,201,91,.24),0 8px 22px rgba(109,93,245,.23); }
.tutorial-menu { display:flex; gap:2px; margin-left:auto; }
.tutorial-menu a { padding:8px 9px; border-radius:999px; font-size:13.5px; font-weight:600; text-decoration:none; color:#625f70; white-space:nowrap; }
.tutorial-menu a:hover,.tutorial-menu a[aria-current] { color:#5547cf; background:#f0edff; }
.tutorial-actions { display:flex; gap:9px; }
.tutorial-actions a { border:1px solid #e3deee; padding:11px 17px; border-radius:999px; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; background:#fff; }
.tutorial-actions .tutorial-buy,.cta { color:#fff; border-color:transparent; background:linear-gradient(135deg,#7868ff,#5748d7); box-shadow:0 10px 24px rgba(91,73,219,.22); }
.tutorial-actions .tutorial-buy:hover,.cta:hover { background:#5143cf; }
.page { max-width:1240px; padding:36px 24px 64px; }
.hero { border:1px solid #e8e1f3; border-radius:28px; padding:36px 40px; background:radial-gradient(ellipse at 90% 10%,rgba(255,211,153,.23),transparent 50%),linear-gradient(135deg,#fff,#f4f0ff); box-shadow:var(--shadow); }
.hero h1 { color:#211b38; font-size:clamp(28px,3vw,42px); line-height:1.3; letter-spacing:-.035em; }
.summary { color:#625f70; line-height:1.85; }
.eyebrow { background:#f0edff; color:#5547cf; border-color:#e4def5; }
.meta-chip { background:rgba(255,255,255,.8); color:#716b83; border-color:#e7e1f0; }
.crumbs { color:#8a8795; }
.crumbs a:hover { color:#6d5df5; }
.layout { grid-template-columns:200px minmax(0,1fr) 220px; gap:20px; }
.content-card,.toc-card,.side-card { background:#fff; border-color:#e8e4f0; border-radius:24px; box-shadow:var(--shadow); }
.toc-card,.side-stack { top:104px; }
.content-card { padding:30px; }
.article-body p,.article-body li,.article-body blockquote { color:#494355; }
.article-body h2,.article-body h3,.article-body h4 { scroll-margin-top:110px; }
.article-body ul,.article-body ol,.article-body details { background:#faf8ff; border-color:#e8e2f2; }
.article-body blockquote { background:#f6f3ff; border-left-color:#6d5df5; }
.article-body th { background:#f0edff; color:#39304f; }
.article-body :not(pre)>code { background:#f0edff; color:#5547cf; }
.quick-links a,.related-links a { border-color:#e8e2f2; background:#faf8ff; }
.quick-links a:hover,.related-links a:hover { background:#f0edff; border-color:#d5cbed; color:#5547cf; }
.footer { border-top:1px solid #e8e4f0; padding-top:28px; color:#8a8795; }
@media(max-width:1120px) { .tutorial-nav-inner { gap:14px; } .tutorial-menu a { padding:8px 6px; font-size:12px; } .layout { grid-template-columns:190px minmax(0,1fr); } .side-stack { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; } }
@media(max-width:900px) { .tutorial-nav-inner { flex-wrap:wrap; min-height:0; padding:14px 20px; } .tutorial-brand img { width:36px; height:36px; } .tutorial-brand { font-size:16px; } .tutorial-actions { margin-left:auto; } .tutorial-menu { order:3; width:100%; margin:0; overflow-x:auto; padding-bottom:2px; } .tutorial-menu a { font-size:13px; padding:8px 11px; } .layout { display:block; } .toc-card { position:static; margin-bottom:20px; } .side-stack { margin-top:20px; } .article-body h2,.article-body h3,.article-body h4 { scroll-margin-top:150px; } }
@media(max-width:600px) { .page { padding:22px 16px 40px; } .hero { padding:24px 20px; border-radius:24px; } .content-card { padding:24px 20px; } .tutorial-actions a { padding:9px 14px; font-size:12.5px; } .tutorial-actions .tutorial-query { display:none; } .side-stack { display:block; } .side-card+.side-card { margin-top:20px; } }

/* 导出页共用移动导航与深色页脚。 */
.tutorial-toggle { display:none; width:42px; height:42px; padding:10px; border:1px solid #e3deee; border-radius:12px; background:#fff; }
.tutorial-mobile-query { display:none; }
.tutorial-toggle span { display:block; height:2px; margin:4px 0; border-radius:2px; background:#393451; }
.static-footer { margin-top:46px; padding:48px 24px 24px; color:#d9d3e8; background:#171321; }
.static-footer-inner { width:min(1180px,100%); margin:auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px; }
.static-footer h2,.static-footer h3 { margin:0 0 14px; color:#fff; }
.static-footer h2 { font-size:22px; }
.static-footer h3 { font-size:14px; }
.static-footer p { margin:0; max-width:520px; color:#aaa2ba; font-size:14px; line-height:1.8; }
.static-footer-links { display:grid; gap:10px; }
.static-footer a { color:#d9d3e8; text-decoration:none; font-size:14px; }
.static-footer a:hover { color:#fff; }
.static-footer-bottom { width:min(1180px,100%); margin:34px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); color:#8f879d; font-size:12px; }
@media(max-width:900px) {
  .tutorial-nav-inner { flex-wrap:nowrap; }
  .tutorial-toggle { display:block; margin-left:auto; order:2; }
  .tutorial-actions { order:1; margin-left:auto; }
  .tutorial-menu { display:none; position:absolute; top:100%; left:14px; right:14px; width:auto; padding:10px; border:1px solid #e7e1ef; border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(48,36,88,.14); overflow:visible; }
  .tutorial-menu.open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tutorial-menu a { padding:11px 12px; }
  .tutorial-menu .tutorial-mobile-query { display:block; }
  .static-footer-inner { grid-template-columns:1fr 1fr; }
  .static-footer-brand { grid-column:1/-1; }
}
@media(max-width:600px) {
  .tutorial-nav-inner { padding:12px 14px; gap:9px; }
  .tutorial-actions .tutorial-buy { padding:9px 12px; }
  .tutorial-menu.open { grid-template-columns:1fr; }
  .static-footer { padding:38px 20px 22px; }
  .static-footer-inner { grid-template-columns:1fr; gap:30px; }
  .static-footer-brand { grid-column:auto; }
}