.guide-page { background: #e9f8fb; }
.guide-header { background: rgba(233,248,251,.92); }
.guide-main { position: relative; z-index: 3; overflow: hidden; }
.guide-core { position: fixed; z-index: 5; top: 110px; right: 6vw; bottom: 55px; width: 112px; color: rgba(20,80,122,.78); font: 600 7px var(--mono); }
.guide-core div { position: absolute; inset: 0 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 50% / 1.5%; background: linear-gradient(90deg,#175b83,#d9f8fd 24%,#76bed8 53%,#eefeff 64%,#216d97),linear-gradient(#d9f4f9,#246c94); box-shadow: inset 10px 0 18px rgba(255,255,255,.45),0 0 35px rgba(190,231,242,.5); }
.guide-core div::before { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(180deg,transparent 0 10px,rgba(6,44,72,.28) 11px,rgba(255,255,255,.3) 12px,transparent 14px 24px); }
.guide-core span { position: absolute; right: -5px; }.guide-core span:first-of-type{top:0}.guide-core span:last-of-type{bottom:0}
.guide-hero { position: relative; min-height: 780px; padding: 170px 25vw 90px 7vw; background: radial-gradient(circle at 72% 30%,rgba(255,255,255,.8),transparent 24%),linear-gradient(130deg,#eefcfe,#bfe3f0 61%,#4a91b6); border-bottom: 1px solid rgba(20,80,122,.2); }
.guide-hero::before { position: absolute; inset: 0; content: ''; background-image: linear-gradient(rgba(20,80,122,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(20,80,122,.1) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,#000,transparent 70%); }
.guide-code { position: relative; margin: 0 0 35px; font: 600 9px var(--mono); letter-spacing: .18em; }
.guide-hero h1 { position: relative; margin: 0; font: 650 clamp(64px,9vw,132px)/.9 var(--display); letter-spacing: -.075em; }
.guide-hero h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--glacial); font-style: normal; }
.standfirst { position: relative; max-width: 480px; margin: 38px 0 0 12vw; font-size: 18px; line-height: 1.65; }
.guide-meta { position: absolute; bottom: 55px; left: 7vw; display: flex; gap: 50px; font: 500 8px/1.7 var(--mono); letter-spacing: .1em; }
.guide-meta b { font-size: 10px; }
.guide-article { position: relative; z-index: 4; padding: 70px calc(20vw + 60px) 110px 7vw; background: linear-gradient(110deg,#f7fdff,#dff3f8); }
.guide-article section { display: grid; grid-template-columns: 150px minmax(0,760px); gap: 35px; padding: 75px 0; border-bottom: 1px solid rgba(20,80,122,.22); }
.guide-article section:last-child { border-bottom: 0; }
.article-label { padding-top: 10px; font: 650 8px var(--mono); letter-spacing: .15em; }.article-label.orange{color:var(--orange)}
.guide-article h2 { margin: 0 0 28px; font: 550 clamp(35px,4vw,58px)/1.06 var(--display); letter-spacing: -.045em; }
.guide-article p { margin: 0 0 20px; color: #174a68; font-size: 15px; line-height: 1.8; }
.guide-article code { padding: 2px 5px; color: var(--deep); background: rgba(20,80,122,.09); font: 500 .85em var(--mono); }
.swatches { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 0 28px; border: 1px solid rgba(20,80,122,.2); }
.swatches span { min-height: 120px; display: flex; justify-content: flex-end; flex-direction: column; padding: 10px; color: white; background: var(--sw); font: 500 7px/1.5 var(--mono); text-shadow: 0 1px 5px rgba(0,0,0,.4); }.swatches b{display:block;font-size:9px}
.guide-back { display: inline-flex; min-height: 50px; gap: 35px; align-items: center; margin-top: 15px; color: white; background: var(--glacial); padding: 0 20px; text-decoration: none; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.guide-back span{color:var(--orange);font-size:18px}

@media (max-width: 900px) {
  .guide-core{right:3vw;width:82px}.guide-hero{padding-right:18vw}.guide-article{padding-right:17vw}.guide-article section{grid-template-columns:100px 1fr}.swatches{grid-template-columns:1fr 1fr}
}
@media (max-width: 700px) {
  .guide-core{top:80px;right:10px;bottom:15px;width:44px;opacity:.38}.guide-core div{inset:0 8px}.guide-core span{display:none}.guide-hero{min-height:700px;padding:140px 58px 90px 22px}.guide-hero h1{font-size:60px}.standfirst{margin-left:0;font-size:15px;max-width:280px}.guide-meta{left:22px;bottom:35px;gap:20px}.guide-article{padding:30px 58px 70px 22px}.guide-article section{display:block;padding:55px 0}.article-label{margin-bottom:25px}.guide-article h2{font-size:36px}.guide-article p{font-size:14px;line-height:1.75}.swatches{grid-template-columns:1fr 1fr}.swatches span{min-height:88px}
}

/* Pass 2: turn the documentation into a specimen record, not a generic article. */
.guide-core { filter: drop-shadow(0 18px 28px rgba(5,48,75,.2)); }
.guide-core div::after { position: absolute; top: 61%; right: -8px; left: -8px; height: 2px; content: ''; background: var(--orange); box-shadow: 0 0 10px rgba(255,100,34,.8); }
.guide-hero { min-height: 820px; background: radial-gradient(circle at 65% 25%,rgba(255,255,255,.95),transparent 20%),linear-gradient(128deg,#f1fcfe 0%,#b9e3ef 58%,#347fa7 100%); }
.guide-hero::after { position: absolute; inset: auto 18vw 0 0; height: 43%; content: ''; opacity: .2; background: repeating-linear-gradient(176deg,transparent 0 44px,rgba(255,255,255,.75) 45px 46px,transparent 47px 92px); }
.guide-hero h1 { z-index: 2; max-width: 850px; }
.guide-legend { position: absolute; z-index: 2; right: 18vw; bottom: 55px; display: flex; align-items: center; gap: 9px; color: rgba(6,44,72,.72); font: 650 7px var(--mono); letter-spacing: .12em; }
.guide-legend i { width: 28px; height: 1px; background: var(--orange); }
.guide-article { background: linear-gradient(90deg,rgba(191,227,240,.28) 0 7vw,transparent 7vw),linear-gradient(110deg,#f9feff,#dff3f8); }
.guide-article section { position: relative; }
.guide-article section::before { position: absolute; top: 0; left: 150px; width: 48px; height: 2px; content: ''; background: var(--orange); transform: translateX(35px); }
.article-label { position: sticky; top: 110px; align-self: start; }
.guide-article h2 { text-wrap: balance; }
.guide-article p { font-size: 16px; line-height: 1.78; }
.mechanics-map { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; align-items: center; margin-top: 36px; padding: 18px; border: 1px solid rgba(20,80,122,.26); background: rgba(191,227,240,.16); }
.mechanics-map span { min-height: 58px; display: flex; flex-direction: column; justify-content: center; font: 600 8px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mechanics-map b { margin-bottom: 4px; color: var(--orange); }
.mechanics-map i { height: 1px; background: var(--glacial); position: relative; }
.mechanics-map i::after { position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 1px solid var(--glacial); border-right: 1px solid var(--glacial); content: ''; transform: rotate(45deg); }
.swatches { grid-template-columns: 1.35fr .92fr 1fr .42fr; }
.swatches span { min-height: 145px; padding: 12px; }
.type-specimen { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 34px; padding: 22px; overflow: hidden; border: 1px solid rgba(20,80,122,.26); background: rgba(255,255,255,.32); }
.type-specimen strong { grid-column: 1/-1; color: transparent; -webkit-text-stroke: 1px var(--glacial); font: 700 clamp(55px,7vw,98px)/.9 var(--display); letter-spacing: -.08em; }
.type-specimen span { margin-top: 16px; font: 600 7px var(--mono); letter-spacing: .1em; }
.type-specimen code { justify-self: end; background: var(--deep); color: white; }

@media (max-width: 900px) {
  .guide-article section::before { left: 100px; }
  .mechanics-map { grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr; padding: 13px; }
  .guide-legend { display: none; }
}

@media (max-width: 700px) {
  .guide-hero { min-height: 760px; }
  .guide-hero h1 { font-size: 58px; line-height: .92; }
  .guide-article { background: linear-gradient(90deg,rgba(191,227,240,.25) 0 22px,transparent 22px),linear-gradient(110deg,#f9feff,#dff3f8); }
  .guide-article section::before { left: 0; transform: none; }
  .article-label { position: static; }
  .guide-article p { font-size: 14px; }
  .mechanics-map { grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: rgba(20,80,122,.22); }
  .mechanics-map span { padding: 12px; background: #eaf8fb; }
  .mechanics-map i { display: none; }
  .swatches { grid-template-columns: 1.2fr .8fr; }
  .type-specimen { grid-template-columns: 1fr; padding: 15px; }
  .type-specimen strong { font-size: 48px; }
  .type-specimen code { justify-self: start; margin-top: 14px; font-size: 7px; }
}