/*
  FIGURES: the app's own screens and parts, drawn in HTML and CSS for the help articles (tools/figures.py, used as `::fig <name>`).
  Everything here uses the app's tokens (tokens.css) and the raised look (a face over a darker lip, RaisedButton.tsx). Sizes are in rem/em,
  so the words follow the reader's text size; nothing is a fixed height, nothing moves, and the pictures are hidden from a screen reader
  (each figure is one image with a description). Light theme only. Classes start with fx-, k- (card tone), b- (button) or t- (tint).
*/

.fx {
  max-width: 430px;
}
.fx--wide {
  max-width: 640px;
}
.fx--full {
  max-width: 100%;
}

/* ---------- the frame: a piece of the app's screen ---------- */
.fx-frame {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: var(--page);
  border: 2px solid var(--hairline);
  box-shadow: 0 5px 0 var(--lip);
  margin-bottom: 5px;
}
.fx-frame--bare {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
}
.fx-frame--form {
  background: #f1efff; /* the soft form background of the sign-in and set-up screens (StepFrame.tsx StepBackground) */
}
.fx-frame--sheet {
  background: rgba(20, 20, 50, 0.4); /* the dim behind a sheet (Sheet.tsx) */
  border-color: rgba(20, 20, 50, 0.1);
  padding-top: 34px;
}
.fx-in {
  padding: 16px 14px 20px;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  display: grid;
  gap: 14px;
  align-content: start;
}
.fx-in > * {
  min-width: 0;
}
.fx-in img {
  display: block;
  max-width: 100%;
}
.fx-in p,
.fx-in div,
.fx-in span,
.fx-in b {
  overflow-wrap: anywhere;
}
.fx-in b {
  font-weight: 700;
}
.fx-sheet {
  background: #fff;
  border-radius: 30px 30px 0 0;
  margin: 0 -14px -20px;
  padding: 22px 20px 26px;
  display: grid;
  gap: 12px;
}
.fx-sheet--card {
  /* a centred card over the dim (DeviceGate.tsx): white face, radius 30, lip 5 */
  margin: 0 0 4px;
  border-radius: 30px;
  box-shadow: 0 5px 0 var(--cc-soft-edge);
  padding: 22px;
}

/* ---------- words ---------- */
.fx-h1 {
  font-size: 1.85rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fx-h1--c {
  text-align: center;
}
.fx-h2 {
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.fx-h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
.fx-sub {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink-soft);
}
.fx-sub--c {
  text-align: center;
}
.fx-body {
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--skill-body);
}
.fx-small {
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--skill-body);
}
.fx-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--eyebrow);
  margin-left: 4px;
}
.fx-sechead {
  padding: 0 4px;
}
.fx-card + .fx-sechead,
.fx-wide + .fx-sechead,
.fx-advcard + .fx-sechead {
  margin-top: 6px;
}
.fx-sechead .fx-h2 {
  font-size: 1.4rem;
}
.fx-center {
  text-align: center;
}
.fx-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fx-grow {
  flex: 1 1 0;
  min-width: 0;
}
.fx-stack {
  display: grid;
  gap: 10px;
}

/* ---------- icons: the app's one-colour icons, painted in any colour (Icon.tsx tintColor) ---------- */
.fxi {
  display: inline-block;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  vertical-align: middle;
}
.fxi--r90 {
  transform: rotate(90deg);
}
.fxi--r180 {
  transform: rotate(180deg);
}
.fxi--r270 {
  transform: rotate(270deg);
}

/* ---------- the status row: coins, battery, streak (WorkshopHeader.tsx) ---------- */
.fx-status {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 8px;
  min-height: 44px;
}
.fx-status > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fx-status .fx-coinn {
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--ws-coin-number);
}
.fx-status .fx-coin {
  width: 34px;
  height: 34px;
}
.fx-status .fx-batt {
  width: 56px;
  height: auto;
  aspect-ratio: 200 / 125;
}
.fx-status .fx-flm {
  width: 25px;
  height: auto;
  aspect-ratio: 122 / 160;
}
.fx-status .fx-streakn {
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--streak-number);
}
.fx-status .fx-closeb {
  margin-right: 2px;
}

/* ---------- raised cards (RaisedCard: radius, face and a darker lip). Tones are the app's card tones (lib/theme/darkCards.ts, light) ---------- */
.fx-card {
  --face: var(--cc-soft);
  --edge: var(--cc-soft-edge);
  --t: var(--ink);
  --b: var(--skill-body);
  --a: var(--nav-active);
  position: relative;
  padding: 16px;
  border-radius: 28px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
  color: var(--t);
}
.fx-card--r22 {
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
}
.fx-card--r26 {
  border-radius: 26px;
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
}
.fx-card--r30 {
  border-radius: 30px;
  box-shadow: 0 5px 0 var(--edge);
}
.k-green {
  --face: #e3f8ec;
  --edge: #96d9b2;
  --a: #1f7a45;
}
.k-teal {
  --face: #d6eef0;
  --edge: #aedadf;
  --a: #188a86;
}
.k-sky {
  --face: #e3f4fd;
  --edge: #a9d3ea;
  --a: #2f6f8f;
}
.k-lavender {
  --face: #eee9fe;
  --edge: #c9bdf5;
  --a: #3f39d3;
}
.k-pink {
  --face: #ffe9ee;
  --edge: #fbbacb;
  --a: #c24a6c;
}
.k-coral {
  --face: #fce3dd;
  --edge: #e7a092;
  --a: #c8433d;
}
.k-peach {
  --face: #fef1e4;
  --edge: #edbe8c;
  --a: #a5551f;
}
.k-amber {
  --face: #fef5dd;
  --edge: #ebcf8a;
  --a: #8a6508;
}
.k-neutral {
  --face: #f6f7fb;
  --edge: #c5cbe0;
  --a: #3f39d3;
}
.k-white {
  --face: #fff;
  --edge: #c5cbe0;
  --a: #3f39d3;
}
.k-whiteq {
  --face: #fff;
  --edge: #d2d8ea;
}
.fx-card .fx-ct {
  font-weight: 700;
  color: var(--t);
}
.fx-card .fx-cb {
  font-weight: 600;
  color: var(--b);
}
.fx-chev {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}
.fx-chev .fxi {
  width: 20px;
  height: 20px;
}

