:root { color-scheme: dark; font-family: Geist, system-ui, sans-serif; color: #edeae3; background: #0a0b0d; }
* { box-sizing: border-box; }
body { margin: 0; }
.stage { position: fixed; inset: 0; overflow: hidden; }
.poster, #gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#gl { opacity: 0; transition: opacity .6s; touch-action: manipulation; }
#gl.on { opacity: 1; }
.controls { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); border: 1px solid #706556; border-radius: 14px; padding: 5px; background: #17191cf2; box-shadow: 0 4px 24px #0006; white-space: nowrap; }
.controls a, button, .client-link:focus { color: #edeae3; font: 500 14px/1.3 Geist, system-ui, sans-serif; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 15px; min-width: 44px; min-height: 44px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.controls a:hover, button:not(:disabled):hover { background: #ffffff12; }
button:disabled { color: #8e8e8c; cursor: default; }
.divider { width: 1px; height: 22px; background: #706556; margin: 0 3px; }
:focus-visible { outline: 2px solid #f2b25e; outline-offset: 2px; }
#client-name, .client-link:focus { position: absolute; z-index: 2; margin: 0; max-width: calc(100% - 40px); padding: 12px 16px; color: #edeae3; background: #17191cf2; border: 1px solid #a68a64; border-radius: 9px; font-size: 15px; line-height: 1.4; }
#client-name { pointer-events: none; }
.client-link:not(:focus), .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.client-link:focus { left: 50%; bottom: max(94px, calc(env(safe-area-inset-bottom) + 74px)); transform: translateX(-50%); text-align: center; }
.fallback { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 20px; right: 20px; padding: 12px; background: #17191c; }
@media (max-width: 450px) { .controls { bottom: max(14px, env(safe-area-inset-bottom)); } .controls a, button { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { #gl { transition: none; } }

.experiment-scroll,.town-surface{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;outline-offset:-6px}
.town-experiment{position:absolute;inset:0;color:#efe9dd}
.town-stops{position:absolute;left:50%;top:64px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;background:#0b0a09dc;padding:4px 10px;font:500 14px var(--sans)}
.town-stops button{height:44px;width:44px;border:1px solid #756c60;background:#161411;color:#efe9dd;cursor:pointer}
.town-stops button:disabled{opacity:.4}
.town-experiment #clients{position:absolute;left:20px;bottom:140px;display:flex;flex-wrap:wrap;gap:6px;max-width:320px}
.town-experiment .client-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.town-experiment .client-link:focus-visible{position:static;width:auto;height:auto;clip-path:none;background:#14120f;padding:12px;color:#efe9dd}
.town-experiment #client-name{position:absolute;pointer-events:none;background:#14120f;padding:10px}
@media(hover:none){.town-stops{top:110px;max-width:calc(100% - 32px);gap:6px}.town-stops span{max-width:210px;overflow:hidden;text-overflow:ellipsis}}

.standalone-back{position:absolute;left:20px;top:20px;padding:14px;background:#17191c;color:#edeae3;text-decoration:none;z-index:5}