/* Synced from blog globals.css, portfolio.css, design-skins.css and design-toggle.module.css. */
:root {
  --radius: 0.625rem;
  --font-serif: "Arsenica Trial Light", Georgia, serif;
  --font-inter: "Inter", sans-serif;
  --background: #f1f2f0;
  --foreground: #282423;
  --card: #fbfbf9;
  --card-foreground: #282423;
  --popover: #fbfbf9;
  --popover-foreground: #282423;
  --primary: #211e1d;
  --primary-foreground: #f8fafb;
  --secondary: #e7e8e5;
  --secondary-foreground: #282423;
  --muted: #e8e9e6;
  --muted-foreground: #706966;
  --accent: #efdfdc;
  --accent-foreground: #64221d;
  --destructive: oklch(0.577 0.245 27.325);
  --border: rgb(40 36 35 / 12%);
  --input: rgb(40 36 35 / 18%);
  --ring: #8b4038;
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --prose-body: #46413e;
  --prose-heading: #211e1d;
  --prose-strong: #171514;
  --prose-muted: #756e69;
  --prose-link: #7f251f;
  --prose-link-hover: #591713;
  --prose-quote: #5b504c;
  --prose-image-bg: #fbfbf9;
  --prose-shadow: rgb(43 31 28 / 12%);
}
.dark {
  --background: #0b0a0a;
  --foreground: oklch(0.985 0 0);
  --card: #151313;
  --card-foreground: oklch(0.985 0 0);
  --popover: #1a1717;
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: #211e1d;
  --secondary-foreground: oklch(0.985 0 0);
  --muted: #242020;
  --muted-foreground: oklch(0.708 0 0);
  --accent: #351613;
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: #a95a50;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  --prose-body: #d7d2ce;
  --prose-heading: #f2f0ec;
  --prose-strong: #faf8f4;
  --prose-muted: #938b86;
  --prose-link: #e1a49c;
  --prose-link-hover: #ffffff;
  --prose-quote: #cfc5c0;
  --prose-image-bg: #151313;
  --prose-shadow: rgb(0 0 0 / 28%);
}
html[data-design="signal"] {
  --background: #f3f7f4;
  --foreground: #252c27;
  --card: #fbfdfb;
  --card-foreground: #252c27;
  --popover: #fbfdfb;
  --popover-foreground: #252c27;
  --primary: #29332c;
  --primary-foreground: #f8fafb;
  --secondary: #e6ece7;
  --secondary-foreground: #29332c;
  --muted: #e8eeea;
  --muted-foreground: #6b756e;
  --accent: #dfe9e2;
  --accent-foreground: #29332c;
  --border: rgb(37 44 39 / 11%);
  --input: rgb(37 44 39 / 17%);
  --ring: #6d8875;
  --prose-body: #414a43;
  --prose-heading: #202722;
  --prose-strong: #1a211c;
  --prose-muted: #707a73;
  --prose-link: #476b57;
  --prose-link-hover: #31503f;
  --prose-quote: #526057;
  --prose-image-bg: #fbfdfb;
  --prose-shadow: rgb(41 57 47 / 11%);
}
html.dark[data-design="signal"] {
  --background: #0f0f0f;
  --foreground: #fafafa;
  --card: #141414;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #ebebeb;
  --primary-foreground: #292929;
  --secondary: #292929;
  --secondary-foreground: #fafafa;
  --muted: #292929;
  --muted-foreground: #a1a1a1;
  --accent: #292929;
  --accent-foreground: #fafafa;
  --border: rgb(255 255 255 / 10%);
  --input: rgb(255 255 255 / 15%);
  --ring: #777;
  --prose-body: #d8d8d8;
  --prose-heading: #eeeeee;
  --prose-strong: #f1f1f1;
  --prose-muted: #8a8a8a;
  --prose-link: #e6e6e6;
  --prose-link-hover: #fff;
  --prose-quote: #c7c7c7;
  --prose-image-bg: #141414;
  --prose-shadow: rgb(0 0 0 / 28%);
}
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.editorial-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-top: 18px;
  pointer-events: none;
}
.editorial-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}
.editorial-nav,
.editorial-theme-control {
  color: #fff;
  border-radius: 999px;
  background-color: rgba(12, 10, 10, .54);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 12px 40px rgba(0,0,0,.15);
}
.editorial-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(52px, auto)) 42px repeat(2, minmax(52px, auto));
  align-items: center;
  min-height: 50px;
  padding: 0 18px;
}
.editorial-nav > a {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.editorial-nav > a:hover,
.editorial-nav > a.is-active {
  color: #fff;
}
.editorial-nav-mark {
  color: #fff !important;
}
.editorial-nav-mark:hover {
  transform: scale(1.08);
}
.editorial-theme-control {
  color: #fff;
  border-radius: 999px;
  background-color: rgba(12, 10, 10, .54);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 12px 40px rgba(0,0,0,.15);
}
.editorial-theme-control .native-icon-button {
  color: rgba(255,255,255,.86);
  border-radius: 999px;
}
.editorial-theme-control .native-icon-button:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.editorial-header-spacer {
  height: 84px;
}
.native-icon-button {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: color-mix(in srgb, var(--foreground) 58%, transparent);
    transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  }
.native-icon-button:hover {
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
    color: var(--foreground);
  }
.native-icon-button:active {
    background: color-mix(in srgb, var(--foreground) 10%, transparent);
  }
.native-icon-button:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 38%, transparent);
    outline: none;
  }
