/* ============================================================================
   PREVIOUSLY — /settings/ · settings.css
   Adapted from the approved design. Follows the design tokens (css/tokens.css).
   No inline styles. Stand-in nav/footer removed — shared /js/nav.js and
   /js/footer.js own those mounts.
   ========================================================================== */

*{ box-sizing: border-box; }html{ scroll-behavior: smooth; }body{
  margin: 0;
  background: var(--pv-noir);
  color: var(--pv-ivory);
  font-family: var(--pv-sans);
  font-size: var(--pv-body);
  line-height: var(--pv-leading-body);
  -webkit-font-smoothing: antialiased;
}a{ color: var(--pv-ivory); }/* ---- Light theme (applied via data-theme on <html> from settings) -------- */
html[data-theme="light"]{
  --pv-noir: var(--desert-ink);
  --pv-noir-2: var(--desert-card);
  --pv-noir-3: var(--desert-pressed);
  --pv-glass: rgba(var(--desert-ink-rgb), .88);
  --pv-ivory: var(--desert-ink);
  --pv-ivory-dim: rgba(var(--desert-ink-rgb), .66);
  --pv-ivory-faint: rgba(var(--desert-ink-rgb), .42);
  --pv-rule: rgba(var(--desert-ink-rgb), .16);
  --pv-on-red: var(--desert-card);
}html[data-theme="light"] body{ color-scheme: light; }html[data-theme="light"] .st-hero::before{ display: none; }html[data-theme="light"] .st-card{ box-shadow: 0 12px 32px rgba(var(--desert-ink-rgb), .12); }html[data-theme="light"] .st-danger{ background: linear-gradient(180deg, rgba(var(--brand-red-rgb), .08), var(--pv-noir-2)); }/* ---- Large text (applied via .pv-text-lg on <html>) ------------------------ */
html.pv-text-lg body{ font-size: 19px; }html.pv-text-lg .st-row__text b,
html.pv-text-lg .st-card > h2,
html.pv-text-lg .pv-card__name{ font-size: 1.12em; }html.pv-text-lg .st-row__text span,
html.pv-text-lg .st-card__lede,
html.pv-text-lg .st-seg-wrap > span,
html.pv-text-lg .st-rail__note{ font-size: 1.06em; }/* ---- Reduce motion (applied via .pv-reduced-motion on <html>) ------------- */
html.pv-reduced-motion,
html.pv-reduced-motion *,
html.pv-reduced-motion *::before,
html.pv-reduced-motion *::after{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}/* ---- hidden must win over component display (author styles beat the UA sheet) -- */
.st-shell[hidden], .st-signin[hidden], .st-signedin[hidden]{ display: none !important; }/* ---- Page header: decluttered — one title, kicker, signed-in line ---------- */
.st-hero{
  text-align: center;
  padding: var(--pv-s16) var(--pv-gutter) var(--pv-s8);
  position: relative; overflow: hidden;
}.st-hero::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 220px at 50% -40px, rgba(var(--brand-red-rgb), .16), transparent 70%);
}.st-kicker{
  font-size: var(--pv-label); letter-spacing: var(--pv-track-xl);
  text-transform: uppercase; color: var(--pv-red-ember);
  margin: 0 0 var(--pv-s4); position: relative;
}html[data-theme="light"] .st-kicker{ color: var(--pv-red-deep); }.st-title{
  font-family: var(--pv-serif); font-weight: 700;
  font-size: var(--pv-title); line-height: var(--pv-leading-title);
  letter-spacing: var(--pv-track-tight); margin: 0; position: relative;
}.st-signedin{
  margin: var(--pv-s4) 0 0; font-size: var(--pv-body-sm); color: var(--pv-ivory-dim);
  position: relative;
}.st-signedin a{ color: var(--pv-ivory); text-decoration-color: var(--pv-red);
  text-underline-offset: 4px; text-decoration-thickness: 2px; }/* ---- Sign-in prompt (signed-out visitors see this, never the controls) ---- */
