:root {
  --odtl-bg: #080d12;
  --odtl-bg-deep: #05090e;
  --odtl-surface: #0d1820;
  --odtl-surface-raised: #10212b;
  --odtl-surface-hover: #142b39;
  --odtl-text: #edf3f5;
  --odtl-text-muted: #b8c8d1;
  --odtl-text-subtle: #9cafbb;
  --odtl-blue: #3b9dc4;
  --odtl-blue-bright: #75cbe7;
  --odtl-blue-link: #7bd0f2;
  --odtl-gold: #e3c779;
  --odtl-border: #ffffff18;
  --odtl-border-strong: #344b59;
  --odtl-focus: #68d0fa;
  --odtl-radius-sm: 4px;
  --odtl-radius-md: 8px;
  --odtl-radius-lg: 14px;
  --odtl-radius-xl: 24px;
}

.social-page {
  width: min(72rem, 100% - 2rem);
  min-height: calc(100dvh - 5rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) 0 7rem;
}

.social-loading {
  color: var(--site-text-muted);
  letter-spacing: .13em;
  text-transform: uppercase;
  place-items: center;
  font: 700 .75rem / 1 JetBrains Mono, monospace;
  display: grid;
}

.social-page-heading {
  border-bottom: 1px solid color-mix(in srgb, var(--site-blue) 22%, transparent);
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  display: flex;
}

.social-page-heading h1, .social-account-gate h1, .social-empty h1, .social-challenge-hero h1 {
  color: #f4f8fa;
  letter-spacing: -.025em;
  text-transform: uppercase;
  max-width: 12ch;
  font: 800 clamp(3rem, 8vw, 6rem) / .88 Barlow Condensed, sans-serif;
}

.social-page-heading p, .social-account-gate > p, .social-empty p {
  max-width: 40rem;
  color: var(--site-text-muted);
  margin-top: 1rem;
  font-size: 1rem;
}

.social-page-heading > a, .social-empty > a {
  min-height: 2.75rem;
  color: var(--site-blue-link);
  white-space: nowrap;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  display: inline-flex;
}

.social-code-strip {
  background: var(--site-surface-raised);
  grid-template-columns: auto auto minmax(20rem, 1fr);
  align-items: end;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem;
  display: grid;
  box-shadow: 0 18px 45px -34px #000;
}

.social-code-strip span, .social-code-strip label, .social-room-board label, .social-moment > span, .social-status-line {
  color: var(--site-text-subtle);
  letter-spacing: .12em;
  text-transform: uppercase;
  font: 700 .68rem / 1 JetBrains Mono, monospace;
  display: block;
}

.social-code-strip strong {
  color: var(--site-blue-bright);
  letter-spacing: .1em;
  margin-top: .45rem;
  font: 700 1.6rem / 1 JetBrains Mono, monospace;
  display: block;
}

.social-code-strip form {
  grid-template-columns: minmax(8rem, 1fr) auto;
  gap: .5rem;
  display: grid;
}

.social-code-strip form label {
  grid-column: 1 / -1;
}

.social-code-strip input, .social-room-board input {
  border: 1px solid color-mix(in srgb, var(--site-blue) 22%, transparent);
  color: #f4f8fa;
  background: #09131a;
  border-radius: .35rem;
  outline: none;
  min-height: 3rem;
  padding: 0 .9rem;
}

.social-code-strip input:focus, .social-room-board input:focus {
  border-color: var(--site-blue-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-blue) 18%, transparent);
}

.social-code-strip button, .social-room-board button, .social-room-control > a, .social-primary-actions > *, .social-rematch {
  border: 1px solid color-mix(in srgb, var(--site-blue) 34%, transparent);
  color: #f4f8fa;
  border-radius: .35rem;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .7rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
}

.social-code-strip form button, .social-room-board button, .social-room-control .is-primary, .social-primary-actions > :first-child {
  background: var(--site-blue);
  color: #061118;
  border-color: #0000;
}

.social-code-strip button:disabled, .social-room-board button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.social-note {
  color: var(--site-gold);
  margin-top: .75rem;
  font-size: .82rem;
}

