:root {
  --pl-gap-2: 2px;
  --pl-lh-1: 1;
  --pl-lh-tight: 1.15;
  --pl-lh-title: 1.1;
  --pl-num-w: 2ch;
  --pl-lh-snug: 1.2;
  --pl-track-num: -0.02em;
  --pl-dim: 0.55;
  --pl-faded: 0.75;
  --pl-pop-scale: 1.18;
  --pl-pick-scale: 1.06;
  --pl-measure: 34ch;
  --pl-measure-s: 30ch;
  --pl-measure-xs: 18ch;
  --rs-z-from: 6px;
  --rs-z-x: 10px;
  --rs-z-y: -14px;
  --rt-spin: 320deg;
  --rt-stagger: 0.12s;
  --rt-leaf-x0: 6%;
  --rt-leaf-dx: 9%;
  --rt-glow-r: 40px;
  --fr-bob-stagger: -0.4s;
  --pl-globe: min(62vw, 240px);
  --pl-count-fs: 3rem;
  --pl-halo: rgba(95, 191, 106, 0.28);
  --pl-hero-top: var(--accent-soft);
  --pl-on-gold: var(--on-gold);
  --pl-float-t: 7s;
  --pl-float-y: -6px;
  --pl-pin-min: 88px;
  --pl-badge-min: 96px;
  --pl-badge-ic: 60px;
  --pl-date: 52px;
  --pl-fact-min: 6.2em;
  --pl-line: 1.45;
  --pl-chip-pad: 4px 10px 4px 6px;
  --pl-hair: 1px;
  --pl-ring: 2px;
  --pl-ring-l: 3px;
  --pl-shine: rgba(255, 255, 255, 0.55);
  --rt-glow: rgba(95, 191, 106, 0.35);
  --rt-badge: 112px;
  --rt-badge-big: 132px;
  --rt-buy-min: 140px;
  --rt-leaf: 10px;
  --rt-leaf-h: 16px;
  --rt-fall-t: 2.6s;
  --rt-fall-y: 340px;
  --rt-overlap: -10px;
  --cab-ic: 52px;
  --ill-check: 30px;
  --ill-soft: var(--danger-soft);
  --ill-weak: var(--warn-soft);
  --rs-tint: saturate(0.35) brightness(0.96);
  --rs-z-t: 3.2s;
  --rs-dot: 12px;
  --rs-pulse-t: 1.8s;
  --rs-glow: 0 0 0 6px rgba(95, 191, 106, 0.18);
  --fc-sky-h: 176px;
  --fc-sky-ink: #ffffff;
  --fc-sky-shadow: 0 1px 8px rgba(20, 30, 50, 0.45);
  --fc-temp: 3.2rem;
  --fc-scrim: linear-gradient(180deg, rgba(10, 20, 40, 0.3), rgba(10, 20, 40, 0.15) 30%, rgba(10, 20, 40, 0.6) 62%, rgba(10, 20, 40, 0.75));
  --fc-chip: rgba(10, 20, 40, 0.6);
  --fc-hour-w: 64px;
  --fc-heat: var(--warn-soft);
  --fc-frost: var(--info-soft);
  --fc-storm: var(--surface-3);
  --fc-search-h: var(--btn-h);
  --fc-moon-lit: #f6edc8;
  --fc-moon-dark: #4a5068;
  --fc-moon-rim: rgba(0, 0, 0, 0.25);
  --fc-wx-sun: var(--gold-2);
  --fc-wx-night: #6c6fd6;
  --fc-wx-cloud: var(--ink-soft);
  --fc-wx-rain: var(--need-water-2);
  --fc-wx-snow: var(--info);
  --fc-wx-storm: #7a52c7;
  --fr-qr: 196px;
  --qr-ink: #1d1a17;
  --qr-paper: #ffffff;
  --fr-code-fs: 1.8rem;
  --fr-code-max: 9vw;
  --fr-code-track: 0.18em;
  --fr-av-bg: radial-gradient(circle at 35% 30%, var(--surface) 0, var(--accent-soft) 62%, var(--surface-3) 100%);
  --fr-emoji-btn: var(--target);
  --fr-emoji-fs: 1.35rem;
  --fr-bob-t: 3.6s;
  --fr-squad-art: 96px;
  --pe-av: 68px;
  --me-day: 28px;
  --me-stat-min: 96px;
  --me-link-min: 6.25rem;
  --set-seg-h: var(--target);
  --mg-icon: 60px;
  --rt-step-art: 56px;
  --rs-clock-ic: 44px;
  --del-code-fs: 1.6rem;
}

.dark,
.theme-darkacademia,
.theme-cyberneon,
.theme-lofi {
  --pl-halo: rgba(95, 191, 106, 0.18);
  --pl-shine: rgba(255, 255, 255, 0.08);
  --rs-glow: 0 0 0 6px rgba(95, 191, 106, 0.22);
  --fc-wx-night: #a9abff;
  --fc-wx-storm: #c3a6ff;
  --fc-moon-rim: rgba(255, 255, 255, 0.3);
}