.st-signin{
  max-width: 560px; margin: 0 auto;
  padding: 0 var(--pv-gutter) var(--pv-s24);
}.st-signin__card{
  background: var(--pv-noir-2); border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-card); padding: var(--pv-s12) var(--pv-s8);
  text-align: center; box-shadow: var(--pv-shadow-card);
}.st-signin__card svg{ width: 52px; height: 52px; color: var(--pv-red); margin-bottom: var(--pv-s4); }.st-signin__card h2{
  margin: 0 0 var(--pv-s3); font-family: var(--pv-serif);
  font-size: var(--pv-h3); letter-spacing: var(--pv-track-tight);
}.st-signin__card p{ margin: 0 0 var(--pv-s8); color: var(--pv-ivory-dim); font-size: var(--pv-body-sm); }/* ---- Layout: rail + content on desktop, single column on phone ------------ */
.st-shell{
  max-width: var(--pv-content-max);
  margin: 0 auto;
  padding: 0 var(--pv-gutter) var(--pv-s24);
  display: grid; grid-template-columns: 264px minmax(0, 760px);
  gap: var(--pv-s12); justify-content: center; align-items: start;
}.st-rail{ position: sticky; top: calc(var(--pv-nav-h) + var(--pv-s8)); }.st-rail nav{ display: flex; flex-direction: column; gap: 2px; }.st-rail a{
  display: flex; align-items: center; gap: 12px;
  min-height: var(--pv-target-min); padding: 0 16px;
  border-radius: var(--pv-r-sm); color: var(--pv-ivory-dim);
  text-decoration: none; font-size: var(--pv-body-sm);
}.st-rail a svg{ width: 18px; height: 18px; flex: 0 0 auto; }.st-rail a:hover{ color: var(--pv-ivory); background: var(--pv-noir-2); }.st-rail a.active{ color: var(--pv-ivory); background: rgba(var(--brand-red-rgb), .12);
  box-shadow: inset 2px 0 0 var(--pv-red); }.st-rail__note{
  margin-top: var(--pv-s6); padding: var(--pv-s4);
  border: 1px solid var(--pv-rule); border-radius: var(--pv-r-card);
  font-size: var(--pv-caption); color: var(--pv-ivory-dim); line-height: var(--pv-leading-ui);
}.st-rail__note a{ display: inline; min-height: 0; padding: 0; color: var(--pv-ivory);
  text-decoration: underline; text-decoration-color: var(--pv-red); text-underline-offset: 3px; }/* ---- Setting cards --------------------------------------------------------- */
.st-card{
  background: var(--pv-noir-2);
  border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-card);
  padding: var(--pv-s8);
  margin-bottom: var(--pv-s8);
  box-shadow: var(--pv-shadow-card);
  scroll-margin-top: calc(var(--pv-nav-h) + var(--pv-s6));
}.st-card > h2{
  margin: 0 0 var(--pv-s2);
  font-family: var(--pv-serif); font-size: var(--pv-h3); font-weight: 700;
  letter-spacing: var(--pv-track-tight);
}.st-card__lede{ margin: 0 0 var(--pv-s6); font-size: var(--pv-body-sm); color: var(--pv-ivory-dim); }.st-hint{ margin: 0 0 var(--pv-s4); font-size: var(--pv-caption); color: var(--pv-ivory-faint); }.st-row{
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 0;
  border-top: 1px solid var(--pv-rule);
  text-decoration: none; color: inherit;
}.st-row:first-of-type, .st-row--flush{ border-top: none; }.st-row__text{ flex: 1 1 auto; min-width: 0; }.st-row__text b{ display: block; font-size: var(--pv-body-sm); font-weight: 600; line-height: var(--pv-leading-ui); }.st-row__text span{ display: block; font-size: var(--pv-caption); color: var(--pv-ivory-dim); line-height: var(--pv-leading-ui); margin-top: 2px; }.st-row__chev{ color: var(--pv-ivory-faint); flex: 0 0 auto; }a.st-row:hover .st-row__text b{ text-decoration: underline; text-decoration-color: var(--pv-red); text-underline-offset: 4px; }.st-subhead{
  margin: var(--pv-s6) 0 0; padding-top: var(--pv-s4);
  font-size: var(--pv-label); letter-spacing: var(--pv-track-xl); text-transform: uppercase;
  color: var(--pv-ivory-dim); border-top: 1px solid var(--pv-rule);
}/* Master-off state: dependent channels dim and don't accept input */
.st-card.notif-off .st-toggle[data-setting]:not([data-setting="notifMaster"]){
  opacity: .38; pointer-events: none;
}/* ---- Toggle switch (44px row, real switch role) ---------------------------- */
.st-toggle{
  flex: 0 0 auto; width: 56px; height: 32px; border-radius: var(--pv-r-pill);
  background: var(--pv-noir-3); border: 1px solid var(--pv-rule);
  position: relative; cursor: pointer; padding: 0; transition: background var(--pv-t-med) var(--pv-ease), border-color var(--pv-t-med);
}.st-toggle::after{
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: var(--pv-r-round); background: var(--pv-ivory-dim);
  transition: transform var(--pv-t-med) var(--pv-ease), background var(--pv-t-med);
}.st-toggle[aria-checked="true"]{ background: var(--pv-red); border-color: var(--pv-red-deep); }.st-toggle[aria-checked="true"]::after{ transform: translateX(24px); background: var(--pv-ivory); }html[data-theme="light"] .st-toggle[aria-checked="true"]::after{ background: var(--desert-card); }.st-toggle:focus-visible{ outline: var(--pv-focus-outline); outline-offset: 2px; }.st-master{ background: rgba(var(--brand-red-rgb), .06); border: 1px solid rgba(var(--brand-red-rgb), .25);
  border-radius: var(--pv-r-card-sm); padding: 4px 16px; margin-bottom: 4px; }/* ---- Segmented control ------------------------------------------------------ */
