:root {
  color-scheme:dark;
  --ink:#e9eff3;
  --muted:#93a3af;
  --lime:#c2f178;
  --line:#ffffff21;
  --panel:#101820e8;
  --font:Arial,"Helvetica Neue",system-ui,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#0b1116;
  color:var(--ink);
  font-family:var(--font);
  font-size:15px
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button:disabled {
  opacity:.45;
  cursor:wait
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:5px
}

button:focus:not(:focus-visible),canvas:focus:not(:focus-visible) {
  outline:none
}

[hidden] {
  display:none!important
}

a {
  color:inherit
}

button svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.game {
  height:100svh;
  min-height:640px;
  max-height:1200px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#111b24
}

.game:fullscreen {
  height:100dvh;
  max-height:none;
  min-height:0
}

.game canvas#world {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none
}

.vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#08101988 0%,transparent 24%,transparent 64%,#05090fac 100%)
}

.hero-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#081119ee 0%,#0a131ddd 23%,#0a141b65 46%,transparent 65%),linear-gradient(0deg,#071018 0%,transparent 20%)
}

.topbar {
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:27px 4.4%;
  border-bottom:1px solid #e1eef014;
  background:linear-gradient(#09111b33,transparent)
}

.wordmark {
  background:none;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.9px
}

.wordmark svg {
  fill:var(--ink);
  stroke:none;
  width:25px;
  height:25px
}

.wordmark span {
  font-size:8px;
  letter-spacing:2px;
  font-weight:400;
  opacity:.6;
  border-left:1px solid #ffffff3c;
  padding-left:12px;
  margin-left:10px
}

.top-actions {
  display:flex;
  align-items:center;
  gap:20px
}

.edition {
  font:10px monospace;
  letter-spacing:1.7px;
  color:#ccdbe4aa;
  margin-right:22px
}

.text-button {
  background:none;
  border:0;
  font-size:12px;
  padding:8px 0;
  color:#d4e1e8
}

.icon-button {
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  padding:4px;
  border-radius:4px
}

.icon-button:hover,.text-button:hover {
  color:var(--lime)
}

.icon-button[aria-pressed=false] .sound-waves {
  opacity:.2
}

.hero {
  position:absolute;
  z-index:2;
  left:6.9%;
  top:21%;
  width:47%;
  max-width:650px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  color:#bccbd4;
  font:10px monospace;
  letter-spacing:2px
}

.live-dot {
  background:var(--lime);
  width:5px;
  height:5px;
  border-radius:50%;
  box-shadow:0 0 13px #c4ef7770
}

.hero h1 {
  font-size:clamp(54px,5.35vw,94px);
  font-weight:600;
  letter-spacing:-.065em;
  line-height:1.025;
  margin:25px 0 21px
}

.hero h1 em {
  color:var(--lime);
  font-style:normal
}

.hero-copy {
  color:#becbd4;
  font-size:17px;
  line-height:1.6;
  margin:0 0 28px
}

.hero-buttons {
  display:flex;
  gap:12px
}

.button {
  min-height:53px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  padding:16px 24px;
  border-radius:3px;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  transition:background .18s,transform .18s;
  white-space:nowrap
}

.button:hover {
  transform:translateY(-2px)
}

.button.primary {
  background:var(--lime);
  color:#131d15;
  border-color:var(--lime);
  box-shadow:0 7px 28px #08110924
}

.button.primary:hover {
  background:#d2ffa0
}

.button.secondary {
  background:#18222a67;
  border-color:#c5dce333;
  color:#e2edf2;
  backdrop-filter:blur(8px)
}

.button.secondary:hover {
  background:#293840a0
}

.play-icon {
  font-size:20px;
  line-height:14px
}

.free-note {
  font:9px monospace;
  letter-spacing:1px;
  color:#b1c0c9;
  margin:17px 0
}

.free-note i {
  font-style:normal;
  margin:0 6px;
  opacity:.5
}

.load-note {
  font:11px monospace;
  color:var(--lime)
}

.inspired {
  font-size:10px;
  line-height:1.6;
  color:#7d929f;
  margin-top:24px
}

.hero-spec {
  position:absolute;
  right:5%;
  bottom:18%;
  text-align:right
}

.hero-spec>span {
  font:11px monospace;
  color:var(--lime);
  letter-spacing:3px
}

.hero-spec strong {
  display:block;
  font-size:20px;
  line-height:1.12;
  font-weight:400;
  letter-spacing:-.5px;
  margin-top:11px
}

.hero-spec p {
  font:8px monospace;
  letter-spacing:1.3px;
  opacity:.48
}

.hero-footer {
  position:absolute;
  bottom:0;
  left:6.9%;
  right:4.8%;
  height:93px;
  border-top:1px solid #ffffff22;
  display:flex;
  align-items:center;
  gap:30px
}

.hero-footer>div {
  display:flex;
  gap:10px;
  align-items:center
}

.hero-footer span {
  font:10px monospace;
  opacity:.42
}

.hero-footer strong {
  font-size:10px;
  letter-spacing:2px;
  font-weight:400
}

.hero-footer>b {
  font-weight:400;
  color:#8aa1ad55
}

.hero-footer a {
  margin-left:auto;
  text-decoration:none;
  font-size:11px;
  color:#82939f
}

.challenge-invitation {
  background:#c4f47c15;
  border-left:2px solid var(--lime);
  padding:9px 14px;
  margin:-8px 0 20px;
  color:var(--lime);
  font-size:12px;
  max-width:365px
}

.hud {
  position:absolute;
  inset:95px 0 0;
  pointer-events:none
}

.stage-strip {
  display:flex;
  align-items:center;
  gap:11px;
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  font:9px monospace;
  letter-spacing:1.8px;
  background:#0b172166;
  border:1px solid #c5d8e01a;
  border-radius:30px;
  padding:11px 19px;
  backdrop-filter:blur(10px)
}

.stage-strip i {
  width:20px;
  height:1px;
  background:#d9e9ea2a
}

.stage-strip span {
  opacity:.4
}

.stage-strip span.active {
  color:var(--lime);
  opacity:1
}

.stage-strip span.done {
  opacity:.85
}

.run-meta {
  position:absolute;
  right:4.4%;
  top:12px;
  display:flex;
  align-items:center;
  gap:13px;
  font:9px monospace;
  letter-spacing:1.5px;
  color:#d2e4eb;
  pointer-events:auto
}

.run-meta>span:nth-child(2) {
  color:var(--lime)
}

.run-meta .icon-button {
  margin-left:8px
}

.cue {
  position:absolute;
  left:50%;
  top:87px;
  transform:translateX(-50%);
  text-align:center;
  text-shadow:0 2px 16px #000b;
  width:90%
}

.cue>span {
  display:block;
  color:var(--lime);
  font:9px monospace;
  letter-spacing:2.2px
}

.cue strong {
  font-size:28px;
  font-weight:500;
  letter-spacing:-.6px;
  display:block;
  margin-top:9px
}

.cue p {
  font-size:12px;
  margin:8px 0;
  color:#d5e2e9
}

.telemetry {
  position:absolute;
  bottom:42px;
  left:4.4%;
  display:flex;
  align-items:flex-end;
  gap:32px
}

.speed {
  display:flex;
  gap:11px;
  align-items:flex-end
}

.speed>span {
  font-size:62px;
  font-weight:400;
  letter-spacing:-3px;
  font-variant-numeric:tabular-nums;
  line-height:.9
}

.speed small {
  font:10px monospace;
  color:#b6cbd5;
  line-height:1.5;
  margin-bottom:3px
}

.speed i {
  display:block;
  font-size:7px;
  opacity:.65;
  font-style:normal;
  letter-spacing:1px
}

.telemetry-small>span {
  font:8px monospace;
  letter-spacing:1.3px;
  opacity:.62;
  display:block;
  margin-bottom:9px
}

.telemetry-small strong {
  font:22px monospace;
  letter-spacing:-1px
}

.telemetry-small small {
  font-size:9px;
  color:#9eb5c3;
  letter-spacing:0
}

.attitude {
  position:absolute;
  left:4.5%;
  bottom:168px;
  display:flex;
  align-items:center;
  gap:13px
}

.attitude>span {
  font:8px monospace;
  letter-spacing:1.3px;
  color:#c0d2dd
}

.attitude-ring {
  width:55px;
  height:55px;
  border:1px solid #d0e1e640;
  border-radius:50%;
  position:relative;
  background:#0e1a2460
}

.horizon {
  position:absolute;
  top:50%;
  left:6px;
  right:6px;
  height:1px;
  background:#c4f47773
}

.attitude-car {
  position:absolute;
  inset:0;
  z-index:1;
  transition:color .2s
}

.attitude-car:before {
  content:"";
  position:absolute;
  width:26px;
  height:7px;
  border-radius:3px;
  background:var(--lime);
  top:22px;
  left:14px
}

.attitude-car span:before,.attitude-car span:after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  background:#eef6ee;
  top:27px;
  border-radius:1px
}

