/* ═══════════════════════════════════════════════════════════════════════════
   Ember (2026-10-03) — character-select (the hero picker a child sees before their dashboard).
   Scoped html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e)…; see css/pm-ember-family.css and
   EMBER-FAMILY-AGENT-BRIEF.md (with the 3 Oct colour law). Desk and iPad only; the phone app is css/ember/family/.

   The heroes are Caleb's art and stay exactly as drawn, floating, with their own colours. The stage around them was a
   purple galaxy with a rainbow halo; in Ember it is the graphite night with the same twinkling stars and a warm ember
   glow behind the hero. The chrome becomes Ember: glass panels, round glass keys, glowing orange stat bars, and one big
   orange "I am …" button.
     1 the night · 2 top keys · 3 stats panel · 4 the stage and its glow · 5 the pick button · 6 the roster grid
     7 the confirm sheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the night: Ember's ground, the stars kept (white and a few warm ones) ── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) {
  --accent-gold: #FF8A4C; --accent-pink: #FF6A1F; --accent-purple: #F2550D; --accent-blue: #FFB98F; --accent-emerald: #FFFFFF;
  --text-light: #FFFFFF; --text-soft: #A0A5B1; --text-dim: #8E95A5;
  --panel-bg: rgba(255,255,255,.04); --panel-border: rgba(255,255,255,.09);
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]), html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body { background-color: #17181B !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e)::before { opacity: .55 !important; filter: saturate(0) brightness(1.2); }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e)::after { background: radial-gradient(ellipse at center, transparent 35%, rgba(14,15,17,.8) 100%) !important; }

/* ── 2. top: Back is a quiet pill, the XP count a glass pill with an orange coin ── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-top__back, .cs-top__coins) {
  background: var(--em-glass) !important; border: 1px solid rgba(255,255,255,.1) !important; border-top-color: rgba(255,255,255,.16) !important;
  border-radius: 999px !important; color: #E6E7EA !important; font: 600 14px/1 var(--n-font) !important; letter-spacing: .2px !important; text-transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px -12px rgba(0,0,0,.8) !important; height: 42px; padding: 0 18px !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .18s var(--em-ease), transform .18s var(--em-ease) !important;
}
@media (hover: hover) { html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__back:hover { background: rgba(255,255,255,.1) !important; color: #FFFFFF !important; transform: translateY(-1px); } }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__back:active { transform: scale(.95); }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__coins { color: #FFFFFF !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__coins svg { color: #FF8A4C !important; filter: drop-shadow(0 0 6px rgba(255,106,31,.7)); }

/* ── 3. the stats panel: glass, a big white name, glowing orange bars ──── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-stats, .cs-grid-wrap) {
  background: var(--em-glass) !important; border: 1px solid rgba(255,255,255,.09) !important; border-top-color: rgba(255,255,255,.14) !important;
  border-bottom-color: rgba(255,255,255,.045) !important; border-radius: 24px !important; box-shadow: var(--em-lift) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stats__name {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font: 600 32px/1.05 var(--n-font) !important; letter-spacing: -.9px !important;
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stats__class { color: #FF8A4C !important; font: 500 11.5px/1 var(--n-font) !important; letter-spacing: 1.7px !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__label { color: #8E95A5 !important; font: 500 11.5px/1 var(--n-font) !important; letter-spacing: 1.6px !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__value { color: #FFFFFF !important; font: 600 15px/1 var(--n-font) !important; font-variant-numeric: tabular-nums; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__bar { background: rgba(0,0,0,.32) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05) !important; border-radius: 999px !important; height: 8px !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__fill,
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-stat--power, .cs-stat--focus, .cs-stat--heart, .cs-stat--spirit) .cs-stat__fill {
  background: linear-gradient(90deg, #F2550D, #FF8A4C) !important; border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(255,106,31,.6), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ── 4. the stage: an ember glow behind the hero (the hero itself untouched) ── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-featured__halo {
  background: radial-gradient(circle, rgba(255,138,76,.75) 0%, rgba(255,106,31,.35) 40%, rgba(255,106,31,0) 70%) !important;
  opacity: .42 !important; animation: none !important;
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-featured__plinth { background: radial-gradient(ellipse at center, rgba(255,106,31,.55) 0%, transparent 62%) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-featured__img { filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(255,106,31,.22)) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-nav {
  background: var(--em-key) !important; border: 0 !important; color: #E6E7EA !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18), 0 12px 24px -10px rgba(0,0,0,.9) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (hover: hover) { html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-nav:hover { background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06)) !important; color: #FF8A4C !important; } }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-nav--prev:active { transform: translateY(-50%) scale(.94) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-nav--next:active { transform: translateY(-50%) scale(.94) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-loading { border-color: rgba(255,255,255,.1) !important; border-top-color: #FF6A1F !important; }

/* ── 5. the pick button: the one big orange action ──────────────────────── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn {
  background: var(--em-or-fill) !important; color: #FFFFFF !important; border-radius: 999px !important;
  box-shadow: var(--em-or-shadow), 0 0 0 6px rgba(255,106,31,.1) !important;
  font: 600 18px/1 var(--n-font) !important; letter-spacing: .4px !important; text-transform: none !important;
  height: 62px !important; padding: 0 44px !important;
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent) !important; }
@media (hover: hover) { html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn:hover { transform: translateY(-2px) !important; filter: brightness(1.06); box-shadow: var(--em-or-shadow), 0 0 0 7px rgba(255,106,31,.14) !important; } }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn:active { transform: scale(.95) !important; }

/* ── 6. the roster: graphite tiles, the chosen hero ringed in orange light ── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid__title { color: #8E95A5 !important; font: 500 11.5px/1 var(--n-font) !important; letter-spacing: 1.7px !important; text-transform: uppercase !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid__count { color: #6B7080 !important; font-family: var(--n-font) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid::-webkit-scrollbar-track { background: transparent !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.09) !important; border-top-color: rgba(255,255,255,.14) !important; border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: transform .18s var(--em-ease), border-color .18s var(--em-ease), box-shadow .18s var(--em-ease) !important;
}
@media (hover: hover) { html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb:not(.is-active):hover { transform: translateY(-2px) !important; border-color: rgba(255,255,255,.18) !important; background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important; } }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb:active { transform: scale(.96) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb.is-active {
  border-color: rgba(255,138,76,.85) !important; background: linear-gradient(180deg, rgba(255,106,31,.2), rgba(255,106,31,.06)) !important;
  box-shadow: 0 0 0 3px rgba(255,106,31,.25), 0 14px 30px -12px rgba(255,106,31,.55) !important;
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb__id { background: rgba(22,23,27,.88) !important; color: #E6E7EA !important; font: 600 10px/1 var(--n-font) !important; border-radius: 999px !important; }

/* ── 7. the confirm sheet ───────────────────────────────────────────────── */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm-bd { background: rgba(0,0,0,.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm {
  background-color: var(--em-sheet) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%) !important;
  border: 0 !important; border-radius: 28px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.16), 0 40px 80px -24px rgba(0,0,0,.9), 0 0 80px -20px rgba(255,106,31,.35) !important;
}
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__check { background: var(--em-or-fill) !important; box-shadow: 0 0 0 8px rgba(255,106,31,.12), 0 14px 32px -8px rgba(255,106,31,.6) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__title { color: #FFFFFF !important; font: 600 28px/1.15 var(--n-font) !important; letter-spacing: -.8px !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__sub { color: #A0A5B1 !important; font: 400 15px/1.55 var(--n-font) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__btn { border-radius: 999px !important; height: 46px !important; font: 500 15px/1 var(--n-font) !important; padding: 0 22px !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__btn--primary { background: var(--em-or-fill) !important; color: #FFFFFF !important; box-shadow: var(--em-or-shadow) !important; font-weight: 600 !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__btn--ghost { background: rgba(255,255,255,.06) !important; color: #E6E7EA !important; border: 1px solid rgba(255,255,255,.1) !important; }
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__btn:active { transform: scale(.95); }

/* ── on a phone (≤760px), 2026-10-03 phone pass: 44px keys, readable numbers on the hero thumbnails ── */
@media (max-width: 760px) {
  html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-top__back, .cs-top__coins) { min-height: 44px !important; box-sizing: border-box !important; }
  html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb__id { font-size: 12px !important; }
  html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid__count { font-size: 13px !important; }
  html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn { min-height: 56px !important; font-size: 17px !important; }
}

/* ── installed on the Home Screen (html.pm-standalone), 2026-10-03 phone pass: Back and the XP pill are fixed to the
   top of the screen, so in the app they sat under the clock; they now start below the clock strip */
html[data-look="night"][data-shade="ember"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]).pm-standalone body:not(#pm-e) .cs-top { top: var(--pm-app-top, 0px) !important; }

/* ══ EMBER LIGHT — GENERATED by tools/gen-ember-light.py from the Ember rules above; do not hand-edit ══ */
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) { --accent-gold:#E5540F; --accent-pink:#E5540F; --accent-purple:#E5540F; --accent-blue:#E5540F; --accent-emerald:#FFFFFF; --text-light:#111318; --text-soft:#5A606E; --text-dim:#646B7A; --panel-bg:rgba(17,19,24,.04); --panel-border:rgba(17,19,24,.076); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]), html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body { background-color:#F6F7F9 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e)::before { filter:saturate(0) brightness(1.2); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e)::after { background:radial-gradient(ellipse at center, transparent 35%, rgba(14,15,17,0) 100%) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-top__back, .cs-top__coins) { background:var(--em-glass) !important; border:1px solid rgba(17,19,24,.085) !important; border-top-color:rgba(17,19,24,.136) !important; color:#2A2D35 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px -12px rgba(17,19,24,.176) !important; backdrop-filter:blur(14px); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__coins { color:#111318 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__coins svg { color:#E5540F !important; filter:drop-shadow(0 0 6px rgba(255,106,31,.385)); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-stats, .cs-grid-wrap) { background:var(--em-glass) !important; border:1px solid rgba(17,19,24,.076) !important; border-top-color:rgba(17,19,24,.119) !important; border-bottom-color:rgba(17,19,24,.06) !important; box-shadow:var(--em-lift) !important; backdrop-filter:blur(18px) saturate(1.2); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stats__name { background:none !important; background-clip:border-box !important; color:#111318 !important; -webkit-text-fill-color:#111318 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stats__class { color:#E5540F !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__label { color:#646B7A !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__value { color:#111318 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__bar { background:rgba(17,19,24,.058) !important; box-shadow:inset 0 1px 2px rgba(17,19,24,.11), inset 0 0 0 1px rgba(17,19,24,.06) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-stat__fill, html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) :is(.cs-stat--power, .cs-stat--focus, .cs-stat--heart, .cs-stat--spirit) .cs-stat__fill { background:linear-gradient(90deg, #F2550D, #FF8A4C) !important; box-shadow:0 0 12px rgba(255,106,31,.33), inset 0 1px 0 rgba(255,255,255,.35) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-featured__halo { background:radial-gradient(circle, rgba(255,138,76,.75) 0%, rgba(255,106,31,.35) 40%, rgba(255,106,31,0) 70%) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-featured__plinth { background:radial-gradient(ellipse at center, rgba(255,106,31,.55) 0%, transparent 62%) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-featured__img { filter:drop-shadow(0 30px 60px rgba(17,19,24,.154)) drop-shadow(0 0 40px rgba(255,106,31,.121)) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-nav { background:var(--em-key) !important; border:0 !important; color:#2A2D35 !important; box-shadow:inset 0 0 0 1px rgba(17,19,24,.108), inset 0 1px 0 rgba(255,255,255,.18), 0 12px 24px -10px rgba(17,19,24,.198) !important; backdrop-filter:blur(12px); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-loading { border-color:rgba(17,19,24,.085) !important; border-top-color:rgba(229,84,15,.8) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn { background:var(--em-or-fill) !important; color:#FFFFFF !important; box-shadow:var(--em-or-shadow), 0 0 0 6px rgba(255,106,31,.055) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn::before { background:linear-gradient(90deg, transparent, rgba(17,19,24,.28), transparent) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid__title { color:#646B7A !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid__count { color:#8A90A0 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid::-webkit-scrollbar-thumb { background:rgba(17,19,24,.075) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid::-webkit-scrollbar-track { background:transparent !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb { background:#FFFFFF !important; border:1px solid rgba(17,19,24,.076) !important; border-top-color:rgba(17,19,24,.119) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb.is-active { border-color:rgba(229,84,15,.68) !important; background:linear-gradient(180deg, rgba(255,106,31,.2), rgba(255,106,31,.06)) !important; box-shadow:0 0 0 3px rgba(255,106,31,.138), 0 14px 30px -12px rgba(255,106,31,.303) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb__id { background:rgba(255,255,255,.964) !important; color:#2A2D35 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm-bd { background:rgba(17,19,24,.303) !important; backdrop-filter:blur(10px); }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm { background-color:var(--em-sheet) !important; background-image:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 45%) !important; border:0 !important; box-shadow:inset 0 0 0 1px rgba(17,19,24,.081), inset 0 1px 0 rgba(255,255,255,.16), 0 40px 80px -24px rgba(17,19,24,.198), 0 0 80px -20px rgba(255,106,31,.193) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__check { background:var(--em-or-fill) !important; box-shadow:0 0 0 8px rgba(255,106,31,.066), 0 14px 32px -8px rgba(255,106,31,.33) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__title { color:#111318 !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__sub { color:#5A606E !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__btn--primary { background:var(--em-or-fill) !important; color:#FFFFFF !important; box-shadow:var(--em-or-shadow) !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-confirm__btn--ghost { background:rgba(17,19,24,.04) !important; color:#2A2D35 !important; border:1px solid rgba(17,19,24,.085) !important; }
@media (hover: hover) {
  html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-top__back:hover { background:rgba(17,19,24,.05) !important; color:#111318 !important; }
  html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-nav:hover { background:linear-gradient(180deg, #FFFFFF, #F9FAFB) !important; color:#E5540F !important; }
  html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-pick__btn:hover { filter:brightness(1.06); box-shadow:var(--em-or-shadow), 0 0 0 7px rgba(255,106,31,.077) !important; }
  html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-thumb:not(.is-active):hover { border-color:rgba(17,19,24,.153) !important; background:linear-gradient(180deg, #FFFFFF, #F9FAFB) !important; }
}
/* ══ end EMBER LIGHT (generated) ══ */


/* ── Ember Light — by hand (2026-10-03) — character-select: no white vignette, a visible scroll thumb */
/* Ember darkens the screen's edges with a vignette over everything; its light copy turned it into a white fog that
   washed out the hero's stats card and the grid at the edges. On a white page there is no vignette. */
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e):not(#pm-e2)::after { background: none !important; }
html[data-look="night"][data-shade="ember"][data-ember="light"]:not(.emk-page):not(.pm-sapp--home[data-skin="ember"]) body:not(#pm-e) .cs-grid::-webkit-scrollbar-thumb { background: rgba(17,19,24,.16) !important; }