.eyebrow { font: 13px var(--mono); color: var(--muted); margin: 0 0 14px; }
.eyebrow a { color: inherit; }
.doc-body h1 { font-size: clamp(36px, 5vw, 60px); }


.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-top: 130px; padding-bottom: 100px; }
.side { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.side nav { display: flex; flex-direction: column; margin-bottom: 28px; }
.side nav a { padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; display: flex; gap: 10px; transition: color 0.2s, background 0.2s; }
.side nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.side nav a[aria-current] { color: var(--text); background: rgba(61, 139, 255, 0.14); box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 900px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 140px; }
  .side { position: static; max-height: none; overflow: visible; }
  .side nav { flex-direction: row; overflow-x: auto; gap: 4px; margin: 0 -16px 8px; padding: 0 16px; scrollbar-width: none; }
  .side nav a { white-space: nowrap; }
  .side-here, .side .eyebrow:nth-of-type(2) { display: none; }
}

.doc-body { min-width: 0; }
.doc-body > h2 { margin-top: 64px; font-size: clamp(26px, 3vw, 36px); }
.doc-body > h3 { margin-top: 32px; }
.doc-body > p, .doc-body .lead { max-width: 760px; color: var(--muted); }
.doc-body p strong, td strong { color: var(--text); }
.bullets { padding-left: 20px; max-width: 760px; color: var(--muted); }
.bullets li { margin-bottom: 8px; }
.chains { display: grid; gap: 10px; margin: 0 0 24px; }

.screen { margin: 44px 0; padding-top: 32px; border-top: 1px solid var(--line); }
.screen h3 { font-size: 22px; font-weight: 500; }
.screen p { max-width: 760px; color: var(--muted); }
.shot { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.shot img { width: 100%; cursor: zoom-in; }
.shots { margin-top: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { font: 12px var(--mono); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--muted); cursor: pointer; transition: color 0.2s, background 0.2s; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-pressed] { background: var(--accent); border-color: var(--accent); color: #fff; }

.table { overflow-x: auto; margin: 16px 0 26px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
th { font: 500 12px var(--mono); color: var(--text); background: rgba(255, 255, 255, 0.03); }
td:first-child { color: var(--text); }
tr:last-child td { border-bottom: 0; }


.next { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 48px; padding: 20px 26px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--text); font-size: 18px; transition: border-color 0.2s, background 0.2s; }
.next:hover { border-color: var(--accent); background: rgba(61, 139, 255, 0.08); }
.next .muted { font: 12px var(--mono); }