:root { color-scheme: light; --fg: #111; --muted: #7a7a7a; --bg: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
  padding: 28px 32px; overflow-x: hidden;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--muted); }

.top { display: flex; align-items: center; gap: 10px; }
.top a { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.logo { width: 14px; height: 14px; border-radius: 50%; background: var(--fg); flex: none; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 18vh; position: relative; z-index: 1; max-width: 1200px; }
.grid h2 { font: inherit; color: var(--muted); margin: 0 0 6px; }
.grid p { margin: 0; }
.about { grid-column: span 2; max-width: 30em; }
.about p { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }

.disc { position: fixed; right: -14vw; bottom: -22vw; width: 52vw; height: 52vw; border-radius: 50%; background: var(--fg); z-index: 0; pointer-events: none; }

.foot { margin-top: auto; padding-top: 48px; font-size: 13px; color: var(--muted); position: relative; z-index: 1; }

.doc { max-width: 34em; margin-top: 12vh; position: relative; z-index: 1; }
.doc h1 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 24px; }
.doc h2 { font: inherit; color: var(--muted); margin: 24px 0 4px; }
.doc p { margin: 0; }

@media (max-width: 800px) {
  body { padding: 20px 16px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: 12vh; }
  .about { grid-column: 1 / -1; }
  .about p { font-size: 20px; }
  .disc { width: 90vw; height: 90vw; right: -40vw; bottom: -40vw; }
}