.vx-wrap{container-type:inline-size;width:100%;aspect-ratio:800/540}
.vx{
  font-size:calc(100cqw * 10 / 800);
  font-family:var(--sans);
  width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;
  text-align:left;
  background:#1e1e1e;color:#cccccc;border:0.1em solid #ffffff14;border-radius:1.2em;
  box-shadow:0 0.25em 0.7em #0000001f, 0 1.8em 3.6em -1em #0000004d,
             0 5.5em 10em -2.5em #00000094;
}
/* phone: hold a readable working size and let it swipe, as the old mock did */
@media (max-width:767px){
  .vx-wrap{aspect-ratio:auto;overflow-x:auto;overscroll-behavior-x:contain}
  .vx{width:640px;height:432px;font-size:8px}
}
/* Smooth float, eased, as the original mock had. (A whole-pixel stepped
   version kept the text razor-sharp but read as choppy at this slow speed;
   an 11px drift over 3.25s can't be both perfectly smooth and pixel-locked,
   and smooth is the better trade.) */
.mm-float .vx{animation:vx-bob 6.5s ease-in-out infinite}
@keyframes vx-bob{
  0%,100% {transform:translateY(0)}
  50%     {transform:translateY(-11px)}
}
@media (prefers-reduced-motion:reduce){.mm-float .vx{animation:none}}

.vx svg{width:1.15em;height:1.15em;flex-shrink:0}
.vx-dot{display:inline-block;width:0.62em;height:0.62em;border-radius:50%;background:#22c55e;flex-shrink:0}

/* title bar */
.vx-title{
  height:3.4em;flex-shrink:0;display:flex;align-items:center;gap:0.9em;padding-left:1.1em;
  background:#181818;border-bottom:0.1em solid #2b2b2b;
}
.vx-mark{width:1.8em;height:1.8em;border-radius:0.45em}
.vx-title-t{font-size:1.25em;color:#d9d9d9}
.vx-inst{
  margin-left:auto;display:flex;align-items:center;gap:0.55em;
  background:#232323;border:0.1em solid #343434;border-radius:0.6em;padding:0.35em 0.75em;
  font-size:1.1em;color:#d9d9d9;
}
.vx-win{display:flex;align-self:stretch}
.vx-win span{width:4.4em;display:grid;place-items:center;color:#a3a3a3}
.vx-win svg{width:1.35em;height:1.35em}

.vx-body{flex:1;min-height:0;display:flex}

/* sidebar */
.vx-side{
  width:20.5em;flex-shrink:0;display:flex;flex-direction:column;
  background:#181818;border-right:0.1em solid #2b2b2b;padding:0.9em 0.9em 0;
}
.vx-side-top{display:flex;align-items:center;gap:0.35em;margin-bottom:1em;color:#9d9d9d}
.vx-ico{width:2.8em;height:2.8em;border-radius:0.6em;display:grid;place-items:center}
.vx-ico svg{width:1.6em;height:1.6em}
.vx-ico.is-on{background:#2a2a2a;color:#ececec}
.vx-collapse{margin-left:auto}
.vx-search{
  display:flex;align-items:center;gap:0.65em;font-size:1.2em;color:#8a8a8a;
  background:#1f1f1f;border:0.1em solid #2f2f2f;border-radius:0.6em;padding:0.6em 0.75em;
}
.vx-sec{
  display:flex;align-items:center;gap:0.45em;font-size:1.2em;font-weight:600;color:#d9d9d9;
  padding:1em 0.15em 0.45em;
}
.vx-act{margin-left:auto;display:flex;gap:0.6em;color:#9d9d9d}
.vx-file{
  display:flex;align-items:center;gap:0.6em;font-size:1.2em;color:#bdbdbd;
  padding:0.42em 0.6em 0.42em 1.5em;border-radius:0.5em;
}
.vx-file.is-on{background:#2a2a2a;color:#f2f2f2}

/* main column */
.vx-main{flex:1;min-width:0;display:flex;flex-direction:column}
.vx-tabs{
  height:3.8em;flex-shrink:0;display:flex;align-items:stretch;
  background:#181818;border-bottom:0.1em solid #2b2b2b;
}
.vx-tab{
  display:flex;align-items:center;gap:0.55em;padding:0 1.2em;font-size:1.2em;color:#9d9d9d;
  border-right:0.1em solid #2b2b2b;
}
.vx-tab.is-on{background:#1e1e1e;color:#ececec;box-shadow:inset 0 0.14em 0 #8b5cf6}
.vx-tab-x{color:#8a8a8a;margin-left:0.3em}
.vx-tab-add{display:grid;place-items:center;padding:0 1em;color:#9d9d9d}
.vx-tools{margin-left:auto;display:flex;align-items:center;gap:0.7em;padding-right:1em}
.vx-btn{
  display:flex;align-items:center;gap:0.45em;font-size:1.15em;color:#ececec;
  background:#232323;border:0.1em solid #383838;border-radius:0.55em;padding:0.4em 0.85em;
}
.vx-crumb{
  height:3em;flex-shrink:0;display:flex;align-items:center;gap:0.45em;padding:0 1.4em;
  font-size:1.15em;color:#9d9d9d;border-bottom:0.1em solid #262626;
}
.vx-crumb b{font-weight:500;color:#d9d9d9}
.vx-crumb-r{margin-left:auto;display:flex;align-items:center;gap:0.8em}
.vx-inst-sm{
  display:flex;align-items:center;gap:0.4em;color:#d9d9d9;
  background:#232323;border:0.1em solid #343434;border-radius:0.5em;padding:0.2em 0.65em;
}

/* editor */
.vx-editor{
  flex:1;min-height:0;display:flex;overflow:hidden;padding-top:0.6em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.1em;line-height:1.7;
}
.vx-gutter{width:4em;flex-shrink:0;text-align:right;padding-right:1.4em;color:#5c5c5c}
.vx-code{flex:1;min-width:0;white-space:pre;color:#d6d6d6}
.vx-k{color:#c792ea}
.vx-s{color:#f4a77b}
.vx-f{color:#dcdcaa}
.vx-c{color:#7f8896}
.vx-n{color:#f78c6c}

/* terminals */
.vx-term{
  height:13.6em;flex-shrink:0;display:flex;flex-direction:column;
  background:#1a1a1a;border-top:0.1em solid #2b2b2b;
}
.vx-term-head{height:3.4em;flex-shrink:0;display:flex;align-items:center;gap:0.55em;padding:0 1.2em;font-size:1.15em}
.vx-term-t{color:#d9d9d9;font-weight:500;margin-right:0.5em}
.vx-ttab{
  display:flex;align-items:center;gap:0.45em;padding:0.28em 0.75em;border-radius:0.5em;
  color:#9d9d9d;border:0.1em solid transparent;
}
.vx-ttab.is-on{background:#262626;border-color:#343434;color:#ececec}
.vx-filter{
  margin-left:auto;display:flex;align-items:center;gap:0.45em;width:10em;color:#8a8a8a;
  background:#1f1f1f;border:0.1em solid #2f2f2f;border-radius:0.5em;padding:0.28em 0.7em;
}
.vx-term-icons{display:flex;gap:0.75em;color:#9d9d9d;margin-left:0.4em}
.vx-term-body{
  flex:1;min-height:0;overflow:hidden;padding:0.3em 1.4em;white-space:pre;color:#d6d6d6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05em;line-height:1.75;
}
.vx-ts{color:#6b6b6b}
.vx-tv{color:#a78bfa}
.vx-te{color:#60a5fa}

/* status bar */
.vx-status{
  height:2.4em;flex-shrink:0;display:flex;align-items:center;padding:0 1.2em;
  background:#181818;border-top:0.1em solid #2b2b2b;font-size:1.05em;color:#9d9d9d;
}
.vx-status-l{display:flex;align-items:center;gap:0.45em}
.vx-status-r{margin-left:auto;display:flex;align-items:center;gap:1.4em}
.vx-conn{display:flex;align-items:center;gap:0.45em;color:#d9d9d9}


/* Fit the original Volt window into the new hero. */
.media.has-volt-demo{aspect-ratio:auto;background:transparent;overflow:visible;box-shadow:none;border:0;max-width:920px}
.media.has-volt-demo .vx-mark{width:1.8em;height:1.8em;object-fit:contain}
.vx{position:relative}
.vx button{font-family:inherit;cursor:pointer}
.vx-run{line-height:1.2;transition:background .2s,border-color .2s,box-shadow .2s;outline-offset:3px}
.vx-run:hover,.vx-run.is-executing{background:#372649;border-color:#9c6eea;box-shadow:0 0 0 .15em #8b5cf622}
.vx-run:focus-visible{outline:2px solid #b598ef}
.vx-caret{display:inline-block;width:.55em;height:1.25em;margin-left:.1em;vertical-align:-.25em;background:#a277ed;animation:vx-caret-blink .9s step-end infinite}
@keyframes vx-caret-blink{50%{opacity:0}}
.vx-demo-pointer{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(3em,4em);transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .2s}
.vx-demo-pointer svg{width:2.1em;height:2.1em;filter:drop-shadow(0 .15em .15em #0007)}
.vx-demo-pointer.is-visible{opacity:1;transform:translate(0,0)}
.vx-demo-pointer.is-clicking{transform:scale(.85)}
.vx-log-row{animation:vx-log-in .2s ease-out}
@keyframes vx-log-in{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
.vx-demo-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font:400 11px/1.5 var(--sans);color:#9a91a2}
.vx-demo-caption>span{display:flex;align-items:center;gap:6px}.vx-demo-caption i{width:5px;height:5px;border-radius:50%;background:#8b5cf6}
.vx-demo-caption button{padding:4px 0;background:none;border:0;color:#8b729f;font:500 11px/1.5 var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vx-demo-caption button:hover{color:#62447e}.vx-demo-caption button:focus-visible{outline:2px solid #8b5cf6;outline-offset:4px}
.vx-paused *{animation-play-state:paused!important}
@media(max-width:767px){.media.has-volt-demo{border-radius:12px}.vx-wrap{border-radius:12px}.vx-demo-caption{padding:0 2px;font-size:10px}.vx-demo-caption-note{display:none}.vx-demo-caption button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.vx-caret,.vx-log-row{animation:none}.vx-demo-pointer{display:none}}

#media.has-volt-demo{scroll-margin-top:80px}