:root {
      color-scheme: light;
      --ink: #103e58;
      --soft: #47798b;
      --blue: #078acb;
      --orange: #ff6c2e;
      --orange-dark: #da4c19;
      --snow: #f7fdff;
      --panel: rgba(248, 253, 255, .93);
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #8ed4ef;
      color: var(--ink);
      font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
      user-select: none;
    }

    body {
      position: fixed;
      inset: 0;
      overscroll-behavior: none;
      touch-action: none;
    }

    button { font: inherit; }

    #game {
      position: relative;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      isolation: isolate;
      overflow: hidden;
    }

    canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    .hud {
      position: absolute;
      z-index: 3;
      inset: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) auto max(14px, env(safe-area-inset-left));
      display: none;
      align-items: flex-start;
      justify-content: space-between;
      pointer-events: none;
    }

    .hud.is-visible { display: flex; }
    /* Created by Astronaut */
    .hud-chip {
      min-width: 86px;
      padding: 8px 13px 7px;
      border: 2px solid rgba(16, 62, 88, .1);
      border-radius: 999px;
      background: rgba(248, 253, 255, .86);
      box-shadow: 0 6px 20px rgba(22, 85, 115, .12);
      text-align: center;
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }

    .hud-chip strong {
      font-size: clamp(1.15rem, 4vw, 1.45rem);
      line-height: 1;
      letter-spacing: -.04em;
    }

    .hud-chip span {
      margin-left: 3px;
      color: var(--soft);
      font-size: .65rem;
      font-weight: 1000;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .speed-wrap {
      display: grid;
      width: min(33vw, 180px);
      gap: 5px;
      padding: 9px 13px 10px;
      border: 2px solid rgba(16, 62, 88, .1);
      border-radius: 16px;
      background: rgba(248, 253, 255, .86);
      box-shadow: 0 6px 20px rgba(22, 85, 115, .12);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }

    .speed-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--soft);
      font-size: .62rem;
      font-weight: 1000;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .speed-track {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(16, 62, 88, .1);
    }

    .speed-fill {
      width: 30%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #16a9df, #ffb424, #ff642a);
      transform-origin: left center;
    }

    .callout {
      position: absolute;
      z-index: 3;
      top: 20%;
      left: 50%;
      opacity: 0;
      color: #fff;
      font-size: clamp(1.15rem, 5vw, 2.1rem);
      font-weight: 1000;
      letter-spacing: .04em;
      text-align: center;
      text-shadow: 0 3px 0 rgba(10, 69, 98, .25), 0 8px 20px rgba(10, 69, 98, .2);
      text-transform: uppercase;
      transform: translate(-50%, 12px) scale(.94);
      pointer-events: none;
    }

    .callout.show { animation: callout 1s ease-out both; }

    .screen {
      position: absolute;
      z-index: 4;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      background: linear-gradient(180deg, rgba(118, 200, 237, .1), rgba(239, 250, 254, .32));
    }

    .screen.is-active { display: flex; }

    .panel {
      width: min(92vw, 460px);
      padding: clamp(24px, 6vw, 40px) clamp(20px, 6vw, 38px) clamp(21px, 5vw, 32px);
      border: 2px solid rgba(255,255,255,.96);
      border-radius: 30px;
      background: var(--panel);
      box-shadow: 0 20px 60px rgba(28, 92, 122, .22), inset 0 1px 0 #fff;
      text-align: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      animation: panel-in .32s cubic-bezier(.2,.8,.2,1) both;
    }

    .eyebrow {
      margin: 0 0 8px;
      color: var(--orange);
      font-size: .76rem;
      font-weight: 1000;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(2.5rem, 11vw, 4.8rem);
      font-weight: 1000;
      line-height: .84;
      letter-spacing: -.072em;
      text-shadow: 0 3px 0 #fff;
      text-transform: uppercase;
    }

    h1 span {
      display: block;
      margin-top: 11px;
      color: var(--blue);
      font-size: .48em;
      letter-spacing: .075em;
    }

    .tagline {
      max-width: 330px;
      margin: 18px auto;
      color: var(--soft);
      font-size: clamp(.9rem, 3.4vw, 1.02rem);
      font-weight: 700;
      line-height: 1.4;
    }

    .how-to {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin: 0 0 18px;
    }

    .how-step {
      min-width: 0;
      padding: 10px 6px 9px;
      border-radius: 13px;
      background: rgba(16, 62, 88, .06);
      color: var(--soft);
      font-size: .66rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .how-step b {
      display: grid;
      width: 25px;
      height: 25px;
      margin: 0 auto 6px;
      place-items: center;
      border-radius: 50%;
      background: #fff;
      color: var(--blue);
      font-size: .8rem;
      box-shadow: 0 2px 0 rgba(16, 62, 88, .1);
    }

    .actions { display: grid; gap: 10px; }

    .button {
      min-height: 55px;
      padding: 13px 24px;
      border: 0;
      border-radius: 16px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 1000;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }

    .button:focus-visible {
      outline: 4px solid rgba(255,181,45,.6);
      outline-offset: 3px;
    }

    .button:active { transform: translateY(3px) scale(.99); }

    .button-primary {
      color: #fff;
      background: var(--orange);
      box-shadow: 0 6px 0 var(--orange-dark), 0 12px 24px rgba(218,76,25,.22);
    }

    .button-primary:hover { background: #ff7b40; }
    .button-primary:active { box-shadow: 0 2px 0 var(--orange-dark), 0 5px 12px rgba(218,76,25,.18); }

    .button-secondary {
      min-height: 47px;
      color: var(--soft);
      background: rgba(16,62,88,.07);
    }

    .result-label {
      margin: 18px 0 2px;
      color: var(--soft);
      font-size: .72rem;
      font-weight: 1000;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .result {
      margin: 0;
      color: var(--blue);
      font-size: clamp(3rem, 15vw, 5.1rem);
      font-weight: 1000;
      line-height: 1;
      letter-spacing: -.07em;
    }

    .result-details {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin: 7px 0 20px;
      color: var(--soft);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .result-details strong { color: var(--ink); }

    @keyframes panel-in {
      from { opacity: 0; transform: translateY(14px) scale(.97); }
      to { opacity: 1; transform: none; }
    }

    @keyframes callout {
      0% { opacity: 0; transform: translate(-50%, 12px) scale(.92); }
      18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      72% { opacity: 1; transform: translate(-50%, -7px) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -18px) scale(.96); }
    }

    @media (max-height: 610px) {
      .panel { width: min(90vw, 560px); padding: 17px 28px; }
      h1 { font-size: clamp(2.25rem, 12vh, 3.5rem); }
      .tagline { margin: 9px auto 11px; font-size: .84rem; }
      .how-to { margin-bottom: 11px; }
      .actions { grid-template-columns: 1.35fr 1fr; }
      .button { min-height: 46px; padding: 9px 17px; }
      .result-label { margin-top: 10px; }
      .result { font-size: 2.8rem; }
      .result-details { margin-bottom: 12px; }
    }

    @media (max-width: 350px) {
      .panel { padding-inline: 16px; }
      .how-step { font-size: .6rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .panel, .callout.show { animation: none; }
      .button { transition: none; }
    }
  
/* Gameplay controls use the original game's palette, type, panels and buttons. */
.hidden{display:none!important}canvas{touch-action:none}canvas:focus{outline:none}button:disabled{opacity:.65;cursor:default}.panel{max-height:100%;overflow:auto;overscroll-behavior:contain;animation:none}.screen{overscroll-behavior:contain}.speed-fill{width:100%}.best{margin:17px 0 0;color:var(--soft);font-size:.62rem;line-height:1.6;font-weight:900;letter-spacing:.06em}.best b{color:var(--ink)}.tools{position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(76px + env(safe-area-inset-top,0px));display:flex;gap:7px;z-index:6}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:2px solid #ffffffc9;border-radius:50%;background:#f8fdffeb;color:var(--ink);font-size:23px;font-weight:900;box-shadow:0 6px 20px #1655731f;cursor:pointer;touch-action:manipulation}.icon-button.muted{opacity:.6}.icon-button.muted:after{content:"";position:absolute;width:23px;height:2px;background:var(--ink);transform:rotate(-45deg)}button:focus-visible{outline:4px solid #ffb52db3;outline-offset:3px}.run-info{position:absolute;top:calc(76px + env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left));z-index:3;display:flex;gap:6px;pointer-events:none}.mini-chip{display:flex;align-items:center;justify-content:center;min-height:40px;padding:9px 12px;border:2px solid #ffffff9c;border-radius:999px;background:#f8fdffdd;color:var(--soft);box-shadow:0 6px 20px #16557314;font-size:.67rem;font-weight:900}.mini-chip b{font-size:1rem;color:var(--ink)}#lives{color:var(--blue);font-size:16px;letter-spacing:2px}.controls{position:absolute;z-index:3;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(17px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none}.ride-tip{max-width:340px;padding:12px 15px;border:2px solid #ffffffad;border-radius:16px;background:#f8fdffdd;box-shadow:0 6px 20px #16557314;color:var(--soft);font-weight:900}.ride-tip strong{display:block;color:var(--ink);font-size:.76rem;letter-spacing:.07em}.ride-tip>span{display:block;margin-top:4px;font-size:.66rem;line-height:1.35;min-height:18px}.ride-tip small{display:block;font-size:.5rem;letter-spacing:.06em;margin-top:6px}.charge-track{height:5px;border-radius:8px;margin-top:9px;overflow:hidden;background:#103e581a}.charge-track i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--blue);border-radius:inherit}.charge-track i.launch-ready{background:var(--orange)}.ride-button{pointer-events:auto;touch-action:none;min-width:156px;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 20px}.ride-button b{font-size:.95rem}.ride-button span{display:block;margin-top:6px;font-size:.56rem;letter-spacing:.05em}.ride-button.held{transform:translateY(3px) scale(.99);box-shadow:0 2px 0 var(--orange-dark);background:#ff7b40}.callout{max-width:92vw;width:max-content;transition:opacity .15s;transform:translateX(-50%)}.callout.show{animation:none;opacity:1;transform:translateX(-50%)}.end-detail{margin:8px 0 12px;font-size:.7rem;font-weight:900;line-height:1.5;color:var(--soft)}#record{margin:0 0 18px}.load-error{position:absolute;z-index:10;bottom:10px;left:10px;right:10px;border-radius:10px;padding:12px;background:#fff;font-size:12px}.load-error button{border:0;background:none;text-decoration:underline}.button{touch-action:manipulation}.ride-button{touch-action:none}
@media(max-width:600px){.controls{gap:10px;bottom:max(16px,env(safe-area-inset-bottom))}.ride-tip{padding:10px 11px;flex:1;min-width:0;max-width:none}.ride-tip strong{font-size:.6rem;letter-spacing:.02em}.ride-tip>span{font-size:.56rem;min-height:30px}.ride-tip small{font-size:.43rem;letter-spacing:0;min-height:13px}.ride-button{min-width:128px;min-height:77px;padding:14px 12px}.ride-button b{font-size:.77rem}.ride-button span{font-size:.47rem}.callout{font-size:1.2rem;top:24%}.speed-wrap{width:130px}.hud-chip{min-width:82px}.end-detail{font-size:.64rem}}
@media(max-height:650px){.best{margin-top:12px}.panel .how-to{margin-bottom:13px}.result-details{margin-bottom:12px}.end-detail{margin:7px 0 10px}#record{margin-bottom:12px}}
@media(max-height:500px) and (orientation:landscape){.screen{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.panel{padding:17px 27px}.tagline{max-width:430px;font-size:.76rem}.how-step{padding:7px 4px;font-size:.6rem}.how-step b{width:21px;height:21px;margin-bottom:4px}.best{font-size:.55rem;margin-top:10px}.controls{bottom:max(12px,env(safe-area-inset-bottom))}.ride-tip{max-width:310px;padding:8px 11px}.ride-tip strong{font-size:.64rem}.ride-tip>span{font-size:.56rem;min-height:0;margin-top:3px}.ride-tip small{font-size:.43rem;margin-top:4px}.charge-track{margin-top:6px;height:4px}.ride-button{min-height:58px;min-width:135px;padding:10px 14px}.ride-button b{font-size:.78rem}.ride-button span{font-size:.49rem;margin-top:4px}.callout{top:24%;font-size:1.1rem}.run-info,.tools{top:calc(69px + env(safe-area-inset-top,0px))}.mini-chip{min-height:36px;padding:7px 11px}.icon-button{width:40px;height:40px}.end-detail{font-size:.63rem}}
@media(max-width:350px){.ride-button{min-width:113px;min-height:76px;padding:11px 8px}.ride-button b{font-size:.7rem}.ride-button span{font-size:.43rem}.ride-tip{padding:9px}.ride-tip strong{font-size:.54rem}.ride-tip>span{font-size:.5rem}.ride-tip small{font-size:.41rem}.run-info{gap:5px}.mini-chip{padding:8px 9px}.speed-wrap{width:120px}.callout{font-size:1.08rem}}
.controls{justify-content:flex-end}.ride-tip{position:fixed;top:calc(132px + env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left));width:290px;max-width:calc(100% - 28px);bottom:auto}.ride-tip>span{min-height:0}.ride-tip small{min-height:0}
body{touch-action:auto}.panel{touch-action:pan-y}
@media(max-width:600px) and (orientation:portrait){.ride-tip{width:calc(100% - 28px);padding:10px 13px}.ride-tip strong{font-size:.7rem}.ride-tip>span{font-size:.62rem}.ride-tip small{font-size:.48rem}.callout{top:calc(235px + env(safe-area-inset-top,0px));font-size:1.08rem}}
@media(max-height:500px) and (orientation:landscape){.ride-tip{top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:300px;max-width:40vw}.callout{top:29%;font-size:1rem}}