:root { --bg:#f4f4f7; --surface:#fff; --ink:#111114; --ink-2:#55555f; --ink-3:#92929b; --line:rgb(17 17 20 / .1); --blue:#2f2bff; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.guide-shell { width:min(calc(100% - 48px),1080px); margin:0 auto; }
.guide-header { position:sticky; top:0; z-index:10; height:68px; border-bottom:1px solid var(--line); background:rgb(244 244 247 / .88); backdrop-filter:blur(18px); }
.guide-header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.guide-brand { display:inline-flex; align-items:center; gap:9px; font-size:17px; }.guide-mark { width:26px; height:26px; display:grid; grid-template-columns:repeat(2,1fr); gap:3px; padding:3px; border-radius:8px; background:var(--ink); }.guide-mark i { background:#fff; border-radius:2px; }.guide-mark i:nth-child(2){opacity:.75}.guide-mark i:nth-child(3){opacity:.55}
.guide-back { min-height:34px; display:inline-flex; align-items:center; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink-2); font-size:12px; font-weight:650; }
.guide-hero { padding:116px 0 92px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 75% 20%,rgb(92 83 255 / .12),transparent 30%),#f4f4f7; }
.guide-hero-inner { max-width:820px; }.guide-kicker,.side-label { display:block; color:var(--blue); font-size:10px; font-weight:780; letter-spacing:.15em; }.guide-hero h1 { margin:22px 0 0; font-size:clamp(52px,7vw,78px); line-height:1; letter-spacing:-.065em; }.guide-hero p { max-width:660px; margin:28px 0 0; color:var(--ink-2); font-size:17px; line-height:1.8; }.guide-button { min-height:46px; display:inline-flex; align-items:center; gap:12px; margin-top:34px; padding:0 18px; border-radius:12px; background:var(--blue); color:#fff; font-size:13px; font-weight:680; box-shadow:0 12px 28px rgb(47 43 255 / .2); }
.guide-content { padding:96px 0 120px; background:#fff; }.guide-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:74px; align-items:start; }.guide-steps { list-style:none; margin:0; padding:0; }.guide-steps li { display:grid; grid-template-columns:54px minmax(0,1fr); gap:22px; padding:34px 0; border-top:1px solid var(--line); }.guide-steps li:last-child { border-bottom:1px solid var(--line); }.step-number { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgb(47 43 255 / .08); color:var(--blue); font-size:10px; font-weight:760; }.guide-steps h2 { margin:2px 0 0; font-size:24px; letter-spacing:-.035em; }.guide-steps p { margin:10px 0 0; color:var(--ink-2); font-size:14px; line-height:1.75; }.guide-steps code,.guide-side code { padding:2px 5px; border-radius:5px; background:#f0f0f4; color:#3f3f47; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.guide-side { display:grid; gap:16px; position:sticky; top:94px; }.package-card,.tip-card { padding:26px; border:1px solid var(--line); border-radius:20px; background:#f7f7fa; }.package-card h2,.tip-card h2 { margin:13px 0 0; font-size:22px; line-height:1.2; letter-spacing:-.035em; }.package-card p { margin:12px 0 0; color:var(--ink-2); font-size:13px; line-height:1.65; }.package-card ul,.tip-card ul { list-style:none; margin:20px 0 0; padding:0; }.package-card li { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line); font-size:11px; }.package-card li span { color:var(--ink-3); }.tip-card { background:#17171c; color:#fff; border-color:transparent; }.tip-card .side-label { color:#8f87ff; }.tip-card ul { display:grid; gap:12px; }.tip-card li { position:relative; padding-left:16px; color:#b7b7c0; font-size:12px; line-height:1.6; }.tip-card li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:#7770ff; }
.guide-footer { padding:34px 0; background:#111114; color:#777782; font-size:11px; }.guide-footer .guide-shell { display:flex; justify-content:space-between; gap:20px; }.guide-footer a:hover { color:#fff; }
@media(max-width:780px){.guide-shell{width:min(calc(100% - 32px),1080px)}.guide-hero{padding:88px 0 72px}.guide-hero h1{font-size:52px}.guide-grid{grid-template-columns:1fr;gap:48px}.guide-side{position:static}.guide-content{padding:72px 0 92px}}
@media(max-width:520px){.guide-hero h1{font-size:44px}.guide-hero p{font-size:15px}.guide-steps li{grid-template-columns:44px minmax(0,1fr);gap:14px}.step-number{width:38px;height:38px}.guide-steps h2{font-size:20px}.package-card,.tip-card{padding:22px}.guide-footer .guide-shell{flex-direction:column}}

.guide-header-tools{display:flex;align-items:center;gap:10px}.guide-header .language-toggle{min-height:34px;display:inline-flex;align-items:center;padding:0 4px;border:0;background:transparent;color:var(--ink-2);font-size:12px;font-weight:650;line-height:1;cursor:pointer;transition:color 150ms ease}.guide-header .language-toggle:hover{color:var(--ink)}
@media(max-width:520px){.guide-header-tools{gap:7px}.guide-header .language-toggle{min-height:32px;padding:0 2px}.guide-back{padding:0 10px}}

/* Use the official MOSA mark in the guide header. */
.guide-mark{width:34px;height:34px;display:block;flex:0 0 auto;object-fit:contain;background:transparent;padding:0;border-radius:0}