.editorial-nav,
.editorial-theme-control {
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--border), 0 4px 16px #00000006;
}
.editorial-nav > a,
.editorial-theme-control .native-icon-button {
  color: var(--muted-foreground);
}
.editorial-nav > a:hover,
.editorial-nav > a.is-active,
.editorial-theme-control .native-icon-button:hover {
  color: var(--foreground);
}
.editorial-nav-mark {
  color: var(--foreground) !important;
}

.editorial-theme-control { display:grid; width:50px; height:50px; place-items:center; overflow:visible; position:relative; }
.native-icon-button { min-height:36px; padding:0; }
.native-icon-button svg { width:16px; height:16px; }
.editorial-nav-mark svg { width:24px; height:24px; }
@media(max-width:760px) {
 .editorial-site-header { padding-top:10px; }
 .editorial-nav-wrap { width:calc(100% - 20px); gap:6px; }
 .editorial-nav { flex:1; grid-template-columns:repeat(2,minmax(28px,1fr)) 28px repeat(2,minmax(28px,1fr)); min-width:0; padding:0 6px; }
 .editorial-nav > a { padding:0 3px; font-size:10px; }
 .editorial-theme-control { width:40px; height:46px; flex-shrink:0; }
 .editorial-header-spacer { height:72px; }
 .editorial-nav-mark svg { width:20px; height:20px; }
}
.appearance-menu {
  z-index: 110;
  min-width: 200px;
  max-width: calc(100vw - 24px);
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 8px 32px rgb(0 0 0 / 16%);
}

.appearance-option {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.appearance-option[data-highlighted] { background: var(--muted); }
.appearance-mode { margin-left: auto; flex-shrink: 0; color: var(--muted-foreground); }
.appearance-check { display: inline-flex; width: 16px; flex-shrink: 0; align-items: center; }

.appearance-menu { position:absolute; top:calc(100% + 8px); right:0; width:200px; }
.appearance-option { width:100%; border:0; background:transparent; text-align:left; font-weight:400; line-height:1.5; }
.appearance-option:hover:not(:disabled),.appearance-option:focus { background:var(--muted); outline:none; }
.appearance-check svg { width:15px; height:15px; }
.appearance-option[aria-checked="false"] .appearance-check { visibility:hidden; }
.appearance-mode { display:inline-flex; }
.appearance-mode svg { width:14px; height:14px; }