.card .btn.ghost,
.row .btn.ghost,
.ill-step .btn.ghost,
.rs-step .btn.ghost {
  background: var(--surface);
}

.pl-chev {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}

.section .pl-count-s {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.pl-fine,
.rt-fine,
.cab-fine,
.fc-fine {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  margin: var(--sp-2) var(--sp-1) 0;
  line-height: var(--pl-line);
}

.pl-card-head {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.pl-card-head .grow,
.rt-tree-head .grow,
.me-card .grow,
.fr-me .grow,
.fr-squad .grow,
.fg-head .grow,
.pl-mine .grow,
.pl-soon .grow,
.rt-none .grow,
.cab-free .grow,
.fr-offline .grow,
.fr-code-top .grow,
.ill-hero .grow,
.rs-clock .grow,
.fc-using .grow,
.mg-card .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
}

.pl-card-head small,
.rt-tree-head small,
.pl-mine small,
.pl-soon small,
.rt-none small,
.cab-free small,
.fr-offline small,
.mg-card small,
.fc-using small,
.rs-clock small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.pl-mine,
.set-link,
.fc-city,
.rs-pack,
.fr-me,
.me-card,
.fr-main {
  width: 100%;
  text-align: left;
  color: inherit;
}

.pl-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-s);
  margin: 0 calc(var(--pad-sheet) * -1) var(--gap-m);
  padding: var(--gap-xs) var(--pad-sheet) var(--gap-l);
  background: radial-gradient(circle at 50% 30%, var(--pl-halo) 0, transparent 58%), linear-gradient(180deg, var(--pl-hero-top), transparent 82%);
}

.pl-test {
  position: absolute;
  top: var(--sp-2);
  right: var(--pad-sheet);
  background: var(--warn);
  color: var(--on-gold);
  z-index: 1;
}

.pl-globe-wrap {
  width: var(--pl-globe);
  height: var(--pl-globe);
  animation: pl-float var(--pl-float-t) ease-in-out infinite;
}

.pl-globe {
  display: block;
  width: var(--pl-globe);
  height: var(--pl-globe);
}

.pl-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
}

.pl-count b {
  font-family: var(--font-display);
  font-size: var(--pl-count-fs);
  font-weight: var(--fw-dx);
  line-height: var(--pl-lh-1);
  letter-spacing: var(--pl-track-num);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

.pl-count span {
  color: var(--ink-soft);
  font-weight: var(--fw-b);
  max-width: var(--pl-measure-s);
}

.pl-count.pl-quiet b {
  font-size: var(--fs-xl);
  font-weight: var(--fw-dx);
  color: var(--ink);
  letter-spacing: var(--track-title);
  line-height: var(--pl-lh-tight);
  max-width: var(--pl-measure-xs);
}

.pl-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--pl-chip-pad);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--elev-1), inset 0 0 0 1px var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.pl-co2 {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  max-width: var(--pl-measure);
  font-size: var(--fs-s);
  color: var(--ink-soft);
  text-align: left;
  line-height: var(--pl-line);
}

.pl-co2 b {
  display: block;
  color: var(--ink);
}

.pl-note {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  max-width: var(--pl-measure);
}

.pl-health,
.pl-goal,
.pl-partner,
.rt-tree,
.rt-grove,
.fr-code,
.fr-add,
.fr-ref,
.del-card,
.set-card,
.me-streak {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.pl-next {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-top: var(--gap-xs);
}

.pl-next .bar,
.pl-goal .bar {
  flex: none;
}

.row-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-s);
  font-size: var(--fs-s);
}

.row-line small {
  color: var(--ink-soft);
  white-space: nowrap;
}

.pl-pins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pl-pin-min), 1fr));
  gap: var(--sp-2);
}

.fc-hours::-webkit-scrollbar {
  display: none;
}

.pl-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-gap-2);
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  color: var(--ink-soft);
}

.pl-pin-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}

.pl-pin b {
  font-size: var(--fs-s);
  color: var(--ink);
}

.pl-pin small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  line-height: var(--pl-lh-tight);
}

.pl-pin.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: var(--elev-1), inset 0 0 0 2px var(--accent);
}

.pl-pin.on .pl-pin-dot {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.pl-mine {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-top: var(--gap-m);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%);
}

.pl-mine b,
.rt-none b,
.pl-soon b {
  font-size: var(--fs-m);
}

.pl-goal-nums {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-s);
  font-size: var(--fs-s);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.pl-goal-reward {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
}

.pl-goal.is-reached {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}

.pl-goal.is-missed {
  opacity: var(--pl-faded);
}

.pl-soon {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.pl-fact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  background: linear-gradient(160deg, var(--pop-soft), var(--surface-2) 75%);
}

