@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: var(--font-ui);
  font-synthesis: none;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-code: ui-monospace, monospace;
  --font-brand: "JetBrains Mono", monospace;
  --accent: #7db4f0;
  --activity-color: #39d353;
  --link: var(--accent);
  --danger: #ef8b8b;
  --danger-border: #8a4545;
  --success: #6ac886;
  --code-string: #a5d6ff;
  --code-keyword: #ff7b72;
  --code-function: #d2a8ff;
  --diff-addition: #14301f;
  --diff-deletion: #3a1d22;
  --diff-hunk: #172535;
  --diff-hunk-text: #a0b5cb;
  --backdrop: #0009;
  --selection-background: color-mix(in srgb, var(--accent) 16%, var(--field));
  --contribution-0: color-mix(in srgb, var(--text) 7%, var(--background));
  --contribution-1: color-mix(in srgb, var(--activity-color) 28%, var(--background));
  --contribution-2: color-mix(in srgb, var(--activity-color) 48%, var(--background));
  --contribution-3: color-mix(in srgb, var(--activity-color) 76%, var(--background));
  --contribution-4: var(--activity-color);
}
:root, [data-color-palette="graphite"] {
  --background: #111111;
  --text: #e5e5e5;
  --muted: #969696;
  --border: #303030;
  --field: #181818;
  --avatar: #232323;
  --avatar-ink: #b0b0b0;
}
[data-color-palette="slate"] {
  --background: #15191d;
  --text: #e2e7eb;
  --muted: #9aa7b2;
  --border: #303942;
  --field: #1d2329;
  --avatar: #28323b;
  --avatar-ink: #b0c0cc;
}
[data-color-palette="midnight"] {
  --background: #10141f;
  --text: #e1e6f2;
  --muted: #9ba7be;
  --border: #2b354c;
  --field: #181e2e;
  --avatar: #232d43;
  --avatar-ink: #b2bed8;
}
[data-color-palette="sand"] {
  --background: #1a1714;
  --text: #eee5d9;
  --muted: #b1a393;
  --border: #3b332a;
  --field: #231e19;
  --avatar: #30281f;
  --avatar-ink: #cbbba5;
}
[data-interface-font="system"] { --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif; }
[data-interface-font="jetbrains"] { --font-ui: "JetBrains Mono", ui-monospace, monospace; }
[data-interface-font="serif"] { --font-ui: Georgia, "Times New Roman", serif; }
[data-code-font="jetbrains"] { --font-code: "JetBrains Mono", ui-monospace, monospace; }
[data-brand-font="interface"] { --font-brand: var(--font-ui); }
[data-brand-font="system"] { --font-brand: ui-monospace, monospace; }
[data-brand-font="serif"] { --font-brand: Georgia, "Times New Roman", serif; }
button, input, select, textarea { font-family: inherit; }
code, pre { font-family: var(--font-code); }
[data-color-palette="custom"] {
  --background: var(--custom-background, #111111);
  --text: var(--custom-text, #e5e5e5);
  --muted: var(--custom-muted, #969696);
  --border: var(--custom-border, #303030);
  --field: var(--custom-field, #181818);
  --avatar: var(--custom-avatar, #232323);
  --avatar-ink: var(--custom-avatar-ink, #b0b0b0);
}

.notifications {
  position: fixed;
  inset: auto 24px 24px auto;
  width: min(380px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
  font-family: var(--font-ui);
}
.notifications[hidden] { display: none; }
.notification-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--field);
  box-shadow: 0 6px 24px #0004;
  pointer-events: auto;
  animation: notification-enter 150ms ease-out;
}
.notification-icon { color: var(--success); line-height: 20px; font-size: 16px; }
.notification-error .notification-icon { color: var(--danger); }
.notification-toast .notification-message {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font: 400 13px/20px var(--font-ui);
  overflow-wrap: anywhere;
}
.notification-toast .notification-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -4px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: 20px/1 var(--font-ui);
  cursor: pointer;
}
.notification-toast .notification-close:hover { color: var(--text); background: var(--background); }
.notification-toast .notification-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes notification-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .notifications { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .notification-toast { animation: none; } }

:root { --motion-fast: 120ms; --motion-normal: 180ms; --motion-ease: cubic-bezier(.2, .7, .2, 1); }
a, button, input, textarea, select, summary { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
dialog[open] { animation: dialog-enter var(--motion-normal) var(--motion-ease); }
dialog[open]::backdrop { animation: backdrop-enter var(--motion-normal) ease; transition: background-color var(--motion-fast) ease; }
dialog[data-closing]::backdrop { background-color: transparent; animation: none; }
.popover-enter-active, .popover-leave-active { transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); transform-origin: top right; }
.popover-enter-from, .popover-leave-to { opacity: 0; transform: translateY(-4px) scale(.985); }
.popover-leave-active { pointer-events: none; }
.search-dropdown, .path-overflow[open] .path-menu { animation: popover-enter var(--motion-fast) var(--motion-ease); }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-enter { from { background-color: transparent; } }
@keyframes popover-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-normal: 0ms; }
  dialog[open], dialog[open]::backdrop, .search-dropdown, .path-overflow[open] .path-menu { animation: none; }
}

.global-settings-content > section { animation: content-enter var(--motion-fast) ease; }
@keyframes content-enter { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .global-settings-content > section { animation: none; } }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.site-credit { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); color: var(--muted); font: 11px/1.5 var(--font-ui); opacity: .65; }
@media (max-width: 600px) { .site-credit { right: max(16px, env(safe-area-inset-right)); } }
.site-credit a { color: inherit; text-decoration: none; }
.site-credit a:hover { color: var(--text); }