/* ============================================================
   Spatial portfolio · mobile (js/space/mobile.js)
   The phone layer: a floating Liquid Glass tab bar (Me, Work,
   Experience, AI, More), full screen windows in per tab navigation
   stacks, scope bars, a bottom accessory for ornaments, and the
   tour as swipeable step cards. Everything is scoped under html.vxm
   (set only while the mobile manager runs), so the spatial desktop
   is never affected.
   ============================================================ */

html.vxm {
  --vxm-safe-t: env(safe-area-inset-top, 0px);
  --vxm-safe-b: env(safe-area-inset-bottom, 0px);
  --vxm-safe-l: env(safe-area-inset-left, 0px);
  --vxm-safe-r: env(safe-area-inset-right, 0px);
  --vxm-nav-h: 54px;
  --vxm-head: calc(var(--vxm-safe-t) + var(--vxm-nav-h));
  --vxm-scope-h: 52px;
  --vxm-tab-h: 64px;
  --vxm-tab-b: max(var(--vxm-safe-b), 10px);
  --vxm-bottom: calc(var(--vxm-tab-b) + var(--vxm-tab-h) + 24px);
  --vxm-pad: max(20px, var(--vxm-safe-l));
  --vxm-acc-h: 56px;
}
html.vxm.vx-touring { --vxm-bottom: calc(var(--vxm-tour-h, 230px) + var(--vxm-tab-b) + 18px); }
html.vxm.vxm-full:not(.vx-touring) { --vxm-bottom: calc(var(--vxm-tab-b) + 12px); }
html.vxm body.vx { overflow: hidden; overscroll-behavior: none; }
html.vxm .vx-space { touch-action: pan-y; cursor: auto; }
html.vxm :focus-visible { outline: 2.5px solid rgb(255 255 255 / 0.92); outline-offset: 2px; }

/* ============================================================
   App frame: one view per tab, a stack of screens in each
   ============================================================ */
html.vxm .vxm-app { position: absolute; inset: 0; overflow: hidden; z-index: 1; isolation: isolate; }
html.vxm .vxm-tabview { position: absolute; inset: 0; visibility: hidden; }
html.vxm .vxm-tabview.is-active, html.vxm .vxm-tabview.is-leaving { visibility: visible; }
html.vxm .vxm-tabview.is-leaving { pointer-events: none; z-index: 2; }
html.vxm .vxm-screen { position: absolute; inset: 0; visibility: hidden; overflow: hidden; }
html.vxm .vxm-screen.is-shown { visibility: visible; }
html.vxm .vxm-screen.has-back { box-shadow: -24px 0 48px -12px rgb(0 0 0 / 0.5); }
html.vxm .vxm-screen__shade { position: absolute; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; }
html.vxm.vxm-swiping .vxm-screen { will-change: transform; }

/* The window, full screen. Its glass is clearer at the top (the world shows through)
   and nearly solid where you read, so a screen sliding over another stays clean. */
html.vxm .vxm-win.vx-item.is-sheet {
  position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important;
  width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
  transform: none !important; opacity: 1 !important; translate: none !important; scale: none !important;
  border-radius: 0 !important; overflow: hidden;
  background:
    linear-gradient(180deg, rgb(var(--vx-env-light) / var(--vx-sheen-a)) 0, rgb(var(--vx-env-light) / 0) 160px),
    linear-gradient(180deg, rgb(var(--vx-glass) / var(--vxm-top-a)) 0, rgb(var(--vx-glass) / var(--vxm-top-a)) 90px, rgb(var(--vx-glass) / var(--vxm-low-a)) 300px);
  box-shadow: none;
  transition: --vxm-top-a .5s var(--vx-ease-out), --vxm-low-a .5s var(--vx-ease-out);
}
/* While screens slide, the glass is solid all the way up (no screen ghosts through another); it clears once it lands */
@property --vxm-top-a { syntax: '<number>'; inherits: true; initial-value: 0.62; }
@property --vxm-low-a { syntax: '<number>'; inherits: true; initial-value: 0.9; }
html.vxm { --vxm-top-a: 0.62; --vxm-low-a: 0.9; }
html.dark.vxm { --vxm-top-a: 0.5; --vxm-low-a: 0.92; }
html.vxm.vxm-moving { --vxm-top-a: 0.97; --vxm-low-a: 0.985; }
html.vxm.vxm-moving .vxm-win.vx-item.is-sheet { transition-duration: 0s; }
html.dark.vxm .vxm-win.vx-item.is-sheet {
  background:
    linear-gradient(180deg, rgb(var(--vx-env-light) / var(--vx-sheen-a)) 0, rgb(var(--vx-env-light) / 0) 160px),
    linear-gradient(180deg, rgb(var(--vx-glass) / var(--vxm-top-a)) 0, rgb(var(--vx-glass) / var(--vxm-top-a)) 90px, rgb(20 20 26 / var(--vxm-low-a)) 300px);
}
html.vxm .vxm-win.vx-glass::before { display: none; }
html.vxm .vxm-win:focus, html.vxm .vxm-win:focus-visible { outline: none; }
html.vxm .vxm-screen:not(.is-top) .vxm-win.vx-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.vxm .vxm-screen:not(.is-top) .vxm-win.vx-item.is-sheet { background: linear-gradient(180deg, rgb(var(--vx-glass) / 0.82), rgb(var(--vx-glass) / 0.94) 300px); }
html.vxm .vxm-win > .vx-winbar, html.vxm .vxm-win .vx-sheet__handle { display: none !important; }

html.vxm .vxm-win > .vx-window__body {
  position: absolute; left: 0; right: 0; top: var(--vxm-head); bottom: 0; height: auto;
  padding: 6px var(--vxm-pad) var(--vxm-bottom);
  border-radius: 0; overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-padding-top: 12px;
}
html.vxm .vxm-screen.is-scrolled .vxm-win > .vx-window__body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); }
html.vxm .vxm-win.has-scope > .vx-window__body { top: calc(var(--vxm-head) + var(--vxm-scope-h)); }
/* a window with an accessory (poster arrows, Snake's controls): its content ends above the accessory, so
   nothing ever sits under it at rest; the accessory reads as a toolbar docked over the tab bar */
html.vxm .vxm-win.has-acc > .vx-window__body {
  bottom: calc(var(--vxm-bottom) - 12px + var(--vxm-acc-h) + 8px); padding-bottom: 24px;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16px); mask-image: linear-gradient(to top, transparent 0, #000 16px);
}
html.vxm .vxm-screen.is-scrolled .vxm-win.has-acc > .vx-window__body {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 16px), transparent);
}
html.vxm .vxm-screen.is-bare .vxm-win > .vx-window__body { top: var(--vxm-safe-t); padding: 0; }

/* ============================================================
   Navigation bar: back button + the title that appears on scroll
   ============================================================ */
