:root {
  --lime:#daff59;
  --ink:#101922;
  --muted:#97a9b4;
  --orange:#ff8054
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#101b28;
  color:#f1f7f8;
  font-family:Arial,Helvetica,sans-serif;
  overflow:hidden
}
canvas {
  display:block;
  width:100vw;
  height:100vh;
  touch-action:none
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #fff;
  outline-offset:4px
}
#menu {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  padding:5vw;
  background:linear-gradient(90deg,rgba(8,18,27,.97),rgba(8,18,27,.85) 38%,rgba(8,18,27,.05) 85%);
  z-index:4
}
.panel {
  width:min(485px,95vw)
}
.eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:3px;
  color:var(--lime);
  margin-bottom:18px
}
.wordmark {
  font-size:clamp(48px,8vw,93px);
  font-weight:950;
  letter-spacing:-6px;
  line-height:.88;
  font-style:italic;
  margin:0 0 16px
}
.wordmark span {
  display:block;
  color:var(--lime)
}
.tagline {
  font-size:15px;
  color:#b4c5ce;
  max-width:350px;
  line-height:1.6;
  margin:23px 0
}
.rule {
  height:1px;
  background:#ffffff24;
  margin:24px 0
}
.label {
  font-size:11px;
  letter-spacing:2px;
  font-weight:bold;
  color:#9aadb9;
  margin-bottom:12px
}
.swatches {
  display:flex;
  gap:12px;
  margin:12px 0 23px
}
.swatch {
  width:32px;
  height:32px;
  border-radius:50%;
  border:3px solid transparent;
  box-shadow:0 0 0 1px #ffffff22
}
.swatch.selected {
  box-shadow:0 0 0 2px #fff
}
.options {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:13px;
  color:#c5d1d8
}
.options label {
  display:flex;
  gap:7px;
  align-items:center
}
input[type=checkbox] {
  accent-color:var(--lime);
  width:17px;
  height:17px
}
select {
  background:#1f303c;
  color:#e9f4fa;
  border:1px solid #ffffff30;
  padding:7px;
  border-radius:5px
}
.primary {
  border:0;
  color:#182516;
  background:var(--lime);
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  padding:19px 26px;
  border-radius:5px;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px
}
.primary:hover {
  background:#eaff9b
}
.micro {
  font-size:11px;
  line-height:1.7;
  color:#8199a8;
  margin-top:14px
}
.help {
  color:#b6c6cf;
  font-size:12px;
  line-height:1.9
}
.key {
  color:#f7fbfc;
  font-weight:700
}
.badge {
  position:fixed;
  right:32px;
  top:30px;
  text-align:right;
  z-index:1;
  pointer-events:none;
  font-size:11px;
  letter-spacing:2px;
  color:#b1c7ce
}
.badge b {
  display:block;
  color:#fff;
  font-size:15px;
  margin:7px 0
}
#hud {
  position:fixed;
  inset:0;
  pointer-events:none;
  display:none
}
.topbar {
  text-shadow:0 1px 4px #00131d;
  position:absolute;
  top:26px;
  left:28px;
  right:28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start
}
.brand {
  font-style:italic;
  letter-spacing:-1px;
  font-weight:900;
  font-size:25px
}
.brand small {
  font-style:normal;
  display:block;
  color:#a9c0ca;
  font-size:9px;
  letter-spacing:3px;
  margin-top:5px
}
.session {
  text-align:right;
  font-size:11px;
  letter-spacing:1px;
  color:#d4e1e7
}
.session strong {
  font-size:22px;
  color:var(--lime);
  display:block;
  margin-bottom:5px
}
.driverhud {
  padding:12px;
  background:linear-gradient(90deg,#081c2bd9,#081c2b99);
  border-radius:12px;
  text-shadow:0 1px 3px #00131d;
  position:absolute;
  bottom:28px;
  left:28px;
  width:285px
}
.driverhud.p2 {
  left:calc(50% + 28px)
}
.driverlabel {
  font-size:10px;
  letter-spacing:2px;
  color:#b4c8d3
}
.speed {
  font-size:70px;
  font-weight:900;
  line-height:1;
  letter-spacing:-4px;
  font-style:italic
}
.speed small {
  font-size:11px;
  letter-spacing:1px;
  font-style:normal;
  color:#a8c0cc;
  margin-left:8px
}
.meters {
  display:flex;
  gap:12px;
  margin-top:15px
}
.meter {
  flex:1
}
.meter label {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  color:#c1d2d9;
  margin-bottom:7px
}
.track {
  background:#ffffff26;
  height:4px;
  border-radius:2px;
  overflow:hidden
}
.fill {
  height:100%;
  background:var(--lime);
  width:100%;
  transition:width .08s
}
.wingstate {
  font-size:11px;
  color:#ddebf1;
  margin-top:11px;
  letter-spacing:1px
}
.wingstate.on {
  color:var(--lime)
}
.hint {
  position:absolute;
  bottom:25px;
  right:27px;
  font-size:10px;
  text-align:right;
  line-height:1.9;
  color:#bbced7
}
.notice {
  position:absolute;
  top:20%;
  left:0;
  right:0;
  text-align:center;
  font-weight:900;
  font-size:26px;
  color:var(--lime);
  text-shadow:0 3px 15px #000;
  opacity:0;
  transition:opacity .15s
}
.splitline {
  position:absolute;
  left:50%;
  height:100%;
  width:2px;
  background:#13232d;
  display:none
}
.pausebutton {
  position:fixed;
  top:85px;
  right:26px;
  z-index:3;
  background:#112431aa;
  border:1px solid #ffffff30;
  color:white;
  border-radius:6px;
  padding:8px 13px;
  display:none
}
#touch {
  position:fixed;
  inset:0;
  pointer-events:none;
  display:none;
  z-index:2
}
.pad {
  position:absolute;
  bottom:170px;
  left:23px;
  display:flex;
  gap:8px
}
.pedals {
  position:absolute;
  bottom:155px;
  right:20px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  width:190px
}
.touchbtn {
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  color:#f0f8ff;
  background:#142733b5;
  border:1px solid #bfd9ea60;
  border-radius:12px;
  min-width:60px;
  height:58px;
  font-size:13px;
  font-weight:bold
}
.touchbtn.accent {
  background:#dfff6070;
  color:white
}
#map {
  position:absolute;
  right:26px;
  bottom:110px;
  width:170px;
  height:170px;
  border:1px solid #b5cfdd44;
  border-radius:12px;
  background:#0b1b27bb
}
body.splitscreen #map {
  width:125px;
  height:125px;
  right:18px;
  bottom:25px
}
body.splitscreen .hint {
  display:none
}
@media(max-width:650px) {
  #map {
    width:110px;
    height:110px;
    right:18px;
    bottom:300px
  }
}
#stickzone {
  position:absolute;
  left:0;
  top:22%;
  bottom:0;
  width:48%;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none
}
#stickbase {
  position:fixed;
  width:124px;
  height:124px;
  border:2px solid #dfff6088;
  border-radius:50%;
  background:#172d3d70;
  pointer-events:none;
  display:none;
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 25px #b0eaf018
}
#stickknob {
  position:absolute;
  left:35px;
  top:35px;
  width:50px;
  height:50px;
  background:#daff59aa;
  border:2px solid #efffb9;
  border-radius:50%;
  box-shadow:0 3px 20px #001b2c55
}
.stickhint {
  position:absolute;
  left:24px;
  bottom:148px;
  font-size:9px;
  letter-spacing:1px;
  color:#d2e6ef99;
  pointer-events:none
}
body.touchmode #map {
  bottom:250px;
  width:130px;
  height:130px
}
body.touchmode .hint {
  display:none
}
body.touchmode .stickhint {
  bottom:260px
}
body.touchmode .pedals {
  bottom:28px
}
@media(max-height:550px) {
  body.touchmode #map {
    top:95px;
    bottom:auto;
    width:95px;
    height:95px
  }
  .pedals {
    bottom:28px
  }
  .stickhint {
    top:6px;
    bottom:auto!important
  }
}
.error {
  position:fixed;
  inset:20%;
  z-index:20;
  background:#152330;
  border:1px solid #ff8054;
  padding:30px;
  line-height:1.6;
  display:none
}
.hidden {
  display:none!important
}
@media(max-width:650px) {
  #menu {
    padding:24px;
    background:#0c1826e8;
    overflow:auto;
    align-items:flex-start
  }
  .panel {
    margin:auto
  }
  .wordmark {
    font-size:60px;
    letter-spacing:-4px
  }
  .tagline {
    margin:15px 0;
    font-size:13px
  }
  .rule {
    margin:15px 0
  }
  .eyebrow {
    margin:0 0 13px
  }
  .help {
    font-size:11px
  }
  .badge {
    display:none
  }
  .topbar {
    top:17px;
    left:18px;
    right:18px
  }
  .brand {
    font-size:20px
  }
  .driverhud {
    bottom:22px;
    left:20px;
    width:215px
  }
  .speed {
    font-size:53px
  }
  .hint {
    display:none
  }
  .session {
    font-size:9px
  }
  .session strong {
    font-size:18px
  }
  .pausebutton {
    top:70px;
    right:18px
  }
  .micro {
    font-size:10px
  }
  .primary {
    margin-top:17px;
    padding:15px 20px
  }
}
@media(max-height:600px) {
  #menu {
    overflow:auto;
    padding:24px
  }
  .wordmark {
    font-size:53px
  }
  .tagline {
    margin:12px 0
  }
  .rule {
    margin:12px 0
  }
  .eyebrow {
    margin-bottom:12px
  }
  .swatches {
    margin-bottom:12px
  }
  .help {
    line-height:1.6
  }
  .primary {
    margin-top:15px
  }
  .panel {
    margin:auto 0
  }
  .badge {
    display:none
  }
}