/* angrypebble.tech: the studio's page (Server/site), one page per language (tr/, en/). The same look as the account
   service's pages (Server/Hucre.Accounts/WebPages.cs). */
:root { color-scheme: light dark; --ink: #1f2a44; --paper: #f4efe4; --line: #d6cdba; --accent: #23808f; --muted: #5b6478; }
@media (prefers-color-scheme: dark) { :root { --ink: #ece6d8; --paper: #121a2a; --line: #2b3853; --accent: #66c8d6; --muted: #a9b1c2; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 820px; margin: 0 auto; padding: 20px 16px 64px; }
nav.lang { display: flex; justify-content: flex-end; gap: 8px; }
nav.lang a { padding: .2em .85em; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9em; }
nav.lang a:hover { border-color: var(--accent); }
nav.lang a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--paper); font-weight: 600; }
h1 { font-size: 2.6em; line-height: 1.1; margin: .4em 0 .1em; letter-spacing: -.01em; }
h2 { font-size: 1.15em; margin: 1.8em 0 .3em; }
.by { color: var(--muted); margin: 0 0 1.4em; }
figure { margin: 0 0 1.4em; }
img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
figcaption { color: var(--muted); font-size: .85em; margin-top: .4em; }
.soon { display: inline-block; padding: .2em .7em; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 600; }
ul { padding-left: 1.2em; }
a { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0 16px; }
footer { color: var(--muted); font-size: .9em; }