.vsheet {
  color-scheme: dark;
  --bg: #0A0B11;
  --panel: #13151E;
  --panel-2: #14161F;
  --sunken: #0E1017;
  --ink: #E9EBF4;
  --ink-2: #A2A8BF;
  --ink-3: #8A90A8;
  --line: #232637;
  --line-2: #363C58;
  --accent: #8F94FF;
  --accent-press: #7A80F0;
  --on-accent: #0A0B11;
  --wash: #1B1D33;
  --ok: #4FC98C;
  --mark-graphite: #B7BDD2;

  width: min(500px, calc(100% - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0; overflow: hidden;
  background: var(--panel); color: var(--ink);
  border: 1px solid #2A2E45; border-radius: var(--r-panel, 24px);
}
.vsheet::backdrop { background: rgba(6, 7, 12, 0.62); }

.vsheet + .vsheet::backdrop, .promo-sheet ~ .vsheet::backdrop { background: rgba(6, 7, 12, 0.5); }

html.vsheet-open {
  overflow: hidden; scrollbar-gutter: stable;
  background-color: color-mix(in srgb, var(--bg) 38%, #06070C);
}

.vsheet-in {
  position: relative;
  padding: 26px 28px 22px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #363C58 transparent;
}
.vsheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.vsheet-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.vsheet-mark { flex: none; }
.vsheet-x {
  flex: none; width: 44px; height: 44px; margin: -10px -12px -10px 0;
  display: grid; place-items: center;
  border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.vsheet-x:hover { color: var(--ink); background: var(--wash); }
.vsheet-h { margin-top: 14px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem); line-height: 1.1; letter-spacing: -0.025em; }
.vsheet-h:focus { outline: none; }

.vsheet-sign {
  position: relative; margin-top: 22px; padding-top: 16px;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.vsheet-route { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.vsheet-route::before {
  content: ''; position: absolute; left: 0; top: 0; width: 44%; height: 1px;
  background: var(--accent); transform-origin: left center;
}
.vsheet-route::after {
  content: ''; position: absolute; left: 44%; top: -2px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--accent);
}

@media (max-width: 720px) {
  .vsheet-sign { font-size: 0.75rem; }
}
@media (max-width: 639px) {
  .vsheet {
    width: var(--vsheet-vw, 100%); margin: auto 0 0;
    border-width: 1px 0 0; border-radius: 24px 24px 0 0;
  }
  .vsheet-in {
    padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .vsheet[open] { animation: vsheet-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .vsheet[open]::backdrop { animation: vsheet-fade 0.2s ease; }
  .vsheet[open] .vsheet-route::before { animation: vsheet-draw 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) 0.06s both; }
  .vsheet[open] .vsheet-route::after { animation: vsheet-fade 0.2s ease 0.48s both; }
  .vsheet.is-closing { animation: vsheet-unpop 0.15s ease-in forwards; }
  .vsheet.is-closing::backdrop { animation: vsheet-fade-out 0.15s ease-in forwards; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .vsheet[open] { animation-name: vsheet-up; animation-duration: 0.26s; }
  .vsheet.is-closing { animation-name: vsheet-down; animation-duration: 0.18s; }
}
@keyframes vsheet-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes vsheet-unpop { to { opacity: 0; transform: translateY(6px) scale(0.985); } }
@keyframes vsheet-up { from { transform: translateY(100%); } }
@keyframes vsheet-down { to { transform: translateY(100%); } }
@keyframes vsheet-fade { from { opacity: 0; } }
@keyframes vsheet-fade-out { to { opacity: 0; } }
@keyframes vsheet-draw { from { transform: scaleX(0); } }