/* ============================================================
   Spatial portfolio · apps
   Case study panels, screenshot viewer and the 3D volumes (.vxa-),
   and the Work window: app library + in-window navigation (.vxw-).
   Windows stay neutral glass; the app's accent (--accent: r g b)
   only tints content inside its own window.
   ============================================================ */

.vxa-win { --accent: 200 200 210; --tint: color-mix(in srgb, rgb(var(--accent)) 58%, white); }
.vxa { --accent-soft: color-mix(in srgb, rgb(var(--accent)) 32%, transparent); container-type: inline-size; min-height: 100%; }
.vxa-panel[hidden] { display: none; }
.vxa-panel { position: relative; }

/* Staged entrance: every [data-st] child rises, sharpens and fades in, in order */
.vxa-panel.is-in [data-st] { animation: vxa-in 0.72s var(--vx-ease-out) both; animation-delay: calc(var(--i, 0) * 46ms + 40ms); }
@keyframes vxa-in { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Hero (icon, eyebrow, title, tagline, rating) ---------- */
.vxa-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin-bottom: 22px; }
.vxa-icon { position: relative; width: 104px; height: 104px; }
.vxa-icon__halo { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent) / 0.55), rgb(var(--accent) / 0.12) 60%, transparent); filter: blur(10px); animation: vxa-halo 6s ease-in-out infinite; pointer-events: none; }
.vxa-icon__img { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23.5%; overflow: hidden; background: linear-gradient(160deg, rgb(var(--accent)), color-mix(in srgb, rgb(var(--accent)) 55%, black)); box-shadow: 0 18px 36px -14px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.16); animation: vxa-float 7s ease-in-out infinite; }
.vxa-icon__img img { width: 100%; height: 100%; object-fit: cover; }
.vxa-icon__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 42%); pointer-events: none; }
.vxa-icon__glyph .vx-ico { width: 52px; height: 52px; color: #fff; }
@keyframes vxa-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes vxa-halo { 0%, 100% { opacity: 0.7; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
.vxa-hero__text { min-width: 0; }
.vxa-hero .vx-eyebrow { margin: 0 0 6px; }
.vxa-title { font-size: 44px; letter-spacing: -0.03em; text-wrap: balance; }
.vxa-tagline { margin: 8px 0 0; font-size: 20px; line-height: 1.35; font-weight: 500; color: var(--vx-label-2); text-wrap: balance; }
.vxa-rating { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--vx-label-2); }
.vxa-rating b { color: var(--vx-label-1); font-weight: 700; }
.vxa-stars { display: inline-flex; gap: 2px; }
.vxa-stars svg { width: 16px; height: 16px; fill: #ffcf55; filter: drop-shadow(0 0 6px rgb(255 200 80 / 0.35)); }
.vxa-panel.is-in .vxa-stars svg { animation: vxa-star 0.6s var(--vx-spring-bouncy) both; }
.vxa-stars svg:nth-child(2) { animation-delay: 0.42s !important; } .vxa-stars svg:nth-child(3) { animation-delay: 0.5s !important; }
.vxa-stars svg:nth-child(4) { animation-delay: 0.58s !important; } .vxa-stars svg:nth-child(5) { animation-delay: 0.66s !important; }
.vxa-stars svg:nth-child(1) { animation-delay: 0.34s !important; }
@keyframes vxa-star { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } to { opacity: 1; transform: none; } }

/* ---------- Overview ---------- */
.vxa-ov { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.vxa-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.vxa-status-row .vx-chip .vx-ico { width: 15px; height: 15px; }
.vxa-status { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px; border-radius: var(--vx-r-pill); font-size: 13px; font-weight: 600; background: rgb(255 255 255 / 0.1); color: var(--vx-label-1); }
.vxa-status i { width: 8px; height: 8px; border-radius: 50%; background: #9a9aa2; flex: none; }
/* a static status colour, never a pulsing "live" beacon */
.vxa-status.is-live i { background: #3ddc7a; }
.vxa-status.is-beta i { background: #ffcc3d; }
.vxa-summary { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--vx-label-1); text-wrap: pretty; }
.vxa-outcomes { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vxa-outcome { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 10px; border-radius: 14px; background: var(--vx-platter); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); font-size: 14px; font-weight: 500; }
.vxa-outcome .vx-ico { width: 18px; height: 18px; color: var(--tint); }
.vxa-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.vxa-cta .vxa-ext { width: 14px; height: 14px; opacity: 0.6; margin-left: -2px; }
.vxa-members { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.vxa-members .vx-caption { width: 100%; }
.vxa-member { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: var(--vx-r-pill); background: var(--vx-platter); font-size: 14px; font-weight: 500; }
.vxa-member img { width: 28px; height: 28px; border-radius: 8px; }

.vxa-facts { align-self: start; }
.vxa-facts .vx-row { min-height: 52px; gap: 12px; padding: 10px 18px; }
.vxa-facts__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgb(255 255 255 / 0.08); color: var(--vx-label-2); flex: none; }
.vxa-facts__ico .vx-ico { width: 16px; height: 16px; }
.vxa-facts__k { font-size: 13px; color: var(--vx-label-3); flex: none; min-width: 74px; }
.vxa-facts__v { margin-left: auto; text-align: right; font-size: 14px; font-weight: 500; color: var(--vx-label-1); min-width: 0; }

.vxa-ov__side { display: grid; gap: 14px; align-content: start; }
.vxa-brief { margin-top: 26px; }
.vxa-brief .vx-eyebrow { margin: 0 0 8px; }
.vxa-brief__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--vx-label-2); text-wrap: pretty; }
.vxa-mini { position: relative; display: grid; grid-template-rows: 1fr auto; height: 216px; padding: 0; overflow: hidden; cursor: pointer; transition: transform .5s var(--vx-spring), background .25s; }
.vxa-mini:hover { transform: translateY(-2px); background: var(--vx-platter-hi); }
.vxa-mini__stage { position: relative; overflow: hidden; }
.vxa-mini .vx-flow { position: absolute; inset: 0; pointer-events: none; }
.vxa-mini__cta { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px 8px 10px; border: 0; background: rgb(0 0 0 / 0.16); box-shadow: inset 0 1px 0 var(--vx-hairline); color: var(--vx-label-1); text-align: left; cursor: pointer; }
.vxa-mini__play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: rgb(18 18 22); flex: none; transition: scale .35s var(--vx-spring); }
.vxa-mini:hover .vxa-mini__play { scale: 1.08; }
.vxa-mini__play .vx-ico { width: 16px; height: 16px; margin-left: 2px; }
.vxa-mini__cta b { display: block; font-size: 15px; font-weight: 600; }
.vxa-mini__cta small { display: block; font-size: 12px; color: var(--vx-label-3); }
.vxa-mini__chev { margin-left: auto; width: 18px; height: 18px; color: var(--vx-label-3); }

/* ---------- Panel headers ---------- */
.vxa-head { margin-bottom: 24px; }
.vxa-head .vx-eyebrow { margin: 0 0 8px; }
.vxa-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Built: feature cards with gaze tilt ---------- */
.vxa-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vxa-feature { position: relative; padding: 24px; border-radius: var(--vx-r-card); background: var(--vx-platter); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--vx-spring), background .25s; }
.vxa-feature:hover { background: var(--vx-platter-hi); transition: transform .12s linear, background .25s; }
.vxa-feature__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 15px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--accent)) 88%, white), color-mix(in srgb, rgb(var(--accent)) 62%, black)); box-shadow: 0 10px 22px -10px rgb(var(--accent) / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.vxa-feature__ico .vx-ico { width: 24px; height: 24px; }
.vxa-feature__n { position: absolute; top: 24px; right: 24px; font-family: var(--vx-mono); font-size: 12px; color: var(--vx-label-3); }
.vxa-feature .vx-headline { margin-bottom: 8px; }
.vxa-feature .vx-callout { margin: 0; }

/* ---------- How it works ---------- */
.vxa-panel--flow .vxa-head { margin-bottom: 16px; }
.vxa-head--flow { align-items: baseline; margin: -8px 0 14px; }
.vxa-flowwrap { position: relative; }
.vxa-flowwrap .vx-flow { min-height: 420px; }
.vxa-flowfallback { list-style: none; margin: 0; padding: 24px; display: grid; gap: 10px; counter-reset: s; }
.vxa-flowfallback li { display: grid; grid-template-columns: 24px 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 18px; background: var(--vx-platter); }
.vxa-flowfallback li .vx-ico { grid-row: span 2; color: var(--tint); }
.vxa-flowfallback span { color: var(--vx-label-2); font-size: 14px; }

/* ---------- Screens: coverflow ---------- */
.vxa-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--vx-r-pill); background: rgb(0 0 0 / 0.22); }
.vxa-seg__b { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--vx-r-pill); background: transparent; color: var(--vx-label-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.vxa-seg__b[aria-pressed="true"] { background: rgb(255 255 255 / 0.9); color: rgb(18 18 22); }
.vxa-cf { --cw: 186px; position: relative; height: 412px; margin: 0 calc(-1 * var(--vxw-px, 40px)); /* bleeds exactly to the window edge (its real side padding), not a hard coded 44px */ overflow: hidden; touch-action: pan-y; cursor: grab; outline-offset: -6px; -webkit-user-select: none; user-select: none; }
.vxa-cf.is-drag { cursor: grabbing; }
.vxa-cf__stage { position: absolute; inset: 0; }
.vxa-cf__item { position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 1179 / 2556; padding: 0; border: 0; border-radius: 28px; background: #0c0c10; cursor: pointer; transform: translate(-50%, -50%); will-change: transform; box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.75), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.vxa-cf__item img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: brightness(calc(1 - var(--dim, 0))); pointer-events: none; }
.vxa-cf__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgb(255 255 255 / 0.16), transparent 34%); pointer-events: none; }
.vxa-cf__item.is-center { box-shadow: 0 40px 70px -26px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.22); }
.vxa-cf__bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.vxa-dots { display: flex; gap: 2px; }
.vxa-dot { width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vxa-dot::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgb(255 255 255 / 0.32); transition: width .45s var(--vx-spring), background .2s; }
.vxa-dot[aria-selected="true"]::before { width: 20px; background: #fff; }
.vxa-cf__count { min-width: 120px; text-align: center; color: var(--vx-label-2); white-space: nowrap; }
.vxa-cf__hint { text-align: center; margin: 4px 0 0; }

/* ---------- Screenshot viewer (fixed overlay) ---------- */
.vxa-viewer { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.vxa-viewer__bg { position: absolute; inset: 0; background: rgb(6 6 10 / 0.6); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); opacity: 0; transition: opacity .35s var(--vx-ease-out); }
.vxa-viewer.is-open .vxa-viewer__bg { opacity: 1; }
.vxa-viewer__fig { position: relative; margin: 0; display: grid; justify-items: center; gap: 14px; pointer-events: none; }
.vxa-viewer__img { max-height: min(82vh, 900px); max-width: 86vw; width: auto; border-radius: 38px; box-shadow: 0 50px 100px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.14); pointer-events: auto; touch-action: pan-y; }
.vxa-viewer__cap { padding: 8px 16px; border-radius: var(--vx-r-pill); font-size: 13px; font-weight: 500; opacity: 0; transition: opacity .3s .15s; }
.vxa-viewer.is-open .vxa-viewer__cap { opacity: 1; }
.vxa-viewer__nav, .vxa-viewer__close { position: absolute; z-index: 1; opacity: 0; transition: opacity .3s .1s, scale .35s var(--vx-spring), background .2s; }
.vxa-viewer.is-open .vxa-viewer__nav, .vxa-viewer.is-open .vxa-viewer__close { opacity: 1; }
.vxa-viewer__nav { top: 50%; translate: 0 -50%; width: 52px; height: 52px; }
.vxa-viewer__nav.is-prev { left: max(24px, env(safe-area-inset-left)); }
.vxa-viewer__nav.is-next { right: max(24px, env(safe-area-inset-right)); }
.vxa-viewer__close { top: max(22px, env(safe-area-inset-top)); right: max(22px, env(safe-area-inset-right)); }
.vxa-viewer.is-closing .vxa-viewer__bg, .vxa-viewer.is-closing .vxa-viewer__nav, .vxa-viewer.is-closing .vxa-viewer__close, .vxa-viewer.is-closing .vxa-viewer__cap { opacity: 0; transition-delay: 0s; }
.vxa-viewer.is-closing .vxa-viewer__img { transition: opacity .28s, transform .3s var(--vx-ease-out); opacity: 0; transform: scale(0.92); }