.attitude-car span:before {
  left:17px
}

.attitude-car span:after {
  right:17px
}

.boost-gauge {
  position:absolute;
  right:4.7%;
  bottom:198px;
  display:flex;
  align-items:center;
  gap:10px;
  font:9px monospace;
  letter-spacing:1px
}

.boost-gauge>span {
  color:#adc2cf
}

.boost-gauge>div {
  width:106px;
  height:4px;
  background:#d8e7ed2c
}

.boost-gauge i {
  height:100%;
  display:block;
  background:var(--lime);
  width:100%
}

.boost-gauge b {
  font:9px monospace;
  min-width:34px
}

.controls {
  position:absolute;
  inset:0;
  pointer-events:none
}

.keyboard-controls {
  position:absolute;
  right:4.5%;
  bottom:40px;
  display:flex;
  gap:15px;
  align-items:center;
  flex-wrap:wrap;
  max-width:500px;
  justify-content:flex-end
}

.keyboard-controls>span {
  display:flex;
  align-items:center;
  gap:4px
}

.keyboard-controls b {
  font-size:10px;
  font-weight:400;
  color:#a7bcc9;
  margin:0 4px
}

.keyboard-controls small {
  font-size:9px;
  color:#748e9f;
  flex-basis:100%;
  text-align:right
}

