:root {
  color-scheme: dark;
  --bg: #08090d;
  --surface: #15131b;
  --surface-2: #211b24;
  --stone: #2c2a31;
  --text: #f0e6c8;
  --muted: #9d8f78;
  --line: #4c3d34;
  --accent: #c88b3a;
  --accent-2: #7aa374;
  --blood: #8d3131;
  --magic: #5f5b9c;
  --shadow: rgba(0, 0, 0, 0.48);
  --pixel: 4px;
  --font-ui: Georgia, "Times New Roman", serif;
  --font-display: var(--font-ui);
  --font-body: var(--font-ui);
  --iron-top: #26282b;
  --iron-mid: #111317;
  --iron-low: #07080b;
  --scrollbar-size: 2px;
  --scrollbar-thumb: color-mix(in srgb, var(--time-line, #98815a) 64%, transparent);
  --ui-icon-stroke: 1.7;
  --ui-line-thickness: 1px;
  --telegram-controls-safe-top: 0px;
  --app-safe-top: max(
    env(safe-area-inset-top, 0px),
    var(--tg-safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px),
    var(--telegram-controls-safe-top)
  );
  --app-safe-right: max(
    env(safe-area-inset-right, 0px),
    var(--tg-safe-area-inset-right, 0px),
    var(--tg-content-safe-area-inset-right, 0px)
  );
  --app-safe-bottom: max(
    env(safe-area-inset-bottom, 0px),
    var(--tg-safe-area-inset-bottom, 0px),
    var(--tg-content-safe-area-inset-bottom, 0px)
  );
  --app-safe-left: max(
    env(safe-area-inset-left, 0px),
    var(--tg-safe-area-inset-left, 0px),
    var(--tg-content-safe-area-inset-left, 0px)
  );
  --ui-divider-horizontal:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--time-line, #655846) 34%, transparent) 14%,
      color-mix(in srgb, var(--time-line, #655846) 34%, transparent) 86%,
      transparent
    );
  --ui-divider-vertical:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--time-line, #655846) 34%, transparent) 14%,
      color-mix(in srgb, var(--time-line, #655846) 34%, transparent) 86%,
      transparent
    );
  --ui-active-line:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--time-accent, #d8b46f) 84%, transparent) 22%,
      var(--time-accent, #d8b46f) 50%,
      color-mix(in srgb, var(--time-accent, #d8b46f) 84%, transparent) 78%,
      transparent
    );
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--scrollbar-thumb) 14%,
      var(--scrollbar-thumb) 86%,
      transparent
  );
}

html,
body {
  touch-action: pan-x pan-y;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  background: #030407;
  color: var(--text);
}

.scene-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

button {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
}

.app-shell strong,
.app-shell b {
  font-weight: 400;
}

.app-shell {
  --avatar-sprite: url("./assets/characters/base-character-canvas-v2.png?v=20260817-1");
  --avatar-filter: url("#avatar-light-rainy-morning") brightness(0.8) saturate(0.64) contrast(0.98);
  --full-scene-bg: url("./assets/full-scenes/rainy-morning-environment-birdless.webp?rev=01057ad3298e9e48");
  --world-scene-next: var(--full-scene-bg);
  --world-scene-blend: 0;
  --world-rain-back-opacity: 0.4;
  --world-rain-front-opacity: 0.3;
  --world-cloud-opacity: 0.72;
  --world-fog-back-opacity: 0.58;
  --world-fog-low-opacity: 0.42;
  --world-bird-opacity: 0.78;
  --scene-layer-size: cover;
  --scene-layer-position: center;
  --environment-layer-size: var(--scene-layer-size);
  --environment-layer-position: var(--scene-layer-position);
  --scene-rig-top: 0px;
  --scene-rig-height: 100%;
  --time-screen-solid: #03070d;
  --time-accent: #8aa9b9;
  --time-text: #c8d6dd;
  --time-text-strong: #edf4f6;
  --time-muted: #788f9b;
  --time-line: #526f7d;
  --time-divider: rgba(127, 164, 181, 0.72);
  --time-glow: rgba(83, 139, 165, 0.22);
  --time-panel-deep: rgba(3, 8, 14, 0.97);
  --time-panel-soft: rgba(8, 20, 28, 0.76);
  --time-track: rgba(2, 7, 12, 0.9);
  --time-shadow-top: rgba(2, 7, 12, 0.82);
  --time-shadow-bottom: rgba(2, 6, 11, 0.86);
  --time-coin: #8d9da5;
  --time-coin-edge: #d7e2e7;
  --time-coin-shadow: #3d4c55;
  --accent: #8aa9b9;
  --line: #455f6c;
  --text: #dce7eb;
  --muted: #81939c;
  width: min(100%, 520px);
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: #03070d;
  box-shadow: 0 0 52px rgba(0, 0, 0, 0.86);
}

.app-shell.telegram-fullscreen.telegram-platform-ios {
  --telegram-controls-safe-top: 101px;
  --app-safe-top: max(
    env(safe-area-inset-top, 0px),
    var(--tg-safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px),
    101px
  );
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--full-scene-bg);
  background-size: var(--environment-layer-size);
  background-position: var(--environment-layer-position);
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.world-scene-blend {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--world-scene-next);
  background-size: var(--environment-layer-size);
  background-position: var(--environment-layer-position);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: var(--world-scene-blend);
  transition: opacity 420ms ease;
}

.app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      var(--time-panel-deep, rgba(2, 3, 6, 0.94)) 0%,
      transparent 50%,
      var(--time-panel-deep, rgba(2, 3, 6, 0.94)) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.28),
      transparent 14%,
      transparent 86%,
      rgba(0, 0, 0, 0.28)
    );
}

.pixel-panel {
  image-rendering: pixelated;
  box-shadow:
    0 0 0 var(--pixel) #050509,
    0 0 0 calc(var(--pixel) * 2) var(--time-line, #5d6070),
    10px 10px 0 rgba(0, 0, 0, 0.42);
}

.topbar,
.row-card,
.friend-card {
  display: flex;
  align-items: center;
}

.topbar {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "profile actions"
    "progress progress";
  column-gap: 12px;
  row-gap: 8px;
  z-index: 5;
  min-height: 112px;
  margin-bottom: 0;
  padding:
    max(14px, var(--app-safe-top))
    max(14px, var(--app-safe-right))
    28px
    max(14px, var(--app-safe-left));
  align-items: flex-start;
  position: relative;
  background: transparent;
  border: 0;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 26.5px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, var(--time-divider, rgba(190, 169, 123, 0.62)) 24%, var(--time-divider, rgba(190, 169, 123, 0.62)) 76%, transparent 100%);
  filter: none;
  transform: none;
  pointer-events: none;
  display: none;
}

.profile-strip {
  grid-area: profile;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.72);
}

.player-identity {
  min-height: 44px;
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.player-name {
  color: var(--time-text-strong, #f1dfb5);
  font-size: 23px;
  line-height: 1;
  font-variant-caps: small-caps;
  font-weight: 700;
}

.player-identity:focus-visible .player-name {
  text-shadow: 0 0 8px var(--time-glow, transparent), 0 2px 0 #000;
}

.player-identity:focus-visible,
.level-progress:focus-visible {
  outline: 1px solid var(--time-accent, #c88b3a);
  outline-offset: 3px;
}

.player-rank {
  margin: 4px 0 0;
  color: var(--time-accent, #dfc58e);
  font-size: 14px;
  line-height: 1;
  font-variant-caps: small-caps;
  font-weight: 400;
}

.coin-balance {
  flex: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  color: var(--time-text-strong, #f4dfad);
  font-size: 18px;
  font-weight: 400;
}

#coins {
  transform: none;
}

.currency-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--time-accent, #c9953c);
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 5px var(--time-glow, transparent));
}

.level-progress {
  grid-area: progress;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  color: #bcae90;
  font-size: 13px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.level-copy {
  grid-column: 1;
  grid-row: 1;
  color: var(--time-text, #d8c9a8);
  white-space: nowrap;
}

.level-copy b {
  color: var(--time-text-strong, #fff0c9);
  font-size: 17px;
}

.xp-track {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 9px;
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--time-line, #8f7046) 82%, #050506);
  background: color-mix(in srgb, var(--time-track, rgba(2, 3, 6, 0.82)) 94%, #020204);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.46),
    0 0 5px color-mix(in srgb, var(--time-glow, transparent) 32%, transparent);
}

.xp-track::before,
.xp-track::after {
  content: none;
}

.xp-fill {
  width: 74%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--time-accent, #c89c54) 88%, var(--time-panel-deep, #080708)) 0%,
    var(--time-accent, #c89c54) 46%,
    color-mix(in srgb, var(--time-accent, #c89c54) 72%, #080708) 100%
  );
  box-shadow:
    inset -1px 0 0 var(--time-accent, #c89c54),
    0 0 6px color-mix(in srgb, var(--time-accent, #c89c54) 54%, transparent);
  transition: width 240ms steps(8);
}

.level-progress small {
  grid-column: 3;
  grid-row: 1;
  color: color-mix(in srgb, var(--time-text, #d8c9a8) 78%, transparent);
  font-size: 13px;
  white-space: nowrap;
}

.row-card p,
.friend-card p,
.empty-state {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  letter-spacing: 0;
}

h1,
h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-display);
  font-variant-caps: small-caps;
}

h1 {
  color: var(--time-text-strong, #f1dfb5);
  font-size: 23px;
  line-height: 1;
}

h2 {
  font-size: 19px;
}

.icon-button,
.tab,
.primary-action,
.secondary-action {
  border: 1px solid rgba(190, 169, 123, 0.38);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(48, 48, 47, 0.9) 0, rgba(17, 18, 21, 0.94) 46%, rgba(6, 7, 10, 0.98) 100%);
  border-radius: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 203, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.56),
    0 3px 0 rgba(0, 0, 0, 0.7);
  transition: transform 120ms steps(2), border-color 120ms steps(2), background 120ms steps(2);
  text-shadow: 0 2px 0 #000;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 23px;
}

.hud-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.hud-actions .hud-button {
  padding: 0;
}

.hud-actions .hud-button:last-child {
  width: 44px;
  justify-items: end;
}

.topbar .hud-button {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--time-text, #d8cdb2);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(216, 177, 100, 0.34);
}

.topbar .hud-button:active {
  box-shadow: none;
}

.ui-icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 0 #000);
}

.notification-dot {
  position: absolute;
  top: 1px;
  right: -1px;
  z-index: 2;
  width: 13px;
  min-width: 13px;
  height: 13px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #efd8c0;
  background: #641923;
  border: 1px solid color-mix(in srgb, #b96566 70%, #160609);
  border-radius: 0;
  clip-path: polygon(
    3px 0,
    calc(100% - 3px) 0,
    100% 3px,
    100% calc(100% - 3px),
    calc(100% - 3px) 100%,
    3px 100%,
    0 calc(100% - 3px),
    0 3px
  );
  font: 400 0.5425rem/1 var(--font-body);
  text-shadow: 0 1px 0 #21070a;
  filter: drop-shadow(1px 1px 0 #050507);
  pointer-events: none;
}

.notification-dot::before {
  content: none;
}

.notification-dot::after {
  content: none;
}

.notification-dot > span {
  position: relative;
  z-index: 1;
  display: block;
}

.notification-dot[hidden] {
  display: none;
}

.icon-button:active,
.tab:active,
.primary-action:active,
.secondary-action:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #050507;
}

.hero-room {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: block;
  overflow: hidden;
  position: relative;
  align-items: center;
  z-index: 2;
}

.weather-layer {
  position: absolute;
  top: var(--scene-rig-top);
  right: 0;
  left: 0;
  height: var(--scene-rig-height);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  -webkit-mask-image: url("./assets/effects/arch-weather-mask.png?rev=97e7ba2e338ec2da");
  -webkit-mask-size: var(--environment-layer-size);
  -webkit-mask-position: var(--environment-layer-position);
  -webkit-mask-repeat: no-repeat;
  mask-image: url("./assets/effects/arch-weather-mask.png?rev=97e7ba2e338ec2da");
  mask-size: var(--environment-layer-size);
  mask-position: var(--environment-layer-position);
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

.animated-background .weather-layer {
  opacity: 1;
}

.weather-rain::before,
.weather-rain::after,
.weather-clouds::before,
.weather-clouds::after,
.weather-fog::before,
.weather-fog::after {
  content: "";
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.weather-rain-back {
  z-index: 1;
  opacity: 0;
}

.animated-background .weather-rain-back {
  opacity: var(--world-rain-back-opacity, 0.4);
}

.weather-rain-front {
  z-index: 1;
  opacity: 0;
}

.animated-background .weather-rain-front {
  opacity: var(--world-rain-front-opacity, 0.3);
}

.weather-rain::before,
.weather-rain::after {
  inset: -28% -22%;
  background-repeat: repeat;
  image-rendering: pixelated;
  transform: translate3d(4%, -18%, 0);
}

.weather-rain-back::before,
.weather-rain-back::after {
  background-image: url("./assets/effects/rain-back.png?rev=a67e3ae835d5edb4");
  background-size: 128px 256px;
}

.weather-rain-back::before {
  animation: rainy-morning-fall 1180ms linear infinite;
}

.weather-rain-back::after {
  background-position: 61px 119px;
  opacity: 0.62;
  animation: rainy-morning-fall 1740ms linear infinite;
}

.weather-rain-front::before,
.weather-rain-front::after {
  background-image: url("./assets/effects/rain-front.png?rev=9cf136769b65a148");
  background-size: 192px 320px;
}

.weather-rain-front::before {
  animation: rainy-morning-fall 920ms linear infinite;
}

.weather-rain-front::after {
  background-position: 83px 147px;
  opacity: 0.55;
  animation: rainy-morning-fall 1360ms linear infinite;
}

.weather-clouds {
  z-index: 1;
  opacity: 0;
}

.animated-background .weather-clouds {
  opacity: var(--world-cloud-opacity, 0.72);
}

.weather-clouds::before,
.weather-clouds::after {
  left: -38%;
  width: 176%;
  border-radius: 50%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.weather-clouds::before {
  top: 15.5%;
  height: 23%;
  background:
    radial-gradient(ellipse 22% 82% at 7% 51%, rgba(199, 215, 222, 0.52) 0 17%, rgba(112, 140, 153, 0.3) 42%, transparent 78%),
    radial-gradient(ellipse 25% 91% at 31% 48%, rgba(43, 66, 78, 0.54) 0 18%, rgba(98, 126, 139, 0.25) 48%, transparent 80%),
    radial-gradient(ellipse 21% 76% at 52% 55%, rgba(202, 216, 222, 0.47) 0 16%, rgba(111, 139, 152, 0.25) 45%, transparent 79%),
    radial-gradient(ellipse 28% 94% at 73% 46%, rgba(39, 61, 73, 0.57) 0 20%, rgba(94, 122, 135, 0.24) 50%, transparent 81%),
    radial-gradient(ellipse 20% 72% at 94% 54%, rgba(188, 207, 214, 0.46) 0 17%, rgba(85, 113, 127, 0.25) 46%, transparent 78%);
  animation: rainy-cloud-drift-near 10s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

.weather-clouds::after {
  top: 22%;
  height: 16%;
  opacity: 0.78;
  background:
    radial-gradient(ellipse 23% 88% at 11% 52%, rgba(48, 72, 85, 0.47) 0 18%, rgba(108, 136, 149, 0.2) 47%, transparent 81%),
    radial-gradient(ellipse 20% 73% at 38% 45%, rgba(177, 197, 205, 0.37) 0 15%, rgba(83, 110, 123, 0.22) 45%, transparent 78%),
    radial-gradient(ellipse 27% 92% at 66% 54%, rgba(43, 66, 79, 0.5) 0 20%, rgba(107, 135, 148, 0.2) 49%, transparent 82%),
    radial-gradient(ellipse 19% 76% at 92% 47%, rgba(169, 191, 200, 0.34) 0 16%, rgba(75, 101, 115, 0.2) 46%, transparent 79%);
  animation: rainy-cloud-drift-far 15s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

.weather-fog-back {
  z-index: 1;
  opacity: 0;
}

.animated-background .weather-fog-back {
  opacity: var(--world-fog-back-opacity, 0.58);
}

.weather-fog-low {
  z-index: 1;
  opacity: 0;
}

.animated-background .weather-fog-low {
  opacity: var(--world-fog-low-opacity, 0.42);
}

.weather-fog::before,
.weather-fog::after {
  top: 18%;
  bottom: 18%;
  left: -39%;
  width: 178%;
  background:
    radial-gradient(ellipse 21% 31% at 6% 55%, rgba(220, 232, 236, 0.62) 0 13%, rgba(161, 188, 199, 0.34) 34%, transparent 76%),
    radial-gradient(ellipse 18% 25% at 27% 43%, rgba(180, 205, 215, 0.5) 0 14%, rgba(115, 151, 166, 0.25) 37%, transparent 74%),
    radial-gradient(ellipse 24% 34% at 49% 61%, rgba(226, 235, 239, 0.59) 0 12%, rgba(159, 187, 198, 0.3) 35%, transparent 77%),
    radial-gradient(ellipse 20% 28% at 72% 46%, rgba(176, 202, 212, 0.52) 0 14%, rgba(108, 145, 160, 0.24) 38%, transparent 75%),
    radial-gradient(ellipse 23% 32% at 96% 58%, rgba(222, 233, 237, 0.6) 0 13%, rgba(151, 180, 192, 0.3) 36%, transparent 77%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.weather-fog::after {
  top: 34%;
  bottom: 11%;
  opacity: 0.66;
}

.weather-fog-low::before,
.weather-fog-low::after {
  top: 45%;
  bottom: 7%;
}

.weather-fog-back::before {
  animation: rainy-fog-drift-right 7s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

.weather-fog-back::after {
  animation: rainy-fog-drift-left 10s cubic-bezier(0.42, 0, 0.58, 1) -5s infinite alternate;
}

.weather-fog-low::before {
  animation: rainy-fog-drift-left 8s cubic-bezier(0.42, 0, 0.58, 1) -3s infinite alternate;
}

.weather-fog-low::after {
  animation: rainy-fog-drift-right 11s cubic-bezier(0.42, 0, 0.58, 1) -7s infinite alternate;
}

.weather-birds {
  z-index: 1;
  opacity: 0;
}

.animated-background .weather-birds {
  opacity: var(--world-bird-opacity, 0.78);
}

.weather-bird {
  position: absolute;
  top: var(--bird-top);
  width: var(--bird-size);
  color: rgba(8, 15, 22, 0.96);
  opacity: var(--bird-opacity);
  pointer-events: none;
  will-change: left, right, transform;
}

.weather-bird svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(153, 178, 190, 0.12));
  transform-origin: 50% 58%;
  animation: rainy-bird-body 1.7s ease-in-out infinite alternate;
}

.bird-wing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 12px 7px;
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.42, 0, 0.24, 1);
  animation-iteration-count: infinite;
}

.bird-wing-left {
  animation-name: rainy-bird-wing-left;
}

.bird-wing-right {
  animation-name: rainy-bird-wing-right;
}

.bird-body {
  fill: currentColor;
  stroke: none;
}

.weather-bird:nth-child(3n + 2) .bird-wing {
  animation-duration: 910ms;
  animation-delay: -370ms;
}

.weather-bird:nth-child(3n + 3) .bird-wing {
  animation-duration: 640ms;
  animation-delay: -190ms;
}

.weather-bird:nth-child(even) svg {
  animation-delay: -820ms;
}

.arch-drips {
  position: absolute;
  top: var(--scene-rig-top);
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: var(--scene-rig-height);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.animated-background .arch-drips {
  opacity: var(--world-drip-opacity, 0.86);
}

.arch-drip-bead,
.arch-drop,
.arch-drip-impact {
  transform-box: fill-box;
  transform-origin: center top;
  will-change: opacity, transform;
}

.arch-drip-bead {
  fill: rgba(139, 169, 181, 0.7);
  filter: drop-shadow(0 0 0.8px rgba(169, 198, 209, 0.26));
  animation: rainy-arch-bead var(--drip-duration) ease-in-out var(--drip-delay) infinite;
  animation-play-state: var(--world-drip-play-state, running);
}

.arch-drop {
  fill: url("#archDropPaint");
  stroke: rgba(191, 216, 225, 0.2);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  animation: rainy-arch-drop var(--drip-duration) linear var(--drip-delay) infinite;
  animation-play-state: var(--world-drip-play-state, running);
}

.arch-drip-impact {
  fill: none;
  stroke: rgba(130, 160, 173, 0.5);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  animation: rainy-arch-impact var(--drip-duration) linear var(--drip-delay) infinite;
  animation-play-state: var(--world-drip-play-state, running);
}

.bird-flight-right {
  left: -70px;
  animation: rainy-bird-flight-right var(--bird-duration) linear var(--bird-delay) infinite;
}

.bird-flight-left {
  right: -70px;
  animation: rainy-bird-flight-left var(--bird-duration) linear var(--bird-delay) infinite;
}

.app-shell.main-live-animations-paused
  > :is(.weather-rain, .weather-clouds, .weather-fog)::before,
.app-shell.main-live-animations-paused
  > :is(.weather-rain, .weather-clouds, .weather-fog)::after,
.app-shell.main-live-animations-paused > .weather-birds .weather-bird,
.app-shell.main-live-animations-paused > .weather-birds .weather-bird svg,
.app-shell.main-live-animations-paused > .weather-birds .bird-wing,
.app-shell.main-live-animations-paused
  > .arch-drips
  :is(.arch-drip-bead, .arch-drop, .arch-drip-impact),
.friend-visit-scene.friend-live-animations-paused
  :is(.weather-rain, .weather-clouds, .weather-fog)::before,
.friend-visit-scene.friend-live-animations-paused
  :is(.weather-rain, .weather-clouds, .weather-fog)::after,
.friend-visit-scene.friend-live-animations-paused .weather-bird,
.friend-visit-scene.friend-live-animations-paused .weather-bird svg,
.friend-visit-scene.friend-live-animations-paused .bird-wing {
  animation-play-state: paused !important;
}

@keyframes rainy-bird-flight-right {
  0% {
    left: -70px;
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  38% {
    left: 38%;
    transform: translate3d(0, -8px, 0) rotate(2deg);
  }
  72% {
    left: 72%;
    transform: translate3d(0, 7px, 0) rotate(-1deg);
  }
  100% {
    left: calc(100% + 70px);
    transform: translate3d(0, var(--bird-rise), 0) rotate(3deg);
  }
}

@keyframes rainy-bird-flight-left {
  0% {
    right: -70px;
    transform: translate3d(0, 0, 0) rotate(3deg) scaleX(-1);
  }
  38% {
    right: 38%;
    transform: translate3d(0, -8px, 0) rotate(-2deg) scaleX(-1);
  }
  72% {
    right: 72%;
    transform: translate3d(0, 7px, 0) rotate(1deg) scaleX(-1);
  }
  100% {
    right: calc(100% + 70px);
    transform: translate3d(0, var(--bird-rise), 0) rotate(-3deg) scaleX(-1);
  }
}

@keyframes rainy-bird-body {
  from {
    transform: translateY(-0.35px) rotate(-1.2deg);
  }
  to {
    transform: translateY(0.5px) rotate(1deg);
  }
}

@keyframes rainy-bird-wing-left {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  18% {
    transform: rotate(-24deg);
  }
  42% {
    transform: rotate(13deg);
  }
  67% {
    transform: rotate(-2deg);
  }
}

@keyframes rainy-bird-wing-right {
  0%,
  100% {
    transform: rotate(5deg);
  }
  18% {
    transform: rotate(24deg);
  }
  42% {
    transform: rotate(-13deg);
  }
  67% {
    transform: rotate(2deg);
  }
}

@keyframes rainy-arch-bead {
  0%,
  52%,
  100% {
    opacity: 0.08;
    transform: translateY(-0.5px) scale(0.18);
  }
  59% {
    opacity: 0.42;
    transform: translateY(0) scale(0.48, 0.64);
  }
  65% {
    opacity: 0.74;
    transform: translateY(0.5px) scale(0.78, 1.08);
  }
  68% {
    opacity: 0.68;
    transform: translateY(1.5px) scale(0.5, 1.36);
  }
  70% {
    opacity: 0;
    transform: translateY(2.4px) scale(0.12, 0.26);
  }
}

@keyframes rainy-arch-drop {
  0%,
  67% {
    opacity: 0;
    transform: translate3d(0, -1px, 0) scale(0.28, 0.24);
  }
  70% {
    opacity: 0.78;
    transform: translate3d(0, 1px, 0) scale(0.72, 1);
  }
  76% {
    opacity: 0.78;
    transform: translate3d(var(--drip-drift-quarter), 26px, 0) scale(0.78, 1.15);
  }
  82% {
    opacity: 0.78;
    transform: translate3d(var(--drip-drift-half), 105px, 0) scale(0.72, 1.28);
  }
  88% {
    opacity: 0.76;
    transform: translate3d(var(--drip-drift-half), 245px, 0) scale(0.64, 1.42);
  }
  94% {
    opacity: 0.74;
    transform: translate3d(var(--drip-drift), 430px, 0) scale(0.56, 1.54);
  }
  98% {
    opacity: 0.72;
    transform: translate3d(var(--drip-drift), var(--drip-fall), 0) scale(0.48, 1.62);
  }
  98.5%,
  100% {
    opacity: 0;
    transform: translate3d(var(--drip-drift), var(--drip-fall), 0) scale(0.28, 0.32);
  }
}

@keyframes rainy-arch-impact {
  0%,
  97.5% {
    opacity: 0;
    transform: translate3d(var(--drip-drift), var(--drip-fall), 0) scale(0.18, 0.4);
  }
  98.5% {
    opacity: 0.46;
    transform: translate3d(var(--drip-drift), var(--drip-fall), 0) scale(0.72, 0.76);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drip-drift), var(--drip-fall), 0) scale(1.35, 0.9);
  }
}

@keyframes rainy-cloud-drift-near {
  0% {
    opacity: 0.62;
    transform: translate3d(-14%, -1%, 0) scaleY(0.96);
  }
  50% {
    opacity: 0.88;
    transform: translate3d(0, 0.8%, 0) scaleY(1.03);
  }
  100% {
    opacity: 0.66;
    transform: translate3d(14%, -0.5%, 0) scaleY(0.98);
  }
}

@keyframes rainy-cloud-drift-far {
  0% {
    opacity: 0.48;
    transform: translate3d(12%, 1%, 0) scaleY(1.03);
  }
  50% {
    opacity: 0.72;
    transform: translate3d(0, -0.8%, 0) scaleY(0.97);
  }
  100% {
    opacity: 0.52;
    transform: translate3d(-12%, 0.5%, 0) scaleY(1.01);
  }
}

@keyframes rainy-fog-drift-right {
  0% {
    opacity: 0.5;
    transform: translate3d(-20%, -1.2%, 0) scaleY(0.96);
  }
  52% {
    opacity: 0.9;
    transform: translate3d(-3%, 0.8%, 0) scaleY(1.04);
  }
  100% {
    opacity: 0.56;
    transform: translate3d(16%, -0.4%, 0) scaleY(0.99);
  }
}

@keyframes rainy-fog-drift-left {
  0% {
    opacity: 0.48;
    transform: translate3d(18%, 1.2%, 0) scaleY(1.04);
  }
  48% {
    opacity: 0.86;
    transform: translate3d(2%, -0.8%, 0) scaleY(0.97);
  }
  100% {
    opacity: 0.54;
    transform: translate3d(-17%, 0.4%, 0) scaleY(1.01);
  }
}

@keyframes rainy-morning-fall {
  from {
    transform: translate3d(4%, -18%, 0);
  }
  to {
    transform: translate3d(-4%, 18%, 0);
  }
}

.avatar-ground-shadow {
  position: absolute;
  top: var(--scene-rig-top);
  right: 0;
  left: 0;
  z-index: 2;
  height: var(--scene-rig-height);
  pointer-events: none;
}

.avatar-cast-shadow {
  position: absolute;
  top: var(--scene-rig-top);
  right: 0;
  left: 0;
  z-index: 1;
  height: var(--scene-rig-height);
  pointer-events: none;
}

.avatar-cast-shadow,
.friend-scene-cast-shadow {
  background-image: var(--avatar-sprite);
  background-size: var(--scene-layer-size);
  background-position: var(--scene-layer-position);
  background-repeat: no-repeat;
  transform-origin: 50% 67.42%;
  transform: rotate(5.25deg) scaleY(-0.38) rotate(-5.25deg);
  filter: brightness(0) opacity(0.54) blur(0.9px);
  mask-image: linear-gradient(
    to bottom,
    transparent 33%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.58) 48%,
    rgba(0, 0, 0, 0.82) 58%,
    #000 65%
  );
  image-rendering: pixelated;
}

.avatar-ground-shadow::before,
.avatar-ground-shadow::after,
.friend-scene-ground-shadow::before,
.friend-scene-ground-shadow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 1, 3, 0.82) 0 20%,
    rgba(0, 4, 7, 0.5) 42%,
    rgba(5, 13, 17, 0.18) 68%,
    transparent 100%
  );
  filter: blur(0.7px);
}

.avatar-ground-shadow::before,
.friend-scene-ground-shadow::before {
  top: 65.92%;
  left: 45.51%;
  width: 6%;
  height: 1.72%;
  transform: translate(-50%, 0) rotate(11deg);
}

.avatar-ground-shadow::after,
.friend-scene-ground-shadow::after {
  top: 66.58%;
  left: 55.18%;
  width: 5.1%;
  height: 1.72%;
  transform: translate(-50%, 0) rotate(-8deg);
}

.avatar-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--avatar-sprite);
  background-size: var(--scene-layer-size);
  background-position: var(--scene-layer-position);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: var(--avatar-filter);
  transform: translateZ(0);
}

.attribute-rig {
  position: absolute;
  top: var(--scene-rig-top);
  right: 0;
  left: 0;
  height: var(--scene-rig-height);
  z-index: 4;
  pointer-events: none;
  filter: var(--avatar-filter);
}

.equipment-layers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.equipment-layer {
  position: absolute;
  image-rendering: pixelated;
}

.interventions-view,
.history-view {
  grid-row: 2;
  grid-column: 1;
  z-index: 4;
  min-height: 0;
  position: relative;
  display: grid;
  overflow: hidden;
  color: var(--time-text, #d8ccb0);
  background:
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--time-panel-deep, #090909) 70%, transparent) 5%, color-mix(in srgb, var(--time-panel-deep, #090909) 94%, transparent) 15%, color-mix(in srgb, var(--time-panel-deep, #090909) 94%, transparent) 85%, color-mix(in srgb, var(--time-panel-deep, #090909) 70%, transparent) 95%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--time-panel-deep, #090909) 72%, transparent), color-mix(in srgb, var(--time-panel-deep, #090909) 92%, transparent));
  box-shadow: inset 24px 0 26px -28px #000, inset -24px 0 26px -28px #000;
}

.interventions-view {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.history-view {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.interventions-view[hidden],
.history-view[hidden],
.checkin-layer[hidden] {
  display: none;
}

.interventions-view::before,
.interventions-view::after,
.history-view::before,
.history-view::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 3;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--time-divider, rgba(208, 184, 124, 0.72)) 22%, var(--time-divider, rgba(208, 184, 124, 0.72)) 78%, transparent);
}

.interventions-view::before {
  top: 0;
}

.interventions-view::after,
.history-view::after {
  bottom: 0;
}

.history-view::before {
  top: 0;
}

.interventions-header {
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  position: relative;
  z-index: 1;
}

.interventions-back,
.checkin-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--time-text, #d8ccb0);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.interventions-back svg,
.checkin-close svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 0 #000);
}

.interventions-back:active,
.checkin-close:active {
  transform: translateY(1px);
}

.interventions-back:focus-visible,
.checkin-close:focus-visible {
  outline: 0;
  color: var(--time-accent, #d8c996);
}

.interventions-heading {
  width: min(calc(100% - 150px), 290px);
  min-width: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.interventions-heading h1 {
  margin: 0;
  color: var(--time-text-strong, #fff0c7);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 2px 0 #000, 0 0 9px var(--time-glow, transparent);
}

.interventions-heading time {
  display: block;
  margin-top: 3px;
  color: var(--time-muted, #a6977b);
  font-size: 14px;
  line-height: 1.2;
}

.daily-tally {
  min-width: 50px;
  display: grid;
  justify-items: end;
  line-height: 1;
}

.daily-tally strong {
  color: var(--time-text-strong, #fff0c7);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
}

.daily-tally span {
  margin-top: 4px;
  color: var(--time-muted, #a6977b);
  font-size: 13px;
  font-variant-caps: small-caps;
}

.participant-preview-tabs {
  min-height: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 16px 7px;
  position: relative;
  z-index: 2;
  border-style: solid;
  border-width: 1px 0;
  border-image-source: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--time-line, #98815a) 52%, transparent) 16%,
    color-mix(in srgb, var(--time-line, #98815a) 52%, transparent) 84%,
    transparent
  );
  border-image-slice: 1;
  background: color-mix(in srgb, var(--time-panel-deep, #090909) 50%, transparent);
}

.participant-preview-tabs button {
  min-width: 0;
  padding: 0;
  position: relative;
  color: var(--time-muted, #a6977b);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
}

.participant-preview-tabs button + button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    transparent,
    color-mix(in srgb, var(--time-line, #98815a) 52%, transparent),
    transparent
  );
}

.participant-preview-tabs button.active {
  color: var(--time-text-strong, #fff0c7);
  background: color-mix(in srgb, var(--time-accent, #c88b3a) 10%, transparent);
  box-shadow: inset 0 -1px 0 var(--time-accent, #c88b3a);
}

.interventions-summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 14px 4px;
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--time-accent, #c88b3a) 9%, transparent) 18%, color-mix(in srgb, var(--time-panel-deep, #090909) 58%, transparent) 50%, color-mix(in srgb, var(--time-accent, #c88b3a) 9%, transparent) 82%, transparent);
  border-style: solid;
  border-width: 1px 0;
  border-image-source: linear-gradient(90deg, transparent, color-mix(in srgb, var(--time-divider, #9c8458) 78%, transparent) 23%, color-mix(in srgb, var(--time-divider, #9c8458) 78%, transparent) 77%, transparent);
  border-image-slice: 1;
}

.interventions-summary > div {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  position: relative;
}

.interventions-summary > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--time-line, #98815a) 62%, transparent), transparent);
}

.interventions-summary span {
  color: var(--time-muted, #a6977b);
  font-size: 13px;
  font-variant-caps: small-caps;
}

.interventions-summary strong {
  margin-top: 3px;
  color: var(--time-text-strong, #fff0c7);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
}

.interventions-summary .summary-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: var(--time-text-strong, #fff0c7);
  font-variant-caps: normal;
}

.interventions-summary .summary-points strong {
  margin-top: 0;
}

.summary-currency-icon {
  width: 12px;
  height: 12px;
  color: var(--time-accent, #c9953c);
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px var(--time-glow, transparent));
}

.interventions-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 16px 18px;
  position: relative;
  z-index: 1;
}

.rule-group {
  margin-top: 12px;
}

.rule-group:first-child {
  margin-top: 5px;
}

.rule-group-title {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline: 3px;
}

.rule-group-title h2 {
  margin: 0;
  flex: 0 0 auto;
  color: var(--time-text, #d8ccb0);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  font-variant-caps: small-caps;
}

.rule-group-title span {
  flex: 0 0 auto;
  color: var(--time-muted, #a6977b);
  font-size: 13px;
}

.rule-list {
  display: grid;
}

.intervention-row {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 9px;
  padding: 9px 3px;
  text-align: left;
  color: var(--time-text, #d8ccb0);
  border: 0;
  border-bottom: 1px solid transparent;
  border-image-source: linear-gradient(90deg, transparent, color-mix(in srgb, var(--time-line, #98815a) 48%, transparent) 12%, color-mix(in srgb, var(--time-line, #98815a) 48%, transparent) 88%, transparent);
  border-image-slice: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--time-panel-deep, #090909) 42%, transparent) 10%, color-mix(in srgb, var(--time-panel-deep, #090909) 42%, transparent) 90%, transparent);
  box-shadow: none;
}

.intervention-row.primary-project {
  min-height: 92px;
  margin: 7px 0 11px;
  padding: 12px 10px;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--time-accent, #c88b3a) 68%, #121015);
  border-image: none;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--time-accent, #c88b3a) 12%, transparent),
      transparent 34%,
      color-mix(in srgb, var(--time-accent, #c88b3a) 7%, transparent)
    ),
    color-mix(in srgb, var(--time-panel-deep, #090909) 86%, #050507);
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--time-line, #98815a) 12%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--time-glow, transparent) 32%, transparent),
    0 0 9px rgba(0, 0, 0, 0.52);
}

.intervention-row.primary-project::before,
.intervention-row.primary-project::after {
  content: "";
  width: 11px;
  height: 11px;
  position: absolute;
  pointer-events: none;
}

.intervention-row.primary-project::before {
  left: 4px;
  top: 4px;
  border-left: 1px solid var(--time-accent, #c88b3a);
  border-top: 1px solid var(--time-accent, #c88b3a);
}

.intervention-row.primary-project::after {
  right: 4px;
  bottom: 4px;
  border-right: 1px solid var(--time-accent, #c88b3a);
  border-bottom: 1px solid var(--time-accent, #c88b3a);
}

.primary-project-label {
  display: block;
  margin-bottom: 3px;
  color: var(--time-accent, #c88b3a);
  font-size: 11px;
  font-variant-caps: small-caps;
  line-height: 1;
}

.intervention-row:active {
  transform: none;
}

.intervention-row[data-status="success"] {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--time-accent, #c88b3a) 10%, transparent) 12%, color-mix(in srgb, var(--time-panel-deep, #090909) 48%, transparent) 88%, transparent);
}

.intervention-row[data-status="success"] .rule-rune,
.intervention-row[data-status="success"] .rule-copy,
.intervention-row[data-status="success"] .rule-row-meta,
.intervention-row[data-status="day_off"] .rule-rune,
.intervention-row[data-status="day_off"] .rule-copy,
.intervention-row[data-status="day_off"] .rule-row-meta,
.intervention-row[data-status="exception"] .rule-rune,
.intervention-row[data-status="exception"] .rule-copy,
.intervention-row[data-status="exception"] .rule-row-meta,
.intervention-row[data-status="violation"] .rule-rune,
.intervention-row[data-status="violation"] .rule-copy,
.intervention-row[data-status="violation"] .rule-row-meta {
  opacity: 0.52;
  filter: saturate(0.55);
}

.intervention-row[data-status]:not([data-status="unmarked"]) .rule-copy h3 {
  color: var(--time-muted, #a6977b);
}

.intervention-row[data-status="violation"] {
  background: linear-gradient(90deg, transparent, rgba(92, 21, 28, 0.3) 14%, color-mix(in srgb, var(--time-panel-deep, #090909) 50%, transparent) 88%, transparent);
}

.intervention-row.voluntary {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--time-muted, #a6977b) 7%, transparent) 14%, color-mix(in srgb, var(--time-panel-deep, #090909) 46%, transparent) 88%, transparent);
}

.intervention-row.voluntary .rule-reward,
.intervention-row.voluntary .rule-copy p {
  color: color-mix(in srgb, var(--time-muted, #a6977b) 78%, transparent);
}

.intervention-row.plan-complete {
  cursor: pointer;
}

.rule-extra-count {
  color: var(--time-accent, #c88b3a);
  font-size: 11px;
  white-space: nowrap;
}

.rule-rune {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--time-accent, #d8c996);
  border: 1px solid color-mix(in srgb, var(--time-line, #98815a) 60%, transparent);
  background: color-mix(in srgb, var(--time-panel-deep, #090909) 72%, transparent);
  box-shadow: inset 0 0 10px var(--time-glow, transparent), 0 1px 0 #000;
  transform: rotate(45deg);
  font-family: var(--font-display);
  font-size: 15px;
}