/* ==========================================================================
   er-kongen-dod.no — design system (open-base)
   Ultra-minimal: light neutral background, white borderless surfaces, pills,
   near-monochrome. Geist for content, Geist Mono for numbers and micro labels.
   The accent color is reserved for alarm/critical states only.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #e9e9e6;
  --text: #171717;
  --text-2: #666666;
  --text-3: #6f6f6f;
  --border: rgba(0, 0, 0, 0.05);
  --border-strong: rgba(0, 0, 0, 0.1);

  --accent: #d92d20;
  --accent-soft: rgba(217, 45, 32, 0.08);

  --ok: #157f3d;

  --inverse-bg: #171717;
  --inverse-text: #fafafa;

  --ring: rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.1);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --surface: #191919;
  --surface-2: #0e0e0e;
  --surface-3: #262626;
  --text: #ededed;
  --text-2: #a3a3a3;
  --text-3: #9a9a9a;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent: #f4645a;
  --accent-soft: rgba(244, 100, 90, 0.12);

  --ok: #6ccb8b;

  --inverse-bg: #fafafa;
  --inverse-text: #171717;

  --ring: rgba(255, 255, 255, 0.16);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* System dark mode applies unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --surface: #191919;
    --surface-2: #0e0e0e;
    --surface-3: #262626;
    --text: #ededed;
    --text-2: #a3a3a3;
    --text-3: #9a9a9a;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);

    --accent: #f4645a;
    --accent-soft: rgba(244, 100, 90, 0.12);

    --ok: #6ccb8b;

    --inverse-bg: #fafafa;
    --inverse-text: #171717;

    --ring: rgba(255, 255, 255, 0.16);
    --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Numbers and data: mono with tabular digits so nothing jumps */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--surface-3); }

/* UI chrome must not be text-selectable (iOS long-press etc.).
   Real content/data the user may want to copy stays selectable. */
button, .site-header, .site-footer, .menu, .toast {
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header { background: transparent; }

.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-tld { color: var(--text-3); font-weight: 500; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.icon-btn:hover { background: var(--surface-3); }
.icon-btn:active { transform: scale(0.94); }

.icon-btn.open { background: var(--inverse-bg); color: var(--inverse-text); }

/* Toggle buttons (on/off states) invert when active */
.toggle-btn.on { background: var(--inverse-bg); color: var(--inverse-text); }
.toggle-btn.on:hover { opacity: 0.85; background: var(--inverse-bg); }

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, opacity 0.15s ease;
}

.pill-btn:active { transform: scale(0.97); }

.pill-btn.primary { background: var(--inverse-bg); color: var(--inverse-text); }
.pill-btn.primary:hover { opacity: 0.85; }

.pill-btn.ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.pill-btn.ghost:hover { background: var(--surface-2); }
.pill-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Settings menu
   -------------------------------------------------------------------------- */

.settings-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 296px;
  max-height: min(560px, calc(100dvh - 90px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  padding: 20px;
  z-index: 60;
  transform-origin: top right;
  animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.menu-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Options share the row evenly when they fit; locales with long words
   («Pantalla completa», «Бегущая строка») wrap to their own row rather
   than wrapping inside the button. gap applies both ways, so the spacing
   between wrapped rows equals the spacing within a row */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-grid .opt-btn { flex: 1 1 auto; white-space: nowrap; }

.menu-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background-color: var(--surface-2);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  border: none;
  border-radius: 12px;
  padding: 11px 44px 11px 14px;
  cursor: pointer;
}

.opt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  color: var(--text-2);
  transition: background-color 0.13s ease, color 0.13s ease, transform 0.13s ease;
}

.opt-btn .icon { width: 14px; height: 14px; }

.opt-btn:hover { background: var(--surface-3); color: var(--text); }
.opt-btn:active { transform: scale(0.97); }

.opt-btn.active {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-weight: 600;
}

.opt-btn.wide { width: 100%; }
.opt-btn.copied { background: var(--ok); color: #fff; }

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 18px -20px;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease;
  margin: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.switch:checked { background: var(--inverse-bg); }
.switch:checked::after { transform: translateX(17px); background: var(--inverse-text); }

.menu-info {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-3);
}

.menu-info a { color: var(--text-2); text-decoration: none; }
.menu-info a:hover { text-decoration: underline; }

.menu-year { margin-top: 6px; }

/* Photo credit + non-commercial disclaimer live at the bottom of the menu */
#menuDisclaimer, #menuInfo { margin-top: 6px; }

/* --------------------------------------------------------------------------
   THE TOOL — product styles go here
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  flex: 1;
}

.mono { font-family: var(--font-mono); }

.preview-banner {
  width: fit-content;
  margin: 10px auto 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-align: center;
}

.royal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 0 44px;
}

.portrait {
  width: 240px;
  max-width: 60vw;
  height: auto;
  border-radius: 24px;
  box-shadow: var(--shadow-overlay);
}

.memorial .portrait { width: 280px; max-width: 66vw; }

.status-line {
  margin: 30px 0 0;
  font-size: clamp(30px, 6.5vw, 46px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* The age sits right under the name: small, quiet, secondary */
.age-value {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 450;
  color: var(--text-2);
}

/* ------------------------------------------------------------- memorial */

.memorial-years {
  margin: 12px 0 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.memorial-statement {
  margin: 20px 0 0;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
}

.memorial-source { margin: 8px 0 0; font-size: 10.5px; color: var(--text-3); }

.candle-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}

/* A real-looking candle: cylinder with a melted lip and a wax drip, dark
   wick, and — once lit — a three-layer flame (blue base, orange body,
   white-hot core) inside a warm pulsing glow. The flame layers are the
   classic rotated-teardrop shape (sharp corner turned upwards). */

.candle {
  position: relative;
  width: 96px;
  height: 150px;
}

.candle-body {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 94px;
  border-radius: 4px 4px 5px 5px;
  background: linear-gradient(90deg,
    #b9ac8e 0%, #e6dcc2 16%, #fbf5e3 38%, #fffdf3 50%,
    #f4ecd7 66%, #d5c9a9 88%, #a99c7d 100%);
}

/* Melted lip at the top of the cylinder */
.candle-body::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #fffef9 55%, #ded2b2 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18);
}

/* A hardened wax drip running down one side */
.candle-body::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3.5px;
  width: 7px;
  height: 22px;
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(180deg, #fffef6, #efe6cc);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.wick {
  position: absolute;
  left: 50%;
  bottom: 97px;
  transform: translateX(-50%);
  width: 3px;
  height: 9px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #574835, #1d1d1d);
}

/* Ember-glow on the wick tip once lit */
.candle.lit .wick {
  background: linear-gradient(180deg, #ffb45e 0%, #b45309 40%, #1d1d1d 100%);
}

/* Warm halo around the flame */
.candle-glow {
  position: absolute;
  left: 50%;
  bottom: 66px;
  transform: translate(-50%, 0);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 186, 92, 0.34) 0%, rgba(255, 152, 56, 0.14) 42%,
    rgba(255, 140, 40, 0) 68%);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.candle.lit .candle-glow {
  opacity: 1;
  animation: glow-pulse 3.4s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, 0) scale(1.12); opacity: 1; }
}