kbd {
  display:inline-block;
  background:#17232d9c;
  border:1px solid #b7d4e240;
  border-bottom-width:2px;
  min-width:22px;
  padding:4px 6px;
  border-radius:3px;
  font:9px monospace;
  color:#e7f0f4
}

.thrust-button {
  position:absolute;
  right:4.5%;
  bottom:87px;
  width:108px;
  height:88px;
  border:1px solid #c2f17888;
  border-radius:5px;
  background:#17271eaf;
  color:var(--lime);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 26px #c2f17806
}

.thrust-button svg {
  width:20px;
  height:20px;
  stroke-width:1.3
}

.thrust-button span {
  font:9px monospace;
  letter-spacing:.6px
}

.thrust-button small {
  font:7px monospace;
  letter-spacing:2px;
  opacity:.45
}

.thrust-button.active {
  background:#c2f178;
  color:#152817;
  box-shadow:0 0 30px #c2f17845
}

.thrust-button.active small {
  opacity:.8
}

.stick {
  display:none;
  position:absolute;
  bottom:34px;
  left:6%;
  width:148px;
  height:118px;
  border:1px solid #bcd6e12b;
  border-radius:50%;
  background:#12232d66;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  backdrop-filter:blur(8px)
}

.stick-label {
  position:absolute;
  top:-25px;
  left:0;
  width:100%;
  text-align:center;
  font:8px monospace;
  color:#a9bfcd;
  letter-spacing:1px
}

.stick-left,.stick-right,.stick-up,.stick-down {
  position:absolute;
  font-size:13px;
  color:#d4e1e870
}