html.vxm .vxm-navbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 12; height: var(--vxm-head); padding: var(--vxm-safe-t) max(12px, var(--vxm-safe-r)) 0 max(12px, var(--vxm-safe-l));
  display: flex; align-items: center; pointer-events: none;
}
html.vxm .vxm-navbar > * { pointer-events: auto; }
html.vxm .vxm-navbar__bg { position: absolute; inset: 0 0 -10px; pointer-events: none !important; opacity: 0; transition: opacity .3s var(--vx-ease-out); background: linear-gradient(rgb(var(--vx-glass) / 0.55) 55%, rgb(var(--vx-glass) / 0)); }
html.vxm .vxm-screen.is-scrolled .vxm-navbar__bg { opacity: 1; }
html.vxm .vxm-navbar__title {
  position: absolute; left: 96px; right: 96px; bottom: 0; height: var(--vxm-nav-h); display: grid; place-items: center; pointer-events: none !important;
  font-size: 16px; font-weight: 650; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden;
  opacity: 0; translate: 0 6px; transition: opacity .25s, translate .45s var(--vx-spring);
}
/* mobile.js fitNav() sets equal side insets so a back label never runs into it; the text truncates last */
html.vxm .vxm-navbar__title > span { display: block; min-width: 0; max-width: 100%; text-align: center; line-height: 1.15; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; } /* a long name ("Need for Speed Unbound") balances onto two lines instead of an ellipsis */
html.vxm .vxm-screen.is-scrolled .vxm-navbar__title { opacity: 1; translate: 0 0; }
html.vxm .vxm-screen.is-bare .vxm-navbar { display: none; }
html.vxm .vxm-back {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; height: 42px; max-width: 46vw; padding: 0 15px 0 7px; margin: 0; border: 0; border-radius: 21px;
  background: rgb(255 255 255 / 0.13); color: var(--vx-label-1); font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(255 255 255 / 0.08);
  -webkit-tap-highlight-color: transparent; transition: scale .35s var(--vx-spring), background .2s;
}
html.vxm .vxm-back::after { content: ""; position: absolute; inset: -4px -6px; border-radius: 26px; }
html.vxm .vxm-back:active { scale: 0.93; background: rgb(255 255 255 / 0.22); }
html.vxm .vxm-back .vx-ico { width: 22px; height: 22px; stroke-width: 2.2; }
html.vxm .vxm-back__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Scope bar (a window's vertical tab bar, laid flat under the nav bar)
   ============================================================ */
html.vxm .vxm-win > .vx-tabbar {
  position: absolute !important; left: 0 !important; right: 0 !important; top: var(--vxm-head) !important; bottom: auto !important; translate: none !important;
  height: var(--vxm-scope-h); z-index: 11; flex-direction: row; align-items: center; gap: 6px; padding: 5px var(--vxm-pad) 7px; border-radius: 0;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent);
}
html.vxm .vxm-win > .vx-tabbar::-webkit-scrollbar { display: none; }
html.vxm .vxm-win > .vx-tabbar::before { display: none; }
html.vxm .vxm-win .vx-tabbar .vx-tab {
  position: relative; z-index: 1; flex: none; width: auto; height: 38px; padding: 0 15px 0 12px; border-radius: 19px;
  display: inline-flex; align-items: center; gap: 7px; background: rgb(255 255 255 / 0.1) !important; box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.14) !important;
  color: var(--vx-label-1); transition: color .3s, scale .35s var(--vx-spring);
}
html.vxm .vxm-win .vx-tabbar .vx-tab::after { display: none; }
html.vxm .vxm-win .vx-tabbar .vx-tab[aria-selected="true"] { color: #111; background: transparent !important; box-shadow: none !important; }
html.vxm .vxm-win .vx-tabbar .vx-tab:active { scale: 0.94; }
html.vxm .vxm-win .vx-tabbar .vx-tab svg { width: 17px; height: 17px; }
html.vxm .vxm-win .vx-tabbar .vx-tab__label {
  position: static; display: block; translate: none !important; opacity: 1; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: inherit; pointer-events: none; white-space: nowrap;
}
html.vxm .vxm-scope__lens { position: absolute; left: 0; top: 5px; height: 38px; width: 60px; z-index: 0; border-radius: 19px; pointer-events: none; background: #fff; box-shadow: 0 4px 14px -6px rgb(0 0 0 / 0.4); transition: transform .5s var(--vx-spring), width .5s var(--vx-spring); }
html.vxm .vxm-scope__lens.is-instant { transition: none; }
html.vxm .vxm-win .vx-tabbar .vx-tab:focus-visible { outline-offset: 2px; }

/* ============================================================
   Bottom accessory (a window's ornament) above the tab bar
   ============================================================ */
html.vxm .vxm-win > .vx-ornament.vxm-acc {
  position: absolute !important; left: 50% !important; right: auto !important; top: auto !important;
  bottom: calc(var(--vxm-bottom) - 12px) !important; translate: -50% 0 !important; z-index: 11;
  max-width: calc(100% - 24px); padding: 6px; gap: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x;
  --vx-glass-a: 0.84; transition: opacity .3s, scale .45s var(--vx-spring), translate .45s var(--vx-spring);
}
html.vxm .vxm-win > .vx-ornament.vxm-acc::-webkit-scrollbar { display: none; }
html.vxm .vxm-win > .vx-ornament.vxm-acc .vx-btn { min-height: 44px; }
html.vxm .vxm-win > .vx-ornament.vxm-acc [hidden] { display: none !important; }

/* ============================================================
   Tab bar: a floating Liquid Glass capsule with a sliding lens
   ============================================================ */
html.vxm .vxm-tabbar {
  position: fixed; z-index: 60; left: 50%; bottom: var(--vxm-tab-b); translate: -50% 0;
  display: flex; align-items: stretch; width: min(calc(100% - 24px - var(--vxm-safe-l) - var(--vxm-safe-r)), 460px); height: var(--vxm-tab-h); padding: 5px; border-radius: 999px;
  --vx-glass-a: 0.8;
  box-shadow: inset 0 1px 0 var(--vx-edge-top), inset 0 0 0 1px var(--vx-edge), 0 18px 40px -16px rgb(0 0 0 / 0.6), 0 4px 14px -6px rgb(0 0 0 / 0.35);
  transition: translate .55s var(--vx-spring), opacity .3s var(--vx-ease-out);
}
/* a solid fill: text scrolling underneath must never read through the labels (even 4% shows white type) */
html.vxm .vxm-tabbar.vx-glass, html.vxm .vxm-win > .vx-ornament.vxm-acc.vx-glass, html.vxm .vxm-tour__bar.vx-glass, html.vxm .vxm-tour__card.vx-glass {
  background: linear-gradient(180deg, rgb(var(--vx-env-light) / 0.08), rgb(var(--vx-env-light) / 0) 60%), rgb(30 30 36);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.dark.vxm .vxm-tabbar.vx-glass, html.dark.vxm .vxm-win > .vx-ornament.vxm-acc.vx-glass, html.dark.vxm .vxm-tour__bar.vx-glass, html.dark.vxm .vxm-tour__card.vx-glass { background: rgb(22 22 28); }
/* the tour card is read while it sits over a window full of text: no trace of that text may show through */
html.vxm .vxm-tour__card.vx-glass { background: linear-gradient(180deg, rgb(var(--vx-env-light) / 0.08), rgb(var(--vx-env-light) / 0) 60%), rgb(30 30 36); }
html.dark.vxm .vxm-tour__card.vx-glass { background: rgb(22 22 28); }
html.vxm.vx-touring .vxm-tabbar, html.vxm.vxm-full .vxm-tabbar { translate: -50% calc(100% + 30px); opacity: 0; pointer-events: none; }
/* the spotlight guide points at the tab bar: it is always there while the guide runs */
html.vxm.vx-guiding .vxm-tabbar { translate: -50% 0; opacity: 1; }
/* under the startup boot the tab bar waits below the screen, then rises as the world appears */
html.vxm.vxm-hold .vxm-tabbar { translate: -50% calc(100% + 30px); opacity: 0; transition: none; }
html.vxm.vxm-rise .vxm-tabbar { animation: vxm-rise .9s var(--vx-spring) both .16s; }
html.vxm .vxm-tabbar__lens {
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 70px; border-radius: 999px; pointer-events: none; z-index: 0;
  background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.36), inset 0 -0.5px 0 rgb(255 255 255 / 0.08);
  transition: transform .55s var(--vx-spring), width .55s var(--vx-spring);
}
html.vxm .vxm-tabbar__btn {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--vx-label-2); font: inherit; -webkit-tap-highlight-color: transparent; transition: color .25s, scale .35s var(--vx-spring);
}
html.vxm .vxm-tabbar__btn .vx-ico { width: 24px; height: 24px; stroke-width: 1.9; }
html.vxm .vxm-tabbar__btn.is-on { color: #fff; }
html.vxm .vxm-tabbar__btn:active { scale: 0.9; }
html.vxm .vxm-tabbar__btn:focus-visible { outline-offset: -3px; }
html.vxm .vxm-tabbar__l { max-width: 100%; font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.vxm .vxm-tabbar__av { display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.5); opacity: 0.86; transition: box-shadow .3s, opacity .3s; }
html.vxm .vxm-tabbar__btn.is-on .vxm-tabbar__av { box-shadow: 0 0 0 2px #fff; opacity: 1; }
html.vxm .vxm-tabbar__av img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   More (iOS inset grouped list on glass)
   ============================================================ */
html.vxm .vxm-more > .vx-window__body { max-width: 720px; margin: 0 auto; }
html.vxm .vxm-more__head { padding: 0 4px 16px; }
html.vxm .vxm-more__head .vx-large-title { font-size: 36px; }
html.vxm .vxm-other {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; margin: 0 0 24px; padding: 16px; border: 0; border-radius: 24px; cursor: pointer; text-align: left; font: inherit; color: #fff;
  /* dressed like the alter ego itself: dark stone, gold trim (same in both themes) */
  background: radial-gradient(70% 120% at 8% 20%, rgb(214 160 72 / 0.26), rgb(214 160 72 / 0) 70%), linear-gradient(155deg, #262930 0%, #17191e 55%, #0f1114 100%);
  box-shadow: inset 0 1px 0 rgb(255 236 190 / 0.2), inset 0 0 0 1px rgb(230 207 147 / 0.26), 0 18px 34px -18px rgb(0 0 0 / 0.7);
  overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: scale .4s var(--vx-spring);
}
html.vxm .vxm-other::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16; background-image: radial-gradient(rgb(230 207 147) 1px, transparent 1.4px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000); }
html.vxm .vxm-other:active { scale: 0.97; }
html.vxm .vxm-other__i .vx-ricon--hero, html.vxm .vxm-other__i .vxm-other__sigil { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.45), 0 8px 18px -8px rgb(0 0 0 / 0.7), 0 0 22px -6px rgb(80 210 175 / 0.5); }
html.vxm .vxm-other__i { flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
html.vxm .vxm-other__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.vxm .vxm-other__k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #e6cf93; }
html.vxm .vxm-other__l { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
html.vxm .vxm-other__s { font-size: 14px; color: rgb(255 255 255 / 0.86); }
html.vxm .vxm-other .vxm-row__c { color: rgb(255 255 255 / 0.86); }
html.vxm .vxm-group__h { margin: 0 0 8px; padding: 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-2); }
html.vxm .vxm-group { margin: 0 0 24px; border-radius: 24px; overflow: hidden; background: var(--vx-platter); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.1); }
html.vxm .vxm-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0; padding: 12px 16px; border: 0; background: none;
  color: var(--vx-label-1); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s;
}
html.vxm .vxm-row + .vxm-row::before, html.vxm .vxm-set + .vxm-set::before { content: ""; position: absolute; left: 64px; right: 0; top: 0; height: 1px; background: var(--vx-hairline); }
html.vxm .vxm-set + .vxm-set::before { left: 16px; }
html.vxm .vxm-row:active, html.vxm .vxm-set--btn:active { background: rgb(255 255 255 / 0.09); }
html.vxm .vxm-row:focus-visible, html.vxm .vxm-set--btn:focus-visible { outline-offset: -3px; border-radius: 24px; }
html.vxm .vxm-row__i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
html.vxm .vxm-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.vxm .vxm-row__l { font-size: 16.5px; font-weight: 600; letter-spacing: -0.012em; }
html.vxm .vxm-row__s { font-size: 13.5px; line-height: 1.35; color: var(--vx-label-2); }
html.vxm .vxm-row__c { flex: none; display: grid; place-items: center; color: var(--vx-label-3); }
html.vxm .vxm-row__c .vx-ico { width: 17px; height: 17px; stroke-width: 2.2; }
html.vxm .vxm-glyphdisc { width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.14); }
html.vxm .vxm-glyphdisc .vx-ico { width: 46%; height: 46%; }
/* Replay the guide: the "?" of the desktop Control Center, on a disc in the icon family's style */
html.vxm .vxm-glyphdisc--help { color: #fff; background: radial-gradient(75% 75% at 30% 12%, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0) 60%), linear-gradient(160deg, #6f7dff, #4550e0 55%, #2f35b8); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.5), 0 2px 6px -2px rgb(20 24 90 / 0.6); }
html.vxm .vxm-glyphdisc--help .vx-ico { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px rgb(0 0 40 / 0.35)); }
html.vxm .vxm-set { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 56px; padding: 12px 16px; }
html.vxm .vxm-set__l { flex: 1 1 auto; font-size: 16.5px; font-weight: 600; letter-spacing: -0.012em; }
html.vxm .vxm-set__sub { order: 3; flex-basis: 100%; margin-top: -4px; font-size: 13.5px; color: var(--vx-label-2); }
html.vxm .vxm-set__sub:empty { display: none; }
html.vxm .vxm-set__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.vxm .vxm-set__note { font-size: 13.5px; line-height: 1.35; color: var(--vx-label-2); }
html.vxm .vxm-set--btn { width: 100%; border: 0; background: none; color: var(--vx-label-1); font: inherit; text-align: left; cursor: pointer; }
html.vxm .vxm-set--btn .vx-ico { width: 20px; height: 20px; color: var(--vx-label-2); }
html.vxm .vxm-set__slot { --sfx-size: 40px; display: grid; place-items: center end; min-width: 44px; min-height: 44px; margin-right: -10px; }  /* the toggle is a 40px target around a small glyph: its glyph lines up with the icons below */
html.vxm .vxm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px; background: rgb(255 255 255 / 0.1); }
html.vxm .vxm-seg button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--vx-label-1); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
html.vxm .vxm-seg button .vx-ico { width: 15px; height: 15px; }
html.vxm .vxm-seg button[aria-checked="true"] { background: #fff; color: #111; box-shadow: 0 3px 10px -4px rgb(0 0 0 / 0.4); }
html.vxm .vxm-switch { position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: rgb(255 255 255 / 0.2); cursor: pointer; transition: background .25s; }
html.vxm .vxm-switch::after { content: ""; position: absolute; inset: -6px; }
html.vxm .vxm-switch i { position: absolute; left: 2px; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3); transition: translate .35s var(--vx-spring); }
html.vxm .vxm-switch[aria-checked="true"] { background: rgb(52 199 89); }
html.vxm .vxm-switch[aria-checked="true"] i { translate: 20px 0; }
html.vxm .vxm-switch:disabled { opacity: 0.55; cursor: default; }
html.vxm .vxm-more__foot { margin: 4px 0 0; padding: 0 16px; font-size: 13px; line-height: 1.45; color: var(--vx-label-3); text-align: center; }