.pl-fact-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pl-fact-n {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.pl-fact-text {
  font-size: var(--fs-m);
  font-weight: var(--fw-b);
  line-height: var(--pl-line);
  min-height: var(--pl-fact-min);
  user-select: text;
  -webkit-user-select: text;
}

.pl-fact-src {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.pl-fact-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}

.pl-day {
  min-height: calc(var(--pl-date) + var(--gap-m) * 2);
}

.pl-day.is-live {
  box-shadow: var(--clay), inset 0 0 0 var(--pl-ring-l) var(--accent);
}

.pl-date {
  width: var(--pl-date);
  height: var(--pl-date);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: var(--clay);
  line-height: var(--pl-lh-1);
}

.pl-date b {
  font-size: var(--fs-l);
  color: var(--accent-ink);
}

.pl-date small {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pl-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pl-badge-min), 1fr));
  gap: var(--sp-3) var(--sp-2);
}

.pl-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
  line-height: var(--pl-lh-snug);
}

.pl-badge-ic {
  width: var(--pl-badge-ic);
  height: var(--pl-badge-ic);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px var(--line);
}

.pl-badge.on {
  color: var(--ink);
}

.pl-badge.on .pl-badge-ic {
  background: radial-gradient(circle at 35% 30%, var(--pl-shine), transparent 45%), linear-gradient(160deg, var(--accent), var(--accent-2));
  box-shadow: var(--clay), var(--glow-accent);
}

.pl-partner {
  margin-top: var(--gap-l);
}

.rt-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-s);
  margin: 0 calc(var(--pad-sheet) * -1);
  padding: var(--gap-s) var(--pad-sheet) var(--gap-m);
  background: radial-gradient(circle at 50% 20%, var(--pl-halo) 0, transparent 60%), linear-gradient(180deg, var(--pl-hero-top), transparent 85%);
}

.rt-hero h3 {
  font-size: var(--fs-xl);
  line-height: var(--pl-lh-tight);
}

.rt-hero p {
  color: var(--ink-soft);
  max-width: var(--pl-measure);
}

.rt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rt-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
}

.rt-step-art {
  width: var(--rt-step-art);
  height: var(--rt-step-art);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--elev-1), inset 0 0 0 1px var(--line);
}

.rt-steps .rt-arrow {
  align-self: center;
  margin-bottom: var(--sp-4);
  color: var(--ink-soft);
}

.rt-tree-head {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.rt-tree-head b {
  font-size: var(--fs-m);
}

.rt-pct {
  font-weight: var(--fw-x);
  font-size: var(--fs-l);
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.rt-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.rt-bar small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

.rt-line {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-s);
  color: var(--ink-soft);
  line-height: var(--pl-line);
}

.rt-line.ok {
  color: var(--good-ink);
}

.rt-line.warn {
  color: var(--warn-ink);
}

.rt-btns,
.fr-code-btns,
.fr-more-btns,
.fc-loc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.rt-tree.is-ready {
  box-shadow: var(--clay), 0 0 0 var(--pl-ring-l) var(--accent);
}

.rt-tree.is-planted {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%);
}

.rt-grove {
  margin-top: var(--gap-m);
  background: linear-gradient(140deg, var(--surface-2), var(--surface-2) 55%, var(--accent-soft));
}

.rt-grove.is-on {
  box-shadow: var(--clay), 0 0 0 var(--pl-ring) var(--gold);
}

.rt-sub {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  margin: 0 var(--gap-xs) var(--gap-s);
  line-height: var(--pl-line);
}

.rt-buys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--rt-buy-min), 1fr));
  gap: var(--gap-s);
}

.rt-buy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-l) var(--gap-m) var(--gap-m);
  border-radius: var(--r-l);
  background: var(--surface-2);
  box-shadow: var(--clay);
  text-align: center;
}

.rt-buy small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.rt-buy.is-best {
  box-shadow: var(--clay), 0 0 0 var(--pl-ring-l) var(--gold);
}

.rt-buy .tag {
  position: absolute;
  top: calc(var(--gap-s) * -1);
}

.rt-buy-art {
  display: flex;
  align-items: flex-end;
  min-height: var(--fs-hero);
}

.rt-buy-art canvas + canvas {
  margin-left: var(--rt-overlap);
}

.rt-price {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-l);
}

.rt-store {
  margin-top: var(--gap-s);
}

.rt-cert-btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rt-q {
  background: var(--accent);
  color: var(--on-accent);
  white-space: nowrap;
}

