:root {
  --font: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 8px;
  --radius-sm: 6px;
  --space: 16px;
  --sidebar: 232px;
  --header: 60px;
  --bottom-nav: 72px;
  --measure: 62ch;
  --content: 1120px;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --p-bg: #000;
  --p-surface: #080808;
  --p-panel: #070707;
  --p-ink: #f4f4f4;
  --p-muted: #aaa;
  --p-border: #242424;
  --p-soft: #101010;
  --p-accent: #fff;
  --p-accent-soft: #161616;
  --p-on-accent: #050505;
  --sidebar-bg: #040404;
  --header-bg: #030303;
  --nav-current-bg: #121212;
  --nav-current-border: #2b2b2b;
  --icon-bg: #0b0b0b;
  --icon-border: #292929;
  --avatar-bg: #111;
  --file-symbol-bg: #101010;
  --photo-pending-bg: #101010;
  --glass: linear-gradient(145deg, #151515d9, #030303ef);
  --glass-border: #ffffff24;
  --glass-inset: inset 0 1px 0 #ffffff0b;
  --glass-shadow: 0 6px 18px #00000066;
  --nav-glass: #050505eb;
  --map-park: #0a1711;
  --map-building: #111;
  --map-road: #303030;
  --map-road-edge: #1c1c1c;
  --map-bg: #050505;
  --map-pin: #f1f1f1;
  --map-pin-ink: #111;
  --map-credit-bg: #000000cf;
  --shadow-section: 0 2px 6px #00000026;
  --track: #262626;
  --attention: #f5b544;
  --attention-soft: #f5b5441f;
  --attention-border: #f5b54459;
}

:root[data-theme="light"] {
  color-scheme: light;
  --p-bg: #fafafa;
  --p-surface: #fff;
  --p-panel: #fff;
  --p-ink: #282b31;
  --p-muted: #71757d;
  --p-border: #e5e5e6;
  --p-soft: #f2f2f1;
  --p-accent: #303944;
  --p-accent-soft: #edf2fb;
  --p-on-accent: #fff;
  --sidebar-bg: #f3f3f1;
  --header-bg: #fff;
  --nav-current-bg: #fff;
  --nav-current-border: #e2e3e4;
  --icon-bg: #fff;
  --icon-border: #e7e8e9;
  --avatar-bg: #e9eaeb;
  --file-symbol-bg: #f5f6f7;
  --photo-pending-bg: #f0f2f3;
  --glass: linear-gradient(145deg, #ffffffde, #f7faffb8);
  --glass-border: #ffffffec;
  --glass-inset: inset 0 1px 0 #fff;
  --glass-shadow: 0 4px 12px #4d647016;
  --nav-glass: #ffffffd9;
  --map-park: #dbe4d8;
  --map-building: #e2e5e0;
  --map-road: #fff;
  --map-road-edge: #e4e6e2;
  --map-bg: #eff0ed;
  --map-pin: #244f85;
  --map-pin-ink: #fff;
  --map-credit-bg: #ffffffa8;
  --shadow-section: 0 1px 2px #0000000a;
  --track: #e6e7e9;
  --attention: #a35d00;
  --attention-soft: #f5b54426;
  --attention-border: #d9a14a80;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  background: var(--p-bg);
  color: var(--p-ink);
}

html {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  font-kerning: normal;
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--p-ink);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--p-accent);
  color: var(--p-on-accent);
  border-radius: var(--radius-sm);
}

.skip:focus {
  top: 12px;
}