:root {
  color-scheme: light;
  --ndl-porcelain: #fffaf0;
  --ndl-tile-cream: #f8eddd;
  --ndl-botanical-ink: #352d2a;
  --ndl-antique-gold: #bd8c35;
  --ndl-page-light: #f5ecdf;
  --ndl-page-mid: #e6d8c7;
  --ndl-page-dark: #cab7a2;
  --ndl-table-light: #d7ded6;
  --ndl-table-mid: #aab9ac;
  --ndl-table-dark: #718174;
  --ndl-panel: rgb(255 250 240 / 91%);
  --ndl-panel-border: rgb(89 68 52 / 25%);
  --ndl-accent: #6b3047;
  --ndl-scenery-opacity: 0.16;
  --ndl-scenery-saturation: 0.92;
  --ndl-center-quiet-opacity: 0.76;
  --ndl-selection-ring: #bd8c35;
  --ndl-light-angle: 145deg;
}

:root[data-theme="llama"] {
  --ndl-porcelain: #fff8ea;
  --ndl-botanical-ink: #344148;
  --ndl-antique-gold: #b99046;
  --ndl-page-light: #c8d5db;
  --ndl-page-mid: #8299a4;
  --ndl-page-dark: #506d78;
  --ndl-table-light: #aab8a3;
  --ndl-table-mid: #738b79;
  --ndl-table-dark: #455e52;
  --ndl-panel: rgb(255 248 234 / 93%);
  --ndl-panel-border: rgb(64 80 72 / 28%);
  --ndl-accent: #b36d43;
  --ndl-scenery-opacity: 0.48;
  --ndl-light-angle: 145deg;
}

:root[data-theme="pink-peony"] {
  --ndl-porcelain: #fff8ea;
  --ndl-botanical-ink: #47363e;
  --ndl-antique-gold: #b99046;
  --ndl-page-light: #f3ded9;
  --ndl-page-mid: #d6aab3;
  --ndl-page-dark: #9b697d;
  --ndl-table-light: #cba7aa;
  --ndl-table-mid: #9f7180;
  --ndl-table-dark: #704b60;
  --ndl-panel: rgb(255 248 234 / 94%);
  --ndl-panel-border: rgb(105 65 82 / 28%);
  --ndl-accent: #b94f6a;
  --ndl-sage: #63765d;
  --ndl-scenery-opacity: 0.42;
  --ndl-light-angle: 145deg;
}

:root[data-theme="aunt-jonis-birthday"] {
  --ndl-page-light: #fff4e7;
  --ndl-page-mid: #eadde3;
  --ndl-page-dark: #c8dce3;
  --ndl-table-light: #faecdc;
  --ndl-table-mid: #dfd8df;
  --ndl-table-dark: #aec8d1;
  --ndl-panel: rgb(255 250 241 / 93%);
  --ndl-panel-border: rgb(103 123 130 / 24%);
  --ndl-accent: #a55772;
  --ndl-antique-gold: #c99736;
  --ndl-scenery-opacity: 0.15;
}

:root[data-theme="the-landings"] {
  --ndl-porcelain: #fff8ea;
  --ndl-botanical-ink: #303a35;
  --ndl-antique-gold: #b99046;
  --ndl-page-light: #b9c9bd;
  --ndl-page-mid: #789088;
  --ndl-page-dark: #405e57;
  --ndl-table-light: #a4b39c;
  --ndl-table-mid: #5c796f;
  --ndl-table-dark: #294b43;
  --ndl-panel: rgb(255 248 234 / 92%);
  --ndl-panel-border: rgb(55 78 69 / 30%);
  --ndl-accent: #a45736;
  --ndl-scenery-opacity: 0.46;
  --ndl-light-angle: 145deg;
}

:root[data-theme="autumn-grove"] {
  --ndl-porcelain: #fff8ea;
  --ndl-botanical-ink: #382f25;
  --ndl-antique-gold: #c4933d;
  --ndl-page-light: #caa45b;
  --ndl-page-mid: #76643a;
  --ndl-page-dark: #30351f;
  --ndl-table-light: #a28742;
  --ndl-table-mid: #5d5c31;
  --ndl-table-dark: #26301d;
  --ndl-panel: rgb(255 248 234 / 92%);
  --ndl-panel-border: rgb(84 58 29 / 32%);
  --ndl-accent: #874729;
  --ndl-scenery-opacity: 0.52;
  --ndl-center-quiet-opacity: 1;
  --ndl-light-angle: 145deg;
}

.ndl-tablescape {
  min-height: 100dvh;
  color: var(--ndl-botanical-ink);
  background:
    radial-gradient(ellipse 92% 66% at 12% 5%, rgb(255 255 255 / 42%), transparent 55%),
    linear-gradient(var(--ndl-light-angle), var(--ndl-page-light), var(--ndl-page-mid) 52%, var(--ndl-page-dark));
  isolation: isolate;
}

.ndl-table-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 108% 76% at 12% 4%, rgb(255 255 255 / 22%), transparent 51%),
    linear-gradient(var(--ndl-light-angle), var(--ndl-table-light), var(--ndl-table-mid) 52%, var(--ndl-table-dark));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset -18px -22px 42px rgb(33 27 22 / 11%);
}

/* One lighting story for every collection: light enters upper-left. */
.ndl-table-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    var(--ndl-light-angle),
    rgb(255 255 255 / 14%) 0%,
    transparent 38%,
    transparent 68%,
    rgb(24 21 18 / 8%) 100%
  );
}

/* A quiet center veil prevents edge scenery from competing with play. */
.ndl-table-surface::after {
  content: "";
  position: absolute;
  inset: 8% 9%;
  z-index: -1;
  pointer-events: none;
  border-radius: 12%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 255 255 / 7%) 0 42%,
    transparent 76%
  );
  opacity: var(--ndl-center-quiet-opacity);
}

.scenery {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--ndl-scenery-opacity);
  filter: saturate(var(--ndl-scenery-saturation));
}

.ndl-table-surface > .scenery {
  position: absolute;
}

.scenery > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ndl-panel {
  background: var(--ndl-panel);
  border: 1px solid var(--ndl-panel-border);
  box-shadow: 0 5px 13px rgb(37 29 25 / 11%);
  backdrop-filter: blur(1.5px);
}

.ndl-theme-accent {
  color: var(--ndl-accent);
}

.ndl-selection {
  outline: 2px solid var(--ndl-selection-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --ndl-scenery-opacity: 0.08;
  }

  .ndl-panel {
    background: var(--ndl-porcelain);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ndl-scenery-opacity: 0.06;
  }

  .ndl-panel {
    border-color: rgb(48 43 44 / 44%);
  }
}

@media (forced-colors: active) {
  .scenery,
  .ndl-table-surface::before,
  .ndl-table-surface::after {
    display: none;
  }

  .ndl-panel {
    border: 1px solid CanvasText;
    background: Canvas;
  }
}