@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Nunito+Sans:wght@400;600;700;800;900&display=swap');
:root{color-scheme:dark;--ink:#0d1645;--yellow:#ffda3b;--cyan:#64eeff}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#fff;font-family:'Nunito Sans',sans-serif}header,main,footer{width:min(1400px,92%);margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:24px 0}.brand img{width:170px;display:block}nav{display:flex;gap:30px}a{color:inherit;text-decoration:none}a:hover{color:var(--yellow)}.heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:34px 0}.eyebrow,.badge{font-size:12px;letter-spacing:2px;font-weight:900;color:var(--cyan)}h1,h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;margin:0;line-height:.94}h1{font-size:clamp(52px,6vw,84px)}em{color:var(--yellow);font-style:normal}.heading>p{max-width:480px;line-height:1.8}.heading span,.small{font-size:12px;color:#b5bfdc}.player{position:relative;aspect-ratio:16/9;border:2px solid #374877;border-radius:18px;overflow:hidden;background:linear-gradient(90deg,#08112add,#08112a55),url('/assets/angel-city-map.png') center/cover}.launch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:#08112a65}.launch h2{font-size:clamp(32px,5vw,68px);margin:22px 0 8px}.badge{color:var(--yellow)}button{cursor:pointer;font:900 15px 'Nunito Sans',sans-serif;border:0;border-radius:9px;padding:14px 24px;background:var(--yellow);color:var(--ink)}button:disabled{opacity:.55;cursor:default}button:hover:enabled{background:#fff}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}#start{min-width:200px;margin:12px}#status{max-width:560px;line-height:1.5}progress{width:min(400px,80%);height:12px;accent-color:var(--yellow)}canvas{width:100%;height:100%;display:block;outline:0;background:#0d1645}[hidden]{display:none!important}.player-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:11px;letter-spacing:1px;color:#b5bfdc}.player-bar button{font-size:12px;background:#253565;color:white}.controls{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;padding:65px 0}.controls h2{font-size:44px}.controls p{max-width:350px;line-height:1.8;color:#b5bfdc}dl{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0}dl>div{border-bottom:1px solid #34406b;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}dt{font-size:13px;font-weight:900}dd{margin:0;color:#b5bfdc;font-size:13px}kbd{display:inline-block;border:1px solid #667398;border-radius:4px;padding:3px 6px;font:inherit;margin:1px}footer{display:flex;justify-content:space-between;border-top:1px solid #34406b;padding:26px 0;font-size:12px;color:#b5bfdc}.player:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;background:#000;display:flex;align-items:center;justify-content:center}.player:fullscreen canvas{flex:none;width:min(100vw,177.777778vh);height:min(100vh,56.25vw)}@media(max-width:700px){header{padding:16px 0}.brand img{width:120px}nav{font-size:13px;gap:18px}.heading{display:block;margin:20px 0}.heading>p{font-size:14px}.controls{grid-template-columns:1fr;gap:20px;padding:35px 0}.player{aspect-ratio:4/5}.launch .small{max-width:240px;font-size:10px}.launch h2{font-size:38px}dl{gap:10px}.controls h2{font-size:36px}}

.player:has(canvas:not([hidden])){aspect-ratio:16/9}