.guide-document { scroll-padding-top: 0; }
.guide-page {
  min-height: 100vh;
  background: radial-gradient(ellipse at 75% 0,#233b24 0%,transparent 44rem),var(--toolkit-field);
}
.guide-header,.guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(14px,2.5vw,30px);
  border: 1px solid #49634e;
  border-radius: 16px 9px 16px 9px;
  background: #111c15f7;
}
.guide-header { margin-block-start: 16px; }
.guide-header .brand,.guide-footer .footer-brand { min-height: 44px; }
.guide-header nav { display: flex; align-items: center; gap: clamp(4px,2vw,26px); }
.guide-header nav a,.guide-index a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #c1d2bf;
}
.guide-header nav a { padding-inline: 7px; font-size: 13px; }
.guide-header a:hover,.guide-index a:hover { color: #edf7e6; }
.guide-shell { padding-block: clamp(44px,7vw,96px) 56px; }
.guide-hero { max-width: 940px; margin-bottom: clamp(30px,5vw,60px); }
.guide-hero .eyebrow,.guide-index .eyebrow { margin-bottom: 12px; }
.guide-hero h1 {
  font-size: clamp(35px,6vw,76px);
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.guide-intro { max-width: 68ch; margin-top: 21px; color: #c5d5c4; font-size: clamp(15px,2vw,19px); }
.guide-layout { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,3fr); align-items: start; gap: clamp(20px,4vw,52px); }
.guide-index {
  position: sticky;
  top: 18px;
  padding: 20px 19px;
  border: 1px solid #38513e;
  border-radius: 12px;
  background: #142219;
  font-size: 13px;
}
.guide-index ol { margin: 0; padding-left: 18px; }
.guide-index li + li { border-top: 1px solid #2c4232; }
.guide-index > a { border-top: 1px solid #2c4232; }
.guide-copy { min-width: 0; }
.guide-copy,.guide-copy * { -webkit-user-select: text; user-select: text; }
.guide-section,.guide-sources { scroll-margin-top: 16px; }
.guide-section { padding-block: 0 25px; }
.guide-section + .guide-section { border-top: 1px solid #344c3a; padding-top: 27px; }
.guide-copy h2 { color: #ebf1e7; font-size: clamp(23px,3.5vw,37px); letter-spacing: -.035em; }
.guide-copy p { max-width: 72ch; margin-top: 13px; color: #c0d0c0; line-height: 1.75; overflow-wrap: anywhere; }
.guide-section pre {
  max-width: 72ch;
  margin: 17px 0 0;
  padding: 14px 17px;
  overflow-x: auto;
  border: 1px solid #405c45;
  border-radius: 9px;
  background: #0d1811;
  color: #dcecd8;
  font-size: 13px;
  line-height: 1.65;
}
.guide-figure {
  max-width: 860px;
  margin: 21px 0 0;
  padding: 8px;
  border: 1px solid #405c45;
  border-radius: 11px;
  background: #15261a;
}
.guide-figure-frame { overflow: hidden; border-radius: 5px; background: #0d1811; }
.guide-figure img { width: 100%; height: auto; }
.guide-figure figcaption { padding: 9px 4px 2px; color: #c0d0c0; font-size: 12px; line-height: 1.65; }
.guide-figure figcaption a { color: #c7e9b4; text-decoration: underline; text-underline-offset: 3px; }
.guide-figure--vision { max-width: 560px; }
.guide-figure--vision .guide-figure-frame { aspect-ratio: 455 / 322; }
/* Show the Computer Vision pane, omitting the personal path above it. */
.guide-figure--vision img { width: 125.055%; max-width: none; transform: translateY(-67.16%); }
.guide-sources { margin-top: 12px; padding: clamp(17px,3vw,27px); border: 1px solid #405c45; border-radius: 14px; background: #17291c; }
.guide-sources ul { margin: 12px 0 0; padding-left: 20px; }
.guide-sources li + li { margin-top: 8px; }
.guide-sources a { color: #c7e9b4; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.guide-footer { margin-block-end: 16px; }
.guide-footer > span { color: #acbcae; font-size: 11px; text-align: right; }

@media (max-width: 680px) {
  .guide-header { margin-block-start: 8px; padding: 4px 10px; }
  .guide-header .brand { display: grid; place-items: center; width: 44px; }
  .guide-header .brand img { width: 29px; height: 29px; }
  .guide-header .brand span { display: none; }
  .guide-header nav a { font-size: 12px; }
  .guide-shell { padding-block: 39px 36px; }
  .guide-hero { margin-bottom: 26px; }
  .guide-intro { margin-top: 15px; }
  .guide-layout { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .guide-index { position: static; padding: 13px 15px; }
  .guide-index .eyebrow { margin-bottom: 4px; }
  .guide-section { padding-bottom: 20px; }
  .guide-section + .guide-section { padding-top: 20px; }
}