.st-seg{ display: flex; background: var(--pv-noir-3); border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-pill); padding: 4px; gap: 2px; flex-wrap: wrap; }.st-seg button{
  flex: 1 1 auto; min-height: var(--pv-target-min); border: none; border-radius: var(--pv-r-pill);
  background: transparent; color: var(--pv-ivory-dim); font-family: var(--pv-sans);
  font-size: var(--pv-body-sm); font-weight: 600; cursor: pointer; padding: 0 18px; white-space: nowrap;
}.st-seg button[aria-pressed="true"]{ background: var(--pv-red); color: var(--pv-on-red); box-shadow: var(--pv-shadow-btn); }.st-seg button:focus-visible{ outline: var(--pv-focus-outline); outline-offset: 2px; }.st-seg-wrap{ padding: 14px 0; border-top: 1px solid var(--pv-rule); }.st-seg-wrap:first-of-type{ border-top: none; }.st-seg-wrap > b{ display: block; font-size: var(--pv-body-sm); font-weight: 600; margin-bottom: 4px; }.st-seg-wrap > span{ display: block; font-size: var(--pv-caption); color: var(--pv-ivory-dim); margin-bottom: 10px; }/* ---- Buttons ---------------------------------------------------------------- */
.st-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--pv-target-min); padding: 0 28px;
  border-radius: var(--pv-r-pill); border: 1px solid var(--pv-rule);
  background: var(--pv-noir-3); color: var(--pv-ivory);
  font-family: var(--pv-sans); font-size: var(--pv-body-sm); font-weight: 600;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
}.st-btn:hover{ border-color: var(--pv-red); }.st-btn:focus-visible{ outline: var(--pv-focus-outline); outline-offset: 2px; }.st-btn--primary{ background: var(--pv-red); border-color: var(--pv-red-deep); color: var(--pv-on-red); box-shadow: var(--pv-shadow-btn); }.st-btn--danger{ border-color: rgba(var(--brand-red-rgb), .5); color: var(--pv-red-ember); }html[data-theme="light"] .st-btn--danger{ color: var(--pv-red-deep); }.st-btn--block{ display: flex; width: 100%; }/* ---- Danger zone -------------------------------------------------------------- */
.st-danger{ border-color: rgba(var(--brand-red-rgb), .35); background: linear-gradient(180deg, rgba(var(--desert-accent-deep-rgb), .14), var(--pv-noir-2)); }.st-danger > h2{ color: var(--pv-red-ember); }html[data-theme="light"] .st-danger > h2{ color: var(--pv-red-deep); }/* ---- Toast --------------------------------------------------------------------- */
.st-toast{
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  background: var(--pv-noir-2); border: 1px solid rgba(var(--brand-red-rgb), .4);
  border-radius: var(--pv-r-pill); padding: 12px 24px;
  font-size: var(--pv-body-sm); color: var(--pv-ivory);
  opacity: 0; pointer-events: none; transition: opacity var(--pv-t-med), transform var(--pv-t-med);
  z-index: var(--pv-z-toast); box-shadow: var(--pv-shadow-pop);
  max-width: calc(100vw - 48px); text-align: center;
}.st-toast.show{ opacity: 1; transform: translate(-50%, 0); }.st-toast .dot{ display: inline-block; width: 8px; height: 8px; border-radius: var(--pv-r-round);
  background: var(--pv-red); margin-right: 10px; vertical-align: 1px; }/* ---- Responsive --------------------------------------------------------------- */
