.guide{
  max-width:1080px; margin:0 auto; padding:44px 26px 90px;
  display:grid; grid-template-columns:210px 1fr; gap:52px; align-items:start;
}
.toc{position:sticky; top:88px; display:flex; flex-direction:column; gap:3px}
.toc a{
  color:var(--faint); text-decoration:none; font-size:13px; padding:6px 10px;
  border-left:2px solid var(--line); border-radius:0 5px 5px 0;
}
.toc a:hover{color:var(--ink); background:#12161d; border-left-color:#3d4655}
.guide article{min-width:0}
.guide h1{font-size:36px; letter-spacing:-.02em; margin:0 0 40px}
.guide section{margin-bottom:56px; scroll-margin-top:88px}
.guide h2{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line); font-weight:600;
}
.guide h3{font-size:15px; margin:32px 0 12px; font-weight:600}
.guide p{margin:0 0 16px; color:var(--dim); font-size:15px; line-height:1.72}
.guide a{color:#7fb3e8}
.guide code{
  background:#12161d; border:1px solid var(--line); border-radius:4px;
  padding:1.5px 6px; font-size:13px; color:#c9d3e0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.guide pre{
  background:#0d1117; border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; overflow-x:auto; margin:0 0 18px;
}
.guide pre code{background:none; border:none; padding:0; font-size:13px; color:#b9c6d6}
.steps{margin:0; padding:0; list-style:none; counter-reset:s}
.steps > li{
  counter-increment:s; position:relative; padding:0 0 24px 44px;
  color:var(--dim); font-size:15px; line-height:1.72;
}
.steps > li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:27px; height:27px; border-radius:50%; background:var(--card);
  border:1px solid var(--line); color:var(--faint);
  display:grid; place-items:center; font-size:12px;
}
.steps b{color:var(--ink); font-weight:500}
.steps i{color:#a8b2bf; font-style:normal}
.aside{
  margin-top:10px; padding:11px 14px; background:#101419; border:1px solid var(--line);
  border-radius:7px; font-size:13.5px; color:var(--faint); line-height:1.62;
}
.callout{
  margin:0 0 18px; padding:15px 18px; background:#12161d;
  border:1px solid var(--line); border-left:2px solid #3d4655; border-radius:7px;
  font-size:14px; color:var(--dim); line-height:1.68;
}
.callout b{color:var(--ink)}
.callout.warn{border-left-color:#a8791f; background:#171309}
.guide ul{margin:0 0 16px; padding-left:20px; color:var(--dim); font-size:15px; line-height:1.72}
.guide li{margin-bottom:10px}
.guide ul b{color:var(--ink); font-weight:500}
.guide table{border-collapse:collapse; width:100%; margin:0 0 18px}
.guide td{
  border-bottom:1px solid var(--line); padding:11px 12px 11px 0;
  color:var(--dim); font-size:14px; vertical-align:top; line-height:1.6;
}
.guide td:first-child{width:150px; color:var(--ink); white-space:nowrap}
.chip{
  display:inline-block; font-size:11px; letter-spacing:.05em; padding:3px 9px;
  border-radius:999px; border:1px solid transparent;
}
.chip.live{background:rgba(63,185,80,.12); color:#3fb950; border-color:rgba(63,185,80,.28)}
.chip.late{background:rgba(210,153,34,.12); color:#d29922; border-color:rgba(210,153,34,.28)}
.chip.lost{background:rgba(248,81,73,.12); color:#f85149; border-color:rgba(248,81,73,.28)}
/* device compatibility */
.devcount{color:var(--ink); font-size:14px; margin:0 0 18px}
.guide h3 .n{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:#12161d; border:1px solid var(--line); color:var(--faint);
  font-size:11px; font-weight:400; vertical-align:middle;
}
ul.devices{
  list-style:none; margin:0 0 22px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:7px; overflow:hidden;
}
ul.devices li{
  margin:0; padding:8px 12px; background:#12161d; color:var(--dim); font-size:13px;
}
.fineprint{font-size:13px; color:var(--faint); margin-top:6px}

/* ---------- mobile ----------
   Below the two-column breakpoint the sidebar becomes a strip above the
   article. It used to wrap: fifteen chips on /terms cost ~250px of screen
   before the title, so the page opened on a wall of links. One scrolling row
   keeps it to ~44px, and sticky keeps it reachable while you read.

   The grid has to become a block for that: a sticky grid item is confined to
   its own grid area, which in a single-column grid is exactly its own height,
   so it would never travel. */
@media (max-width:820px){
  .guide{display:block; padding:20px 20px 72px}
  .toc{
    position:sticky; top:62px; z-index:5;
    flex-direction:row; flex-wrap:nowrap; gap:7px;
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    /* Bleed to the page edges so chips scroll off cleanly, then pad back in. */
    margin:-20px -20px 0; padding:12px 20px;
    background:rgba(10,12,15,.94); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .toc::-webkit-scrollbar{display:none}
  .toc a{
    flex:0 0 auto; white-space:nowrap;
    border-left:none; border:1px solid var(--line); border-radius:999px;
    font-size:12.5px; padding:7px 13px;
  }
  /* Nav (62) plus the sticky strip, so an anchor does not land under both. */
  .guide section{scroll-margin-top:126px; margin-bottom:44px}
  .guide h1{font-size:28px; margin:24px 0 30px}
  .guide h2{margin-bottom:14px}
  .guide p, .guide ul, .steps > li{font-size:14.5px}
}

/* Definition-style tables: the first column is fixed at 150px and nowrap,
   which is fine for a chip or a code but not for "No position, other metrics
   fine" — that alone forced the page 200px wider than the screen. Stacked,
   each row reads as term then explanation. */
@media (max-width:600px){
  .guide table, .guide tbody, .guide tr, .guide td{display:block; width:auto}
  .guide tr{border-bottom:1px solid var(--line); padding:12px 0}
  .guide tr:last-child{border-bottom:none}
  .guide td{border-bottom:none; padding:0}
  .guide td:first-child{
    width:auto; white-space:normal; margin-bottom:5px; font-weight:500;
  }
  .guide{padding:16px 16px 60px}
  .toc{margin:-16px -16px 0; padding:12px 16px}
  .steps > li{padding-left:38px}
  .callout{padding:13px 15px}
  ul.devices{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .guide pre{padding:12px 13px}
}