:root {
  --desk: #1c2124; --pane: #f8fafc; --bar: #eef2f7; --line: #d3dae4;
  --text: #1d2633; --dim: #636e7f; --accent: #6d3fe0; --link: #0b7a52;
  --code: "Geist Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--desk); color: var(--text); font-family: var(--code);
       display: grid; grid-template-rows: 1fr auto; }
main { display: grid; place-items: center; padding: clamp(16px, 5vw, 64px); }
.stack { width: min(100%, 920px); display: grid; gap: clamp(24px, 3.5vw, 40px); }
.hero-logo { width: clamp(220px, 23vw, 300px); color: #fff; }
.window { width: 100%; min-width: 0; background: var(--pane); border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px;
          box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .8); overflow: hidden; }
.tabs { display: flex; align-items: stretch; background: var(--bar); border-bottom: 1px solid var(--line); height: 52px; padding-left: 18px; overflow-x: auto; scrollbar-width: none; }
.tab-mark { width: 24px; align-self: center; margin-right: 18px; aspect-ratio: 170.08 / 167.18; flex: none; background: var(--text);
            -webkit-mask: url(mark.svg) center / contain no-repeat; mask: url(mark.svg) center / contain no-repeat; }
.tabs a { font: 500 14px var(--code); color: var(--dim); text-decoration: none; padding: 0 16px; display: flex; align-items: center;
          border-right: 1px solid var(--line); white-space: nowrap; }
.tabs a:first-of-type { border-left: 1px solid var(--line); }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); background: var(--pane); margin-bottom: -1px; }

.doc { padding: clamp(18px, 3vw, 32px) 0; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.75; counter-reset: ln; }
.doc > * { margin: 0; position: relative; padding: 0 clamp(16px, 4vw, 48px) 0 calc(2.8em + 2ch); }
.doc > *::before { counter-increment: ln; content: counter(ln); content: counter(ln) / ""; position: absolute; left: 0; width: 2.8em; text-align: right; color: var(--dim); font-weight: 400; }
.doc > * + * { margin-top: .9em; }
.doc h1 { font-size: 1.5em; font-weight: 700; line-height: 1.4; }
.doc h2 { font-size: 1em; font-weight: 700; margin-top: 1.8em !important; }
.doc h1 > span, .doc h2 > span { color: var(--accent); font-weight: 400; }
.doc h1 { padding-left: calc((2.8em + 2ch) / 1.5); }
.doc h1::before { width: 2.8em; font-size: calc(1em / 1.5); line-height: 2.1; }
.doc p { color: #364152; max-width: calc(70ch + 2.8em + 2ch); }
.doc a { color: var(--link); text-underline-offset: 4px; overflow-wrap: anywhere; }

footer { display: flex; justify-content: center; gap: 24px; padding: 0 16px 24px; font-size: 14px; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { opacity: .75; }

@media (max-width: 600px) {
  main { grid-template-rows: auto 1fr; place-items: stretch; padding: 20px 12px 16px; gap: 24px; }
  .stack { display: contents; }
  .topbar { align-self: start; }
  .hero-logo { width: 200px; }
  .window { align-self: start; }
  .tabs { padding-left: 0; }
  .tab-mark { display: none; }
  .tabs a { padding: 0 11px; font-size: 12px; flex: 1 0 auto; justify-content: center; }
  .tabs a:first-of-type { border-left: 0; }
  .tabs a:last-of-type { border-right: 0; }
  .doc > * { padding-left: calc(1.8em + 1.6ch); padding-right: 16px; }
  .doc > *::before { width: 1.8em; }
  .doc h1 { padding-left: calc((1.8em + 1.6ch) / 1.5); }
  .doc h1::before { width: 1.8em; }
}
@media (max-width: 330px) {
  .tabs a { padding: 0 8px; font-size: 11px; }
  .logo-link { flex: 1; }
  .hero-logo { width: 100%; }
}