.drive-bar{--s:1.3;--dome:calc(12.2rem * var(--s));width:calc(var(--dome) * 2);align-items:center;gap:calc(1rem * var(--s));padding:calc(1.6rem * var(--s)) 0 calc(1.4rem * var(--s));-webkit-backdrop-filter:blur(1rem);border:1px solid var(--fg-10);border-radius:var(--dome) var(--dome) calc(1.8rem * var(--s)) calc(1.8rem * var(--s));pointer-events:auto;background:#070b0c8c;flex-direction:column;display:flex}.drive-bar__mode{gap:calc(.2rem * var(--s));padding:calc(.3rem * var(--s));border:1px solid var(--fg-20);border-radius:999px;grid-template-columns:1fr 1fr;display:grid}.drive-bar__mode button{justify-content:center;align-items:center;gap:calc(.7rem * var(--s));padding:calc(.7rem * var(--s)) calc(1.4rem * var(--s));font-size:calc(1.3rem * var(--s));white-space:nowrap;color:var(--fg-60);border-radius:999px;line-height:1.2;transition:background .3s,color .3s;display:inline-flex}.drive-bar__mode button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.drive-bar__dot{width:calc(.6rem * var(--s));height:calc(.6rem * var(--s));opacity:.35;background:currentColor;border-radius:50%}.drive-bar__mode button[aria-pressed=true] .drive-bar__dot{background:var(--accent);opacity:1}.drive-bar__keys{grid-template-columns:repeat(3, calc(2.4rem * var(--s)));grid-template-rows:repeat(2, calc(2.4rem * var(--s)));gap:calc(.3rem * var(--s));grid-template-areas:".w.""a s d";display:grid}.drive-bar__key{border:1px solid var(--fg-20);border-radius:calc(.5rem * var(--s));font-size:calc(1rem * var(--s));color:var(--fg-60);place-items:center;transition:background .12s,color .12s,border-color .12s;display:grid}.drive-bar__key--w{grid-area:w}.drive-bar__key--a{grid-area:a}.drive-bar__key--s{grid-area:s}.drive-bar__key--d{grid-area:d}.drive-bar__key[data-on]{background:var(--accent);border-color:var(--accent);color:var(--bg)}.drive-bar__views{gap:calc(1.6rem * var(--s));font-size:calc(1rem * var(--s));letter-spacing:.1em;text-transform:uppercase;justify-content:center;display:flex}.drive-bar__views button{color:var(--fg-40);border-bottom:1px solid #0000;padding-bottom:.2rem;transition:color .3s,border-color .3s}.drive-bar__views button[aria-pressed=true]{color:var(--fg);border-color:var(--accent)}.drive-bar__views button:hover{color:var(--fg-80)}.drive-pad{grid-template-columns:repeat(4,1fr);gap:.6rem;width:100%;display:none}.drive-pad button{border:1px solid var(--fg-20);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:.8rem;padding:1.2rem 0}.drive-pad button:active{background:var(--fg);color:var(--bg)}@media (pointer:coarse){.drive-bar{--s:1;border-radius:50% 50% 1.8rem 1.8rem/3.6rem 3.6rem 1.8rem 1.8rem;width:100%;padding:1.4rem 1.4rem 1.2rem}.drive-pad{display:grid}.drive-bar__keys{display:none}}