:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}
html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;background:#141b12}
.experience{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;background:#141b12;touch-action:none;user-select:none;-webkit-user-select:none}
.viewport{position:absolute;inset:0;touch-action:none;cursor:grab}
.viewport:active{cursor:grabbing}
.viewport>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}

.vhud{position:absolute;inset:0;pointer-events:none;z-index:2;color:#f7ead4}
.vbrand{position:absolute;left:20px;top:18px;text-shadow:0 2px 14px rgba(10,20,10,.7)}
.vbrand b{display:block;font:600 15px/1.1 ui-sans-serif,system-ui;letter-spacing:.2em}
.vbrand small{display:block;margin-top:4px;font:500 7.5px/1 ui-sans-serif,system-ui;letter-spacing:.34em;opacity:.72}
.vstam{width:72px;height:3px;margin-top:9px;border-radius:2px;background:rgba(247,234,212,.18);overflow:hidden}
.vstam i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#e8b96a,#ffd9a0);transform-origin:left;transform:scaleX(1)}
.vdist{position:absolute;left:20px;top:70px;font:600 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;opacity:.85;text-shadow:0 2px 10px rgba(10,20,10,.7)}
.vhint{position:absolute;left:20px;bottom:20px;font:500 9.5px/1 ui-sans-serif,system-ui;letter-spacing:.1em;opacity:.62;text-shadow:0 2px 8px rgba(10,20,10,.8);transition:opacity .8s}
.vhint.off{opacity:0}
.vmap{position:absolute;right:16px;bottom:16px;width:96px;height:96px;border-radius:12px;border:1px solid rgba(247,234,212,.16);box-shadow:0 8px 30px rgba(8,14,8,.35)}
.vjoy{position:absolute;left:0;top:0;width:104px;height:104px;border-radius:50%;border:1px solid rgba(247,234,212,.22);background:rgba(15,25,17,.14);backdrop-filter:blur(2px);opacity:0;transition:opacity .18s}
.vjoy.on{opacity:1}
.vjoy span{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:1px solid rgba(247,234,212,.4);background:rgba(230,225,200,.14);box-shadow:inset 0 0 14px rgba(255,255,255,.08)}

@media(min-width:700px){
  .vbrand{left:30px;top:26px}
  .vdist{left:30px;top:72px}
  .vmap{width:120px;height:120px;right:24px;bottom:24px}
  .vhint{left:30px;bottom:28px}
}