/* ---------- raised buttons (RaisedButton.tsx: radius 28, lip 5) ---------- */
.fx-btn {
  --face: var(--purple);
  --edge: #5a47cc;
  --on: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 22px;
  border-radius: 28px;
  background: var(--face);
  color: var(--on);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
  text-align: center;
}
.fx-btn .fxi {
  width: 1.1em;
  height: 1.1em;
}
.b-soft {
  --face: #ece9fe;
  --edge: #c9bdf5;
  --on: var(--nav-active);
}
.b-lav {
  --face: #eee9fe;
  --edge: #c9bdf5;
  --on: #3f39d3;
}
.b-go {
  --face: #2b9a58;
  --edge: #1f7a45;
  --on: #fff;
}
.b-mint {
  --face: var(--ws-mint);
  --edge: var(--ws-mint-lip);
  --on: var(--ws-mint-ink);
}
.b-wsp {
  --face: var(--ws-purple);
  --edge: var(--ws-purple-lip);
  --on: #fff;
}
.b-wssoft {
  --face: var(--ws-soft);
  --edge: var(--ws-soft-lip);
  --on: var(--ws-soft-ink);
}
.b-white {
  --face: #fff;
  --edge: #c5cbe0;
  --on: var(--ink);
}
.b-orange {
  --face: #ff8a1f;
  --edge: #c2570c;
  --on: #fff;
}
.b-danger {
  --face: #e5484d;
  --edge: #a8282d;
  --on: #fff;
  border-radius: 29px;
  box-shadow: 0 6px 0 var(--edge);
  margin-bottom: 6px;
  font-size: 1.125rem;
  min-height: 58px;
}
.b-dim {
  opacity: 0.45;
}
.fx-plain {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  text-align: center;
}
.fx-plain--purple {
  color: var(--purple);
}
.fx-plain--danger {
  color: #c8433d;
}
.fx-round {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 #c7d0e6;
  margin-bottom: 4px;
  color: var(--ink);
}
.fx-round .fxi {
  width: 22px;
  height: 22px;
}

/* ---------- companion pictures and bubbles ---------- */
.fx-pet {
  flex: none;
  width: 96px;
  height: auto;
}
.fx-pet--s {
  width: 62px;
}
.fx-pet--m {
  width: 120px;
}
.fx-pet--l {
  width: 170px;
}
.fx-say {
  position: relative;
  padding: 11px 16px;
  border-radius: 22px;
  border-bottom-left-radius: 6px;
  background: var(--ws-panel);
  box-shadow: 0 4px 0 var(--ws-panel-lip);
  margin-bottom: 4px;
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.fx-say--mine {
  background: var(--ws-sky);
  box-shadow: 0 4px 0 var(--ws-sky-lip);
  color: var(--ws-sky-ink);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 6px;
}

/* ---------- sections with a heading and a note (SectionTitle, PageHeader) ---------- */
.fx-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.fx-head .fx-pet {
  width: 84px;
  margin: -6px 0 -6px;
}

/* ---------- puzzle pieces: more room for words inside a figure ---------- */
.fx-shelf {
  display: flex;
  gap: 10px;
  padding: 0 2px 8px;
}
.fx-shelf .piece {
  min-width: 0;
}
.fx-shelf .piece .pf {
  gap: 6px;
  padding: 12px 10px 14px;
}
.fx-shelf .piece img {
  width: 64px;
  height: 64px;
}
.fx-shelf .piece .pt {
  font-size: 0.9375rem;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-shelf .piece .pill {
  margin: 0;
}
.fx-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--ws-purple);
  box-shadow: 0 3px 0 var(--ws-purple-lip);
  margin-bottom: 3px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.fx-pill--mint {
  background: var(--ws-mint-soft);
  box-shadow: 0 3px 0 var(--ws-mint-soft-lip);
  color: var(--ws-mint-ink);
}
.fx-pill .fxi {
  width: 16px;
  height: 16px;
}
.fx-coinline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--ws-coin-number);
}
.fx-coinline img {
  width: 22px;
  height: 22px;
}
.fx-piece-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
}
.fx-lockb {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--ws-soft);
  box-shadow: 0 2px 0 var(--ws-soft-lip);
  color: var(--ws-soft-ink);
}
.fx-lockb .fxi {
  width: 16px;
  height: 16px;
}
.fx-can {
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ws-sky-ink);
  text-align: center;
}
.fx-pieceline {
  flex: 0 0 auto;
}

/* ---------- the Keep training card (HubParts.tsx PrimaryTrainButton) and wide pieces ---------- */
.fx-keep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 24px;
  background: var(--ws-mint);
  box-shadow: 0 5px 0 var(--ws-mint-lip);
  margin-bottom: 5px;
  color: var(--ws-mint-ink);
}
.fx-keep img {
  width: 58px;
  flex: none;
}
.fx-keep .kt {
  flex: 1;
  min-width: 0;
}
.fx-keep small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
}
.fx-keep strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}
.fx-keep .bar {
  height: 9px;
  margin-top: 7px;
  border-radius: 6px;
  background: var(--ws-mint-track);
  overflow: hidden;
}
.fx-keep .bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--ws-mint-lip);
}
.fx-keep .fx-chev {
  background: var(--ws-mint-bubble);
  color: var(--ws-mint-ink);
}
.fx-wide {
  --bite: radial-gradient(circle 13px at 0 50%, #0000 12.5px, #000 13px) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 12.5px, #000 13px) right / 51% 100% no-repeat;
  position: relative;
  margin-bottom: 5px;
}
.fx-wide::before,
.fx-wide > .fx-wf {
  border-radius: 22px;
  -webkit-mask: var(--bite);
  mask: var(--bite);
}
.fx-wide::before {
  content: "";
  position: absolute;
  inset: 5px 0 -5px 0;
  background: var(--edge);
}
.fx-wide > .fx-wf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  min-height: 72px;
  background: var(--face);
  color: var(--ink-on);
}
.fx-wide--mint {
  --face: var(--ws-mint-soft);
  --edge: var(--ws-mint-soft-lip);
  --ink-on: var(--ws-mint-ink);
}
.fx-wide--sky {
  --face: var(--ws-sky);
  --edge: var(--ws-sky-lip);
  --ink-on: var(--ws-sky-ink);
}
.fx-wide .fx-chev {
  background: var(--page);
  color: var(--ink-on);
}
.fx-wide img {
  width: 56px;
  flex: none;
}
.fx-wide .tt {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
}
.fx-wide .tl {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
}