.stick-left {
  left:12px;
  top:48px
}

.stick-right {
  right:12px;
  top:48px
}

.stick-up {
  left:69px;
  top:5px
}

.stick-down {
  left:69px;
  bottom:5px
}

.stick-knob {
  position:absolute;
  top:calc(50% - 22px);
  left:calc(50% - 22px);
  width:44px;
  height:44px;
  border:1px solid #c4d9e35c;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#36506470;
  color:#dceaf1;
  font-size:20px
}

.result {
  position:absolute;
  left:6.8%;
  top:22%;
  z-index:3;
  width:440px;
  padding:0
}

.result-glow {
  position:absolute;
  z-index:-1;
  inset:-55px -60px;
  background:radial-gradient(ellipse at center,#08131ae8 0%,#09141baa 46%,transparent 73%);
  pointer-events:none
}

.result .eyebrow {
  color:var(--lime)
}

.result h2 {
  font-size:58px;
  line-height:1.04;
  letter-spacing:-3px;
  font-weight:500;
  margin:19px 0 14px
}

.result>p {
  font-size:13px;
  line-height:1.6;
  color:#a5b9c6;
  margin:0 0 16px
}

.result-score {
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin:22px 0 25px
}

.result-score>strong {
  font-size:77px;
  font-weight:400;
  letter-spacing:-5px;
  line-height:.95
}

.result-score>span {
  font:15px monospace;
  color:#aac0cf
}

.result-score small {
  display:block;
  font:8px monospace;
  letter-spacing:.8px;
  margin:9px 0 5px;
  opacity:.6
}

.result-stats {
  display:flex;
  gap:28px;
  padding:17px 0;
  border-top:1px solid #c1d7e028;
  border-bottom:1px solid #c1d7e028;
  margin-bottom:22px
}

.result-stats>div>span {
  font:8px monospace;
  color:#8fa7b7;
  display:block;
  margin-bottom:8px;
  letter-spacing:1px
}

.result-stats b {
  font:17px monospace;
  font-weight:400
}

.result-actions {
  display:flex;
  gap:11px
}

.result-actions .button {
  min-height:49px;
  padding:13px 20px;
  gap:18px
}

.share-actions {
  display:flex;
  gap:17px;
  flex-wrap:wrap;
  margin:21px 0 15px
}

.share-actions button {
  padding:0;
  border:0;
  background:none;
  color:#b5cfdd;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:#7897a673
}

.share-actions button:first-child {
  color:var(--lime)
}

.result .result-foot {
  font-size:9px;
  color:#6f8b9f
}

.result.failed h2 {
  color:#fff0e0
}

.result.failed .eyebrow {
  color:#efb277
}

.result.failed .result-score {
  display:none
}

.replay-bar {
  position:absolute;
  bottom:35px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:18px;
  padding:17px 22px;
  max-width:calc(100% - 36px);
  width:740px;
  background:#101d28de;
  backdrop-filter:blur(12px);
  border:1px solid #d3e5e32a;
  border-radius:6px
}

.replay-bar>span {
  font:9px monospace;
  letter-spacing:1px;
  color:var(--lime);
  white-space:nowrap
}

.replay-bar button {
  border:0;
  background:transparent;
  font-size:11px;
  white-space:nowrap
}

.replay-bar input {
  width:100%;
  accent-color:var(--lime);
  cursor:pointer;
  min-width:40px
}

.replay-bar select,.quality-label select {
  background:#152733;
  border:1px solid #c3d7e933;
  color:#d5e4ed;
  border-radius:3px;
  padding:5px;
  font-size:11px
}

.toast {
  position:absolute;
  z-index:30;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:13px 20px;
  background:#17232e;
  border:1px solid #b5d7e340;
  border-radius:5px;
  box-shadow:0 5px 30px #0007;
  font-size:12px;
  text-align:center;
  max-width:90%;
  min-width:210px
}

.modal {
  background:#111e29;
  color:var(--ink);
  border:1px solid #c9e0ed26;
  border-radius:9px;
  padding:36px;
  max-width:500px;
  width:calc(100% - 36px);
  box-shadow:0 30px 100px #0007
}

.modal::backdrop {
  background:#050b10ae;
  backdrop-filter:blur(10px)
}

.modal h2 {
  font-size:37px;
  font-weight:500;
  letter-spacing:-1.5px;
  line-height:1.07;
  margin:15px 0 20px
}

.modal p {
  font-size:13px;
  line-height:1.65;
  color:#afc2ce
}

.modal>.button {
  width:100%;
  margin-top:12px
}

.modal>.text-button {
  display:block;
  margin:16px auto 0;
  color:#829eaf
}

.modal-close {
  position:absolute;
  right:17px;
  top:11px;
  background:none;
  border:0;
  font-size:26px;
  color:#8fa5b4
}

.help-modal {
  max-width:535px;
  max-height:88svh;
  overflow:auto
}

.help-modal ol {
  padding-left:21px;
  margin:24px 0
}

.help-modal li {
  padding-left:9px;
  margin-bottom:19px;
  color:var(--lime);
  font-size:12px
}

.help-modal li b {
  font-size:14px;
  color:#e0ebf1;
  font-weight:400
}

.help-modal li p {
  font-size:12px;
  margin:7px 0;
  color:#9eb4c3
}

.quality-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:12px;
  color:#b5c8d4
}