.rt-none {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.rt-rules ul,
.set-about ul {
  list-style: none;
  margin: 0 0 var(--gap-m);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.rt-rules li,
.set-about li {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-s);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.rt-claim,
.rt-done {
  position: relative;
}

.rt-claim .field {
  margin-top: var(--gap-s);
}

.rt-badge {
  width: var(--rt-badge);
  height: var(--rt-badge);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: radial-gradient(circle, var(--accent-soft) 0, var(--accent-soft) 55%, transparent 72%);
  box-shadow: 0 0 var(--rt-glow-r) var(--rt-glow);
}

.rt-badge.big {
  width: var(--rt-badge-big);
  height: var(--rt-badge-big);
}

.rt-season,
.ill-paused,
.fc-privacy,
.fr-safe {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-align: left;
  line-height: var(--pl-line);
}

.rt-err,
.fr-err {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--danger-ink);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  text-align: left;
}

.rt-confetti {
  position: absolute;
  inset: calc(var(--gap-xl) * -1) 0 auto;
  height: 0;
  pointer-events: none;
}

.rt-confetti i {
  position: absolute;
  top: 0;
  left: calc(var(--rt-leaf-x0) + var(--i) * var(--rt-leaf-dx));
  width: var(--rt-leaf);
  height: var(--rt-leaf-h);
  border-radius: var(--rt-leaf) 0;
  background: var(--leaf);
  opacity: 0;
  animation: rt-fall var(--rt-fall-t) var(--ease) calc(var(--i) * var(--rt-stagger)) both;
}

.rt-confetti i:nth-child(3n) {
  background: var(--gold);
}

.rt-confetti i:nth-child(4n + 1) {
  background: var(--pop);
}

.cab-tree {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--good-soft);
  color: var(--ink);
  font-size: var(--fs-s);
}

.cab-tree .i {
  color: var(--good-ink);
}

.cab-tree.is-ill {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--danger);
}

.cab-tree.is-ill .i {
  color: var(--danger-ink);
}

.cab-ic {
  position: relative;
  width: var(--cab-ic);
  height: var(--cab-ic);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: var(--surface);
}

.cab-row.is-empty .cab-ic canvas {
  opacity: var(--pl-dim);
}

.cab-row {
  flex-wrap: wrap;
}

.cab-row .grow {
  flex: 1 1 var(--row-text-min);
}

.cab-row b {
  font-size: var(--fs-m);
}

.cab-btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  flex: none;
  margin-left: auto;
}

.cab-buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.cab-st {
  align-self: flex-start;
  margin-top: var(--sp-1);
  white-space: normal;
}

.cab-free {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  box-shadow: inset 0 0 0 var(--pl-ring) var(--accent);
}

.ill-hero {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-l);
  background: var(--ill-soft);
}

.ill-hero.is-weak {
  background: var(--ill-weak);
  margin-bottom: var(--gap-m);
}

.ill-hero h3 {
  font-size: var(--fs-xl);
  line-height: var(--pl-lh-title);
}

.ill-hero p,
.ill-hero small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.ill-name::first-letter {
  text-transform: uppercase;
}

.ill-art {
  position: relative;
  flex: none;
}

.ill-badge {
  position: absolute;
  right: calc(var(--gap-xs) * -1);
  bottom: calc(var(--gap-xs) * -1);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--clay);
  padding: var(--pl-gap-2);
  display: grid;
}

.ill-cause {
  margin: var(--gap-m) var(--gap-xs);
  font-size: var(--fs-s);
  color: var(--ink-soft);
  line-height: var(--pl-line);
}

.ill-cause b {
  color: var(--ink);
}

.ill-health {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.ill-health span {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

.ill-hp {
  min-width: var(--pl-num-w);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ill-steps,
.rs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.ill-step,
.rs-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: var(--clay);
}

.ill-step .grow,
.rs-step .grow {
  flex: 1 1 var(--row-text-min);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
}

.ill-step > .btn,
.rs-step > .btn {
  margin-left: auto;
}

.ill-step small,
.rs-step small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.ill-check {
  width: var(--ill-check);
  height: var(--ill-check);
  flex: none;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: var(--pl-ring) solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-s);
  color: var(--ink);
}

.ill-step.done,
.rs-step.done {
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--accent-soft);
}

.ill-step.done .ill-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.ill-step.done b,
.rs-step.done b {
  color: var(--accent-ink);
}

.ill-step.done small,
.rs-step.done small {
  color: var(--ink);
}

.ill-ready {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--accent-soft);
  font-weight: var(--fw-x);
}

.ill-paused {
  margin: var(--gap-m) var(--gap-xs);
}

.rs-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-s);
  margin-bottom: var(--gap-m);
}

.rs-hero h3 {
  font-size: var(--fs-xl);
  line-height: var(--pl-lh-tight);
}

.rs-hero p {
  color: var(--ink-soft);
  max-width: var(--pl-measure);
  line-height: var(--pl-line);
}

.rs-art {
  position: relative;
}

.rs-art canvas {
  filter: var(--rs-tint);
}

.rs-z {
  position: absolute;
  top: 0;
  right: calc(var(--gap-l) * -1);
  display: flex;
  flex-direction: column;
  font-weight: var(--fw-x);
  color: var(--ink-soft);
}