/* ---------- training: chat, choices, progress (components/companion/training) ---------- */
.fx-tbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fx-tbar .track {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: var(--ws-mint-track);
  overflow: hidden;
}
.fx-tbar .track i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--ws-mint-lip);
}
.fx-tbar img {
  height: 26px;
  width: auto;
  aspect-ratio: 200 / 125;
}
.fx-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.fx-msg--me {
  justify-content: flex-end;
}
.fx-msg .fx-pet {
  width: 54px;
}
.fx-msg .fx-say {
  max-width: 78%;
}
.fx-ask {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  padding: 0 4px;
  color: var(--ws-ink);
}
.fx-choices {
  display: grid;
  gap: 10px;
}
.fx-choice {
  --face: var(--ws-card);
  --edge: var(--ws-card-lip);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 20px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.fx-choice .mk {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ws-well);
  display: grid;
  place-items: center;
  color: #fff;
}
.fx-choice .mk .fxi {
  width: 13px;
  height: 13px;
}
.fx-choice.on {
  --face: var(--ws-chosen);
  --edge: var(--ws-chosen-lip);
}
.fx-choice.on .mk {
  background: var(--ws-chosen-lip);
}
.fx-choice.tried {
  --face: var(--ws-coral-card);
  --edge: var(--ws-coral-lip);
}
.fx-choice small {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ws-ink-soft);
}
.fx-feed {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
  background: var(--face);
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.fx-feed .fxi {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}
.fx-feed--right {
  --face: var(--ws-chosen);
  --edge: var(--ws-chosen-lip);
}
.fx-feed--right .fxi {
  color: var(--ws-chosen-lip);
}
.fx-feed--try {
  --face: var(--ws-coral-card);
  --edge: var(--ws-coral-lip);
}
.fx-feed--try .fxi {
  color: var(--ws-coral);
}
.fx-feed--info {
  --face: var(--ws-panel);
  --edge: var(--ws-panel-lip);
}
.fx-coach {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--ws-card);
  color: var(--ws-ink-soft);
  font-weight: 600;
  font-size: 0.9375rem;
}
.fx-pickline {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: var(--ws-card);
  padding: 6px 6px 6px 16px;
  min-height: 60px;
}
.fx-pickline span {
  flex: 1;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ws-ink-muted);
}
.fx-pickline .fx-btn {
  min-height: 48px;
  padding: 0 20px;
  font-size: 1.0625rem;
  margin: 0 0 4px;
  border-radius: 24px;
  box-shadow: 0 4px 0 var(--edge);
}
.fx-pager {
  display: grid;
  gap: 10px;
}
.fx-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.fx-dots i {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: var(--ws-well);
}
.fx-dots i.on {
  width: 22px;
  background: var(--ws-purple);
}
.fx-pagebar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fx-pagebar .fx-btn {
  flex: 1;
}
.fx-intro {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--ws-panel);
  box-shadow: 0 4px 0 var(--ws-panel-lip);
  margin-bottom: 4px;
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 1rem;
}
.fx-intro .fxi {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

/* ---------- the Workshop (Workshop.tsx WsCard) ---------- */
.fx-ws {
  --face: var(--ws-card);
  --edge: var(--ws-card-lip);
  position: relative;
  padding: 16px;
  border-radius: 22px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
  color: var(--ws-ink);
}
.fx-ws .fx-wt {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}
.fx-ws .fx-wn {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ws-ink-soft);
}

/* ---------- the engines ---------- */
.fx-engines {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .fx-engines {
    grid-template-columns: 1fr 1fr;
  }
  .fx-engines > :first-child {
    grid-column: 1 / -1;
  }
}
.fx-engine {
  display: grid;
  gap: 4px;
  align-content: start;
}
.fx-engine .fx-kind {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--eyebrow);
  letter-spacing: 0.02em;
  padding-left: 6px;
}
.fx-engine .fx-ws {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fx-engine .fx-ws img {
  width: 76px;
  flex: none;
}
.fx-engine .fx-wt {
  font-size: 1.1875rem;
}

/* ---------- the Room and the shop ---------- */
.fx-roomwrap {
  border-radius: 24px;
  overflow: hidden;
}
.fx .room {
  border-radius: 0;
}
.fx-shopsign {
  display: grid;
  place-items: center;
  padding: 10px 18px 12px;
  border-radius: 18px;
  background: #8a5a32;
  box-shadow: 0 5px 0 #5e3b1e;
  margin: 0 auto 5px;
  color: #fff3dc;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-align: center;
  width: fit-content;
  max-width: 100%;
}
.fx-shopsign small {
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff3dc;
  opacity: 0.92;
}
.fx-shelf3 {
  background: #fff1d9;
  border-radius: 22px;
  box-shadow: 0 5px 0 #ebd5aa;
  margin-bottom: 5px;
  padding: 10px 12px 12px;
}
.fx-shelfrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: end;
}
.fx-shelfrow .fx-thing {
  display: grid;
  justify-items: center;
  align-items: end;
  height: 78px;
}
.fx-shelfrow .fx-thing img {
  width: 92%;
  max-height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 0 rgba(60, 36, 12, 0.14));
}
.fx-plank {
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(#efc891 0 4px, #d39b62 4px 10px, #a5733f 10px 14px);
  margin-top: -4px;
}
.fx-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 0;
}
.fx-tag {
  position: relative;
  margin-top: 14px;
  padding: 16px 6px 7px;
  border-radius: 12px;
  background: #4acb78;
  box-shadow: 0 3px 0 #2e9e57;
  margin-bottom: 3px;
  color: #06301a;
  text-align: center;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.fx-tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  background: #8a6a4a;
  border-radius: 1px;
}
.fx-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff1d9;
}
.fx-tag .pr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 2px;
}
.fx-tag .pr img {
  width: 19px;
  height: 19px;
}
.fx-tag--placed {
  background: #d6e8ff;
  box-shadow: 0 3px 0 #9cc2f2;
  color: #14275e;
}
.fx-tag--owned {
  background: #fff;
  box-shadow: 0 3px 0 #d9d4c6;
  color: #0f5a33;
}
.fx-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px 4px 6px;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}
.fx-plate img {
  width: 40px;
  height: 40px;
}
.fx-plate b {
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ws-coin-number);
}
.fx-counter {
  display: grid;
  height: 24px;
  border-radius: 10px;
  overflow: hidden;
  grid-template-rows: 7px 11px 6px;
}
.fx-counter i:nth-child(1) {
  background: #efc891;
}
.fx-counter i:nth-child(2) {
  background: #d39b62;
}
.fx-counter i:nth-child(3) {
  background: #a5733f;
}
.fx-depts {
  display: flex;
  gap: 8px;
  overflow: hidden;
  padding-bottom: 4px;
  margin-right: -14px;
}
.fx-dept {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: var(--ws-soft);
  box-shadow: 0 4px 0 var(--ws-soft-lip);
  color: var(--ws-soft-ink);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}
