.guide-page { background: radial-gradient(circle at 68% 18%, rgba(161,132,194,.08), transparent 26rem), linear-gradient(160deg, #18111a 0, #0a0c13 32rem, #06070b 100%); color: #ddd7da; }
.guide-page::before { content: ''; position: fixed; z-index: 0; width: 145vw; height: 20vw; min-height: 180px; left: -24vw; top: 28vh; transform: rotate(-13deg); pointer-events: none; background: radial-gradient(ellipse, rgba(161,132,194,.055), rgba(244,232,223,.018) 42%, transparent 72%); filter: blur(9px); }
.guide-page .site-header { color: #c9656d; background: rgba(7,8,12,.78); }
.return-link { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: .7rem; color: #e5dcdf; font: .65rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.return-link span { color: #dc6770; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.return-link:hover span, .return-link:focus-visible span { transform: translate(4px, -4px); }
.guide-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .42; background-image: radial-gradient(circle at 7% 9%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 29% 34%, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 61% 11%, #fff 0 1px, transparent 1.4px), radial-gradient(circle at 86% 27%, #fff 0 .8px, transparent 1.3px), radial-gradient(circle at 17% 79%, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 73% 64%, #fff 0 1px, transparent 1.5px); background-size: 290px 270px, 230px 260px, 310px 250px, 260px 300px, 350px 280px, 280px 320px; }
.guide-main { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.guide-hero { min-height: 92svh; padding: clamp(9rem, 18vh, 13rem) 0 6rem; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: end; gap: 5vw; position: relative; border-bottom: 1px solid rgba(244,232,223,.2); }
.guide-title > p { margin: 0 0 2rem; color: #e3757e; font: .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.guide-hero h1 { max-width: 13ch; margin: 0; color: #f4eef0; font-size: clamp(4rem, 9vw, 9rem); font-weight: 200; line-height: .8; letter-spacing: -.06em; }
.guide-hero h1 em { color: #a184c2; font-weight: 200; }
.build-metrics { margin: 0 0 5rem; border-top: 1px solid rgba(244,232,223,.24); }
.build-metrics div { min-height: 67px; padding: .85rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(244,232,223,.16); }
.build-metrics dt { color: #a9a2a8; font: .56rem/1 var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.build-metrics dd { margin: 0; color: #f0e9ec; font: 300 1.15rem/1 var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.guide-scale { position: absolute; right: 0; bottom: 2rem; width: min(32vw, 440px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; color: #e3757e; font: 300 1.5rem/1 var(--mono); }
.guide-scale i { height: 1px; background: linear-gradient(90deg, #9a5e3d, #a184c2, #f4e8df); }
.guide-article { padding-bottom: 10rem; }
.guide-article section { position: relative; display: grid; grid-template-columns: minmax(80px, .32fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 9rem); padding: clamp(5rem, 10vw, 9rem) 0; border-bottom: 1px solid rgba(244,232,223,.17); }
.guide-article section::before { content: ''; position: absolute; top: -1px; left: 0; width: clamp(3rem, 8vw, 8rem); height: 1px; background: #dc6770; }
.guide-index { color: #dc6770; font: 300 clamp(2rem, 4vw, 4rem)/1 var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.guide-article section > div { max-width: 790px; }
.guide-article h2 { margin: 0 0 2rem; color: #f4eef0; font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 300; line-height: .9; letter-spacing: -.045em; }
.guide-article p { max-width: 68ch; margin: 0 0 1.35rem; color: #d0c8ce; font-size: 1.05rem; line-height: 1.75; }
.guide-article .guide-lead { max-width: 29ch; margin: 0 0 2.5rem; color: #f2ecef; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 300; line-height: 1.3; }
.guide-article code { padding: .12rem .32rem; color: #e68a91; background: rgba(220,103,112,.09); font: .84em/1.2 var(--mono); }
.code-note { margin: 2.8rem 0 0; padding: 1.2rem 1.4rem; display: grid; grid-template-columns: minmax(130px, .4fr) 1fr; gap: 1.4rem; border: 1px solid rgba(220,103,112,.42); background: linear-gradient(90deg, rgba(220,103,112,.08), transparent); }
.code-note span { color: #e3757e; font: .58rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.code-note b { color: #d5cdd2; font: 400 .68rem/1.6 var(--mono); }
.swatches { margin-top: 2.8rem; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(244,232,223,.18); }
.swatches span { min-height: 135px; padding: 5.8rem .7rem .7rem; display: flex; align-items: flex-end; background: linear-gradient(180deg, var(--swatch) 0 62%, transparent 62%); color: #c7bfc4; border-right: 1px solid rgba(244,232,223,.18); font: .55rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.swatches span:last-child { border: 0; }

@media (max-width: 1000px) {
  .guide-page .site-header { grid-template-columns: 1fr auto; }
  .return-link { display: none; }
  .guide-hero { min-height: 82svh; grid-template-columns: 1fr; align-content: end; padding-top: 9rem; }
  .build-metrics { width: min(100%, 560px); margin: 1rem 0 4rem auto; display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid rgba(244,232,223,.16); }
  .build-metrics div { padding-inline: 1rem; border-right: 1px solid rgba(244,232,223,.16); }
}

@media (max-width: 680px) {
  .guide-hero { min-height: auto; padding: 8.5rem 0 4rem; gap: 2.7rem; }
  .guide-hero h1 { font-size: clamp(3.35rem, 17.5vw, 5.1rem); }
  .build-metrics { margin: 0; grid-template-columns: 1fr 1fr; }
  .build-metrics div { min-height: 58px; }
  .build-metrics dd { font-size: .88rem; }
  .guide-scale { position: static; width: 100%; margin-top: 0; }
  .guide-article section { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 5.5rem; }
  .guide-index { font-size: 1.4rem; }
  .guide-article p { font-size: 1rem; }
  .code-note { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr; }
  .swatches span { min-height: 74px; padding: 1rem 1rem 1rem 44%; background: linear-gradient(90deg, var(--swatch) 0 38%, transparent 38%); border-right: 0; border-bottom: 1px solid rgba(244,232,223,.18); }
}