:root {
  color-scheme: dark;
  --surface-ground: #090b14;
  --surface-1: #171924;
  --ink-1: #e6e8f0;
  --ink-2: #b6bdd2;
  --ink-3: #8a8fa8;
  --line-1: #262a3a;
  --link: #e6e8f0;
  --link-rule: #8a8fa8;
  --focus: #f5a623;
  --type-label: 12px;
  --type-read: 14px;
  --type-head: 17px;
  --type-title: 21px;
}
html { background: var(--surface-ground); color: var(--ink-1); }
body {
  margin: 0;
  background: var(--surface-ground);
  color: var(--ink-1);
  font: var(--type-read)/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.nav { font-size: var(--type-label); color: var(--ink-3); }


.legal-bar { box-sizing: border-box; height: 56px; border-bottom: 1px solid var(--line-1); background: var(--surface-ground); }
.legal-bar-in {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.legal-bar .brand { margin: 0; }
.legal-bar .brand-link { display: inline-flex; align-items: center; min-height: 44px; }
.legal-bar .brand-link img { width: 180px; }
.legal-bar .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 8px; font-size: var(--type-read); }
.legal-bar .nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  
  .legal-bar { height: auto; }
  .legal-bar-in { flex-wrap: wrap; height: auto; padding-bottom: 4px; gap: 0 16px; }
  .legal-bar .nav { justify-content: flex-start; }
}
a { color: var(--link); text-decoration-color: var(--link-rule); text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
article { border-top: 1px solid var(--line-1); padding-top: 12px; margin-top: 24px; }
h1 { font: 700 var(--type-page) / 1.15 var(--font-display); letter-spacing: var(--track-display); margin: 12px 0 4px; text-wrap: balance; }
h2 { font: 500 var(--type-head) / 1.3 var(--font-display); letter-spacing: var(--track-display); margin: 28px 0 4px; color: var(--ink-1); }
p, li { color: var(--ink-2); }
.meta { color: var(--ink-3); font-size: var(--type-label); }


.brand { margin: 0 0 8px; }
.brand-link { display: inline-block; line-height: 0; }
.brand-link img { height: auto; }
.logo-light { display: none; }
.site-foot {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--line-1);
}
.site-foot .nav { margin: 12px 0 0; }

:root[data-theme="light"] {
  color-scheme: light;
  --surface-ground: #f3f2ee;
  --surface-1: #ffffff;
  --ink-1: #0e1020;
  --ink-2: #33374a;
  --ink-3: #5c6178;
  --line-1: #d6d4cc;
  --link: #0e1020;
  --link-rule: #5c6178;
  --focus: #0e1020;
}
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: inline; }


@media (max-width: 600px), (max-height: 500px) and (max-width: 1023px) {
  body { font-size: 16px; line-height: 1.55; }
  h1, h2 { overflow-wrap: anywhere; }
  .meta, main .nav { font-size: 16px; }
  .site-foot .nav a, main .nav a, .legal-bar .nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .site-foot .brand-link { display: inline-flex; align-items: center; min-height: 44px; }
}


@media (pointer: coarse) {
  .site-foot .nav a, main .nav a, .legal-bar .nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .site-foot .brand-link { display: inline-flex; align-items: center; min-height: 44px; }
}