.modal .small-print {
  font-size:10px;
  margin-bottom:0
}

.modal textarea {
  width:100%;
  border:1px solid #b5d7e333;
  background:#0b161f;
  color:#dae6ed;
  padding:13px;
  border-radius:4px;
  font:12px/1.6 monospace
}

.fatal {
  position:absolute;
  z-index:40;
  inset:0;
  background:#0b151ff5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:25px;
  text-align:center
}

.fatal h2 {
  font-size:34px;
  font-weight:400;
  letter-spacing:-1px
}

.fatal p {
  max-width:450px;
  color:#a8becc;
  line-height:1.7
}

.export-progress {
  position:absolute;
  z-index:28;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  background:#0e1c27ee;
  border:1px solid #b5d7e333;
  padding:18px;
  display:flex;
  gap:18px;
  align-items:center;
  font-size:12px;
  max-width:95%
}

.export-progress strong {
  font-weight:400
}

.export-progress span {
  color:var(--lime);
  font:12px monospace
}

.export-progress button {
  background:none;
  border:0;
  text-decoration:underline;
  font-size:12px
}

.about {
  max-width:1300px;
  margin:auto;
  padding:70px 5.5% 65px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  border-top:1px solid #accede1a
}

.about h2 {
  font-size:37px;
  font-weight:400;
  letter-spacing:-1.5px;
  line-height:1.12;
  margin:20px 0 0
}

.about p {
  font-size:13px;
  line-height:1.85;
  color:#90a5b2;
  margin:0 0 17px
}

.about .small-print {
  font-size:11px;
  color:#536c7d
}

.about a {
  font-size:11px;
  color:#94acb8;
  text-decoration:none
}

.build-label {
  display:block;
  color:#536c7d;
  font:8px monospace;
  letter-spacing:1px;
  margin-top:20px
}

@media(min-width:1600px) {
  .hero {
    top:23%;
    left:8%
  }
  .hero h1 {
    font-size:92px
  }
  .hero-copy {
    font-size:19px
  }
  .hero-spec {
    right:7%;
    bottom:20%
  }
  .hero-footer {
    left:8%;
    right:7%
  }
  .button {
    min-height:57px;
    padding-inline:29px
  }
  .result {
    left:8%;
    top:24%
  }
}