.fx-dept.on {
  background: var(--ws-mint);
  box-shadow: 0 4px 0 var(--ws-mint-lip);
  color: var(--ws-mint-ink);
}

/* ---------- streak (app/streak.tsx) ---------- */
.fx-streakbg {
  background: linear-gradient(180deg, #ffe2b0 0%, #fff4dc 100%);
  margin: -16px -14px -20px;
  padding: 18px 14px 20px;
  display: grid;
  gap: 14px;
}
.fx-flamehero {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}
.fx-flamehero img {
  width: 92px;
  height: auto;
}
.fx-flamehero .big {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #e8590c;
  margin-top: 4px;
}
.fx-flamehero .big small {
  display: block;
}
.fx-flamehero .u {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink);
}
.fx-flamehero p {
  margin: 8px 20px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.fx-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 14px 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 5px 12px rgba(184, 106, 18, 0.1);
}
.fx-day {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.fx-day.today {
  color: #ff8a1f;
}
.fx-day > i {
  display: grid;
  place-items: center;
  width: min(42px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #efe3d0;
  color: #fff;
}
.fx-day > i.next {
  background: #f6ebdb;
}
.fx-day > i.done {
  background: #ff8a1f;
}
.fx-day > i.ring {
  background: #fff3df;
  border: 3px dashed #ff8a1f;
}
.fx-day > i .fxi {
  width: 24px;
  height: 24px;
}
.fx-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fx-stat {
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 5px 12px rgba(184, 106, 18, 0.1);
}
.fx-stat img {
  height: 32px;
  width: auto;
}
.fx-stat .fxi {
  width: 28px;
  height: 28px;
  color: #ff8a1f;
}
.fx-stat b {
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
}
.fx-stat b small {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.fx-stat span {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* ---------- Home (app/(tabs)/home.tsx) ---------- */
.fx-hello {
  text-align: center;
}
.fx-hello .fx-h1 {
  font-size: 2.3rem;
  letter-spacing: -0.03em;
}
.fx-advcard {
  --face: color-mix(in srgb, #fce3cc 65%, #fff);
  --edge: #f0bc98;
  --pt: #b8602f;
  padding: 20px;
  border-radius: 34px;
  background: var(--face);
  box-shadow: 0 9px 0 var(--edge);
  margin-bottom: 9px;
  display: grid;
  gap: 10px;
}
.fx-advcard .gr {
  font-weight: 700;
  font-size: 1rem;
  color: var(--pt);
}
.fx-advcard .tt {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fx-advcard .nm {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--pt);
}
.fx-advcard .nt {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--skill-cta);
  line-height: 1.25;
}
.fx-advcard .pr {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--skill-cta);
}
.fx-advcard .bar {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.fx-advcard .bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #f28c3d;
}
.fx-advcard .fx-btn {
  margin-bottom: 0;
  min-height: 64px;
  border-radius: 32px;
  font-size: 1.375rem;
  box-shadow: 0 6px 0 #5a47cc;
}
.fx-advcard .fx-pet {
  justify-self: center;
  width: 132px;
}
.fx-sidecard {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fx-sidecard .fx-pet {
  width: 64px;
}
.fx-goal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.fx-goal .fx-pet {
  width: 64px;
  align-self: center;
}
.fx-goal .gt {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-goal .gb {
  margin-top: 4px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--skill-body);
}
.fx-goal .gbar {
  margin-top: 10px;
  height: 10px;
  border-radius: 5px;
  background: #f3e3b0;
  overflow: hidden;
}
.fx-goal .gbar i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #eb8a14;
}
.fx-goal .gl {
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--skill-body);
}
.fx-goal .fxi {
  width: 22px;
  height: 22px;
  color: var(--ink);
  flex: none;
}
.fx-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--hairline), 0 8px 22px rgba(31, 42, 92, 0.12);
}
.fx-tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
  padding: 6px 2px 5px;
  border-radius: 26px;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #3b4163;
}
.fx-tab .fxi {
  width: 28px;
  height: 28px;
}
.fx-tab.on {
  background: var(--nav-active-pill);
  color: var(--nav-active);
}
.fx-tab--mid img {
  width: 54px;
  height: auto;
  margin-top: -22px;
}
.fx-tab--mid {
  padding-top: 0;
}

/* ---------- side missions ---------- */
.fx-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 380px) {
  .fx-tiles {
    grid-template-columns: 1fr;
  }
}
.fx-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px;
  min-height: 190px;
  border-radius: 28px;
  background: var(--face);
  box-shadow: 0 6px 0 var(--edge);
  margin-bottom: 6px;
}
.fx-tile .tn {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fx-tile .ts {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--b, var(--skill-body));
}
.fx-tile .tm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
}
.fx-tile .tm > span:first-child {
  flex: 1;
}
.fx-tile .tc {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}
.fx-tile .tc > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--a);
}
.fx-tile .tc > i .fxi {
  width: 13px;
  height: 13px;
}
.fx-tile .fx-chev {
  width: 38px;
  height: 38px;
}
.fx-seg {
  display: flex;
  gap: 4px;
  flex: 1;
}
.fx-seg i {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: var(--dot-inactive);
}
.fx-seg i.on {
  background: var(--purple);
}
.fx-topbar {
  display: grid;
  gap: 6px;
}
.fx-topbar .fx-row {
  gap: 12px;
}
.fx-dots3 {
  display: inline-flex;
  gap: 3px;
}
.fx-dots3 i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.fx-miniround {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 3px 0 var(--track);
  margin-bottom: 3px;
}
.fx-miniround .fxi {
  width: 22px;
  height: 22px;
}
.fx-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 var(--track);
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-opt .mk {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dot-inactive);
  display: grid;
  place-items: center;
  color: #fff;
}
.fx-opt .mk .fxi {
  width: 15px;
  height: 15px;
}
.fx-opt .st {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
}
.fx-opt.picked {
  background: var(--nav-active-pill);
  box-shadow: 0 5px 0 var(--purple);
}
.fx-opt.picked .mk {
  background: var(--purple);
}
.fx-opt.picked .st {
  color: var(--purple);
}
.fx-opt.tried {
  background: #fef1e4;
  box-shadow: 0 5px 0 #f0b87e;
}
.fx-opt.tried .mk {
  background: #f0b87e;
}
.fx-opt.tried .st {
  color: #a5551f;
}
.fx-opt.right {
  background: #e3f8ec;
  box-shadow: 0 5px 0 #43c06b;
}
.fx-opt.right .mk {
  background: #43c06b;
}
.fx-opt.right .st {
  color: #1f7a45;
}
.fx-example {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--ws-sky);
  box-shadow: 0 4px 0 var(--ws-sky-lip);
  margin-bottom: 4px;
  color: var(--ws-sky-ink);
}
.fx-example small {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fx-example b {
  font-size: 1.0625rem;
}
.fx-missioncard {
  background: var(--streak-bg);
  box-shadow: 0 4px 0 #f0cf9c;
}

/* ---------- reports (grown-ups) ---------- */
.fx-rep {
  display: grid;
  gap: 12px;
}
.fx-rep .fx-h2 {
  font-size: 1.45rem;
}
.fx-replabel {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.fx-rrow {
  padding: 7px 0;
  border-top: 1px solid var(--cc-soft);
}
.fx-rrow:first-child {
  border-top: 0;
}
.fx-rrow .rn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-rrow .rn em {
  font-style: normal;
  flex: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.fx-rrow .rd {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 3px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--skill-body);
}
.fx-rrow .rd::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--cc-soft-edge);
}
.fx-rrow .rt {
  margin-top: 2px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--skill-body);
}
.fx-rline {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--ink);
}
.fx-receipt {
  display: grid;
  gap: 5px;
}
.fx-receipt .rt1 {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-receipt .rt2 {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.fx-receipt .rt3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--nav-active);
}
.fx-receipt .rt3 .fxi {
  width: 15px;
  height: 15px;
}
.fx-receipt .rt4 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.fx-receipt .rt4 span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fx-receipt .rt4 .fxi {
  width: 15px;
  height: 15px;
}
.fx-strip {
  display: grid;
  gap: 6px;
}
.fx-strip .sn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.fx-strip .sn em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--skill-body);
}
.fx-strip .sb {
  display: flex;
  gap: 4px;
}
.fx-strip .sb i {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--track);
}
.fx-strip .sb i.on {
  background: var(--purple);
}
.fx-fine {
  padding: 0 6px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- forms (set-up and sign-in) ---------- */
.fx-field {
  display: grid;
  gap: 6px;
}
.fx-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 2px solid #e4e0fa;
  background: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
}
.fx-input.ph {
  color: var(--ink-muted);
  font-weight: 400;
}
.fx-input .show {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--purple);
}
.fx-note {
  padding: 10px 14px;
  border-radius: 16px;
  background: #e6f8ec;
  color: #23834a;
  font-weight: 700;
  font-size: 0.9375rem;
}
.fx-emailrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 4px 0 16px;
  border-radius: 18px;
  background: #f3f0fe;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.fx-emailrow span:last-child {
  color: var(--purple);
  padding: 0 14px;
}
.fx-grades {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.fx-grades .gr {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.fx-gchip {
  flex: 0 0 auto;
  width: min(60px, 17.5%);
  min-width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 0 #d3c9f6;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
}
.fx-gchip.on {
  background: var(--purple);
  box-shadow: 0 5px 0 #5b49cf;
  color: #fff;
}
.fx-holder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 6px 0 #d3c9f6;
  margin-bottom: 6px;
}
.fx-holder .ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nav-active-pill);
  color: var(--purple);
}
.fx-holder .ic .fxi {
  width: 30px;
  height: 30px;
}
.fx-holder b {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-holder span {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-soft);
}
.fx-companions {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.fx-ctile {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 6px 2px 5px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 var(--ring);
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.fx-ctile img {
  width: 100%;
  max-width: 54px;
  height: auto;
  aspect-ratio: 438 / 452;
  object-fit: contain;
}
.fx-ctile.on {
  background: var(--bg);
  box-shadow: 0 5px 0 var(--edge);
  color: var(--ink);
  transform: translateY(-5px);
}
.fx-stage {
  display: grid;
  justify-items: center;
  margin: -16px -14px 0;
  padding: 20px 14px 10px;
  background: var(--bg);
  text-align: center;
  gap: 2px;
}
.fx-stage .spot {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(260px, 100%);
  aspect-ratio: 1;
}
.fx-stage .spot::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}
.fx-stage .spot::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.fx-stage .spot img {
  position: relative;
  z-index: 1;
  width: 78%;
  height: auto;
  z-index: 1;
}
.fx-stage .nm {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--ink);
}
.fx-stage .ln {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ---------- settings ---------- */
.fx-setrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 6px;
  border-bottom: 1.5px solid #eceef6;
}
.fx-setrow:last-child {
  border-bottom: 0;
}
.fx-setrow b {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--ink);
}
.fx-setrow span {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.fx-toggle {
  flex: none;
  position: relative;
  width: 58px;
  height: 34px;
  border-radius: 17px;
  background: #d5d9e6;
}
.fx-toggle::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1.5px 3px rgba(31, 42, 92, 0.25);
}
.fx-toggle.on {
  background: #7c65ef;
}
.fx-toggle.on::after {
  left: 27px;
}
.fx-sizes {
  display: flex;
  gap: 10px;
}
.fx-size {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 8px 6px;
  border-radius: 22px;
  background: var(--nav-active-pill);
  box-shadow: 0 4px 0 #c9bdf5;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--nav-active);
}
.fx-size.on {
  background: var(--purple);
  box-shadow: 0 4px 0 #5a47cc;
  color: #fff;
}
.fx-sect {
  padding: 0 6px;
}
.fx-sect .fx-h2 {
  font-size: 1.4rem;
}

/* ---------- badges (BadgeCard.tsx, BadgeArt.tsx) ---------- */
.fx-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fx-badge {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 12px 10px 14px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 #d9d2f7;
  margin-bottom: 5px;
  text-align: center;
}
.fx-badge.locked {
  background: #f4f5fa;
  box-shadow: 0 5px 0 #dfe2ee;
}
.fx-badge .bn {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--ink);
}
.fx-badge.locked .bn {
  color: var(--skill-cta);
}
.fx-badge .bs {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--bd);
}
.fx-badge .br {
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--skill-body);
}
.fx-coin2 {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--rl), var(--rd));
  box-shadow: 0 3px 6px color-mix(in srgb, var(--sh) 35%, transparent);
}
.fx-coin2::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--fd), var(--fl));
}
.fx-coin2 .fxi {
  position: relative;
  width: 30px;
  height: 30px;
  color: var(--sy);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75));
}
.fx-coin2 .st {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bd);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
}
.fx-coin2 .st .fxi {
  width: 13px;
  height: 13px;
  color: #fff;
  filter: none;
}
.fx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fx-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 20px;
  background: #eee9fe;
  box-shadow: 0 3px 0 #d3c9f6;
  margin-bottom: 3px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--nav-active);
}
.fx-chip.on {
  background: var(--purple);
  box-shadow: 0 3px 0 #5b49cf;
  color: #fff;
}

/* ---------- plans ---------- */
.fx-plans {
  display: grid;
  gap: 16px;
}
@media (min-width: 560px) {
  .fx-plans {
    grid-template-columns: 1fr 1fr;
  }
}
.fx-plans .plan {
  padding: 22px 20px 20px;
  margin-bottom: var(--lip-card);
  position: relative;
}
.fx-plans .plan .pn {
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  align-self: center;
}
.fx-plans .plan .pn {
  font-size: 1.5rem;
}
.fx-plans .plan .price {
  margin: 6px 0 2px;
  font-size: 2rem;
  line-height: 1.1;
}
.fx-plans .plan .price small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--eyebrow);
}
.fx-plans .plan p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ws-ink);
  font-weight: 600;
}
.fx-plans .plan .plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fx-plans .plan .plan-top img {
  width: 56px;
  height: auto;
}
.fx-plans .plan--starter {
  --face: var(--cc-sky);
  --edge: var(--cc-sky-edge);
}
.fx-plans .plan--plus {
  --face: var(--cc-peach);
  --edge: var(--cc-peach-edge);
}
.fx-plans .plan ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fx-plans .plan li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ws-ink);
}
.fx-plans .plan li img {
  justify-self: center;
}
.fx-plans .plan li img.v {
  width: 22px;
  height: 22px;
}
.fx-plans .plan li img.b {
  width: 34px;
  height: auto;
  aspect-ratio: 200 / 125;
}
.fx-plans .soon-tag {
  font-size: 0.8125rem;
  padding: 5px 10px 6px;
}

/* ---------- waitlist (website/waitlist.html, simplified) ---------- */
.fx-wl {
  padding: 22px 18px 22px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 6px 0 var(--lip);
  margin-bottom: 6px;
  display: grid;
  gap: 14px;
}
.fx-wl .fx-h2 {
  font-size: 1.6rem;
}
.fx-wl legend,
.fx-wl .lg {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.fx-wl .lg em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.fx-wl .fx-input {
  border-color: var(--hairline);
  min-height: 52px;
  border-radius: 16px;
}
.fx-wl .fx-hint {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.fx-wlchips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 360px) {
  .fx-wlchips {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fx-wlchip {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 6px 4px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--track);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  text-align: center;
}
.fx-wlchip.on {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand-text);
  color: var(--brand-text);
}
.fx-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--paragraph);
}
.fx-consent i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid var(--track);
  background: #fff;
}

