:root {
  color-scheme: dark;
  --canvas: #050817;
  --paper: #0c1224;
  --raised: #111a31;
  --ink: #f7faff;
  --muted: #a9b4c7;
  --quiet: #748197;
  --rule: #22304b;
  --blue: #2878ff;
  --cyan: #35c8ff;
  --green: #5ce1b8;
  --dark: #030510;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: #2878ff66; }
.wrap { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 10px 14px;
  color: var(--dark);
  background: var(--green);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 4px; }
[id] { scroll-margin-top: 100px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 760; letter-spacing: -.05em; text-wrap: balance; }
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { word-break: keep-all; overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1 { margin-bottom: 25px; font-size: clamp(3.1rem, 5.8vw, 5.8rem); line-height: .96; }
.hero h1 { font-size: clamp(3.1rem, 4.5vw, 4.1rem); line-height: 1; }
h2 { margin-bottom: 18px; font-size: clamp(2.15rem, 3.7vw, 3.7rem); line-height: 1.02; }
h3 { margin-bottom: 9px; font-size: 1.08rem; line-height: 1.3; }
.utility {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, monospace;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }