.vt-dialog {
  --vt-paper: #f6f2e8;
  --vt-ink: #353c2f;
  --vt-accent: #7b5849;
  --vt-line: #b9b0a0;
  --vt-hud: #434638e9;
  width: min(1180px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100dvh - 30px);
  box-sizing: border-box;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--vt-line);
  color: var(--vt-ink);
  background: var(--vt-paper);
  box-shadow: 0 14px 72px #1b1c1560;
  color-scheme: light;
}

.vt-dialog::backdrop {
  background: rgba(54, 56, 44, .56);
  backdrop-filter: blur(3px);
}

.vt-dialog button {
  font: inherit;
  cursor: pointer;
}

.vt-dialog button:focus-visible,
.vt-dialog canvas:focus-visible,
.vt-dialog input:focus-visible {
  outline: 2px solid #a25d42;
  outline-offset: -3px;
}

.vt-head,
.vt-detail {
  padding: 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.vt-temple,
.vt-title,
.vt-detail p {
  margin: 0;
}

.vt-temple {
  color: var(--vt-accent);
  font-size: 11px;
  letter-spacing: .13em;
}

.vt-title {
  margin-top: 3px;
  font-family: "Songti SC", "Noto Serif CJK SC", serif;
  font-size: clamp(20px, 3vw, 29px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .06em;
}

.vt-head-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vt-close,
.vt-edit,
.vt-audio {
  min-height: 37px;
  border: 1px solid var(--vt-line);
  background: transparent;
  color: var(--vt-ink);
}

.vt-close {
  flex: 0 0 auto;
  width: 37px;
  padding: 0;
  font-size: 24px !important;
  line-height: 1 !important;
}

.vt-edit,
.vt-audio {
  padding: 3px 10px;
  font-size: 12px !important;
}

.vt-edit {
  background: #ede7da;
}

.vt-close:hover,
.vt-edit:hover,
.vt-audio:hover,
.vt-audio[aria-pressed="true"],
.vt-stops button:hover {
  color: var(--vt-accent);
  background: #ebe1d2;
}

.vt-viewport {
  position: relative;
  height: clamp(215px, calc(100dvh - 250px), 620px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(176deg, #cbd6c7, #d8ded1 34%, #e7e0c9 61%, #a8a88b);
}

.vt-viewport.vt-interior {
  background: #766552;
}

.vt-viewport::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at 51% 44%, transparent 49%, #292c2033);
  pointer-events: none;
}

.vt-viewport canvas {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  cursor: grab;
  touch-action: none;
}

.vt-viewport canvas:active {
  cursor: grabbing;
}

.vt-label,
.vt-reset,
.vt-controls,
.vt-distance {
  position: absolute;
  z-index: 1;
}

.vt-label,
.vt-reset,
.vt-distance {
  padding: 7px 10px;
  border: 1px solid #e7decb6e;
  background: var(--vt-hud);
  color: #faf5eb;
  font-size: 11px !important;
  letter-spacing: .03em;
}

.vt-label,
.vt-reset {
  top: 14px;
}

.vt-label {
  inset-inline-start: 14px;
  max-width: calc(100% - 164px);
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

.vt-label i {
  display: block;
  flex: 0 0 4px;
  height: 4px;
  background: #cb947b;
  border-radius: 50%;
}

.vt-visitor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-reset {
  inset-inline-end: 14px;
}

.vt-controls,
.vt-distance {
  bottom: 14px;
  display: flex;
  align-items: center;
}

.vt-controls {
  right: 14px;
  gap: 4px;
  touch-action: none;
}

[dir="rtl"] .vt-controls {
  right: auto;
  left: 14px;
}

.vt-controls button {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  touch-action: none;
  border: 1px solid #e7decb80;
  background: var(--vt-hud);
  color: #faf5eb;
  font-size: 19px;
  user-select: none;
}

.vt-reset:hover,
.vt-controls button:hover,
.vt-controls button:active {
  background: #353a2b;
}

.vt-distance {
  inset-inline-start: 14px;
  min-height: 38px;
  gap: 9px;
}

.vt-distance input {
  inline-size: 82px;
  margin: 0;
  accent-color: #d5c4a4;
  cursor: pointer;
}

.vt-error {
  position: absolute;
  z-index: 2;
  top: 32%;
  inset-inline: 14px;
  text-align: center;
  padding: 24px;
  color: var(--vt-ink);
  background: var(--vt-paper);
}

.vt-guide {
  font-size: 13px;
  line-height: 1.55;
}

.vt-help {
  margin-top: 3px !important;
  color: #625e50;
  font-size: 11px;
  line-height: 1.45;
}

.vt-activity {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #a88879;
  color: var(--vt-accent);
  background: none;
  font-size: 12px !important;
}

.vt-activity:hover {
  color: var(--vt-paper);
  background: var(--vt-accent);
}

.vt-stops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--vt-line);
}

.vt-stops button {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 5px;
  border: 0;
  border-inline-end: 1px solid var(--vt-line);
  background: none;
  color: var(--vt-ink);
  font-size: 12px;
  letter-spacing: .03em;
}

.vt-stops button:last-child {
  border-inline-end: 0;
}

.vt-stops button[aria-pressed="true"] {
  color: #faf6ed;
  background: #69715e;
}

.vt-stops i {
  opacity: .74;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 650px) {
  .vt-dialog {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 16px);
  }

  .vt-head,
  .vt-detail {
    gap: 8px;
    padding: 10px;
  }

  .vt-detail {
    align-items: flex-start;
  }

  .vt-head-controls { gap: 4px; }

  .vt-edit,
  .vt-audio {
    min-height: 32px;
    max-width: 96px;
    padding-inline: 6px;
    font-size: 11px !important;
  }

  .vt-close {
    width: 32px;
    min-height: 32px;
  }

  .vt-viewport {
    height: clamp(225px, calc(100dvh - 270px), 510px);
  }

  .vt-stops {
    grid-template-columns: repeat(2, 1fr);
  }

  .vt-stops button { min-height: 36px; }
  .vt-stops button:nth-child(2) { border-inline-end: 0; }
  .vt-stops button:nth-child(n+3) { border-top: 1px solid var(--vt-line); }

  .vt-label,
  .vt-reset { top: 8px; }

  .vt-label,
  .vt-distance { inset-inline-start: 8px; }
  .vt-reset { inset-inline-end: 8px; }

  .vt-controls,
  .vt-distance { bottom: 8px; }

  .vt-controls { right: 8px; }
  [dir="rtl"] .vt-controls { left: 8px; }

  .vt-controls button {
    width: 34px;
    height: 36px;
  }

  .vt-distance {
    min-height: 34px;
    gap: 5px;
    padding: 5px;
  }

  .vt-distance input { inline-size: 50px; }
}

@media (max-width: 390px) {
  .vt-distance span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .vt-title { letter-spacing: 0; }
}

@media (max-width: 360px) {
  .vt-detail { flex-direction: column; }
}

.vt-viewport {
  height: clamp(220px,calc(100dvh - 293px),620px);
  background: linear-gradient(178deg,#c6dedb,#f0ead3 58%,#b4c49b);
}
.vt-viewport.vt-interior { background:#a48b68; }
.vt-viewport::after { background:radial-gradient(ellipse at 51% 44%,transparent 55%,#665c3b18); }
.vt-nav-status {
  position:absolute;
  z-index:1;
  top:45px;
  inset-inline-start:14px;
  max-inline-size:58%;
  margin:0;
  padding:5px 8px;
  background:#f8f1dfdc;
  color:#4a5843;
  border:1px solid #d9d6bb;
  font-size:11px;
  pointer-events:none;
}
.vt-nav-status:empty { display:none; }
.vt-joystick { display:none; }
.vt-stops { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vt-stops button:nth-child(4n) { border-inline-end:0; }
.vt-stops button:nth-child(n+5) { border-block-start:1px solid var(--vt-line); }
@media(max-width:760px),(pointer:coarse) {
  .vt-joystick {
    position:absolute;
    z-index:2;
    inset-inline-start:12px;
    bottom:12px;
    display:grid;
    justify-items:center;
    gap:4px;
    color:#fff8e7;
    touch-action:none;
    user-select:none;
  }
  .vt-stick-base {
    position:relative;
    display:block;
    width:95px;
    height:95px;
    border:1px solid #f9f0d9a6;
    border-radius:50%;
    background:radial-gradient(ellipse,#58694ab8,#34422b80);
    box-shadow:inset 0 0 0 10px #f5edcf14;
  }
  .vt-stick-base::before,.vt-stick-base::after {
    content:"";
    position:absolute;
    background:#f5edcf5e;
  }
  .vt-stick-base::before { width:1px;height:75%;top:12.5%;left:50%; }
  .vt-stick-base::after { height:1px;width:75%;left:12.5%;top:50%; }
  .vt-stick-thumb {
    position:absolute;
    z-index:1;
    width:38px;
    height:38px;
    top:calc(50% - 19px);
    left:calc(50% - 19px);
    transform:translate(var(--stick-x,0),var(--stick-y,0));
    border:1px solid #fff5dc;
    border-radius:50%;
    background:radial-gradient(ellipse at 35% 30%,#f1e4c1,#b4ba91);
    box-shadow:0 3px 12px #27331e55;
  }
  .vt-joystick small { font-size:10px;background:#3e4b35c9;padding:3px 6px; }
  .vt-distance { bottom:auto;top:48px;inset-inline-start:auto;inset-inline-end:8px; }
  .vt-nav-status { inset-inline-start:8px;max-inline-size:52%;top:45px; }
  .vt-stops { display:flex;overflow-x:auto; }
  .vt-stops button { flex:0 0 43%;border-block-start:0!important;border-inline-end:1px solid var(--vt-line)!important; }
  .vt-viewport { height:clamp(280px,calc(100dvh - 270px),560px); }
}