@media (max-width: 1023px){
  .st-shell { grid-template-columns: 1fr; padding: 0 var(--pv-gutter-sm) var(--pv-s16); gap: var(--pv-s6); }
  .st-rail, .st-content { min-width: 0; } /* grid blowout guard: rail chips + seg controls never widen the track */
  .st-rail { position: static; order: -1; }
  .st-rail nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .st-rail a { flex: 0 0 auto; border: 1px solid var(--pv-rule); border-radius: var(--pv-r-pill); }
  .st-rail a.active { box-shadow: none; border-color: var(--pv-red); background: rgba(var(--brand-red-rgb), .12); }
  .st-rail__note { display: none; }
  .st-hero { padding: var(--pv-s12) var(--pv-gutter-sm) var(--pv-s6); }
  .st-signin { padding: 0 var(--pv-gutter-sm) var(--pv-s16); }
}@media (max-width: 480px){.st-seg button{ flex: 1 1 100%; }
}/* ---- Face ID & passkeys ------------------------------------------------------ */
.pk-row{
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 0;
  border-top: 1px solid var(--pv-rule);
}.pk-row .st-btn{ flex: 0 0 auto; padding: 0 18px; }.pk-empty{
  margin: 0 0 var(--pv-s4); padding: 14px 16px;
  border: 1px dashed var(--pv-rule); border-radius: var(--pv-r-card-sm);
  font-size: var(--pv-body-sm); color: var(--pv-ivory-dim); line-height: var(--pv-leading-ui);
}.pk-warn{
  margin: 0 0 var(--pv-s4); font-size: var(--pv-caption);
  color: var(--pv-red-ember); line-height: var(--pv-leading-ui);
}html[data-theme="light"] .pk-warn{ color: var(--pv-red-deep); }.pk-err{
  margin: 0 0 var(--pv-s4); font-size: var(--pv-body-sm);
  color: var(--pv-red-ember); line-height: var(--pv-leading-ui);
}html[data-theme="light"] .pk-err{ color: var(--pv-red-deep); }.pk-input{
  min-height: var(--pv-target-min); padding: 0 14px;
  border-radius: var(--pv-r-sm); border: 1px solid var(--pv-rule);
  background: var(--pv-noir-3); color: var(--pv-ivory);
  font-family: var(--pv-sans); font-size: var(--pv-body-sm);
}.pk-input::placeholder{ color: var(--pv-ivory-dim); }.pk-input:focus-visible{ outline: var(--pv-focus-outline); outline-offset: 2px; }.pk-input--grow{ flex: 1 1 auto; min-width: 0; }.pk-addrow{ flex-wrap: wrap; }.pk-addrow .pk-input{ flex: 1 1 180px; min-width: 0; }@media (max-width: 480px){
  .pk-row{ flex-wrap: wrap; }
  .pk-addrow .st-btn{ width: 100%; }
}
/* ---------- editorial figure (batch fb8 2026-10-03) ---------- */
.pv-figure{ margin: 0 0 8px; max-width: 72ch; }.pv-figure img{ display: block; width: 100%; height: auto; border-radius: var(--pv-r-card, 14px); border: 1px solid var(--pv-rule, rgba(var(--desert-card-rgb), .12)); }.pv-figure figcaption{ color: var(--pv-ivory-faint, var(--desert-ink-dim)); font-size: 13.5px; line-height: 1.55; padding: 10px 4px 0; }.pv-figure--portrait{ max-width: 46ch; }.pv-figure--portrait img{ max-height: 560px; object-fit: cover; }