/* ---------- small helpers ---------- */
.fx-kvlist {
  display: grid;
  gap: 4px;
}
.fx-center-pet {
  display: grid;
  justify-items: center;
}
.fx-mood {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fx-mood .fx-pet {
  width: 120px;
}
.fx-bolts {
  display: flex;
  gap: 6px;
}
.fx-bolts i {
  width: 22px;
  height: 28px;
  background: #ffc93c;
  clip-path: polygon(60% 0, 10% 56%, 46% 56%, 34% 100%, 90% 40%, 54% 40%);
  filter: drop-shadow(0 1px 0 #c98a00);
}
.fx-bigbat {
  display: grid;
  justify-items: center;
  padding: 22px 16px;
}
.fx-bigbat img {
  width: min(190px, 60%);
  height: auto;
  aspect-ratio: 200 / 125;
}
.fx-listline {
  display: grid;
  gap: 6px;
}


/* ---------- figure parts added while drawing the screens ---------- */
.fx-ideabtn {
  display: inline-flex;
  width: auto;
  min-height: 52px;
  padding: 0 22px 0 14px;
  border-radius: 26px;
  box-shadow: 0 4px 0 #c9bdf5;
  margin-bottom: 4px;
  font-size: 1.0938rem;
  color: #3f39d3;
}
.fx-ideapic {
  width: auto;
  height: 40px;
}
.fx-wide .fx-wpic {
  width: 62px;
  height: auto;
}
.fx-wide .fx-wf .fx-grow {
  min-width: 0;
}
.fx-shelf--peek {
  margin-right: -14px;
  overflow: hidden;
  padding-right: 0;
}
.fx-shelf--peek .piece {
  flex: 0 0 41%;
}
.fx-shelf--peek .piece .pf {
  height: 100%;
}
.fx-shelf--tall .piece .pf {
  justify-content: space-between;
}
.fx-can {
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ws-sky-ink);
  text-align: center;
}
.fx-block {
  --face: var(--ws-card);
  --edge: var(--ws-card-lip);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
  color: var(--ws-sky-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.fx-block > span:first-child {
  flex: 1;
  min-width: 0;
}
.fx-block .mk {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--page);
  opacity: 0.9;
  display: grid;
  place-items: center;
  color: #fff;
}
.fx-block .mk .fxi {
  width: 16px;
  height: 16px;
}
.fx-block .mk.on {
  background: transparent;
  opacity: 1;
}
.fx-block.on {
  color: #fff;
}
.fx-center-pet {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.fx-sleepbat {
  width: 76px;
  height: auto;
  aspect-ratio: 200 / 125;
}
.fx-bigbat img {
  width: min(190px, 60%);
}
.fx-bigbat {
  display: grid;
  justify-items: center;
}


/* ---------- more parts ---------- */
.fx-lead {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ws-ink);
}
.fx-prompt {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-bignum {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ws-gold-text);
}
.fx-bigcoin {
  width: 70px;
  height: 70px;
}
.fx-newpiece {
  display: grid;
  justify-items: center;
}
.fx-newpiece .piece {
  flex: none;
  width: min(100%, 290px);
}
.fx-newpiece .pf {
  align-items: center;
  gap: 10px;
  padding: 16px 20px 20px;
}
.fx-newtag {
  padding: 5px 14px 6px;
  border-radius: 12px;
  background: var(--ws-gold);
  box-shadow: 0 3px 0 var(--ws-gold-lip);
  margin-bottom: 3px;
  color: var(--ws-gold-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.fx-newpiece .dots i {
  width: 14px;
  height: 14px;
}
.fx-status-pill {
  display: inline-block;
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ws-panel);
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 0.8125rem;
}
.fx-status-pill.ready {
  background: var(--ws-mint);
  color: var(--ws-mint-ink);
}
.fx-eart {
  width: 76px;
  height: auto;
  flex: none;
}
.fx-roomwrap {
  border-radius: 24px;
  overflow: hidden;
}
.fx-spotrow {
  display: flex;
  gap: 8px;
  overflow: hidden;
  margin-right: -12px;
  padding-bottom: 2px;
}
.fx-spotchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--ws-soft);
  color: var(--ws-soft-ink);
  font-weight: 700;
  font-size: 0.9375rem;
}
.fx-spotchip.on {
  background: var(--ws-purple);
  color: #fff;
}
.fx-tilerow {
  display: flex;
  gap: 8px;
  overflow: hidden;
  margin: 8px -12px 0 0;
}
.fx-tile2 {
  flex: none;
  display: grid;
  justify-items: center;
  align-content: space-between;
  width: 92px;
  min-height: 88px;
  padding: 6px;
  border-radius: 20px;
  background: var(--ws-panel);
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
}
.fx-tile2 .art {
  display: grid;
  place-items: center;
  width: 76px;
  height: 52px;
}
.fx-tile2 .art img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx-tile2.on {
  background: var(--ws-purple);
  color: #fff;
}
.fx-tile2.soft {
  background: var(--ws-soft);
  color: var(--ws-soft-ink);
}
.fx-tile2 .fx-dotc {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ws-sky-lip);
}
.fx-tile2 .bag {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff1d9;
  box-shadow: inset 0 -6px 0 #ebd5aa;
}
.fx-shelfrow .fx-thing img {
  max-height: 64px;
}
.fx-tag .nm {
  min-height: 2.4em;
  display: grid;
  align-items: center;
}
.fx-qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 340px) {
  .fx-qgrid {
    grid-template-columns: 1fr;
  }
}
.fx-qtile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 14px 10px 14px;
  min-height: 200px;
  border-radius: 28px;
  background: var(--face);
  box-shadow: 0 6px 0 var(--edge);
  margin-bottom: 6px;
}
.fx-qtile .lv {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 12px;
}
.fx-qtile .lv i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.fx-qtile .fx-qpet {
  width: auto;
  height: 104px;
}
.fx-qtile .qt {
  font-weight: 700;
  font-size: 1.0313rem;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  min-height: 2.4em;
  display: grid;
  align-items: center;
}
.fx-keepcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 88px;
}
.fx-keeppet {
  width: auto;
  height: 62px;
}
.fx-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: var(--page);
  border: 2px solid var(--hairline);
  box-shadow: 0 5px 0 var(--lip);
  margin-bottom: 5px;
}
.fx-in2 {
  padding: 16px 14px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
}
.fx-two {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .fx-two {
    grid-template-columns: 1fr 1fr;
  }
}
.fx-frame--bare .fx-in {
  padding: 0;
}
.fx-info {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
}
.fx-info .fx-bd {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
}
.fx-info .fx-lab {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
}
.fx-info .fx-lab .fxi {
  width: 18px;
  height: 18px;
}
.fx-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--nav-active-pill);
  box-shadow: 0 3px 0 #c9bdf5;
  margin-bottom: 3px;
  color: var(--purple);
  font-weight: 700;
  font-size: 1rem;
}
.fx-quiet .fxi {
  width: 18px;
  height: 18px;
}


