* { box-sizing:border-box; }

html { min-width:320px; min-height:100%; scroll-behavior:auto; }

.docs-body {
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  color:var(--text-primary);
  background:radial-gradient(circle at 75% 15%,var(--bg-glow) 0,transparent 34%),linear-gradient(145deg,var(--bg-master),var(--bg-gradient-end));
  font:var(--type-reading)/1.65 var(--font-ui);
}

.skip-link {
  position:fixed;
  z-index:100;
  top:8px;
  left:8px;
  padding:8px 12px;
  color:var(--bg-master);
  background:var(--state-run);
  border-radius:var(--control-radius);
  transform:translateY(-160%);
}

.skip-link:focus { transform:none; }

.docs-header,
.docs-main,
.docs-footer {
  width:min(1120px,calc(100% - 32px));
  margin-inline:auto;
}

.docs-header {
  min-height:60px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  margin-top:16px;
  padding:8px 16px;
  border:2px solid var(--line-bright);
  border-radius:var(--panel-radius);
  background:linear-gradient(var(--surface-title),var(--bg-panel));
  box-shadow:inset 0 2px var(--line-bright),4px 4px var(--shadow-deep);
}

.docs-brand {
  display:grid;
  gap:2px;
  color:var(--text-primary);
  font:var(--type-micro)/1 var(--font-display);
  letter-spacing:.04em;
  text-decoration:none;
  text-shadow:2px 2px var(--shadow);
}

.docs-eyebrow,
.docs-tagline { margin:0; }
.docs-eyebrow { color:var(--text-heading); font-size:var(--type-title); font-weight:var(--weight-heavy); letter-spacing:.05em; }
.docs-tagline { margin-top:2px; color:var(--text-muted); font-size:var(--type-body); line-height:1.3; }

.docs-header nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 8px; }
.docs-header nav a {
  padding:5px 7px;
  color:var(--text-primary);
  border:1px solid transparent;
  border-radius:var(--control-radius);
  font-size:var(--type-body);
  font-weight:var(--weight-bold);
  text-underline-offset:.18em;
}
.docs-header nav a:hover,
.docs-header nav a[aria-current='page'] { color:var(--state-run); border-color:var(--line); background:var(--surface-control); }

.docs-main {
  padding-block:24px 40px;
}

.docs-main h1,
.docs-main h2,
.docs-main h3,
.docs-main h4 { color:var(--text-heading); font-family:var(--font-ui); }
.docs-main h1 { margin:0 0 12px; font-size:var(--type-doc-title); line-height:1.2; }
.docs-main h2 { margin:32px 0 8px; color:var(--syntax-keyword); font-size:var(--type-doc-section); line-height:1.3; }
.docs-main h3 { margin:24px 0 8px; color:var(--syntax-string); font-size:var(--type-heading); }
.docs-main h4 { font-size:var(--type-body); }
.docs-main p,
.docs-main li { max-width:76ch; }

.docs-main a { color:var(--focus); text-decoration-thickness:1px; text-underline-offset:.18em; }
.docs-main a:hover { color:var(--state-run); }
a:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

.docs-intro {
  padding:20px;
  border:2px solid var(--line-bright);
  border-radius:var(--panel-radius);
  background:var(--bg-panel);
  box-shadow:4px 4px var(--shadow-deep);
}
.docs-intro p { margin-bottom:0; }

.resource-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.resource-card {
  min-height:120px;
  display:flex;
  flex-direction:column;
  padding:16px;
  color:var(--text-primary) !important;
  text-decoration:none;
  border:2px solid var(--line-bright);
  border-radius:var(--panel-radius);
  background:var(--bg-panel);
  box-shadow:3px 3px var(--shadow-deep);
}
.resource-card:hover,
.resource-card:focus-visible { border-color:var(--state-run); transform:translateY(-2px); }
.resource-card strong { display:block; color:var(--syntax-keyword); font-size:var(--type-title); }
.resource-card span { display:block; margin-top:8px; color:var(--text-muted); line-height:1.5; }

.docs-main pre {
  max-width:100%;
  overflow:auto;
  padding:12px;
  color:var(--text-primary);
  border:2px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface-terminal);
  font:var(--type-code)/1.6 var(--font-code);
  font-variant-ligatures:none;
}
.docs-main code { color:var(--syntax-string); font-family:var(--font-code); font-variant-ligatures:none; }
.docs-main pre code { color:inherit; }
.docs-main table { width:100%; max-width:900px; border-collapse:collapse; }
.docs-main th,
.docs-main td { padding:8px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.docs-main th { color:var(--state-run); background:var(--surface-title); }
.docs-main td { background:var(--bg-panel); }

.docs-footer {
  padding:16px 0 32px;
  color:var(--text-muted);
  border-top:2px solid var(--line);
}

* { scrollbar-color:var(--text-muted) var(--bg-panel); }

@media (max-width:760px) {
  .docs-header { grid-template-columns:auto minmax(0,1fr); }
  .docs-header nav { grid-column:1/-1; justify-content:flex-start; border-top:1px solid var(--line); padding-top:6px; }
  .resource-grid { grid-template-columns:1fr; }
  .resource-card { min-height:0; }
}

@media (max-width:420px) {
  .docs-header,
  .docs-main,
  .docs-footer { width:min(calc(100% - 16px),1120px); }
  .docs-header { margin-top:8px; padding-inline:10px; }
  .docs-tagline { display:none; }
  .docs-main { padding-top:16px; }
  .docs-main h1 { font-size:24px; }
  .docs-main table { display:block; max-width:100%; overflow:auto; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; }
}

@media print {
  .docs-body { color:#000; background:#fff; }
  .docs-header nav,
  .docs-footer { display:none; }
  .docs-header,
  .docs-intro,
  .resource-card { color:#000; background:#fff; box-shadow:none; }
  .docs-main a,
  .docs-main code { color:#000; }
}