:root {
  --spec-reader-bg: #ffffff;
  --spec-reader-muted: #f6f8fa;
  --spec-reader-border: #d0d7de;
  --spec-reader-text: #1f2328;
  --spec-reader-secondary: #656d76;
  --spec-reader-link: #0969da;
}

.spec-reader-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spec-reader-button, .spec-reader-link { appearance: none; border: 1px solid var(--spec-reader-border); border-radius: 6px; background: var(--spec-reader-bg); color: var(--spec-reader-text); cursor: pointer; font: inherit; padding: 6px 10px; text-decoration: none; }
.spec-reader-button:hover, .spec-reader-link:hover { background: var(--spec-reader-muted); }
.spec-reader-button[aria-pressed="true"] { background: #ddf4ff; border-color: #54aeff; color: #0550ae; }
.spec-reader-path { color: var(--spec-reader-secondary); display: block; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 2px; overflow-wrap: anywhere; }
.spec-reader-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }
.spec-reader-toc { border-right: 1px solid var(--spec-reader-border); max-height: 100%; overflow: auto; padding: 18px 14px; }
.spec-reader-toc ol { list-style: none; margin: 10px 0 0; padding: 0; }
.spec-reader-toc li { margin: 5px 0; }
.spec-reader-toc .level-3 { padding-left: 12px; }
.spec-reader-toc .level-4, .spec-reader-toc .level-5, .spec-reader-toc .level-6 { padding-left: 24px; }
.spec-reader-toc a { color: var(--spec-reader-secondary); text-decoration: none; }
.spec-reader-toc a:hover { color: var(--spec-reader-link); text-decoration: underline; }
.spec-reader-source { background: #0d1117; color: #e6edf3; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0; overflow: auto; padding: 20px; white-space: pre-wrap; }
.spec-reader-source[hidden], .spec-md[hidden], .spec-reader-toc[hidden] { display: none !important; }

.spec-md { color: var(--spec-reader-text); font: 15px/1.65 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: auto; padding: 18px 28px 60px; }
.spec-md > :first-child { margin-top: 0; }
.spec-md h1, .spec-md h2, .spec-md h3, .spec-md h4 { line-height: 1.3; margin: 1.5em 0 .65em; scroll-margin-top: 16px; }
.spec-md h1, .spec-md h2 { border-bottom: 1px solid #d8dee4; padding-bottom: .3em; }
.spec-md h1 { font-size: 2em; }.spec-md h2 { font-size: 1.5em; }.spec-md h3 { font-size: 1.25em; }.spec-md h4 { font-size: 1em; }
.spec-md-anchor { color: transparent; float: left; margin-left: -20px; padding-right: 4px; text-decoration: none; }
.spec-md h1:hover .spec-md-anchor, .spec-md h2:hover .spec-md-anchor, .spec-md h3:hover .spec-md-anchor, .spec-md h4:hover .spec-md-anchor { color: var(--spec-reader-secondary); }
.spec-md p, .spec-md ul, .spec-md ol, .spec-md blockquote { margin: 0 0 1em; }
.spec-md li + li { margin-top: .25em; }
.spec-md a { color: var(--spec-reader-link); }
.spec-md code { background: rgba(175,184,193,.2); border-radius: 5px; font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .16em .35em; }
.spec-md pre { background: #0d1117; border-radius: 6px; color: #e6edf3; overflow: auto; padding: 16px; }
.spec-md pre code { background: transparent; color: inherit; padding: 0; }
.spec-md blockquote { border-left: 4px solid var(--spec-reader-border); color: var(--spec-reader-secondary); padding: 4px 16px; }
.spec-md-table-wrap { margin: 0 0 1.25em; overflow: auto; }
.spec-md table { border-collapse: collapse; font-size: 13px; min-width: 100%; width: max-content; }
.spec-md th, .spec-md td { border: 1px solid var(--spec-reader-border); max-width: 520px; padding: 7px 10px; text-align: left; vertical-align: top; }
.spec-md th { background: var(--spec-reader-muted); font-weight: 600; position: sticky; top: 0; }
.spec-md tr:nth-child(even) td { background: #fbfcfd; }

@media (max-width: 760px) {
  .spec-reader-shell { grid-template-columns: 1fr; }
  .spec-reader-toc { border-bottom: 1px solid var(--spec-reader-border); border-right: 0; max-height: 180px; }
  .spec-md { padding: 16px 18px 48px; }
}
