.guide-page { background: #080a0c; color-scheme: dark; }
.guide-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle 34rem at 64% 20%, rgba(229,184,92,.11), transparent 72%);
}
.guide-rain {
  position: fixed;
  inset: 0;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(102deg, transparent 11%, rgba(183,198,203,.07) 11.1%, transparent 11.35%),
    linear-gradient(98deg, transparent 64%, rgba(183,198,203,.045) 64.1%, transparent 64.35%),
    repeating-linear-gradient(104deg, transparent 0 37px, rgba(183,198,203,.07) 38px, transparent 39px 81px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.guide-page .site-header { background: linear-gradient(#080a0c 35%, transparent); }
.guide-return { border: 1px solid rgba(229,184,92,.3); border-radius: 99px; padding-inline: 1rem !important; color: var(--lamp-hot) !important; }
.guide-return:hover,
.guide-return:focus-visible { border-color: var(--lamp-hot); background: rgba(229,184,92,.08); box-shadow: 0 0 2.5rem rgba(229,184,92,.09); }
.guide-main { position: relative; z-index: 1; max-width: 88rem; margin: auto; padding: 10rem clamp(1.4rem, 8vw, 8rem) 10rem; overflow: hidden; }
.guide-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(1.4rem, 8vw, 8rem);
  bottom: 5rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(229,184,92,.3) 14%, rgba(135,154,165,.13) 80%, transparent);
}
.guide-lamp { position: absolute; top: 2rem; left: calc(clamp(1.4rem, 8vw, 8rem) - 9px); width: 19px; height: 8rem; z-index: 4; }
.guide-lamp::before { content: ''; position: absolute; left: 8px; top: 18px; width: 2px; height: 7rem; background: #35434a; }
.guide-lamp i { position: absolute; width: 18px; height: 25px; border: 1px solid #657782; border-radius: 50% 50% 30% 30%; background: radial-gradient(circle, #fff2bc, #d9a84e 52%, #261e13); box-shadow: 0 0 25px 8px rgba(229,184,92,.35), 0 0 100px 34px rgba(229,184,92,.12); }
.guide-hero { position: relative; min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding-left: clamp(1.4rem, 7vw, 7rem); }
.guide-hero::before { content: ''; position: absolute; inset: 0 -20% -10% -14%; z-index: -1; background: radial-gradient(ellipse 38% 64% at 43% 42%, rgba(255,240,188,.13), rgba(229,184,92,.055) 40%, transparent 72%); }
.guide-kicker { color: var(--lamp); font-size: .61rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.guide-hero h1 { margin: 1rem 0 2rem; font-size: clamp(5rem, 10vw, 9.5rem); }
.guide-hero h1 em { color: var(--lamp-hot); }
.guide-intro { max-width: 33rem; margin-left: 38%; color: #cfd1ca; font-family: var(--display); font-size: 1.5rem; line-height: 1.4; }
.guide-article { position: relative; padding-left: clamp(1.4rem, 7vw, 7rem); }
.guide-article section { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 46rem); gap: clamp(1.5rem, 4vw, 4rem); margin: 0 0 10rem; isolation: isolate; }
.guide-article section::before { content: ''; position: absolute; inset: -6rem -18% -7rem -16%; z-index: -1; background: radial-gradient(ellipse 48% 72% at 43% 44%, rgba(255,238,194,.075), rgba(229,184,92,.025) 46%, transparent 74%); }
.guide-article section:nth-child(even)::before { transform: translateX(13%); }
.guide-article section:last-child { margin-bottom: 1rem; }
.guide-article section:nth-child(even) { margin-left: clamp(0rem, 8vw, 8rem); }
.guide-number { color: rgba(229,184,92,.72); font-family: var(--display); font-size: 2rem; }
.guide-number { position: relative; font-variant-numeric: tabular-nums lining-nums; }
.guide-number::before { content: ''; position: absolute; left: -2rem; top: -2rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, rgba(229,184,92,.08), transparent 68%); pointer-events: none; }
.guide-number::after { content: ''; display: block; width: 100%; height: 1px; margin-top: .5rem; background: rgba(229,184,92,.2); }
.guide-article h2 { margin: 0 0 1.5rem; color: #f4e8c7; font-size: clamp(3rem, 5vw, 5rem); }
.guide-article h2 { letter-spacing: -.032em; }
.guide-article p { margin: 0; color: #cbd0cc; font-size: .96rem; line-height: 1.9; }
.guide-article code { color: var(--lamp-hot); font-family: var(--body); font-size: .87em; padding: .08rem .28rem; background: rgba(229,184,92,.08); border-bottom: 1px solid rgba(229,184,92,.18); }

.route-strip,
.lamp-specimen { margin: 3rem 0 0; }
.route-strip > div { position: relative; height: 5rem; display: flex; align-items: center; justify-content: space-between; }
.route-strip > div::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(229,184,92,.55), rgba(135,154,165,.2) 72%, rgba(240,168,93,.7)); }
.route-strip i { position: relative; width: 7px; aspect-ratio: 1; border-radius: 50%; background: #d4a84e; box-shadow: 0 0 0 5px rgba(229,184,92,.07), 0 0 22px rgba(229,184,92,.5); }
.route-strip i:nth-child(2), .route-strip i:nth-child(4), .route-strip i:nth-child(6) { transform: translateY(1.35rem); background: #71858f; box-shadow: 0 0 0 4px rgba(135,154,165,.06); }
.route-strip i:nth-child(5) { width: 11px; background: #f0a85d; box-shadow: 0 0 0 8px rgba(240,168,93,.08), 0 0 32px rgba(240,168,93,.62); }
.route-strip figcaption { display: flex; justify-content: space-between; gap: 1rem; color: #aebabc; font-size: .54rem; letter-spacing: .11em; text-transform: uppercase; }

.lamp-specimen { position: relative; min-height: 18rem; overflow: hidden; border: 1px solid rgba(183,198,203,.08); background: #050708; }
.mini-lamp { position: absolute; inset: 0; background: radial-gradient(ellipse 12rem 16rem at 35% 28%, rgba(255,244,204,.22), rgba(229,184,92,.1) 28%, rgba(84,72,49,.04) 54%, transparent 72%); }
.mini-lamp::before { content: ''; position: absolute; left: 35%; top: 0; width: 2px; height: 10rem; background: #293840; }
.mini-lamp i { position: absolute; left: calc(35% - .8rem); top: 2.2rem; width: 1.7rem; height: 2.25rem; border: 1px solid #71818a; border-radius: 50% 50% 28% 28%; background: radial-gradient(circle, #fff3c1, #d7a84e 52%, #271d10); box-shadow: 0 0 27px rgba(229,184,92,.55); }
.lamp-specimen figcaption { position: absolute; right: 1.4rem; bottom: 1.2rem; display: grid; justify-items: end; gap: .35rem; color: #b9c3c2; font-size: .62rem; letter-spacing: .08em; }
.lamp-specimen figcaption code { font-size: .72rem; }

.code-only-note { margin-top: 1.5rem !important; padding: 1.2rem 1.4rem; border-left: 2px solid var(--lamp); background: rgba(229,184,92,.055); color: #e4e1d4 !important; }
.code-only-note strong { color: var(--lamp-hot); font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.token-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 2.4rem 0 0; background: rgba(183,198,203,.1); border: 1px solid rgba(183,198,203,.1); }
.token-ledger div { position: relative; min-height: 7.5rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem 1.1rem 1rem 4rem; background: #0b0e10; }
.token-ledger div::before { content: ''; position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 2rem; background: var(--swatch); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 0 1.8rem color-mix(in srgb, var(--swatch) 38%, transparent); }
.token-ledger dt { color: #e5e1d3; font-family: var(--display); font-size: 1.15rem; }
.token-ledger dd { margin: .1rem 0 0; color: #9facad; font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.prompt-slip { margin-top: 2rem !important; padding: 1.4rem 1.6rem; border: 1px solid rgba(229,184,92,.2); color: #e5e1d2 !important; font-family: var(--display); font-size: 1.35rem !important; line-height: 1.45 !important; transform: rotate(-.5deg); background: rgba(37,29,18,.4); box-shadow: 0 2rem 4rem rgba(0,0,0,.24); }
.prompt-slip em { color: var(--lamp-hot); }

.guide-article section > div > p:first-of-type::first-letter {
  color: #f0cf83;
}

@media (max-width: 600px) {
  .guide-page .site-header { background: rgba(8,10,12,.94); border-bottom: 1px solid rgba(183,198,203,.07); backdrop-filter: blur(9px); }
  .guide-page .site-header nav a:not(.guide-return) { display: none; }
  .guide-return { width: auto; font-size: .52rem !important; }
  .guide-main { padding: 7rem 1.25rem 2.5rem 2.4rem; }
  .guide-main::before { left: 1.25rem; }
  .guide-lamp { left: calc(1.25rem - 9px); top: 1rem; }
  .guide-hero { min-height: 66svh; padding-left: .5rem; transform: translateY(-2vh); }
  .guide-hero h1 { font-size: 4.3rem; }
  .guide-intro { margin-left: 8%; font-size: 1.25rem; }
  .guide-article { padding-left: .5rem; }
  .guide-article section,
  .guide-article section:nth-child(even) { grid-template-columns: 2.3rem minmax(0, 1fr); gap: .8rem; margin: 0 0 7rem; }
  .guide-article section:last-child { margin-bottom: 0; }
  .guide-number { font-size: 1.4rem; }
  .guide-article h2 { font-size: 3rem; }
  .guide-article p { font-size: .9rem; line-height: 1.75; }
  .route-strip { margin-left: -3rem; }
  .route-strip figcaption span:nth-child(2) { display: none; }
  .lamp-specimen { margin-left: -3rem; min-height: 15rem; }
  .lamp-specimen figcaption { left: 1rem; right: 1rem; align-items: start; justify-items: start; }
  .token-ledger { grid-template-columns: 1fr; margin-left: -3rem; }
  .token-ledger div { min-height: 5.8rem; }
  .prompt-slip { margin-left: -3rem !important; font-size: 1.2rem !important; }
}

@media (max-width: 900px) and (min-width: 601px) {
  .guide-hero { min-height: 70svh; transform: translateY(-6vh); }
}

@media (prefers-reduced-motion: reduce) { .guide-rain { display: none; } }