.vr{
  --ink:#080d19; --paper:#eeebe4; --mist:#c4cad6; --signal:#e2583e;
  --glass:rgba(8,13,25,.66); --line:rgba(238,235,228,.22);
  position:relative; width:100%; min-height:420px; overflow:hidden; background:var(--ink); color:var(--paper);
  font-family:inherit; -webkit-font-smoothing:antialiased; color-scheme:dark; user-select:none; -webkit-user-select:none;
}
.vr *,.vr *::before,.vr *::after{box-sizing:border-box}
.vr[hidden],.vr [hidden]{display:none!important}

#vr-gl{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;cursor:grab;opacity:0;transition:opacity .26s ease;touch-action:none}
.vr-drag #vr-gl{cursor:grabbing}

#vr-hot{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity .25s ease;touch-action:none}
.vr-hs{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;touch-action:none;will-change:transform;display:none}
.vr-hs:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:12px}
.vr-card .vr-hs-in{display:block;width:clamp(112px,14vw,190px);border-radius:12px;overflow:hidden;background:var(--glass);
  border:1px solid rgba(238,235,228,.55);box-shadow:0 14px 34px rgba(0,0,0,.5);animation:vr-float 4.6s ease-in-out infinite;transition:border-color .2s,box-shadow .2s,scale .2s}
.vr-card:nth-child(2n) .vr-hs-in{animation-delay:-1.3s}.vr-card:nth-child(3n) .vr-hs-in{animation-delay:-2.6s}
.vr-card:hover .vr-hs-in,.vr-card:focus-visible .vr-hs-in{border-color:var(--signal);box-shadow:0 18px 40px rgba(226,88,62,.35);scale:1.07}
.vr-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#1a2236;pointer-events:none}
.vr-card b{display:block;padding:7px 10px 8px;font-weight:500;font-size:13px;line-height:1.25;text-align:center}
.vr-dot .vr-hs-in{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:vr-float 4.2s ease-in-out infinite}
.vr-dot i{display:block;width:18px;height:18px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(226,88,62,.6);animation:vr-pulse 2s infinite}
.vr-dot b{font-weight:500;font-size:13px;white-space:nowrap}
.vr-dot:hover .vr-hs-in{border-color:var(--signal)}
@keyframes vr-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@keyframes vr-pulse{0%{box-shadow:0 0 0 0 rgba(226,88,62,.55)}70%{box-shadow:0 0 0 12px rgba(226,88,62,0)}100%{box-shadow:0 0 0 0 rgba(226,88,62,0)}}