/* Flame wrapper: sways as one unit; hidden until lit */
.flame {
  position: absolute;
  left: 50%;
  bottom: 101px;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: drop-shadow(0 0 8px rgba(255, 176, 76, 0.7))
          drop-shadow(0 0 26px rgba(255, 140, 40, 0.4));
}

.candle.lit .flame {
  opacity: 1;
  animation: flame-sway 3.1s ease-in-out infinite;
}

/* Outer flame: rotated teardrop, orange fading upwards to gold */
.flame-outer {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) scaleY(1.75) rotate(45deg);
  transform-origin: 50% 50%;
  border-radius: 0 55% 60% 55%;
  background: linear-gradient(135deg,
    #ffdf8e 0%, #ffc148 35%, #ff9d2e 62%, #f4711a 88%, #e35b12 100%);
  animation: flame-stretch 1.15s ease-in-out infinite;
}

/* White-hot core low in the flame */
.flame-core {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) scaleY(1.6) rotate(45deg);
  border-radius: 0 55% 60% 55%;
  background: linear-gradient(135deg, #fffef4 0%, #fff3c4 55%, #ffd977 100%);
  animation: core-flicker 0.9s ease-in-out infinite;
}

/* The faint blue combustion zone at the very base */
.flame-base {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 12px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(122, 170, 255, 0.85), rgba(90, 130, 255, 0.25) 70%,
    rgba(90, 130, 255, 0) 100%);
}

@keyframes flame-sway {
  0%, 100% { transform: rotate(-1.6deg) scaleY(1); }
  28% { transform: rotate(1.8deg) scaleY(1.04); }
  55% { transform: rotate(-0.8deg) scaleY(0.97); }
  80% { transform: rotate(1.2deg) scaleY(1.02); }
}

@keyframes flame-stretch {
  0%, 100% { transform: translateX(-50%) scaleY(1.75) rotate(45deg); }
  50% { transform: translateX(-50%) scaleY(1.62) rotate(45deg); }
}

@keyframes core-flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1.6) rotate(45deg); opacity: 1; }
  45% { transform: translateX(-50%) scaleY(1.42) rotate(45deg); opacity: 0.85; }
  70% { transform: translateX(-50%) scaleY(1.68) rotate(45deg); opacity: 0.95; }
}

.candle-count { margin: 0; font-size: 14px; color: var(--text-2); }

.candle-lit-you { margin: 0; font-size: 14px; color: var(--text-2); }

.greeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.greeting-input {
  width: 100%;
  min-height: 76px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 12px 16px;
  resize: vertical;
}

.greeting-privacy { margin: 0; font-size: 11.5px; color: var(--text-3); }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  inset: auto; /* resets popover UA styling (inset: 0) */
  margin: 0;
  border: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .menu { width: min(296px, calc(100vw - 32px)); }
}

/* --------------------------------------------------------------------------
   Memorial mode: when the King has died the whole page goes black and the
   photos go monochrome — REGARDLESS of the visitor's light/dark choice.
   This block must stay LAST: it shares specificity with the theme blocks
   above, so source order is what lets it win over both.
   -------------------------------------------------------------------------- */

:root[data-mode="dead"] {
  --bg: #000000;
  --surface: #111111;
  --surface-2: #0a0a0a;
  --surface-3: #1d1d1d;
  --text: #f2f2f2;
  --text-2: #b0b0b0;
  --text-3: #8d8d8d;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --accent: #f4645a;
  --accent-soft: rgba(244, 100, 90, 0.12);

  --ok: #6ccb8b;

  --inverse-bg: #fafafa;
  --inverse-text: #171717;

  --ring: rgba(255, 255, 255, 0.16);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.65);

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: dark;
}

:root[data-mode="dead"] .portrait { filter: grayscale(1); }