/* ============================================================================
   BLACK CONVERSION — 2026-10-16 · Account & Library overhaul completion
   ----------------------------------------------------------------------------
   Scoped token override, in the pattern of the shipped account family
   (account.css, stamp 20261016ov1): the global token files keep their
   values for unconverted families; this page's own stylesheet loads after
   them and redefines the anchors to the house black scheme —
   #000000 ground · #101010/#1B1B1B surfaces · #2C2C2C lines · silver
   #A5ACAF · signal red #E10600 accents only · 'Previously Display'
   (Marathon) display type. Scheme + type only: no copy, layout, or
   function changes. The house scheme is dark in BOTH device schemes,
   so the values are mirrored under prefers-color-scheme: light.
   ========================================================================== */
:root {
  color-scheme: dark;
  --desert-bg: #000000;
  --desert-card: #101010;
  --desert-pressed: #2C2C2C;
  --desert-bg-rgb: 0, 0, 0;
  --desert-card-rgb: 16, 16, 16;
  --desert-pressed-rgb: 44, 44, 44;
  --desert-ink: #F5F5F5;
  --desert-ink-rgb: 245, 245, 245;
  --desert-ink-dim: rgba(245, 245, 245, .72);
  --desert-ink-faint: rgba(245, 245, 245, .55);
  --desert-rule: #2C2C2C;
  --desert-accent: #E10600;
  --desert-accent-deep: #A80400;
  --desert-accent-rgb: 225, 6, 0;
  --desert-accent-deep-rgb: 168, 4, 0;
  --desert-accent-soft: rgba(225, 6, 0, .14);
  --desert-accent-faint: rgba(225, 6, 0, .08);
  --desert-accent-glow: rgba(225, 6, 0, .35);
  --desert-accent-glow-lg: rgba(225, 6, 0, .55);
  --desert-accent-ember: #FF6B4A;
  --desert-accent-ember-rgb: 255, 107, 74;
  --desert-shadow-rgb: 0, 0, 0;
  --desert-glass: rgba(0, 0, 0, .88);
  --brand-red: #E10600;
  --brand-red-deep: #A80400;
  --brand-red-rgb: 225, 6, 0;
  --surface-cream: #000000;
  --pv-noir: #000000;
  --pv-noir-2: #101010;
  --pv-noir-3: #1B1B1B;
  --pv-ivory: #F5F5F5;
  --pv-ivory-dim: #A5ACAF;
  --pv-ivory-faint: rgba(245, 245, 245, .52);
  --pv-rule: #2C2C2C;
  --pv-glass: rgba(0, 0, 0, .88);
  --pv-red: #E10600;
  --pv-red-deep: #A80400;
  --pv-red-ink: #FF6B4A;
  --pv-red-glow: rgba(225, 6, 0, .35);
  --pv-red-glow-lg: rgba(225, 6, 0, .55);
  --pv-on-red: #FFFFFF;
  --pv-serif: 'Previously Display', Georgia, 'Times New Roman', serif;
  --pv-shadow-card: 0 18px 44px rgba(0, 0, 0, .5);
  --pv-shadow-pop: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(225, 6, 0, .28);
  --pv-shadow-bar: 0 8px 28px rgba(0, 0, 0, .45);
  --pv-shadow-btn: 0 10px 34px rgba(225, 6, 0, .35);
  --pv-shadow-btn-lg: 0 16px 44px rgba(225, 6, 0, .55);
  --pv-shadow-card-hover: 0 14px 34px rgba(0, 0, 0, .5);
  --pv-shadow-chip-hover: 0 8px 20px rgba(0, 0, 0, .4);
  --pv-focus-outline: 2px solid #E10600;
  --pv-focus-ring: 0 0 0 3px rgba(225, 6, 0, .35);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: dark;
    --desert-bg: #000000;
    --desert-card: #101010;
    --desert-pressed: #2C2C2C;
    --desert-bg-rgb: 0, 0, 0;
    --desert-card-rgb: 16, 16, 16;
    --desert-pressed-rgb: 44, 44, 44;
    --desert-ink: #F5F5F5;
    --desert-ink-rgb: 245, 245, 245;
    --desert-ink-dim: rgba(245, 245, 245, .72);
    --desert-ink-faint: rgba(245, 245, 245, .55);
    --desert-rule: #2C2C2C;
    --desert-accent: #E10600;
    --desert-accent-deep: #A80400;
    --desert-accent-rgb: 225, 6, 0;
    --desert-accent-deep-rgb: 168, 4, 0;
    --desert-accent-soft: rgba(225, 6, 0, .14);
    --desert-accent-faint: rgba(225, 6, 0, .08);
    --desert-accent-glow: rgba(225, 6, 0, .35);
    --desert-accent-glow-lg: rgba(225, 6, 0, .55);
    --desert-accent-ember: #FF6B4A;
    --desert-accent-ember-rgb: 255, 107, 74;
    --desert-shadow-rgb: 0, 0, 0;
    --desert-glass: rgba(0, 0, 0, .88);
    --brand-red: #E10600;
    --brand-red-deep: #A80400;
    --brand-red-rgb: 225, 6, 0;
    --surface-cream: #000000;
    --pv-noir: #000000;
    --pv-noir-2: #101010;
    --pv-noir-3: #1B1B1B;
    --pv-ivory: #F5F5F5;
    --pv-ivory-dim: #A5ACAF;
    --pv-ivory-faint: rgba(245, 245, 245, .52);
    --pv-rule: #2C2C2C;
    --pv-glass: rgba(0, 0, 0, .88);
    --pv-red: #E10600;
    --pv-red-deep: #A80400;
    --pv-red-ink: #FF6B4A;
    --pv-red-glow: rgba(225, 6, 0, .35);
    --pv-red-glow-lg: rgba(225, 6, 0, .55);
    --pv-on-red: #FFFFFF;
    --pv-serif: 'Previously Display', Georgia, 'Times New Roman', serif;
    --pv-shadow-card: 0 18px 44px rgba(0, 0, 0, .5);
    --pv-shadow-pop: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(225, 6, 0, .28);
    --pv-shadow-bar: 0 8px 28px rgba(0, 0, 0, .45);
    --pv-shadow-btn: 0 10px 34px rgba(225, 6, 0, .35);
    --pv-shadow-btn-lg: 0 16px 44px rgba(225, 6, 0, .55);
    --pv-shadow-card-hover: 0 14px 34px rgba(0, 0, 0, .5);
    --pv-shadow-chip-hover: 0 8px 20px rgba(0, 0, 0, .4);
    --pv-focus-outline: 2px solid #E10600;
    --pv-focus-ring: 0 0 0 3px rgba(225, 6, 0, .35);
  }
}