/* ---------- Workflow: animated timeline ---------- */
.vxa-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 66px; display: grid; gap: 16px; }
.vxa-steps__rail { position: absolute; left: 25px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.vxa-steps__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--tint), rgb(255 255 255 / 0.7)); transform-origin: top; transform: scaleY(0); }
.vxa-steps.is-play .vxa-steps__fill { animation: vxa-rail calc(var(--n) * 0.42s + 0.3s) cubic-bezier(.45, 0, .2, 1) 0.25s forwards; }
@keyframes vxa-rail { to { transform: scaleY(1); } }
@keyframes vxa-rail-x { to { transform: scaleX(1); } }
.vxa-step { position: relative; }
.vxa-step__node { position: absolute; left: -66px; top: 14px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(40 40 48 / 0.9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); color: var(--vx-label-2); transition: background .5s, color .5s, box-shadow .5s; }
.vxa-step__node .vx-ico { width: 22px; height: 22px; }
.vxa-steps.is-play .vxa-step__node { animation: vxa-node 0.7s var(--vx-spring-bouncy) both; animation-delay: calc(var(--k) * 0.42s + 0.3s); }
@keyframes vxa-node {
  0% { transform: scale(1); background: rgb(40 40 48 / 0.9); color: var(--vx-label-2); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--accent)) 85%, white), color-mix(in srgb, rgb(var(--accent)) 60%, black)); color: #fff; box-shadow: 0 0 0 6px rgb(var(--accent) / 0.18), 0 10px 26px -8px rgb(var(--accent) / 0.8); }
}
.vxa-step__card { padding: 20px 24px; border-radius: 24px; background: var(--vx-platter); }
.vxa-step__n { display: block; margin-bottom: 2px; font-family: var(--vx-mono); font-size: 12px; color: var(--vx-label-3); }
.vxa-step .vx-callout { margin: 4px 0 0; }
.vxa-landed { margin-top: 32px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--vx-hairline); }
.vxa-landed .vx-eyebrow { margin: 0 0 12px; }
.vxa-landed .vxa-outcomes { margin: 0; }
.vxa-panel.is-in .vxa-landed { animation-delay: calc(var(--k) * 0.42s + 0.5s); }

@container (min-width: 761px) {
  .vxa-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0; gap: 16px; }
  .vxa-steps__rail { left: 26px; right: calc((100% - (var(--n) - 1) * 16px) / var(--n) - 26px); top: 25px; bottom: auto; width: auto; height: 2px; }
  .vxa-steps__fill { transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--tint), rgb(255 255 255 / 0.7)); }
  .vxa-steps.is-play .vxa-steps__fill { animation-name: vxa-rail-x; }
  .vxa-step { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
  .vxa-step__node { position: relative; left: 0; top: 0; }
  .vxa-step__card { padding: 20px; height: 100%; }
  .vxa-step .vx-headline { font-size: 16px; }
  .vxa-step .vx-callout { font-size: 14px; }
}

/* ---------- AI ---------- */
.vxa-ai { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vxa-ai__card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: 32px; border-radius: 32px; background: var(--vx-platter); overflow: hidden; isolation: isolate; }
.vxa-ai__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--vxa-ang, 0deg), rgb(255 255 255 / 0.05), rgb(var(--accent) / 0.9), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.05) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vxa-spin 7s linear infinite; z-index: -1; }
@property --vxa-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes vxa-spin { to { --vxa-ang: 360deg; } }
.vxa-ai__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--accent)) 85%, white), color-mix(in srgb, rgb(var(--accent)) 55%, black)); box-shadow: 0 12px 30px -10px rgb(var(--accent) / 0.9); }
.vxa-ai__ico .vx-ico { width: 28px; height: 28px; }
.vxa-ai__card .vx-title2 { margin-bottom: 8px; }
.vxa-ai__spark { position: absolute; right: 22px; top: 20px; color: var(--vx-label-3); animation: vxa-twinkle 3.2s ease-in-out infinite; }
@keyframes vxa-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(18deg); } }

/* ---------- Stack ---------- */
.vxa-stack { display: grid; gap: 12px; align-content: start; }
.vxa-stack__row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; padding: 16px 24px; border-radius: 24px; background: var(--vx-platter); }
.vxa-stack__k { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-3); }
.vxa-stack__v { display: flex; flex-wrap: wrap; gap: 8px; }
.vxa-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px; border-radius: var(--vx-r-pill); background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: 14px; font-weight: 500; }
.vxa-panel.is-in .vxa-stack__row .vxa-pill { animation: vxa-pop .5s var(--vx-spring-bouncy) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); }
@keyframes vxa-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.vxa-stack__foot { margin: 16px 0 0; }

/* ---------- Ornament ---------- */
.vxa-orn { gap: 4px; }
.vxa-orn .vxa-orn__b { min-height: 44px; padding: 0 16px 0 13px; font-size: 14px; background: transparent; }
.vxa-orn .vxa-orn__b:hover { background: var(--vx-fill); }
.vxa-orn .vxa-orn__b.is-done { background: rgb(61 220 122 / 0.22); }
.vxa-orn__x { background: transparent; }
.vxa-orn__x:hover { background: var(--vx-fill); }
.vxa-orn__note { padding: 0 6px; }
.vxa-orn__app { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18); }
.vxa-orn .vx-ico, .vxa-vorn .vx-ico { width: 18px; height: 18px; }

/* ---------- Compact app window ---------- */
.vxa-cmp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; align-items: center; min-height: 500px; }
.vxa-win--compact .vxa-cf { --cw: 168px; height: 372px; }
.vxa-win--compact .vxa-panel[data-panel="screens"] .vxa-head { margin-bottom: 8px; }
.vxa-cmp .vxa-hero { margin-bottom: 18px; }
.vxa-cmp .vxa-title { font-size: 38px; }
.vxa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vxa-built-at { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; }
.vxa-built-at .vx-headline { font-size: 15px; }
.vxa-built-at .vx-caption { margin: 2px 0 0; }
.vxa-fan { position: relative; height: 420px; cursor: pointer; }
.vxa-fan__card { position: absolute; left: 50%; top: 50%; width: 170px; aspect-ratio: 1179 / 2556; border-radius: 26px; overflow: hidden; background: #0c0c10; box-shadow: 0 30px 50px -22px rgb(0 0 0 / 0.75), inset 0 0 0 1px rgb(255 255 255 / 0.14); transform: translate(-50%, -50%) translateX(calc(var(--f) * 92px)) translateY(calc(var(--f) * var(--f) * 14px)) rotate(calc(var(--f) * 9deg)); z-index: calc(10 - var(--f) * var(--f)); transition: transform .7s var(--vx-spring); }
.vxa-fan__card img { width: 100%; height: 100%; object-fit: cover; }
.vxa-fan:hover .vxa-fan__card { transform: translate(-50%, -50%) translateX(calc(var(--f) * 128px)) translateY(calc(var(--f) * var(--f) * 6px - 8px)) rotate(calc(var(--f) * 5deg)); }

/* ---------- Not found ---------- */
.vxa-404 { display: grid; justify-items: start; align-content: center; gap: 14px; min-height: 100%; }
.vxa-404__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--vx-fill); }
.vxa-404 .vx-body { margin: 0 0 6px; }

