:root {
  --bg-deep: #080d11;
  --bg-base: #0c1318;
  --surface: #111b21;
  --surface-strong: #16232a;
  --surface-soft: #18272e;
  --line: #2b3d46;
  --line-strong: #3a515d;
  --text: #f1f8fa;
  --muted: #91a9b3;
  --faint: #647b85;
  --cyan: #82e4f4;
  --cyan-strong: #36bdd7;
  --mint: #78dab4;
  --coral: #ee9098;
  --pink: #dca7da;
  --blue: #91b9ed;
  --warm: #e9c49e;
  --danger: #ef7e87;
  --resource-negative: #f08b91;
  --resource-negative-glow: rgb(219 95 101 / 30%);
  --planning: #e8c45f;
  --forecast-anchor: var(--blue);
  --today-cell: #202935;
  --event-color-default-rgb: 145 185 205;
  --event-color-gacha-rgb: 96 220 142;
  --event-color-story-rgb: 220 167 218;
  --event-color-training-rgb: 176 184 190;
  --event-color-factor-rgb: 184 128 224;
  --event-color-champions-rgb: 240 194 76;
  --event-color-heroes-rgb: 174 139 55;
  --event-color-legend-rgb: 100 108 114;
  --event-color-best-team-rgb: 92 168 232;
  --radius: 8px;
  --page-top-row-height: 52px;
  --page-top-control-height: 34px;
  --ui-scale: 1;

  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-deep);
  font-synthesis: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  background: var(--bg-deep);
}

body {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

html.is-app-initializing .product-shell,
html.is-app-initializing .setup-layer {
  visibility: hidden;
}

html.is-setup-open,
body.is-setup-open {
  width: 100%;
  min-width: 0;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.is-setup-open .app-frame {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

button,
input {
  font: inherit;
  letter-spacing: 0;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

button:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.uma-thumbnail-frame {
  display: grid;
  aspect-ratio: 32 / 35;
  overflow: hidden;
  place-items: center;
}

.uma-thumbnail-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.uma-thumbnail-frame.is-calendar-crop {
  aspect-ratio: 1;
}

.app-frame {
  container-name: app-frame;
  container-type: size;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgb(130 228 244 / 4%), transparent 34%),
    linear-gradient(315deg, rgb(120 218 180 / 3%), transparent 26%),
    var(--bg-deep);
}

.app-frame:not([data-ui-scale="100"]) {
  zoom: var(--ui-scale);
}

.product-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  transition:
    filter 300ms ease,
    transform 300ms ease,
    opacity 300ms ease;
}

.app-frame.is-setup-open .product-shell {
  filter: blur(1.5px) saturate(88%);
  opacity: 0.84;
  transform: scale(0.996);
  pointer-events: none;
  user-select: none;
}

.resource-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 3.3fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 78px;
  padding: 10px 16px;
  background: rgb(10 16 20 / 92%);
  border-bottom: 1px solid #263840;
  box-shadow: 0 10px 34px rgb(0 0 0 / 16%);
  backdrop-filter: blur(16px) saturate(122%);
}

.product-identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.product-identity > span:last-child {
  display: grid;
  min-width: 0;
}

.product-identity strong {
  font-size: 0.92rem;
}

.product-identity small {
  color: var(--muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.66rem;
}

.product-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
}

.product-mark img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.resource-summary {
  display: grid;
  grid-template-columns:
    minmax(104px, 1.12fr)
    minmax(98px, 1.08fr)
    minmax(82px, 0.9fr)
    minmax(82px, 0.9fr)
    minmax(132px, 1.18fr)
    minmax(132px, 1.18fr);
  min-width: 0;
  padding: 0;
  margin: 0;
}

.resource-summary-group {
  display: contents;
}

.forecast-anchor-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: max-content;
  text-align: center;
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.forecast-anchor-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.forecast-anchor-label svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--forecast-anchor);
}

.forecast-anchor-status time {
  display: inline-flex;
  min-width: 10ch;
  justify-content: center;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.forecast-anchor-date-flow {
  display: inline-grid;
  grid-template-columns: 4ch 1ch 2ch 1ch 2ch;
  width: 10ch;
  align-items: center;
}

.forecast-anchor-date-flow number-flow {
  min-width: 0;
  text-align: right;

  --number-flow-mask-height: 0.18em;
}

.forecast-anchor-date-separator::before {
  content: "/";
}

.summary-number {
  display: inline-block;
  min-width: 4ch;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  text-align: center;

  --number-flow-mask-height: 0.18em;
}

.summary-number.is-gems {
  min-width: 7ch;
}

.summary-number.is-small {
  min-width: 2ch;
}

.summary-number.is-negative {
  color: var(--resource-negative);
  text-shadow: 0 0 8px var(--resource-negative-glow);
}

.resource-editor {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.resource-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.resource-page-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  height: var(--page-top-row-height);
  min-height: var(--page-top-row-height);
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}

.resource-page > [data-resource-tab-panel] {
  contain: paint;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.resource-page > [data-resource-tab-panel]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.resource-page-tabs {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px;
  align-items: center;
  height: var(--page-top-control-height);
  padding: 0 3px;
}

.resource-page-tabs button {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: var(--page-top-control-height);
  min-height: var(--page-top-control-height);
  padding: 5px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.resource-page-tabs button::after {
  position: absolute;
  right: 10px;
  bottom: -4px;
  left: 10px;
  height: 2px;
  content: "";
  background: var(--cyan);
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.resource-page-tabs button:hover {
  color: #c5d8de;
}

.resource-page-tabs button.is-active {
  color: var(--text);
}

.resource-page-tabs button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.resource-page-tabs svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}

.resource-calculation-state {
  min-width: 5em;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.resource-calculation-state[data-state="pending"] {
  color: var(--cyan);
}

.resource-calculation-state[data-state="error"] {
  color: #f3a8a8;
}

.resource-save-state {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 22px;
  min-width: 4em;
  color: #8ed8c4;
  font-size: 0.78rem;
  pointer-events: none;
  text-align: right;
}

.resource-save-state.is-error {
  color: #f3a8a8;
}

.resource-editor-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1fr) minmax(420px, 1.7fr);
}

.resource-editor-group {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 18px 22px 22px;
  border: 0;
  border-right: 1px solid var(--line);
}

.resource-editor-group:last-child {
  border-right: 0;
}

.resource-editor-group.is-crystals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resource-editor-group-heading {
  display: inline-flex;
  grid-column: 1 / -1;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.resource-editor-group-heading svg {
  width: 15px;
  height: 15px;
}

.resource-entry-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.resource-entry-field > span {
  color: #abc0c8;
  font-size: 0.76rem;
}

.resource-entry-field input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 7px 10px;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: rgb(8 14 18 / 72%);
  border: 1px solid #344852;
  border-radius: 6px;
}

.resource-entry-field input:hover {
  border-color: #49616c;
}

.resource-entry-field input:focus {
  background: #0b1419;
  border-color: var(--cyan-strong);
  box-shadow: inset 0 0 0 1px rgb(130 228 244 / 10%);
}

.resource-control-band {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}

.resource-band-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.resource-band-heading h2 {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: #cad9de;
  font-size: 0.86rem;
  font-weight: 600;
}

.resource-band-heading h2 svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}

.training-pass-heading-main {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.training-pass-band {
  --training-pass-accent: var(--cyan);
  --training-pass-accent-rgb: 130 228 244;
}

.training-pass-band[data-cycle-state="planning"] {
  --training-pass-accent: var(--planning);
  --training-pass-accent-rgb: 232 196 95;
}

.training-pass-band[data-cycle-state="history"] {
  --training-pass-accent: #7f939b;
  --training-pass-accent-rgb: 127 147 155;
}

.training-pass-band[data-cycle-state="incomplete"] {
  --training-pass-accent: var(--danger);
  --training-pass-accent-rgb: 239 126 135;
}

.training-pass-band .resource-band-heading {
  flex-wrap: wrap;
}

.training-pass-band .resource-band-heading h2 svg {
  color: var(--training-pass-accent);
}

.training-pass-heading-main .resource-switch-field {
  min-height: 30px;
}

.fixed-income-toggles {
  display: flex;
  gap: 10px 24px;
  align-items: center;
  flex-wrap: wrap;
}

.fixed-income-toggles label,
.resource-check-field {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  color: #b8cbd2;
  font-size: 0.78rem;
  cursor: pointer;
}

.fixed-income-toggles input,
.resource-check-field input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--cyan-strong);
  cursor: pointer;
}

.resource-correction-controls {
  display: flex;
  gap: 16px 28px;
  align-items: end;
  flex-wrap: wrap;
}

.resource-option-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #abc0c8;
  font-size: 0.76rem;
}

.resource-correction-controls .resource-option-field {
  width: 220px;
  max-width: 100%;
}

.resource-option-control {
  display: grid;
  grid-template-columns: minmax(92px, 118px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.training-pass-point input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 6px 9px;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  background: rgb(8 14 18 / 72%);
  border: 1px solid #344852;
  border-radius: 6px;
  text-align: right;
}

.training-pass-point input:hover {
  border-color: #49616c;
}

.training-pass-point input:focus {
  background: #0b1419;
  border-color: var(--cyan-strong);
  box-shadow: inset 0 0 0 1px rgb(130 228 244 / 10%);
}

.training-pass-band .training-pass-point input {
  border-color: rgb(var(--training-pass-accent-rgb) / 52%);
}

.training-pass-band .training-pass-point input:hover,
.training-pass-band .training-pass-point input:focus {
  border-color: var(--training-pass-accent);
}

.training-pass-band .training-pass-point input:focus {
  box-shadow: inset 0 0 0 1px rgb(var(--training-pass-accent-rgb) / 12%);
}

.training-pass-band .resource-check-field input {
  accent-color: var(--training-pass-accent);
}

.resource-option-control small {
  overflow: hidden;
  color: var(--faint);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-pass-cycle {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.training-pass-cycle .product-select:first-child {
  width: 108px;
}

.training-pass-cycle .product-select:last-child {
  width: 82px;
}

.training-pass-cycle .product-select select,
.training-pass-cycle .product-select > svg {
  color: var(--training-pass-accent);
}

.training-pass-cycle .product-select select {
  border-color: rgb(var(--training-pass-accent-rgb) / 52%);
}

.training-pass-cycle .product-select select:hover,
.training-pass-cycle .product-select select:focus-visible {
  border-color: var(--training-pass-accent);
}

.training-pass-cycle .product-select select:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--training-pass-accent-rgb) / 13%);
}

.training-pass-cycle option {
  color: var(--text);
}

.training-pass-cycle select.has-cycle-modification,
.training-pass-cycle option.is-cycle-modified {
  color: var(--planning);
}

.training-pass-cycle option.is-cycle-active {
  color: var(--cyan);
}

.training-pass-cycle option.is-cycle-history {
  color: #7f939b;
}

.training-pass-controls {
  display: flex;
  gap: 14px 20px;
  align-items: end;
  flex-wrap: wrap;
}

.training-pass-point {
  width: 180px;
  max-width: 100%;
}

.training-pass-controls .resource-check-field {
  height: 38px;
}

.resource-switch-field {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  color: #b8cbd2;
  font-size: 0.78rem;
  cursor: pointer;
}

.resource-switch-field[hidden] {
  display: none;
}

.resource-switch-control {
  position: relative;
  display: grid;
  width: 38px;
  height: 32px;
  place-items: center;
}

.resource-switch-control input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.resource-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: #17242b;
  border: 1px solid #40525b;
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 42%);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.resource-switch-track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #91a5ad;
  border-radius: 50%;
  content: "";
  transition: background-color 140ms ease, transform 140ms ease;
}

.resource-switch-control input:checked + .resource-switch-track {
  background: rgb(56 137 153 / 52%);
  border-color: rgb(120 201 255 / 62%);
}

.resource-switch-control input:checked + .resource-switch-track::after {
  background: var(--cyan);
  transform: translateX(16px);
}

.resource-switch-control input:focus-visible + .resource-switch-track {
  outline: 2px solid var(--cyan-strong);
  outline-offset: 2px;
}

.resource-switch-control input:disabled {
  cursor: default;
}

.resource-switch-control input:disabled + .resource-switch-track {
  opacity: 0.52;
}

.training-pass-band .resource-switch-track {
  border-color: rgb(var(--training-pass-accent-rgb) / 55%);
}

.training-pass-band .resource-switch-control input:checked
  + .resource-switch-track {
  background: rgb(var(--training-pass-accent-rgb) / 24%);
  border-color: rgb(var(--training-pass-accent-rgb) / 72%);
}

.training-pass-band .resource-switch-control input:checked
  + .resource-switch-track::after {
  background: var(--training-pass-accent);
}

.training-pass-band .resource-switch-control input:focus-visible
  + .resource-switch-track {
  outline-color: var(--training-pass-accent);
}

.training-pass-band[data-cycle-state="incomplete"]
  :is(input, select):disabled {
  opacity: 1;
}

.training-pass-remaining {
  display: flex;
  gap: 0;
  align-items: center;
  flex-wrap: wrap;
  min-height: 22px;
  color: #abc0c8;
  font-size: 0.72rem;
}

.training-pass-remaining > span {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}

.training-pass-remaining > span + span::before {
  margin-inline: 10px;
  color: var(--line-strong);
  content: "|";
}

.training-pass-remaining b {
  color: var(--faint);
  font-weight: 400;
}

.training-pass-remaining-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

[data-training-pass-resource="gem"] .training-pass-remaining-value {
  min-width: 4ch;
  text-align: right;
}

.event-planning-surface {
  min-width: 0;
  padding-bottom: 24px;
}

.event-planning-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
}

.event-planning-date-controls {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.event-planning-anchor-button,
.event-planning-date-button,
.event-planning-today-button {
  min-height: 32px;
  padding: 4px 2px;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.event-planning-anchor-button {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.event-planning-anchor-button.is-active {
  color: var(--forecast-anchor);
}

.event-planning-date-separator {
  color: var(--line-strong);
  font-size: 0.72rem;
}

.event-planning-date-button,
.event-planning-today-button {
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.event-planning-today-button {
  margin-left: auto;
  color: var(--cyan);
}

.event-planning-anchor-button:disabled,
.event-planning-date-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.48;
}

@media (hover: hover) {
  .event-planning-anchor-button:not(:disabled):hover,
  .event-planning-date-button:not(:disabled):hover,
  .event-planning-today-button:not(:disabled):hover {
    color: var(--cyan);
  }
}

.calendar-date-picker {
  position: fixed;
  z-index: 18;
  inset: auto;
  width: min(292px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 12px;
  overflow-y: auto;
  color: var(--text);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: rgb(17 27 33 / 98%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%);
  transform: scale(var(--date-picker-scale, 1));
  transform-origin: left top;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.calendar-date-picker::-webkit-scrollbar {
  display: none;
}

.calendar-date-picker-heading {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  margin-bottom: 8px;
}

.calendar-date-picker-heading strong {
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.calendar-date-picker-shift {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.calendar-date-picker-shift svg {
  width: 17px;
  height: 17px;
}

.calendar-date-picker-shift:disabled {
  color: var(--faint);
  cursor: default;
  opacity: 0.34;
}

.calendar-date-picker-weekdays,
.calendar-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-date-picker-weekdays {
  align-items: center;
  min-height: 24px;
  margin-bottom: 4px;
  color: var(--faint);
  font-size: 0.65rem;
  text-align: center;
}

.calendar-date-picker-day,
.calendar-date-picker-blank {
  aspect-ratio: 1;
  min-width: 0;
}

.calendar-date-picker-day {
  position: relative;
  display: grid;
  min-height: 32px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.calendar-date-picker-day.is-today {
  color: var(--cyan);
}

.calendar-date-picker-day.is-today::after {
  position: absolute;
  bottom: 3px;
  width: 3px;
  height: 3px;
  background: currentcolor;
  border-radius: 50%;
  content: "";
}

.calendar-date-picker-day.is-selected {
  color: var(--text);
  background: rgb(145 185 237 / 16%);
  border-color: rgb(145 185 237 / 68%);
}

.calendar-date-picker-day:disabled {
  color: var(--faint);
  cursor: default;
  opacity: 0.24;
}

@media (hover: hover) {
  .calendar-date-picker-shift:not(:disabled):hover,
  .calendar-date-picker-day:not(:disabled):hover {
    color: var(--text);
    background: var(--surface-soft);
  }
}

@media (width <= 700px) and (height <= 620px) {
  .calendar-date-picker {
    width: min(260px, calc(100vw - 24px));
    padding: 8px;
  }

  .calendar-date-picker-heading {
    gap: 6px;
    min-height: 32px;
    margin-bottom: 4px;
  }

  .calendar-date-picker-weekdays,
  .calendar-date-picker-days {
    gap: 3px;
  }

  .calendar-date-picker-weekdays {
    min-height: 20px;
    margin-bottom: 2px;
  }
}

.event-planning-list {
  min-width: 0;
}

.event-planning-entry {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.event-entry-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content 20px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 11px 22px;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.event-completion-deviation,
.calendar-completion-deviation {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #171b1d;
}

.event-completion-deviation-slot {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
}

.event-completion-deviation svg,
.calendar-completion-deviation svg {
  width: 15px;
  height: 15px;
  fill: #f3c84b;
  stroke-width: 2.2;
}

.event-entry-toggle:hover {
  background: rgb(130 228 244 / 3%);
}

.event-entry-toggle:focus-visible {
  outline: 1px solid var(--cyan-strong);
  outline-offset: -2px;
}

.event-entry-toggle > svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.event-planning-entry.is-expanded .event-entry-toggle > svg {
  transform: rotate(180deg);
}

.event-entry-copy {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px;
  align-items: baseline;
  min-width: 0;
}

.event-entry-copy strong {
  min-width: 0;
  color: #dce7ea;
  font-size: 0.82rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.event-entry-copy small {
  grid-column: 2;
  color: var(--faint);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.67rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.event-entry-type {
  display: inline-grid;
  grid-row: 1 / span 2;
  grid-template-columns: 15px max-content;
  column-gap: 6px;
  align-items: center;
  align-self: center;
  min-width: 8em;
  color: var(--cyan);
  font-size: 0.7rem;
  white-space: nowrap;
}

.event-entry-type.has-event-color {
  color: rgb(var(--event-rgb));
}

.event-entry-phase {
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.event-entry-phase.is-active {
  color: var(--mint);
}

.event-entry-phase.is-planning {
  color: var(--danger);
}

.event-entry-body {
  padding: 2px 22px 20px calc(22px + 5em + 10px);
}

.event-control-group + .event-control-group {
  margin-top: 18px;
}

.event-control-group h4,
.monthly-race-controls h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.event-control-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.event-control-row {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  min-height: 48px;
  padding: 7px 0;
  border-bottom: 1px solid rgb(64 86 96 / 38%);
}

.event-control-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.event-control-main > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cyan-strong);
}

.event-control-label {
  min-width: 0;
  padding: 0;
  color: #c6d6dc;
  font-size: 0.75rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.event-control-label.is-static {
  cursor: default;
}

.event-control-label:not(.is-static):hover {
  color: var(--text);
}

.event-control-label:not(.is-static):focus-visible {
  outline: 1px solid var(--cyan-strong);
  outline-offset: 3px;
}

.event-control-label[aria-pressed="true"] {
  color: #73858c;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.event-value-input input,
.league-score-field input {
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: rgb(8 14 18 / 68%);
  border: 1px solid #344852;
  border-radius: 5px;
}

.event-control-main > .product-select {
  width: min(138px, 100%);
  justify-self: end;
}

.event-value-input {
  display: inline-grid;
  grid-template-columns: minmax(72px, 112px) auto;
  gap: 6px;
  align-items: center;
  justify-self: end;
}

.event-value-input input {
  width: 100%;
  text-align: right;
}

.event-value-input small {
  color: var(--muted);
  font-size: 0.66rem;
}

.event-reward-line {
  display: flex;
  gap: 0;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  color: #aebfc5;
  font-size: 0.68rem;
}

.event-reward-line > span {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}

.event-reward-line > span + span::before {
  margin-inline: 8px;
  color: var(--line-strong);
  content: "|";
}

.event-reward-line strong {
  min-width: 2ch;
  color: #d4e1e5;
  font-family: "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.event-reward-line.is-remaining {
  padding-left: 25px;
}

.event-reward-line.is-remaining > span:first-child strong {
  min-width: 4ch;
}

.event-target-entity {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.event-target-thumbnail {
  width: 36px;
  color: var(--muted);
  font-size: 0.72rem;
}

.event-target-name {
  display: grid;
  min-width: 0;
}

.event-target-name span {
  color: var(--muted);
  font-size: 0.65rem;
  overflow-wrap: anywhere;
}

.event-target-name strong {
  color: inherit;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.automatic-event-list {
  display: grid;
  gap: 0;
}

.automatic-event-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 7px 0;
  border-bottom: 1px solid rgb(64 86 96 / 38%);
}

.automatic-event-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.automatic-event-row small {
  color: var(--muted);
  font-size: 0.65rem;
}

.automatic-event-row strong {
  color: #c6d6dc;
  font-size: 0.74rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.monthly-race-controls {
  display: grid;
  gap: 16px;
}

.monthly-radio-grid {
  display: flex;
  gap: 10px 20px;
  align-items: center;
  flex-wrap: wrap;
}

.monthly-radio-option {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  color: #bdced4;
  cursor: pointer;
}

.monthly-radio-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.monthly-radio-option > span {
  width: 15px;
  height: 15px;
  border: 1px solid #58717b;
}

.monthly-radio-option input:checked + span {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 3px #101a1f;
}

.monthly-radio-option input:focus-visible + span {
  outline: 1px solid var(--cyan-strong);
  outline-offset: 3px;
}

.monthly-radio-option strong,
.monthly-radio-option small {
  font-size: 0.72rem;
  font-weight: 500;
}

.monthly-radio-option small {
  color: var(--muted);
}

.monthly-race-preview {
  min-height: 24px;
  padding-top: 12px;
  border-top: 1px solid rgb(64 86 96 / 38%);
}

.monthly-preview-state {
  color: var(--muted);
  font-size: 0.7rem;
}

.monthly-preview-state.is-error {
  color: #f3a8a8;
}

.monthly-preview-meta {
  display: flex;
  gap: 12px 20px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.7rem;
  flex-wrap: wrap;
}

.monthly-preview-meta strong {
  color: #d2e0e4;
  font-weight: 600;
}

.league-level-field,
.league-score-field,
.league-target-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.monthly-race-controls.is-league {
  grid-template-columns:
    minmax(190px, 1fr)
    minmax(130px, 0.7fr)
    minmax(180px, 1fr);
  align-items: end;
}

.monthly-race-controls.is-league .monthly-race-preview {
  grid-column: 1 / -1;
}

.league-level-controls {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 58px;
  gap: 7px;
}

.league-score-field input,
.league-target-field .product-select {
  width: 100%;
}

.league-score-field input {
  text-align: right;
}

.event-planning-empty {
  padding: 28px 22px;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.gacha-page {
  position: relative;
}

.gacha-planning-status {
  position: absolute;
  z-index: 1;
  top: 19px;
  right: 4px;
  min-width: 5em;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.gacha-planning-status[data-state="pending"] {
  color: var(--cyan);
}

.gacha-planning-status[data-state="error"] {
  color: #f3a8a8;
}

.gacha-planning-surface,
.gacha-plan-groups {
  min-width: 0;
}

.gacha-plan-empty {
  padding: 38px 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.gacha-plan-groups {
  display: grid;
  gap: 22px;
}

.gacha-year-groups {
  display: grid;
  grid-template-columns: repeat(
    var(--gacha-layout-column-count),
    minmax(0, 1fr)
  );
  gap: 10px 6px;
  align-items: start;
  min-width: 0;
  padding-bottom: var(--gacha-scroll-reserve, 0);
}

.gacha-year-group {
  display: contents;
}

.gacha-year-group > h2 {
  position: sticky;
  z-index: 2;
  top: 0;
  grid-column: var(--gacha-layout-column) / span var(--gacha-layout-span);
  grid-row: var(--gacha-layout-row);
  align-self: start;
  padding: 10px 4px 9px;
  margin: 0;
  color: #c7d8dd;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}

.gacha-year-months {
  display: contents;
}

.gacha-month-group {
  display: grid;
  grid-column: var(--gacha-layout-column) / span var(--gacha-layout-span);
  grid-row: var(--gacha-layout-row);
  grid-template-columns: repeat(
    var(--gacha-layout-span),
    minmax(0, 1fr)
  );
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 8px 4px;
}

.gacha-inline-detail-slot {
  display: grid;
  grid-column: 1 / -1;
  grid-row: var(--gacha-layout-row);
  grid-template-rows: 1fr;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.gacha-inline-detail-slot[hidden] {
  display: none;
}

.gacha-inline-detail-slot.is-opening,
.gacha-inline-detail-slot.is-closing {
  overflow: clip;
}

.gacha-inline-detail-slot.is-preparing {
  visibility: hidden;
  pointer-events: none;
}

.gacha-inline-detail-slot.is-opening {
  animation: gacha-inline-detail-open 180ms ease-out both;
}

.gacha-inline-detail-slot.is-closing {
  animation: gacha-inline-detail-close 180ms ease-in both;
  pointer-events: none;
}

.gacha-inline-detail-slot > .gacha-plan-detail {
  min-height: 0;
}

@keyframes gacha-inline-detail-open {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes gacha-inline-detail-close {
  from {
    clip-path: inset(0);
  }

  to {
    clip-path: inset(0 0 100% 0);
  }
}

.gacha-month-group h3 {
  place-self: center;
  margin: 0;
  color: var(--muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.gacha-month-targets {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(
    var(--gacha-month-target-span),
    minmax(0, 1fr)
  );
  gap: 6px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
}

.gacha-target-pool {
  display: grid;
  grid-column: span var(--gacha-pool-target-span);
  grid-template-columns: repeat(
    var(--gacha-pool-target-span),
    minmax(0, 1fr)
  );
  gap: 2px;
  align-items: center;
  width: auto;
  min-height: 100px;
  padding: 4px 1px;
  background: transparent;
  border: 0;
}

.gacha-target-pool.is-single {
  justify-content: center;
  width: auto;
  height: auto;
}

.gacha-target-thumbnail-button {
  --gacha-target-hover-line-width: 9px;
  --gacha-target-selection-line-width: 32px;

  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-rows: 64px 14px;
  gap: 4px;
  width: 100%;
  height: 90px;
  padding: 2px 5px 4px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.gacha-target-thumbnail-button::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--cyan);
  content: "";
  transform: translateX(-50%);
  transition: width 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .gacha-target-thumbnail-button:not(
    .is-selected,
    .is-hover-suppressed
  ):hover::after {
    width: var(--gacha-target-hover-line-width);
  }
}

.gacha-target-thumbnail-button.is-selected::after,
.gacha-target-thumbnail-button.is-selection-positioning::after {
  width: var(--gacha-target-selection-line-width);
}

.is-gacha-target-transitioning
  .gacha-target-thumbnail-button:not(
    .is-selected,
    .is-selection-opening,
    .is-selection-closing,
    .is-selection-sliding
  )::after {
  width: 0;
}

.is-gacha-target-transitioning
  .gacha-target-thumbnail-button.is-hover-suppressed::after {
  width: 0;
  transition: none;
}

.gacha-target-thumbnail-button.is-collapse-settling::after {
  width: 0;
  transition: none;
}

.gacha-target-thumbnail-button.is-selection-opening::after,
.gacha-target-thumbnail-button.is-selection-closing::after,
.gacha-target-thumbnail-button.is-selection-sliding::after {
  width: var(--gacha-target-selection-line-width);
  transition: none;
  will-change: transform, width;
}

.gacha-target-thumbnail-button.is-selection-opening::after {
  animation: gacha-target-selection-open 150ms ease-out both;
}

.gacha-target-thumbnail-button.is-selection-opening-from-hover::after {
  animation-name: gacha-target-selection-open-from-hover;
}

.gacha-target-thumbnail-button.is-selection-closing::after {
  animation: gacha-target-selection-close 150ms ease-in both;
}

.gacha-target-thumbnail-button.is-selection-sliding::after {
  animation: gacha-target-selection-slide 140ms ease-out both;
}

.gacha-target-thumbnail-button.is-selection-slide-settling::after {
  width: 0;
  animation: none;
  transition: none;
}

.gacha-target-thumbnail-button.is-selection-slide-destination::after {
  width: var(--gacha-target-selection-line-width);
  animation: none;
  transition: none;
}

@keyframes gacha-target-selection-open {
  from {
    width: 0;
  }

  to {
    width: var(--gacha-target-selection-line-width);
  }
}

@keyframes gacha-target-selection-open-from-hover {
  from {
    width: var(--gacha-target-hover-line-width);
  }

  to {
    width: var(--gacha-target-selection-line-width);
  }
}

@keyframes gacha-target-selection-close {
  from {
    width: var(--gacha-target-selection-line-width);
  }

  to {
    width: 0;
  }
}

@keyframes gacha-target-selection-slide {
  from {
    transform: translateX(-50%) translateX(0);
  }

  to {
    transform: translateX(-50%) translateX(
      var(--gacha-selection-shift-x, 0)
    );
  }
}

.gacha-target-thumbnail-button:focus-visible {
  outline: 1px solid var(--cyan-strong);
  outline-offset: 2px;
}

.gacha-target-thumbnail-frame {
  display: grid;
  width: 58px;
  height: 64px;
  overflow: hidden;
  place-items: center;
}

.gacha-target-thumbnail-frame.is-character {
  width: 58px;
  height: auto;
}

.gacha-target-thumbnail-frame.is-support img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gacha-target-pull-count {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.gacha-target-pull-count[data-resource-state="ready"]
  [data-gacha-paid-pulls] {
  color: var(--mint);
}

.gacha-target-pull-count[data-resource-state="insufficient"]
  [data-gacha-paid-pulls] {
  color: var(--resource-negative);
}

.gacha-target-pull-count[data-resource-state="free-only"]
  [data-gacha-paid-pulls],
.gacha-target-free-pulls {
  color: var(--muted);
}

.gacha-image-error {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--faint);
}

.gacha-image-error svg {
  width: 22px;
  height: 22px;
}

.gacha-plan-detail {
  container-name: gacha-detail;
  container-type: inline-size;
  min-width: 0;
  padding-bottom: 8px;
}

.gacha-plan-detail-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid var(--line);
}

.gacha-plan-detail-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.gacha-plan-title-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.gacha-plan-title-row h2 {
  min-width: 0;
  margin: 0;
  color: #dce8eb;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.gacha-plan-title-row > span {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 0.68rem;
}

.gacha-plan-detail-heading p {
  margin: 0;
  color: var(--faint);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.67rem;
  font-variant-numeric: tabular-nums;
}

.gacha-plan-detail-heading p span {
  margin-inline: 6px;
  color: var(--line-strong);
}

.gacha-plan-spend-dates {
  display: flex;
  align-items: center;
}

.gacha-spend-date {
  min-width: 0;
  padding: 2px 0;
  color: rgb(213 226 232 / 76%);
  font: inherit;
  font-variant-numeric: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.gacha-spend-date:hover {
  color: rgb(235 246 250 / 90%);
}

.gacha-spend-date.is-selected {
  color: #f4fbfd;
  text-shadow: 0 0 8px rgb(143 223 238 / 18%);
}

.gacha-spend-date:focus-visible {
  outline: 1px solid rgb(130 228 244 / 42%);
  outline-offset: 3px;
}

.gacha-target-delete {
  flex: 0 0 auto;
  color: var(--muted);
}

.gacha-target-delete:hover {
  color: var(--danger);
}

.gacha-plan-detail-body {
  display: grid;
  grid-template-columns: clamp(220px, 32cqi, 360px) minmax(0, 1fr);
  gap: clamp(18px, 2.4cqi, 30px);
  align-items: start;
  min-width: 0;
  padding: 20px 4px 0;
}

.gacha-detail-image {
  position: relative;
  display: grid;
  width: 100%;
  height: clamp(340px, 54vh, 570px);
  margin: 0;
  overflow: hidden;
  place-items: center;
}

.gacha-detail-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gacha-plan-controls {
  display: grid;
  gap: 20px;
  align-content: start;
  min-width: 0;
  min-height: 100%;
  padding: 18px 4px 18px 30px;
  border-left: 1px solid var(--line);
}

.gacha-plan-inputs {
  display: flex;
  gap: 12px 20px;
  align-items: end;
  flex-wrap: wrap;
}

.gacha-plan-inputs > label:first-child {
  display: grid;
  gap: 7px;
  width: 96px;
  max-width: 100%;
  color: #abc0c8;
  font-size: 0.74rem;
}

.gacha-plan-inputs input[type="text"] {
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: rgb(8 14 18 / 72%);
  border: 1px solid #344852;
  border-radius: 6px;
}

.gacha-plan-inputs input[type="text"]:hover {
  border-color: #49616c;
}

.gacha-plan-inputs input[type="text"]:focus {
  background: #0b1419;
  border-color: var(--cyan-strong);
  box-shadow: inset 0 0 0 1px rgb(130 228 244 / 10%);
}

.gacha-exclude-control {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  color: #b8cbd2;
  font-size: 0.76rem;
  cursor: pointer;
}

.gacha-exclude-control input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--cyan-strong);
}

.gacha-free-pulls {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  color: #b8cbd2;
  font-size: 0.76rem;
}

.gacha-free-pulls small {
  color: var(--muted);
  font-size: 0.7rem;
}

.gacha-number-flow {
  display: inline-block;
  min-width: 4ch;
  font-variant-numeric: tabular-nums;

  --number-flow-mask-height: 0.18em;
}

.gacha-free-pulls .gacha-number-flow {
  min-width: 3ch;
  color: #dbe9ec;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 500;
}

.gacha-plan-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  border-block: 1px solid var(--line);
}

.gacha-plan-resource-grid > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 12px;
  border-right: 1px solid var(--line);
}

.gacha-plan-resource-grid > div:last-child {
  border-right: 0;
}

.gacha-plan-resource-grid dt {
  color: var(--muted);
  font-size: 0.68rem;
}

.gacha-plan-resource-grid dd {
  min-width: 4ch;
  margin: 0;
  color: #dbe9ec;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.gacha-plan-resource-grid dd.is-negative {
  color: var(--resource-negative);
  text-shadow: 0 0 8px var(--resource-negative-glow);
}

.gacha-plan-resource-grid dd .gacha-number-flow {
  text-align: left;
}

.gacha-plan-resource-block {
  display: grid;
  gap: 10px;
}

.gacha-plan-resource-block > span {
  color: var(--muted);
  font-size: 0.7rem;
}

.gacha-plan-resource-summary {
  display: flex;
  gap: 0;
  align-items: center;
  flex-wrap: wrap;
}

.gacha-plan-resource-summary > span {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  color: #cbdce1;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.gacha-plan-resource-summary > span + span::before {
  margin-inline: 9px;
  color: var(--line-strong);
  content: "|";
}

.gacha-plan-resource-summary small {
  color: var(--faint);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 0.66rem;
}

.gacha-plan-resource-summary .gacha-number-flow {
  font-weight: 500;
  text-align: left;
}

.gacha-ticket-use-control {
  position: relative;
  display: inline-grid;
  width: 4ch;
  min-width: 4ch;
  align-items: baseline;
}

.gacha-ticket-use-control > * {
  grid-area: 1 / 1;
}

.gacha-ticket-use-control > .gacha-number-flow {
  pointer-events: none;
}

.gacha-plan-resource-summary input[data-gacha-ticket-use] {
  width: 4ch;
  min-width: 4ch;
  max-width: 4ch;
  height: 1.45em;
  padding: 0;
  z-index: 1;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.gacha-plan-resource-summary input[data-gacha-ticket-use]:hover {
  cursor: text;
}

.gacha-plan-resource-summary input[data-gacha-ticket-use]:focus {
  color: #f4fbfd;
  caret-color: currentcolor;
  outline: 1px solid rgb(130 228 244 / 36%);
  outline-offset: 3px;
}

.gacha-ticket-use-control:has(input:focus) > .gacha-number-flow {
  visibility: hidden;
}

.gacha-ticket-use-control:hover > .gacha-number-flow {
  color: #e2f1f4;
}

.gacha-drafts-shell {
  position: relative;
  margin-top: 24px;
  border-block: 1px solid var(--line);
}

.gacha-drafts {
  min-width: 0;
}

.gacha-drafts > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 8px 50px 8px 4px;
  color: #c7d8dd;
  font-size: 0.76rem;
  cursor: pointer;
  list-style: none;
}

.gacha-drafts > summary::-webkit-details-marker {
  display: none;
}

.gacha-drafts > summary svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform 150ms ease;
}

.gacha-drafts[open] > summary svg {
  transform: rotate(180deg);
}

.gacha-drafts > summary small {
  min-width: 2ch;
  color: var(--faint);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.gacha-drafts > summary:focus-visible {
  outline: 1px solid var(--cyan-strong);
  outline-offset: 2px;
}

.gacha-drafts-body {
  display: grid;
  border-top: 1px solid var(--line);
}

.gacha-draft-list {
  display: grid;
}

.gacha-draft-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}

.gacha-draft-copy {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.gacha-draft-thumbnail {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 48px;
  overflow: hidden;
  place-items: center;
}

.gacha-draft-thumbnail.is-support img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gacha-draft-text {
  display: flex;
  gap: 5px 14px;
  align-items: baseline;
  min-width: 0;
  flex-wrap: wrap;
}

.gacha-draft-row strong {
  color: #c7d8dd;
  font-size: 0.78rem;
  font-weight: 500;
}

.gacha-draft-row small {
  color: var(--muted);
  font-size: 0.68rem;
}

.gacha-draft-row.is-missing {
  opacity: 0.62;
}

.gacha-draft-row .secondary-button {
  min-height: 32px;
  padding: 5px 10px;
  white-space: nowrap;
}

.gacha-drafts-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 0;
  margin: 0;
}

.icon-button.gacha-drafts-clear {
  color: #e58b8f;
  background: transparent;
  border: 1px solid #733f44;
}

.gacha-drafts-clear svg {
  width: 14px;
  height: 14px;
}

.icon-button.gacha-drafts-clear:hover {
  color: #ffd7d9;
  background: rgb(169 71 78 / 12%);
  border-color: #b95860;
}

.gacha-drafts-clear:focus-visible {
  outline: 1px solid #e58b8f;
  outline-offset: 2px;
}

.decision-dialog {
  width: min(420px, calc(100cqw - 32px));
  padding: 0;
  color: var(--text);
  background: rgb(13 21 26 / 98%);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
}

.decision-dialog::backdrop {
  background: rgb(2 7 10 / 68%);
  backdrop-filter: blur(4px);
}

.decision-dialog > div {
  padding: 26px;
}

.decision-dialog-kicker {
  color: #e58b8f;
  font-size: 0.66rem;
  font-weight: 600;
}

.decision-dialog h2 {
  margin: 7px 0 0;
  color: #e8f1f3;
  font-size: 1rem;
  font-weight: 600;
}

.decision-dialog p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.65;
}

.decision-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
}

.decision-dialog-actions button {
  min-height: 36px;
  padding: 7px 12px;
  cursor: pointer;
}

.decision-dialog-actions .danger-button {
  color: #fff;
  background: #a9474e;
  border: 1px solid #c85b63;
}

.decision-dialog-actions .danger-button:hover {
  background: #b95159;
}

.decision-dialog-actions .danger-button:focus-visible {
  outline: 1px solid #f4a2a7;
  outline-offset: 2px;
}

@container gacha-detail (width <= 760px) {
  .gacha-plan-detail-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .gacha-detail-image {
    height: clamp(300px, 48vh, 470px);
  }

  .gacha-plan-controls {
    padding: 20px 4px 4px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@container gacha-detail (width <= 520px) {
  .gacha-plan-detail-heading {
    align-items: flex-start;
    padding-inline: 0;
  }

  .gacha-plan-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .gacha-plan-detail-body {
    padding-inline: 0;
  }

  .gacha-detail-image {
    height: clamp(280px, 44vh, 320px);
  }

  .gacha-plan-controls {
    padding-inline: 0;
  }

  .gacha-plan-resource-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gacha-plan-resource-grid > div {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .gacha-plan-resource-grid > div:last-child {
    border-bottom: 0;
  }
}

@container app-frame (width <= 1120px) {
  .resource-editor-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-editor-group.is-crystals {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }

  .resource-editor-group:nth-child(2) {
    border-right: 0;
  }

  .event-control-list {
    grid-template-columns: minmax(0, 1fr);
  }

}

@container app-frame (width <= 700px) {
  .resource-page-heading {
    gap: 8px;
  }

  .resource-page-tabs button {
    padding-inline: 7px;
  }

  .resource-control-band {
    padding: 18px 14px;
  }

  .resource-editor-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-editor-group,
  .resource-editor-group.is-crystals {
    grid-column: 1;
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .resource-editor-group:first-child {
    border-top: 0;
  }

  .fixed-income-toggles {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .gacha-year-groups {
    gap: 10px 4px;
  }

  .gacha-month-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-content: start;
    align-items: start;
    padding: 8px 1px;
  }

  .gacha-month-group h3 {
    justify-self: start;
    padding-inline: 2px;
  }

  .gacha-month-targets {
    grid-column: auto;
    gap: 4px;
  }

  .gacha-target-thumbnail-button {
    min-width: 0;
    height: 90px;
    padding: 2px 2px 4px;
  }

  .gacha-target-thumbnail-frame {
    width: min(58px, 100%);
    height: auto;
    aspect-ratio: 58 / 64;
  }

  .gacha-target-thumbnail-frame.is-character {
    width: min(58px, 100%);
  }

  .gacha-draft-row {
    align-items: flex-start;
  }

  .resource-correction-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .resource-correction-controls .resource-option-field {
    width: min(280px, 100%);
  }

  .event-entry-toggle {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    padding-inline: 14px;
  }

  .event-entry-phase {
    display: none;
  }

  .event-entry-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-entry-type {
    grid-row: auto;
  }

  .event-entry-copy small {
    grid-column: 1;
  }

  .event-entry-body {
    padding: 2px 14px 18px;
  }

  .event-control-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .event-control-main > .product-select,
  .event-value-input {
    grid-column: 2;
    width: min(180px, 100%);
    justify-self: start;
  }

  .automatic-event-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .monthly-race-controls.is-league {
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-race-controls.is-league .monthly-race-preview {
    grid-column: 1;
  }
}

.summary-item {
  min-width: 0;
  min-height: 50px;
  padding: 4px 11px;
  border-left: 1px solid #293b44;
}

.summary-item dt {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-item dt svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.summary-item dd {
  min-width: 0;
  margin: 5px 0 0;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
}

.summary-item.is-forecast dd {
  color: var(--cyan);
}

.summary-item.is-forecast[data-forecast-easter-egg] {
  position: relative;
}

.summary-item.is-forecast[data-forecast-easter-egg]::after {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 8;
  padding: 6px 9px;
  color: #e7faff;
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  content: attr(data-forecast-easter-egg);
  background: #111d23;
  border: 1px solid #38515c;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 28%);
  opacity: 0;
  transform: translate(-50%, -3px);
  transition:
    opacity 80ms ease-out,
    transform 80ms ease-out,
    visibility 0s linear 80ms;
}

.summary-item.is-forecast[data-forecast-easter-egg]:hover::after {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.summary-item.is-rainbow dt svg {
  color: var(--pink);
}

.summary-item.is-gold dt svg {
  color: var(--warm);
}

.summary-item.is-compound dd {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: center;
  font-family: inherit;
  font-size: 0.82rem;
}

.summary-item.is-compound dd span {
  display: flex;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
}

.summary-item.is-compound dd small {
  color: var(--faint);
  font-size: 0.6rem;
  white-space: nowrap;
}

.summary-item.is-compound dd strong {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.workspace {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.side-rail {
  position: relative;
  display: grid;
  grid-auto-rows: 66px;
  align-content: start;
  gap: 5px;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  padding: 14px 8px;
  background: #0d151a;
  border-right: 1px solid #24353d;
  scrollbar-width: none;
  touch-action: pan-y;
  -ms-overflow-style: none;
}

.side-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.side-rail-indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background: rgb(130 228 244 / 10%);
  border: 1px solid rgb(130 228 244 / 30%);
  border-radius: 6px;
  transition:
    width 180ms ease,
    height 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.side-rail button {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  place-items: center;
  padding: 6px 4px;
  color: #718892;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition:
    color 140ms ease,
    transform 90ms ease;
}

.side-rail button:hover {
  color: #bad1d9;
}

.side-rail button.is-active {
  color: var(--text);
}

.side-rail button svg {
  width: 20px;
  height: 20px;
}

.side-rail button span {
  font-size: 0.7rem;
}

.main-view {
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  padding: 0 clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px);
  scrollbar-gutter: stable both-edges;
  touch-action: pan-y;
}

.product-page {
  width: min(1240px, 100%);
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  margin: 0 auto;
}

.product-page.is-active {
  animation: page-enter 220ms ease-out both;
}

.product-page[data-feature-state="preview"] {
  display: grid;
  min-height: 100%;
  place-items: center;
}

.product-page[data-feature-state="preview"].is-active {
  animation-name: preview-page-enter;
}

html[data-release-id^="v4.2"]
  .product-page[data-feature-state="preview"] {
  grid-template-rows: minmax(0, 1fr);
  padding: 14px 0 0;
}

.release-preview {
  display: grid;
  width: min(560px, 100%);
  min-height: min(340px, 100%);
  box-sizing: border-box;
  gap: 14px;
  align-content: start;
  justify-items: center;
  padding: clamp(24px, 6vh, 56px) 20px;
  color: var(--text);
  text-align: center;
}

.release-preview-icon {
  display: grid;
  width: 54px;
  height: 54px;
  color: var(--cyan);
  place-items: center;
}

.release-preview-icon svg {
  width: 34px;
  height: 34px;
}

.release-preview-state,
.release-preview-lead,
.release-preview h2,
.release-preview-capabilities {
  margin: 0;
}

.release-preview-state {
  color: var(--cyan);
  font-size: 0.72rem;
}

.release-preview h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0;
}

.release-preview-lead {
  max-width: 46em;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.8;
}

.release-preview-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  font-size: 0.74rem;
  list-style-position: inside;
}

.product-page[data-page="support"] {
  padding-top: clamp(28px, 5vh, 52px);
}

.support-page-content {
  display: grid;
  gap: 24px;
  width: min(920px, 100%);
  margin: 0 auto;
  padding-bottom: 32px;
}

.support-page-intro {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.support-page-icon {
  display: grid;
  width: 44px;
  height: 44px;
  color: var(--cyan);
  place-items: center;
}

.support-page-icon svg {
  width: 32px;
  height: 32px;
}

.support-page-intro h1,
.support-page-intro p,
.support-principles,
.support-readiness h2,
.support-readiness p,
.support-legal-note {
  margin: 0;
}

.support-page-intro h1 {
  color: var(--text);
  font-size: clamp(1.28rem, 2.4vw, 1.62rem);
  line-height: 1.35;
  letter-spacing: 0;
}

.support-page-intro p {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.75;
}

.support-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.support-principles li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 20px 24px;
}

.support-principles li + li {
  border-left: 1px solid var(--line);
}

.support-principles li > svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--cyan);
}

.support-principles li > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.support-principles strong {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}

.support-principles small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.65;
}

.support-review-details {
  display: grid;
  gap: 10px;
}

.support-review-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}

.support-review-facts > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0 24px;
}

.support-review-facts > div + div {
  border-left: 1px solid var(--line);
}

.support-review-facts dt {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.support-review-facts dt svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--cyan);
}

.support-review-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.support-review-facts a {
  color: var(--cyan-strong);
  text-decoration: none;
}

.support-review-facts a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-review-facts a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.support-review-details > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.65;
}

.support-readiness {
  display: grid;
  gap: 8px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid rgb(130 228 244 / 58%);
}

.support-readiness-heading,
.support-legal-note {
  display: flex;
  gap: 9px;
  align-items: center;
}

.support-readiness-heading svg,
.support-legal-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.support-readiness-heading svg {
  color: var(--cyan);
}

.support-readiness h2 {
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.45;
  letter-spacing: 0;
}

.support-readiness p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.65;
}

.support-payment-link {
  width: fit-content;
  min-height: 38px;
  margin-top: 4px;
  font-size: 0.74rem;
  text-decoration: none;
}

.support-payment-link:focus-visible {
  outline: 2px solid #d8f8ff;
  outline-offset: 3px;
}

.support-legal-note {
  color: var(--faint);
  font-size: 0.68rem;
  line-height: 1.55;
}

.support-legal-note svg {
  color: #7eaab4;
}

.product-page[data-page="future"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.future-page-heading,
.catalog-page-heading {
  height: var(--page-top-row-height);
  min-height: var(--page-top-row-height);
  padding-block: 8px;
}

.future-page-heading {
  --calendar-month-control-height: 28px;

  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: calc(var(--calendar-month-control-height) + 16px);
  min-height: calc(var(--calendar-month-control-height) + 16px);
  margin-bottom: 0;
}

.month-controls {
  position: relative;
  grid-column: 2;
  display: grid;
  grid-template-columns:
    var(--calendar-month-control-height)
    minmax(112px, auto)
    var(--calendar-month-control-height);
  gap: 8px;
  align-items: center;
  height: var(--calendar-month-control-height);
}

.calendar-current-month-button {
  grid-column: 3;
  min-width: 52px;
  height: var(--calendar-month-control-height);
  padding: 0 10px;
  justify-self: end;
  color: var(--blue);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--blue) 52%, var(--line));
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    transform 90ms ease;
}

.calendar-current-month-button:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface);
  border-color: var(--blue);
}

.calendar-current-month-button:disabled {
  color: var(--faint);
  background: transparent;
  border-color: var(--line);
  cursor: default;
}

.month-controls strong {
  position: relative;
  display: grid;
  height: var(--calendar-month-control-height);
  place-items: center;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

.month-controls .icon-button {
  width: var(--calendar-month-control-height);
  height: var(--calendar-month-control-height);
}

.month-controls .icon-button.is-forecast-anchor-direction {
  color: var(--forecast-anchor);
  border-color: color-mix(in srgb, var(--forecast-anchor) 58%, transparent);
  box-shadow: inset 0 0 0 1px rgb(145 185 237 / 12%);
}

.product-page[data-page="future"] .calendar-surface {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-page[data-page="future"] .calendar-surface::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.month-controls.is-pending strong::after {
  position: absolute;
  top: 50%;
  right: -15px;
  width: 8px;
  height: 8px;
  content: "";
  border: 1px solid rgb(130 228 244 / 28%);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    transform 90ms ease;
}

.icon-button:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line-strong);
}

@media (width <= 700px) and (hover: none) {
  .month-controls .icon-button:hover:not(.is-forecast-anchor-direction) {
    color: var(--muted);
    background: transparent;
    border-color: var(--line);
    box-shadow: none;
  }

  .month-controls .icon-button.is-forecast-anchor-direction:hover {
    background: transparent;
  }
}

.icon-button svg {
  width: 17px;
  height: 17px;
}

.calendar-surface {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: rgb(13 20 25 / 78%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.calendar-status {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  gap: 9px;
  place-items: center;
  place-content: center;
  min-height: 300px;
  color: var(--muted);
  font-size: 0.78rem;
  background: rgb(10 16 20 / 82%);
  backdrop-filter: blur(6px);
}

.calendar-status svg {
  width: 22px;
  height: 22px;
  color: var(--cyan);
  animation: spin 900ms linear infinite;
}

.calendar-status.is-error {
  color: #f3c2c6;
}

.calendar-status.is-error svg {
  color: var(--danger);
  animation: none;
}

.calendar-weekdays,
.calendar-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  position: sticky;
  z-index: 8;
  top: 0;
  background: #111b21;
  border-bottom: 1px solid var(--line);
}

.calendar-weekdays span {
  padding: 2px 4px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.1;
  text-align: center;
}

.calendar-week {
  --calendar-lane-pitch: 25px;
  --calendar-bar-height: 21px;
  --calendar-row-height: calc(66px + var(--calendar-lanes) * var(--calendar-lane-pitch));

  position: relative;
  min-height: max(112px, var(--calendar-row-height));
  border-bottom: 1px solid #23343c;
}

.calendar-week:last-child {
  border-bottom: 0;
}

.calendar-day-grid {
  position: absolute;
  inset: 0;
}

.calendar-day {
  appearance: none;
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  min-width: 0;
  padding: 7px 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid #22323a;
  border-radius: 0;
  cursor: pointer;
}

.calendar-day:last-child {
  border-right: 0;
}

.calendar-day:hover time {
  color: var(--cyan);
}

.calendar-day:focus {
  outline: 0;
}

.calendar-day:focus-visible {
  z-index: 3;
  box-shadow: inset 0 0 0 2px rgb(130 228 244 / 72%);
}

.calendar-day time {
  display: block;
  color: #d7e4e8;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.64rem;
  line-height: 1;
}

.calendar-day-heading {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.calendar-anchor-indicator {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: var(--forecast-anchor);
}

.calendar-anchor-indicator svg {
  width: 11px;
  height: 11px;
}

.calendar-day.is-forecast-anchor,
.calendar-date-picker-day.is-forecast-anchor {
  z-index: 2;
  box-shadow: inset 0 0 0 2px rgb(145 185 237 / 76%);
}

.calendar-day.is-forecast-anchor:focus-visible,
.calendar-date-picker-day.is-forecast-anchor:focus-visible {
  box-shadow:
    inset 0 0 0 2px rgb(145 185 237 / 88%),
    inset 0 0 0 4px rgb(8 13 17 / 72%);
}

.calendar-day.is-outside time {
  color: #50646d;
}

.calendar-day.is-today {
  background: var(--today-cell);
}

.login-claim {
  position: absolute;
  bottom: 6px;
  left: 50%;
  color: #d8ebe9;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  white-space: nowrap;
}

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

.calendar-bar {
  --event-rgb: var(--event-color-default-rgb);
  --calendar-bar-trailing-gap: 1px;
  --calendar-free-pull-active-bg: color-mix(
    in srgb,
    rgb(255 92 113) 24%,
    rgb(10 16 20)
  );
  --calendar-free-pull-idle-bg: color-mix(
    in srgb,
    rgb(96 220 142) 18%,
    rgb(10 16 20)
  );
  --calendar-free-pull-transition-bg: color-mix(
    in srgb,
    rgb(245 250 248) 82%,
    rgb(10 16 20)
  );
  --calendar-free-pull-active-border: rgb(255 92 113 / 56%);
  --calendar-free-pull-idle-border: rgb(96 220 142 / 52%);
  --calendar-free-pull-transition-border: rgb(245 250 248 / 92%);

  position: absolute;
  top: calc(30px + var(--bar-lane) * var(--calendar-lane-pitch));
  left: var(--bar-left);
  display: flex;
  align-items: center;
  overflow: hidden;
  width: max(1px, calc(var(--bar-width) - var(--calendar-bar-trailing-gap)));
  height: calc(var(--calendar-bar-height) + (var(--bar-lane-span) - 1) * var(--calendar-lane-pitch));
  padding: 3px 7px;
  color: #effafc;
  font-size: 0.61rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(
    in srgb,
    rgb(var(--event-rgb)) 18%,
    rgb(10 16 20)
  );
  border: 1px solid rgb(var(--event-rgb) / 52%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.calendar-bar > * {
  position: relative;
  z-index: 1;
}

.calendar-bar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-completion-deviation {
  margin-right: 4px;
}

.calendar-completion-deviation svg {
  width: 12px;
  height: 12px;
}

.calendar-bar.continues-before {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.calendar-bar.continues-after {
  --calendar-bar-trailing-gap: 0px;

  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.calendar-bar.is-gacha,
.event-entry-type.is-gacha {
  --event-rgb: var(--event-color-gacha-rgb);
}

.calendar-bar.is-gacha-merged {
  gap: 3px;
  padding: 2px 6px;
}

.calendar-bar.is-gacha-merged.has-free-pull-window {
  --calendar-free-pull-open-left: 0px;
  --calendar-free-pull-open-right: 0px;

  background: var(--calendar-free-pull-background);
  border-color: transparent;
}

.calendar-bar.is-gacha-merged.has-free-pull-window::before {
  position: absolute;
  z-index: 0;
  inset:
    0
    calc(-1 * var(--calendar-free-pull-open-right))
    0
    calc(-1 * var(--calendar-free-pull-open-left));
  box-sizing: border-box;
  padding: 1px;
  content: "";
  background: var(--calendar-free-pull-border-background);
  background-position: var(--calendar-free-pull-open-left) 0;
  background-repeat: no-repeat;
  background-size:
    calc(
      100%
      - var(--calendar-free-pull-open-left)
      - var(--calendar-free-pull-open-right)
    )
    100%;
  border-radius: inherit;
  pointer-events: none;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.calendar-bar.is-gacha-merged.has-free-pull-window.continues-before {
  --calendar-free-pull-open-left: 1px;
}

.calendar-bar.is-gacha-merged.has-free-pull-window.continues-after {
  --calendar-free-pull-open-right: 1px;
}

.calendar-bar-thumbnails {
  display: flex;
  gap: 2px;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.calendar-bar.thumbnails-hidden .calendar-bar-thumbnails {
  display: none;
}

.calendar-bar-thumbnail-frame {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.calendar-bar-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.calendar-bar-thumbnail-frame.is-uma .calendar-bar-thumbnail {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(100% - 2px);
  height: auto;
  max-width: none;
  max-height: none;
  transform: translateX(-50%);
}

.calendar-bar.is-story_event,
.event-entry-type.is-story_event {
  --event-rgb: var(--event-color-story-rgb);
}

.calendar-bar.is-training_challenge,
.event-entry-type.is-training_challenge {
  --event-rgb: var(--event-color-training-rgb);
}

.calendar-bar.is-factor_research,
.event-entry-type.is-factor_research {
  --event-rgb: var(--event-color-factor-rgb);
}

.calendar-bar.is-champions_meeting,
.event-entry-type.is-champions_meeting {
  --event-rgb: var(--event-color-champions-rgb);
}

.calendar-bar.is-league_of_heroes,
.event-entry-type.is-league_of_heroes {
  --event-rgb: var(--event-color-heroes-rgb);
}

.calendar-bar.is-legend_race,
.event-entry-type.is-legend_race {
  --event-rgb: var(--event-color-legend-rgb);
}

.calendar-bar.is-best_team,
.event-entry-type.is-best_team {
  --event-rgb: var(--event-color-best-team-rgb);
}

.course-page {
  width: 100%;
  padding-bottom: 30px;
}

.course-analyze-button.is-loading svg {
  animation: spin 850ms linear infinite;
}

.course-builder {
  position: relative;
  min-width: 0;
  padding: 16px clamp(12px, 1.4vw, 20px) 20px;
  overflow: clip;
  border-bottom: 1px solid var(--line);
}

.course-experimental-title {
  width: min(920px, 100%);
  margin: 0 auto 12px;
  color: var(--planning);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.course-section-heading,
.course-picker-heading,
.course-support-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.course-picker-heading h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
}

.course-condition-layout {
  display: grid;
  grid-template-columns: minmax(340px, 4fr) minmax(450px, 5fr);
  gap: 16px;
  align-items: start;
  width: min(920px, 100%);
  min-width: 0;
  margin-inline: auto;
}

.course-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.course-analysis-context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--line);
}

.course-scenario-field {
  grid-column: 1 / -1;
}

.course-select-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.course-select-field > span:first-child,
.course-support-heading > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.course-select-field > span:first-child svg,
.course-support-heading > span svg {
  width: 14px;
  height: 14px;
  color: var(--cyan);
}

.product-select {
  position: relative;
  display: block;
  min-width: 0;
}

.product-select select {
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 11px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  background: #0d171c;
  border: 1px solid #31454f;
  border-radius: 6px;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.product-select select:hover,
.product-select select:focus-visible {
  background: #111d23;
  border-color: var(--line-strong);
}

.product-select select:focus-visible {
  box-shadow: 0 0 0 2px rgb(130 228 244 / 13%);
}

.product-select > svg {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 15px;
  height: 15px;
  color: var(--faint);
  pointer-events: none;
  transform: translateY(-50%);
}

.product-select.is-compact select {
  min-height: 38px;
  padding-block: 6px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.product-select.is-dense select {
  height: 30px;
  min-height: 30px;
  padding: 4px 30px 4px 8px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.product-select.is-dense > svg {
  right: 8px;
  width: 13px;
  height: 13px;
}

.course-lineup {
  --course-lineup-heading-offset: 33px;

  display: grid;
  grid-template-columns: 163px minmax(0, 508px);
  gap: 32px;
  align-items: start;
  justify-content: center;
  margin-top: 18px;
}

.course-uma-column {
  display: grid;
  width: 163px;
  min-width: 0;
  align-content: start;
}

.course-uma-shell,
.course-support-shell {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

.course-uma-shell.is-actions-open,
.course-support-shell.is-actions-open {
  z-index: 8;
}

.course-uma-shell {
  width: 100%;
  padding-top: var(--course-lineup-heading-offset);
}

.course-running-style-field {
  margin-top: 14px;
}

.course-uma-slot,
.course-support-slot,
.course-picker-item,
.course-skill-item {
  color: inherit;
  cursor: pointer;
}

.course-uma-slot {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.course-uma-slot:not(.is-filled),
.course-support-slot:not(.is-filled) {
  background: transparent;
  border: 1px solid #2b3e47;
  border-radius: 6px;
}

.course-uma-slot:hover,
.course-support-slot:hover {
  background: transparent;
}

.course-slot-placeholder,
.course-support-placeholder {
  display: grid;
  gap: 8px;
  place-items: center;
  color: var(--faint);
  font-size: 0.68rem;
}

.course-slot-placeholder svg {
  width: 25px;
  height: 25px;
}

.course-uma-slot.is-filled {
  position: relative;
  display: grid;
  gap: 7px;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  animation: slot-arrive 180ms ease-out both;
}

.course-selected-image {
  display: block;
  width: 100%;
  overflow: hidden;
}

.course-uma-slot .course-selected-image {
  width: 100%;
}

.course-support-slot .course-selected-image {
  aspect-ratio: 3 / 4;
}

.course-selected-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.course-selected-caption {
  display: grid;
  gap: 2px;
  width: 100%;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.28;
  text-align: center;
  overflow-wrap: anywhere;
}

.course-selected-title {
  color: var(--muted);
  font-size: 0.62rem;
}

.course-selected-name {
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 650;
}

.course-supports {
  display: grid;
  width: min(508px, 100%);
  min-width: 0;
  align-content: start;
  justify-self: center;
}

.course-support-heading {
  min-height: 24px;
  margin-bottom: 9px;
}

.course-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 160px));
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  justify-content: center;
  justify-self: center;
}

.course-support-slot {
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.course-support-placeholder {
  gap: 3px;
}

.course-support-placeholder svg {
  width: 18px;
  height: 18px;
}

.course-support-slot.is-filled {
  position: relative;
  display: grid;
  gap: 7px;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  animation: slot-arrive 180ms ease-out both;
}

.course-target-actions {
  position: absolute;
  z-index: 7;
  top: calc(100% + 6px);
  left: 50%;
  display: flex;
  gap: 8px;
  width: max-content;
  transform: translateX(-50%);
  animation: course-target-actions-enter 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.course-target-action.icon-button {
  width: 34px;
  height: 34px;
  color: #a8e6ef;
  background: rgb(10 20 25 / 96%);
  border-color: #39535e;
  box-shadow: 0 6px 18px rgb(0 0 0 / 36%);
}

.course-target-action.icon-button:hover {
  color: #e9fcff;
  background: #14252c;
  border-color: #75c5d2;
}

.course-target-action.is-remove {
  color: #ed9da2;
  border-color: #75464b;
}

.course-target-action.is-remove:hover {
  color: #ffdadd;
  background: #2a171a;
  border-color: #c66b73;
}

.course-target-action.is-disabled,
.course-target-action.is-disabled:hover {
  color: #62747b;
  background: rgb(10 20 25 / 96%);
  border-color: #2c3d44;
  box-shadow: none;
  cursor: default;
  opacity: 0.62;
}

.course-target-action:focus-visible {
  outline: 2px solid #b8f3fb;
  outline-offset: 2px;
}

@keyframes course-target-actions-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.course-builder-actions {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 14px;
}

.course-selection-status {
  position: absolute;
  left: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.course-analyze-button {
  position: relative;
  min-width: 124px;
  padding-inline: 10px;
  overflow: hidden;
}

.course-analyze-button:disabled {
  color: #557078;
  background: #16252b;
  border-color: #2b3e46;
  cursor: not-allowed;
}

.course-analyze-button.is-loading::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 34%) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: course-button-scan 850ms ease-in-out infinite;
}

.course-results {
  position: relative;
  margin-top: 30px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.course-results.is-visible {
  opacity: 1;
  transform: none;
}

.course-results::before {
  display: block;
  height: 22px;
  content: "";
}

.course-meter-section,
.course-skill-section {
  border-bottom: 1px solid var(--line);
}

.course-meter-section {
  position: relative;
  padding: 16px 0 22px;
}

.course-skill-section {
  padding: 22px 0;
}

.course-meter-sticky {
  position: sticky;
  z-index: 6;
  top: 0;
  min-width: 0;
}

.course-meter-sticky.is-heading-stuck {
  background: rgb(8 13 17 / 97%);
  backdrop-filter: blur(14px) saturate(112%);
}

.course-meter-sticky.is-meter-expanded > .course-meter-body {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: var(--course-meter-dock-body-max-height, 70vh);
  padding-top: 16px;
  overflow-y: auto;
  scrollbar-width: none;
  background: rgb(8 13 17 / 98%);
  backdrop-filter: blur(14px) saturate(112%);
}

.course-meter-sticky.is-meter-expanded > .course-meter-body::-webkit-scrollbar {
  display: none;
}

.course-section-heading {
  margin-bottom: 16px;
}

.course-meter-heading {
  position: relative;
  margin-bottom: 0;
  min-height: 28px;
  padding-block: 5px;
}

.course-meter-title {
  min-width: 0;
}

.course-meter-title h3 {
  overflow-wrap: anywhere;
}

.course-meter-heading-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.course-meter-toggle {
  width: 28px;
  height: 28px;
  border-color: transparent;
}

.course-meter-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.course-meter-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.course-meter-body {
  min-width: 0;
}

.course-section-heading h3 {
  margin: 0;
  font-size: 0.91rem;
}

.course-section-heading > div > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.63rem;
}

.course-meter-toggle-label {
  color: var(--muted);
  font-size: 0.63rem;
  white-space: nowrap;
}

.course-meter-segment-tooltip {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.78fr);
  width: min(376px, calc(100% - 88px));
  box-sizing: border-box;
  padding: 6px 5px;
  overflow: hidden;
  color: #e7faff;
  font-size: 0.68rem;
  line-height: 1;
  pointer-events: none;
  background: #111d23;
  border: 1px solid #38515c;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 28%);
  transform: translateY(-50%);
}

.course-meter-segment-tooltip-field {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.course-meter-segment-tooltip-field + .course-meter-segment-tooltip-field::before {
  position: absolute;
  left: -0.15em;
  color: rgb(174 208 218 / 62%);
  content: "｜";
}

.course-meter-segment-tooltip-field.is-label {
  text-overflow: ellipsis;
}

@media (width <= 560px) {
  .course-meter-segment-tooltip {
    grid-template-areas:
      "label label"
      "range length";
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    width: min(260px, calc(100% - 88px));
    row-gap: 5px;
    line-height: 1.12;
  }

  .course-meter-segment-tooltip-field.is-label {
    grid-area: label;
  }

  .course-meter-segment-tooltip-field.is-range {
    grid-area: range;
  }

  .course-meter-segment-tooltip-field.is-length {
    grid-area: length;
  }

  .course-meter-segment-tooltip-field.is-range::before {
    content: none;
  }
}

.course-meter-segment-tooltip-number {
  display: inline-block;
  min-width: 4ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.course-meter {
  --course-segment-default: rgb(130 228 244 / 20%);
  --course-segment-opening: rgb(120 218 180 / 20%);
  --course-segment-middle: rgb(145 185 237 / 20%);
  --course-segment-final: rgb(238 144 152 / 20%);
  --course-segment-straight: rgb(130 228 244 / 20%);
  --course-segment-corner: rgb(220 167 218 / 18%);
  --course-segment-uphill: rgb(233 196 158 / 20%);
  --course-segment-downhill: rgb(120 218 180 / 18%);
  --course-segment-default-border: rgb(130 228 244 / 68%);
  --course-segment-opening-border: rgb(120 218 180 / 66%);
  --course-segment-middle-border: rgb(145 185 237 / 68%);
  --course-segment-final-border: rgb(238 144 152 / 72%);
  --course-segment-straight-border: rgb(130 228 244 / 68%);
  --course-segment-corner-border: rgb(220 167 218 / 66%);
  --course-segment-uphill-border: rgb(233 196 158 / 70%);
  --course-segment-downhill-border: rgb(120 218 180 / 64%);
  --course-highlight-border-gradient:
    linear-gradient(
      90deg,
      rgb(130 228 244 / 66%),
      rgb(220 251 255 / 76%),
      rgb(130 228 244 / 66%)
    );

  display: grid;
  gap: 8px;
  min-width: 0;
}

.course-meter-ruler,
.course-meter-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.course-meter-ruler {
  min-height: 38px;
  margin-bottom: 3px;
  align-items: end;
}

.course-meter-row {
  min-height: 30px;
}

.course-meter-label {
  color: var(--muted);
  font-size: 0.62rem;
  text-align: right;
  white-space: nowrap;
}

.course-meter-track {
  position: relative;
  min-width: 0;
  height: 26px;
  background: #0c151a;
  border: 1px solid #263942;
  border-radius: 4px;
}

.course-meter-ruler .course-meter-track {
  height: 1px;
  background: #425762;
  border: 0;
  border-radius: 0;
}

.course-meter-tick {
  position: absolute;
  bottom: 0;
  left: var(--tick-left);
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
}

.course-meter-tick:first-child {
  justify-items: start;
  transform: none;
}

.course-meter-tick:last-child {
  justify-items: end;
  transform: translateX(-100%);
}

.course-meter-tick i {
  width: 1px;
  height: 6px;
  background: #607782;
}

.course-meter-tick small {
  margin-bottom: 5px;
  color: var(--faint);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.54rem;
}

.course-meter-segment-group,
.course-meter-highlight {
  position: absolute;
  top: 0;
  left: var(--segment-left);
  width: var(--segment-width);
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
}

.course-meter-segment-group {
  background: var(--segment-gradient);
}

.course-meter-segment-group::before,
.course-meter-highlight::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--segment-border-gradient, var(--course-highlight-border-gradient));
  pointer-events: none;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.course-meter-segment {
  position: absolute;
  top: 0;
  left: var(--segment-left);
  width: var(--segment-width);
  height: 100%;
  overflow: hidden;
  color: inherit;
  outline: 0;
}

.course-meter-segment::after {
  position: absolute;
  z-index: 3;
  inset: 1px 0;
  content: "";
  border: 1px solid rgb(226 250 255 / 90%);
  border-radius: 2px;
  box-shadow: 0 0 7px rgb(130 228 244 / 34%);
  opacity: 0;
  pointer-events: none;
}

.course-meter-segment.is-inspected::after,
.course-meter-segment:focus-visible::after {
  opacity: 1;
}

.course-meter-segment-label {
  position: absolute;
  top: 0;
  left: var(--segment-left);
  z-index: 4;
  display: grid;
  width: var(--segment-width);
  height: 100%;
  overflow: hidden;
  place-items: center;
  color: #eaf5f7;
  font-size: 0.54rem;
  white-space: nowrap;
  pointer-events: none;
}

.course-meter-segment-label > span {
  overflow: hidden;
  padding-inline: 3px;
  text-overflow: ellipsis;
}

.course-meter-segment.is-final_straight,
.course-meter-segment.is-final_corner {
  box-shadow: inset 0 -2px 0 rgb(238 144 152 / 72%);
}

.course-meter-row.is-highlight .course-meter-track {
  border-color: rgb(130 228 244 / 32%);
  box-shadow: inset 0 0 14px rgb(130 228 244 / 3%);
}

.course-meter-track.is-complete {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.course-meter-highlight {
  background: rgb(130 228 244 / 58%);
  box-shadow: 0 0 8px rgb(130 228 244 / 38%);
  animation: meter-highlight-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.course-meter-highlight.is-approximate {
  background:
    repeating-linear-gradient(
      135deg,
      rgb(130 228 244 / 64%) 0 5px,
      rgb(130 228 244 / 35%) 5px 10px
    );
}

.course-meter-row.is-highlight {
  align-items: start;
}

.course-meter-row.is-highlight > .course-meter-label {
  padding-top: 8px;
}

.course-meter-highlight-stack {
  display: grid;
  min-width: 0;
}

.course-meter-range-values {
  position: relative;
  height: 20px;
  padding-top: 5px;
  overflow: visible;
  color: var(--muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.56rem;
  line-height: 1.4;
}

.course-meter-range-values span {
  position: absolute;
  top: 5px;
  left: var(--segment-left, 0%);
  display: block;
  width: var(--segment-width, 100%);
  overflow: visible;
  text-align: center;
  white-space: nowrap;
}

.course-results.is-visible .course-meter-segment-group {
  animation: meter-segment-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left center;
}

.course-skill-detail {
  display: grid;
  grid-template:
    "skill source description conditions" minmax(126px, auto)
    / minmax(170px, 0.75fr) minmax(0, 0.9fr) minmax(240px, 1.25fr) minmax(170px, 1fr);
  gap: 10px 18px;
  padding: 17px 0 0 72px;
}

.course-skill-detail:empty {
  display: none;
}

.course-selected-skill-card {
  grid-area: skill;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  align-self: start;
  min-width: 0;
  min-height: 62px;
  padding: 7px 9px;
  background: var(--skill-rarity-background);
  border: 1px solid var(--skill-rarity-border);
  border-radius: 6px;
  color: var(--skill-rarity-text);
}

.course-selected-skill-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.course-selected-skill-card strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-detail-block {
  min-width: 0;
}

.course-detail-source {
  grid-area: source;
}

.course-detail-description-block {
  grid-area: description;
}

.course-detail-label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.6rem;
}

.course-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.course-detail-chips > span {
  padding: 4px 6px;
  color: #dce9ed;
  font-size: 0.58rem;
  background: #111d23;
  border: 1px solid #2d414a;
  border-radius: 4px;
}

.course-detail-description {
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: calc(3 * 1.65em);
  margin: 0;
  color: #c5d5da;
  font-size: 0.6rem;
  line-height: 1.65;
}

.course-detail-description-body {
  display: block;
}

.course-detail-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: #9fcbd2;
  font-size: 0.57rem;
  line-height: 1.45;
}

.course-detail-scope > span {
  white-space: nowrap;
}

.course-condition-details {
  grid-area: conditions;
  align-self: start;
  min-width: 0;
}

.course-condition-details summary {
  width: fit-content;
  color: var(--muted);
  font-size: 0.61rem;
  cursor: pointer;
}

.course-condition-details code {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 7px 0 0;
  overflow-wrap: anywhere;
  color: #a9bdc5;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.57rem;
  line-height: 1.5;
}

.course-skill-heading {
  align-items: end;
}

.course-skill-search,
.course-picker-search {
  position: relative;
  display: block;
  min-width: 0;
}

.course-skill-search {
  width: min(260px, 42%);
}

.course-skill-search > svg,
.course-picker-search > svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--faint);
  pointer-events: none;
  transform: translateY(-50%);
}

.course-skill-search input,
.course-picker-search input {
  width: 100%;
  min-height: 38px;
  padding: 7px 11px 7px 34px;
  color: var(--text);
  font-size: 0.72rem;
  background: #0d171c;
  border: 1px solid #31454f;
  border-radius: 6px;
}

.course-skill-search input:focus,
.course-picker-search input:focus {
  border-color: var(--cyan-strong);
  outline: none;
  box-shadow: 0 0 0 2px rgb(130 228 244 / 10%);
}

.course-filter-bar {
  display: flex;
  gap: 6px;
  padding-bottom: 13px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.course-filter-bar button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 5px 9px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.course-filter-bar button:hover {
  color: var(--text);
  background: #111d23;
}

.course-filter-bar button.is-active {
  color: var(--text);
  background: rgb(130 228 244 / 8%);
  border-color: rgb(130 228 244 / 28%);
}

.course-filter-bar svg {
  width: 14px;
  height: 14px;
}

.course-filter-bar span,
.course-filter-bar strong {
  font-size: 0.62rem;
}

.course-filter-bar strong {
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
}

.course-filter-bar .course-filter-count {
  display: inline-flex;
  align-items: baseline;
  font-family: "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.course-filter-bar .course-filter-count small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
}

.course-filter-bar [data-course-filter="position"] strong {
  color: var(--cyan);
}

.course-filter-bar [data-course-filter="state"] strong {
  color: var(--warm);
}

.course-filter-bar [data-course-filter="strategy"] strong {
  color: #86d6a8;
}

.course-filter-bar [data-course-filter="course"] strong {
  color: #b7a1ff;
}

.course-filter-bar [data-course-filter="ineligible"] strong {
  color: var(--coral);
}

.course-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 8px;
}

.course-skill-item,
.course-selected-skill-card {
  --skill-rarity-background: #0e181d;
  --skill-rarity-hover-background: #132027;
  --skill-rarity-border: #293c45;
  --skill-rarity-hover-border: #405762;
  --skill-rarity-text: var(--text);
  --skill-rarity-secondary-text: var(--muted);
}

.course-skill-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 7px 9px;
  text-align: left;
  background: var(--skill-rarity-background);
  border: 1px solid var(--skill-rarity-border);
  border-radius: 6px;
  color: var(--skill-rarity-text);
  transition:
    border-color 140ms ease,
    box-shadow 160ms ease,
    transform 90ms ease;
}

.course-skill-item[data-skill-rarity="normal"],
.course-selected-skill-card[data-skill-rarity="normal"] {
  --skill-rarity-background: linear-gradient(
    90deg,
    #fafafa 0%,
    #efefef 18%,
    #e5e5ed 45%,
    #dcdae7 72%,
    #c6c6d0 100%
  );
}

.course-skill-item[data-skill-rarity="gold"],
.course-selected-skill-card[data-skill-rarity="gold"] {
  --skill-rarity-background: linear-gradient(
    90deg,
    #fffee7 0%,
    #fef8be 18%,
    #ffeb94 35%,
    #fddc71 55%,
    #ffd65a 72%,
    #fac32b 100%
  );
}

.course-skill-item[data-skill-rarity="unique"],
.course-selected-skill-card[data-skill-rarity="unique"] {
  --skill-rarity-background: linear-gradient(
    90deg,
    #deffd4 0%,
    #c3f9e9 18%,
    #aaf0fa 30%,
    #b4dfff 47%,
    #c3c4fd 63%,
    #e0b8ff 82%,
    #fab2f4 100%
  );
}

.course-skill-item[data-skill-rarity="evolution"],
.course-selected-skill-card[data-skill-rarity="evolution"] {
  --skill-rarity-background: linear-gradient(
    90deg,
    #ffe9ef 0%,
    #fedcea 18%,
    #ffd2e7 35%,
    #ffc9e1 55%,
    #ffb6e0 75%,
    #ffa1d6 100%
  );
}

.course-skill-item[data-skill-rarity]:not([data-skill-rarity="unknown"]),
.course-selected-skill-card[data-skill-rarity]:not([data-skill-rarity="unknown"]) {
  --skill-rarity-hover-background: var(--skill-rarity-background);
  --skill-rarity-border: rgb(255 255 255 / 24%);
  --skill-rarity-hover-border: rgb(255 255 255 / 62%);
  --skill-rarity-text: #493f43;
  --skill-rarity-secondary-text: #6d6267;
}

.course-skill-item:hover {
  background: var(--skill-rarity-hover-background);
  border-color: var(--skill-rarity-hover-border);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 18%),
    0 3px 10px rgb(0 0 0 / 16%);
}

.course-skill-item.is-selected {
  background: var(--skill-rarity-background);
  border-color: rgb(130 228 244 / 48%);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.course-skill-item.is-ineligible,
.course-selected-skill-card.is-ineligible {
  filter: brightness(0.68);
}

.course-skill-item.is-ineligible:hover,
.course-skill-item.is-ineligible.is-selected,
.course-selected-skill-card.is-ineligible {
  filter: brightness(0.76);
}

.course-skill-item > img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.course-skill-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.course-skill-copy strong,
.course-skill-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-skill-copy strong {
  color: var(--skill-rarity-text);
  font-size: 0.69rem;
}

.course-skill-copy small {
  color: var(--skill-rarity-secondary-text);
  font-size: 0.58rem;
}

.course-empty-result {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  min-height: 110px;
  place-items: center;
  place-content: center;
  color: var(--muted);
  font-size: 0.68rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.course-empty-result svg {
  width: 22px;
  height: 22px;
}

body.is-course-picker-open {
  overflow: hidden;
}

body.is-course-picker-open .main-view {
  overflow: hidden;
}

.course-picker-layer {
  --course-picker-top: 16px;

  position: fixed;
  z-index: 12;
  inset: 0;
  display: grid;
  padding-inline: 12px;
  place-items: start center;
}

.course-picker-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgb(3 8 11 / 76%);
  border: 0;
  cursor: default;
  backdrop-filter: blur(6px);
}

.course-picker {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(980px, calc(100cqw - 24px));
  height: min(760px, calc(100cqh - 32px));
  min-height: 0;
  margin-top: var(--course-picker-top);
  overflow: hidden;
  background: #0c151a;
  border: 1px solid #3a505a;
  border-radius: var(--radius);
  box-shadow: 0 28px 90px rgb(0 0 0 / 48%);
  animation: picker-enter 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.course-picker-heading {
  min-height: 70px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.course-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 196px;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
}

.course-picker-filter select {
  min-height: 38px;
}

.course-picker-filter[hidden] + .course-picker-availability {
  grid-column: 2 / 4;
  width: 196px;
  justify-self: end;
}

.course-picker-availability {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  min-height: 38px;
  overflow: hidden;
  background: #0d171c;
  border: 1px solid #31454f;
  border-radius: 6px;
}

.course-picker-availability button {
  min-width: 0;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition:
    color 140ms ease,
    background-color 140ms ease;
}

.course-picker-availability button + button {
  border-left: 1px solid #31454f;
}

.course-picker-availability button[aria-checked="true"] {
  color: #071419;
  background: #8cdeeb;
}

.course-picker-availability button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #b8f3fb;
  outline-offset: -3px;
}

.course-select-field select[data-scenario-select] option {
  color: var(--text);
}

.course-select-field select option.is-unreleased,
.course-select-field select.has-unreleased-value {
  color: #71858e;
}

.course-picker-feedback {
  min-height: 19px;
  padding: 0 18px 5px;
  color: var(--muted);
  font-size: 0.62rem;
}

.course-picker-feedback.is-error {
  color: var(--coral);
}

.course-picker-grid {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 3px 18px 54px;
  overflow: auto;
  align-content: start;
}

.course-picker-grid.is-uma {
  grid-template-columns:
    repeat(auto-fill, minmax(min(clamp(53px, 15cqw, 112px), 100%), 1fr));
  grid-auto-rows: max-content;
}

.course-picker-grid.is-support {
  grid-template-columns:
    repeat(auto-fill, minmax(min(clamp(54px, 16cqw, 132px), 100%), 1fr));
}

.course-picker-entry {
  position: relative;
  width: 100%;
  min-width: 0;
  justify-self: center;
  transition: filter 140ms ease;
}

.course-picker-entry.is-active {
  z-index: 6;
}

.course-picker-entry.is-selected .course-picker-item {
  filter: brightness(0.66) saturate(0.82);
}

.course-picker-item-actions {
  top: calc(100% + 4px);
}

.course-picker-sentinel {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
}

.course-picker-item {
  display: block;
  justify-self: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: filter 140ms ease, opacity 140ms ease;
}

.course-picker-item.is-support {
  aspect-ratio: 3 / 4;
}

.course-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.course-picker-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 9px 18px;
  color: var(--muted);
  font-size: 0.62rem;
  border-top: 1px solid var(--line);
}

.course-picker-toast {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: 50%;
  max-width: min(320px, calc(100% - 48px));
  padding: 10px 16px;
  color: #e6f7fa;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  background: rgb(10 20 25 / 94%);
  border: 1px solid #49636d;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgb(0 0 0 / 46%);
  transform: translate(-50%, -50%);
}

.course-picker-toast.is-visible {
  animation: course-picker-toast 1400ms ease both;
}

@keyframes course-picker-toast {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 5px));
  }

  12%,
  78% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 3px));
  }
}

.settings-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.settings-scale-field,
.settings-action-links,
.settings-scale-label {
  display: flex;
  align-items: center;
}

.settings-scale-group {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.settings-scale-field {
  gap: 12px;
  min-width: 0;
}

.settings-scale-note {
  display: none;
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.app-frame[data-ui-scale]:not([data-ui-scale="100"]) .settings-scale-note {
  display: block;
}

.settings-scale-label {
  gap: 7px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.settings-scale-label svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}

.settings-scale-select {
  width: 112px;
}

.settings-scale-select select {
  color-scheme: dark;
  padding: 6px 0;
  text-align: center;
  text-align-last: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.settings-scale-select select option {
  color: var(--text);
  background: #0f1722;
}

.settings-scale-select select:hover,
.settings-scale-select select:focus-visible {
  background: transparent;
  border-color: transparent;
}

.settings-scale-select select:focus-visible {
  outline: 1px solid rgb(130 228 244 / 42%);
  outline-offset: 2px;
  box-shadow: none;
}

.settings-scale-select > svg {
  display: none;
}

.settings-action-links {
  gap: 12px;
}

.settings-account {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.settings-account[hidden] {
  display: none;
}

.settings-account-icon {
  display: grid;
  place-items: center;
  color: var(--cyan);
}

.settings-account-icon svg {
  width: 19px;
  height: 19px;
}

.settings-account-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-account-copy small {
  color: var(--muted);
  font-size: 0.64rem;
}

.settings-account-copy strong {
  font-size: 0.82rem;
}

.settings-account-copy > span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.settings-account-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.settings-article-link {
  color: var(--cyan);
  font-size: 0.75rem;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.settings-article-link:hover,
.reference-links a:hover {
  color: #d5f8ff;
}

.statement-list {
  display: grid;
}

.statement-list > section {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.statement-list > section > svg,
.statement-list > section > .settings-brand-mark {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--cyan);
}

.settings-brand-mark {
  display: block;
  object-fit: contain;
}

.statement-list h2 {
  margin: 0;
  font-size: 0.84rem;
}

.statement-list p {
  max-width: 860px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.75;
}

.reference-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}

.reference-links a {
  color: var(--cyan);
  font-size: 0.75rem;
  text-underline-offset: 4px;
}

.primary-button,
.secondary-button,
.discord-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 15px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 160ms ease,
    transform 90ms ease;
}

.primary-button {
  color: #061217;
  font-weight: 750;
  background: var(--cyan);
  border: 1px solid var(--cyan);
}

.primary-button:hover {
  background: #a5edf8;
}

.secondary-button {
  color: var(--muted);
  background: #10191f;
  border: 1px solid var(--line);
}

.secondary-button:hover {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--line-strong);
}

.discord-button {
  color: #fff;
  font-weight: 750;
  background: #5865f2;
  border: 1px solid #5865f2;
}

.discord-button:not(:disabled):hover {
  background: color-mix(in srgb, #5865f2 86%, #000);
  border-color: color-mix(in srgb, #5865f2 86%, #000);
  box-shadow: 0 8px 22px rgb(88 101 242 / 22%);
}

.discord-button:not(:disabled):active {
  background: color-mix(in srgb, #5865f2 78%, #000);
  border-color: color-mix(in srgb, #5865f2 78%, #000);
  transform: translateY(1px);
}

.discord-button:focus-visible {
  outline: 2px solid #e0e3ff;
  outline-offset: 3px;
}

.primary-button svg,
.secondary-button svg {
  width: 16px;
  height: 16px;
}

.discord-mark {
  display: block;
  width: 20px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
}

.setup-layer {
  --setup-backdrop-blur: 3px;
  --setup-glass-blur: 14px;

  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  width: 100cqw;
  height: 100cqh;
  overflow: hidden;
  place-content: center;
  place-items: center;
  padding: 16px;
}

.setup-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(3 8 11 / 14%);
  backdrop-filter: blur(var(--setup-backdrop-blur)) brightness(84%);
}

.setup-depth {
  position: relative;
  z-index: 1;
  place-self: center;
  width: min(468px, calc(100cqw - 24px));
  height: min(700px, calc(100cqh - 32px));
  max-height: calc(100cqh - 32px);
  perspective: 1200px;
}

.setup-layer[data-setup-state="account-conflict"] .setup-depth {
  width: min(760px, calc(100cqw - 24px));
}

.setup-flip-shell {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: filter, transform;
}

.setup-card-depth-back {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 10px 28px 76px rgb(0 0 0 / 40%);
  backface-visibility: hidden;
  transform: translateZ(-8px);
}

.setup-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(138deg, rgb(220 249 255 / 9%), transparent 22%),
    linear-gradient(318deg, rgb(90 180 198 / 5%), transparent 34%),
    rgb(7 17 22 / 14%);
  border: 1px solid rgb(218 247 252 / 34%);
  border-radius: var(--radius);
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 20%),
    inset -1px -1px 0 rgb(75 142 155 / 14%),
    inset 0 0 24px rgb(151 224 237 / 4%),
    0 24px 70px rgb(0 0 0 / 30%);
  backface-visibility: hidden;
  backdrop-filter: blur(var(--setup-glass-blur)) saturate(138%) brightness(104%);
  transform: translateZ(1px);
  transform-style: preserve-3d;
}

.setup-card::before {
  position: absolute;
  z-index: 1;
  inset: -24% -54%;
  display: block;
  pointer-events: none;
  background: linear-gradient(
    116deg,
    transparent 34%,
    rgb(222 249 255 / 2%) 39%,
    rgb(226 251 255 / 12%) 43%,
    rgb(255 255 255 / 4%) 48%,
    transparent 55%
  );
  mix-blend-mode: screen;
  transform: translate3d(-7%, 0, 2px);
  content: "";
}

.setup-pointer-light {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 118px 190px at var(--setup-light-x, 50%) var(--setup-light-y, 50%),
      rgb(230 252 255 / 15%),
      rgb(145 225 239 / 5%) 36%,
      transparent 70%
    ),
    linear-gradient(
      116deg,
      transparent 42%,
      rgb(233 252 255 / 3%) 48%,
      transparent 54%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 160ms ease;
}

.setup-card.is-pointer-lit .setup-pointer-light {
  opacity: 1;
}

.setup-card-header {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid rgb(145 172 183 / 18%);
}

.setup-brand {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.setup-brand img {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

.setup-layer[data-setup-state="welcome"] {
  cursor: pointer;
}

.setup-layer:is(
  [data-setup-state="welcome"],
  [data-setup-state="post-welcome"]
) .setup-card-header {
  justify-content: center;
}

.setup-layer:is(
  [data-setup-state="welcome"],
  [data-setup-state="post-welcome"]
) .setup-brand {
  justify-content: center;
}

.setup-progress {
  display: flex;
  width: min(244px, 62vw);
  gap: 5px;
  align-items: center;
}

.setup-progress-node {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #647c86;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.62rem;
  background: #111b21;
  border: 1px solid #31434c;
  border-radius: 50%;
}

.setup-progress-node svg {
  width: 12px;
  height: 12px;
}

.setup-progress-node.is-active {
  color: #071318;
  background: var(--cyan);
  border-color: var(--cyan);
}

.setup-progress-node.is-complete {
  color: #06120e;
  background: var(--mint);
  border-color: var(--mint);
}

.setup-progress-line {
  display: block;
  flex: 1 1 18px;
  min-width: 7px;
  max-width: 22px;
  height: 1px;
  background: #31434c;
}

.setup-stage {
  position: relative;
  z-index: 2;
  min-height: 0;
  transform-style: preserve-3d;
}

.setup-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 24px;
  height: 100%;
  min-height: 0;
  padding: clamp(24px, 5vh, 38px) 30px 26px;
  backface-visibility: hidden;
}

.setup-page.is-centered {
  place-items: center;
  place-content: center;
  text-align: center;
}

.setup-page.is-welcome {
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  place-content: normal;
  padding-block: 26px;
}

.setup-welcome-title {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.2;
}

.setup-page.is-post-welcome {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 20px;
}

.post-welcome-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.post-welcome-close {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.post-welcome-content {
  display: grid;
  gap: 14px;
  align-content: center;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.post-welcome-content h2 {
  margin: 0;
  font-size: 1.54rem;
  line-height: 1.32;
}

.post-welcome-content p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.8;
}

.post-welcome-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.post-welcome-actions > button {
  min-height: 40px;
}

.post-welcome-dismiss {
  color: var(--muted);
}

.setup-page.is-post-welcome > .setup-feedback[hidden] {
  display: none;
}

.setup-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 16px;
  align-items: end;
  width: 100%;
  min-width: 0;
}

.setup-heading.is-centered {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
}

.setup-heading.is-centered .setup-copy {
  grid-column: 2;
}

.setup-heading.is-centered .setup-skip-button {
  grid-column: 3;
}

.setup-copy h2 {
  margin: 7px 0 0;
  font-size: 1.42rem;
  line-height: 1.28;
}

.setup-copy.is-centered {
  text-align: center;
}

.setup-step-label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 700;
}

.setup-step-label svg {
  width: 15px;
  height: 15px;
}

.account-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
  align-self: center;
}

.setup-stage button,
.setup-stage button * {
  cursor: pointer;
}

.account-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 118px;
  padding: 14px 10px;
  background: rgb(11 18 22 / 64%);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 180ms ease,
    transform 90ms ease;
}

.account-choice:hover {
  background: rgb(20 32 38 / 82%);
}

.account-choice.is-guest {
  color: #e7f0f2;
  border-color: #61757e;
}

.account-choice.is-guest:hover {
  border-color: #a9bec6;
  box-shadow: 0 0 24px rgb(220 237 242 / 8%);
}

.account-choice.is-account {
  color: #dffbed;
  grid-template-columns: minmax(0, 1fr) 18px;
  border-color: rgb(120 218 180 / 55%);
}

.account-choice.is-account:hover {
  background: rgb(120 218 180 / 8%);
  border-color: var(--mint);
  box-shadow: 0 0 26px rgb(120 218 180 / 10%);
}

.account-choice strong {
  font-size: 0.82rem;
  white-space: nowrap;
}

.account-choice-main {
  display: grid;
  gap: 10px;
  place-items: center;
}

.account-choice-icon {
  display: grid;
  place-items: center;
}

.account-choice-icon svg {
  width: 31px;
  height: 31px;
}

.account-choice-arrow {
  align-self: center;
}

.account-choice-arrow svg {
  width: 17px;
  height: 17px;
}

.setup-hero-icon {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  background: rgb(130 228 244 / 9%);
  border: 1px solid rgb(130 228 244 / 28%);
  border-radius: 50%;
}

.setup-hero-icon svg {
  width: 34px;
  height: 34px;
}

.setup-hero-icon.is-account {
  color: var(--mint);
  background: rgb(120 218 180 / 9%);
  border-color: rgb(120 218 180 / 32%);
}

.setup-hero-icon.is-complete {
  color: #06140f;
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 34px rgb(120 218 180 / 16%);
}

.setup-hero-icon.is-warning {
  color: #f5c57e;
  background: rgb(245 197 126 / 8%);
  border-color: rgb(245 197 126 / 30%);
}

.account-discord-hero {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
}

.account-discord-hero-mark {
  display: block;
  width: 64px;
  height: 48px;
  object-fit: contain;
}

.account-login-copy,
.account-confirm-copy {
  display: grid;
  gap: 10px;
  place-items: center;
  align-self: center;
  color: var(--muted);
  text-align: center;
}

.setup-page.is-account-state {
  grid-template-rows: minmax(0, 1fr) auto;
  place-content: normal;
}

.account-state-content {
  display: grid;
  gap: 22px;
  place-items: center;
  align-self: center;
  width: 100%;
  min-width: 0;
}

.account-login-copy p,
.account-confirm-copy p,
.account-state-copy {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.7;
}

.account-confirm-copy strong {
  color: var(--text);
  font-size: 0.84rem;
}

.account-discord-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
  transform: none;
}

.setup-page.is-account-conflict {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.account-conflict-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.account-conflict-scroll::-webkit-scrollbar {
  display: none;
}

.account-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  padding: 2px;
}

.account-data-card {
  display: grid;
  gap: 13px;
  align-content: start;
  min-width: 0;
  padding: 15px 16px;
  color: var(--text);
  text-align: left;
  background: rgb(8 15 19 / 46%);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 170ms ease,
    transform 90ms ease;
}

.account-data-card.is-guest {
  border-color: rgb(169 190 198 / 40%);
}

.account-data-card.is-account {
  border-color: rgb(120 218 180 / 45%);
}

.account-data-card:hover {
  background: rgb(15 26 31 / 70%);
}

.account-data-card.is-guest:hover {
  border-color: #a9bec6;
}

.account-data-card.is-account:hover {
  border-color: var(--mint);
  box-shadow: 0 0 24px rgb(120 218 180 / 8%);
}

.account-data-heading {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: center;
}

.account-data-heading svg {
  width: 16px;
  height: 16px;
}

.account-data-heading svg:first-child {
  color: var(--cyan);
}

.account-data-card.is-account .account-data-heading svg:first-child {
  color: var(--mint);
}

.account-data-heading svg:last-child {
  color: var(--muted);
}

.account-data-heading strong {
  font-size: 0.82rem;
}

.account-data-list {
  display: grid;
}

.account-data-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-block: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  border-top: 1px solid rgb(145 172 183 / 10%);
}

.account-data-row b {
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.account-confirm-actions {
  width: min(410px, 100%);
}

.account-cancel-link {
  min-height: 36px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 0.7rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.account-cancel-link:hover {
  color: var(--text);
}

.account-logout-button {
  color: #f0b7ba;
  border-color: rgb(200 91 99 / 44%);
}

@media (width > 700px) {
  .setup-layer[data-setup-state="account-conflict"] .setup-depth {
    height: min(620px, calc(100cqh - 32px));
  }
}

.single-resource-field {
  display: grid;
  align-self: center;
}

.setup-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  align-self: center;
  min-height: 0;
  overflow: clip;
  padding: 3px;
}

.setup-resource-grid.is-tickets {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.resource-field {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.resource-field.is-wide {
  grid-column: 1 / -1;
}

.resource-field > span {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.resource-field > span svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--cyan);
}

.resource-field input {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: rgb(8 14 18 / 72%);
  border: 1px solid #344852;
  border-radius: 6px;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.resource-field input:hover {
  border-color: #49616c;
}

.resource-field input:focus {
  background: #0b1419;
  border-color: var(--cyan-strong);
  box-shadow: inset 0 0 0 1px rgb(130 228 244 / 10%);
}

.setup-option-grid {
  display: grid;
  gap: 14px;
  align-self: center;
  width: 100%;
  min-height: 0;
}

.setup-option-field {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.setup-option-field > span:first-child {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.setup-option-field > span:first-child svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--cyan);
}

.setup-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-evenly;
  justify-self: center;
  width: min(300px, 100%);
  min-height: 44px;
}

.setup-actions.is-centered {
  justify-content: center;
}

.setup-icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background: rgb(13 27 34 / 58%);
}

.setup-icon-button.is-primary {
  color: #061217;
  background: var(--cyan);
  border-color: var(--cyan);
}

.setup-icon-button.is-primary:hover {
  color: #061217;
  background: #a5edf8;
  border-color: #a5edf8;
}

.setup-skip-button {
  align-self: end;
  color: #b8d6de;
}

.setup-feedback {
  margin: 0;
  color: #f3a8a8;
  font-size: 0.82rem;
  text-align: center;
}

.catalog-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.catalog-page-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0;
  border-bottom: 1px solid var(--line);
}

.catalog-tabs {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px;
  align-items: center;
  height: var(--page-top-control-height);
  padding: 0 3px;
}

.catalog-tabs button {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: var(--page-top-control-height);
  min-height: var(--page-top-control-height);
  padding: 5px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.catalog-tabs button::after {
  position: absolute;
  right: 10px;
  bottom: -4px;
  left: 10px;
  height: 2px;
  content: "";
  background: var(--cyan);
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.catalog-tabs button:hover {
  color: #c5d8de;
}

.catalog-tabs button.is-active {
  color: var(--text);
}

.catalog-tabs button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.catalog-tabs svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}

.catalog-surface {
  min-height: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.catalog-heading-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  width: min(430px, 100%);
  min-width: 0;
}

.catalog-search {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: min(350px, 100%);
  min-width: 0;
  color: var(--muted);
}

.catalog-search svg {
  width: 16px;
  height: 16px;
}

.catalog-search input {
  width: 100%;
  height: var(--page-top-control-height);
  min-height: var(--page-top-control-height);
  padding: 5px 9px;
  color: var(--text);
  font-size: 0.78rem;
  background: #0a1217;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.catalog-search input:focus {
  border-color: var(--cyan-strong);
}

.catalog-count {
  color: var(--muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.catalog-status {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  color: var(--muted);
  font-size: 0.74rem;
}

.catalog-status.is-error {
  color: var(--coral);
}

.catalog-status svg {
  width: 18px;
  height: 18px;
  animation: spin 900ms linear infinite;
}

.catalog-status.is-error svg {
  animation: none;
}

.catalog-grid {
  display: grid;
  gap: 13px;
  place-content: start center;
  min-height: 240px;
  padding: 18px 2px 24px;
}

.catalog-grid.is-uma {
  grid-template-columns: repeat(auto-fill, minmax(88px, 112px));
}

.catalog-grid.is-support {
  grid-template-columns: repeat(auto-fill, minmax(112px, 138px));
}

.catalog-item {
  display: grid;
  width: 100%;
  min-width: 0;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.catalog-item.is-support {
  aspect-ratio: 3 / 4;
}

.catalog-item:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.catalog-list-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 160ms ease;
}

.catalog-list-image.is-pending {
  opacity: 0;
}

.catalog-list-image.is-error {
  opacity: 1;
}

.catalog-image-error {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--coral);
  font-size: 0.7rem;
}

.catalog-inline-status {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--muted);
  font-size: 0.74rem;
}

.catalog-inline-status.is-error {
  color: var(--coral);
}

.catalog-inline-status svg {
  width: 18px;
  height: 18px;
}

body.is-catalog-detail-open .main-view {
  overflow: hidden;
}

.day-summary-layer {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  padding: 24px;
  place-items: center;
}

.day-summary-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: default;
}

body.is-day-summary-open {
  overflow: hidden;
}

body.is-day-summary-open .workspace {
  filter: blur(5px) brightness(55%);
  clip-path: inset(0);
  pointer-events: none;
  user-select: none;
}

.day-summary-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, calc(100cqw - 48px));
  max-height: min(640px, calc(100cqh - 48px));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0c151a;
  border: 1px solid #3a505a;
  border-radius: var(--radius);
  box-shadow: 0 24px 72px rgb(0 0 0 / 48%);
  animation: picker-enter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.day-summary-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: center;
  min-height: 68px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
}

.day-summary-heading > div {
  display: grid;
  gap: 3px;
}

.day-summary-heading span {
  color: var(--muted);
  font-size: 0.68rem;
}

.day-summary-heading time {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.day-summary-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.day-summary-scroll > div {
  padding: 4px 18px 18px;
}

.day-summary-login {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  color: var(--muted);
  font-size: 0.72rem;
  border-bottom: 1px solid var(--line);
}

.day-summary-login svg {
  width: 17px;
  height: 17px;
  color: var(--cyan);
}

.day-summary-login strong {
  margin-left: auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.day-summary-events {
  display: grid;
}

.day-summary-event {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px 0;
}

.day-summary-event-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.day-summary-event-type {
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 700;
}

.day-summary-event h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.day-summary-event-detail {
  margin: 0;
  color: #bfd1d7;
  font-size: 0.72rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.day-summary-event-time {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
}

.day-summary-event-time svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.day-summary-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 4px;
}

.day-summary-target {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.day-summary-target-image {
  display: grid;
  width: 58px;
  height: 70px;
  overflow: hidden;
  place-items: center;
  color: var(--muted);
}

.day-summary-target-image.is-uma {
  height: auto;
  align-self: end;
}

.day-summary-target-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.day-summary-target-image svg {
  width: 22px;
  height: 22px;
}

.day-summary-target strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.day-summary-target-action {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: var(--cyan);
  background: transparent;
  border: 1px solid rgb(130 228 244 / 44%);
  border-radius: 50%;
  cursor: pointer;
}

.day-summary-target-action:hover:not(:disabled) {
  border-color: var(--cyan);
}

.day-summary-target-action:focus-visible {
  outline: 2px solid rgb(130 228 244 / 84%);
  outline-offset: 2px;
}

.day-summary-target-action:disabled {
  color: var(--mint);
  border-color: rgb(118 220 173 / 34%);
  cursor: default;
}

.day-summary-target-action.is-added {
  color: var(--mint);
  border-color: rgb(118 220 173 / 44%);
}

.day-summary-target-action svg {
  width: 16px;
  height: 16px;
}

.day-summary-empty {
  display: grid;
  gap: 10px;
  min-height: 220px;
  place-content: center;
  place-items: center;
  color: var(--muted);
  font-size: 0.74rem;
}

.day-summary-empty svg {
  width: 24px;
  height: 24px;
}

.day-summary-actions {
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  min-height: 58px;
  padding: 7px 15px 10px;
  border-top: 1px solid var(--line);
}

.day-summary-action-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.day-summary-action-button {
  min-width: 112px;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.78rem;
}

.day-summary-anchor-button.is-active {
  color: #dbeaff;
  background: rgb(145 185 237 / 10%);
  border-color: rgb(145 185 237 / 66%);
}

.day-summary-feedback {
  min-height: 0;
  color: var(--mint);
  font-size: 0.68rem;
  line-height: 1.4;
  text-align: center;
}

.day-summary-feedback:empty {
  min-height: 0;
}

.catalog-detail-layer,
.catalog-skill-layer {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  padding: 16px;
  place-items: center;
}

.catalog-skill-layer {
  z-index: 26;
}

.catalog-detail-backdrop,
.catalog-skill-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgb(3 8 11 / 78%);
  border: 0;
  cursor: default;
  backdrop-filter: blur(7px);
}

.catalog-detail-panel,
.catalog-skill-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1080px, calc(100cqw - 32px));
  height: calc(100cqh - 32px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0c151a;
  border: 1px solid #3a505a;
  border-radius: var(--radius);
  box-shadow: 0 28px 90px rgb(0 0 0 / 52%);
  animation: picker-enter 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.catalog-skill-panel {
  width: min(640px, calc(100cqw - 32px));
  height: min(760px, calc(100cqh - 32px));
}

.catalog-detail-heading,
.catalog-skill-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
}

.catalog-detail-identity,
.catalog-skill-identity {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.catalog-detail-identity > div,
.catalog-skill-identity > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.catalog-detail-identity > div > span,
.catalog-skill-identity > div > span {
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.catalog-detail-identity strong,
.catalog-skill-identity strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.catalog-detail-thumbnail,
.catalog-skill-icon {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: 62px;
  height: 62px;
  overflow: hidden;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
}

.catalog-detail-thumbnail img,
.catalog-skill-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.catalog-detail-thumbnail img {
  object-position: center bottom;
}

.catalog-detail-thumbnail.is-uma {
  width: 56px;
  height: auto;
  justify-self: center;
}

.catalog-skill-icon {
  width: 54px;
  height: 54px;
}

.catalog-detail-scroll,
.catalog-skill-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.catalog-detail-content {
  display: grid;
  gap: 24px;
  padding: 20px;
}

.catalog-detail-overview {
  display: grid;
  gap: 24px;
  align-items: start;
}

.catalog-detail-overview.is-uma {
  grid-template-columns: minmax(230px, 360px) minmax(0, 1fr);
}

.catalog-detail-overview.is-support {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.catalog-main-image {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  place-items: center;
  background: transparent;
}

.catalog-main-image.is-uma {
  aspect-ratio: 9 / 10;
}

.catalog-main-image.is-support {
  aspect-ratio: 3 / 4;
}

.catalog-main-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.catalog-detail-data,
.catalog-detail-sections {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.catalog-detail-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.catalog-detail-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.catalog-detail-section h3,
.catalog-skill-section h3 {
  display: flex;
  gap: 9px;
  align-items: baseline;
  margin: 0;
  color: var(--cyan);
  font-size: 0.78rem;
  line-height: 1.3;
}

.catalog-detail-section h3 small {
  color: var(--muted);
  font-size: 0.65rem;
}

.catalog-table-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.catalog-data-table {
  width: 100%;
  min-width: 100%;
  color: var(--text);
  font-size: 0.7rem;
  border-collapse: collapse;
}

.catalog-data-table th,
.catalog-data-table td {
  padding: 8px clamp(5px, 1vw, 10px);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.catalog-data-table thead th {
  color: var(--muted);
  border-top: 1px solid rgb(255 255 255 / 6%);
}

.catalog-data-table tbody th {
  color: var(--muted);
  text-align: left;
}

.catalog-data-table .is-highlighted,
.catalog-aptitude-value.is-highlighted {
  padding: 2px 5px;
  color: #d9f3fb;
  background: rgb(45 103 132 / 32%);
}

.catalog-aptitude-table tr {
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.catalog-aptitude-table th,
.catalog-aptitude-table td {
  border-bottom: 0;
}

.catalog-aptitude-value {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.catalog-aptitude-value > span {
  color: var(--muted);
}

.catalog-support-effect-table {
  min-width: 670px;
  table-layout: fixed;
}

.catalog-support-effect-table th:first-child {
  width: 32%;
  text-align: left;
}

.catalog-support-effect-table thead th:first-child,
.catalog-support-effect-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #0c151a;
}

.catalog-support-effect-table thead th:first-child {
  z-index: 2;
}

.catalog-support-effect-table thead span,
.catalog-support-effect-table thead small {
  display: block;
}

.catalog-support-effect-table thead small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 0.58rem;
}

.catalog-support-effect-table td.is-locked {
  color: var(--faint);
}

.catalog-tag-row,
.catalog-acquisition-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.catalog-tag-row > span,
.catalog-acquisition-list > span {
  padding: 3px 7px;
  color: var(--muted);
  font-size: 0.64rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.catalog-detail-copy,
.catalog-empty-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.catalog-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 8px;
}

.catalog-skill-button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 8px 10px;
  color: var(--skill-rarity-text, #493f43);
  text-align: left;
  background: var(--skill-rarity-background, rgb(255 255 255 / 3%));
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 90ms ease;
}

.catalog-skill-button:hover {
  background: var(--skill-rarity-background, rgb(255 255 255 / 3%));
  border-color: rgb(255 255 255 / 42%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 22%),
    0 3px 10px rgb(0 0 0 / 18%);
}

.catalog-skill-button[data-skill-rarity="normal"] {
  --skill-rarity-background: linear-gradient(90deg, #fafafa, #efefef 18%, #e5e5ed 45%, #dcdae7 72%, #c6c6d0);
}

.catalog-skill-button[data-skill-rarity="gold"] {
  --skill-rarity-background: linear-gradient(90deg, #fffee7, #fef8be 18%, #ffeb94 35%, #fddc71 55%, #ffd65a 72%, #fac32b);
}

.catalog-skill-button[data-skill-rarity="unique"] {
  --skill-rarity-background: linear-gradient(90deg, #deffd4, #c3f9e9 18%, #aaf0fa 30%, #b4dfff 47%, #c3c4fd 63%, #e0b8ff 82%, #fab2f4);
}

.catalog-skill-button[data-skill-rarity="evolution"] {
  --skill-rarity-background: linear-gradient(90deg, #ffe9ef, #fedcea 18%, #ffd2e7 35%, #ffc9e1 55%, #ffb6e0 75%, #ffa1d6);
}

.catalog-skill-button[data-skill-rarity="unknown"] {
  --skill-rarity-background: rgb(255 255 255 / 3%);
  --skill-rarity-text: var(--text);
}

.catalog-skill-button-icon {
  display: grid;
  width: 48px;
  height: 48px;
  overflow: hidden;
  place-items: center;
}

.catalog-skill-button-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.catalog-skill-button > span:last-child {
  min-width: 0;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.catalog-skill-content {
  display: grid;
  gap: 20px;
  padding: 20px;
}

.catalog-skill-section {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.catalog-skill-section p {
  margin: 0;
  color: var(--text);
  font-size: 0.74rem;
  line-height: 1.65;
}

.catalog-condition-row {
  display: grid;
  gap: 6px;
}

.catalog-condition-row > span {
  color: var(--muted);
  font-size: 0.64rem;
}

.catalog-condition-row code {
  display: block;
  padding: 8px 9px;
  overflow-wrap: anywhere;
  color: #c7e6ed;
  font-size: 0.68rem;
  line-height: 1.5;
  white-space: normal;
  background: #091116;
  border-left: 2px solid var(--cyan-strong);
}

@container app-frame (1060px < width <= 1100px) {
  .resource-strip {
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 3.3fr) 86px;
  }
}

@container app-frame (700px < width <= 1100px) {
  .forecast-anchor-status {
    display: grid;
    grid-template-columns: max-content;
    width: 86px;
    gap: 0;
    justify-items: center;
    min-width: 0;
  }
}

@container app-frame (width <= 1060px) {
  .resource-strip {
    grid-template-columns: 56px minmax(0, 1fr) 86px;
  }

  .product-identity > span:last-child {
    display: none;
  }

  .course-condition-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: min(760px, 100%);
  }

  .course-analysis-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .course-skill-detail {
    grid-template:
      "skill source" 126px
      "description conditions" minmax(126px, auto)
      / minmax(0, 1fr) minmax(0, 1fr);
  }
}

@container app-frame (700px < width <= 840px) {
  .resource-summary {
    grid-template-columns: repeat(3, minmax(104px, 1fr));
    row-gap: 7px;
  }

  .resource-summary-group.is-tickets .summary-item:last-child {
    border-left: 0;
  }
}

@media (width <= 700px) {
  .product-page[data-page="support"] {
    padding-top: 24px;
  }

  .support-page-content {
    gap: 24px;
    padding-bottom: 24px;
  }

  .support-page-intro {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }

  .support-page-icon {
    width: 32px;
    height: 32px;
  }

  .support-page-icon svg {
    width: 26px;
    height: 26px;
  }

  .support-page-intro h1 {
    font-size: 1.2rem;
  }

  .support-page-intro p {
    margin-top: 6px;
    font-size: 0.78rem;
  }

  .support-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-principles li {
    padding: 16px 0;
  }

  .support-principles li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .support-review-facts {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .support-review-facts > div {
    padding: 14px 0;
  }

  .support-review-facts > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .settings-actions {
    gap: 16px;
    justify-content: space-between;
  }

  .settings-scale-field {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
  }

  .settings-scale-group {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .settings-scale-note {
    width: min(190px, 100%);
    text-align: center;
  }

  .settings-scale-label {
    position: relative;
    justify-content: center;
    width: 112px;
    padding-inline: 22px;
    text-align: center;
  }

  .settings-scale-label svg {
    position: absolute;
    left: 0;
  }

  .settings-scale-select select {
    min-height: 32px;
    padding: 4px 0;
  }

  .settings-action-links {
    flex: 0 0 auto;
    flex-direction: column-reverse;
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
  }

  .settings-action-links .secondary-button {
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.68rem;
  }

  .settings-action-links .secondary-button svg {
    width: 13px;
    height: 13px;
  }

  .settings-account {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px 12px;
    padding-block: 16px;
  }

  .settings-account-action {
    grid-column: 2;
    justify-self: start;
  }

  .account-data-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container app-frame (width <= 700px) {
  .day-summary-layer {
    padding: 12px;
  }

  .day-summary-panel {
    width: calc(100cqw - 24px);
    max-height: calc(100cqh - 24px);
  }

  .day-summary-targets {
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-strip {
    --compact-resource-meta-height: 24px;

    position: sticky;
    top: 0;
    grid-template:
      "identity anchor" var(--compact-resource-meta-height)
      "summary summary" auto
      / minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: start;
    padding: 9px;
  }

  .product-identity {
    grid-area: identity;
    gap: 8px;
    align-self: center;
  }

  .product-identity > span:last-child {
    display: grid;
  }

  .product-identity strong {
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
  }

  .product-identity small {
    display: none;
  }

  .forecast-anchor-status {
    grid-area: anchor;
    align-self: center;
    min-height: var(--compact-resource-meta-height);
    font-size: 0.64rem;
  }

  .product-mark {
    width: var(--compact-resource-meta-height);
    height: var(--compact-resource-meta-height);
  }

  .product-mark img {
    width: calc(var(--compact-resource-meta-height) - 2px);
    height: calc(var(--compact-resource-meta-height) - 2px);
  }

  .resource-summary {
    grid-area: summary;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-self: center;
  }

  .resource-summary-group {
    display: grid;
    grid-template-rows: repeat(2, minmax(44px, 1fr));
    min-width: 0;
    border-left: 1px solid #293b44;
  }

  .resource-summary-group:first-child {
    border-left: 0;
  }

  .summary-item {
    min-height: 44px;
    padding: 3px 6px;
    border-left: 0;
  }

  .summary-item dd {
    font-size: 1rem;
  }

  .summary-item.is-compound dd {
    gap: 8px;
  }

  .summary-item.is-compound dd small {
    display: none;
  }

  .workspace {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .side-rail {
    grid-auto-rows: 60px;
    padding-inline: 6px;
  }

  .side-rail button span {
    font-size: 0.64rem;
  }

  .main-view {
    padding: 0 10px 16px;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .main-view::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  body[data-active-page="future"],
  body[data-active-page="catalog"] {
    overflow: hidden;
  }

  body[data-active-page="future"] .product-shell,
  body[data-active-page="catalog"] .product-shell {
    height: 100%;
    min-height: 0;
  }

  body[data-active-page="future"] .workspace,
  body[data-active-page="catalog"] .workspace {
    min-height: 0;
  }

  .month-controls {
    grid-template-columns:
      var(--calendar-month-control-height)
      minmax(90px, auto)
      var(--calendar-month-control-height);
    gap: 4px;
  }

  .month-controls strong {
    font-size: 0.78rem;
  }

  .icon-button {
    width: 34px;
    height: 34px;
  }

  .calendar-week {
    --calendar-lane-pitch: 21px;
    --calendar-bar-height: 19px;

    min-height: max(106px, var(--calendar-row-height));
  }

  .calendar-day {
    padding: 7px 5px;
  }

  .calendar-bar {
    padding-inline: 4px;
    font-size: 0.54rem;
  }

  .calendar-bar.is-gacha-merged {
    padding-inline: 3px;
  }

  .calendar-bar-thumbnail-frame {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .login-claim {
    font-size: 0.52rem;
  }

  .setup-layer {
    padding: 8px;
  }

  .setup-depth {
    width: min(440px, calc(100cqw - 16px));
    height: min(680px, calc(100cqh - 16px));
  }

  .setup-layer[data-setup-state="welcome"] .setup-depth {
    width: min(400px, calc(100cqw - 24px));
    height: auto;
    max-height: calc(100cqh - 48px);
    aspect-ratio: 3 / 4;
  }

  .setup-layer[data-setup-state="post-welcome"] .setup-depth {
    width: min(420px, calc(100cqw - 16px));
    height: min(560px, calc(100cqh - 24px));
  }

  .setup-card-header {
    min-height: 58px;
    padding: 12px 14px;
  }

  .setup-brand {
    font-size: 0.72rem;
  }

  .setup-progress-node {
    width: 20px;
    height: 20px;
  }

  .setup-page {
    gap: 18px;
    padding: 24px 18px 18px;
  }

  .post-welcome-actions {
    flex-direction: column-reverse;
  }

  .post-welcome-actions > button {
    width: min(260px, 100%);
  }

  .setup-copy h2 {
    font-size: 1.24rem;
  }

  .setup-resource-grid {
    gap: 10px;
  }

  .setup-option-field {
    grid-template-columns: minmax(106px, 0.72fr) minmax(0, 1fr);
    gap: 10px;
  }

  .course-section-heading {
    align-items: flex-start;
  }

  .course-meter-heading {
    gap: 8px;
    align-items: center;
  }

  .course-meter-heading-actions {
    gap: 4px;
  }

  .course-meter-toggle-label {
    font-size: 0.58rem;
  }

  .course-lineup {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-context-grid {
    gap: 10px;
  }

  .course-analysis-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
  }

  .course-scenario-field select {
    font-size: 0.68rem;
  }

  .course-uma-column {
    width: min(148px, 72%);
    justify-self: center;
  }

  .course-uma-shell {
    padding-top: 0;
  }

  .course-supports,
  .course-support-grid {
    width: 100%;
  }

  .course-support-grid {
    grid-template-columns: repeat(3, minmax(54px, 1fr));
    gap: 7px;
  }

  .course-builder-actions {
    display: grid;
    gap: 9px;
    justify-items: center;
  }

  .course-selection-status {
    position: static;
    text-align: center;
  }

  .course-meter-ruler,
  .course-meter-row {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 6px;
  }

  .course-meter-label {
    font-size: 0.56rem;
  }

  .course-meter-tick small {
    font-size: 0.48rem;
  }

  .course-meter-segment {
    font-size: 0;
  }

  .course-skill-detail {
    grid-template:
      "skill" 62px
      "source" 112px
      "description" minmax(126px, auto)
      "conditions" auto
      / minmax(0, 1fr);
    gap: 12px;
    padding-left: 49px;
  }

  .course-condition-details {
    grid-column: auto;
  }

  .course-skill-heading {
    display: grid;
  }

  .course-skill-search {
    width: 100%;
  }

  .course-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .course-filter-bar button {
    min-width: 0;
    justify-content: center;
  }

  .course-skill-item > img {
    width: 38px;
    height: 38px;
  }

  .course-skill-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .course-picker-layer {
    padding-inline: 8px;
  }

  .course-picker {
    width: calc(100cqw - 16px);
    height: calc(100cqh - 16px);
  }

  .course-picker-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-picker-filter[hidden] + .course-picker-availability,
  .course-picker-availability {
    grid-column: auto;
    width: min(196px, 100%);
    justify-self: end;
  }

  .course-picker-grid {
    gap: clamp(4px, 1.2cqw, 10px);
    padding-inline: clamp(6px, 2cqw, 18px);
  }

  .catalog-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 6px;
    align-items: center;
  }

  .catalog-tabs {
    grid-template-columns: repeat(2, max-content);
    justify-self: start;
  }

  .catalog-heading-tools {
    width: 100%;
  }

  .catalog-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .catalog-grid {
    gap: clamp(4px, 1.4cqw, 8px);
    padding-inline: clamp(4px, 1.2cqw, 8px);
  }

  .catalog-grid.is-uma {
    grid-template-columns:
      repeat(auto-fill, minmax(min(clamp(44px, 13cqw, 98px), 100%), 1fr));
  }

  .catalog-grid.is-support {
    grid-template-columns:
      repeat(auto-fill, minmax(min(clamp(44px, 13cqw, 122px), 100%), 1fr));
  }

  .catalog-detail-layer,
  .catalog-skill-layer {
    padding: 8px;
  }

  .catalog-detail-panel,
  .catalog-skill-panel {
    width: calc(100cqw - 16px);
    height: calc(100cqh - 16px);
  }

  .catalog-detail-overview.is-uma,
  .catalog-detail-overview.is-support {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-main-image.is-uma {
    width: min(350px, 100%);
    justify-self: center;
  }

  .catalog-main-image.is-support {
    width: min(300px, 82%);
    justify-self: center;
  }

  .catalog-detail-content,
  .catalog-skill-content {
    padding: 16px 14px;
  }
}

@media (width <= 420px) {
  .setup-card-header {
    gap: 10px;
  }

  .setup-brand {
    gap: 0;
    font-size: 0;
  }

  .setup-progress {
    width: min(214px, calc(100% - 28px));
    gap: 3px;
  }

  .setup-progress-line {
    min-width: 4px;
  }

  .setup-heading {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px;
  }

  .setup-heading.is-centered {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .setup-option-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .account-data-card {
    padding-inline: 13px;
  }

  .account-data-row {
    gap: 8px;
  }

  .account-confirm-actions {
    gap: 10px;
  }

  .month-controls {
    justify-self: center;
  }

  .catalog-heading-tools {
    gap: 8px;
  }

  .catalog-detail-heading,
  .catalog-skill-heading {
    min-height: 70px;
    padding: 8px 10px;
  }

  .catalog-detail-identity,
  .catalog-skill-identity {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 9px;
  }

  .catalog-detail-thumbnail,
  .catalog-skill-icon {
    width: 52px;
    height: 52px;
  }

  .catalog-detail-thumbnail.is-uma {
    width: 48px;
    height: auto;
  }
}

@media (height <= 620px) and (width >= 500px) {
  .setup-depth {
    height: calc(100cqh - 20px);
  }

  .setup-card-header {
    min-height: 52px;
    padding-block: 9px;
  }

  .setup-page {
    gap: 14px;
    padding-block: 18px 14px;
  }

  .setup-copy h2 {
    font-size: 1.2rem;
  }

  .account-choice {
    min-height: 94px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .gacha-target-thumbnail-button.is-selection-opening::after,
  .gacha-target-thumbnail-button.is-selection-closing::after,
  .gacha-target-thumbnail-button.is-selection-sliding::after,
  .gacha-target-thumbnail-button.is-selection-slide-settling::after,
  .gacha-target-thumbnail-button.is-selection-slide-destination::after,
  .gacha-inline-detail-slot.is-opening,
  .gacha-inline-detail-slot.is-closing {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes preview-page-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes slot-arrive {
  from {
    opacity: 0.5;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes course-button-scan {
  to {
    transform: translateX(120%);
  }
}

@keyframes meter-segment-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes meter-highlight-in {
  from {
    opacity: 0;
    transform: scaleX(0.35);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes picker-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}