.vr-top{position:absolute;left:16px;right:70px;top:14px;display:flex;align-items:center;gap:10px;z-index:5;pointer-events:none;transition:opacity .25s}
.vr-top>*{pointer-events:auto}
.vr-btn{font:500 14px/1 inherit;font-family:inherit;color:var(--paper);background:var(--glass);border:1px solid rgba(238,235,228,.4);padding:11px 16px;border-radius:999px;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.vr-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.vr-btn:focus-visible,.vr-chip:focus-visible,.vr-apt:focus-visible,.vr-crumb-b:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.vr-solid{background:var(--signal);border-color:var(--signal);color:#fff}
.vr-solid:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.vr-ico{width:42px;height:42px;padding:0;font-size:18px;display:grid;place-items:center}
#vr-crumb{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
#vr-crumb::-webkit-scrollbar{display:none}
.vr-crumb-b{background:none;border:0;padding:0;color:var(--mist);font:inherit;cursor:pointer}
.vr-crumb-b:hover{color:var(--paper);text-decoration:underline}
.vr-sep{color:var(--mist);opacity:.7}.vr-cur{font-weight:500}

.vr-panel{position:absolute;left:16px;top:66px;width:min(340px,calc(100% - 32px));max-height:calc(100% - 150px);overflow:auto;z-index:4;padding:16px;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:opacity .25s;user-select:text;-webkit-user-select:text;scrollbar-width:thin}
.vr-title{margin:0 0 10px;font-size:20px;font-weight:500;line-height:1.2}
.vr-sub{margin:16px 0 8px;font-size:13px;color:var(--mist)}
.vr-desc{margin:0 0 14px;font-size:14px;line-height:1.6;color:#d7dce6}
.vr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vr-chip{font:500 13px/1 inherit;font-family:inherit;color:var(--paper);background:rgba(238,235,228,.1);border:1px solid var(--line);padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.vr-chip:hover{background:rgba(238,235,228,.24)}
.vr-chip.on{background:var(--signal);border-color:var(--signal);color:#fff}
.vr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.vr-apt{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:10px;border:1px solid var(--line);background:rgba(238,235,228,.07);color:inherit;font:inherit;cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.vr-apt:hover{border-color:var(--signal);background:rgba(238,235,228,.14)}
.vr-apt-img{display:grid;place-items:center;aspect-ratio:1;border-radius:6px;background:#eeebe4;overflow:hidden;color:#445;font-size:13px}
.vr-apt-img img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.vr-apt-n{font-size:13px;font-weight:500;padding-bottom:2px}
.vr-plan{display:block;width:100%;max-height:34vh;object-fit:contain;border-radius:8px;background:#eeebe4;pointer-events:none}

.vr-rooms{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);max-width:calc(100% - 150px);display:flex;align-items:center;gap:12px;z-index:4;padding:10px 14px;
  background:var(--glass);border:1px solid var(--line);border-radius:999px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-x:auto;transition:opacity .25s;scrollbar-width:none}
.vr-rooms::-webkit-scrollbar{display:none}
.vr-rooms .vr-chips{flex-wrap:nowrap;margin:0}
.vr-rooms-t{font-size:12px;color:var(--mist);white-space:nowrap}

.vr-tools{position:absolute;right:16px;top:14px;display:flex;gap:8px;z-index:5}
.vr-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);max-width:calc(100% - 180px);padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);
  font-size:13px;color:var(--mist);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s;z-index:3}
.vr-hint.on{opacity:1}
.vr-s-apt .vr-hint,.vr-s-room .vr-hint{bottom:84px}
.vr-toast{position:absolute;left:50%;top:70px;transform:translate(-50%,-8px);padding:10px 18px;border-radius:10px;background:rgba(226,88,62,.95);color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9}
.vr-toast.on{opacity:1;transform:translate(-50%,0)}

.vr-busy #vr-hot,.vr-busy .vr-panel,.vr-busy .vr-rooms{opacity:0;pointer-events:none}
.vr-loader{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(8,13,25,.45);font-size:14px;color:var(--mist);pointer-events:none}
.vr-loading .vr-loader{display:flex}
.vr-loader i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(238,235,228,.2);border-top-color:var(--signal);animation:vr-spin .9s linear infinite}
@keyframes vr-spin{to{transform:rotate(360deg)}}
.vr-err{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--ink);color:var(--mist);line-height:1.6}
.vr-failed .vr-err{display:flex}
.vr-err-ns{padding:24px;text-align:center}

@media (max-width:760px){
  .vr-top{left:10px;right:62px;top:10px}
  .vr-tools{right:10px;top:10px}
  .vr-panel{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:46%}
  .vr-s-apt .vr-panel,.vr-s-room .vr-panel{display:none}
  .vr-rooms{bottom:8px;max-width:calc(100% - 16px)}
  .vr-hint{bottom:auto;top:62px;max-width:calc(100% - 24px)}
  .vr-s-apt .vr-hint,.vr-s-room .vr-hint{bottom:auto;top:62px}
  .vr-s-city .vr-panel{max-height:34%}
  .vr-toast{top:110px}
  .vr-card .vr-hs-in{width:104px}
}
@media (prefers-reduced-motion:reduce){
  .vr-card .vr-hs-in,.vr-dot .vr-hs-in,.vr-dot i{animation:none}
  #vr-gl,.vr-panel,.vr-rooms,#vr-hot{transition:none}
}