@media(max-width:1100px) {
  .edition {
    display:none
  }
  .hero {
    left:6%;
    width:52%;
    top:21%
  }
  .hero h1 {
    font-size:66px
  }
  .hero-copy {
    font-size:15px
  }
  .hero-buttons {
    gap:9px
  }
  .button {
    gap:15px;
    padding-inline:18px
  }
  .hero-spec {
    right:5%;
    bottom:19%
  }
  .hero-footer {
    left:6%;
    gap:19px
  }
  .run-meta>span {
    display:none
  }
  .telemetry {
    gap:22px
  }
  .keyboard-controls {
    gap:6px;
    max-width:370px
  }
  .result {
    left:6%;
    top:20%;
    width:400px
  }
  .result h2 {
    font-size:53px
  }
  .result-score>strong {
    font-size:64px
  }
  .result-stats {
    gap:25px
  }
}

@media(pointer:coarse) {
  .stick {
    display:block
  }
  .keyboard-controls {
    display:none
  }
  .telemetry {
    bottom:196px
  }
  .attitude {
    bottom:270px
  }
  .thrust-button {
    bottom:34px;
    width:118px;
    height:110px;
    border-radius:50%
  }
  .boost-gauge {
    bottom:165px
  }
  .controls .stick {
    bottom:33px
  }
}