.rs-z i {
  font-style: normal;
  opacity: 0;
  animation: rs-z var(--rs-z-t) var(--ease) infinite;
}

.rs-z i:nth-child(1) {
  font-size: var(--fs-l);
  animation-delay: calc(var(--rs-z-t) / 2);
}

.rs-z i:nth-child(2) {
  font-size: var(--fs-m);
  margin-left: var(--gap-s);
  animation-delay: calc(var(--rs-z-t) / 4);
}

.rs-z i:nth-child(3) {
  font-size: var(--fs-s);
  margin-left: var(--gap-xs);
}

.rs-start {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.rs-start b {
  font-size: var(--fs-l);
}

.rs-start p {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.rs-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
}

.rs-mini li {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  padding: var(--gap-s);
  border-radius: var(--r-s);
  background: var(--surface);
}

.rs-clock {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-l);
  background: var(--surface-2);
  box-shadow: var(--clay);
}

.rs-clock.is-ready {
  justify-content: center;
  background: var(--accent-soft);
  font-size: var(--fs-l);
}

.rs-wake {
  margin-top: var(--gap-m);
  animation: rs-pulse var(--rs-pulse-t) var(--ease) infinite;
}

.rs-ic {
  flex: none;
  display: grid;
  place-items: center;
}

.rs-dots {
  display: flex;
  gap: var(--gap-xs);
  flex: none;
}

.rs-dots i {
  width: var(--rs-dot);
  height: var(--rs-dot);
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.rs-dots i.on {
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

.rs-step + .btn,
.rs-steps + .btn {
  margin-top: var(--gap-m);
}

.rs-pack {
  margin-top: var(--gap-xs);
}

.fc-hero {
  position: relative;
  min-height: var(--fc-sky-h);
  display: flex;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--clay);
}

.fc-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.fc-hero-in {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--gap-m) var(--gap-l);
  color: var(--fc-sky-ink);
  text-shadow: var(--fc-sky-shadow);
  background: var(--fc-scrim);
}

.fc-where {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--pl-gap-2) var(--gap-s);
  border-radius: var(--r-pill);
  background: var(--fc-chip);
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
}

.fc-now {
  display: flex;
  align-items: baseline;
  gap: var(--gap-m);
}

.fc-now b {
  font-size: var(--fc-temp);
  font-weight: var(--fw-x);
  line-height: var(--pl-lh-1);
}

.fc-now span {
  font-weight: var(--fw-x);
  font-size: var(--fs-l);
}

.fc-src {
  order: 1;
  margin-left: auto;
  padding: var(--pl-gap-2) var(--gap-s);
  border-radius: var(--r-pill);
  background: var(--hud-glass);
  color: var(--hud-glass-ink);
  text-shadow: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
}

.fc-hours {
  display: flex;
  gap: var(--gap-xs);
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  margin: 0 calc(var(--pad-sheet) * -1);
  padding: var(--gap-xs) var(--pad-sheet) var(--gap-s);
}

