.guide-page { background: linear-gradient(115deg, #e9eef2, #fbfcfd 42%, #e4e9ee); }
.guide-header {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 40px), 1320px);
  min-height: 70px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: .7rem 1.2rem;
  background: rgba(255,255,255,.82);
  border: 1px solid white;
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.guide-header > span { color: #6c778a; font: 500 .55rem/1 'IBM Plex Mono', monospace; letter-spacing: .13em; }
.return-link { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: 1rem; font-size: .75rem; font-weight: 700; text-decoration: none; }
.return-link b { width: 36px; height: 36px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 9px; transition: transform .25s ease; }
.return-link:hover b { transform: translate(2px,-2px); }
.guide-main { position: relative; z-index: 1; width: min(calc(100% - 48px), 1320px); margin: 4rem auto 7rem; }
.guide-hero { min-height: 680px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; padding: clamp(3rem, 7vw, 7rem); background: rgba(251,252,253,.93); border: 1px solid white; border-radius: 17px; box-shadow: var(--shadow); overflow: hidden; }
.guide-title p { color: #667187; font: 500 .58rem/1 'IBM Plex Mono', monospace; letter-spacing: .16em; }
.guide-title h1 { margin: 1.5rem 0 0; font-size: clamp(4rem, 7vw, 7.5rem); font-weight: 300; letter-spacing: -.075em; line-height: .86; }
.guide-gap-diagram { min-height: 440px; display: flex; flex-direction: column; justify-content: center; padding: 2rem; color: white; background: var(--night); border-radius: 15px; box-shadow: 0 30px 50px rgba(23,35,77,.25); transform: translateY(26px); }
.diagram-vehicle, .diagram-guideway { position: relative; min-height: 125px; display: flex; align-items: center; justify-content: space-around; padding: 1.5rem; font: 500 .58rem/1 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.diagram-vehicle { color: var(--ink); background: linear-gradient(#fff, #dfe4e9); border-radius: 70px 70px 11px 11px; }
.diagram-guideway { background: linear-gradient(#718096, #414d67); clip-path: polygon(8% 0,92% 0,100% 100%,0 100%); }
.diagram-vehicle span, .diagram-guideway span { width: 50px; height: 40px; display: grid; place-items: center; color: white; background: var(--sakura-deep); border-radius: 7px; }
.diagram-vehicle span:last-child, .diagram-guideway span:last-child { background: var(--ink); }
.diagram-gap { height: 90px; display: flex; align-items: center; gap: .7rem; color: var(--sakura); font: 600 .62rem/1 'IBM Plex Mono', monospace; }
.diagram-gap i { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--sakura),transparent); box-shadow: 0 0 10px var(--sakura); }
.guide-article { margin-top: 5rem; }
.guide-article > section { display: grid; grid-template-columns: 150px 1fr; gap: 3rem; margin-bottom: 2rem; padding: clamp(2.2rem, 5vw, 5rem); background: rgba(251,252,253,.92); border: 1px solid white; border-radius: 17px; box-shadow: var(--shadow); }
.guide-article > section:nth-child(even) { margin-left: 8vw; }
.guide-article > section:nth-child(odd) { margin-right: 8vw; }
.guide-article aside { padding-top: .55rem; color: var(--sakura-deep); font: 600 .56rem/1.7 'IBM Plex Mono', monospace; letter-spacing: .13em; }
.guide-article h2 { margin: 0 0 1.5rem; font-size: clamp(2.5rem, 4vw, 4.2rem); font-weight: 300; letter-spacing: -.055em; line-height: 1; }
.guide-article p { max-width: 72ch; margin: 0 0 1.2rem; color: #4b5870; font-size: 1rem; line-height: 1.85; }
.guide-article p:last-child { margin-bottom: 0; }
.guide-article code { padding: .1rem .35rem; color: var(--ink); background: #e6ebef; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: .82em; }
.swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-bottom: 2rem; }
.swatches span { min-height: 135px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; color: white; background: var(--swatch); border: 1px solid rgba(23,35,77,.1); box-shadow: 0 10px 22px rgba(23,35,77,.1); font: 500 .56rem/1.5 'IBM Plex Mono', monospace; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.swatches b { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: .75rem; }
.swatches span:nth-child(1), .swatches span:nth-child(2), .swatches span:nth-child(3) { color: var(--ink); text-shadow: none; }

@media (max-width: 800px) {
  .guide-header { width: calc(100% - 24px); grid-template-columns: 1fr auto; }
  .guide-header > span { display: none; }
  .guide-main { width: calc(100% - 24px); margin-top: 2rem; }
  .guide-hero { min-height: auto; grid-template-columns: 1fr; gap: 2rem; padding: 4rem 2.5rem; }
  .guide-gap-diagram { min-height: 380px; transform: none; }
  .guide-article { margin-top: 3rem; }
  .guide-article > section { grid-template-columns: 90px 1fr; gap: 1.5rem; }
  .guide-article > section:nth-child(n) { margin-inline: 0; }
  .swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .guide-header .brand small { display: none; }
  .return-link { font-size: 0; gap: 0; }
  .return-link b { font-size: .8rem; }
  .guide-main { margin-bottom: 4rem; }
  .guide-hero { padding: 3.5rem 1.2rem 1.2rem; }
  .guide-title h1 { font-size: 4.15rem; }
  .guide-gap-diagram { min-height: 300px; padding: 1rem; }
  .diagram-vehicle, .diagram-guideway { min-height: 90px; padding: .7rem; font-size: .45rem; }
  .diagram-vehicle span, .diagram-guideway span { width: 37px; height: 32px; }
  .diagram-gap { height: 60px; }
  .guide-article > section { grid-template-columns: 1fr; padding: 2.2rem 1.3rem; }
  .guide-article aside { border-bottom: 1px solid #d6dce2; padding-bottom: .8rem; }
  .guide-article p { font-size: .94rem; }
  .swatches span { min-height: 110px; }
}

/* Pass 2: an engineering folio, not a stack of documentation cards. */
.guide-page {
  background:
    radial-gradient(ellipse at 15% 5%,rgba(255,255,255,.96),transparent 30%),
    linear-gradient(108deg,#dde5eb,#f8fafb 46%,#e1e8ee);
}
.guide-header {
  min-height:64px;
  background:rgba(250,252,253,.97);
  border-radius:3px 18px 3px 18px;
  box-shadow:0 16px 35px rgba(32,47,78,.12),0 1px 0 rgba(23,35,77,.08);
}
.guide-header::after { content:""; position:absolute; left:22px; right:22px; bottom:-7px; height:1px; background:linear-gradient(90deg,transparent,var(--sakura),transparent); }
.return-link b { border-radius:2px 10px 2px 10px; }
.guide-main { margin-top:4rem; }
.guide-hero {
  min-height:720px;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(2rem,7vw,8rem);
  padding:clamp(3.5rem,7vw,7.5rem);
  background:linear-gradient(125deg,rgba(252,253,254,.98),rgba(230,236,241,.9));
  border-radius:3px 24px 3px 24px;
  box-shadow:0 38px 72px rgba(27,43,74,.17),0 7px 15px rgba(27,43,74,.08);
}
.guide-title { position:relative; z-index:2; }
.guide-title::before { content:"129"; position:absolute; z-index:-1; left:-.18em; top:-.35em; color:rgba(23,35,77,.045); font:300 15rem/1 'IBM Plex Mono',monospace; letter-spacing:-.14em; }
.guide-title p { color:#4f5e77; }
.guide-title h1 { font-size:clamp(4.5rem,7.5vw,8.4rem); line-height:.82; letter-spacing:-.087em; }
.guide-title h1::after { content:""; display:block; width:72%; height:7px; margin-top:.25em; background:linear-gradient(90deg,var(--sakura-deep),var(--sakura),transparent); }
.guide-gap-diagram {
  position:relative;
  min-height:520px;
  padding:3rem;
  background:radial-gradient(circle at 50% 49%,#2a3867 0,#111a3b 43%,#09112c 100%);
  border-radius:2px 28px 2px 28px;
  box-shadow:0 40px 65px rgba(23,35,77,.3),inset 0 0 0 1px rgba(255,255,255,.09);
  transform:translateY(34px) rotate(.7deg);
}
.guide-gap-diagram::before { content:""; position:absolute; inset:18px; border:1px solid rgba(245,163,183,.16); pointer-events:none; }
.guide-gap-diagram > p { position:absolute; right:1.5rem; top:50%; margin:0; color:rgba(255,255,255,.35); font:500 .47rem/1 'IBM Plex Mono',monospace; letter-spacing:.17em; writing-mode:vertical-rl; }
.diagram-vehicle { z-index:3; border-radius:100px 100px 7px 7px; box-shadow:0 20px 30px rgba(0,0,0,.28); }
.diagram-guideway { z-index:3; }
.diagram-gap { position:relative; z-index:4; height:110px; }
.diagram-gap b { display:grid; gap:.45rem; text-align:center; }
.diagram-gap small { color:rgba(255,255,255,.44); font-size:.65em; letter-spacing:.16em; }
.diagram-flux { position:absolute; z-index:2; left:24%; right:24%; top:38%; height:26%; }
.diagram-flux i { position:absolute; inset:calc(var(--n,0) * 9px); border:1px solid rgba(245,163,183,.35); border-left:0; border-right:0; border-radius:50%; }
.diagram-flux i:nth-child(1){--n:0}.diagram-flux i:nth-child(2){--n:1}.diagram-flux i:nth-child(3){--n:2}.diagram-flux i:nth-child(4){--n:3}

.guide-article { position:relative; margin-top:8rem; }
.guide-article::before { content:""; position:absolute; top:-4rem; bottom:-3rem; left:149px; width:1px; background:linear-gradient(var(--sakura),rgba(23,35,77,.14) 16% 86%,var(--sakura)); }
.guide-article > section {
  position:relative;
  grid-template-columns:150px minmax(0,1fr);
  gap:clamp(2rem,6vw,7rem);
  margin:0 0 4.5rem!important;
  padding:clamp(3rem,6vw,6rem);
  background:rgba(251,252,253,.93);
  border-radius:2px 22px 2px 22px;
  box-shadow:0 30px 58px rgba(27,43,74,.14),0 6px 12px rgba(27,43,74,.06);
}
.guide-article > section:nth-child(2) { width:92%; margin-left:auto!important; color:white; background:radial-gradient(circle at 90% 20%,rgba(245,163,183,.15),transparent 26%),#111a3b; }
.guide-article > section:nth-child(2) p { color:#c9cfdb; }
.guide-article > section:nth-child(2) code { color:#ffe2e9; background:#26345b; }
.guide-article > section:nth-child(3) { width:88%; }
.guide-article > section:nth-child(4) { width:84%; margin-left:auto!important; }
.guide-article > section:nth-child(5) { width:91%; }
.guide-article aside { position:relative; z-index:2; padding-top:.8rem; color:#a4335c; }
.guide-article > section:nth-child(2) aside { color:#f5a3b7; }
.guide-article aside::after { content:""; position:absolute; top:.85rem; right:-4rem; width:3rem; height:1px; background:var(--sakura); }
.guide-article h2 { font-size:clamp(3.2rem,5vw,5.3rem); letter-spacing:-.067em; }
.guide-article p { font-size:1.02rem; line-height:1.9; }
.swatches { gap:0; border:1px solid rgba(23,35,77,.13); }
.swatches span { min-height:165px; box-shadow:none; border:0; border-right:1px solid rgba(23,35,77,.13); }
.swatches span:last-child { border-right:0; }

@media (max-width:800px) {
  .guide-main { margin-top:3rem; }
  .guide-hero { min-height:760px; grid-template-columns:.9fr 1.1fr; gap:2rem; padding:4rem 2.5rem; }
  .guide-title h1 { font-size:clamp(3.6rem,8.6vw,5.3rem); }
  .guide-gap-diagram { min-height:420px; padding:1.8rem; transform:translateY(16px); }
  .guide-article { margin-top:5rem; }
  .guide-article::before { left:89px; }
  .guide-article > section { grid-template-columns:90px 1fr; gap:2rem; }
  .guide-article aside::after { right:-2.1rem; width:1.4rem; }
}

@media (max-width:520px) {
  .guide-header { border-radius:2px 14px 2px 14px; }
  .guide-main { margin-top:2rem; }
  .guide-hero { min-height:auto; grid-template-columns:1fr; gap:2rem; padding:4.5rem 1.25rem 1.25rem; border-radius:2px 17px 2px 17px; }
  .guide-title h1 { font-size:clamp(3.55rem,16.6vw,4.15rem); }
  .guide-title::before { font-size:10rem; }
  .guide-gap-diagram { min-height:320px; padding:1.1rem; transform:none; border-radius:2px 20px 2px 20px; }
  .guide-gap-diagram::before { inset:10px; }
  .diagram-gap { height:70px; }
  .diagram-flux { top:39%; left:18%; right:18%; height:22%; }
  .guide-article::before { left:21px; }
  .guide-article > section,
  .guide-article > section:nth-child(n) { width:calc(100% - 10px); grid-template-columns:1fr; gap:1.6rem; margin:0 0 3rem 10px!important; padding:2.5rem 1.35rem; border-radius:2px 16px 2px 16px; }
  .guide-article > section:nth-child(even) { margin-left:0!important; margin-right:10px!important; }
  .guide-article aside { display:flex; gap:.5rem; border-bottom:1px solid rgba(23,35,77,.16); }
  .guide-article > section:nth-child(2) aside { border-color:rgba(255,255,255,.18); }
  .guide-article aside::after { display:none; }
  .guide-article h2 { font-size:2.7rem; }
  .guide-article p { font-size:.95rem; line-height:1.85; }
  .swatches { grid-template-columns:1fr 1fr; }
  .swatches span { min-height:120px; }
}