:root {
  color-scheme: dark;
  --paper: #101112;
  --surface: #191b1d;
  --raised: #202325;
  --line: #353839;
  --ink: #f5f6f3;
  --muted: #b8bcb9;
  --lime: #b7f62b;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --gutter: clamp(1.125rem, 4vw, 4rem);
  --content: 82rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--font-body); }
::selection { background: var(--lime); color: #141a0d; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
img { display: block; max-width: 100%; }
svg:not(.icons) { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .6rem 1rem; border-radius: .3rem; color: #151a0d; background: var(--lime); }
.skip-link:focus { transform: translateY(0); }

h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: .99; text-wrap: balance; }
h2 { font-size: clamp(2.55rem, 5vw, 4.65rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.012em; }
p { color: var(--muted); }
.section-label { font-size: .72rem; line-height: 1.4; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--lime); margin-bottom: .9rem; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #111213f5;
  border-bottom: 1px solid #2a2d2a;
}
.masthead-inner { min-height: 4.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.8rem; }
.logo-link { width: fit-content; }
.logo-link img { height: auto; }
.masthead-inner > .button { justify-self: end; }
.mast-nav { display: flex; align-items: center; gap: clamp(1.15rem, 3vw, 3rem); }
.mast-nav a, .footer a { color: var(--muted); font-size: .875rem; font-weight: 600; text-decoration: none; }
.mast-nav a:hover, .footer a:hover { color: var(--ink); }

.button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  font-size: .91rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: color .18s, background .18s, border-color .18s;
}
.button-small { min-height: 2.7rem; padding-inline: .9rem; font-size: .83rem; }
.button-primary { color: #171d0d; background: var(--lime); }
.button-primary:hover { background: #cdff62; }
.button-primary:disabled { background: #44523a; color: #d1dbca; }
.button-outline { color: var(--ink); border-color: #4b4f4a; background: #151716; }
.button-outline:hover { background: #202420; border-color: #818879; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; color: var(--lime); font-size: .92rem; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: .25em; }

.hero { position: relative; isolation: isolate; background: #121414; overflow: clip; }
.hero-inner { min-height: clamp(31rem, 48vw, 45rem); display: grid; align-items: center; }
.hero-copy { z-index: 1; position: relative; width: min(55%, 44rem); padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero h1 {
  font-size: clamp(4.3rem, 8.25vw, 8.25rem);
  line-height: .88;
  letter-spacing: -.04em;
  font-weight: 800;
  text-wrap: balance;
}
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-intro { margin-top: 1.55rem; max-width: 30rem; color: #d0d4d0; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.9rem; }
.hero-media { position: absolute; inset: 0 0 0 27%; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #121414 0%, #121414e8 8%, #1214147d 30%, transparent 64%),
    linear-gradient(0deg, #121414 0%, transparent 17%);
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface);
  position: relative;
  margin-top: -1.5rem;
  z-index: 2;
}
.entry-grid a {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  min-height: 6rem;
  padding: 1rem clamp(.75rem, 2vw, 1.65rem);
  border-radius: inherit;
  text-decoration: none;
  transition: background .18s;
}
.entry-grid a + a { border-left: 1px solid var(--line); border-radius: 0; }
.entry-grid a:hover { background: #232923; }
.entry-grid .entry-icon { width: 1.5rem; height: 1.5rem; color: var(--lime); }
.entry-grid .entry-arrow { color: #9baf86; width: 1.05rem; height: 1.05rem; }
.entry-grid strong, .entry-grid small { display: block; }
.entry-grid strong { font-size: 1rem; line-height: 1.25; }
.entry-grid small { margin-top: .2rem; color: var(--muted); font-size: .81rem; line-height: 1.4; }

.section { padding-block: clamp(3.65rem, 7.2vw, 7rem); }
.section-header { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); gap: 1rem 3rem; align-items: end; margin-bottom: 2rem; }
.section-header > p { max-width: 30rem; font-size: 1.03rem; }
.section-header h2 { text-wrap: wrap; }

.modes { display: grid; gap: .75rem; }
.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--line);
  background: #141617;
  border-radius: .55rem;
}
.mode-tabs button {
  min-height: 2.85rem;
  padding: .5rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: .35rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
}
.mode-tabs button:hover { color: var(--ink); background: var(--raised); }
.mode-tabs [aria-selected="true"] { border-color: #4c6335; background: #25311c; color: #d1ff7e; }
.mode-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr);
  gap: clamp(1.2rem, 4vw, 3.6rem);
  padding: clamp(1.25rem, 3.5vw, 2.6rem);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background:
    linear-gradient(110deg, #202522 0%, transparent 59%),
    var(--surface);
}
.mode-main h3 { margin-top: .8rem; }
.mode-main p { margin-top: .65rem; max-width: 38rem; }
.mode-main .text-link { margin-top: 1rem; }
.feature-icon { color: var(--lime); }
svg.feature-icon { width: 1.5rem; height: 1.5rem; }
.mode-specs { margin: 0; padding: 0; }
.mode-specs div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.mode-specs div:first-child { border-top: 1px solid var(--line); }
.mode-specs dt { color: var(--muted); }
.mode-specs dd { margin: 0; font-weight: 700; }
.mode-specs dt, .mode-specs dd { font-size: .88rem; }

.sprint-section {
  border-block: 1px solid #31382d;
  background:
    radial-gradient(ellipse at 86% -25%, #283521 0, transparent 62%),
    #151816;
}
.sprint-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(17rem, .85fr);
  gap: 1px;
  background: #3d4839;
  border: 1px solid #3d4839;
  border-radius: .8rem;
  overflow: clip;
}
.demo-screen { min-width: 0; padding: clamp(.85rem, 3vw, 2rem); background: #0d100e; }
.demo-screen-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.demo-screen-header img { height: auto; }
.demo-screen-header > span { color: var(--muted); font-size: .8rem; font-weight: 700; }
.demo-players, .demo-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.demo-player {
  min-width: 0;
  padding: clamp(.7rem, 1.8vw, 1.1rem);
  border-radius: .5rem;
  border: 1px solid #383e37;
  background: #191d19;
  display: grid;
  gap: .35rem;
  grid-template-rows: auto 1fr auto;
}
.demo-player[data-active="true"] {
  background: linear-gradient(135deg, #2b3c1c, #171e14 70%);
  border-color: #7f9d45;
}
.demo-player[data-active="true"] .demo-remaining { color: var(--lime); }
.demo-player-id { display: flex; gap: .5rem; align-items: center; }
.demo-player-id strong { display: block; font-size: .93rem; line-height: 1.2; }
.demo-player-id div > span { display: block; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.initials { display: grid; place-items: center; width: 1.95rem; height: 1.95rem; flex: none; border: 1px solid #63715b; border-radius: 50%; background: #222a21; font-size: .63rem; font-weight: 700; }
.demo-remaining { font: 800 clamp(3.1rem, 8vw, 6.25rem)/.89 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.demo-finish { min-height: 1.6em; font-size: .77rem; font-weight: 700; color: #c5d1bc; }
.demo-ledger { margin-top: .65rem; }
.demo-ledger-col { border: 1px solid #2c332b; border-radius: .45rem; overflow: hidden; }
.demo-ledger-head, .demo-ledger li { display: flex; gap: .35rem; justify-content: space-between; align-items: center; padding: .35rem .72rem; }
.demo-ledger-head { background: #1b2219; color: #b9c2b6; font-size: .65rem; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
.demo-ledger ol { display: grid; grid-auto-rows: 1.95rem; min-height: 7.8rem; align-content: end; padding: 0; margin: 0; list-style: none; }
.demo-ledger li { border-top: 1px solid #252c24; font-size: .84rem; font-variant-numeric: tabular-nums; }
.demo-ledger li span { color: var(--muted); }
.demo-ledger li:last-child { background: #181f16; }
.demo-ledger li:last-child b { color: #d8ffad; }

.demo-control { min-width: 0; padding: clamp(1rem, 3vw, 2.2rem); background: #1c211b; }
.demo-control h3 { margin-top: .65rem; }
.demo-control > p { margin-top: .5rem; font-size: .94rem; }
.demo-control > .text-link { margin-top: 1.1rem; }
.demo-form { margin-top: 1.15rem; }
.demo-form label { display: block; margin-bottom: .4rem; font-size: .83rem; color: var(--muted); }
.demo-form label strong { color: var(--ink); }
.demo-input, .demo-confirm { display: flex; gap: .5rem; }
.demo-input input {
  min-width: 0;
  width: 100%;
  flex: 1;
  border: 1px solid #5a6556;
  border-radius: .375rem;
  background: #101310;
  padding-inline: .7rem;
  color: var(--ink);
  font-size: 1rem;
}
.demo-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-top: .5rem; }
.demo-quick button {
  min-height: 2.65rem;
  padding: .3rem .2rem;
  background: #252c23;
  border: 1px solid #475544;
  border-radius: .35rem;
  color: var(--ink);
  font-weight: 700;
}
.demo-quick button:hover { background: #354331; border-color: #849674; }
.demo-quick button:disabled { opacity: .45; }
.demo-confirm { margin-top: .65rem; flex-wrap: wrap; }
.demo-message { min-height: 2.25em; margin-top: .45rem; font-size: .8rem; line-height: 1.42; color: #d5ddd2; }
.demo-message[data-error] { color: #ffb4a5; }
.demo-tools { display: flex; flex-wrap: wrap; gap: .2rem .85rem; }
.demo-tools button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2.75rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: #d5ddd2;
  font-size: .8rem;
  font-weight: 700;
}
.demo-tools button:hover:enabled { color: var(--lime); }
.demo-tools button:disabled { opacity: .45; }

.venue-layout { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(1.6rem, 5vw, 4.75rem); align-items: stretch; }
.venue-media { position: relative; background: #1a2019; border-radius: .65rem; overflow: hidden; min-height: 28rem; }
.venue-media img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 44% center; }
.venue-copy { padding-block: .5rem; }
.venue-copy > p:not(.section-label) { margin-top: .95rem; }
.venue-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.25rem 0; }
.venue-steps li { counter-increment: step; display: flex; gap: .85rem; align-items: start; padding-block: .75rem; border-top: 1px solid var(--line); }
.venue-steps li::before { content: "0" counter(step); color: var(--lime); font: 700 1.35rem/1 var(--font-display); width: 1.35rem; flex: none; }
.venue-steps strong { display: block; font-size: .98rem; line-height: 1.3; }
.venue-steps p { margin-top: .2rem; font-size: .88rem; }

.community-section { padding-top: 0; }
.community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.community-grid article { min-width: 0; display: flex; flex-direction: column; gap: .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--surface); padding: clamp(1.2rem, 2.45vw, 2rem); }
.community-grid article p { font-size: .94rem; }
.community-grid .text-link { margin-top: auto; padding-top: .35rem; }
.community-grid h3 { font-size: clamp(1.65rem, 2.6vw, 2.15rem); text-wrap: wrap; }

.faq { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 1.5rem 3rem; padding-bottom: clamp(2.65rem, 6vw, 5.25rem); }
.faq h2 { max-width: 10ch; text-wrap: wrap; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; min-height: 3.55rem; padding: .8rem .15rem; font-weight: 700; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--lime); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { max-width: 43rem; padding: 0 2.5rem .95rem .15rem; font-size: .95rem; }

.end-section { padding-bottom: clamp(3rem, 5vw, 5rem); }
.end-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.45rem, 4vw, 3.25rem);
  border: 1px solid #526145;
  border-radius: .65rem;
  background: #20271c;
}
.end-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 33%;
  background: repeating-radial-gradient(circle at 85% 45%, transparent 0 1.2rem, #a4d86b22 1.2rem calc(1.2rem + 1px), transparent calc(1.2rem + 1px) 2.6rem);
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.end-card h2 { font-size: clamp(2.2rem, 4.5vw, 3.75rem); text-wrap: wrap; }
.end-card p { margin-top: .45rem; }
.end-card .button { flex: none; }

.footer { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; }

@media (max-width: 950px) {
  .masthead-inner { gap: 1rem; }
  .hero-copy { width: min(62%, 38rem); }
  .hero-media { left: 20%; }
  .hero-media::after { background: linear-gradient(90deg, #121414 0%, #121414ed 10%, #12141490 34%, transparent 78%), linear-gradient(0deg, #121414, transparent 18%); }
  .entry-grid a { grid-template-columns: auto minmax(0, 1fr); min-height: 5.5rem; }
  .entry-grid .entry-arrow { display: none; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 5rem; }
  .masthead-inner { grid-template-columns: 1fr auto; min-height: 4rem; }
  .masthead-inner img { width: 8.2rem; }
  .mast-nav { display: none; }
  .hero-inner { min-height: 0; }
  .hero-copy { width: 100%; padding-block: 3rem 0; }
  .hero h1 { font-size: clamp(3.7rem, 12vw, 6.25rem); }
  .hero-intro { margin-top: 1.15rem; max-width: 29rem; }
  .actions { margin-top: 1.4rem; }
  .hero-media { position: relative; inset: auto; width: calc(100% + 2 * var(--gutter)); height: clamp(12rem, 49vw, 25rem); margin-inline: calc(-1 * var(--gutter)); margin-top: .35rem; }
  .hero-media img { object-position: right 51%; }
  .hero-media::after { background: linear-gradient(180deg, #121414, #12141445 16%, transparent 38%), linear-gradient(0deg, #121414, transparent 28%); }
  .entry-grid { margin-top: -.75rem; }
  .entry-grid a { gap: .55rem; }
  .entry-grid strong { font-size: .91rem; }
  .entry-grid small { font-size: .74rem; }
  .entry-grid .entry-icon { width: 1.15rem; height: 1.15rem; }
  .section-header { grid-template-columns: 1fr; margin-bottom: 1.35rem; }
  .section-header > p { max-width: 38rem; }
  .sprint-demo { grid-template-columns: minmax(0, 1fr); }
  .demo-control, .demo-screen { padding: 1.05rem; }
  .demo-remaining { font-size: clamp(3.45rem, 11vw, 5.3rem); }
  .venue-layout { grid-template-columns: minmax(0, 1fr); }
  .venue-media { min-height: 0; aspect-ratio: 16/9; order: 2; }
  .venue-media img { object-position: center; }
  .venue-copy { padding: 0; }
  .community-grid { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq h2 { max-width: none; }
}

@media (max-width: 510px) {
  .hero h1 { font-size: clamp(3rem, 12.1vw, 4.7rem); }
  .actions > .button { flex: 1 1 9rem; padding-inline: .55rem; }
  .entry-grid { grid-template-columns: minmax(0, 1fr); }
  .entry-grid a { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 3.85rem; padding: .62rem .95rem; gap: .75rem; }
  .entry-grid a + a { border-left: 0; border-top: 1px solid var(--line); }
  .entry-grid .entry-arrow { display: block; }
  .mode-panel { grid-template-columns: minmax(0, 1fr); }
  .mode-tabs button { font-size: .79rem; padding-inline: .25rem; }
  .mode-specs div { gap: .2rem .55rem; }
  .mode-specs dt, .mode-specs dd { font-size: .82rem; }
  .demo-control, .demo-screen { padding: .8rem; }
  .demo-ledger-head, .demo-ledger li { padding-inline: .45rem; }
  .demo-ledger-head { font-size: .58rem; letter-spacing: .035em; }
  .demo-player-id { gap: .35rem; }
  .initials { width: 1.65rem; height: 1.65rem; }
  .end-card { align-items: start; flex-direction: column; }
  .footer-inner { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}