.fc-hour {
  flex: none;
  min-width: var(--fc-hour-w);
  padding-inline: var(--sp-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-gap-2);
  padding: var(--gap-s) 0;
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.fc-hour:first-child {
  background: var(--accent-soft);
}

.fc-hour small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

.fc-wx {
  display: grid;
  place-items: center;
  color: var(--fc-wx-cloud);
}

.fc-wx.wx-clear,
.fc-wx.wx-partly {
  color: var(--fc-wx-sun);
}

.fc-wx.wx-night {
  color: var(--fc-wx-night);
}

.fc-wx.wx-rain,
.fc-wx.wx-heavyrain {
  color: var(--fc-wx-rain);
}

.fc-wx.wx-snow,
.fc-wx.wx-sleet {
  color: var(--fc-wx-snow);
}

.fc-wx.wx-storm {
  color: var(--fc-wx-storm);
}

.fc-mm {
  color: var(--info-ink);
  font-weight: var(--fw-b);
}

.fc-calm {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.fc-hazard.is-heat {
  background: var(--fc-heat);
}

.fc-hazard.is-frost {
  background: var(--fc-frost);
}

.fc-hazard.is-storm {
  background: var(--fc-storm);
}

.fc-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
}

.fc-tile {
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.fc-tile small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.fc-tile-art {
  width: var(--target);
  height: var(--target);
  flex: none;
  border-radius: var(--r-m);
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.fc-tile-txt {
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
  min-width: 0;
}

.fc-moon {
  width: var(--is);
  height: var(--is);
}

.fc-moon .dark {
  fill: var(--fc-moon-dark);
}

.fc-moon .lit {
  fill: var(--fc-moon-lit);
}

.fc-moon .rim {
  fill: none;
  stroke: var(--fc-moon-rim);
  stroke-width: 1;
}

.fc-tile b {
  font-size: var(--fs-m);
}

.fc-loc {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.fc-ask {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-s);
}

.fc-ask b {
  font-size: var(--fs-l);
  line-height: var(--pl-lh-snug);
}

.fc-ask p,
.fc-ask small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.fc-ask-art {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-xs);
}

.fc-using {
  background: var(--surface);
  box-shadow: none;
}

.fc-attr {
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.fc-search {
  height: var(--fc-search-h);
  margin-bottom: var(--gap-m);
  position: sticky;
  top: 0;
  z-index: 1;
}

.fc-city b {
  font-size: var(--fs-m);
}

.fc-city.on {
  box-shadow: var(--clay), 0 0 0 var(--pl-ring-l) var(--accent);
}

.fr-av {
  width: var(--av);
  height: var(--av);
  flex: none;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--fr-av-bg);
  box-shadow: var(--clay);
}

.fr-offline {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
  background: var(--pop-soft);
}

.fr-me {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.fr-me small,
.fr-squad small,
.fr-code-top small,
.fg-head small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.fr-me b,
.fg-head b {
  font-size: var(--fs-l);
}

.fr-code,
.fr-squad,
.fr-add {
  margin-top: var(--gap-m);
}

.fr-code.is-off {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-m);
}

.fr-code.is-off .grow {
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
}

.fr-code.is-off small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.fr-code-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.fr-code-txt {
  font-size: min(var(--fr-code-fs), var(--fr-code-max));
  white-space: nowrap;
  letter-spacing: var(--fr-code-track);
  font-variant-numeric: tabular-nums;
  user-select: text;
  -webkit-user-select: text;
}

.fr-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  text-align: center;
}

.fr-qr small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.fr-qr-cv {
  width: var(--fr-qr);
  height: var(--fr-qr);
  border-radius: var(--r-m);
  image-rendering: pixelated;
  background: var(--qr-paper);
  box-shadow: var(--clay);
}

.fr-invited {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accent-ink);
  font-weight: var(--fw-x);
  font-size: var(--fs-s);
}

.fr-squad {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 75%);
}

.fr-squad b {
  font-size: var(--fs-xl);
  line-height: var(--pl-lh-title);
}

.fr-squad-art {
  width: var(--fr-squad-art);
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.fr-squad-art i {
  display: inline-block;
  animation: fr-bob var(--fr-bob-t) ease-in-out calc(var(--i) * var(--fr-bob-stagger)) infinite;
}

.fr-add-row {
  display: flex;
  gap: var(--gap-s);
}

.fr-add-row .text {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: var(--fr-code-track);
}

.fr-add small,
.fr-ref small {
  color: var(--ink-soft);
  line-height: var(--pl-line);
}

.fr-ref {
  margin-top: var(--gap-l);
  background: linear-gradient(135deg, var(--pop-soft), var(--surface-2) 70%);
}

.fr-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.fr-main {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.fr-main .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
}

.fr-main b {
  font-size: var(--fs-m);
}

.fr-main small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.fr-streak {
  flex: none;
  padding: var(--pl-gap-2) var(--gap-s);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-weight: var(--fw-x);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
}

.fr-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.fr-streak .i {
  color: var(--pop-ink);
}

.fr-streak.on {
  background: var(--gold);
  color: var(--pl-on-gold);
}

.fr-streak.on .i {
  color: var(--on-gold);
}

.fr-gifts {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-s);
}

.fr-sent {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--good-ink);
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
}

.fr-more {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding-top: var(--gap-s);
  border-top: var(--pl-hair) solid var(--line);
}

.fr-bestie {
  font-size: var(--fs-s);
  color: var(--ink-soft);
  line-height: var(--pl-line);
}

.fr-emoji {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fr-emoji-btn), 1fr));
  gap: var(--sp-2);
}

.fr-emoji button {
  min-height: var(--fr-emoji-btn);
  min-width: var(--fr-emoji-btn);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--elev-1);
  font-size: var(--fr-emoji-fs);
  transition: transform var(--t-fast) var(--ease-bounce);
}

.fr-emoji button:active {
  transform: scale(var(--pl-pop-scale));
}

.fr-block {
  color: var(--danger-ink);
}

.fr-in {
  font-size: var(--fs-s);
}

.fr-req {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
}

.fr-req > .grow {
  grid-column: 2 / -1;
}

.fr-req > .btn:first-of-type {
  grid-column: 1 / 3;
}

.fr-req .btn,
.fr-box .btn {
  flex: none;
}

.fr-box .rewards {
  margin-top: var(--gap-xs);
}

.fr-x {
  color: var(--ink-soft);
  background: transparent;
  box-shadow: none;
}

.fr-safe {
  margin: var(--gap-l) var(--gap-xs) 0;
}

.fr-loading {
  text-align: center;
  color: var(--ink-soft);
  padding: var(--gap-l);
}

.fg-head {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.fg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--rt-buy-min), 1fr));
  gap: var(--gap-s);
}

.fg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-gap-2);
  text-align: center;
}

.fg-card small {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-gap-2);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.fg-acc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pl-gap-2);
  margin-top: var(--gap-xs);
}

.pe-preview {
  display: flex;
  justify-content: center;
  margin: var(--gap-s) 0 var(--gap-m);
}

.pe-hint {
  display: block;
  margin: var(--sp-1) var(--sp-1) 0;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: var(--pl-line);
}

.pe-avs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pe-av), 1fr));
  gap: var(--sp-3) var(--sp-2);
  justify-items: center;
}

.pe-av {
  position: relative;
  width: var(--pe-av);
  height: var(--pe-av);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  transition: transform var(--t-fast) var(--ease-bounce);
}

.pe-av.on {
  box-shadow: inset 0 0 0 var(--pl-ring-l) var(--accent);
}

.pe-check {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.pe-save {
  margin-top: var(--gap-l);
}

.me-card {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%);
}

.me-name {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-xl);
  line-height: var(--pl-lh-title);
}

.me-card small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.me-card .bar {
  flex: none;
  margin: var(--gap-xs) 0 var(--pl-gap-2);
}

.me-edit,
.fr-edit {
  align-self: flex-start;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
}

.fr-edit {
  align-self: center;
}

.me-streaks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);
  margin-top: var(--gap-m);
}

.me-streak small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.me-streak .bar {
  flex: none;
}

.me-streak-top {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.me-streak-top b {
  font-size: var(--fs-l);
}

.me-week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.me-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-gap-2);
}

.me-day i {
  width: min(100%, var(--me-day));
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  display: grid;
  place-items: center;
}

.me-day.on i {
  background: var(--accent);
  color: var(--on-accent);
}

.me-day.today i {
  box-shadow: 0 0 0 var(--pl-ring) var(--gold-2);
}

.me-day small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.me-mini {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.me-mini li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.me-mini li {
  padding: var(--pl-chip-pad);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
}

.me-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--me-stat-min), 1fr));
  gap: var(--gap-s);
}

.me-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-gap-2);
  padding: var(--gap-m) var(--gap-xs);
  border-radius: var(--r-m);
  background: var(--surface-2);
  text-align: center;
}

.me-stat b {
  font-size: var(--fs-l);
}

.me-stat small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: var(--pl-lh-snug);
}

.me-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--me-link-min), 1fr));
  gap: var(--gap-s);
}

.me-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 88px;
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--clay);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  line-height: var(--lh-tight);
  text-align: center;
  transition: transform var(--t-fast) var(--ease-spring);
}

.me-link:active,
.pl-mine:active,
.set-link:active,
.fc-city:active,
.rs-pack:active,
.fr-me:active,
.me-card:active {
  transform: scale(var(--press));
}

.del-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: var(--gap-m);
}

.del-card {
  margin-bottom: var(--gap-m);
}

.del-card b {
  font-size: var(--fs-l);
}

.del-card p {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.del-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface);
}

.del-code small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.del-code b {
  font-size: var(--del-code-fs);
  letter-spacing: var(--fr-code-track);
  user-select: text;
  -webkit-user-select: text;
}

.mg-intro {
  color: var(--ink-soft);
  margin-bottom: var(--gap-m);
}

.mg-card {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.mg-icon {
  width: var(--mg-icon);
  height: var(--mg-icon);
  flex: none;
  border-radius: var(--r-m);
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--clay);
}

.mg-card b {
  font-size: var(--fs-m);
}

@keyframes pl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--pl-float-y)); }
}

@keyframes rt-fall {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--rt-fall-y)) rotate(var(--rt-spin)); }
}

@keyframes rs-z {
  0% { opacity: 0; transform: translate(0, var(--rs-z-from)); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--rs-z-x), var(--rs-z-y)); }
}

@keyframes rs-pulse {
  0%, 100% { box-shadow: var(--clay); }
  50% { box-shadow: var(--clay), var(--rs-glow); }
}

@keyframes fr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--pl-float-y) / 2)); }
}

.pl-mine .grow,
.rs-pack .grow,
.fr-me .grow,
.me-card .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
}

.pl-mine small,
.rs-pack small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--pl-line);
}

