.guide-shell { width: min(1040px, 100%); }
.guide-topbar { margin-bottom: 18px; }
.guide-brand { color: inherit; text-decoration: none; }
.guide-main { display: grid; gap: 30px; }
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: 26px; padding: 30px; border: 1px solid #303b4d; border-radius: 18px; background: linear-gradient(135deg, #151b28, #10141c 62%, #141923); }
.guide-hero h1 { max-width: 600px; margin: 9px 0 12px; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.04; letter-spacing: -.055em; }
.guide-hero-copy > p:not(.eyebrow) { max-width: 580px; color: #b6c0d0; font-size: .97rem; line-height: 1.7; }
.guide-hero-image { width: 100%; filter: drop-shadow(0 18px 36px rgb(0 0 0 / 35%)); }
.guide-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.guide-text-link, .source-links a, .guide-footer a { color: var(--cyan); font-size: .84rem; font-weight: 700; text-decoration: none; }
.guide-text-link:hover, .source-links a:hover, .guide-footer a:hover { text-decoration: underline; }
.guide-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.guide-facts span { padding: 6px 9px; border: 1px solid #343e50; border-radius: 999px; color: #aeb9cb; background: #111722; font-size: .69rem; }
.guide-section { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); scroll-margin-top: 20px; }
.section-heading { max-width: 720px; margin-bottom: 20px; }
.section-heading h2 { margin: 6px 0 7px; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -.035em; }
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.65; }
.guide-steps { display: grid; gap: 12px; }
.guide-step { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); align-items: center; gap: 20px; padding: 15px; border: 1px solid #293140; border-radius: 12px; background: #10141c; }
.guide-step > img { display: block; width: 100%; max-height: 290px; object-fit: contain; border-radius: 9px; }
.step-copy { display: flex; align-items: flex-start; gap: 13px; }
.step-number { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #41516b; border-radius: 10px; color: var(--cyan); background: #162233; font-size: .72rem; font-weight: 800; }
.step-copy h3 { margin: 2px 0 6px; font-size: 1rem; }
.step-copy p { margin: 0; color: #aeb7c7; font-size: .81rem; line-height: 1.65; }
.step-copy strong { color: #e5eaf2; }
.guide-note { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid #35455c; border-radius: 9px; color: #b5c4d9; background: #131d2b; font-size: .78rem; line-height: 1.6; }
.warning-note { border-color: #65542a; color: #e1d2aa; background: #211e14; }
.download-section { border-color: #3c4860; background: linear-gradient(180deg, #151a24, #12151e); }
.download-card { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid #38465c; border-radius: 12px; background: #0f141d; }
.download-card-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 12px; color: #10151d; background: var(--cyan); font-size: 1.7rem; font-weight: 800; }
.download-card-copy { display: grid; gap: 4px; min-width: 0; }
.download-card-copy strong { font-size: .9rem; }
.download-card-copy span { color: var(--muted); font-size: .73rem; }
.download-card .primary-button { margin-left: auto; white-space: nowrap; text-decoration: none; }
.source-links { margin: 11px 0 23px; color: var(--muted); font-size: .76rem; }
.hash-details { margin: -14px 0 22px; color: var(--muted); font-size: .73rem; }
.hash-details summary { cursor: pointer; }
.hash-details code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: #b6c7dc; font-size: .68rem; }
.execution-note { margin-top: 16px; border-color: #40503b; color: #c3d0bb; background: #151d17; }
.faq-section details { border-top: 1px solid var(--line); }
.faq-section summary { padding: 13px 2px; color: #e0e6f0; cursor: pointer; font-size: .87rem; font-weight: 700; }
.faq-section details p { margin: -2px 0 14px; max-width: 780px; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.guide-footer { display: flex; justify-content: space-between; gap: 14px; padding: 2px 4px 12px; color: var(--muted); font-size: .73rem; }
.guide-footer span { text-align: right; }
.guide-link { display: inline-flex; align-items: center; color: var(--cyan); text-decoration: none; }
.guide-link:hover { color: #a6efff; }
.welcome-dialog { width: min(510px, calc(100% - 28px)); padding: 22px; border: 1px solid #3b4a60; border-radius: 16px; color: var(--text); background: #121823; box-shadow: 0 24px 80px rgb(0 0 0 / 55%); }
.welcome-dialog::backdrop { background: rgb(3 6 12 / 78%); backdrop-filter: blur(4px); }
.welcome-copy h2 { margin: 6px 0; font-size: 1.45rem; }
.welcome-copy p:last-child { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.welcome-dialog > img { display: block; width: 100%; margin: 14px 0; border-radius: 10px; }
.welcome-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.welcome-actions a { text-decoration: none; }

@media (max-width: 720px) {
  .guide-hero { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .guide-hero-image { max-width: 480px; justify-self: center; }
  .guide-section { padding: 18px; }
  .guide-step { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .guide-step > img { max-height: 230px; }
  .guide-note { grid-column: auto; }
}
@media (max-width: 480px) {
  .download-card { align-items: flex-start; flex-wrap: wrap; }
  .download-card-copy { flex: 1; padding-top: 4px; }
  .download-card .primary-button { width: 100%; margin-left: 0; text-align: center; }
  .guide-footer { flex-direction: column; }
  .guide-footer span { text-align: left; }
}
