.quickstart-page {
  --monitor-blue: #7bc7ff;
  --signal-blue: #4f82ff;
  --signal-green: #56d7a3;
  --on-air: #ff5c62;
  --control-night: #0b1018;
  --control-panel: #111925;
  --control-line: #d9e0e8;
  --paper: #f1f4f8;
  color: #263342;
  background: var(--paper);
}

.quickstart-page .shell { width: min(calc(100% - 56px), 1240px); }
.quickstart-page .site-header { border-color: rgba(123, 199, 255, .15); background: rgba(11, 16, 24, .92); }
.quickstart-page .site-header::after { display: none; }
.quickstart-page .header-nav { color: #a3afbd; }
.quickstart-page .header-nav a,
.quickstart-page .header-download { border-radius: 4px; }
.quickstart-page .header-download { border-color: rgba(123, 199, 255, .42); color: #e9f6ff; background: rgba(79, 130, 255, .12); }

.guide-hero { position: relative; overflow: hidden; padding: 150px 0 84px; color: #f5f8fc; background: var(--control-night); }
.guide-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(123, 199, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 199, 255, .07) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .62) 62%, transparent 100%); }
.guide-hero::after { position: absolute; right: -8%; bottom: -55%; width: 600px; height: 600px; border-radius: 50%; background: rgba(79, 130, 255, .12); filter: blur(90px); content: ""; }
.guide-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .7fr); align-items: center; gap: 84px; }
.guide-hero .hero-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #a8b8ca; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.guide-hero .hero-kicker span { width: 8px; height: 8px; border-radius: 1px; background: var(--on-air); box-shadow: 0 0 0 4px rgba(255, 92, 98, .12); }
.guide-hero h1 { margin: 0; font-size: clamp(48px, 5vw, 68px); font-weight: 790; letter-spacing: -.07em; line-height: 1.03; }
.guide-hero h1 em { color: var(--monitor-blue); font-style: normal; }
.guide-hero-copy { max-width: 620px; margin: 28px 0 0; color: #a8b4c2; font-size: 16px; line-height: 1.9; }

.guide-status { border: 1px solid rgba(123, 199, 255, .18); border-radius: 7px; background: rgba(13, 20, 30, .86); box-shadow: 18px 18px 0 rgba(79, 130, 255, .05), 0 30px 70px rgba(0, 0, 0, .28); }
.status-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(123, 199, 255, .13); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 9px; letter-spacing: .08em; }
.status-head span { display: flex; align-items: center; gap: 8px; color: #dce9f6; }
.status-head span i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green); box-shadow: 0 0 10px rgba(86, 215, 163, .6); }
.status-head b { color: #66788c; font-weight: 600; }
.guide-status ol { margin: 0; padding: 6px 16px; list-style: none; }
.guide-status li { display: grid; grid-template-columns: 34px 1fr 8px; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(123, 199, 255, .08); }
.guide-status li:last-child { border: 0; }
.guide-status li span { color: #64768a; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 9px; }
.guide-status li strong { color: #dbe6f1; font-size: 12px; font-weight: 620; }
.guide-status li i { width: 7px; height: 7px; border: 1px solid #405268; border-radius: 50%; }
.guide-status > p { margin: 0; padding: 14px 16px; border-top: 1px solid rgba(123, 199, 255, .12); color: #718195; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 9px; }
.guide-status > p strong { color: var(--monitor-blue); }

.guide-section { padding: 78px 0 110px; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: space-between; gap: 90px; }
.guide-nav { position: sticky; top: 98px; align-self: start; }
.guide-nav > p { margin: 0 0 14px; color: #8290a0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.guide-nav nav { display: grid; border-top: 1px solid #d7dee7; }
.guide-nav nav a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 13px 10px; border-bottom: 1px solid #d7dee7; color: #647386; font-size: 12px; transition: color .18s ease, background .18s ease; }
.guide-nav nav a span { color: #9ba7b5; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 9px; }
.guide-nav nav a:hover,
.guide-nav nav a.is-active { color: #183e67; background: #e5edf6; }
.guide-nav nav a.is-active span { color: #397cbc; }
.guide-nav-support { display: grid; gap: 5px; margin-top: 24px; padding: 15px; border: 1px solid #d7dee7; border-radius: 4px; background: rgba(255, 255, 255, .45); }
.guide-nav-support span { color: #7a8796; font-size: 10px; }
.guide-nav-support a { color: #2869ad; font-size: 11px; font-weight: 700; }

.guide-content { min-width: 0; }
.guide-intro { padding: 0 0 64px; border-bottom: 1px solid #ccd6e1; }
.guide-intro > p:first-child,
.step-kicker,
.guide-finish > p { margin: 0 0 12px; color: #397cbc; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.guide-intro h2,
.step-body h2,
.guide-finish h2 { margin: 0; color: #15202d; letter-spacing: -.045em; }
.guide-intro h2 { max-width: 660px; font-size: clamp(30px, 4vw, 42px); line-height: 1.16; }
.guide-intro > p:nth-of-type(2) { margin: 22px 0 0; color: #667587; font-size: 15px; line-height: 1.85; }
.requirements { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 25px; }
.requirements span { display: inline-flex; align-items: center; gap: 7px; color: #536477; font-size: 12px; }
.requirements svg { width: 15px; height: 15px; color: #2a9c72; }

.guide-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 30px; scroll-margin-top: 110px; }
.step-marker { display: flex; flex-direction: column; align-items: center; }
.step-marker span { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border: 1px solid #a9bfd6; border-radius: 4px; color: #2869ad; background: #e5edf6; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; font-weight: 800; }
.step-marker i { width: 1px; flex: 1; min-height: 64px; background: #ccd6e1; }
.step-body { padding: 66px 0 72px; border-bottom: 1px solid #ccd6e1; }
.step-body h2 { font-size: 31px; line-height: 1.2; }
.step-body > p:not(.step-kicker) { margin: 18px 0 0; color: #667587; font-size: 14px; line-height: 1.85; }
.step-body > ol { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: guide-item; }
.step-body > ol li { position: relative; margin-top: 13px; padding-left: 36px; color: #4e5f72; font-size: 14px; line-height: 1.75; counter-increment: guide-item; }
.step-body > ol li::before { position: absolute; top: 2px; left: 0; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #c4d0dd; border-radius: 50%; color: #397cbc; background: #fff; content: counter(guide-item); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 9px; font-weight: 700; }
.step-action { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 0 18px; border-radius: 4px; color: #07111d; background: var(--monitor-blue); font-size: 12px; font-weight: 750; box-shadow: 0 10px 24px rgba(45, 122, 194, .15); }
.step-action:hover { color: #07111d; background: #a3dbff; transform: translateY(-1px); }
.step-action svg { width: 16px; height: 16px; }
.guide-note,
.guide-callout { margin-top: 27px; padding: 17px 18px; border-left: 3px solid var(--signal-blue); background: #e6edf5; }
.guide-note strong,
.guide-callout span { color: #263c54; font-size: 12px; }
.guide-note p,
.guide-callout p { margin: 6px 0 0; color: #687789; font-size: 12px; line-height: 1.7; }
.guide-callout { border-left-color: var(--signal-green); background: #e7f1ee; }
.guide-callout.is-warning { border-left-color: #e3a137; background: #f3ede2; }

.project-schematic { display: grid; grid-template-columns: 180px 68px 1fr; align-items: center; margin-top: 30px; padding: 22px; border: 1px solid #d1dbe6; border-radius: 4px; background: #e8edf3; }
.project-core { display: grid; gap: 6px; padding: 15px; border: 1px solid #9fb9d3; border-radius: 4px; background: #f8fafc; }
.project-core small { color: #7a8999; font-size: 9px; }
.project-core strong { color: #1c3855; font-size: 12px; }
.project-links { display: grid; gap: 8px; }
.project-links i { display: block; height: 1px; background: #aebdcb; }
.project-assets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.project-assets span { padding: 10px; border: 1px solid #cad5e0; border-radius: 3px; color: #587087; background: #f8fafc; font-size: 10px; text-align: center; }
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
.content-grid > div { min-height: 136px; padding: 18px; border: 1px solid #d0dae5; border-radius: 4px; background: rgba(255, 255, 255, .58); }
.content-grid span { color: #4d83b9; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 8px; letter-spacing: .1em; }
.content-grid strong { display: block; margin-top: 13px; color: #21364c; font-size: 14px; }
.content-grid p { margin: 7px 0 0; color: #6a7888; font-size: 11px; line-height: 1.65; }

.preflight-panel { margin-top: 30px; overflow: hidden; border: 1px solid #203248; border-radius: 5px; color: #dce9f6; background: var(--control-panel); box-shadow: 12px 12px 0 rgba(79, 130, 255, .05); }
.preflight-head { display: flex; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(123, 199, 255, .12); font-size: 10px; }
.preflight-head span { display: flex; align-items: center; gap: 8px; }
.preflight-head span i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green); box-shadow: 0 0 10px rgba(86, 215, 163, .55); }
.preflight-head strong { color: var(--monitor-blue); font-weight: 600; }
.preflight-panel ul { margin: 0; padding: 8px 16px; list-style: none; }
.preflight-panel li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(123, 199, 255, .08); color: #8999aa; font-size: 11px; }
.preflight-panel li:last-child { border: 0; }
.preflight-panel li b { color: #81dcb7; font-weight: 600; }

.guide-finish { margin: 72px 0 0 82px; padding: 34px; border-radius: 5px; color: #fff; background: #172435; }
.guide-finish > p { color: var(--monitor-blue); }
.guide-finish h2 { max-width: 560px; color: #f1f6fb; font-size: 30px; line-height: 1.25; }
.guide-finish > div { display: flex; gap: 18px; margin-top: 24px; }
.guide-finish a { display: inline-flex; align-items: center; gap: 8px; color: #b9dfff; font-size: 12px; font-weight: 700; }
.guide-finish a:hover { color: #fff; }
.guide-finish svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .guide-nav nav a,
  .step-action { transition: none; }
}

@media (max-width: 900px) {
  .guide-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .guide-status { max-width: 560px; }
  .guide-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 42px; }
}

@media (max-width: 760px) {
  .quickstart-page .shell { width: min(calc(100% - 34px), 1240px); }
  .guide-hero { padding: 122px 0 62px; }
  .guide-hero h1 { font-size: 41px; }
  .guide-hero-copy { font-size: 14px; }
  .guide-status { box-shadow: 9px 9px 0 rgba(79, 130, 255, .05); }
  .guide-section { padding: 52px 0 76px; }
  .guide-layout { display: block; }
  .guide-nav { position: static; margin-bottom: 44px; }
  .guide-nav nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-nav nav a { border-right: 1px solid #d7dee7; }
  .guide-intro { padding-bottom: 48px; }
  .guide-step { grid-template-columns: 38px minmax(0, 1fr); gap: 18px; }
  .step-marker span { width: 34px; height: 34px; }
  .step-body { padding: 48px 0 54px; }
  .step-body h2 { font-size: 26px; }
  .content-grid { grid-template-columns: 1fr; }
  .project-schematic { grid-template-columns: 1fr; gap: 10px; }
  .project-links { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .project-links i { width: 1px; height: 18px; justify-self: center; }
  .guide-finish { margin: 54px 0 0; padding: 26px; }
  .guide-finish h2 { font-size: 25px; }
}

@media (max-width: 460px) {
  .guide-nav nav { grid-template-columns: 1fr; }
  .guide-hero h1 { font-size: 36px; }
  .requirements { display: grid; }
  .guide-step { grid-template-columns: 1fr; }
  .step-marker { display: none; }
  .project-assets { grid-template-columns: 1fr; }
  .guide-finish > div { align-items: flex-start; flex-direction: column; }
}

/* ---------- Footer ---------- */
.quickstart-page .site-footer {
  background: var(--control-night);
  border-top: 1px solid rgba(123, 199, 255, .1);
}
.quickstart-page .footer-links a:hover { color: #d4e6f5; }
.quickstart-page .copyright { color: #55637a; }