@media(max-width:700px) {
  .game {
    min-height:620px;
    max-height:1100px
  }
  .topbar {
    padding:21px 6%
  }
  .wordmark {
    font-size:20px
  }
  .wordmark span {
    display:none
  }
  .top-actions {
    gap:15px
  }
  .top-actions #help {
    display:block;
    font-size:0;
    width:21px;
    height:21px;
    padding:0;
    border:1px solid #d4e1e86b;
    border-radius:50%
  }
  .top-actions #help::after {
    content:"?";
    font-size:13px
  }
  .top-actions .icon-button {
    width:23px
  }
  .hero-shade {
    background:linear-gradient(180deg,#07111b77 0%,#09151bba 6%,#09151bce 35%,#09151b22 58%,#09131a22 70%,#081119c9 100%)
  }
  .hero {
    left:7%;
    top:16%;
    width:86%;
    max-width:400px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.6px
  }
  .hero h1 {
    font-size:55px;
    line-height:1.01;
    margin:21px 0 18px
  }
  .hero-copy {
    font-size:13px;
    margin-bottom:22px
  }
  .hero-buttons {
    gap:10px
  }
  .button {
    padding:14px 17px;
    min-height:48px;
    font-size:12px;
    gap:13px
  }
  .hero .free-note {
    font-size:7px;
    margin-top:14px;
    letter-spacing:.7px
  }
  .hero .free-note i {
    margin-inline:3px
  }
  .hero .inspired {
    font-size:8px;
    margin-top:18px
  }
  .hero-spec {
    display:none
  }
  .hero-footer {
    left:7%;
    right:7%;
    height:66px;
    gap:20px
  }
  .hero-footer a {
    display:none
  }
  .hero-footer>div {
    gap:8px
  }
  .hero-footer strong {
    font-size:8px;
    letter-spacing:1.5px
  }
  .hero-footer span {
    font-size:8px
  }
  .hud {
    inset:70px 0 0
  }
  .stage-strip {
    top:13px;
    padding:10px 14px;
    font-size:8px;
    gap:8px;
    left:6%;
    transform:none
  }
  .stage-strip i {
    width:12px
  }
  .run-meta {
    top:14px;
    right:6%
  }
  .run-meta .icon-button {
    width:24px;
    margin:0
  }
  .cue {
    top:85px
  }
  .cue strong {
    font-size:23px;
    margin-top:9px
  }
  .cue p {
    font-size:10px;
    max-width:85%;
    margin:8px auto
  }
  .cue>span {
    font-size:8px
  }
  .telemetry {
    left:7%;
    bottom:190px;
    gap:23px
  }
  .speed>span {
    font-size:43px;
    letter-spacing:-2px
  }
  .speed {
    gap:7px
  }
  .speed small {
    font-size:8px
  }
  .telemetry-small>span {
    font-size:7px
  }
  .telemetry-small strong {
    font-size:16px
  }
  .telemetry-small small {
    font-size:8px
  }
  .attitude {
    bottom:252px;
    left:7%
  }
  .attitude-ring {
    width:43px;
    height:43px
  }
  .attitude-car:before {
    left:10px;
    top:17px;
    width:22px;
    height:6px
  }
  .attitude-car span:before,.attitude-car span:after {
    width:4px;
    height:4px;
    top:22px
  }
  .attitude-car span:before {
    left:12px
  }
  .attitude-car span:after {
    right:12px
  }
  .attitude>span {
    font-size:7px;
    letter-spacing:.8px
  }
  .boost-gauge {
    right:6%;
    bottom:162px;
    gap:7px
  }
  .boost-gauge>span {
    display:none
  }
  .boost-gauge>div {
    width:82px
  }
  .stick {
    display:block;
    width:134px;
    height:112px;
    left:7%;
    bottom:34px
  }
  .stick-up,.stick-down {
    left:62px
  }
  .stick-left,.stick-right {
    top:46px
  }
  .thrust-button {
    right:7%;
    bottom:34px;
    width:104px;
    height:104px;
    border-radius:50%
  }
  .thrust-button span {
    font-size:8px
  }
  .keyboard-controls {
    display:none
  }
  .result {
    left:7%;
    top:19%;
    width:86%;
    max-width:400px
  }
  .result h2 {
    font-size:47px;
    letter-spacing:-2.3px;
    margin-top:15px
  }
  .result>p {
    font-size:12px;
    max-width:95%
  }
  .result-score {
    margin:20px 0
  }
  .result-score>strong {
    font-size:64px
  }
  .result-score>span {
    font-size:13px
  }
  .result-score small {
    font-size:7px
  }
  .result-stats {
    gap:23px;
    padding:15px 0;
    margin-bottom:20px
  }
  .result-stats>div>span {
    font-size:7px
  }
  .result-stats b {
    font-size:14px
  }
  .result-actions .button {
    padding:12px 15px;
    gap:13px;
    font-size:12px
  }
  .share-actions {
    gap:16px;
    row-gap:14px;
    margin-top:22px
  }
  .share-actions button {
    font-size:10px
  }
  .result .result-foot {
    font-size:8px;
    max-width:95%
  }
  .result-glow {
    inset:-55px -30px
  }
  .replay-bar {
    bottom:24px;
    padding:14px 12px;
    gap:10px;
    flex-wrap:wrap
  }
  .replay-bar>span {
    flex-basis:75%;
    font-size:8px
  }
  .replay-bar input {
    flex:1;
    order:3
  }
  .replay-bar select {
    order:4
  }
  .replay-bar button:last-child {
    order:5;
    font-size:10px
  }
  .replay-bar>button:nth-child(2) {
    margin-left:auto
  }
  .about {
    padding:45px 7%;
    grid-template-columns:1fr;
    gap:28px
  }
  .about h2 {
    font-size:31px
  }
  .about p {
    font-size:12px
  }
  .modal {
    padding:28px
  }
  .modal h2 {
    font-size:33px
  }
  .challenge-invitation {
    font-size:10px;
    margin-bottom:14px
  }
}

@media(max-height:730px) and (min-width:701px) {
  .game {
    min-height:560px
  }
  .hero {
    top:20%
  }
  .hero h1 {
    font-size:58px;
    margin-block:17px
  }
  .hero-copy {
    font-size:14px;
    margin-bottom:19px
  }
  .hero .inspired {
    margin-top:15px
  }
  .hero-footer {
    height:66px
  }
  .hero-spec {
    bottom:17%
  }
  .result {
    top:18%
  }
  .result h2 {
    font-size:43px;
    margin-block:13px
  }
  .result-score {
    margin:15px 0
  }
  .result-score>strong {
    font-size:57px
  }
  .result-stats {
    padding:12px 0;
    margin-bottom:16px
  }
  .result-actions .button {
    min-height:43px
  }
  .share-actions {
    margin:16px 0 12px
  }
  .cue {
    top:55px
  }
}

