:root { color-scheme: dark; --fg: #fff; --muted: rgba(255, 255, 255, .74); --faint: rgba(255, 255, 255, .5); --line: rgba(255, 255, 255, .28); --bg: #07121f; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }

/* home */
.bg { position: fixed; inset: 0; z-index: -1; }
.bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.home main { min-height: 100svh; max-width: calc(34rem + 2 * clamp(1.5rem, 8vw, 10rem)); padding: 10vh clamp(1.5rem, 8vw, 10rem) 22vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.kicker { margin-top: .7rem; font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: var(--muted); }
.lead { margin-top: 1.6rem; max-width: 30rem; font-size: 1.02rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.lead + .lead { margin-top: 1rem; }
.lead a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); }
.lead a:hover { border-color: var(--fg); }
.endpoint { margin-top: 2.6rem; appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .35rem 0; color: var(--fg); font: .92rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; cursor: pointer; transition: border-color .2s, color .2s; }
.endpoint:hover, .endpoint:focus-visible { border-color: var(--fg); outline: none; }
.endpoint[data-state="copied"] { color: var(--muted); }
.hint { margin-top: .6rem; font-size: .75rem; color: var(--faint); min-height: 1rem; }
footer { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 1.6rem; padding: 1.2rem 1rem; font-size: .76rem; }
footer a { color: var(--faint); text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--fg); }

/* documents */
.doc main { max-width: 42rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; line-height: 1.65; }
.doc .back { display: inline-block; margin-bottom: 2.5rem; font-size: .85rem; color: var(--faint); text-decoration: none; }
.doc .back:hover { color: var(--fg); }
.doc h1 { font-size: 1.9rem; margin-bottom: .4rem; }
.doc .meta { color: var(--faint); font-size: .85rem; margin-bottom: 2.2rem; }
.doc h2 { font-size: 1.1rem; margin: 2.1rem 0 .6rem; }
.doc p, .doc li { color: var(--muted); margin-bottom: .8rem; }
.doc ul { padding-left: 1.2rem; }
.doc a { color: var(--fg); }
.doc address { font-style: normal; color: var(--muted); line-height: 1.7; }

@media (max-width: 600px) {
  .bg img { object-position: 22% 60%; }
  .home main { padding: 12vh 1.4rem 24vh; }
  .endpoint { font-size: .8rem; white-space: normal; word-break: break-all; }
  footer { gap: 1rem; flex-wrap: wrap; }
}
@media (min-width: 1600px) {
  .home main { max-width: calc(38rem + 20rem); }
  h1 { font-size: 4rem; }
  .lead { font-size: 1.15rem; max-width: 34rem; }
  .endpoint { font-size: 1rem; }
  footer { font-size: .85rem; }
}
@media (max-height: 540px) {
  /* short viewports (phone landscape): footer flows after the content instead of covering it */
  .home main { min-height: auto; padding-top: 3rem; padding-bottom: 1rem; justify-content: flex-start; }
  footer { position: static; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }