html[data-theme="swe235"] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f7f8f2;
  --color-base-300: #e0e6dc;
  --color-base-content: #142c29;
  --color-primary: #c7f36b;
  --color-primary-content: #142c29;
  --color-secondary: #207652;
  --color-secondary-content: #ffffff;
  --color-accent: #ae4656;
  --color-accent-content: #ffffff;
  --color-neutral: #142c29;
  --color-neutral-content: #ffffff;
  --color-info: #b7d7e8;
  --color-info-content: #123749;
  --color-success: #c1dfce;
  --color-success-content: #163d2b;
  --color-warning: #f1dc99;
  --color-warning-content: #4a350c;
  --color-error: #efc5c2;
  --color-error-content: #632623;
  --radius-selector: 0.25rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
  --color-muted: #63736d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.platform-app {
  margin: 0;
  line-height: 1.5;
  background-image: linear-gradient(to bottom, #ffffff70, transparent 24rem);
}

.app-shell {
  max-width: 1120px;
  padding: 2rem 1.25rem 4rem;
}

.app-shell h1 {
  line-height: 1.15;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.app-shell :is(h2, h3) {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.app-shell :is(input, select, textarea, .table) {
  font-variant-numeric: tabular-nums;
}

.app-shell select:not([multiple]) {
  appearance: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell .table :is(th, td) {
  border-color: var(--color-base-300);
}

.app-shell .table th {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.app-shell .btn {
  white-space: normal;
  height: auto;
  min-height: 2.5rem;
}

.app-shell .card {
  border: 1px solid var(--color-base-300);
  box-shadow: none;
}

.page-kicker {
  color: var(--color-muted);
  font-size: 0.6875rem;
  font-weight: 750;
  text-transform: uppercase;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin-top: 0.5rem;
  font-size: 2rem;
}

.page-section {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-base-300);
}

.page-section h2 {
  font-size: 1.25rem;
  font-weight: 750;
  margin-bottom: 0.75rem;
}

.empty-state {
  border-top: 1px solid var(--color-base-300);
  padding: 2rem 0;
  color: var(--color-muted);
}

.account-panel {
  padding: 1rem 0;
}

.account-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.account-body h1 {
  font-size: 1.75rem;
}

.account-body form > label,
.admin-shell form > label:not(.label):not(.input) {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.game-table {
  margin-top: 0.75rem;
}

.game-table td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.admin-shell > .page-kicker {
  margin-bottom: 0.75rem;
}

.admin-shell > .flex {
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-shell .table {
  font-size: 0.8125rem;
}

.admin-shell :is(.input, .select, .textarea) {
  max-width: 100%;
  min-width: 0;
}

.admin-shell select[multiple] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
}

.wattball-chambers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
  width: 100%;
  max-width: 48rem;
}

.wattball-sphere-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
}

.wattball-orb {
  display: flex;
  width: min(100%, 10rem);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
  border-radius: 50%;
  text-align: center;
  transition: transform 150ms ease;
}

.wattball-orb--white {
  border-color: color-mix(in oklab, var(--color-base-content) 20%, var(--color-base-100));
  background: radial-gradient(
    circle at 32% 26%,
    #ffffff 0 18%,
    color-mix(in oklab, #ffffff 76%, var(--color-base-300)) 45%,
    color-mix(in oklab, var(--color-base-300) 78%, var(--color-base-content)) 100%
  );
  color: var(--color-base-content);
  box-shadow:
    inset -10px -12px 20px color-mix(in oklab, var(--color-base-content) 22%, transparent),
    inset 5px 5px 12px #ffffffcc,
    0 12px 24px -14px color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.wattball-orb--megawatt {
  border-color: color-mix(in oklab, var(--color-secondary) 55%, var(--color-primary));
  background: radial-gradient(
    circle at 32% 26%,
    color-mix(in oklab, #ffffff 72%, var(--color-primary)) 0 16%,
    var(--color-primary) 48%,
    color-mix(in oklab, var(--color-primary) 64%, var(--color-secondary)) 100%
  );
  color: var(--color-primary-content);
  box-shadow:
    inset -10px -12px 20px color-mix(in oklab, var(--color-secondary) 40%, transparent),
    inset 5px 5px 12px #ffffffa6,
    0 0 36px -18px color-mix(in oklab, var(--color-primary) 60%, transparent),
    0 12px 24px -14px color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.wattball-orb:hover {
  transform: translateY(-2px);
}

.wattball-orb:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.wattball-orb__title {
  max-width: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.wattball-orb__ticker {
  max-width: 100%;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.wattball-orb__name {
  max-width: 100%;
  font-size: 0.625rem;
  line-height: 1.1;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.wattball-winner-orb {
  width: 5rem;
  max-width: 5rem;
  flex: 0 0 5rem;
  padding: 0.25rem;
}

.wattball-winner-balls {
  display: grid;
  grid-template-columns: repeat(6, 5rem);
  gap: 0.25rem;
}

.wattball-winner-ball-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.wattball-winner-tier {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  text-align: center;
}

.wattball-winner-orb .wattball-orb__ticker {
  font-weight: 700;
}

.wattball-picker-dialog .modal-box {
  max-width: 34rem;
}

.wattball-picker-dialog li[hidden] {
  display: none;
}

.wattball-sphere-field .wattball-orb {
  width: 100%;
  max-width: 10rem;
}

.wattball-journal {
  display: flex;
  width: min(100%, 10rem);
  flex-direction: column;
  gap: 0.3rem;
}

.wattball-journal .input {
  width: 100%;
  min-width: 0;
}

.cubai-game .card {
  border-width: 2px;
}

@media (max-width: 639px) {
  .app-shell { padding-top: 1.5rem; }
  .page-header h1 { font-size: 1.75rem; }
  .wattball-chambers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.5rem; }
  .wattball-winner-balls { grid-template-columns: repeat(3, 5rem); }
  .wattball-orb { gap: 0.25rem; padding: 0.5rem; }
  .wattball-orb__title { font-size: 0.625rem; }
  .wattball-orb__ticker { font-size: 0.875rem; }
  .wattball-orb__name { font-size: 0.5rem; }
  .app-shell .form-control { max-width: 100%; }
  .app-shell .select { max-width: 100%; }
  .account-body .flex { flex-wrap: wrap; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wattball-orb { transition: none; }
}

.app-navbar {
  max-width: 1120px;
  margin: auto;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid var(--color-base-300);
}

.app-mobile-menu,
.app-nav-links--mobile { display: none; }
.app-menu-toggle {
  display: none;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-base-content);
  font-size: 1.25rem;
  font-weight: 850;
  text-decoration: none;
}

.app-brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--color-base-content);
  border-radius: 50%;
  background: var(--color-primary);
  font-size: 0.75rem;
}

.app-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.app-nav-links > a,
.app-nav-links summary {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.app-nav-links > a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.wattball-stock-option { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.wattball-stock-signal { flex-basis: 100%; color: var(--color-muted); font-size: 0.625rem; }
.wattball-stock-option--direct-favorable { background: color-mix(in oklab, var(--color-primary) 25%, var(--color-base-100)); box-shadow: inset 0 0 0 2px var(--color-primary); }
.wattball-stock-option--primary-favorable { background: color-mix(in oklab, var(--color-primary) 15%, var(--color-base-100)); box-shadow: 0 0 16px -10px var(--color-primary); }
.wattball-stock-option--indirect-favorable { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.wattball-stock-option--direct-unfavorable { box-shadow: inset 0 0 0 2px var(--color-accent); opacity: 0.72; }
.wattball-stock-option--primary-unfavorable { background: color-mix(in oklab, var(--color-accent) 10%, var(--color-base-100)); opacity: 0.6; }
.wattball-stock-option--indirect-unfavorable { opacity: 0.72; }

@media (max-width: 767px) {
  .app-navbar {
    position: relative;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .app-brand {
    min-width: 0;
    flex: 1;
  }

  .app-nav-links--desktop { display: none; }

  .app-mobile-menu {
    position: relative;
    display: block;
    flex: none;
  }

  .app-menu-toggle {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid var(--color-base-300);
    border-radius: 0.5rem;
    background: var(--color-base-100);
    cursor: pointer;
    list-style: none;
  }

  .app-menu-toggle::-webkit-details-marker { display: none; }
  .app-menu-toggle::marker { content: ""; }

  .app-menu-toggle span {
    width: 1.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-base-content);
  }

  .app-menu-toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  .app-nav-links--mobile {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 40;
    display: none;
    width: min(19rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 5rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--color-base-300);
    border-radius: 0.5rem;
    background: var(--color-base-100);
    box-shadow: 0 12px 28px -12px color-mix(in oklab, var(--color-base-content) 45%, transparent);
  }

  .app-mobile-menu[open] .app-nav-links--mobile { display: flex; }

  .app-nav-links--mobile > a,
  .app-nav-links--mobile > form,
  .app-nav-links--mobile > form .btn,
  .app-nav-links--mobile > .dropdown,
  .app-nav-links--mobile > .dropdown > summary {
    width: 100%;
    max-width: 100%;
  }

  .app-nav-links--mobile > a,
  .app-nav-links--mobile > form .btn,
  .app-nav-links--mobile > .dropdown > summary {
    display: block;
    padding: 0.75rem;
    text-align: left;
    white-space: normal;
  }

  .app-nav-links--mobile > form .btn { justify-content: flex-start; }

  .app-nav-links--mobile > .dropdown {
    position: static;
  }

  .app-nav-links--mobile > .dropdown .dropdown-content,
  .app-nav-links--mobile > .dropdown[open] .dropdown-content {
    position: static;
    display: none;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    transform: none;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
  }

  .app-nav-links--mobile > .dropdown[open] .dropdown-content { display: grid; }
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-base-content);
  color: #ffffff;
}

.skip-link:focus {
  top: 1rem;
}

.form-control {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.form-control > :is(input, select, textarea) {
  max-width: 100%;
}

.app-shell .label {
  white-space: normal;
  max-width: 100%;
}

.app-shell .checkbox {
  flex-shrink: 0;
}

:is(input, select, textarea, button, a, summary):focus-visible {
  outline: 3px solid #376fb2;
  outline-offset: 3px;
}