.rt-gate {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.rt-gate .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.rt-gate .bar {
  flex: none;
}

.rt-gate small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.rt-gate-ic,
.rs-clock-ic,
.fr-off-ic,
.fc-using-ic {
  width: var(--rs-clock-ic);
  height: var(--rs-clock-ic);
  flex: none;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.rt-gate-ic {
  background: var(--gold-hi);
  color: var(--on-gold);
}

.rs-clock-ic {
  color: var(--accent-ink);
}

.fc-using-ic {
  color: var(--accent-ink);
}

.rt-claim .rt-err,
.rt-claim .btn {
  align-self: stretch;
}

.ill-has {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--danger-ink);
  font-weight: var(--fw-x);
}

.ill-hero .ill-has {
  color: var(--danger-ink);
}

.ill-hero {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.ill-hero.is-weak {
  box-shadow: inset 0 0 0 2px var(--warn);
}

.ill-warn {
  padding: var(--sp-1);
  color: var(--on-gold);
  background: var(--warn);
}

.ill-health {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}

.ill-health-l {
  flex: none;
}

.ill-bar {
  flex: 1 1 96px;
  min-width: 96px;
}

.ill-bar i {
  background: linear-gradient(90deg, var(--health), var(--health-2));
}

.ill-health.lv-low .ill-bar i,
.ill-health.lv-urgent .ill-bar i {
  background: linear-gradient(90deg, var(--gold-hi), var(--health-low));
}

.ill-health.lv-empty .ill-bar i {
  background: linear-gradient(90deg, var(--health-bad), var(--danger-2));
}

.ill-hp {
  font-size: var(--fs-l);
}

.ill-ready {
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ill-ready .i {
  color: var(--accent-ink);
}

.rs-hero .status {
  margin-top: calc(var(--sp-1) * -1);
}

.rs-prog {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.rs-prog b {
  font-size: var(--fs-s);
}

.rs-step.done .rs-ic {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
}

.rs-step + .btn,
.rs-steps + .btn {
  margin-top: var(--sp-3);
}

.fc-hours {
  list-style: none;
  margin: 0 calc(var(--pad-sheet) * -1);
}

.fc-hours:focus-visible {
  outline-offset: -3px;
}

.fc-hour b {
  font-size: var(--fs-m);
}

.fc-now span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.fc-where,
.fc-src {
  gap: var(--sp-1);
}

.fc-src {
  display: inline-flex;
  align-items: center;
}

.fc-off {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.fc-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-tile {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}

.fc-hz-ic {
  position: relative;
  flex: none;
}

.fc-hz-flag {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--warn);
  color: var(--on-gold);
  box-shadow: 0 0 0 2px var(--surface);
}

.fc-hazard {
  flex-wrap: wrap;
  box-shadow: inset 0 0 0 2px var(--warn);
}

.fc-search-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-1);
  background: var(--surface);
}

.fc-search-wrap .i {
  position: absolute;
  left: var(--sp-3);
  top: calc(50% + var(--sp-1) / 2);
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}

.fc-search-wrap .fc-search {
  position: static;
  margin: 0;
  padding-left: calc(var(--sp-3) * 2 + 20px);
}

.fc-city.on {
  box-shadow: var(--clay), inset 0 0 0 var(--pl-ring-l) var(--accent);
}

.fc-city.on .pl-chev {
  color: var(--accent-ink);
}

.fc-city .grow,
.rs-pack .grow {
  display: flex;
  flex-direction: column;
  gap: var(--pl-gap-2);
}

.fc-city small {
  color: var(--ink-soft);
}

.fr-off-ic {
  color: var(--pop-ink);
}

.fr-main {
  min-height: var(--target);
}

.fr-chev {
  flex: none;
  color: var(--ink-soft);
}

.fr-gifts .btn,
.fr-more-btns .btn {
  flex: 1 1 auto;
}

.fr-add-row .btn {
  flex: none;
}

.fr-add .field label,
.fr-ref .field label {
  display: block;
}

.fg-head small {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.fg-card b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
}

.fg-card small .i {
  color: var(--health-2);
}

.me-card .bar {
  width: 100%;
}

.me-streak-top b {
  font-size: var(--fs-l);
}

.me-stat {
  box-shadow: inset 0 0 0 1px var(--line);
}

.mg-card {
  flex-wrap: wrap;
}

.mg-card .btn {
  margin-left: auto;
}

.pl-goal .tag,
.rt-tree-head .tag,
.pl-fact-top .tag {
  flex: none;
}

.text-l .rt-buys,
.text-l .me-streaks,
.text-l .fc-tiles,
.text-l .rs-mini {
  grid-template-columns: 1fr;
}

.text-l .fr-add-row {
  flex-wrap: wrap;
}

.text-l .fr-add-row .btn {
  flex: 1 1 auto;
}

.text-l .rt-cert,
.text-l .cab-row,
.text-l .fr-main,
.text-l .pl-day,
.text-l .ill-step,
.text-l .rs-step {
  flex-wrap: wrap;
}

@media (max-width: 359px) {
  .me-streaks,
  .rs-mini {
    grid-template-columns: 1fr;
  }
  .me-card {
    flex-wrap: wrap;
  }
  .me-card .grow {
    flex-basis: var(--hero-text-min);
  }
  .me-edit {
    margin-left: auto;
  }
}

.status.pl-danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.fc-where {
  flex: 1 1 auto;
  min-width: 0;
}

.fc-now {
  order: 2;
  flex: 1 0 100%;
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}