.guide-page { overflow:auto; background:#0b101c; color:#eff3ed; }
.guide-layout { max-width:1080px; margin:auto; padding:0 40px; padding-top:env(safe-area-inset-top); }
.guide-nav,.guide-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid #304151; }
.guide-nav nav,.guide-footer nav { display:flex; gap:24px; }
.guide-nav a,.guide-footer a { display:inline-flex; align-items:center; min-height:40px; font-size:12px; }
.guide-brand { gap:12px; color:#f4d993; font-weight:700; letter-spacing:1px; }
.guide-brand img { image-rendering:pixelated; }
.guide-page a:hover { color:#8ef0d0; }
.guide-hero { display:grid; grid-template-columns:1fr 240px; align-items:center; gap:48px; padding:68px 0 60px; }
.guide-eyebrow { margin:0 0 16px; color:#d6b978; font:700 11px/1.5 monospace; letter-spacing:2px; }
.guide-hero h1 { margin:0 0 24px; font-size:clamp(32px,4.6vw,52px); line-height:1.5; letter-spacing:-2px; }
.guide-hero h1 span { color:#84e7cb; }
.guide-intro { max-width:600px; color:#b5c7d2; font-size:15px; line-height:2; }
.guide-icon { width:100%; height:auto; image-rendering:pixelated; }
.guide-page .guide-cta { display:inline-flex; align-items:center; justify-content:center; gap:32px; min-height:52px; margin-top:16px; padding:14px 22px; border:1px solid #81baa4; background:#1d433b; box-shadow:inset 0 0 0 3px #122b29; color:#effff0; font-size:14px; font-weight:700; }
.guide-page .guide-cta:hover { background:#28584a; }
.guide-caption { margin:16px 0 0; font-size:11px; line-height:1.8; color:#91a6b6; }
.guide-section { padding:48px 0; border-top:1px solid #304151; }
.guide-section h2 { margin:0 0 28px; font-size:clamp(21px,2.8vw,28px); line-height:1.6; letter-spacing:-1px; }
.guide-modes { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.guide-modes article { padding:28px; border:1px solid #344a5b; background:#101e2c; }
.guide-mode-number { color:#7ee0c5; font:11px/1.6 monospace; letter-spacing:1px; }
.guide-modes h3 { margin:16px 0; font-size:20px; color:#f6dfab; }
.guide-modes p,.guide-howto p,.guide-faq p { margin:12px 0 0; color:#b2c4cf; font-size:13px; line-height:2; word-break:keep-all; overflow-wrap:anywhere; }
.guide-modes a { color:#92e3cd; text-decoration:underline; text-underline-offset:4px; }
.guide-howto { display:grid; grid-template-columns:1fr 1.4fr; gap:40px; }
.guide-howto ol { margin:0; padding-left:26px; }
.guide-howto li { padding:0 0 26px 12px; color:#e7d2a1; }
.guide-howto li:last-child { padding-bottom:0; }
.guide-howto strong { font-size:16px; }
.guide-howto p { margin-top:8px; }
.guide-faq details { border-bottom:1px solid #304151; padding:20px 0; }
.guide-faq summary { cursor:pointer; font-size:14px; line-height:1.8; color:#e8e9d9; }
.guide-faq summary:focus-visible { outline:2px solid #81f5c0; outline-offset:6px; }
.guide-outro { padding:30px 0 56px; text-align:center; }
.guide-outro p { color:#f6dfab; font-size:20px; line-height:1.8; }
.guide-footer { border-top:1px solid #304151; border-bottom:0; padding-bottom:max(24px,env(safe-area-inset-bottom)); color:#99b0bf; font-size:12px; }
@media(max-width:700px) {
  .guide-layout { padding-left:22px; padding-right:22px; }
  .guide-nav { gap:12px; padding:16px 0; }
  .guide-nav nav,.guide-footer nav { gap:16px; }
  .guide-nav a { font-size:10px; }
  .guide-brand { gap:8px; letter-spacing:0; }
  .guide-brand img { width:26px; height:26px; }
  .guide-hero { grid-template-columns:1fr; gap:0; padding:40px 0; }
  .guide-icon { display:none; }
  .guide-intro { font-size:13px; }
  .guide-caption { font-size:10px; }
  .guide-section { padding:32px 0; }
  .guide-modes,.guide-howto { grid-template-columns:1fr; gap:16px; }
  .guide-modes article { padding:22px; }
  .guide-howto h2 br { display:none; }
  .guide-footer { flex-direction:column; align-items:flex-start; gap:8px; }
}