.social-section {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.social-section > h2, .social-room-feed > h2, .social-comparison > h2 {
  color: #f4f8fa;
  margin-bottom: 1.15rem;
  font: 700 clamp(1.8rem, 4vw, 2.7rem) / 1 Barlow Condensed, sans-serif;
}

.social-list {
  border-top: 1px solid color-mix(in srgb, var(--site-blue) 18%, transparent);
}

.social-list-row {
  border-bottom: 1px solid color-mix(in srgb, var(--site-blue) 18%, transparent);
  color: #f4f8fa;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
  display: grid;
}

.social-list-row > div:nth-child(2) {
  min-width: 0;
}

.social-list-row strong {
  font-size: 1rem;
  display: block;
}

.social-list-row span:not(.social-live-dot) {
  color: var(--site-text-subtle);
  margin-top: .2rem;
  font-size: .76rem;
  display: block;
}

.social-list-row > a {
  color: var(--site-blue-link);
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
}

.social-avatar {
  border: 1px solid color-mix(in srgb, var(--site-blue) 42%, transparent);
  width: 2.8rem;
  height: 2.8rem;
  color: var(--site-blue-bright);
  background: #102b39;
  border-radius: 50%;
  place-items: center;
  font: 700 .75rem / 1 JetBrains Mono, monospace;
  display: grid;
}

.social-row-actions {
  gap: .5rem;
  display: flex;
}

.social-row-actions button {
  color: #eef7fa;
  border: 1px solid #31505f;
  border-radius: .3rem;
  min-height: 2.4rem;
  padding: 0 .75rem;
  font-size: .75rem;
  font-weight: 700;
}

.social-row-actions button:first-child {
  border-color: var(--site-blue);
  color: var(--site-blue-bright);
  align-items: center;
  gap: .35rem;
  display: inline-flex;
}

.social-empty-inline {
  color: var(--site-text-muted);
  border-top: 1px solid #233844;
  border-bottom: 1px solid #233844;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  display: flex;
}

.social-empty-inline svg {
  color: var(--site-blue);
}

.social-empty-inline strong {
  color: #f4f8fa;
  display: block;
}

.social-empty-inline p {
  margin-top: .3rem;
  font-size: .85rem;
}

.social-muted {
  color: var(--site-text-subtle);
  font-size: .9rem;
}

.social-challenge-rail {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
  display: grid;
}

.social-challenge-rail a {
  color: #f4f8fa;
  background: #0d1b24;
  border: 1px solid #263d49;
  border-radius: .6rem;
  min-height: 8rem;
  padding: 1rem;
}

.social-challenge-rail span {
  color: var(--site-gold);
  letter-spacing: .12em;
  font: 700 .65rem / 1 JetBrains Mono, monospace;
}

.social-challenge-rail strong, .social-challenge-rail small {
  margin-top: 1rem;
  display: block;
}

.social-challenge-rail small {
  color: var(--site-text-subtle);
  margin-top: .35rem;
}

.social-room-board {
  border-top: 1px solid #294451;
  border-bottom: 1px solid #294451;
  grid-template-columns: 1.15fr .85fr;
  margin-top: 2rem;
  display: grid;
}

.social-room-board > * {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.social-room-board > * + * {
  border-left: 1px solid #294451;
}

.social-room-board svg {
  color: var(--site-blue-bright);
}

.social-room-board h2 {
  color: #f4f8fa;
  margin-top: 1.5rem;
  font: 700 clamp(2rem, 4vw, 3.2rem) / .95 Barlow Condensed, sans-serif;
}

.social-room-board p {
  max-width: 34rem;
  color: var(--site-text-muted);
  margin: .8rem 0 1.6rem;
}

.social-room-board label {
  margin-bottom: .5rem;
}

.social-room-board input {
  width: 100%;
  margin-bottom: .7rem;
}

.social-room-board button {
  width: 100%;
}

.social-live-dot {
  background: #56707e;
  border-radius: 50%;
  width: .55rem;
  height: .55rem;
  box-shadow: 0 0 0 4px #56707e26;
}

.social-live-dot.is-live {
  background: #5ed89a;
  box-shadow: 0 0 0 4px #5ed89a29;
}

.social-room-header {
  border-bottom: 1px solid #294451;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
  padding-bottom: 2rem;
  display: grid;
}

.social-room-header > div {
  color: var(--site-text-subtle);
  text-transform: uppercase;
  letter-spacing: .12em;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.social-room-header h1 {
  color: #f4f8fa;
  text-transform: uppercase;
  grid-row: 2;
  font: 800 clamp(3rem, 8vw, 6rem) / .88 Barlow Condensed, sans-serif;
}

.social-room-header button {
  color: var(--site-text-muted);
  border: 1px solid #31505f;
  border-radius: .35rem;
  grid-area: 1 / 2 / span 2;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  display: inline-flex;
}

.social-room-header button strong {
  color: var(--site-blue-bright);
  letter-spacing: .08em;
  font: 700 1rem / 1 JetBrains Mono, monospace;
}

.social-room-grid {
  grid-template-columns: 1fr minmax(18rem, .72fr);
  gap: 2rem;
  margin-top: 2rem;
  display: grid;
}

.social-roster {
  border-top: 1px solid #294451;
}

.social-section-title {
  color: var(--site-text-subtle);
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  display: flex;
}

.social-section-title h2 {
  color: #f4f8fa;
  align-items: center;
  gap: .5rem;
  font: 700 1.4rem / 1 Barlow Condensed, sans-serif;
  display: flex;
}

.social-roster article {
  border-top: 1px solid #203541;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  min-height: 4.5rem;
  display: grid;
}

.social-roster article strong, .social-roster article span {
  display: block;
}

.social-roster article span {
  color: var(--site-text-subtle);
  margin-top: .2rem;
  font-size: .72rem;
}

.social-room-control {
  border-top: 2px solid var(--site-blue);
  background: var(--site-surface-raised);
  align-self: start;
  padding: 1.5rem;
  box-shadow: 0 20px 48px -38px #000;
}

.social-room-control svg {
  color: var(--site-blue);
}

.social-room-control h2 {
  color: #f4f8fa;
  margin-top: 1.3rem;
  font: 700 2.2rem / .95 Barlow Condensed, sans-serif;
}

.social-room-control p {
  color: var(--site-text-muted);
  margin: .75rem 0 1.4rem;
  font-size: .88rem;
}

.social-room-control > button, .social-room-control > a {
  width: 100%;
  margin-top: .55rem;
}

.social-room-feed {
  border-top: 1px solid #294451;
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.social-room-feed p {
  color: var(--site-text-muted);
  text-transform: capitalize;
  border-bottom: 1px solid #203541;
  gap: 1rem;
  padding: .75rem 0;
  font-size: .8rem;
  display: flex;
}

.social-room-feed p span {
  color: var(--site-blue-bright);
  font-family: JetBrains Mono, monospace;
}

.social-results-board {
  margin-top: 2rem;
}

.social-results-board ol {
  counter-reset: room-rank;
  border-top: 1px solid #294451;
  list-style: none;
}

.social-results-board li {
  border-bottom: 1px solid #294451;
  grid-template-columns: 2rem 1fr auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  display: grid;
}

.social-results-board li > span {
  color: var(--site-gold);
  font: 700 1.2rem / 1 JetBrains Mono, monospace;
}

.social-results-board li strong, .social-results-board li small {
  display: block;
}

.social-results-board li small {
  color: var(--site-text-subtle);
  margin-top: .2rem;
}

.social-results-board li b {
  color: var(--site-blue-bright);
  font: 700 1.5rem / 1 JetBrains Mono, monospace;
}

.social-results-board li a {
  color: var(--site-blue-link);
  font-size: .78rem;
  font-weight: 700;
}

.social-rematch {
  margin-top: 1.25rem;
}

.social-challenge-page {
  place-items: center;
  display: grid;
}

.social-challenge-hero {
  text-align: center;
  width: min(50rem, 100%);
}

.social-challenge-hero > svg {
  color: var(--site-gold);
}

.social-challenge-hero > p:first-of-type {
  color: var(--site-text-muted);
  margin: 1rem 0;
}

.social-challenge-hero h1 {
  max-width: none;
}

.social-situation-line {
  border-top: 1px solid #31505f;
  border-bottom: 1px solid #31505f;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.2rem 0;
  display: grid;
}

.social-situation-line strong {
  color: #f4f8fa;
  font: 700 1.4rem / 1 JetBrains Mono, monospace;
}

.social-situation-line span {
  color: var(--site-gold);
  text-transform: uppercase;
  font: 700 .72rem / 1.4 JetBrains Mono, monospace;
}

.social-challenge-rule {
  max-width: 38rem;
  color: var(--site-text-muted);
  margin: 1.5rem auto !important;
}

.social-hero-action {
  background: var(--site-blue);
  color: #061118;
  border-radius: .35rem;
  align-items: center;
  gap: .5rem;
  min-height: 3.25rem;
  padding: 0 1.4rem;
  font-weight: 800;
  display: inline-flex;
}

.social-expired {
  color: var(--site-gold);
  align-items: center;
  gap: .5rem;
  display: inline-flex;
}

.social-comparison {
  border-top: 1px solid #294451;
  width: min(48rem, 100%);
  margin-top: 4rem;
  padding-top: 2rem;
}

.social-comparison > div {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  display: grid;
}

.social-comparison section {
  text-align: center;
}

.social-comparison section span, .social-comparison section strong, .social-comparison section small {
  display: block;
}

.social-comparison section span {
  color: var(--site-text-subtle);
}

.social-comparison section strong {
  color: #f4f8fa;
  margin-top: .5rem;
  font: 800 2.5rem / 1 Barlow Condensed, sans-serif;
}

.social-comparison section small {
  color: var(--site-text-muted);
  margin-top: .4rem;
}

.social-versus {
  color: var(--site-gold);
  font: 700 .8rem / 1 JetBrains Mono, monospace;
}

.social-comparison > p {
  color: var(--site-gold);
  text-align: center;
  margin: 1.5rem 0;
}

.social-comparison > a {
  color: var(--site-blue-link);
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  display: flex;
}

.social-result-page {
  max-width: 58rem;
}

.social-result-hero {
  border-bottom: 1px solid #31505f;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  padding-bottom: 2rem;
  display: grid;
}

.social-result-hero h1 {
  color: #f4f8fa;
  letter-spacing: -.03em;
  margin-top: .5rem;
  font: 800 clamp(5rem, 17vw, 10rem) / .75 Barlow Condensed, sans-serif;
}

.social-result-hero h1 span {
  color: var(--site-blue);
  margin: 0 .15em;
}

.social-result-hero > div > p:last-child {
  color: var(--site-text-muted);
  margin-top: 1.2rem;
}

.social-result-hero dl {
  grid-template-columns: repeat(3, auto);
  gap: 1.5rem;
  display: grid;
}

.social-result-hero dt {
  color: var(--site-text-subtle);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .65rem;
}

.social-result-hero dd {
  color: #f4f8fa;
  margin-top: .35rem;
  font: 700 1.8rem / 1 JetBrains Mono, monospace;
}

.social-moment {
  border-top: 2px solid var(--site-gold);
  background: #172128;
  margin-top: 2rem;
  padding: 1.4rem;
}

.social-moment h2 {
  color: #f4f8fa;
  margin-top: .65rem;
  font: 700 2rem / 1 Barlow Condensed, sans-serif;
}

.social-moment p {
  color: var(--site-text-muted);
  margin-top: .5rem;
}

.social-primary-actions {
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
  display: flex;
}

.social-reactions {
  border-top: 1px solid #294451;
  margin-top: 2rem;
  padding-top: 1rem;
}

.social-reactions > span {
  color: var(--site-text-subtle);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 700;
}

.social-reactions > div {
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
  display: flex;
}

.social-reactions button {
  color: #eef7fa;
  letter-spacing: .08em;
  border: 1px solid #31505f;
  border-radius: 999px;
  min-height: 2.5rem;
  padding: 0 .9rem;
  font-size: .68rem;
  font-weight: 800;
}

.social-reactions button:hover, .social-reactions button:focus-visible {
  border-color: var(--site-blue-bright);
  color: var(--site-blue-bright);
}

.social-reactions p {
  color: var(--site-gold);
  margin-top: .65rem;
  font-size: .76rem;
}

.social-call-tendencies {
  border-top: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  margin-top: .75rem;
  padding-top: .8rem;
}

.social-call-tendencies > span {
  color: var(--muted-foreground);
  letter-spacing: .1em;
  text-transform: uppercase;
  font: 700 .62rem / 1 JetBrains Mono, monospace;
}

.social-call-tendencies > div {
  background: var(--border);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: .55rem;
  display: grid;
}

.social-call-tendencies p {
  background: var(--card);
  min-width: 0;
  color: var(--muted-foreground);
  text-align: center;
  text-transform: uppercase;
  padding: .65rem;
  font-size: .62rem;
}

.social-call-tendencies strong {
  color: var(--primary);
  margin-bottom: .25rem;
  font: 700 1rem / 1 JetBrains Mono, monospace;
  display: block;
}

.social-account-gate, .social-empty {
  text-align: center;
  width: min(34rem, 100%);
  margin: 3rem auto;
}

.social-account-gate > svg {
  color: var(--site-blue);
}

.social-account-gate h1, .social-empty h1 {
  max-width: none;
  margin-top: 1.5rem;
}

.social-account-gate > .odtl-text-link {
  margin-top: 1rem;
  display: inline-flex;
}

.odtl-social-callout {
  border-top: 1px solid color-mix(in srgb, var(--site-blue) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--site-blue) 20%, transparent);
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  display: flex;
}

.odtl-social-callout > div:first-child {
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  max-width: 42rem;
  display: grid;
}

.odtl-social-callout svg {
  color: var(--site-blue-bright);
}

.odtl-social-callout h2 {
  color: #f4f8fa;
  font: 700 clamp(2rem, 4vw, 3rem) / .95 Barlow Condensed, sans-serif;
}

.odtl-social-callout p {
  color: var(--site-text-muted);
  grid-column: 2;
  margin-top: .5rem;
}

.odtl-social-callout > div:last-child {
  white-space: nowrap;
  align-items: center;
  gap: 1rem;
  display: flex;
}

@media (width <= 760px) {
  .social-page {
    width: min(100% - 1.25rem, 44rem);
    padding-top: 1.5rem;
  }

  .social-page-heading, .odtl-social-callout {
    flex-direction: column;
    align-items: start;
  }

  .social-page-heading h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .social-code-strip {
    grid-template-columns: 1fr auto;
  }

  .social-code-strip form {
    grid-column: 1 / -1;
  }

  .social-room-board, .social-room-grid {
    grid-template-columns: 1fr;
  }

  .social-room-board > * + * {
    border-top: 1px solid #294451;
    border-left: 0;
  }

  .social-room-header {
    grid-template-columns: 1fr;
  }

  .social-room-header button {
    grid-area: auto / 1;
    justify-self: start;
  }

  .social-result-hero {
    grid-template-columns: 1fr;
  }

  .social-result-hero dl {
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
  }

  .social-result-hero dd {
    font-size: 1.3rem;
  }

  .social-situation-line {
    grid-template-columns: 1fr;
  }

  .social-list-row {
    grid-template-columns: auto 1fr;
    padding: .8rem 0;
  }

  .social-list-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  .social-row-actions {
    grid-column: 2;
  }

  .odtl-social-callout > div:last-child {
    white-space: normal;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-page *, .odtl-social-callout * {
    scroll-behavior: auto;
  }
}

.odtl-site {
  isolation: isolate;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--odtl-text);
  background: radial-gradient(ellipse at 85% 12%, #15394a88, transparent 45%),
    linear-gradient(160deg, #0a141c, var(--odtl-bg) 70%);
  animation: .42s ease-out both odtl-page-enter;
  position: relative;
  overflow-x: clip;
}

.odtl-site > .odtl-header, .odtl-site > .odtl-container {
  z-index: 1;
  position: relative;
}

.odtl-site ::selection {
  color: #061018;
  background: var(--odtl-blue-bright);
}

.odtl-container, .odtl-nav-inner {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}

.odtl-site a {
  text-decoration: none;
}

.odtl-site a:focus-visible, .odtl-skip:focus-visible {
  outline: 3px solid var(--odtl-focus);
  outline-offset: 5px;
}

.odtl-header {
  border-bottom: 1px solid var(--odtl-border);
  background: #09121cbb;
}

.odtl-nav-inner {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 80px;
  display: flex;
}

.odtl-brand {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 800;
  line-height: .95;
}

.odtl-brand span {
  color: var(--odtl-blue);
  display: block;
}

.odtl-nav {
  align-items: center;
  gap: 14px;
  display: flex;
}

.odtl-nav-primary, .odtl-nav-secondary {
  gap: 6px;
  display: flex;
}

.odtl-nav-secondary {
  border-left: 1px solid var(--odtl-border);
  padding-left: 14px;
}

.odtl-menu-button, .odtl-mobile-drawer, .odtl-bottom-nav {
  display: none;
}

.odtl-more-overlay {
  z-index: 80;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #02070bcc;
  animation: .18s ease-out both odtl-drawer-fade;
  position: fixed;
  inset: 0;
}

.odtl-more-sheet {
  right: 10px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 81;
  color: #edf3f5;
  background: radial-gradient(circle at 12% 0, #17516b55, #0000 45%), linear-gradient(165deg, #101f2a 0%, #070d13 72%);
  border: 1px solid #5d839633;
  border-radius: 26px;
  max-height: min(72dvh, 580px);
  padding: 10px 16px 18px;
  animation: .26s cubic-bezier(.22, 1, .36, 1) both odtl-sheet-in;
  position: fixed;
  left: 10px;
  box-shadow: 0 28px 90px #000c, inset 0 1px #ffffff12;
}

.odtl-sheet-handle {
  background: #ffffff30;
  border-radius: 999px;
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
}

.odtl-more-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.odtl-more-heading h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.odtl-more-heading p {
  color: #91a6b2;
  margin-top: 5px;
  font-size: 12px;
}

.odtl-sheet-close {
  color: #dbe9ee;
  background: #ffffff0a;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.odtl-more-links {
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.odtl-more-links a {
  color: #edf3f5;
  background: linear-gradient(110deg, #ffffff09, #10263366);
  border: 1px solid #ffffff12;
  border-radius: 17px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  display: grid;
}

.odtl-more-links a > svg {
  color: #55c7f5;
  justify-self: center;
}

.odtl-more-links a span, .odtl-more-links a strong, .odtl-more-links a small {
  display: block;
}

.odtl-more-links a strong {
  font-size: 14px;
}

.odtl-more-links a small {
  color: #91a6b2;
  margin-top: 3px;
  font-size: 11px;
}

.odtl-nav a {
  color: #c2d0d9;
  background: #0d1b25a8;
  border: 1px solid #ffffff1c;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .16s, background-color .16s, color .16s, transform .16s;
  display: flex;
  box-shadow: inset 0 1px #ffffff08, 0 8px 20px #00000014;
}

.odtl-nav a:hover, .odtl-nav a[aria-current="page"] {
  color: #fff;
  background: #123344cc;
  border-color: #3b9dc488;
  box-shadow: inset 0 0 0 1px #3b9dc422, 0 8px 22px #00000024;
}

.odtl-nav a:hover {
  transform: translateY(-1px);
}

.odtl-nav a:focus-visible, .odtl-button:focus-visible, .odtl-mode:focus-visible, .odtl-text-link:focus-visible, .odtl-footer a:focus-visible, .odtl-bottom-nav-item:focus-visible, .odtl-sheet-close:focus-visible {
  outline: 2px solid var(--odtl-focus);
  outline-offset: 4px;
}

.odtl-skip {
  z-index: 100;
  color: #07121a;
  background: #fff;
  padding: 12px 18px;
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
}

.odtl-skip:focus {
  transform: translateY(0);
}

.odtl-hero {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
  min-height: 620px;
  padding-block: 76px 64px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.odtl-hero-copy, .odtl-preview {
  z-index: 1;
  position: relative;
}

.odtl-hero-copy {
  max-width: 500px;
}

.odtl-eyebrow {
  color: #99afbd;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.odtl-hero h1, .odtl-about h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.025em;
  margin-block: 0 22px;
  font-size: clamp(56px, 7vw, 92px);
  font-weight: 800;
  line-height: .94;
}

.odtl-hero h1 span, .odtl-about h1 span {
  color: var(--odtl-blue);
}

.odtl-copy {
  max-width: 470px;
  color: var(--odtl-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.odtl-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  display: flex;
}

.odtl-button {
  border-radius: var(--odtl-radius-sm);
  border: 1px solid #385363;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 50px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 750;
  display: inline-flex;
}

.odtl-button:hover {
  background: #203845;
}

.odtl-button-primary {
  color: #081720;
  background: var(--odtl-blue);
  border-color: var(--odtl-blue);
}

.odtl-button-primary:hover {
  background: var(--odtl-blue-bright);
}

.odtl-small {
  color: var(--odtl-text-subtle);
  font-size: 12px;
  line-height: 1.6;
}

.odtl-preview {
  isolation: isolate;
  border: 1px solid var(--odtl-border-strong);
  border-radius: var(--odtl-radius-lg);
  background: var(--odtl-surface-raised);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px #0008, inset 0 1px #ffffff12;
}

.odtl-preview-label {
  z-index: 3;
  color: #b4c6d1;
  text-transform: uppercase;
  letter-spacing: .09em;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  position: relative;
}

.odtl-preview-label span:first-child {
  color: var(--odtl-gold);
}

.odtl-preview img {
  z-index: 0;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
  width: 100%;
  height: 330px;
  animation: 16s ease-in-out infinite alternate odtl-camera-drift;
  display: block;
  position: relative;
  transform: scale(1.035);
}

.odtl-preview figcaption {
  z-index: 3;
  background: var(--odtl-surface-raised);
  gap: 5px;
  padding: 20px;
  display: grid;
  position: relative;
}

.odtl-preview figcaption strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 25px;
}

.odtl-preview figcaption span {
  color: var(--odtl-text-muted);
  font-size: 13px;
}

.odtl-section {
  border-top: 1px solid var(--odtl-border);
  padding-block: 48px;
}

.odtl-section-heading {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.odtl-site h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

.odtl-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.odtl-mode {
  border-radius: var(--odtl-radius-md);
  background: linear-gradient(140deg, #152733, var(--odtl-surface));
  border: 1px solid #2c414e;
  flex-direction: column;
  align-items: flex-start;
  min-height: 250px;
  padding: 22px;
  display: flex;
}

.odtl-mode:hover {
  border-color: var(--odtl-blue);
  background: var(--odtl-surface-hover);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -26px #3b9dc4aa;
}

.odtl-mode {
  transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
}

.odtl-mode-featured {
  background: radial-gradient(circle at 100% 0, #1f789b40, #0000 46%), linear-gradient(140deg, #163747, #0d1820);
  border-color: #3b9dc488;
  box-shadow: inset 0 1px #fff2, 0 16px 34px -28px #3b9dc4aa;
}

.odtl-mode-featured:hover {
  border-color: var(--odtl-blue-bright);
  background: radial-gradient(circle at 100% 0, #1f789b55, #0000 46%), linear-gradient(140deg, #1c4558, #101b22);
}

.odtl-mode > svg {
  color: #e3c779;
  width: 22px;
  margin-bottom: 18px;
}

.odtl-mode-featured > svg {
  width: 30px;
  height: 30px;
  color: var(--odtl-blue-link);
}

.odtl-mode-featured h3 {
  margin-top: 10px;
  font-size: clamp(36px, 4vw, 48px);
}

.odtl-mode-featured p {
  max-width: 38ch;
  font-size: 15px;
}

.odtl-mode-secondary {
  padding: 22px;
}

.odtl-mode-secondary > svg {
  margin: 0 0 18px;
}

.odtl-mode-secondary .odtl-mode-action {
  padding-top: 10px;
}

.odtl-mode h3 {
  font-family: var(--font-display);
  margin-block: 4px;
  font-size: 29px;
  font-weight: 700;
}

.odtl-mode p, .odtl-how p, .odtl-about-grid p {
  color: var(--odtl-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.odtl-mode-action, .odtl-text-link {
  color: var(--odtl-blue-link);
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
}

.odtl-mode-action {
  margin-top: auto;
  padding-top: 20px;
}

.odtl-text-link {
  min-height: 44px;
}

.odtl-text-link:hover {
  text-decoration: underline;
}

.odtl-how ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  display: grid;
}

.odtl-how li {
  gap: 14px;
  display: flex;
}

.odtl-how li > span {
  color: var(--odtl-gold);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}

.odtl-how h3 {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 650;
}

.odtl-resume {
  background: #b5932612;
  border: 1px solid #6f633a;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
  padding: 18px 20px;
  display: flex;
}

.odtl-resume strong {
  margin-top: 5px;
  font-weight: 650;
  display: block;
}

.odtl-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  display: grid;
}

.odtl-stats > div {
  border-left: 2px solid #355567;
  flex-direction: column-reverse;
  padding-left: 16px;
  display: flex;
}

.odtl-stats dt {
  color: var(--odtl-text-muted);
  font-size: 12px;
}

.odtl-stats dd {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.odtl-stats > div:first-child dd {
  color: var(--odtl-gold);
}

.odtl-stats .odtl-stat-primary {
  background: linear-gradient(145deg, #b593261c, #0d1b25a8);
  border: 1px solid #a4863c88;
  border-radius: 6px;
  padding: 14px 16px;
  box-shadow: inset 0 1px #fff2, 0 12px 28px #0002;
}

.odtl-stats .odtl-stat-primary dt {
  color: #f0d98e;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 750;
}

.odtl-stats .odtl-stat-primary dd {
  font-size: 48px;
}

.odtl-footer {
  border-top: 1px solid var(--odtl-border);
  color: var(--odtl-text-subtle);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-block: 24px;
  font-size: 12px;
  display: flex;
}

.odtl-footer a {
  align-items: center;
  gap: 8px;
  min-height: 44px;
  display: inline-flex;
}

.leaderboard-lead {
  border-radius: var(--odtl-radius-lg);
  background: radial-gradient(circle at 90% 10%, #3b9dc430, #0000 40%), linear-gradient(135deg, #123344, #0d1820);
  border: 1px solid #3b9dc466;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 18px;
  padding: 18px 20px;
  display: grid;
  box-shadow: inset 0 1px #ffffff12, 0 18px 40px -30px #3b9dc4;
}

.leaderboard-lead h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin-top: 5px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: .95;
}

.leaderboard-lead-score, .leaderboard-lead-stat {
  border-left: 1px solid #fff2;
  min-width: 110px;
  padding-left: 18px;
}

.leaderboard-lead strong {
  font-family: var(--font-display);
  margin-top: 4px;
  font-size: 2rem;
  line-height: 1;
  display: block;
}

.leaderboard-lead-score strong {
  color: var(--odtl-blue-bright);
}

.leaderboard-self {
  box-shadow: inset 0 0 0 1px var(--odtl-blue-bright);
}

.odtl-about {
  padding-top: 48px;
}

.odtl-about > .odtl-copy {
  max-width: 650px;
}

.odtl-about-grid {
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  margin-block: 44px;
  display: grid;
}

.odtl-about-grid section {
  border-top: 1px solid #344752;
  padding-top: 20px;
}

.odtl-about-grid h2 {
  margin-bottom: 12px;
}

@media (width <= 900px) {
  .odtl-nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block: 16px 8px;
  }

  .odtl-brand span {
    display: inline;
  }

  .odtl-nav {
    justify-content: space-between;
    gap: 6px;
    width: 100%;
  }

  .odtl-hero {
    gap: 24px;
    padding-top: 36px;
  }

  .odtl-preview img {
    height: 240px;
  }

  .odtl-mode {
    padding: 18px;
  }
}

@media (width <= 620px) {
  .odtl-site {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    background: radial-gradient(circle at 88% 2%, #16506a55, #0000 34%), radial-gradient(circle at 8% 26%, #0d365055, #0000 36%), linear-gradient(175deg, #07111a, #05090e 72%);
    animation: .36s ease-out both odtl-mobile-page-enter;
  }

  .odtl-container, .odtl-nav-inner {
    width: calc(100% - 32px);
  }

  .odtl-brand {
    font-size: 22px;
  }

  .odtl-header {
    z-index: 40;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #07111adb;
    border-bottom-color: #5dbbe51c;
    position: sticky;
    top: 0;
  }

  .odtl-nav-inner {
    flex-direction: row;
    align-items: center;
    min-height: 64px;
    padding-block: 8px;
  }

  .odtl-nav {
    display: none;
  }

  .odtl-bottom-nav {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 70;
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    background: #09121aeb;
    border: 1px solid #ffffff1b;
    border-radius: 24px;
    padding: 5px;
    animation: .42s cubic-bezier(.22, 1, .36, 1) both odtl-bottom-nav-in;
    display: block;
    position: fixed;
    left: 8px;
    box-shadow: 0 20px 48px #000b, inset 0 1px #ffffff12;
  }

  .odtl-bottom-nav-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    display: grid;
  }

  .odtl-bottom-nav-item {
    color: #8ea2ad;
    min-width: 0;
    min-height: 58px;
    font: inherit;
    letter-spacing: .015em;
    background: none;
    border: 0;
    border-radius: 18px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 5px 2px;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    transition: color .16s, background-color .16s, transform .16s;
    display: flex;
  }

  .odtl-bottom-nav-item[aria-current="page"] {
    color: #eaf8ff;
    background: linear-gradient(155deg, #35bff52c, #0a668c26);
    box-shadow: inset 0 0 0 1px #4bc9fb35, 0 10px 24px -18px #29bfff;
  }

  .odtl-bottom-nav-item[aria-current="page"] svg {
    color: #52ccff;
    filter: drop-shadow(0 0 7px #2cbcf766);
  }

  .odtl-bottom-nav-item:active {
    transform: scale(.96);
  }

  .odtl-menu-button {
    color: #edf3f5;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: #102330cc;
    border: 1px solid #ffffff2b;
    border-radius: 5px;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 750;
    display: inline-flex;
  }

  .odtl-mobile-drawer {
    z-index: 35;
    animation: .18s ease-out both odtl-drawer-fade;
    display: block;
    position: fixed;
    inset: 0;
  }

  .odtl-drawer-backdrop {
    background: #02070bcc;
    border: 0;
    width: 100%;
    position: absolute;
    inset: 0;
  }

  .odtl-drawer-panel {
    background: linear-gradient(155deg, #132d3a, #09141c 75%);
    border: 1px solid #477286;
    border-radius: 8px;
    gap: 8px;
    padding: 16px;
    animation: .22s cubic-bezier(.2, .8, .2, 1) both odtl-drawer-rise;
    display: grid;
    position: absolute;
    top: 72px;
    left: 16px;
    right: 16px;
    box-shadow: 0 24px 70px #0008;
  }

  .odtl-drawer-panel a {
    color: #d8e7ed;
    background: #0a1821aa;
    border: 1px solid #ffffff18;
    border-radius: 5px;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
  }

  .odtl-drawer-panel a[aria-current="page"] {
    color: #fff;
    background: #164055;
    border-color: #3b9dc488;
  }

  .odtl-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    padding-block: 34px 26px;
  }

  .odtl-hero h1 {
    max-width: 9ch;
    font-size: clamp(48px, 13.5vw, 66px);
  }

  .odtl-hero h1, .odtl-about h1 {
    margin-block: 12px;
    font-size: clamp(45px, 12vw, 66px);
  }

  .odtl-copy {
    font-size: 14px;
  }

  .odtl-actions {
    margin-top: 20px;
  }

  .odtl-actions .odtl-button {
    width: 100%;
    min-height: 54px;
    padding-inline: 14px;
  }

  .odtl-preview img {
    aspect-ratio: 2.24;
    height: auto;
  }

  .odtl-preview figcaption {
    padding: 12px 16px;
  }

  .odtl-preview figcaption strong {
    font-size: 22px;
  }

  .odtl-preview-label {
    padding-block: 10px;
  }

  .odtl-section {
    padding-block: 24px;
  }

  .odtl-mode-grid, .odtl-how ol, .odtl-about-grid {
    grid-template-columns: 1fr;
  }

  .odtl-mode-grid {
    grid-template-rows: none;
  }

  .odtl-mode {
    grid-template-columns: 28px 1fr;
    column-gap: 14px;
    min-height: 0;
    padding: 16px;
    display: grid;
  }

  .odtl-mode-featured {
    border-color: #3b9dc488;
    grid-row: auto;
    min-height: 210px;
    padding: 20px;
  }

  .odtl-mode-featured > svg {
    width: 26px;
    height: 26px;
  }

  .odtl-mode-featured h3 {
    margin-top: 2px;
    font-size: 32px;
  }

  .odtl-mode-featured p {
    font-size: 14px;
  }

  .odtl-mode-secondary {
    min-height: 142px;
  }

  .odtl-mode > svg {
    grid-row: 1 / 5;
    margin: 4px 0 0;
  }

  .odtl-mode h3 {
    font-size: 25px;
  }

  .odtl-mode-action {
    padding-top: 10px;
  }

  .odtl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .leaderboard-lead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .leaderboard-lead > div:first-child {
    grid-column: 1 / -1;
  }

  .leaderboard-lead-score, .leaderboard-lead-stat {
    min-width: 0;
    padding-left: 12px;
  }

  .odtl-about {
    padding-top: 28px;
  }

  .odtl-about-grid {
    gap: 24px;
    margin-block: 30px;
  }
}

@keyframes odtl-drawer-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes odtl-drawer-rise {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes odtl-sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes odtl-bottom-nav-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes odtl-mobile-page-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes odtl-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes odtl-camera-drift {
  from {
    transform: scale(1.035) translate3d(-.5%, 0, 0);
  }

  to {
    transform: scale(1.07) translate3d(.5%, -1%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .odtl-site, .odtl-mobile-drawer, .odtl-drawer-panel, .odtl-more-overlay, .odtl-more-sheet, .odtl-bottom-nav, .odtl-preview img {
    animation: none;
  }

  .odtl-mode, .odtl-nav a, .odtl-bottom-nav-item {
    transition: none;
  }
}

@media (hover: none) {
  .odtl-mode:active, .odtl-button:active, .odtl-bottom-nav-item:active {
    transform: scale(.985);
  }
}