/* Page title in the house display face — the shared pvn-header component
   still sets retired Cormorant Garamond; scoped up-specificity here. */
.pvn-title-zone h1.pvn-page-title {
  font-family: 'Previously Display', Georgia, 'Times New Roman', serif;
}

/* Small red TEXT takes the in-system luminous red (7.1:1 on the card);
   signal red stays for fills, borders, and focus. (The guide kicker on
   this page rides the shared .pv-gd block below the shell.) */
.pv-gd p.pv-gd-kicker { color: var(--pv-red-ember); }

/* The member theme preference (data-theme="light") predates the dark-only
   house scheme. Its token remap pointed at the retired desert palette;
   restate it to the same house black so this page renders the house
   scheme under every stored preference. The control itself still works
   and still stores the preference — scheme only. */
html[data-theme="light"] {
  --pv-noir: #000000;
  --pv-noir-2: #101010;
  --pv-noir-3: #1B1B1B;
  --pv-glass: rgba(0, 0, 0, .88);
  --pv-ivory: #F5F5F5;
  --pv-ivory-dim: #A5ACAF;
  --pv-ivory-faint: rgba(245, 245, 245, .52);
  --pv-rule: #2C2C2C;
  --pv-on-red: #FFFFFF;
}
html[data-theme="light"] body { color-scheme: dark; }
html[data-theme="light"] .st-hero::before { display: block; }
html[data-theme="light"] .st-card { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
html[data-theme="light"] .st-danger { background: linear-gradient(180deg, rgba(var(--desert-accent-deep-rgb), .14), var(--pv-noir-2)); }
html[data-theme="light"] .st-kicker { color: var(--pv-red-ember); }
html[data-theme="light"] .st-btn--danger { color: var(--pv-red-ember); }
html[data-theme="light"] .st-danger > h2 { color: var(--pv-red-ember); }
html[data-theme="light"] .pk-warn { color: var(--pv-red-ember); }
html[data-theme="light"] .pk-err { color: var(--pv-red-ember); }
html[data-theme="light"] .st-toggle[aria-checked="true"]::after { background: var(--pv-ivory); }