/* the legal and credits pages (privacy, terms, credits, in English and Turkish), in the studio's own look:
   Google Sans Flex with round ends, upright titles in its heavier weight, the studio's neutral dark greys */
:root { color-scheme: dark; --ground: #131313; --text: #ececec; --muted: #a9a9a9; --faint: #878787;
  --line: rgba(236, 236, 236, 0.1); --line-strong: rgba(236, 236, 236, 0.2); --raise: rgba(236, 236, 236, 0.08);
  --sans: "Google Sans Flex", ui-rounded, ui-sans-serif, system-ui, -apple-system, sans-serif; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--muted); font: 400 16px/1.6 var(--sans); font-variation-settings: "ROND" 100; -webkit-font-smoothing: antialiased; }
main { max-width: 38rem; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left)); }
/* the top: the ebru wordmark home, the other language as a quiet pill */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 40px; }
.top a:first-child { display: inline-flex; align-items: center; height: 44px; color: var(--text); text-decoration: none; }
.top a:first-child svg { height: 22px; width: auto; display: block; }
.top a:last-child, .foot a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--text); font-size: 14px; text-decoration: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 150ms var(--ease-out), background-color 150ms ease; }
.top a:last-child:active, .foot a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .top a:last-child:hover, .foot a:hover { background: var(--raise); } }
h1 { margin: 0 0 6px; font: 600 clamp(28px, 7vw, 36px)/1.1 var(--sans); letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
h2 { margin: 36px 0 8px; font: 600 17px/1.3 var(--sans); color: var(--text); }
p, li { color: var(--muted); text-wrap: pretty; }
ul { padding-left: 1.2em; } li { margin: 4px 0; } li::marker { color: var(--faint); }
strong { color: var(--text); font-weight: 500; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }
.lede { color: var(--text); font-size: 17px; }
.date { margin: 0 0 28px; font-size: 13px; color: var(--faint); }
pre { white-space: pre-wrap; font: 12px/1.55 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); background: var(--raise); padding: 14px 16px; border-radius: 12px; }
/* the other pages, at the foot */
.foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .top a, .foot a { transition: background-color 150ms ease; } }