/* ============================================================
   Tour: swipeable step cards + a control capsule
   ============================================================ */
html.vxm .vxm-tour {
  position: fixed; z-index: 62; left: 0; right: 0; bottom: var(--vxm-tab-b);
  display: flex; flex-direction: column; gap: 8px; opacity: 0; translate: 0 40px; pointer-events: none;
  transition: opacity .35s var(--vx-ease-out), translate .6s var(--vx-spring);
}
html.vxm .vxm-tour.is-in { opacity: 1; translate: 0 0; pointer-events: auto; }
html.vxm .vxm-tour[hidden] { display: none; }
html.vxm .vxm-tour__track {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px max(16px, var(--vxm-safe-r)) 4px max(16px, var(--vxm-safe-l)); scroll-padding-inline: max(16px, var(--vxm-safe-l)); touch-action: pan-x;
}
html.vxm .vxm-tour__track::-webkit-scrollbar { display: none; }
html.vxm .vxm-tour__card {
  flex: none; width: min(calc(100vw - 32px - var(--vxm-safe-l) - var(--vxm-safe-r)), 520px); min-height: 132px; scroll-snap-align: start; scroll-snap-stop: always;
  padding: 16px 18px 16px; border-radius: 28px; --vx-glass-a: 0.88;
  opacity: 0.55; scale: 0.97; transition: opacity .35s, scale .45s var(--vx-spring);
}
html.vxm .vxm-tour__card.is-on { opacity: 1; scale: 1; }
html.vxm .vxm-tour__k { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-label-2); }
html.vxm .vxm-tour__t { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
html.vxm .vxm-tour__l { margin: 6px 0 0; font-size: 15px; line-height: 1.42; color: var(--vx-label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.vxm .vxm-tour__also { margin: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
html.vxm .vxm-tour__alsobtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgb(255 255 255 / 0.14); color: var(--vx-label-1); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
html.vxm .vxm-tour__alsobtn .vx-ico { width: 15px; height: 15px; }
html.vxm .vxm-tour__bar {
  display: flex; align-items: center; gap: 6px; align-self: center; width: min(calc(100% - 32px - var(--vxm-safe-l) - var(--vxm-safe-r)), 520px); height: 58px; padding: 6px; border-radius: 999px; --vx-glass-a: 0.86;
}
html.vxm .vxm-tour__x, html.vxm .vxm-tour__btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 46px; min-width: 46px; padding: 0; border: 0; border-radius: 23px; background: rgb(255 255 255 / 0.12); color: var(--vx-label-1); font: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer; transition: scale .35s var(--vx-spring), background .2s, opacity .2s; }
html.vxm .vxm-tour__x .vx-ico, html.vxm .vxm-tour__btn .vx-ico { width: 18px; height: 18px; stroke-width: 2.2; }
html.vxm .vxm-tour__btn--next { padding: 0 16px 0 20px; background: #fff; color: #111; }
html.vxm .vxm-tour__x:active, html.vxm .vxm-tour__btn:active { scale: 0.92; }
html.vxm .vxm-tour__btn:disabled { opacity: 0.35; cursor: default; }
html.vxm .vxm-tour__prog { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
html.vxm .vxm-tour__prog i { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.3); transition: width .45s var(--vx-spring), background .3s; }
html.vxm .vxm-tour__prog i.is-done { background: rgb(255 255 255 / 0.62); }
html.vxm .vxm-tour__prog i.is-on { width: 18px; background: #fff; }

/* ============================================================
   Intro, small fixes for windows at phone width
   ============================================================ */
html.vxm .vxm-veil { position: fixed; inset: 0; z-index: 200; background: rgb(var(--vx-ground)); pointer-events: none; transition: opacity 1s var(--vx-ease-out); }
html.vxm .vxm-veil.is-out { opacity: 0; }
html.vxm.vxm-intro .vxm-tabbar { animation: vxm-rise .9s var(--vx-spring) both .35s; }
html.vxm.vxm-intro .vxm-tabview.is-active .vxm-win > .vx-window__body { animation: vxm-fade-up .8s var(--vx-ease-out) both .15s; }
@keyframes vxm-rise { from { translate: -50% 120%; opacity: 0; } }
@keyframes vxm-fade-up { from { opacity: 0; transform: translateY(18px); } }

/* 3D phones inline: horizontal drag rotates, vertical drag scrolls */
html.vxm .vxm-win .vxa-vol, html.vxm .vxm-win .vxa-vol canvas { touch-action: pan-y; }

/* Work brings its own bar (back · title · actions); it reaches under the tab bar */
html.vxm .vxm-win.vxw-win .vxw { --vxw-bottom: var(--vxm-bottom); min-height: 0; }
/* phone side padding for the library and its cases: apps.css sets --vxw-px inside @container (max-width: 620px),
   but .vxw is that container itself, so the rule can't reach it; 20px here, and the rails bleed by the same amount */
html.vxm .vxm-win.vxw-win .vxw, html.vxm .vxm-win.vxw-win .vxw > * { --vxw-px: var(--vxm-pad); --vxw-top: 24px; }
html.vxm .vxm-win.vxw-win .vxa-v2__rail { --v2-bleed: var(--vxw-px); }

/* ============================================================
   Landscape phones, bigger portrait screens
   ============================================================ */
@media (orientation: landscape) and (max-height: 520px) {
  html.vxm { --vxm-nav-h: 46px; --vxm-tab-h: 54px; --vxm-scope-h: 48px; }
  html.vxm .vxm-tabbar__btn { flex-direction: row; gap: 6px; }
  html.vxm .vxm-tabbar { width: min(calc(100% - 24px - var(--vxm-safe-l) - var(--vxm-safe-r)), 560px); }
  html.vxm .vxm-tour__card { min-height: 0; }
  html.vxm .vxm-tour__l { -webkit-line-clamp: 2; }
}
@media (max-width: 370px) {
  html.vxm { --vxm-pad: max(16px, var(--vxm-safe-l)); --vxm-tab-h: 60px; }
  html.vxm .vxm-tabbar__l { font-size: 10.5px; }
  html.vxm .vxm-tour__t { font-size: 19.5px; }
  html.vxm .vxm-seg button { padding: 0 8px; }
}

/* ============================================================
   Reduced motion + transparency
   ============================================================ */
html.vxm.vx-reduced .vxm-tabbar, html.vxm.vx-reduced .vxm-tabbar__lens, html.vxm.vx-reduced .vxm-scope__lens, html.vxm.vx-reduced .vxm-tour,
html.vxm.vx-reduced .vxm-tour__card, html.vxm.vx-reduced .vxm-navbar__title { transition-duration: 0.01ms !important; }
html.vxm.vx-reduced.vxm-intro .vxm-tabbar, html.vxm.vx-reduced.vxm-intro .vxm-win > .vx-window__body, html.vxm.vx-reduced.vxm-rise .vxm-tabbar { animation: none !important; }
@media (prefers-reduced-transparency: reduce) {
  html.vxm .vxm-win.vx-item.is-sheet { background: rgb(var(--vx-glass) / 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.vxm .vxm-tabbar, html.vxm .vxm-tour__card, html.vxm .vxm-tour__bar, html.vxm .vxm-win > .vx-ornament.vxm-acc { --vx-glass-a: 0.96; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================
   Windows that were tuned for the v4 sheet header
   ============================================================ */
html.vxm .vxm-win.sa-win--contact > .vx-window__body { padding: 6px var(--vxm-pad) var(--vxm-bottom); }

/* Case facts on a phone are two columns: an odd last tile spans the row instead of leaving a hole */
html.vxm .vxm-win.vxw-win .vxw-facts > .vxw-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The Overview's mini "How it works" canvas at phone width: three nodes share about 270px, so the
   columns sit closer and the node padding is slimmer; titles like "Component" fit inside their node
   (12px is the floor) and the step number keeps clear of the logo */
html.vxm .vxm-win.vxw-win .vxw-minicard .vxw-flow.is-mini { padding: 14px; }
html.vxm .vxm-win.vxw-win .vxw-minicard .vxw-flow.is-mini .vxw-flow__nodes { column-gap: 16px; }
html.vxm .vxm-win.vxw-win .vxw-minicard .vxw-flow.is-mini .vxw-node { padding: 12px 6px; }
html.vxm .vxm-win.vxw-win .vxw-minicard .vxw-flow.is-mini .vxw-node__t b { font-size: 12px; }
html.vxm .vxm-win.vxw-win .vxw-minicard .vxw-flow.is-mini .vxw-node__n { top: 6px; right: 8px; }

/* Tab bar: tabs size to their label with real side padding, so a long label like
   "Experience" never touches the edges of the selected lens */
html.vxm .vxm-tabbar__btn { flex: 1 1 auto; padding: 0 12px; }