/* The studio site on voxelandverb.com (backlog 290). Same palette as the app, nothing else. */
:root {
  --bg: #F6F8FA; --ink: #15212C; --muted: #5F6F7D; --line: #DCE3E9; --celeste: #2270B0;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E1620; --ink: #E4EAF0; --muted: #8C9BA8; --line: #26333F; --celeste: #7CB8EA; }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 34rem; margin: 0 auto; padding: 18vh 24px 48px; }
h1 { font: 400 2.6rem/1.1 var(--serif); letter-spacing: -0.02em; color: var(--celeste); margin: 0 0 12px; text-wrap: balance; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }
a { color: var(--celeste); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.icon { width: 96px; height: 96px; border-radius: 22px; display: block; margin-bottom: 24px; }
footer { width: 100%; max-width: 34rem; margin: 0 auto; padding: 0 24px 32px; color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--line); padding-top: 16px; }
footer a { color: inherit; }