/* ---------- 3D phone volume ---------- */
.vx-window.vxa-volwin, .vx-window.vxa-volwin.vx-glass--flat { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.vx-window.vxa-volwin::before, .vx-window.vxa-volwin::after { display: none; }
.vx-window.vxa-volwin > .vx-window__body { padding: 0; overflow: visible; }
.vxa-vol { position: absolute; inset: 0; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; outline-offset: -4px; border-radius: 40px; perspective: 1100px; }
.vxa-vol.is-drag { cursor: grabbing; }
.vxa-vol__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--vx-ease-out); pointer-events: none; }
.vxa-vol.is-gl .vxa-vol__canvas { opacity: 1; }
.vxa-vol__shadow { position: absolute; left: 50%; bottom: 3%; width: 58%; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.18) 60%, transparent); filter: blur(4px); transform: translateX(-50%); opacity: 0.75; pointer-events: none; }
.vxa-cssphone { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; transition: opacity .5s var(--vx-ease-out); pointer-events: none; }
.vxa-vol.is-gl .vxa-cssphone { opacity: 0; }
.vxa-cssphone__body { position: relative; width: 62%; aspect-ratio: 0.487; border-radius: 16% / 7.6%; padding: 3.2%; background: linear-gradient(135deg, #d9d6cf, #8f8b84 40%, #c9c5bd 60%, #7c7872); box-shadow: 0 40px 60px -30px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.35); transform: rotateY(-20deg); will-change: transform; }
html.dark .vxa-cssphone__body { background: linear-gradient(135deg, #8b8883, #45433f 40%, #75726c 60%, #3b3936); }
.vxa-cssphone__body img { width: 100%; height: 100%; object-fit: cover; border-radius: 13% / 6.2%; background: #0b0b0f; box-shadow: 0 0 0 3px #040405; }
.vxa-cssphone__island { position: absolute; top: 5.6%; left: 50%; width: 28%; height: 3.4%; border-radius: 99px; background: #000; transform: translateX(-50%); }
.vxa-vol__hint { position: absolute; left: 50%; top: 2%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: var(--vx-r-pill); background: rgb(var(--vx-glass) / 0.62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 12px; font-weight: 600; color: var(--vx-label-1); transform: translateX(-50%); pointer-events: none; opacity: 0; animation: vxa-hint 5.5s 1.6s var(--vx-ease-out) both; }
.vxa-vol__hint .vx-ico { width: 15px; height: 15px; }
.vxa-vol.is-touched .vxa-vol__hint { animation: none; opacity: 0; transition: opacity .25s; }
@keyframes vxa-hint { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
.vxa-vorn { gap: 6px; padding: 6px 6px 6px 14px; }
.vxa-vdots { display: flex; }
.vxa-vdot { width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vxa-vdot::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgb(255 255 255 / 0.34); transition: width .45s var(--vx-spring), background .2s; }
.vxa-vdot[aria-selected="true"]::before { width: 18px; background: #fff; }
.vxa-vorn__b { background: transparent; }
.vxa-vorn__b:hover { background: var(--vx-fill); }

/* Inline 3D phone (phones: rides inside the sheet) */
.vxa-inline { position: relative; display: grid; justify-items: center; margin: -6px -20px 18px; }
.vxa-inline__stage { position: relative; width: 100%; height: min(460px, 62vh); }
.vxa-inline .vxa-vol { border-radius: 0; }
.vxa-vorn--inline { position: relative; display: flex; align-items: center; margin-top: -6px; padding: 0 8px; border-radius: var(--vx-r-pill); }

/* ---------- Responsive (container = the window body) ---------- */
@container (max-width: 760px) {
  .vxa-ov, .vxa-ov__bottom, .vxa-cmp { grid-template-columns: 1fr; }
  .vxa-title { font-size: 34px; }
  .vxa-cmp .vxa-title { font-size: 32px; }
  .vxa-fan { height: 330px; order: -1; }
  .vxa-fan__card { width: 132px; border-radius: 20px; }
  .vxa-stack__row { grid-template-columns: 1fr; gap: 10px; }
  .vxa-cf { --cw: 172px; height: 390px; }
}
@container (max-width: 520px) {
  .vxa-hero { grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; }
  .vxa-icon { width: 76px; height: 76px; }
  .vxa-icon__halo { inset: -24px; }
  .vxa-title, .vxa-cmp .vxa-title { font-size: 30px; }
  .vxa-tagline { font-size: 17px; }
  .vxa-summary { font-size: 16px; }
  .vxa-features { grid-template-columns: 1fr; }
  .vxa-feature { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 18px; }
  .vxa-feature__ico { grid-row: span 2; width: 42px; height: 42px; margin: 0; border-radius: 13px; }
  .vxa-feature__n { display: none; }
  .vxa-cf { --cw: 150px; height: 340px; }
  /* phones: arrows + dots fill the row, so the "App · 2 of 8" count takes its own line instead of spilling */
  .vxa-cf__bar { flex-wrap: wrap; row-gap: 0; }
  .vxa-cf__count { min-width: 0; flex: 1 0 100%; order: 3; }
  .vxa-ai__card { grid-template-columns: 1fr; padding: 22px; }
  .vxa-steps { padding-left: 58px; }
  .vxa-step__node { left: -58px; width: 44px; height: 44px; }
  .vxa-steps__rail { left: 21px; }
  .vxa-head .vx-title1 { font-size: 25px; }
  .vxa-facts__k { min-width: 64px; }
}
@media (max-width: 600px) {
  .vxa-viewer__nav { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); translate: none; }
  .vxa-viewer__img { max-height: 74vh; border-radius: 30px; }
}

/* ---------- Reduced motion: no ambient loops, content fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .vxa-icon__img, .vxa-icon__halo, .vxa-status i, .vxa-ai__card::before, .vxa-ai__spark { animation: none !important; }
  .vxa-panel.is-in [data-st], .vxa-panel.is-in .vxa-stars svg, .vxa-panel.is-in .vxa-stack__row .vxa-pill { animation: none !important; }
  .vxa-steps__fill { transform: none !important; }
  .vxa-steps .vxa-step__node { animation: none !important; background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--accent)) 85%, white), color-mix(in srgb, rgb(var(--accent)) 60%, black)); color: #fff; }
  .vxa-vol__hint { animation: none; opacity: 1; }
}

/* Ornament collapses to icons on narrow screens */
@media (max-width: 600px) {
  .vxa-orn .vxa-orn__b { width: 44px; padding: 0; }
  .vxa-orn .vxa-orn__b span { display: none; }
  .vxa-orn .vxa-orn__note { display: none; }
}

/* ============================================================
   Panels that had no styles yet: architecture, clips, Version 2,
   catalog, FunkyMelon illustration, CSS MacBook fallback
   ============================================================ */
.vxa-arch { margin-top: 40px; }
.vxa-arch__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vxa-arch__row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px 24px; border-radius: 24px; background: var(--vx-platter); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
.vxa-arch__row .vx-callout { margin: 4px 0 0; }

.vxa-clip { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #0c0c10; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.vxa-clip__poster, .vxa-clip__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.vxa-clip__v { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--vx-ease-out); }
.vxa-clip.is-live .vxa-clip__v { opacity: 1; }
.vxa-ai__card.has-clip { grid-template-columns: 148px 1fr; }
.vxa-ai__clip { width: 148px; aspect-ratio: 1; }
.vxa-ai__cap { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.vxa-ai__cap .vx-ico { width: 14px; height: 14px; }

.vxa-v2chip { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; min-height: 48px; padding: 6px 16px 6px 8px; border: 0; border-radius: var(--vx-r-pill); background: var(--vx-platter); color: var(--vx-label-1); font: 600 15px/1.2 var(--vx-font); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: background .25s, scale .4s var(--vx-spring); }
.vxa-v2chip:hover { background: var(--vx-platter-hi); }
.vxa-v2chip:active { scale: .97; }
.vxa-v2chip .vx-ico { width: 16px; height: 16px; color: var(--vx-label-3); }
.vxa-v2__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vxa-v2__lead { max-width: 64ch; margin: -6px 0 22px; font-size: 18px; line-height: 1.6; color: var(--vx-label-2); text-wrap: pretty; }
.vxa-v2__rail { display: flex; gap: 16px; margin: 0 calc(-1 * var(--vxw-px, 44px)) 26px; padding: 6px var(--vxw-px, 44px) 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.vxa-v2__rail::-webkit-scrollbar { display: none; }
.vxa-v2__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.vxa-v2__ph { flex: none; margin: 0; display: grid; gap: 10px; justify-items: center; scroll-snap-align: start; }
.vxa-v2__scr { display: block; width: 176px; aspect-ratio: 600 / 1305; padding: 0; border: 0; border-radius: 26px; overflow: hidden; background: #0c0c10; cursor: pointer; box-shadow: 0 24px 40px -22px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.14); transition: translate .45s var(--vx-spring), box-shadow .3s; }
.vxa-v2__scr:hover { translate: 0 -4px; }
.vxa-v2__scr img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vxa-v2__ph.is-video .vxa-v2__scr { cursor: default; }
.vxa-v2__ph.is-video .vxa-clip { width: 100%; height: 100%; border-radius: inherit; }
.vxa-v2__ph figcaption { max-width: 176px; font-size: 13px; line-height: 1.35; color: var(--vx-label-2); text-align: center; }
.vxa-features--v2 { margin-bottom: 18px; }
.vxa-v2__note { display: flex; align-items: center; gap: 8px; margin: 0; }
.vxa-v2__note .vx-ico { width: 15px; height: 15px; }

.vxa-cat__sub { margin: 8px 0 0; max-width: 60ch; }
.vxa-cat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.vxa-cat > li { display: flex; }
.vxa-cat__b { display: grid; align-content: start; gap: 4px; width: 100%; padding: 12px 12px 16px; border: 0; border-radius: 24px; background: var(--vx-platter); color: var(--vx-label-1); text-align: left; cursor: pointer; transition: background .25s, translate .45s var(--vx-spring); }
.vxa-cat__b:hover { background: var(--vx-platter-hi); translate: 0 -3px; }
.vxa-cat__b img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; object-fit: cover; margin-bottom: 8px; } /* height: auto, or the HTML height=256 wins over aspect-ratio and the art is cropped tall */
.vxa-cat__t { font-size: 14px; font-weight: 600; padding: 0 4px; }
.vxa-cat__s { font-size: 12px; color: var(--vx-label-3); padding: 0 4px; }

.vxa-fm__frame { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #1C1B1B; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8), inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.vxa-fm__cv { display: block; width: 100%; height: 100%; }
.vxa-fm--mini, .vxa-fm--mini .vxa-fm__frame { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.vxa-fm__bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.vxa-fm__pp { flex: none; }
.vxa-fm__steps { list-style: none; margin: 0; padding: 4px; display: flex; gap: 4px; flex-wrap: wrap; border-radius: var(--vx-r-pill); background: rgb(0 0 0 / 0.2); }
.vxa-fm__steps button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--vx-r-pill); background: transparent; color: var(--vx-label-2); font: 600 13px/1 var(--vx-font); cursor: pointer; transition: background .25s, color .2s; }
.vxa-fm__steps button[aria-current="step"] { background: rgb(255 255 255 / 0.92); color: rgb(18 18 22); }
.vxa-fm__cap { min-height: 24px; margin: 12px 0 2px; font-size: 16px; color: var(--vx-label-1); }
.vxa-fm__note { margin: 0; }

.vxa-cssmac { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; transform-style: preserve-3d; pointer-events: none; transition: opacity .5s var(--vx-ease-out); }
.vxa-vol.is-gl .vxa-cssmac { opacity: 0; }
.vxa-cssmac__lid { width: 74%; aspect-ratio: 1.6; padding: 2.2%; border-radius: 12px 12px 4px 4px; background: #0b0b0e; box-shadow: 0 0 0 2px #b9bbc0, 0 30px 50px -30px rgb(0 0 0 / 0.7); }
.vxa-cssmac__scr { display: block; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #111; }
.vxa-cssmac__scr img, .vxa-cssmac__cv { display: block; width: 100%; height: 100%; object-fit: cover; }
.vxa-cssmac__base { width: 86%; height: 12px; margin-top: -1px; border-radius: 0 0 14px 14px; background: linear-gradient(#d4d5d9, #9fa1a6); }
.vxa-vol--mac .vxa-vol__shadow { width: 76%; bottom: 8%; }
.vxa-inline--mac .vxa-inline__stage { height: min(400px, 52vh); }

/* ============================================================
   Work window · App Library with an in-window navigation stack
   ============================================================ */
.vx-window.vxw-win > .vx-window__body { padding: 0; overflow: hidden; }
.vxw { --vxw-px: 40px; --vxw-top: 32px; --vxw-bottom: 48px; position: relative; height: 100%; min-height: 420px; container-type: inline-size; }
.vxw-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vxw-page[hidden] { display: none; }
.vxw-top, .vxw-head { flex: none; position: relative; z-index: 3; padding: 0 var(--vxw-px); }
.vxw-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden auto; padding: 0 var(--vxw-px) var(--vxw-bottom); scrollbar-width: none; overscroll-behavior: contain; border-radius: 0 0 var(--vx-r-window) var(--vx-r-window); }
/* content fades under the static header instead of sliding beneath a bar */
.vxw-lib.is-scrolled .vxw-scroll, .vxw-detail.is-scrolled .vxw-scroll { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.vxw-scroll::-webkit-scrollbar { display: none; }
.vxw .vxa-cf { margin: 0 calc(-1 * var(--vxw-px)); }

/* ---------- Library header ---------- */
.vxw-lib__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: var(--vxw-top); margin-bottom: 24px; flex-wrap: wrap; transition: padding .45s var(--vx-spring-smooth), margin .45s var(--vx-spring-smooth); }
.vxw-lib__title { margin: 0; font-size: 48px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; transform-origin: 0 100%; transition: font-size .45s var(--vx-spring-smooth); }
.vxw-lib__sub { margin: 8px 0 0; max-width: 46ch; max-height: 3em; overflow: hidden; font-size: 17px; line-height: 1.45; color: var(--vx-label-2); transition: max-height .45s var(--vx-spring-smooth), opacity .3s, margin .45s var(--vx-spring-smooth); }
.vxw-lib.is-scrolled .vxw-lib__head { padding-top: calc(var(--vxw-top) * 0.6); margin-bottom: 12px; }
.vxw-lib.is-scrolled .vxw-lib__title { font-size: 32px; }
.vxw-lib.is-scrolled .vxw-lib__sub { max-height: 0; opacity: 0; margin-top: 0; }
.vxw-search { position: relative; flex: 0 1 340px; min-width: 240px; display: flex; align-items: center; height: 46px; border-radius: var(--vx-r-pill); background: rgb(0 0 0 / 0.22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 2px rgb(0 0 0 / 0.2); transition: box-shadow .25s, background .25s; }
.vxw-search:focus-within { background: rgb(0 0 0 / 0.3); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55), 0 0 0 5px rgb(255 255 255 / 0.1); }
.vxw-search__ico { position: absolute; left: 16px; display: grid; color: var(--vx-label-3); pointer-events: none; }
.vxw-search__ico .vx-ico { width: 18px; height: 18px; }
.vxw-search__in { flex: 1; min-width: 0; height: 100%; padding: 0 44px 0 44px; border: 0; background: none; color: var(--vx-label-1); font: 500 16px/1 var(--vx-font); outline: none; -webkit-appearance: none; appearance: none; }
.vxw-search__in::placeholder { color: var(--vx-label-3); }
.vxw-search__in::-webkit-search-cancel-button { display: none; }
.vxw-search__kbd { position: absolute; right: 14px; pointer-events: none; }
.vxw-search__x { position: absolute; right: 6px; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--vx-fill); color: var(--vx-label-1); cursor: pointer; }
.vxw-search__x .vx-ico { width: 14px; height: 14px; }
.vxw-search__x[hidden], .vxw-search__kbd[hidden] { display: none; }

.vxw-chipbar { padding: 0 0 16px; }
.vxw-chips { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.vxw-chips::-webkit-scrollbar { display: none; }
.vxw-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--vx-r-pill); background: var(--vx-fill); color: var(--vx-label-1); font: 600 14px/1 var(--vx-font); cursor: pointer; box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.14); transition: background .25s, color .2s, scale .4s var(--vx-spring); }
.vxw-chip .vx-ico { width: 16px; height: 16px; opacity: 0.85; }
.vxw-chip:hover { background: var(--vx-fill-hi); }
.vxw-chip:active { scale: .95; }
.vxw-chip[aria-pressed="true"] { background: rgb(255 255 255 / 0.94); color: rgb(18 18 22); box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.5); }
.vxw-notice { margin: 4px 0 14px; padding: 12px 16px; border-radius: 16px; background: rgb(255 204 61 / 0.14); color: var(--vx-label-1); font-size: 14px; }
.vxw-notice[hidden] { display: none; }

.vxw-sec__title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.vxw-featured { margin: 8px 0 40px; }
.vxw-featured[hidden], .vxw-group[hidden], .vxw-cell[hidden], .vxw-empty[hidden] { display: none; }
.vxw-featured .vxw-sec__title { margin-bottom: 16px; }
.vxw-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vxw-feat { position: relative; display: grid; grid-template-rows: 150px auto 1fr; width: 100%; height: 100%; min-height: 272px; padding: 0 0 20px; border: 0; border-radius: 30px; overflow: hidden; isolation: isolate; color: var(--vx-label-1); text-align: left; cursor: pointer;
  background: radial-gradient(130% 90% at 50% 0%, rgb(var(--accent) / 0.42), rgb(var(--accent) / 0.08) 62%, transparent 80%), rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.16); transition: translate .5s var(--vx-spring), box-shadow .3s, background .3s; }
.vxw-feat:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 22px 40px -26px rgb(0 0 0 / 0.7); }
.vxw-feat:active { scale: .985; }
.vxw-feat__art { position: relative; overflow: hidden; }
.vxw-feat__art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(transparent, rgb(0 0 0 / 0.18)); pointer-events: none; }
.vxw-feat__ph { position: absolute; top: 22px; left: 50%; width: 88px; aspect-ratio: 1179 / 2556; border-radius: 15px; object-fit: cover; object-position: top; background: #0c0c10; box-shadow: 0 18px 30px -14px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.16); transition: transform .7s var(--vx-spring); }
.vxw-feat__ph.is-0 { transform: translateX(-86%) rotate(-7deg); z-index: 2; }
.vxw-feat__ph.is-1 { transform: translateX(-14%) translateY(12px) rotate(6deg); }
.vxw-feat:hover .vxw-feat__ph.is-0 { transform: translateX(-94%) translateY(-6px) rotate(-9deg); }
.vxw-feat:hover .vxw-feat__ph.is-1 { transform: translateX(-6%) translateY(4px) rotate(8deg); }
.vxw-feat__text { display: flex; align-items: flex-start; gap: 12px; min-height: 88px; padding: 16px 20px 8px; }
.vxw-feat__icon { position: relative; flex: none; width: 48px; height: 48px; }
.vxw-feat__icon > img, .vxw-tile__icon > img { width: 100%; height: 100%; border-radius: 23%; object-fit: cover; box-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.vxw-feat__names { display: grid; min-width: 0; padding-top: 3px; } /* top aligned with the icon, so every featured name starts on one line across the row */
.vxw-feat__names b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.vxw-feat__names small { font-size: 13px; color: var(--vx-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxw-feat__line { padding: 0 20px; font-size: 14px; line-height: 1.45; color: var(--vx-label-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* dual icons (a case study covering two apps) */
.vxw-dual { position: relative; display: block; width: 100%; height: 100%; }
.vxw-dual img { position: absolute; width: 70%; height: 70%; border-radius: 23%; object-fit: cover; box-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.14); }
.vxw-dual img:first-child { left: 0; top: 0; }
.vxw-dual img:last-child { right: 0; bottom: 0; box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.8), 0 0 0 2px rgb(30 30 36 / 0.9); }

/* ---------- Groups and tiles ---------- */
.vxw-group { margin: 0 0 40px; }
.vxw-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.vxw-group__blurb { margin: 0; font-size: 14px; color: var(--vx-label-3); }
.vxw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vxw-cell { display: flex; }
.vxw-tile { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 16px; align-items: start; width: 100%; min-height: 144px; padding: 20px 20px 16px; border: 0; border-radius: 24px; background: var(--vx-platter); color: var(--vx-label-1); text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); transition: background .25s, translate .45s var(--vx-spring), scale .45s var(--vx-spring), box-shadow .3s; }
.vxw-tile:hover { background: var(--vx-platter-hi); translate: 0 -2px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 16px 32px -22px rgb(0 0 0 / 0.65); }
.vxw-tile:active { scale: .98; translate: 0 0; transition-duration: .12s; }
.vxw-tile__icon { position: relative; width: 64px; height: 64px; transition: scale .5s var(--vx-spring); }
.vxw-tile:hover .vxw-tile__icon { scale: 1.05; }
.vxw-tile__icon .vxa-icon__glyph, .vxw-feat__icon .vxa-icon__glyph { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23%; background: linear-gradient(160deg, #56565e, #2c2c33); }
.vxw-tile__text { display: grid; gap: 2px; min-width: 0; }
.vxw-tile__name { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.vxw-tile__sub { font-size: 13px; color: var(--vx-label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxw-tile__line { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--vx-label-2); text-wrap: pretty; } /* never clamped: a row of tiles shares its height, so the full line always shows */
.vxw-tile__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 13px; color: var(--vx-label-2); white-space: nowrap; }
.vxw-dot { flex: none; }
.vxw-tile__plat { min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.3; color: var(--vx-label-3); } /* wraps ("macOS · Windows") instead of cutting to an ellipsis in narrow tiles */
.vxw-tile__case { flex: none; margin-left: auto; padding: 4px 10px; border-radius: var(--vx-r-pill); background: rgb(255 255 255 / 0.1); font-size: 12px; font-weight: 600; color: var(--vx-label-1); }
.vxw-tile__chev { align-self: center; display: grid; color: var(--vx-label-3); transition: translate .4s var(--vx-spring), color .2s; }
.vxw-tile__chev .vx-ico { width: 16px; height: 16px; }
.vxw-tile:hover .vxw-tile__chev { translate: 3px 0; color: var(--vx-label-1); }
.vxw-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vxw-dot i { width: 7px; height: 7px; border-radius: 50%; background: #9a9aa2; }
.vxw-dot.is-live i { background: #3ddc7a; } .vxw-dot.is-beta i { background: #ffcc3d; } .vxw-dot.is-internal i { background: #64d2ff; } .vxw-dot.is-oss i { background: #c9a2ff; }
.vxa-status.is-internal i { background: #64d2ff; } .vxa-status.is-oss i { background: #c9a2ff; }
.vxw-empty { display: grid; justify-items: center; gap: 8px; padding: 60px 20px; text-align: center; }
.vxw-empty__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--vx-fill); margin-bottom: 6px; }
.vxw-empty__ico .vx-ico { width: 26px; height: 26px; }
.vxw-empty .vx-body { margin: 0 0 8px; }
.vxw-lib.is-in [data-st] { animation: vxa-in 0.7s var(--vx-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
.vxw-lib.is-in .vxw-cell { animation: vxa-in 0.6s var(--vx-ease-out) both; animation-delay: 220ms; }

/* ---------- Detail: sticky bar + segmented tabs ---------- */
.vxw-head { padding-top: 24px; padding-bottom: 8px; }
.vxw-bar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; }
.vxw-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 18px 0 10px; border: 0; border-radius: var(--vx-r-pill); background: var(--vx-fill); color: var(--vx-label-1); font: 600 15px/1 var(--vx-font); cursor: pointer; box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.16); transition: background .25s, scale .4s var(--vx-spring); }
.vxw-back:hover { background: var(--vx-fill-hi); }
.vxw-back:active { scale: .94; }
.vxw-back .vx-ico { width: 20px; height: 20px; transition: translate .35s var(--vx-spring); }
.vxw-back:hover .vx-ico { translate: -2px 0; }
/* The compact title sits in the flow between Back and the actions (never under them) and wraps to a
   second line instead of an ellipsis when a long name ("GlobeOne & Globe Benta") meets a narrow bar. */
.vxw-bar__title { flex: 1 1 0; min-width: 0; text-align: center; font-size: 17px; line-height: 1.15; font-weight: 650; text-wrap: balance; overflow-wrap: anywhere; opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .3s, translate .45s var(--vx-spring); }
.vxw-detail.is-titled .vxw-bar__title { opacity: 1; translate: 0 0; }
@container (max-width: 560px) { .vxw-bar__title { font-size: 15px; } }
.vxw-bar__acts { margin-left: auto; display: flex; gap: 8px; }
.vxw-act { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; border: 0; border-radius: var(--vx-r-pill); background: transparent; color: var(--vx-label-1); font: 500 14px/1 var(--vx-font); cursor: pointer; white-space: nowrap; transition: background .25s, scale .4s var(--vx-spring); }
.vxw-act:hover { background: var(--vx-fill); }
.vxw-act:active { scale: .95; }
.vxw-act.is-done { background: rgb(61 220 122 / 0.22); }
.vxw-act .vx-ico { width: 18px; height: 18px; }
.vxw-tabs { position: relative; display: flex; width: max-content; max-width: 100%; margin-top: 16px; padding: 4px; gap: 4px; border-radius: var(--vx-r-pill); background: rgb(0 0 0 / 0.22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); overflow-x: auto; scrollbar-width: none; }
.vxw-tabs::-webkit-scrollbar { display: none; }
.vxw-tabs__ind { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: var(--vx-r-pill); background: rgb(255 255 255 / 0.94); box-shadow: 0 4px 14px -6px rgb(0 0 0 / 0.5); transition: transform .55s var(--vx-spring), width .55s var(--vx-spring); pointer-events: none; }
.vxw-tab { position: relative; z-index: 1; flex: none; min-height: 38px; padding: 0 17px; border: 0; border-radius: var(--vx-r-pill); background: transparent; color: var(--vx-label-2); font: 600 14.5px/1 var(--vx-font); cursor: pointer; transition: color .3s; }
.vxw-tab:hover { color: var(--vx-label-1); }
.vxw-tab[aria-selected="true"] { color: rgb(18 18 22); }
.vxw-tab:focus-visible { outline-offset: -2px; }
.vxw-panels { padding-top: 32px; }
.vxw-panels .vxa-panel:focus { outline: none; }

/* ---------- Detail: hero with the stage ---------- */
.vxw-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 40px; align-items: center; min-height: 500px; margin-bottom: 32px; }
.vxw-detail.stage-mac .vxw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 440px; }
.vxw-detail.stage-canvas .vxw-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.vxw-detail.stage-icon .vxw-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); min-height: 380px; }
.vxw-detail.is-side .vxw-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.vxw-hero__stage { position: relative; height: min(520px, 58vh); }
.vxw-hero__stage[hidden] { display: none; }
.vxw-detail.stage-mac .vxw-hero__stage { height: 420px; }
.vxw-detail.stage-canvas .vxw-hero__stage, .vxw-detail.stage-icon .vxw-hero__stage { height: auto; }
.vxw-stage { position: relative; height: 100%; }
.vxw-stage .vxa-inline { height: 100%; margin: 0; display: grid; grid-template-rows: 1fr auto; justify-items: center; }
.vxw-stage .vxa-inline__stage { height: 100%; min-height: 0; }
.vxw-stage .vxa-vorn--inline { margin-top: 4px; min-height: 44px; }
.vxw .vxa-hero { margin-bottom: 24px; gap: 24px; }
.vxw .vxa-icon { width: 96px; height: 96px; }
.vxw .vxa-icon.is-dual .vxa-icon__img { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.vxw .vxa-icon.is-dual .vxa-icon__img::after { display: none; } /* the single icon sheen would paint a square behind the two rounded icons */
.vxw .vxa-title { font-size: min(52px, 5cqi); line-height: 1.04; letter-spacing: -0.032em; } /* scales with the window so one long word ("Smashburger") never spills out of the title column */
.vxw .vxa-title:focus { outline: none; }
.vxw .vxa-title:focus-visible { outline: 2.5px solid rgb(255 255 255 / 0.9); outline-offset: 6px; border-radius: 10px; }
.vxw .vxa-tagline { font-size: 22px; line-height: 1.3; }
.vxw .vxa-summary { font-size: 18.5px; line-height: 1.6; max-width: 62ch; }
.vxw .vxa-members { margin-top: 24px; }

/* tiles below the hero */
.vxw-facts { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.vxw-fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px 20px; border-radius: 24px; background: var(--vx-platter); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); min-height: 88px; }
.vxw-fact__ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(var(--accent) / 0.2); color: var(--tint, #fff); }
.vxw-fact__ico .vx-ico { width: 18px; height: 18px; }
.vxw-fact__k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-3); align-self: end; }
.vxw-fact__v { min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; align-self: start; overflow-wrap: anywhere; }
.vxw-nums { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.vxw-num { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 24px; background: var(--vx-platter); }
.vxw-num b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.vxw-num span { font-size: 14px; color: var(--vx-label-2); }
.vxw-block { margin: 0 0 40px; }
.vxw-block > .vx-eyebrow { margin: 0 0 16px; }
.vxw-outs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.vxw-out { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 16px 20px; border-radius: 24px; background: var(--vx-platter); font-size: 15px; font-weight: 500; line-height: 1.35; }
.vxw-out .vx-ico { width: 22px; height: 22px; flex: none; color: var(--tint); }
.vxw-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.vxw-duo.is-solo { grid-template-columns: 1fr; }
.vxw-duo .vxa-brief { margin: 0; }
.vxw-duo .vxa-mini { height: 100%; min-height: 240px; }
.vxw-note { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.vxw-note .vx-ico { width: 15px; height: 15px; flex: none; }
.vxa-features--hl { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* feature icon drawn from the app's own SVG glyph */
.vxw-art { position: relative; }
.vxw-art::before { content: ""; width: 24px; height: 24px; background: #fff; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }

/* mini card with three real crops (Hestior) */
.vxw-minicard { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 240px; padding: 0; border: 0; border-radius: var(--vx-r-card); overflow: hidden; background: var(--vx-platter); color: var(--vx-label-1); text-align: left; cursor: pointer; transition: background .25s, translate .45s var(--vx-spring); }
.vxw-minicard:hover { background: var(--vx-platter-hi); translate: 0 -2px; }
.vxw-minicard__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 16px 0; }
.vxw-minicard__shots img { width: 100%; height: 150px; object-fit: cover; border-radius: 16px 16px 0 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.vxw-minicard__cta { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px 8px 10px; background: rgb(0 0 0 / 0.16); box-shadow: inset 0 1px 0 var(--vx-hairline); }
.vxw-minicard__cta b { display: block; font-size: 15px; font-weight: 600; }
.vxw-minicard__cta small { display: block; font-size: 12px; color: var(--vx-label-3); }
.vxw-minicard__canvas { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; overflow: hidden; }
.vxw-minicard__canvas .vxw-flow { width: 100%; }

/* big icon stage (no screens on record) */
.vxw-bigicon { position: relative; display: grid; place-items: center; height: 300px; }
.vxw-bigicon__halo { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent) / 0.5), rgb(var(--accent) / 0.1) 60%, transparent); filter: blur(12px); animation: vxa-halo 7s ease-in-out infinite; }
.vxw-bigicon__img { position: relative; width: 176px; height: 176px; animation: vxa-float 8s ease-in-out infinite; }
.vxw-bigicon__img > img { width: 100%; height: 100%; border-radius: 23%; object-fit: cover; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.75), inset 0 0 0 1px rgb(255 255 255 / 0.14); }

/* ---------- Workflow canvas (n8n / Flowise spirit) ---------- */
.vxw-flowhost { position: relative; }
.vxw-flow { position: relative; padding: 30px; border-radius: 28px; background-color: rgb(0 0 0 / 0.16); background-image: radial-gradient(rgb(255 255 255 / 0.11) 1px, transparent 1.4px); background-size: 20px 20px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.vxw-flow__wires { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.vxw-wire { fill: none; stroke: rgb(255 255 255 / 0.2); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.vxw-wire__lit { fill: none; stroke: color-mix(in srgb, rgb(var(--accent)) 50%, white); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(var(--accent) / 0.9)); }
.vxw-flow__nodes { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 64px; }
.vxw-node { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 20px; background: rgb(34 34 42 / 0.92); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 30px -20px rgb(0 0 0 / 0.8); transition: box-shadow .5s, translate .6s var(--vx-spring), background .4s; }
.vxw-node.is-on { box-shadow: inset 0 0 0 1px rgb(var(--accent) / 0.55), 0 16px 30px -20px rgb(0 0 0 / 0.8); }
.vxw-node.is-hot { translate: 0 -3px; background: rgb(44 44 54 / 0.96); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, rgb(var(--accent)) 70%, white), 0 0 0 6px rgb(var(--accent) / 0.16), 0 20px 40px -18px rgb(var(--accent) / 0.6); }
.vxw-node__logos { display: flex; flex: none; }
.vxw-node__logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6); color: #222; font-size: 14px; }
.vxw-node__logo + .vxw-node__logo { margin-left: -10px; box-shadow: 0 0 0 2px rgb(34 34 42), 0 6px 14px -8px rgb(0 0 0 / 0.6); }
.vxw-node__logo .vxw-logo { width: 26px; height: 26px; object-fit: contain; }
.vxw-node__glyph { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, rgb(var(--accent)) 85%, white), color-mix(in srgb, rgb(var(--accent)) 55%, black)); box-shadow: 0 8px 18px -10px rgb(var(--accent) / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.vxw-node__glyph .vx-ico { width: 22px; height: 22px; }
.vxw-node__t { display: grid; gap: 3px; min-width: 0; }
.vxw-node__t b { font-size: 15.5px; font-weight: 650; line-height: 1.25; }
.vxw-node__t small { font-size: 13px; line-height: 1.4; color: var(--vx-label-2); }
.vxw-node__n { position: absolute; top: 8px; right: 12px; font: 500 11px/1 var(--vx-mono); color: var(--vx-label-3); }
.vxw-flow.is-mini { padding: 18px; border-radius: 24px; }
.vxw-flow.is-mini .vxw-flow__nodes { gap: 18px 40px; }
.vxw-flow.is-mini .vxw-node { min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 16px; }
.vxw-flow.is-mini .vxw-node__logo, .vxw-flow.is-mini .vxw-node__glyph { width: 38px; height: 38px; border-radius: 11px; }
.vxw-flow.is-mini .vxw-node__logo .vxw-logo { width: 22px; height: 22px; }
.vxw-flow.is-mini .vxw-node__t b { font-size: 14px; }
.vxw-stagecanvas { padding: 6px 0; }

/* ---------- Hestior: photo, style, render ---------- */
.vxw-hsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.vxw-hstep { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 16px; padding: 16px 16px 24px; border-radius: 28px; background: var(--vx-platter); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); }
.vxw-hstep:not(:last-child)::after { content: ""; position: absolute; top: 34%; right: -17px; width: 12px; height: 12px; border-top: 2px solid var(--vx-label-3); border-right: 2px solid var(--vx-label-3); transform: rotate(45deg); }
.vxw-hstep__shot { display: block; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in; background: #f5f1ea; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.vxw-hstep__shot img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .8s var(--vx-spring); }
.vxw-hstep__shot:hover img { transform: scale(1.03); }
.vxw-hstep__n { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--vx-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tint); }
.vxw-hstep__n .vx-ico { width: 15px; height: 15px; }
.vxw-hstep .vx-title2 { margin: 8px 0 6px; }
.vxw-hstep .vx-callout { margin: 0; }
.vxw-hstep__t { padding: 0 8px; }
.vxa-panel.is-in .vxw-hstep { animation: vxw-glow 6s ease-in-out infinite; animation-delay: calc(var(--k) * 2s + 1s); }
@keyframes vxw-glow { 0%, 30%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); } 12% { box-shadow: inset 0 0 0 1.5px rgb(var(--accent) / 0.8), 0 0 0 6px rgb(var(--accent) / 0.12); } }

/* ---------- Gallery (web and desktop) ---------- */
.vxw-gal__stage { display: grid; place-items: center; min-height: 300px; }
.vxw-frame { max-width: 100%; border-radius: 16px; overflow: hidden; background: #111114; box-shadow: 0 40px 70px -34px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.14); }
.vxw-frame__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: linear-gradient(#2d2d33, #232328); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.4); }
.vxw-frame__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .vxw-frame__bar i:nth-child(2) { background: #febc2e; } .vxw-frame__bar i:nth-child(3) { background: #28c840; }
.vxw-frame__bar span { flex: 1; min-width: 0; margin-right: 44px; text-align: center; font-size: 12px; color: rgb(255 255 255 / 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxw-frame__body img, .vxw-frame__body video { display: block; width: 100%; height: auto; }
/* a landscape frame is sized so it, its caption and the thumbnails fit the window's height together */
.vxw-frame[style*="--ar"] { width: min(100%, max(420px, calc((var(--avail, 640px) - 244px) * var(--ar)))); }
/* wide windows: the thumbnails stand in a column beside the frame, so the frame can be as tall as the window allows */
@container (min-width: 901px) {
  .vxw-gal.has-thumbs { display: grid; grid-template-columns: auto 132px; grid-template-rows: auto auto; justify-content: center; align-items: start; column-gap: 24px; }
  .vxw-gal.has-thumbs .vxw-gal__stage { grid-column: 1; grid-row: 1; min-height: 0; }
  .vxw-gal.has-thumbs .vxw-gal__cap { grid-column: 1; grid-row: 2; }
  .vxw-gal.has-thumbs .vxw-gal__thumbs { grid-column: 2; grid-row: 1 / 3; flex-direction: column; margin: 0; padding: 4px; max-height: max(240px, calc(var(--avail, 640px) - 120px)); overflow: hidden auto; }
  .vxw-gal.has-thumbs .vxw-gal__t { margin: 0 !important; width: 124px; }
  .vxw-gal.has-thumbs .vxw-frame[style*="--ar"] { width: min(calc(100cqw - 2 * var(--vxw-px) - 156px), max(420px, calc((var(--avail, 640px) - 190px) * var(--ar)))); }
}
.vxw-frame.is-tall { max-height: 540px; }
.vxw-frame.is-tall .vxw-frame__body img { width: auto; max-height: 540px; }
.vxw-frame--plain { border-radius: 24px; }
.vxw-gal__zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.vxw-gal__cap { text-align: center; margin: 14px 0 0; min-height: 18px; }
.vxw-gal__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.vxw-gal__t { position: relative; flex: none; width: 124px; height: 76px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; opacity: 0.6; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); transition: opacity .25s, translate .4s var(--vx-spring), box-shadow .25s; }
.vxw-gal__t:hover { opacity: 0.9; translate: 0 -2px; }
.vxw-gal__t[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.vxw-gal__t img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vxw-gal__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.3); }
.vxw-gal__play .vx-ico { width: 20px; height: 20px; }

/* real UI from the app (Rocky's state pills and permission bubble) */
/* the panel wears the app's own stage colour, so the real captures sit on it seamlessly */
.vxw-realui { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; border-radius: 28px; background: #19130c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.vxw-pills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; justify-items: center; }
.vxw-pills li { width: 100%; max-width: 260px; }
/* each capture is cropped to its pill (and its glow); the stray leg shadow above it stays out */
.vxw-pill-crop { position: relative; display: block; width: 100%; aspect-ratio: 232 / 49; overflow: hidden; }
.vxw-pill-crop { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(transparent 0, #000 24%, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(transparent 0, #000 24%, #000 76%, transparent 100%); mask-composite: intersect; }
.vxw-pill-crop img { position: absolute; left: -27.6%; top: -44.9%; width: 155.2%; max-width: none; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.vxw-still { margin: 0; display: grid; gap: 8px; justify-items: center; }
.vxw-still img { width: 100%; max-width: 240px; border-radius: 14px; }

/* stack pills with real logos */
.vxa-pill.has-logo { gap: 8px; padding-left: 8px; }
.vxa-pill .vxw-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }

/* ---------- The volume beside the window (when there is room) ---------- */
.vxw-side { position: absolute; left: calc(100% + 24px); top: 50%; width: 300px; height: min(660px, 96%); translate: 0 -50%; opacity: 0; scale: 0.92; pointer-events: none; transition: opacity .5s var(--vx-ease-out), scale .7s var(--vx-spring); }
.vxw-side.is-on { opacity: 1; scale: 1; pointer-events: auto; }
.vxw-side .vxw-stage { height: 100%; }

/* ---------- Responsive (container = the Work window) ---------- */
@container (max-width: 1060px) {
  .vxw-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vxw-feat { grid-template-rows: 130px auto 1fr; min-height: 236px; }
}
@container (max-width: 900px) {
  /* .vxw is the container itself, so the padding token is set on its pages (a container query never styles its own container) */
  .vxw > * { --vxw-px: 32px; }
  .vxw-hero, .vxw-detail.stage-mac .vxw-hero, .vxw-detail.stage-canvas .vxw-hero, .vxw-detail.stage-icon .vxw-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 18px; }
  .vxw-hero__stage { height: min(520px, 70vh); order: 2; }
  .vxw-detail.stage-mac .vxw-hero__stage { height: min(360px, 50vh); }
  .vxw-detail.stage-icon .vxw-hero__stage { height: auto; }
  .vxw-bigicon { height: 220px; }
  .vxw .vxa-title { font-size: 42px; }
  .vxw-duo { grid-template-columns: 1fr; }
  .vxw-hsteps { grid-template-columns: 1fr; gap: 16px; }
  .vxw-hstep { grid-template-columns: 160px 1fr; grid-template-rows: none; align-items: center; }
  .vxw-hstep:not(:last-child)::after { display: none; }
  .vxw-realui { grid-template-columns: 1fr; }
}
@container (max-width: 620px) {
  .vxw > * { --vxw-px: 20px; --vxw-top: 24px; }
  .vxw-lib__title { font-size: 36px; }
  .vxw-lib__sub { font-size: 15px; }
  .vxw-search { flex: 1 1 100%; }
  .vxw-feats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--vxw-px)); padding: 0 var(--vxw-px) 6px; scrollbar-width: none; }
  .vxw-feats::-webkit-scrollbar { display: none; }
  .vxw-feats > li { flex: 0 0 78%; scroll-snap-align: center; }
  .vxw-grid { grid-template-columns: 1fr; gap: 12px; }
  .vxw-tile { grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; min-height: 0; padding: 16px 16px 12px; }
  .vxw-tile__foot { margin-top: 12px; }
  .vxw-tile__icon { width: 56px; height: 56px; }
  .vxw-group__blurb { display: none; }
  .vxw .vxa-title { font-size: 34px; }
  .vxw .vxa-tagline { font-size: 18px; }
  .vxw .vxa-summary { font-size: 16.5px; }
  .vxw .vxa-icon { width: 76px; height: 76px; }
  .vxw-act span { display: none; }
  .vxw-act { width: 44px; padding: 0; justify-content: center; }
  .vxw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vxw-fact { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: start; align-content: start; row-gap: 4px; padding: 16px; min-height: 0; }
  .vxw-fact__ico { grid-row: auto; width: 32px; height: 32px; border-radius: 10px; margin-bottom: 8px; }
  .vxw-fact__ico .vx-ico { width: 16px; height: 16px; }
  .vxw-fact__v { font-size: 15px; }
  .vxw-facts { gap: 12px; }
  .vxw-hstep { grid-template-columns: 110px 1fr; gap: 12px; padding: 10px; }
  .vxw-flow { padding: 18px; }
  .vxw-pills { grid-template-columns: 1fr; }
  .vxw-gal__t { width: 96px; height: 60px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vxw-lib.is-in [data-st], .vxw-lib.is-in .vxw-cell, .vxw-bigicon__halo, .vxw-bigicon__img, .vxa-panel.is-in .vxw-hstep { animation: none !important; }
}
html.vx-reduced .vxw-lib.is-in [data-st], html.vx-reduced .vxw-lib.is-in .vxw-cell, html.vx-reduced .vxw-bigicon__halo, html.vx-reduced .vxw-bigicon__img, html.vx-reduced .vxa-panel.is-in .vxw-hstep,
html.vx-reduced .vxa-panel.is-in [data-st], html.vx-reduced .vxa-icon__img, html.vx-reduced .vxa-icon__halo, html.vx-reduced .vxa-status i { animation: none !important; }

/* caption under a 3D volume (what the screen is playing) */
.vxa-vol__cap { position: absolute; left: 50%; bottom: 1%; max-width: 92%; padding: 6px 12px; border-radius: var(--vx-r-pill); background: rgb(var(--vx-glass) / 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 12.5px; font-weight: 500; color: var(--vx-label-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .45s var(--vx-spring); }
.vxa-vol__cap.is-on { opacity: 1; transform: translate(-50%, 0); }
.vxa-vol__hint { top: 1%; }

/* real UI: pills, sprite loops and the permission bubble */
/* two loops and the permission bubble scale together in one row, at any window width */
.vxw-realui__side { display: grid; grid-template-columns: 1fr 1fr 1.4fr; align-items: end; gap: 12px; max-width: 440px; width: 100%; justify-self: center; }
.vxw-loop { margin: 0; display: grid; gap: 8px; justify-items: center; min-width: 0; }
.vxw-loop__clip { width: 100%; aspect-ratio: 238 / 284; border-radius: 16px; background: #1b140e; }
.vxw-still { min-width: 0; }
.vxw-still img { width: 100%; max-width: none; }

/* shorter screens (laptops at 800px tall): keep the library's groups within reach */
@media (max-height: 860px) {
  .vxw { --vxw-top: 26px; }
  .vxw-lib__title { font-size: 40px; }
  .vxw-lib__sub { font-size: 16px; }
  .vxw-feat { grid-template-rows: 108px auto 1fr; min-height: 212px; }
  .vxw-feat__ph { top: 16px; width: 76px; }
  .vxw-head { padding-top: 14px; }
}

.vxw-page:focus { outline: none; }
/* coverflow sized to the window height */
.vxw .vxa-cf { --cf-h: clamp(280px, calc(var(--avail, 640px) - 196px), 520px); height: var(--cf-h); --cw: calc(var(--cf-h) * 0.44); }
.vxw .vxa-panel[data-panel="screens"] .vxa-head { margin-bottom: 6px; }
.vxw .vxa-cf__hint { margin: 0; }
.vxw .vxa-cf__bar { margin-top: 2px; }
@media (hover: none), (max-width: 620px) { .vxw-search__kbd { display: none; } }
@container (max-width: 620px) {
  .vxw-search__in { font-size: 15px; padding-right: 40px; }
  .vxw-bar__acts .vxw-act:not([data-act]) { display: none; }
}

.vxw-gal__t:first-child { margin-left: auto; }
.vxw-gal__t:last-child { margin-right: auto; }
.vxw-fact { min-width: 0; }

/* ============================================================
   v5 polish: bigger reading sizes inside the Work window,
   MacBook hint off the screen
   ============================================================ */
.vxw .vxa-head .vx-title1 { font-size: 32px; letter-spacing: -0.022em; }
.vxw .vxa-feature .vx-headline { font-size: 18px; }
.vxw .vxa-feature .vx-callout, .vxw .vxa-arch__row .vx-callout { font-size: 15.5px; line-height: 1.55; }
.vxw .vxa-arch__row .vx-headline { font-size: 17px; }
.vxw .vxa-ai__card .vx-body { font-size: 17px; line-height: 1.6; }
@container (min-width: 761px) {
  .vxw .vxa-step .vx-headline { font-size: 17px; }
  .vxw .vxa-step .vx-callout { font-size: 15px; }
}
.vxa-vol--mac .vxa-vol__hint { left: 3%; top: 2%; transform: none; animation-name: vxa-hint-l; }
@keyframes vxa-hint-l { 0% { opacity: 0; transform: translateY(6px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
.vxw-stagecanvas .vxw-node__t b { font-size: 15px; }
/* the hero canvas is one column of wide nodes: logo beside the title (the stacked mini node is for the narrow Overview card) */
.vxw-stagecanvas .vxw-flow.is-mini .vxw-node { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 56px; padding: 8px 32px 8px 8px; text-align: left; }
.vxw-stagecanvas .vxw-flow.is-mini .vxw-node__t { justify-items: start; }
.vxw-stagecanvas .vxw-flow.is-mini .vxw-node__t b { font-size: 15px; }
/* tab strip that scrolls (phones): soft edges say there is more */
.vxw-tabs.has-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.vxw-tabs.has-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.vxw-tabs.has-more-l.has-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* many cards at once: rise and fade only (a blur per card over glass is costly) */
@keyframes vxa-in-lite { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.vxa-panel.is-in .vxa-feature[data-st], .vxa-panel.is-in .vxa-arch__row[data-st], .vxa-panel.is-in .vxa-step[data-st], .vxw-lib.is-in .vxw-cell { animation-name: vxa-in-lite; }

/* ============================================================
   v6 · Rocky, live in 3D (the real rigged model from the app)
   ============================================================ */
.vxw-detail.stage-rocky .vxw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); min-height: 460px; }
.vxw-detail.stage-rocky .vxw-hero__stage { height: min(460px, 60vh); }
.vxa-inline--rocky .vxa-inline__stage { height: min(420px, 56vh); }
/* inside the Work hero the stage owns the height and the clip bar sits under it, never over the next section */
.vxw-stage .vxa-inline--rocky .vxa-inline__stage { height: 100%; }
.vxa-vol--rocky { border-radius: 32px; }
.vxa-cssrocky { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .5s var(--vx-ease-out); pointer-events: none; }
.vxa-vol--rocky.is-gl .vxa-cssrocky { opacity: 0; }
.vxa-cssrocky img { width: auto; height: 78%; max-width: 86%; object-fit: contain; border-radius: 24px; opacity: 0.9; }
.vxa-cssrocky__v { position: absolute; inset: 8% 6%; width: 88%; height: 84%; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.vxa-vol--rocky.is-video .vxa-cssrocky img { display: none; }
.vxa-vorn--clips { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--vx-r-pill); background: rgb(0 0 0 / 0.2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.vxa-vorn--inline.vxa-vorn--clips { margin-top: 8px; }
/* the moves drive the live model; the video fallback cannot follow them, so they step aside */
.vxa-inline:has(.vxa-vol--rocky.is-video) .vxa-vorn--clips { visibility: hidden; }
.vxa-clipb { min-height: 36px; min-width: 64px; padding: 0 16px; border: 0; border-radius: var(--vx-r-pill); background: transparent; color: var(--vx-label-1); font: 600 14px/1 var(--vx-font); cursor: pointer; transition: background .2s, color .2s, scale .35s var(--vx-spring); }
.vxa-clipb:hover { background: var(--vx-fill); }
.vxa-clipb:active { scale: .95; }
.vxa-clipb.is-on { animation: vxa-clip-on 0.9s var(--vx-ease-out); }
@keyframes vxa-clip-on { 0% { background: rgb(255 255 255 / 0.9); color: rgb(18 18 22); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .vxa-clipb.is-on { animation: none; } }

/* ---------- v6 · tool logos on AI cards ---------- */
.vxa-logos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vxa-logos .vxa-pill { min-height: 32px; font-size: 13.5px; }

/* ---------- v6 · straight from the app: real assets on their own surface ---------- */
.vxw-art-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 16px; }
.vxw-artile { display: grid; grid-template-rows: auto auto; gap: 8px; width: 100%; padding: 8px 8px 12px; border: 0; border-radius: 24px; background: var(--vx-platter); color: var(--vx-label-1); text-align: left; cursor: zoom-in; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); transition: background .25s, translate .45s var(--vx-spring); }
.vxw-artile:hover { background: var(--vx-platter-hi); translate: 0 -2px; }
.vxw-artile__img { display: grid; place-items: center; aspect-ratio: 1; padding: 16px; border-radius: 16px; background: var(--bg, rgb(0 0 0 / 0.2)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); overflow: hidden; }
/* definite 1fr track, so the art fills the padded square and object-fit centres it
   (with auto tracks, max-height: 100% was ignored and tall art sat off centre, clipped) */
.vxw-artile__img { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.vxw-artile__img img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.vxw-artile__cap { padding: 0 8px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--vx-label-2); }

/* ---------- v6 · how it keeps running (system map) ---------- */
.vxw-sys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.vxw-sys__g { padding: 24px; border-radius: 24px; background: var(--vx-platter); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); }
.vxw-sys__h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vxw-sys__h .vx-headline { margin: 0; font-size: 17px; }
.vxw-sys__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgb(var(--accent) / 0.22); color: var(--tint, #fff); }
.vxw-sys__ico .vx-ico { width: 20px; height: 20px; }
.vxw-sys__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vxw-sys__items li { display: flex; align-items: center; gap: 12px; min-height: 24px; font-size: 15px; line-height: 1.4; color: var(--vx-label-1); }
.vxw-sys__items i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, rgb(var(--accent)) 70%, white); }
.vxa-panel.is-in .vxw-sys__items i { animation: vxw-tick 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.4s); }
@keyframes vxw-tick { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); } 20% { box-shadow: 0 0 0 4px rgb(var(--accent) / 0.25); } }

/* ---------- v6 · design tokens (DLS) ---------- */
.vxw-detail.stage-tokens .vxw-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); min-height: 440px; }
.vxw-detail.stage-tokens .vxw-hero__stage { height: auto; }
.vxw-spec { display: grid; gap: 24px; padding: 24px; border-radius: 28px; background: rgb(0 0 0 / 0.18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -40px rgb(0 0 0 / 0.7); }
.vxw-spec__head { display: flex; justify-content: space-between; font: 600 12px/1 var(--vx-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-3); }
.vxw-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 12px; }
.vxw-sws.is-stage { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; }
.vxw-sw { display: grid; gap: 4px; min-width: 0; }
.vxw-sw__chip { height: 48px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.vxw-sws.is-stage .vxw-sw__chip { height: 40px; }
.vxw-sw__n { font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxw-sw__h { font: 500 12px/1.2 var(--vx-mono); color: var(--vx-label-3); }
.vxw-sws.is-stage .vxw-sw__n { display: none; }
.vxw-ty { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.vxw-ty li { display: grid; justify-items: center; gap: 8px; }
.vxw-ty__s { font-weight: 600; line-height: 1; color: var(--vx-label-1); }
.vxw-ty__n, .vxw-sp__n, .vxw-rd__n { font: 500 12px/1 var(--vx-mono); color: var(--vx-label-3); }
.vxw-sp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vxw-sp li { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px; }
.vxw-sp__bar { display: block; width: var(--w); min-width: 4px; height: 8px; border-radius: 4px; background: color-mix(in srgb, rgb(var(--accent)) 80%, white); }
.vxw-sp.is-stage { gap: 6px; }
.vxw-sp.is-stage .vxw-sp__bar { height: 6px; }
.vxw-rd { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.vxw-rd li { display: grid; justify-items: center; gap: 8px; }
.vxw-rd__box { display: block; width: 44px; height: 44px; background: rgb(var(--accent) / 0.28); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, rgb(var(--accent)) 70%, white); }
.vxw-tokens__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vxw-tk { padding: 24px; border-radius: 24px; background: var(--vx-platter); }
.vxw-tk__t { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-3); }
.vxa-panel.is-in .vxw-sw, .vxa-panel.is-in .vxw-sp__bar, .vxa-panel.is-in .vxw-ty li { animation: vxw-sw-in .6s var(--vx-ease-out) both; animation-delay: calc(var(--k, 0) * 45ms + 250ms); }
.vxa-panel.is-in .vxw-sp__bar { transform-origin: left; animation-name: vxw-bar-in; }
@keyframes vxw-sw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vxw-bar-in { from { transform: scaleX(0); } to { transform: none; } }
@container (max-width: 900px) { .vxw-detail.stage-tokens .vxw-hero { grid-template-columns: minmax(0, 1fr); } .vxw-detail.stage-rocky .vxw-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .vxw-detail.stage-rocky .vxw-hero__stage { height: min(400px, 56vh); } }
@container (max-width: 620px) { .vxw-tokens__grid { grid-template-columns: 1fr; } .vxw-sws.is-stage { grid-template-columns: repeat(5, minmax(0, 1fr)); } .vxw-art-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .vxa-panel.is-in .vxw-sw, .vxa-panel.is-in .vxw-sp__bar, .vxa-panel.is-in .vxw-ty li, .vxa-panel.is-in .vxw-sys__items i { animation: none !important; } }
html.vx-reduced .vxa-panel.is-in .vxw-sw, html.vx-reduced .vxa-panel.is-in .vxw-sp__bar, html.vx-reduced .vxa-panel.is-in .vxw-ty li, html.vx-reduced .vxa-panel.is-in .vxw-sys__items i, html.vx-reduced .vxa-clipb.is-on { animation: none !important; }
@media (pointer: coarse) { .vxa-clipb { min-height: 44px; } }
.vxw-art-strip > li { display: grid; }
.vxw-art-strip > li.is-wide { grid-column: span 2; }
.vxw-art-strip > li.is-wide .vxw-artile__img { aspect-ratio: 2 / 1; padding: 0; }
.vxw-art-strip > li.is-wide .vxw-artile__img img { width: 100%; height: 100%; object-fit: cover; }
/* a wordmark or a very wide asset is shown whole, never cropped */
.vxw-art-strip > li.is-xwide .vxw-artile__img { padding: 24px 32px; }
.vxw-art-strip > li.is-xwide .vxw-artile__img img { width: 100%; height: 100%; object-fit: contain; }
/* a long set of small art (mWell's score icons) sits in a denser grid */
.vxw-art-strip.is-dense { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.vxw-art-strip.is-dense .vxw-artile { padding: 6px 6px 10px; border-radius: 20px; gap: 6px; }
.vxw-art-strip.is-dense .vxw-artile__img { padding: 12px; border-radius: 14px; }
.vxw-art-strip.is-dense .vxw-artile__cap { padding: 0 6px; font-size: 12.5px; }
@container (max-width: 620px) { .vxw-art-strip > li.is-wide { grid-column: 1 / -1; } }
@container (max-width: 620px) { .vxw-detail.stage-rocky .vxw-hero__stage { height: min(360px, 48vh); } .vxw-art-strip.is-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .vxw-art-strip.is-dense .vxw-artile__img { padding: 8px; } }

/* ---------- Workflow nodes: text never escapes its node ----------
   Full size: reserve the corner for the step number, wrap long titles cleanly.
   Mini (Overview preview card, one row of narrow nodes): stack logo over a
   centered title so every label fits, and hide the secondary line. */
.vxw-node { padding-right: 32px; }
.vxw-node__t b { overflow-wrap: break-word; text-wrap: balance; }
.vxw-flow.is-mini .vxw-node { flex-direction: column; justify-content: center; gap: 7px; min-height: 0; padding: 10px 12px 11px; text-align: center; }
.vxw-flow.is-mini .vxw-node__t { justify-items: center; gap: 0; }
.vxw-flow.is-mini .vxw-node__t b { font-size: 13px; line-height: 1.25; }
.vxw-flow.is-mini .vxw-node__t small { display: none; }
.vxw-flow.is-mini .vxw-node__n { top: 8px; right: 10px; }

/* Version 2 rail: bleed exactly to the window edge (the window's real side padding, --vxw-px: 40px wide, 32/20px in narrow windows; the old
   44px bleed made the first screen touch the edge), so the first screen lines up with the title,
   the strip scrolls edge to edge, and soft fades hint that it scrolls */
.vxa-v2__rail { --v2-bleed: var(--vxw-px, 40px); margin: 0 calc(-1 * var(--v2-bleed)) 26px; padding: 8px var(--v2-bleed) 14px; scroll-padding-inline: var(--v2-bleed); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }

/* Featured rail on phones: a horizontal scroller clips vertically, so the hover lift
   (and its shadow) was cut off at the top. Give the rail room above and below,
   cancelled by negative margins so the layout doesn't move. */
@container (max-width: 620px) {
  .vxw-feats { padding-top: 10px; padding-bottom: 22px; margin-top: -10px; margin-bottom: -16px; }
}