@media(max-height:550px) and (orientation:landscape) {
  .game {
    min-height:100svh
  }
  .topbar {
    padding:14px 4%
  }
  .hero {
    top:21%;
    left:5%;
    width:50%
  }
  .hero h1 {
    font-size:37px;
    line-height:1;
    margin:13px 0
  }
  .hero h1 br:nth-of-type(1) {
    display:none
  }
  .hero h1 span:first-child:after {
    content:" "
  }
  .hero .eyebrow {
    font-size:7px
  }
  .hero-copy {
    font-size:11px;
    margin-bottom:12px
  }
  .hero-buttons .button {
    min-height:38px;
    padding:9px 13px;
    font-size:10px
  }
  .hero .free-note {
    font-size:7px;
    margin-top:10px
  }
  .hero .inspired {
    display:none
  }
  .hero-footer {
    height:40px;
    gap:20px;
    left:5%
  }
  .hero-footer strong {
    font-size:7px
  }
  .hero-spec {
    display:none
  }
  .hud {
    inset:50px 0 0
  }
  .stage-strip {
    top:10px;
    padding:7px 12px;
    font-size:7px
  }
  .run-meta {
    top:7px
  }
  .cue {
    top:47px
  }
  .cue>span {
    font-size:7px
  }
  .cue strong {
    font-size:19px;
    margin-top:6px
  }
  .cue p {
    font-size:9px;
    margin-top:5px
  }
  .controls .stick {
    bottom:20px;
    width:120px;
    height:100px;
    left:4%
  }
  .stick-up,.stick-down {
    left:55px
  }
  .stick-left,.stick-right {
    top:41px
  }
  .telemetry {
    left:4%;
    bottom:147px;
    gap:18px
  }
  .speed>span {
    font-size:35px
  }
  .telemetry-small strong {
    font-size:14px
  }
  .telemetry-small>span {
    font-size:6px
  }
  .attitude {
    display:none
  }
  .thrust-button {
    bottom:19px;
    width:92px;
    height:92px;
    right:4%
  }
  .boost-gauge {
    bottom:128px;
    right:4%
  }
  .keyboard-controls {
    display:none
  }
  .result {
    left:5%;
    top:21%;
    width:55%;
    max-width:490px
  }
  .result h2 {
    font-size:34px;
    margin:11px 0
  }
  .result h2 br {
    display:none
  }
  .result>p {
    font-size:10px;
    margin-bottom:8px
  }
  .result-score {
    position:absolute;
    left:104%;
    top:35px;
    white-space:nowrap;
    margin:0
  }
  .result-score>strong {
    font-size:60px
  }
  .result-score small {
    white-space:normal;
    line-height:1.4;
    max-width:100px
  }
  .result-stats {
    padding:10px 0;
    margin:8px 0 13px;
    gap:29px
  }
  .result-stats>div>span {
    font-size:6px;
    margin-bottom:5px
  }
  .result-stats b {
    font-size:12px
  }
  .result-actions .button {
    min-height:36px;
    font-size:10px;
    padding:8px 14px
  }
  .share-actions {
    margin:13px 0;
    gap:15px
  }
  .share-actions button {
    font-size:9px
  }
  .result .result-foot {
    display:none
  }
  .replay-bar {
    bottom:16px;
    padding:11px;
    flex-wrap:nowrap;
    width:80%
  }
  .replay-bar>span {
    flex-basis:auto
  }
  .replay-bar>button:nth-child(2) {
    margin-left:0
  }
  .replay-bar input {
    order:0
  }
  .replay-bar select {
    order:0
  }
  .replay-bar button:last-child {
    order:0
  }
  .modal {
    max-height:90svh;
    overflow:auto
  }
  .modal h2 {
    font-size:26px
  }
  .modal .eyebrow {
    font-size:8px
  }
  .modal>.button {
    min-height:38px;
    padding:10px
  }
  .hero-shade {
    background:linear-gradient(90deg,#09151bee 0%,#09151b9c 39%,transparent 68%)
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .button {
    transition:none
  }
  .button:hover {
    transform:none
  }
}