@font-face{font-family:Barlow;src:url('fonts/barlow-condensed-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
:root{--ink:#102b43;--cyan:#06d6ef;--violet:#9474f3;--line:#fff9;--muted:#506b80;--glass:#f3fbffca}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#dbe6f2;color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{display:grid;place-items:center;background:radial-gradient(ellipse at 30% 20%,#e6fbff 0,transparent 48%),radial-gradient(ellipse at 80% 80%,#dcd5ff 0,transparent 45%),#dce7f1}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #144999;outline-offset:4px}[hidden]{display:none!important}#game{position:relative;width:min(100vw,56.25dvh);height:100dvh;max-width:650px;overflow:hidden;background:#abc2dc;isolation:isolate;touch-action:none;user-select:none}#world{width:100%;height:100%;display:block;position:absolute;inset:0}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#e9f5ffdf 0,#e9f5ffb3 15%,#e9f5ff00 40%,transparent 62%,#e8f2faba 88%,#f3faffed 100%);transition:background .4s}#game[data-state=ride] .vignette,#game[data-state=panther] .vignette{background:linear-gradient(#d7eafac7,transparent 34%,transparent 74%,#edf6fbc7)}header{position:absolute;top:max(23px,env(safe-area-inset-top));left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;z-index:5}.wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.brand-plate{display:flex;align-items:center;justify-content:center;background:#15334b;box-shadow:0 4px 15px #1947681a;border:1px solid #ffffff40;border-radius:3px;padding:9px 11px}.brand-plate img{width:114px;height:24px;object-fit:contain;display:block}.wordmark small{color:#244861;font-size:8px;font-weight:700;letter-spacing:2.1px}.tools{display:flex;gap:6px;align-items:center}.tools button{background:#f4fbff8c;backdrop-filter:blur(16px);border:1px solid #ffffffbb;border-radius:50px;font-size:9px;font-weight:700;letter-spacing:.8px;padding:11px 10px;min-height:36px;color:#2b5168}#pause{font-size:17px;padding:6px 12px}.screen{position:absolute;inset:0;z-index:3;pointer-events:none}.screen button{pointer-events:auto}.intro-copy{position:absolute;top:17%;left:7%;right:5%}.eyebrow{color:#365575;font-size:10px;letter-spacing:3.3px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:24px;height:2px;background:#36cce3}h1,h2{font-family:Barlow,'Arial Narrow',Arial,sans-serif;font-weight:800;font-style:italic;margin:0;letter-spacing:-1.7px;line-height:.86;font-size:clamp(49px,8.8dvh,88px)}em{font-style:italic;color:#138fab;text-shadow:0 1px 0 #ffffff80}.intro-copy p{font-size:13px;line-height:1.5;color:#47647b;margin:16px 0 0}.intro-bottom,.end-bottom{position:absolute;left:7%;right:7%;bottom:max(22px,env(safe-area-inset-bottom))}.how{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.7px;margin-bottom:20px;color:#658398}.how b{color:#183e56;font-size:10px;font-weight:800;margin-left:5px}.primary{width:100%;height:58px;background:linear-gradient(110deg,#b3f8ff,#68dff3 60%,#b5c6ff);color:#14344e;border:1px solid #d4fcff;box-shadow:0 7px 22px #5abdd13a,0 0 0 4px #ffffff35;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:14px;font-weight:800;letter-spacing:1.3px;border-radius:5px;position:relative;transition:transform .15s,box-shadow .15s}.primary span{font-size:24px;font-weight:400}.primary:active{transform:scale(.98);box-shadow:0 0 30px #4ce2f99c}.micro{text-align:center;font-size:10px;color:#4b6b80;line-height:1.4;letter-spacing:.25px;margin:14px 0 0}#hud{position:absolute;inset:0;z-index:3;pointer-events:none}.stage-row{position:absolute;left:7%;right:7%;top:13%;display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:1.7px;color:#173b56}.progress{position:absolute;top:16.8%;height:3px;left:7%;right:7%;background:#fff9;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#00cce9,#9e83ff);box-shadow:0 0 9px #0dcce9}.stats{position:absolute;top:20%;left:7%;right:7%;display:flex;justify-content:space-between;align-items:flex-start}.speed{background:#edf9ffb8;border:1px solid #ffffffc4;border-radius:5px;padding:10px 14px;backdrop-filter:blur(14px);box-shadow:0 5px 24px #284c6210}.speed strong{font-family:Barlow,Arial,sans-serif;font-size:42px;line-height:1;font-weight:800}.speed span{display:block;font-size:8px;letter-spacing:2.5px;color:#57768d;margin-top:3px}.energy{background:#edf9ffb8;border:1px solid #ffffffc4;border-radius:5px;padding:12px 14px;backdrop-filter:blur(14px)}.energy>span{font-size:9px;font-weight:800;letter-spacing:2px;color:#42667d}#markers{display:flex;gap:8px;margin-top:10px}#markers i{width:16px;height:16px;border:1px solid #95abbc;transform:rotate(45deg);border-radius:3px;background:#ffffff52;transition:background .2s,box-shadow .2s}#markers i.on{border-color:#e2ffff;background:#39dacd;box-shadow:0 0 13px #00e9cd8c}#message{position:absolute;top:36%;left:5%;width:90%;text-align:center;color:#113f57;font-family:Barlow,Arial,sans-serif;font-weight:800;font-size:25px;font-style:italic;letter-spacing:.5px;text-shadow:0 2px 16px #ffffff,0 1px 2px #fff;transition:opacity .3s}#instructions{position:absolute;bottom:17%;left:5%;right:5%;text-align:center;font-size:11px;font-weight:800;letter-spacing:1.4px;color:#143c56;text-shadow:0 1px 12px #fff}#steering{position:absolute;bottom:6%;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between}#steering span{font-size:9px;font-weight:700;letter-spacing:1.7px;color:#466a83}#steering button{pointer-events:auto;width:58px;height:51px;border:1px solid #fff;background:#ecfaffbe;backdrop-filter:blur(14px);color:#1b5b79;font-size:37px;line-height:30px;border-radius:5px;box-shadow:0 3px 15px #4a778320}#steering button:active{background:#bcf8ff}#boost{pointer-events:auto;position:absolute;bottom:6%;left:12%;width:76%;height:62px;border:1px solid #e1fdff;background:#f1fbffd9;color:#12536c;backdrop-filter:blur(16px);font-size:13px;font-weight:800;letter-spacing:1.5px;overflow:hidden;border-radius:5px;box-shadow:0 0 0 5px #e8fbff44,0 6px 28px #36e0fa40}#boost span{position:relative;z-index:1}#boost i{position:absolute;inset:0;background:linear-gradient(90deg,#7aeaf4,#b2b5ff);transform-origin:left;transform:scaleX(0)}#cinematic{position:absolute;inset:0;z-index:7;background:#9db4d0}#cinematic img,#cinematic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#last-frame{opacity:0;transition:opacity 1.6s ease}#cinematic video{display:none}.cinematic-shade{position:absolute;inset:0;background:linear-gradient(#0d27422e,transparent 25%,transparent 69%,#0d244573)}#cinematic p{position:absolute;bottom:6%;width:100%;text-align:center;color:white;font-family:Barlow,Arial,sans-serif;font-style:italic;font-size:30px;letter-spacing:2px;font-weight:800;text-shadow:0 3px 20px #062440}#skip{position:absolute;right:7%;top:5%;background:#f2f9ffbb;border:1px solid #fff9;border-radius:30px;padding:10px 15px;font-size:10px;font-weight:700;letter-spacing:2px}.end-top{position:absolute;top:16%;left:7%;right:7%}.end-top h2{font-size:clamp(55px,9dvh,90px)}#result{font-size:10px;font-weight:700;letter-spacing:1px;color:#365e78;margin-top:14px}.product-final{position:absolute;top:35%;left:-3%;width:106%;height:35%;object-fit:contain;filter:drop-shadow(0 18px 16px #17394f30)}#outro{background:linear-gradient(160deg,#eefaff66,#ebefffaa 70%,#f1f9ffee)}.features{display:flex;gap:30px;margin-bottom:19px}.features>span{font-family:Barlow,Arial,sans-serif;font-size:25px;font-style:italic;font-weight:800;color:#255675}.features small{display:block;font-family:Arial,sans-serif;font-size:10px;font-style:normal;font-weight:500;color:#59778c;margin-top:4px}.text-button{width:100%;background:transparent;border:0;color:#295876;font-size:10px;font-weight:800;letter-spacing:1.7px;padding:15px 0 0}.modal{position:absolute;inset:0;z-index:10;background:#eaf5f9ee;backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:center;padding:9%;gap:25px}.modal h2{font-size:44px}.modal p{font-size:16px;line-height:1.5;color:#4f6e84}#flash{position:absolute;inset:0;background:#ffa06138;z-index:6;pointer-events:none;opacity:0;transition:opacity .15s}@media(min-aspect-ratio:9/14){#game{border-left:1px solid #ffffffa1;border-right:1px solid #ffffffa1;box-shadow:0 25px 100px #597db348}}@media(max-height:660px){header{top:14px}.brand-plate{padding:6px 9px}.brand-plate img{width:96px;height:20px}.wordmark small{font-size:7px}.intro-copy{top:17%}.intro-copy p{font-size:11px;margin-top:10px}.primary{height:47px;font-size:12px}.features{margin-bottom:12px}.features>span{font-size:19px}.micro{font-size:9px;margin-top:10px}.how{margin-bottom:14px}.how b,.how{font-size:9px}.end-top{top:15%}.text-button{padding-top:12px}.product-final{top:33%;height:35%}.speed strong{font-size:33px}.energy{padding:9px 11px}.speed{padding:8px 12px}}

.product-intro{position:absolute;top:39%;left:-6%;width:112%;height:36%;object-fit:contain;filter:drop-shadow(0 16px 15px #17394f30)}@media(max-height:660px){.product-intro{top:39%;height:34%}}

/* Real MP4 playing: show only the film. No still frames, caption, shade, skip chrome or header. */
#game.video-mode #cinematic{background:transparent}
#game.video-mode #cinematic img,
#game.video-mode .cinematic-shade,
#game.video-mode #cinematic p,
#game.video-mode #skip,
#game.video-mode header,
#game.video-mode .vignette{display:none!important}