.fx-avrow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding-top: 8px;
}
.fx-av {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #40496f;
  opacity: 0.6;
}
.fx-av img {
  width: 100%;
  max-width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg);
  object-fit: contain;
  object-position: bottom;
  padding: 3px;
}
.fx-av.on {
  opacity: 1;
  color: #5a47cc;
}
.fx-av.on img {
  box-shadow: 0 0 0 3px #7c65ef;
}
.fx-party {
  width: 26px;
  height: auto;
}
.fx-bar2 {
  display: block;
  align-self: stretch;
  height: 7px;
  border-radius: 4px;
  background: #dde0ee;
  overflow: hidden;
  width: 100%;
}
.fx-bar2 i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #27b3ae;
}
.fx-badge .fx-bar2 {
  margin-top: 6px;
}


/* ---------- extra screens ---------- */
.fx-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fx-zone {
  display: flex;
  align-items: center;
  width: calc(50% - 4px);
  min-height: 48px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--cc-soft);
  box-shadow: 0 3px 0 var(--cc-soft-edge);
  margin-bottom: 3px;
  font-weight: 700;
  font-size: 1.0313rem;
  color: var(--ink);
}
.fx-zone.on {
  background: var(--purple);
  box-shadow: 0 3px 0 #5a47cc;
  color: #fff;
}
.fx-mail {
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(31, 42, 92, 0.08);
}
.fx-mail .mband {
  background: #f3fde8;
  text-align: center;
  padding: 24px;
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fx-mail .mb {
  padding: 26px 26px 22px;
}
.fx-mail p {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  color: #40496f;
}
.fx-mail .mbtn {
  text-align: center;
  background: #6c55ea;
  border-bottom: 5px solid #4b3bb0;
  border-radius: 18px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  margin: 8px 0 14px;
}
.fx-mail p.ms {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #58608c;
  text-align: center;
  margin: 0;
}
.fx-quietrow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 18px;
}
.fx-quietrow span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ws-mint-text);
}
.fx-seg2 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ws-well);
}
.fx-seg2 span {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ws-ink-muted);
  text-align: center;
  line-height: 1.15;
}
.fx-seg2 span.on {
  background: var(--ws-card);
  color: var(--ws-ink);
}
.fx-decorate {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 22px;
  background: var(--ws-panel);
  box-shadow: 0 3px 0 var(--ws-panel-lip);
  margin-bottom: 3px;
  gap: 6px;
  color: var(--ws-purple);
  font-size: 1rem;
}
.fx-decorate .fxi {
  width: 18px;
  height: 18px;
}
.fx-companions .fx-ctile span,
.fx-avrow .fx-av span {
  overflow-wrap: normal;
  word-break: normal;
}
.fx-in {
  container-type: inline-size;
}
@container (max-width: 19rem) {
  .fx-companions {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 6px;
  }
  .fx-avrow {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 6px;
  }
}

@media (max-width: 380px) {
  .fx-in {
    padding: 14px 10px 18px;
  }
  .fx-h1 {
    font-size: 1.6rem;
  }
  .fx-companions {
    gap: 4px;
  }
}

/* ---------- parent area, help rows, plan page (integration pass) ---------- */
.fx-avc {
  flex: none;
  display: grid;
  place-items: end center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--bg, #d9e8fe);
  overflow: hidden;
}
.fx-avc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  padding: 3px;
}
.fx-seltag {
  flex: none;
  padding: 3px 8px;
  border-radius: 14px;
  background: #eee9fe;
  box-shadow: 0 3px 0 #d9d1f6;
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  color: #5a47cc;
}
.fx-stat {
  flex: 1;
  padding: 8px 10px;
  border-radius: 16px;
  background: var(--sb);
  box-shadow: 0 4px 0 rgba(30, 41, 79, 0.09);
  display: grid;
}
.fx-stat b {
  font-size: 1.4rem;
  line-height: 1.15;
}
.fx-stat span {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.fx-linkrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px;
  border-bottom: 1.5px solid #eceef6;
}
.fx-linkrow.last {
  border-bottom: 0;
}
.fx-linkrow b {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--ink);
}
.fx-linkrow span {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.fx-linkrow .fxi {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--ink-soft);
}
.fx-planrow {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1.5px solid #eceef6;
}
.fx-planrow.last {
  border-bottom: 0;
}
.fx-planrow b {
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
}
.fx-planrow span {
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--skill-body);
}
.fx-planrow.link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.2rem;
}
.fx-planrow.link b {
  color: #5a47cc;
}
.fx-planrow.link .fxi {
  width: 1.1rem;
  height: 1.1rem;
  background: #5a47cc;
}

/* ---------- contrast of the figures ----------
   A figure is a picture of the app drawn with the app's own tokens, and a few of those text colors are under 4.5:1 in the app itself (docs/launch/APP_ACCESSIBILITY_AUDIT.md
   lists 35 pairs). The picture is hidden from assistive technology and its one description is the figure's label and caption, so what a person is meant to read is the article.
   Even so, the words in a picture should be legible, so here the few failing text colors are one step darker than the app's (about 5:1), and the red button face is a little deeper.
   Everything else is the app's color. This is the only place the figures differ from the app's tokens. */
.fx {
  --ink-soft: #566083;
  --ink-muted: #566083;
}
.fx .fx-plain--purple,
.fx .fx-opt.picked .st,
.fx .fx-quiet,
.fx .fx-input .show,
.fx .fx-emailrow span:last-child {
  color: #5a47cc;
}
.fx .fx-status .fx-coinn,
.fx .fx-plate b {
  color: #8a5a00;
}
.fx .fx-status .fx-streakn {
  color: #9a4f00;
}
.fx .fx-advcard .gr,
.fx .fx-advcard .pr {
  color: #276f8b;
}
.fx .b-danger {
  --face: #cf3a3f;
}
.fx .fx-day.today {
  color: #b8530c;
}
.fx .fx-av {
  opacity: 1;
}
.fx .fx-av img {
  opacity: 0.6;
}
.fx .fx-av:not(.on) span {
  color: #566083;
}
.fx .fx-size.on,
.fx .fx-chip.on,
.fx .fx-zone.on {
  background: var(--purple-deep);
}
.fx .fx-decorate {
  color: #4f3cc0;
}
.fx .fx-badge .bs {
  color: #3d4568;
}