/* vs · The side by side. Left: a generic browser, one page at a time. Right: Floating Forms licensed into the same kind of
   website, one tab, the host's own page underneath and every window open over it.
   Each stage holds a virtual browser (.vs-br) laid out at a fixed design width (640, or 420 in narrow mode)
   and scaled to fit by vs.js, so the cursor script works in one coordinate space at every screen size.
   Switches use the shared motion tokens in site.css: outgoing content eases out over --t-out (--ease-io) while incoming
   content eases in over --t-in (--ease-soft; a host on the right uses --ease-io), overlapping, and changed text
   crossfades over --t-text (.vs-x). */
.vs-sec{position:relative;z-index:2;padding-block:40px clamp(120px,14vw,200px)}
.vs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
/* the vs. between the two panels: centered on the gutter, level with the middle of the two browser windows (vs.js sets
   --vs-mid from the left stage); on phones it is its own row where the stacked panels meet */
.vs-grid{position:relative}
.vs-mid{position:absolute;left:50%;top:var(--vs-mid,50%);z-index:5;transform:translate(-50%,-50%);pointer-events:none}
.vs-mid span{display:grid;place-items:center;width:78px;height:78px;padding-bottom:5px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#0B2B66,#050B1C 72%);border:1px solid rgba(25,165,255,.55);box-shadow:0 0 0 7px rgba(2,5,15,.92),0 22px 50px rgba(0,0,0,.6),0 0 46px rgba(25,165,255,.28);font-family:var(--display);font-weight:300;font-size:32px;line-height:1;letter-spacing:-.02em;color:#fff}
.vs-panel{position:relative;min-width:0;border-radius:20px;border:1px solid var(--line);overflow:hidden;padding:26px 26px 22px;display:flex;flex-direction:column;gap:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.vs-us{background:radial-gradient(120% 70% at 50% 0%,rgba(25,165,255,.09),rgba(25,165,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border-color:rgba(25,165,255,.18)}
/* panel headline: who, then what, in one display line */
.vs-label{margin:0;padding-right:48px;font-family:var(--display);font-weight:300;font-size:clamp(28px,2.9vw,42px);letter-spacing:-.03em;line-height:1.08;color:#fff}
.vs-label b{display:block;font-weight:300;color:var(--dim)}
.vs-us .vs-label b{color:var(--blue)}
.vs-them .vs-label span{color:var(--dimmer)}
/* the line under it: the job on the left, the prompt for the industry buttons on the right */
.vs-ask{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.vs-ask span{color:var(--blue)}
.vs-job{align-self:start}
.vs-job b{font-weight:300;color:#fff}
.vs-job span{color:var(--dim)}
.vs-pick{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.vs-chips{display:flex;align-items:center;gap:6px;padding:4px;max-width:100%;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.vs-chips .vs-hand{width:20px;height:20px;flex:none;margin:0 2px 0 10px;color:var(--blue)}

@supports (grid-template-rows:subgrid){
  .vs-panel{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:20px}
}
/* stage + virtual browser */
.vs-stage{position:relative;aspect-ratio:64/46;border-radius:12px;overflow:hidden;background:#141518;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.vs-n .vs-stage{aspect-ratio:42/50}
.vs-br{position:absolute;left:0;top:0;width:640px;height:460px;transform-origin:0 0;display:flex;flex-direction:column;font-family:var(--body);color:#e8eaed;overflow:hidden;-webkit-font-smoothing:antialiased}
.vs-strip{position:relative;flex:none;height:36px;display:flex;align-items:flex-end;background:#141518;padding-right:8px}
.vs-dots{flex:none;display:flex;gap:6px;align-self:center;padding:0 14px 0 14px}
.vs-dots i{width:9px;height:9px;border-radius:50%;background:#3a3d44}
.vs-tabs{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end}
.vs-t{position:relative;container-type:inline-size;flex:0 1 168px;min-width:0;height:28px;display:flex;align-items:center;gap:6px;padding:0 8px 0 9px;border-radius:8px 8px 0 0;font-size:11px;color:#9aa0a6;overflow:hidden;
  transition:flex-basis var(--t-in) var(--ease-soft),opacity var(--t-in) var(--ease-soft),padding var(--t-in) var(--ease-soft),background-color var(--t-text) ease-in-out,color var(--t-text) ease-in-out}
.vs-t::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:#3a3d44;transition:opacity var(--t-text) ease-in-out}
.vs-t.is-on{background:#2b2d31;color:#e8eaed}
.vs-t.is-on::after,.vs-t:has(+.is-on)::after{opacity:0}
/* a new tab grows open and fades in; on the loop's rewind every other tab eases shut */
/* (.vs-tabs > raises them over the narrow layout's padding, so a new tab really starts at zero width) */
.vs-tabs > .vs-t.is-new{flex-basis:0;opacity:0;padding-left:0;padding-right:0}
.vs-tabs > .vs-t.is-closing{flex-basis:0;opacity:0;padding-left:0;padding-right:0;transition:flex-basis var(--t-out) var(--ease-io),opacity var(--t-out) var(--ease-io),padding var(--t-out) var(--ease-io)}
.vs-t.is-hov:not(.is-on){background:#202125}
.vs-t span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-fav{position:relative;flex:none;width:13px;height:13px;border-radius:3px;background-color:#e9e2d6;color:#1f2328;font:700 8px/13px var(--body);text-align:center;font-style:normal;transition:background-color var(--t-text) ease-in-out,color var(--t-text) ease-in-out}
/* loading: the favicon crossfades into a spinner and back */
.vs-fav::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.6px solid #4a4d55;border-top-color:var(--blue);opacity:0;transition:opacity var(--t-text) ease-in-out;animation:vs-spin .7s linear infinite}
.vs-t.is-load .vs-fav{background-color:transparent;color:transparent}
.vs-t.is-load .vs-fav::after{opacity:1}
@keyframes vs-spin{to{transform:rotate(360deg)}}
.vs-tx{flex:none;width:8px;height:8px;position:relative;opacity:.7;transition:opacity var(--t-text) ease-in-out,width var(--t-text) ease-in-out,margin var(--t-text) ease-in-out}
.vs-tx::before,.vs-tx::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.3px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.vs-tx::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* a narrow tab eases its close X away (width and the flex gap before it), instead of dropping it */
@container (max-width:64px){.vs-tx{opacity:0;width:0;margin-left:-6px}.vs-n .vs-tx{margin-left:-5px}}
@container (max-width:30px){.vs-t > span{opacity:0}}
.vs-t > span{transition:opacity var(--t-text) ease-in-out}
[data-vs-tabs]::after{content:"";flex:none;width:26px;height:28px;align-self:flex-end;opacity:.75;background:linear-gradient(#9aa0a6 0 0) 50% 50%/10px 1.4px no-repeat,linear-gradient(#9aa0a6 0 0) 50% 50%/1.4px 10px no-repeat}
.vs-one{flex:none;align-self:center;margin-left:auto;padding-right:6px;font:600 9px var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.vs-t.is-one{flex-basis:190px}
.vs-tool{position:relative;flex:none;height:34px;display:flex;align-items:center;gap:4px;padding:0 10px;background:#2b2d31;border-bottom:1px solid #1d1e21}
.vs-ic{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;flex:none;transition:background-color var(--t-text) ease-in-out}
.vs-ic svg{width:14px;height:14px;fill:none;stroke:#c4c7cc;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vs-ic.is-off svg{stroke:#5f6368}
.vs-ic.is-hov{background:#3c3e43}
.vs-rl-a,.vs-rl-b{transition:opacity var(--t-text) ease-in-out}
.vs-rl-b,.vs-rl.is-stop .vs-rl-a{opacity:0}.vs-rl.is-stop .vs-rl-b{opacity:1}
.vs-omni{flex:1;min-width:0;height:24px;margin:0 6px;border-radius:12px;background:#1b1c1f;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;color:#c4c7cc}
.vs-omni svg{flex:none;width:11px;height:11px;fill:none;stroke:#9aa0a6;stroke-width:1.5}
.vs-omni span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-prof{flex:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#5f6368,#3a3d44)}
.vs-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--coral);opacity:0;transition:opacity var(--t-out) var(--ease-io);box-shadow:0 0 8px rgba(255,107,91,.6)}
.vs-vp{position:relative;flex:1;min-height:0;background:#fbfaf8;overflow:hidden}
/* while a page loads it washes out a little (eased, never a white flash), and clears as the new page eases in */
.vs-blank{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity var(--t-in) var(--ease-soft)}
.vs-blank.is-on{opacity:.45;transition:opacity var(--t-out) var(--ease-io)}

/* the generic store website */
.vs-site{height:100%;display:flex;flex-direction:column;color:#1f2328;font-size:11px;line-height:1.45}
.vs-shd{flex:none;height:40px;display:flex;align-items:center;gap:16px;padding:0 18px;background:#fff;border-bottom:1px solid #ece8e2}
.vs-logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;letter-spacing:-.01em;white-space:nowrap}
.vs-logo i{width:14px;height:14px;border-radius:4px;background:#1f2328;box-shadow:inset 0 0 0 3px #1f2328,inset 0 0 0 5px #e9e2d6}
.vs-snav{display:flex;gap:12px;color:#4b5563;white-space:nowrap}
.vs-snav span{padding:2px 0}
.vs-search{margin-left:auto;width:150px;height:24px;border:1px solid #e3ded6;border-radius:12px;padding:0 10px;color:#9ca3af;display:flex;align-items:center;font-size:10.5px}
.vs-cartb{position:relative;flex:none;width:22px;height:22px}
.vs-cartb svg{width:20px;height:20px;fill:none;stroke:#1f2328;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vs-cartb em{position:absolute;right:-5px;top:-4px;min-width:13px;height:13px;border-radius:7px;background:#1f2328;color:#fff;font:700 8px/13px var(--body);text-align:center;font-style:normal;opacity:0;transform:scale(.4);transition:opacity var(--t-out) var(--ease-io),transform var(--t-out) var(--ease-io)}
.vs-cartb em.is-on{opacity:1;transform:none;transition:opacity var(--t-in) var(--ease-soft),transform var(--t-in) var(--ease-soft)}
.vs-pgs{position:relative;flex:1;min-height:0}
/* page swap: the old page eases out (.is-off) while the new one eases in, 50 ms behind, so they overlap */
.vs-pg{position:absolute;inset:0;padding:16px 18px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(8px)}
.vs-pg.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-in) var(--ease-soft) 50ms,transform var(--t-in) var(--ease-soft) 50ms}
.vs-pg.is-off{visibility:visible;opacity:0;transform:translateY(-6px);transition:opacity var(--t-out) var(--ease-io),transform var(--t-out) var(--ease-io)}
.vs-hero{height:92px;border-radius:10px;background:linear-gradient(115deg,#ece4d7,#dfe5ea);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}
.vs-hero small{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;font-weight:600}
.vs-hero strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.vs-hero-i{width:96px;height:96px;fill:none;stroke:#1f2328;stroke-width:1.2;opacity:.35;margin-right:10px}
.vs-sbtn{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;height:22px;padding:0 12px;border-radius:11px;background:#1f2328;color:#fff;font-weight:600;font-size:10px;white-space:nowrap}
.vs-row{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px}
.vs-row strong{font-size:12px;font-weight:600}
.vs-a{color:#1f2328;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#b9b3aa}
.vs-row .vs-a{color:#6b7280}
.vs-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vs-card b{display:block;margin-top:6px;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-card span{display:block;color:#4b5563;font-size:10.5px}
.vs-card i{display:block;font-style:normal;color:#b58a3a;font-size:8.5px;letter-spacing:1px}
.vs-img{aspect-ratio:1/.85;border-radius:8px;display:grid;place-items:center}
.vs-img svg,.vs-th svg,.vs-pimg svg,.vs-pbig svg{width:46%;height:46%;fill:none;stroke:#1f2328;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.t1{background:#e6e9ee}.t2{background:#efe9e0}.t3{background:#ece6dc}.t4{background:#e3e7e4}
.vs-card.is-hov b{text-decoration:underline}
.vs-crumb{font-size:9.5px;color:#6b7280}
.vs-ph{margin:2px 0 6px;font:600 16px/1.2 var(--body);letter-spacing:-.015em;color:#1f2328}
.vs-mut{color:#6b7280;font-size:10px}
/* product page */
.vs-prodpg{display:grid;grid-template-columns:1fr 1.05fr;gap:20px;align-items:start}
.vs-pbig{aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center}
.vs-pbig svg{width:52%;height:52%;stroke-width:1.2}
.vs-stars{color:#b58a3a;font-size:9.5px;letter-spacing:1px}
.vs-stars em{font-style:normal;color:#6b7280;letter-spacing:0;margin-left:4px}
.vs-price{font-size:16px;font-weight:600;margin:6px 0 8px}
.vs-sw{display:flex;gap:6px;margin-bottom:10px}
.vs-sw i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.vs-sw i:first-child{box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #1f2328}
.vs-wide{display:flex;width:100%;height:30px;border-radius:15px;font-size:11px}
.vs-pinfo ul{margin:10px 0 0;padding-left:14px;color:#4b5563;font-size:10px}
.vs-pinfo .vs-a{display:inline-block;margin-top:8px;font-size:10px}
/* cart, orders, order, docs */
.vs-cartpg{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:8px;align-items:start}
.vs-line{display:grid;grid-template-columns:40px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #ece8e2}
.vs-line b{display:block;font-size:10.5px;font-weight:600}
.vs-line small{display:block;font-size:9.5px;color:#6b7280}
.vs-th{width:40px;height:40px;border-radius:6px;display:grid;place-items:center}
.vs-th svg{width:62%;height:62%}
.vs-qty{width:24px;height:20px;border:1px solid #e3ded6;border-radius:4px;display:grid;place-items:center;font-size:10px}
.vs-amt{font-weight:600;font-size:10.5px;font-variant-numeric:tabular-nums}
.vs-saved{margin-top:10px}
.vs-sum{border:1px solid #ece8e2;border-radius:10px;background:#fff;padding:12px}
.vs-sum div{display:flex;justify-content:space-between;font-size:10px;color:#4b5563;padding:2px 0}
.vs-sum .vs-tot{color:#1f2328;font-weight:600;font-size:11px;border-top:1px solid #ece8e2;margin-top:6px;padding-top:8px}
.vs-olist{margin-top:8px;border:1px solid #ece8e2;border-radius:10px;background:#fff;overflow:hidden}
.vs-orow{display:grid;grid-template-columns:1fr 1.1fr 1fr .8fr .6fr;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid #f0ece6;font-size:10.5px}
.vs-orow:last-child{border-bottom:0}
.vs-orow span{color:#4b5563}
.vs-orow em{justify-self:start;font-style:normal;font-size:9px;font-weight:600;padding:2px 7px;border-radius:9px;background:#eeeae4;color:#4b5563}
.vs-orow em.is-ship{background:#e3ecf7;color:#1d4f8f}
.vs-orow .vs-a{color:#1f2328;justify-self:end}
.vs-track{display:grid;grid-template-columns:repeat(4,1fr);margin:12px 0 12px;font-size:9.5px;color:#9ca3af}
.vs-track span{position:relative;padding-top:16px}
.vs-track span::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #d4cec4;z-index:1}
.vs-track span::after{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:#e3ded6}
.vs-track span:last-child::after{right:auto;width:0}
.vs-track .is-done,.vs-track .is-cur{color:#1f2328}
.vs-track .is-done::before{background:#1f2328;box-shadow:none}
.vs-track .is-done::after{background:#1f2328}
.vs-track .is-cur::before{box-shadow:inset 0 0 0 2.5px #1f2328}
.vs-box{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border-radius:8px;background:#f2efea;margin-bottom:4px}
.vs-box b{font-size:11px}
.vs-ret{display:inline-block;margin-top:10px;font-size:10.5px}
.vs-doc{margin-top:6px;max-width:440px}
.vs-doc p{font-size:10.5px;color:#374151;margin:10px 0 6px}
.vs-doc i{display:block;height:6px;border-radius:3px;background:#ece8e2;margin:5px 0}
.vs-form{display:grid;gap:9px;max-width:300px;margin-top:8px}
.vs-form label{display:flex;flex-direction:column;gap:3px;font-size:9.5px;color:#6b7280;font-weight:600}
.vs-form label span{height:26px;border:1px solid #e3ded6;border-radius:6px;background:#fff;display:flex;align-items:center;padding:0 9px;color:#1f2328;font-weight:400;font-size:10.5px}
.vs-form .vs-sbtn{justify-self:start;height:26px;padding:0 16px;border-radius:13px}
.vs-snav span.is-hov,.vs-a.is-hov{text-decoration:underline;color:#1f2328}

/* browser context menu + tab tooltip */
.vs-menu{position:absolute;z-index:25;width:150px;padding:5px 0;border-radius:8px;background:#2b2d31;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);font-size:10.5px;color:#e8eaed;opacity:0;transform:scale(.96);transform-origin:0 0;pointer-events:none;transition:opacity var(--t-text) ease-in-out,transform var(--t-text) ease-in-out}
.vs-menu.is-on{opacity:1;transform:none}
.vs-menu span{display:block;padding:5px 12px;white-space:nowrap;transition:background-color var(--t-text) ease-in-out}
.vs-menu span.is-hov{background:#3c4a63}
.vs-tip{position:absolute;z-index:24;top:38px;left:0;max-width:220px;padding:5px 9px;border-radius:6px;background:#3c3e43;box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:10px;color:#e8eaed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--t-text) ease-in-out}
.vs-tip.is-on{opacity:1}

/* cursor + click ripple */
.vs-cur{position:absolute;left:0;top:0;z-index:40;width:0;height:0;pointer-events:none;opacity:0;transition:opacity var(--t-out) var(--ease-io)}
.vs-cur.is-on{opacity:1}
.vs-cur svg{position:absolute;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));transition:transform .1s;transform-origin:0 0}
.vs-cur .vs-arrow{left:-1px;top:-1px;width:16px;height:22px}
.vs-cur .vs-arrow path,.vs-cur .vs-hand path{fill:#fff;stroke:#111;stroke-width:1.1;stroke-linejoin:round}
.vs-cur .vs-hand{left:-7px;top:-1px;width:20px;height:22px;display:none}
.vs-cur.is-hand .vs-arrow{display:none}.vs-cur.is-hand .vs-hand{display:block}
.vs-cur.is-down svg{transform:scale(.86)}
.vs-rip{position:absolute;z-index:39;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--blue);pointer-events:none;opacity:0;animation:vs-rip .6s ease-out forwards}
.vs-rip.is-r{border-color:#fff}
@keyframes vs-rip{0%{transform:scale(.3);opacity:0}25%{opacity:.75}100%{transform:scale(1.2);opacity:0}}

/* ---------- the ProBuilt side: Floating Forms licensed into someone else's product ----------
   .vs-apps is the browser viewport. Each .vs-app is one host: its own page underneath (.vs-site / .vs-ld / .vs-hb) and
   its floating windows on top (.vs-wins > .vs-fw). Every visit is a fresh copy of the host, stacked on top of the rest
   (vs.js activate). It eases in over --t-in (--ease-io) while every layer under it turns .is-out: that page stays solid
   underneath, so the frame never empties, dips toward the bare viewport or flashes pale, and its windows ease out over
   --t-out. A layer still easing in when it is covered keeps easing in on the same curve (.is-out shares .is-on's
   transition), so a quick pick never makes it jump. The layers underneath go once the new one is fully in.
   The tab title, favicon and address crossfade (vs.js swapText). */
.vs-apps{position:relative;isolation:isolate;flex:1;min-height:0;overflow:hidden;background:#f4f3f1}
.vs-app{position:absolute;inset:0;opacity:0;visibility:hidden}
.vs-app.is-on,.vs-app.is-out{opacity:1;visibility:visible;transition:opacity var(--t-in) var(--ease-io)}
.vs-app.is-out .vs-wins{opacity:0;transition:opacity var(--t-out) var(--ease-io)}
.vs-app > :first-child{height:100%}
.vs-wins{position:absolute;inset:0;pointer-events:none}
.vs-us .vs-t.is-one{flex-basis:214px}
.vs-fav.is-L{background-color:#2f7d5b;color:#fff}
.vs-fav.is-H{background-color:#e3a33a;color:#17212e}

/* a Floating Forms window inside a host. Same chrome everywhere (title bar, minimize, maximize, close), host's own look.
   Each window is a size container (fw.css), so everything inside is sized in em and scales with the window.
   A window grows out of whatever opened it (vs.js open): it moves and scales on the .42s grow curve while it fades in
   on a gentler one (.46s --ease-soft, under .3 opacity in any 50 ms), so it never pops in. */
.vs-fw{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);visibility:hidden;opacity:0;
  transition:opacity var(--t-out) var(--ease-io),transform var(--t-out) var(--ease-io),box-shadow var(--t-text) ease-in-out,visibility 0s linear var(--t-out)}
.vs-fw.is-in{visibility:visible;opacity:1;transition:opacity .46s var(--ease-soft),transform .42s var(--ease),box-shadow var(--t-text) ease-in-out,visibility 0s}
/* coming forward (vs.js raise): a still copy keeps the window's old place under its neighbours while the window itself
   fades in on top, and the copy's shadow fades out underneath on the same curve (420 ms, ease in out sine), so the
   window and its shadow come forward smoothly, the shadow never doubles and nothing snaps over its neighbours. The copy
   goes once the window covers it. */
.vs-wins .vs-fw.vs-ghost.vs-lift{box-shadow:none;transition:box-shadow .42s cubic-bezier(.37,0,.63,1)}
.vs-n .vs-fw{left:calc(var(--nx)*1%);top:calc(var(--ny)*1%);width:calc(var(--nw)*1%)}
.vs-n .vs-fw[data-wide]{display:none}
.vs-fw .fw-in{font-size:10px;line-height:1.4}
.vs-n .vs-fw .fw-in{font-size:11.5px}
.vs-fw .fw-bar{height:2.5em;gap:.65em;padding:0 .8em;font-size:1em}
.vs-fw .fw-burger{width:.95em;height:.72em}
.vs-fw .fw-ctl{gap:.8em}
.vs-fw .fw-ctl i{width:.68em;height:.68em}
.vs-fw .fw-ctl .x::before,.vs-fw .fw-ctl .x::after{width:.9em}
.vs-wb{padding:.85em .9em .95em}
/* a finished state built in one go (paused, or reduced motion): nothing inside the host animates while it is built */
.vs-snap *{transition:none!important}
/* what a click changes: a highlight that rises and falls back to the element's own color, and a nudge that swells and
   settles. Neither starts from a jump (no from or to keyframe). */
.vs-live{animation:vs-live .7s ease-in-out}
@keyframes vs-live{35%{background-color:var(--hl)}}
.vs-pop2{animation:vs-pop2 .5s ease-in-out}
@keyframes vs-pop2{40%{transform:scale(1.12)}}

/* Northfield Goods: the left panel's store, warm whites, black pill buttons */
.vs-h-ng{--hl:rgba(214,170,90,.34)}
.vs-h-ng .vs-fw{border:1px solid #e2dcd2;border-radius:10px;color:#1f2328;font-family:var(--body);box-shadow:0 18px 40px rgba(40,33,22,.2),0 2px 6px rgba(40,33,22,.1)}
.vs-h-ng .vs-fw.is-top{box-shadow:0 26px 60px rgba(40,33,22,.3),0 3px 10px rgba(40,33,22,.12)}
.vs-h-ng .vs-fw.is-drag{box-shadow:0 34px 72px rgba(40,33,22,.34),0 4px 12px rgba(40,33,22,.14)}
.vs-h-ng .vs-site{background:#fbfaf8}
.vs-h-ng .vs-fw .fw-bar{background:#f6f3ee;border-bottom:1px solid #ece8e2;color:#1f2328}
.vs-h-ng .vs-card{border-radius:8px;transition:transform .2s var(--ease)}
.vs-h-ng .vs-card.is-hov{transform:translateY(-2px)}
.vs-pw{display:grid;grid-template-columns:5.2em 1fr;gap:.75em;align-items:center}
.vs-pimg{display:grid;place-items:center;aspect-ratio:1/1;border-radius:.7em}
.vs-pimg svg{width:58%;height:58%}
.vs-fw .vs-crumb{font-size:.85em}
.vs-fw .vs-price{font-size:1.5em;line-height:1.15;margin:.05em 0 .12em}
.vs-fw .vs-stars{font-size:.85em}
.vs-fw .vs-sw{margin:.75em 0 0;gap:.5em}
.vs-fw .vs-sw i{width:1.15em;height:1.15em}
.vs-fw .vs-sbtn{margin-top:.75em;height:2.4em;padding:0 1.1em;border-radius:1.2em;font-size:.95em;transition:background-color var(--t-text) ease-in-out}
.vs-fw .vs-sbtn.is-hov{background:#3a3f45}
.vs-fw .vs-sbtn.is-done{background:#2f6b4f}
.vs-specs{margin:.7em 0 0;padding-left:1.15em;color:#4b5563;font-size:.88em;line-height:1.45}
.vs-fw .vs-line{grid-template-columns:3.2em 1fr auto auto;gap:.7em;padding:0 0 .7em;border-bottom:1px solid #ece8e2}
.vs-fw .vs-th{width:3.2em;height:3.2em;border-radius:.5em}
.vs-fw .vs-line b{font-size:1em}
.vs-fw .vs-line small{font-size:.86em}
.vs-fw .vs-qty{width:2.2em;height:1.9em;font-size:.95em}
.vs-fw .vs-amt{font-size:1em}
.vs-nw{white-space:nowrap}
.vs-tot2{display:flex;justify-content:space-between;margin-top:.65em;color:#4b5563}
.vs-tot2 b{color:#1f2328;font-variant-numeric:tabular-nums}
.vs-fw .vs-mut{margin:0;font-size:.9em}
.vs-fw .vs-track{margin:.85em 0 .9em;font-size:.88em}
.vs-fw .vs-track span{padding-top:1.5em}
.vs-fw .vs-track span::before{top:.2em;width:.9em;height:.9em}
.vs-fw .vs-track span::after{top:.62em}
.vs-fw .vs-box{margin:0;padding:.7em .9em;border-radius:.7em}
.vs-fw .vs-box b{font-size:1.05em}
.vs-fw .vs-oi{margin-top:.75em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Linden Dental: a light clinical portal, sage green, a left sidebar */
.vs-h-ld{--hl:rgba(47,125,91,.22)}
.vs-ld{display:grid;grid-template-columns:126px minmax(0,1fr);background:#f3f6f5;color:#1b2b26;font-size:11px;line-height:1.4}
.vs-ld-side{display:flex;flex-direction:column;gap:3px;padding:14px 10px 12px;background:#fff;border-right:1px solid #e1e8e5}
.vs-ld-logo{display:flex;align-items:center;gap:7px;margin:0 4px 14px;font-weight:700;font-size:12px;letter-spacing:-.01em;color:#1d4d3a;white-space:nowrap}
.vs-ld-logo svg{width:20px;height:20px;flex:none;fill:#2f7d5b;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.vs-ld-nav{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:7px;color:#41524c;font-size:10.5px;white-space:nowrap}
.vs-ld-nav svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vs-ld-nav.is-on{background:#e4f0ea;color:#1f6a46;font-weight:600}
.vs-ld-nav em{margin-left:auto;font-style:normal;font-size:8.5px;font-weight:700;color:#fff;background:#2f7d5b;border-radius:8px;padding:0 5px;line-height:14px}
.vs-ld-me{margin-top:auto;display:flex;align-items:center;gap:7px;padding:0 4px;font-size:10px;color:#5d6f69;white-space:nowrap}
.vs-ld-me i{width:20px;height:20px;flex:none;border-radius:50%;background:#dbe7e1;color:#1f6a46;font:700 8px/20px var(--body);text-align:center;font-style:normal}
.vs-ld-main{min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.vs-ld-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vs-ld-top h5{margin:0;font:600 15px/1.2 var(--body);letter-spacing:-.015em;color:#1b2b26}
.vs-ld-top small{font-size:9.5px;color:#5d6f69}
.vs-ld-search{flex:none;width:136px;height:24px;border:1px solid #d6e0dc;border-radius:6px;background:#fff;color:#8a9a94;font-size:10px;display:flex;align-items:center;padding:0 9px}
.vs-ld-fil{display:flex;gap:6px}
.vs-ld-fil span{height:20px;padding:0 9px;border-radius:5px;border:1px solid #d6e0dc;background:#fff;font-size:9.5px;color:#41524c;display:flex;align-items:center;white-space:nowrap}
.vs-ld-fil .is-on{border-color:#2f7d5b;color:#1f6a46;background:#eef6f2;font-weight:600}
.vs-ld-list{background:#fff;border:1px solid #e1e8e5;border-radius:10px;overflow:hidden}
.vs-ld-row{display:grid;grid-template-columns:40px minmax(0,1fr) 70px 86px;gap:8px;align-items:center;min-height:36px;padding:3px 12px;border-top:1px solid #edf2f0;font-size:10.5px;transition:background .2s}
.vs-ld-hd{min-height:24px;border-top:0;background:#f7faf9;font-size:9px;font-weight:600;color:#5d6f69}
.vs-ld-row b{font-weight:600;font-variant-numeric:tabular-nums}
.vs-ld-row strong{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-ld-row small{display:block;font-size:9.5px;color:#5d6f69;white-space:nowrap}
.vs-ld-pv{color:#41524c;white-space:nowrap}
.vs-ld-row.is-hov,.vs-ld-row.is-sel{background:#eef6f2}
.vs-ld-now{position:relative;height:0;border-top:1.5px solid #d8604c;margin:0 12px 0 52px}
.vs-ld-now span{position:absolute;left:-40px;top:-7px;font-size:8px;font-weight:700;color:#fff;background:#d8604c;border-radius:6px;padding:0 5px;line-height:13px}
.vs-h-ld em{justify-self:start;font-style:normal;font-size:9px;font-weight:600;padding:2px 8px;border-radius:10px;background:#fff;color:#41524c;box-shadow:inset 0 0 0 1px #cfdbd6;white-space:nowrap}
.vs-h-ld em.is-done{background:#eef1f0;color:#6b7a75;box-shadow:none}
.vs-h-ld em.is-chair{background:#e3edf8;color:#2a5a94;box-shadow:none}
.vs-h-ld em.is-unc{background:#fbf0d9;color:#8a5a00;box-shadow:none}
.vs-h-ld em.is-in,.vs-h-ld em.is-ready{background:#2f7d5b;color:#fff;box-shadow:none}
/* a status that changes eases to its new colors while its text crossfades */
.vs-h-ld em,.vs-h-hb em{transition:background-color var(--t-text) ease-in-out,color var(--t-text) ease-in-out,box-shadow var(--t-text) ease-in-out}
.vs-h-ld .vs-fw{border:1px solid #d9e3df;border-radius:9px;color:#1b2b26;font-family:var(--body);box-shadow:0 18px 40px rgba(20,48,38,.2),0 2px 6px rgba(20,48,38,.08)}
.vs-h-ld .vs-fw.is-top{box-shadow:0 26px 56px rgba(20,48,38,.28),0 0 0 1.5px rgba(47,125,91,.45)}
.vs-h-ld .vs-fw .fw-bar{background:#eef5f1;border-bottom:1px solid #dbe7e1;color:#1d4d3a}
.vs-h-ld .vs-fw em{font-size:.86em;padding:.2em .75em;border-radius:1em}
.vs-ld-pt{display:flex;align-items:center;gap:.7em}
.vs-ld-pt > i{width:2.8em;height:2.8em;flex:none;border-radius:50%;background:#dbe7e1;color:#1f6a46;font-style:normal;font-weight:700;font-size:.95em;display:grid;place-items:center}
.vs-ld-pt b{display:block;font-size:1.15em;line-height:1.2}
.vs-ld-pt small{display:block;font-size:.85em;color:#5d6f69;white-space:nowrap}
.vs-ld-flag{margin-left:auto;align-self:start;font-size:.8em;font-weight:600;color:#a33b2b;background:#fbe9e5;border-radius:.4em;padding:.2em .55em;white-space:nowrap}
.vs-ld-ap{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin:.8em 0;padding:.55em .7em;border-radius:.6em;background:#f3f7f5;font-size:.92em;white-space:nowrap}
.vs-ld-ap span{overflow:hidden;text-overflow:ellipsis}
.vs-ld-acts{display:flex;align-items:center;gap:1.1em}
.vs-ld-lk{color:#1f6a46;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(31,106,70,.35);font-size:.95em;white-space:nowrap;transition:text-decoration-color .2s}
.vs-ld-lk.is-hov{text-decoration-color:#1f6a46}
.vs-ld-btn{margin-left:auto;display:inline-flex;align-items:center;height:2.3em;padding:0 1.1em;border-radius:.5em;background:#2f7d5b;color:#fff;font-weight:600;font-size:.95em;white-space:nowrap;transition:background-color var(--t-text) ease-in-out}
.vs-ld-btn.is-hov{background:#256649}
.vs-ld-btn.is-off{background:#c9d6d0}
.vs-ld-btn.is-done{background:#1f5c40}
.vs-ld-kv{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;padding:.36em 0;border-bottom:1px solid #edf2f0;font-size:.95em}
.vs-ld-kv span{color:#5d6f69;white-space:nowrap}
.vs-ld-kv b{font-weight:600;white-space:nowrap}
.vs-ld-kv b.is-empty,.vs-ld-kv b > .vs-xi.vs-xe{color:#9aaba5;font-weight:400}
.vs-ld-ok::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:#2f9a64;margin-right:.4em;vertical-align:.08em}
.vs-ld-cov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;padding:.55em 0;border-bottom:1px solid #edf2f0;font-size:.85em;color:#5d6f69}
.vs-ld-cov span{display:flex;flex-direction:column;gap:.3em}
.vs-ld-cov i{display:block;height:.42em;border-radius:.21em;background:linear-gradient(90deg,#2f7d5b var(--p),#e3ece8 var(--p))}
.vs-ld-cov b{color:#1b2b26;font-size:1.05em;line-height:1}
.vs-ld-tr{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:.6em;padding:.42em 0;border-bottom:1px solid #edf2f0;font-size:.95em}
.vs-ld-tr b{font-weight:600;color:#1f6a46}
.vs-ld-tr em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;padding:0;box-shadow:none;background:none;font-size:1em}
.vs-ld-sum{display:flex;align-items:center;gap:1em;margin-top:.7em;font-size:.88em;color:#5d6f69;white-space:nowrap}
.vs-ld-sum b{color:#1b2b26}
.vs-ld-sum .vs-ld-lk{margin-left:auto;font-size:1.05em}
.vs-ld-cl{display:flex;align-items:center;justify-content:space-between;margin-top:.75em}
@container (max-width:250px){.vs-ld-flag,.vs-ld-sum > span:nth-child(2){display:none}}

/* Harbor Supply Co.: a warehouse system, slate top bar, amber accent, square corners, upper case labels */
.vs-h-hb{--hl:rgba(227,163,58,.32)}
.vs-hb{display:flex;flex-direction:column;background:#edf0f3;color:#17212e;font-size:11px;line-height:1.4}
.vs-hb-top{flex:none;height:38px;display:flex;align-items:center;gap:22px;padding:0 16px;background:#17212e;color:#aeb9c6}
.vs-hb-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px;color:#fff;white-space:nowrap;letter-spacing:-.01em}
.vs-hb-logo svg{width:18px;height:18px;flex:none;fill:#e3a33a;stroke:#17212e;stroke-width:1.9;stroke-linecap:round}
.vs-hb-nav{display:flex;gap:15px;font-size:10.5px;white-space:nowrap}
.vs-hb-nav span{position:relative;line-height:38px;transition:color .2s}
.vs-hb-nav .is-on,.vs-hb-nav .is-hov{color:#fff}
.vs-hb-nav .is-on{font-weight:600}
.vs-hb-nav .is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#e3a33a}
.vs-hb-site{margin-left:auto;font-size:9.5px;color:#93a1b1;border:1px solid #2f3d50;border-radius:3px;padding:1px 8px;white-space:nowrap}
.vs-hb-main{flex:1;min-height:0;padding:13px 16px;display:flex;flex-direction:column;gap:10px}
.vs-hb-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.vs-hb-head h5{margin:0;font:700 15px/1.2 var(--body);letter-spacing:-.01em;color:#17212e;white-space:nowrap}
.vs-hb-head small{font-weight:400;font-size:10px;color:#5b6878;margin-left:6px;letter-spacing:0}
/* wide: the day's numbers sit in the page header, next to the title, where the windows leave them in view */
.vs-hb-stats{display:flex;align-items:center;margin-right:auto;font-size:10px;color:#5b6878;white-space:nowrap}
.vs-hb-stats span{padding:0 12px;border-left:1px solid #cdd5de;line-height:14px}
.vs-hb-stats span:first-child{padding-left:0;border-left:0}
.vs-hb-stats b{margin-left:4px;font-size:11.5px;font-weight:700;color:#17212e;font-variant-numeric:tabular-nums}
.vs-hb-btn{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:3px;background:#2b5b86;color:#fff;font-weight:600;font-size:10px;white-space:nowrap;transition:background-color var(--t-text) ease-in-out}
.vs-hb-btn.is-hov{background:#224b70}
.vs-hb-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vs-hb-kpis div{background:#fff;border:1px solid #dbe1e8;border-radius:3px;padding:6px 10px}
.vs-hb-kpis small{display:block;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b6878;white-space:nowrap}
.vs-hb-kpis b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vs-hb-tbl{background:#fff;border:1px solid #dbe1e8;border-radius:3px;overflow:hidden}
.vs-hb-tr{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1.6fr) 84px;gap:12px;align-items:center;height:29px;padding:0 12px;border-top:1px solid #edf0f3;font-size:10.5px;transition:background .2s}
.vs-hb-th{height:23px;border-top:0;background:#f5f7f9;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b6878}
.vs-hb-tr b{font-weight:600}
.vs-hb-tr.is-hov,.vs-hb-tr.is-sel{background:#fff6e4}
.vs-hb-pr{display:flex;align-items:center;gap:8px}
.vs-hb-pr i{flex:1;height:6px;border-radius:1px;background:linear-gradient(90deg,#2b5b86 var(--p),#e3e8ee var(--p))}
.vs-hb-pr small{width:30px;text-align:right;font-size:9.5px;color:#5b6878;font-variant-numeric:tabular-nums}
.vs-h-hb em{justify-self:start;font-style:normal;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:2px;background:#e8ecf0;color:#5b6878;white-space:nowrap}
.vs-h-hb em.is-done,.vs-h-hb em.is-ok{background:#e3efe7;color:#2d6a47}
.vs-h-hb em.is-run,.vs-h-hb em.is-wait{background:#fcefd6;color:#8a5a00}
.vs-h-hb em.is-rel{background:#e2ebf5;color:#2b5b86}
.vs-h-hb em.is-load{background:#2b5b86;color:#fff}
.vs-h-hb .vs-fw{border:1px solid #c5cfda;border-radius:4px;color:#17212e;font-family:var(--body);box-shadow:0 18px 40px rgba(16,24,36,.26),0 2px 6px rgba(16,24,36,.12)}
.vs-h-hb .vs-fw.is-top{box-shadow:0 26px 56px rgba(16,24,36,.34),0 0 0 1.5px rgba(227,163,58,.75)}
.vs-h-hb .vs-fw .fw-bar{background:#233042;border-bottom:0;color:#fff}
.vs-h-hb .vs-fw.is-top .fw-bar{background:#1b2634}
.vs-h-hb .vs-fw em{font-size:.86em;letter-spacing:.04em;padding:.25em .6em}
.vs-h-hb .vs-fw .vs-hb-ft em{font-size:.95em}
.vs-hb-for{margin:0 0 .6em;font-size:.9em;color:#5b6878;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-hb-lk{color:#2b5b86;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(43,91,134,.35);transition:text-decoration-color .2s}
.vs-hb-lk.is-hov{text-decoration-color:#2b5b86}
.vs-hb-g{position:relative;border:1px solid #e1e6ec;border-radius:2px;overflow:hidden}
/* the list is scrolled down to the open line: the picked lines above it are out of view, the scroll thumb says so */
.vs-hb-g::after{content:"";position:absolute;right:.2em;bottom:.3em;width:.28em;height:38%;border-radius:.14em;background:#c9d1db}
.vs-hb-gr{display:grid;grid-template-columns:1.25fr 1fr .5fr 1.1fr;gap:.6em;align-items:center;padding:.36em .65em;border-top:1px solid #edf0f3;font-size:.92em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .2s}
.vs-hb-gh{border-top:0;background:#f5f7f9;font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b6878}
.vs-hb-gr.is-sel{background:#fff6e4}
.vs-hb-ft{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin-top:.7em;font-size:.9em;color:#5b6878}
.vs-fw .vs-hb-btn{height:2.3em;padding:0 1em;font-size:.95em;border-radius:.3em}
.vs-hb-btn.is-off{background:#c3ccd6}
.vs-hb-btn.is-done{background:#2d6a47}
.vs-hb-kv{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.2em .6em;align-items:baseline;padding:.38em 0;border-bottom:1px solid #edf0f3;font-size:.92em}
.vs-hb-kv span{color:#5b6878;font-size:.88em}
.vs-hb-kv b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-hb-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5em}
.vs-hb-n span{display:flex;flex-direction:column;padding:.4em .6em;border:1px solid #e1e6ec;border-radius:2px;font-size:.8em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6878}
.vs-hb-n b{font-size:1.85em;line-height:1.15;letter-spacing:-.01em;color:#17212e;font-variant-numeric:tabular-nums;text-transform:none}
.vs-hb-dk{padding:.35em .55em .55em}
.vs-hb-dk .vs-hb-gr{grid-template-columns:2.2em 1fr 1.25fr 1fr}
.vs-hb-dk .vs-hb-gr:first-child{border-top:0}

/* wide stages: window type a step up, so it reads at least as large as the left panel's page text (about 9 CSS px at
   1440) and nothing in a window drops under 8 CSS px. The pills and buttons that change when the cursor acts are the
   largest small type in each window (8.5 CSS px or more), since they carry the proof that everything is live.
   Narrow stages keep their own, larger sizes below. */
#vs:not(.vs-n) .vs-fw .fw-in{font-size:10.6px}
#vs:not(.vs-n) .vs-fw .fw-bar{gap:.55em}
#vs:not(.vs-n) .vs-fw .fw-ctl{gap:.7em}
#vs:not(.vs-n) .vs-fw .vs-crumb,#vs:not(.vs-n) .vs-fw .vs-stars,#vs:not(.vs-n) .vs-ld-pt small,#vs:not(.vs-n) .vs-ld-cov{font-size:.88em}
#vs:not(.vs-n) .vs-ld-flag{font-size:.86em}
/* the chart stays clear of the schedule's 10:24 marker and the 10:30 row it updates */
#vs:not(.vs-n) [data-w="chart"] .vs-wb{padding:.7em .9em .8em}
#vs:not(.vs-n) .vs-ld-ap{margin:.55em 0}
#vs:not(.vs-n) .vs-h-ld .vs-fw em{font-size:.95em}
#vs:not(.vs-n) .vs-h-ld .vs-fw :is(.vs-ld-ap,.vs-ld-tr) em{font-size:1em}
#vs:not(.vs-n) .vs-h-hb .vs-fw em{font-size:.95em}
#vs:not(.vs-n) .vs-h-hb .vs-fw :is(.vs-hb-ft,.vs-hb-gr) em{font-size:1em}
#vs:not(.vs-n) .vs-fw .vs-hb-ft .vs-hb-btn{font-size:1.05em}
#vs:not(.vs-n) .vs-hb-gh{font-size:.92em}
#vs:not(.vs-n) .vs-hb-kv span{font-size:.96em}
#vs:not(.vs-n) .vs-hb-n span{font-size:.86em}

/* phones and narrow stages: the hosts tighten up the way real responsive sites do */
.vs-n .vs-ld{grid-template-columns:44px minmax(0,1fr)}
.vs-n .vs-ld-side{padding:12px 6px;align-items:center}
.vs-n .vs-ld-logo{margin:0 0 12px}
.vs-n .vs-wonly{display:none}
#vs:not(.vs-n) .vs-nonly{display:none}
.vs-n .vs-ld-logo span,.vs-n .vs-ld-nav span,.vs-n .vs-ld-nav em,.vs-n .vs-ld-me span{display:none}
.vs-n .vs-ld-top{flex-direction:column;align-items:stretch;gap:8px}
.vs-n .vs-ld-search{width:auto}
.vs-n .vs-ld-nav{width:30px;padding:0;justify-content:center}
.vs-n .vs-ld-me{display:none}
.vs-n .vs-ld-main{padding:12px 12px}
.vs-n .vs-ld-row{grid-template-columns:36px minmax(0,1fr) 82px;padding:3px 10px;min-height:36px}
.vs-n .vs-ld-pv,.vs-n .vs-ld-hd span:nth-child(3){display:none}
.vs-n .vs-ld-now{margin-left:46px}
.vs-n .vs-ld-now span{left:-36px}
.vs-n .vs-hb-top{gap:14px;padding:0 12px}
.vs-n .vs-hb-x,.vs-n .vs-hb-site{display:none}
.vs-n .vs-hb-main{padding:12px 12px}
.vs-n .vs-hb-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vs-n .vs-hb-tr{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 74px}
.vs-n .vs-hb-tr > :nth-child(2){display:none}
.vs-n .vs-hb-tr:not(.vs-hb-th){height:31px}
/* narrow windows: the two lower windows sit side by side under the row that updates, and trim what they show, so
   every live value and button stays in view. Titles drop the menu icon to keep their full name. */
.vs-n .vs-fw .fw-burger{display:none}
.vs-n .vs-fw .fw-bar{gap:.5em;padding:0 .7em}
.vs-n .vs-fw .fw-ctl{gap:.55em}
.vs-n .vs-h-ld .vs-fw em{font-size:.95em}
.vs-n .vs-ld-tr{grid-template-columns:minmax(0,1fr) auto}
.vs-n .vs-ld-tr b{display:none}
.vs-n .vs-h-hb .vs-fw .fw-in{font-size:12px}
.vs-n .vs-h-hb .vs-fw .vs-hb-gr em{font-size:.9em;padding:.18em .55em}
.vs-n .vs-h-hb .vs-fw .vs-hb-gh{font-size:.84em}
.vs-n .vs-ld-flag{font-size:.88em}
.vs-n .vs-hb-kv{grid-template-columns:auto minmax(0,1fr)}
.vs-n .vs-hb-dk .vs-hb-gr{grid-template-columns:2.2em 1fr auto}

/* counters + captions + industry chips */
.vs-ct{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--dim);min-height:32px}
.vs-ct b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;margin-left:4px;display:inline-block}
/* room for two digits, so a count going up never pushes the row (with reduced motion the counts never change) */
@media (prefers-reduced-motion:no-preference){.vs-ct b[data-vs-c]{min-width:2ch}}
.vs-ct > i{width:1px;height:14px;background:var(--line)}
.vs-them .vs-ct b{color:#fff}
.vs-ct b.vs-bump{animation:vs-bump .8s ease-in-out}
@keyframes vs-bump{30%{color:var(--coral)}}
.vs-us .vs-ct b{color:var(--blue)}
.vs-pp{position:absolute;right:22px;top:22px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;color:#fff}
.vs-pp[hidden]{display:none}
.vs-pp:hover{background:rgba(255,255,255,.08)}
.vs-pp:focus-visible,.vs-chip:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.vs-pp span{width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.vs-pp[aria-pressed="true"] span{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:3px}
.vs-cap{color:var(--dimmer);font-size:14px;line-height:1.5}
@supports not (grid-template-rows:subgrid){.vs-cap{margin-top:auto}}
.vs-cap-us{color:var(--dim)}
.vs-chip{position:relative;isolation:isolate;overflow:hidden;flex:none;height:36px;padding:0 16px;border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.8);font:600 14px var(--body);white-space:nowrap;cursor:pointer;transition:color var(--t-text) ease-in-out,background-color var(--t-text) ease-in-out}
.vs-chip:hover{color:#fff;background:rgba(255,255,255,.09)}
.vs-chip.is-on{color:var(--navy);background:#fff}
/* the active chip fills with blue, left to right, until the demo moves on by itself (cue.js counts --cue-p up every
   frame). The fill is drawn from --vs-fill, which vs.js keeps on --cue-p exactly while it counts (a transition restarted
   every frame would trail far behind the count) and eases back over --t-out when autoplay holds. On a switch the chip
   that gives up the highlight keeps the fill it shows and fades it out, so it never jumps to full or drops away. */
.vs-chip::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(25,165,255,.12),rgba(25,165,255,.38));box-shadow:inset -2px 0 0 #19A5FF;transform-origin:left;transform:scaleX(var(--vs-fill,0));opacity:0;transition:opacity var(--t-text) ease-in-out}
.vs-chip.cue-active::after{top:0;height:auto;z-index:-1;opacity:1;background:linear-gradient(90deg,rgba(25,165,255,.12),rgba(25,165,255,.38));box-shadow:inset -2px 0 0 #19A5FF;transform:scaleX(var(--vs-fill,0));transition:opacity var(--t-text) ease-in-out}

/* text crossfade (vs.js swapText): old and new text share one grid cell, placed in it the way the element placed its
   text (start, centered .vs-xc, or right-aligned .vs-xr). Anything sized by its text (.vs-xw: status pills, buttons,
   numbers, the address) eases its width from the old text to the new, and keeps easing its colors while it does;
   while it narrows, the wider old text is clipped as it fades. */
.vs-x{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;position:relative}
.vs-x.vs-xinl{display:inline-grid}
.vs-x.vs-xw{justify-items:start;transition:width var(--t-text) ease-in-out,background-color var(--t-text) ease-in-out,color var(--t-text) ease-in-out,box-shadow var(--t-text) ease-in-out}
.vs-x.vs-xc{justify-items:center}
.vs-x.vs-xr{justify-items:end}
.vs-x.is-swap.vs-xw{overflow:clip}
.vs-x > .vs-xi{grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--t-text) ease-in-out}
.vs-xw > .vs-xi{width:max-content;overflow:visible}
.vs-x > .vs-xi.is-new,.vs-x > .vs-xi.is-old{opacity:0}

/* stats */
.vs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.vs-stat{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:4px}
.vs-stat b{font-family:var(--display);font-weight:300;font-size:clamp(40px,4.6vw,64px);letter-spacing:-.04em;line-height:1}
.vs-stat span{color:var(--dim);font-size:14px}

/* paused panels freeze CSS motion too */
.vs-panel.is-paused *,.vs-panel.is-idle *,.vs-panel.is-paused .vs-fav::after,.vs-panel.is-idle .vs-fav::after{animation-play-state:paused!important}

/* narrow virtual layout (stage under 540px wide) */
.vs-n .vs-search{display:none}
.vs-n .vs-dots{padding:0 10px;gap:5px}
.vs-n .vs-t{padding:0 6px 0 7px;gap:5px}
.vs-n .vs-snav{gap:10px;margin-left:auto}
.vs-n .vs-hero{height:62px;padding:10px 14px}
.vs-n .vs-hero strong{font-size:14px}
.vs-n .vs-hero .vs-sbtn{display:none}
.vs-n .vs-hero-i{width:64px;height:64px}
.vs-n .vs-row{margin:10px 0 6px}
.vs-n .vs-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.vs-n .vs-img{aspect-ratio:1/.5}
.vs-n .vs-card b{margin-top:4px}
.vs-n .vs-card i{display:none}
.vs-n .vs-prodpg{grid-template-columns:.9fr 1fr;gap:14px}
.vs-n .vs-cartpg{grid-template-columns:1fr}
.vs-n .vs-orow{grid-template-columns:1fr 1fr .9fr .5fr}
.vs-n .vs-orow > span:nth-child(2){display:none}

@media (max-width:900px){
  .vs-grid{grid-template-columns:1fr}
  .vs-mid{position:relative;left:auto;top:auto;transform:none;justify-self:center;margin:-31px 0}
  .vs-mid span{width:62px;height:62px;font-size:26px}
  .vs-panel{padding:20px 18px 18px;gap:16px}
  .vs-grid{row-gap:20px}
  .vs-label{font-size:clamp(26px,5vw,34px)}
  .vs-ct{font-size:12px;gap:6px 14px}
  .vs-pp{right:16px;top:16px}
  .vs-pick{gap:12px}
  .vs-stats{gap:12px}
  .vs-stat span{font-size:13px}
}
@media (max-width:480px){
  .vs-ct > i{display:none}
  .vs-ask span{display:block}
  .vs-chips{gap:2px;padding:3px}
  .vs-chips .vs-hand{margin:0 0 0 6px;width:18px;height:18px}
  .vs-chip{height:34px;padding:0 11px;font-size:13px}
  .vs-stat b{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .vs-t,.vs-tabs > .vs-t.is-closing,.vs-menu,.vs-tip,.vs-blank,.vs-blank.is-on,.vs-pg.is-on,.vs-pg.is-off,.vs-cur,.vs-cartb em,.vs-cartb em.is-on,.vs-fav,.vs-fav::after,.vs-tx,.vs-t > span,.vs-x > .vs-xi,.vs-x.vs-xw{transition:none}
  .vs-fav::after{animation:none}
  /* nothing switches on its own, so the active chip simply reads as chosen (as cue.css has it) */
  .vs-chip.cue-active::after{transform:scaleX(1)}
  /* the hosts show their finished state: nothing in them moves */
  .vs-apps,.vs-apps *{transition:none!important;animation:none!important}
}