html { scroll-behavior: smooth; }
body { background: #fff; }
.onboarding-shell { display: grid; grid-template-columns: 210px minmax(0, 920px); gap: clamp(36px, 6vw, 86px); width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 96px; }
.onboarding-sidebar { position: sticky; top: calc(var(--nav-height) + 24px); align-self: start; }
.onboarding-toc { display: flex; flex-direction: column; }
.onboarding-toc .docs-sidebar__link { margin-bottom: 2px; }
.onboarding-content { min-width: 0; }
.onboarding-breadcrumb { display: flex; gap: 8px; margin-bottom: 28px; color: var(--text-faint); font: 12px var(--font-mono); }
.onboarding-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.onboarding-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); gap: 48px; align-items: center; padding: 20px 0 72px; }
.onboarding-kicker, .section-heading > span { display: block; margin-bottom: 14px; color: var(--brand); font: 600 11px/1 var(--font-mono); letter-spacing: .1em; }
.onboarding-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 68px); line-height: 1.02; letter-spacing: -.055em; }
.onboarding-hero p { max-width: 650px; margin: 25px 0 0; color: var(--text-muted); font-size: 17px; line-height: 1.75; }
.onboarding-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.terminal-preview { overflow: hidden; border: 1px solid #262626; border-radius: 14px; background: #101010; box-shadow: 0 26px 70px rgba(0,0,0,.15); transform: rotate(1.5deg); }
.terminal-preview__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #292929; color: #858585; font: 10px var(--font-mono); }
.terminal-preview__bar i { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.terminal-preview__bar i:first-child { background: #f06a62; }.terminal-preview__bar i:nth-child(2) { background: #e5b94c; }.terminal-preview__bar i:nth-child(3) { background: #5dbc70; }.terminal-preview__bar span { margin-left: auto; }
.terminal-preview__body { display: flex; flex-direction: column; gap: 18px; padding: 26px 22px; color: #d4d4d4; font: 12px/1.4 var(--font-mono); }
.terminal-preview__body span { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; }
.terminal-preview__body b { color: #646464; font-weight: 400; }.terminal-preview__body em { padding: 3px 6px; border-radius: 4px; background: rgba(104,245,213,.1); color: #68f5d5; font-style: normal; font-size: 10px; }
.onboarding-section { padding: 72px 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--nav-height) + 16px); }
.section-heading { max-width: 690px; margin-bottom: 34px; }.section-heading h2 { margin: 0; font-size: clamp(29px, 4vw, 42px); line-height: 1.12; letter-spacing: -.035em; }.section-heading p { margin: 15px 0 0; color: var(--text-muted); line-height: 1.7; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.download-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }.download-card:hover { transform: translateY(-2px); border-color: #aaa; box-shadow: 0 18px 45px rgba(0,0,0,.07); }
.download-card__platform { color: var(--text-faint); font: 600 10px var(--font-mono); letter-spacing: .08em; }.download-card h3 { margin: 8px 0; font-size: 21px; }.download-card p { min-height: 47px; margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.65; }
.download-card__meta { display: flex; gap: 6px; margin: 20px 0; }.download-card__meta span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text-faint); font: 10px var(--font-mono); }
.download-button { display: flex; justify-content: space-between; margin-top: auto; padding: 12px 14px; border-radius: 7px; background: #111; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.download-button:hover,
.download-button:focus,
.download-button:active,
.download-button:visited { background: #111; color: #fff; border-color: transparent; }
.advanced-download { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }.advanced-download summary { padding: 14px 16px; cursor: pointer; font-size: 13px; font-weight: 600; }.advanced-download div { padding: 0 16px 16px; color: var(--text-muted); font-size: 13px; }.advanced-download p { margin: 0 0 8px; }.advanced-download a { color: var(--brand); }
.step-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.step { padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); }.step b { color: var(--brand); font: 500 11px var(--font-mono); }.step h3 { margin: 34px 0 8px; font-size: 15px; }.step p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.security-grid > div { padding: 23px; border-radius: var(--radius-md); background: #f7faf9; }.security-grid strong { font-size: 15px; }.security-grid p { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.warning-box { margin-bottom: 18px; padding: 20px 22px; border: 1px solid #e9c775; border-radius: var(--radius-md); background: #fff9e9; }.warning-box p { margin: 0; color: #765f2a; font-size: 14px; line-height: 1.65; }
.instruction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.instruction-grid > div { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); }.instruction-grid > div > span { color: var(--text-faint); font: 600 10px var(--font-mono); letter-spacing: .08em; }.instruction-grid h3 { margin: 8px 0 15px; }.instruction-grid ol { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 13px; line-height: 1.9; }.instruction-grid pre { position: relative; margin: 16px 0 0; padding: 15px 66px 15px 15px; overflow-x: auto; border-radius: 7px; background: #111; color: #eee; font: 11px/1.6 var(--font-mono); }.copy-command { position: absolute; top: 9px; right: 9px; padding: 5px 8px; border: 1px solid #444; border-radius: 4px; background: #222; color: #ddd; font: 10px var(--font-mono); cursor: pointer; }
.onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 0; padding: 34px; border-radius: 14px; background: #111; color: #fff; }.onboarding-footer strong { font-size: 23px; }.onboarding-footer p { margin: 5px 0 0; color: #aaa; }.onboarding-footer > div:last-child { display: flex; gap: 9px; }.onboarding-footer .btn-ghost { border-color: #444; color: #fff; }
@media (max-width: 980px) { .onboarding-shell { grid-template-columns: 1fr; }.onboarding-sidebar { display: none; }.onboarding-hero { grid-template-columns: 1fr; }.terminal-preview { max-width: 520px; }.step-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .onboarding-shell { width: min(100% - 28px, 920px); padding-top: 30px; }.onboarding-hero { padding-bottom: 55px; }.onboarding-hero h1 { font-size: 42px; }.download-grid, .security-grid, .instruction-grid { grid-template-columns: 1fr; }.step-grid { grid-template-columns: 1fr 1fr; }.checksum-list > div { grid-template-columns: 1fr; gap: 7px; }.onboarding-footer { align-items: flex-start; flex-direction: column; }.site-nav__links { display: none; } }
@media (max-width: 430px) { .step-grid { grid-template-columns: 1fr; }.onboarding-hero__actions, .onboarding-footer > div:last-child { width: 100%; flex-direction: column; }.onboarding-hero__actions .btn, .onboarding-footer .btn { justify-content: center; }.terminal-preview { transform: none; } }
