/* ═══ SONO v3 — PREVIEW (2026-10-19, ?ui=v3 on a platform Showcase) — see showcase-v3.js and platform UI-VISION.md ═══
   html.v3 = the preview is on · html.v3d = it is a desktop/tablet (≥900 px, not a touchscreen) · html.v3-open = the rail is open.
   MOTION.md: silver light only (--accent), the house curve cubic-bezier(.16,1,.3,1), exits ~60% of entrances, transform /
   opacity / clip-path only, reduced motion = still. */
:root{--v3-rail:72px;--v3-rail-open:244px;--v3-gap:20px;--v3-left:calc(var(--v3-gap) + var(--v3-rail) + 52px)}   /* 144: past the rail AND its edge tab */
/* v3.4: the menu stays open (Michael: "same as concierge panel (open but HIDE button)") — so the pages make room for it */
html.v3d.v3-open{--v3-left:calc(var(--v3-gap) + var(--v3-rail-open) + 52px)}   /* 316 */

/* ── 1 · THE RAIL: the dock, as a glass column ─────────────────────────────────────────────────────────────────────── */
html.v3d body #hud{
  position:fixed!important;left:var(--v3-gap)!important;right:auto!important;top:50%!important;bottom:auto!important;
  transform:translateY(-50%)!important;width:var(--v3-rail-open)!important;max-width:none!important;height:auto!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:2px!important;
  padding:10px 10px 10px 10px!important;border-radius:26px!important;z-index:72!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 34%,rgba(255,255,255,.05)),rgba(12,16,20,.58)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.7) brightness(1.04)!important;backdrop-filter:blur(28px) saturate(1.7) brightness(1.04)!important;
  border:1px solid rgba(255,255,255,.2)!important;border-right-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.07),0 26px 70px rgba(0,0,0,.5)!important;
  /* one shape: the same plate opens and closes (clip, not width — MOTION §4/§6.10) */
  clip-path:inset(0 calc(var(--v3-rail-open) - var(--v3-rail)) 0 0 round 26px);
  transition:clip-path .26s cubic-bezier(.7,0,.84,0)}
html.v3d.v3-open body #hud{clip-path:inset(0 0 0 0 round 26px);transition:clip-path .44s cubic-bezier(.16,1,.3,1),background-color .3s;
  /* translucent floating glass, open too (Michael 10-19 night). NB the ".93 because WebKit drops the blur under clip-path"
     of v3.1 was the test harness: headless WebKit draws no backdrop blur at all, clipped or not — real Safari does. */
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 34%,rgba(255,255,255,.06)),rgba(12,16,20,.7)!important}
/* the right edge travels with the clip: a rounded cap that sits at the closed edge and slides out with the open */
html.v3d body #hud .v3-cap{position:absolute;top:-1px;bottom:-1px;left:calc(var(--v3-rail) - 27px);width:27px;border:1px solid rgba(255,255,255,.2);border-left:0;
  border-radius:0 26px 26px 0;pointer-events:none;transform:translateX(0);transition:transform .26s cubic-bezier(.7,0,.84,0);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
html.v3d.v3-open body #hud .v3-cap{transform:translateX(calc(var(--v3-rail-open) - var(--v3-rail)));transition:transform .44s cubic-bezier(.16,1,.3,1)}
html.v3d body #hud #navTabs{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;width:100%!important;min-width:0!important;padding:0!important}
html.v3d body #hud .m2-liquid,html.v3d body #hud .hud-div,html.v3d body #hud #dock{display:none!important}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu){
  flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:18px!important;
  width:100%!important;min-width:0!important;height:46px!important;padding:0 0 0 13px!important;margin:0!important;border:0!important;
  border-radius:16px!important;background:none!important;box-shadow:none!important;cursor:pointer;
  font:500 12px/1 var(--sans)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(255,255,255,.74)!important;
  transition:background .2s,color .2s}
html.v3d body #hud .v3-menu{display:flex;margin-bottom:4px!important}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu) i{flex:none;width:24px!important;height:24px!important;display:grid;place-items:center;transform:none!important;color:inherit!important;filter:none}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu) i svg{width:22px!important;height:22px!important}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu) span{display:block!important;white-space:nowrap;opacity:0;transform:translateX(-8px)!important;
  transition:opacity .16s,transform .2s cubic-bezier(.7,0,.84,0)!important;color:inherit!important}
html.v3d.v3-open body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu) span{opacity:1;transform:none!important;
  transition:opacity .3s calc(var(--i,0) * 28ms + 70ms),transform .44s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 28ms + 70ms)!important}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu):hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
/* no box around the current page (Michael 10-20: "not have highlight of menu item inside menu") — it simply reads white */
html.v3d body #hud #navTabs .tab.active{background:transparent!important;color:#fff!important;box-shadow:none!important}
html.v3d body #hud #navTabs .tab.active i{filter:none!important}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu):focus-visible{outline:2px solid var(--accent)!important;outline-offset:-2px}
html.v3d body #hud #navTabs .tab:focus-visible i{outline:none!important}
html.v3d body #hud #hudCtl{display:flex!important;flex-direction:row;align-items:center;gap:6px;padding:8px 0 2px 8px!important;margin-top:6px!important;border-top:1px solid rgba(255,255,255,.1)}
/* closed: the door's title beside the rail, under the pointer */
#v3Tip{position:fixed;left:0;top:0;z-index:80;pointer-events:none;padding:8px 12px;border-radius:10px;font:500 11px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(14,18,22,.7);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px rgba(0,0,0,.4);opacity:0;transition:opacity .18s}
#v3Tip.on{opacity:1}
html:not(.v3d) #v3Tip,html:not(.v3d) #hud .v3-menu,html:not(.v3d) #hud .v3-cap{display:none!important}   /* phones keep their dock exactly as it was */

/* ── 1b · SUB-MENUS INSIDE THE RAIL (v3.1) ─────────────────────────────────────────────────────────────────────────── */
/* the rail never runs under the logo or the footer bar: its door list scrolls inside it when a sub-menu is long */
/* centred in the viewing area between the header and the footer bar (showcase-v3.js Rail.place measures it closed), and it
   grows DOWN from there when a door's pages open */
html.v3d body #hud{top:var(--v3-rail-top,calc(var(--sales-header-h,112px) + 14px))!important;transform:none!important;
  max-height:var(--v3-rail-max,calc(100vh - var(--sales-header-h,112px) - var(--foot-h,81px) - 28px))!important}
@media (max-height:860px){
  html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab,.v3-menu){height:40px!important}
  html.v3d body #hud #navTabs .v3-chev{height:40px;margin-top:-42px}
}
html.v3d body #hud #navTabs{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:none}
html.v3d body #hud #navTabs::-webkit-scrollbar{display:none}
html.v3d body #hud #navTabs>*{flex-shrink:0!important}
html.v3d.v3-open body #hud #navTabs.v3-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
html.v3d.v3-open body #hud #navTabs.v3-more-up{-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
html.v3d.v3-open body #hud #navTabs.v3-more.v3-more-up{-webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent)}   /* rows keep their height; the list scrolls (they squashed under a long sub-menu) */
html.v3d body #hud :is(.v3-menu,#hudCtl){flex:none!important}
/* Demos (a hub's collection) is a door like the others; Concierge comes back into the rail (all pages in one menu) */
html.v3d body #hud #navTabs .v3-tab{display:flex}
html.v3d.is-home body #hud #navTabs .tab[data-key="concierge"]:not([hidden]){display:flex!important}
html:not(.v3d) #navTabs :is(.v3-tab,.v3-chev,.v3-sub){display:none!important}
/* the chevron sits at the right end of its door's row (a sibling, so the door's own button still opens the door) */
html.v3d body #hud #navTabs .v3-chev{all:unset;box-sizing:border-box;position:relative;z-index:1;flex:none;align-self:flex-end;width:40px;height:46px;margin:-48px 4px 0 0;
  display:grid;place-items:center;cursor:pointer;border-radius:12px;color:rgba(255,255,255,.55);visibility:hidden;opacity:0;transition:opacity .16s,color .2s,background .2s}
html.v3d.v3-open body #hud #navTabs .v3-chev{visibility:visible;opacity:1;transition:opacity .3s .14s,color .2s,background .2s}
html.v3d body #hud #navTabs .v3-chev svg{width:16px;height:16px;transition:transform .34s cubic-bezier(.16,1,.3,1)}
html.v3d body #hud #navTabs .v3-chev[aria-expanded="true"]{color:#fff}
html.v3d body #hud #navTabs .v3-chev[aria-expanded="true"] svg{transform:rotate(90deg)}
html.v3d body #hud #navTabs .v3-chev:hover{color:#fff;background:rgba(255,255,255,.08)}
html.v3d body #hud #navTabs .v3-chev:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the pages: under the door, on a thin silver line from its icon; no height animation — the rows rise in */
html.v3d body #hud #navTabs .v3-sub{flex:none;display:grid;gap:1px;position:relative;padding:0 0 8px;margin:0 0 2px}
html.v3d body #hud #navTabs .v3-sub[hidden],html.v3d:not(.v3-open) body #hud #navTabs .v3-sub{display:none!important}
html.v3d body #hud #navTabs .v3-sub::before{content:"";position:absolute;left:25px;top:-4px;bottom:14px;width:1px;background:linear-gradient(rgba(215,223,229,.4),rgba(215,223,229,.06))}
html.v3d body #hud #navTabs .v3-sub button{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px 0 55px;border-radius:12px;
  font:400 13px/1.2 var(--sans);letter-spacing:.01em;color:rgba(255,255,255,.7);white-space:nowrap;transition:background .2s,color .2s}
html.v3d body #hud #navTabs .v3-sub button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.v3d body #hud #navTabs .v3-sub button em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:rgba(255,255,255,.42)}
html.v3d body #hud #navTabs .v3-sub button::before{content:"";position:absolute;left:22px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;border:1px solid rgba(215,223,229,.45);background:#0d1115}
html.v3d body #hud #navTabs .v3-sub button:hover{color:#fff;background:rgba(255,255,255,.06)}
html.v3d body #hud #navTabs .v3-sub button[aria-current="page"]{color:#fff}
html.v3d body #hud #navTabs .v3-sub button[aria-current="page"]::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb,215,223,229),.8)}
html.v3d body #hud #navTabs .v3-sub button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
html.v3d body #hud #navTabs .v3-sub small{display:block;padding:10px 12px 4px 55px;font:500 9px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--accent-rgb,215,223,229),.7)}
html.v3d body #hud #navTabs .v3-sub.on>*{animation:v3SubIn .42s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j,0) * 26ms)}
@keyframes v3SubIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* everything that sat at the left edge moves past the rail; the bottom, where the dock was, goes to the content */
html.v3d #isLeft{left:var(--v3-left)!important}
html.v3d body:not(.on-asset-stage) #console{left:var(--v3-left)!important}
html.v3d #assetStage .iv-toolbar{left:var(--v3-left)!important}
html.v3d.m2[data-showcase-ui="glass"] body #assetStage.iv-interactive.iv-view-only #ivCanvas,
html.v3d.m2[data-showcase-ui="glass"] body.m2-side #assetStage.iv-interactive.iv-view-only.console #ivCanvas{left:var(--v3-left)!important}

/* ── 2 · THE GLASS TITLE ───────────────────────────────────────────────────────────────────────────────────────────── */
#v3Glass{position:absolute;pointer-events:none;z-index:3}
/* oversized type: a bigger base for the Home headline (the chrome title still shrinks it to fit its centre column) */
html.v3d #isHome #isHeroC .is-heroc-h{font-size:clamp(56px,4.75vw,96px)}
/* once the glass has the letters, the chrome letters step back (the canvas fades up over them in ~0.4 s) */
html.v3-glass #isHeroC .is-heroc-h .ct-l,html.v3-glass #isHeroC .is-heroc-h .ct-ghost{opacity:0!important;transition:opacity .6s cubic-bezier(.16,1,.3,1) .25s}

/* ── 3 · THE 3D DASHBOARD: framed panels ───────────────────────────────────────────────────────────────────────────── */
html.v3d #sxrSide .ci-tours{display:none!important}   /* the tabs beside ← Home already choose the view */
html.v3d #sxrSide .ci-card{position:relative;border-radius:10px!important;border:1px solid rgba(215,223,229,.16)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important}
html.v3d #sxrSide .ci-card::before,html.v3d #assetStage.iv-interactive #ivCanvas::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;border-radius:inherit;--c:rgba(215,223,229,.7);
  background:linear-gradient(var(--c),var(--c)) top left/16px 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/16px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px 16px no-repeat}
html.v3d #assetStage.iv-interactive #ivCanvas{box-shadow:0 0 0 1px rgba(215,223,229,.16),0 24px 60px rgba(0,0,0,.45)!important}
html.v3d #sxrSide .v3-view .v3-view-t{margin:2px 0 0;font:400 22px/1.15 var(--serif,Georgia,serif);color:#fff;letter-spacing:-.01em}
html.v3d #sxrSide .v3-view .v3-view-s{margin:6px 0 0;font:400 12px/1.4 var(--sans);color:rgba(255,255,255,.66)}
html.v3d #sxrSide .v3-view .ci-stats{margin-top:14px}
html.v3d #sxrSide .v3-view .v3-view-src{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;align-items:baseline;
  font:400 12px/1.3 var(--sans);color:rgba(255,255,255,.78)}
html.v3d #sxrSide .v3-view .v3-view-src span{font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--accent-rgb,215,223,229),.8)}

/* ── 4 · THE HOME, COMPOSED LIKE A GAME'S MAIN SCREEN (v3.2, html.v3w = ≥1000 × 700 on a desktop) ──────────────────────── */
/* anywhere else the wrappers vanish and the Home is exactly as it was */
html:not(.v3w) #isHome :is(.v3-center,.v3-col){display:contents}
/* the picture breathes: the side panel and its tab (Concierge is a core option → its full page), the strip, the offer card
   (Offers is a door), the quote and the radar step aside */
html.v3w #isHome :is(#isSide,.is-sidetab,.is-strip,.is-now,.is-quote,.is-radar){display:none!important}
html.v3w #isHome .is-scrim{background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(4,7,11,.34),rgba(4,7,11,0) 72%),
  linear-gradient(180deg,rgba(4,7,11,.4),rgba(4,7,11,0) 22%,rgba(4,7,11,0) 74%,rgba(4,7,11,.42))}
/* CENTRE: logo + glass title, the three ways in under it — one block, centred in the viewing area */
html.v3w #isHome .v3-center{position:absolute;z-index:3;left:var(--v3-left);right:var(--v3-left);top:var(--sales-header-h,112px);bottom:var(--foot-h,81px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,4vh,44px);pointer-events:none}
html.v3w #isHome .v3-center .is-heroc{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
  width:min(100%,1040px);flex:none;pointer-events:none}
html.v3w #isHome #isHeroC .is-heroc-h{font-size:clamp(60px,6vw,124px)}   /* oversized: the centre is the title's alone now */
html.v3w #isHome .v3-center .is-left{position:relative!important;inset:auto!important;transform:none!important;margin:0!important;width:auto!important;max-width:none!important;padding:0;display:block;pointer-events:auto}
html.v3w #isHome .v3-center :is(.is-loc,.is-title,.is-sub){display:none}
html.v3w #isHome .v3-center .is-acts{margin:0;padding:0;display:grid;grid-template-columns:auto auto;justify-content:center;gap:18px 40px}
html.v3w #isHome .v3-center .is-acts li:first-child{grid-column:1 / -1;justify-self:center}
/* the two quieter ways in: an icon in a thin glass ring, the name in tracked capitals */
html.v3w #isHome .v3-center .is-acts button{gap:14px;padding:2px 4px;font:500 11.5px/1 var(--is-sans,var(--sans));letter-spacing:.24em;color:rgba(255,255,255,.88);
  text-shadow:0 1px 16px rgba(0,0,0,.6);transition:color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
html.v3w #isHome .v3-center .is-acts button:not(.main) i{width:42px;height:42px;border:1px solid rgba(215,223,229,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),rgba(10,14,18,.3);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
html.v3w #isHome .v3-center .is-acts button:not(.main) svg{width:19px;height:19px}
html.v3w #isHome .v3-center .is-acts button:not(.main):hover{color:#fff;transform:translateY(-2px)}
html.v3w #isHome .v3-center .is-acts button:not(.main):hover i{border-color:rgba(215,223,229,.6)}
/* ENTER EXPERIENCE: the one framed call to action — a floating glass capsule with the silver ring */
html.v3w #isHome .v3-center .is-acts .main{gap:18px;padding:8px 34px 8px 8px;border-radius:999px;font-size:13px;letter-spacing:.3em;color:#fff;
  border:1px solid rgba(215,223,229,.5);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08)),rgba(10,14,18,.38);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 22px 60px -22px rgba(0,0,0,.8),0 0 44px rgba(var(--is-accent-rgb,215,223,229),.14);
  transition:border-color .25s,box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1)}
html.v3w #isHome .v3-center .is-acts .main span{padding:0}
html.v3w #isHome .v3-center .is-acts .main i{width:48px;height:48px}
html.v3w #isHome .v3-center .is-acts .main:hover{transform:translateY(-2px);border-color:rgba(215,223,229,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 26px 70px -22px rgba(0,0,0,.85),0 0 60px rgba(var(--is-accent-rgb,215,223,229),.26)}
html.v3w #isHome .v3-center .is-acts button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:1180px){   /* a narrower screen: the row of ways in tightens */
  html.v3w #isHome .v3-center .is-acts{gap:16px 24px}
  html.v3w #isHome .v3-center .is-acts button:not(.main){letter-spacing:.18em}
}
/* THE EDGE TAB — the menu's open/close tab on the rail's edge (the Home panel's old tab): ‹ HIDE open, › MENU hidden */
.v3-tog{display:none}
html.v3d .v3-tog{all:unset;box-sizing:border-box;position:fixed;z-index:73;left:calc(var(--v3-gap) + var(--v3-rail) - 1px);top:calc(var(--v3-rail-top,120px) + 14px);transform:none;
  display:flex!important;flex-direction:column;align-items:center;gap:10px;padding:12px 6px 14px;cursor:pointer;pointer-events:auto;color:#fff;
  border:1px solid rgba(255,255,255,.2);border-left:0;border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(12,16,20,.58);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 40px -14px rgba(0,0,0,.6);transition:transform .26s cubic-bezier(.7,0,.84,0),border-color .2s,background-color .2s}
html.v3d.v3-open .v3-tog{transform:translateX(calc(var(--v3-rail-open) - var(--v3-rail)));transition:transform .44s cubic-bezier(.16,1,.3,1),border-color .2s}
html.v3d .v3-tog i{font-style:normal;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb,215,223,229),.55);border-radius:50%;color:var(--accent);font-size:13px;line-height:1}
html.v3d .v3-tog span{writing-mode:vertical-rl;font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase}
html.v3d .v3-tog:hover{border-color:rgba(var(--accent-rgb,215,223,229),.6);background-color:rgba(var(--accent-rgb,215,223,229),.12)}
html.v3d .v3-tog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html:not(.v3d) .v3-tog{display:none!important}

@media (prefers-reduced-motion:reduce){
  html.v3d body #hud,html.v3d body #hud .v3-cap,html.v3d body #hud :is(#navTabs .tab,.v3-menu) span{transition:none!important}
  html.v3d body #hud #navTabs .v3-sub.on>*{animation:none!important}
  html.v3d body #hud #navTabs .v3-chev svg,html.v3d .v3-tog{transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  html.v3d body #hud,#v3Tip{background:#12171b!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.v3d .v3-tog{background:#12171b!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* ── v3.5 (10-19 night, the design review) ─────────────────────────────────────────────────────────────────────────── */
/* the edge tab is the menu's open/close now: the Menu row leaves (every door fits at 1440×900); rows tighten to 44 / 34 */
html.v3d body #hud .v3-menu{display:none!important}
html.v3d body #hud :is(#navTabs .tab,#navTabs .v3-tab){height:44px!important}
html.v3d body #hud #navTabs .v3-chev{height:44px;margin-top:-46px}
html.v3d body #hud #navTabs .v3-sub button{height:34px}
/* nothing sits under the menu: the viewer's old "Explore a space" picker steps aside (the menu's Explore lists every space) */
html.v3d #assetStage .iv-spaces{display:none!important}

/* THE 3D DOOR IS THE VIEW (Michael 10-20: "3D/360 has side panel for some reason"): no At-a-glance panel or its tab on the
   asset stage in v3, and the stage takes the width the panel held */
html.v3d body.on-asset-stage #sxrSide,html.v3d body.on-asset-stage #sxrSideTab{display:none!important}
html.v3d.m2 body.on-asset-stage.m2-side.m2-side-open #app{right:0!important}

/* HOVER MENU (Michael 10-20): pointer devices — no edge tab, no in-rail button. Touch — the in-rail Menu control, no edge tab.
   THE PAGE MAKES ROOM (Michael 10-20 later: "I'd like our menus don't overlap each other, they somehow adjust according to
   whatever panel is open"): the open rail no longer floats over the page — --v3-left follows it (316 open, 144 closed, the
   v3.4 rule above) and every page that sits on --v3-left slides over with the rail's own curve instead of jumping. */
html.v3d.v3-hover .v3-tog{display:none!important}
html.v3d.v3-hover #console{transition:opacity .22s var(--e-in),transform .22s var(--e-in),filter .22s var(--e-in),left .44s cubic-bezier(.16,1,.3,1)}
html.v3d.v3-hover :is(#isLeft,#assetStage .iv-toolbar,#ivCanvas){transition:left .44s cubic-bezier(.16,1,.3,1)}
html.v3d.v3-hover #isHome .v3-center{transition:left .44s cubic-bezier(.16,1,.3,1),right .44s cubic-bezier(.16,1,.3,1)}
html.v3d.v3-hover body #hud{z-index:80!important}
html.v3d:not(.v3-hover) .v3-tog{display:none!important}
html.v3d:not(.v3-hover) body #hud .v3-menu{display:flex!important}
/* the guided tour's act chip and facts start past the rail (QA 10-21: "878 … on floors 4–21" sat half behind the rail for the
   first beat, at 1024–1440, on every v3 Showcase) */
html.v3d #dtStage :is(.dt-facts,.dt-act){left:var(--v3-left)!important;transition:left .44s cubic-bezier(.16,1,.3,1)}
/* the Overview's chapter row fits between Back to home and the 01 / 05 counter below 1200 px: the chapter you're on keeps its
   name, the others show their icon (QA 10-21, 1024: Back to home sat on Overview, Contact under the counter) */
@media (max-width:1199px){
  html.v3d .ov-deck .ov-menu [data-ov-ch]:not(.active) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ── 5 · THE DOCK PILL (Michael 26 Oct 2026, html.v3-dock: experience.nav 'dock' · ?nav=dock · ?nav=rail) ─────────────────────
   Round 2 (Michael, the same day, on the dock inside the footer bar: "lets go back to shorter glass menu above and SONO
   logo/social/contact strip under it. that was version i liked best"): no left rail; the same doors in a compact glass pill,
   centred, floating just above the footer strip (logo + contacts left, Instagram right, as always) — the v2 dock's shape: icon
   over a small-caps label, the active door lit with motion2's hairline under it, Full screen at its end. Its glass is the rail's
   own (and the glass look's frost where a record has it). Pages end above it: ClientFoot.fit / motion2 measure from the pill
   again (html.v3-dock), exactly as they did from the classic dock. `:root` adds the weight that beats the rail's rules and the
   glass look's #hud rules (they load later). Desktop/tablet only (v3d); phones keep their bottom dock. */
html.v3d.v3-dock{--v3-left:32px}   /* every page takes the rail's width back (144 closed / 316 open with the rail) */
html.v3d.v3-dock:root body #hud{
  position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(var(--foot-h,81px) + var(--g-pill-off,12px))!important;
  transform:translateX(-50%)!important;width:max-content!important;max-width:calc(100vw - 48px)!important;height:auto!important;max-height:none!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:2px!important;padding:5px!important;margin:0!important;
  border:1px solid rgba(255,255,255,.2)!important;border-radius:24px!important;clip-path:none!important;z-index:72!important;overflow:visible!important;
  transition:border-color .2s!important}
html.gu.v3d.v3-dock:root body #hud{border-color:var(--gu-edge)!important}
html.v3d.v3-dock:root body #hud :is(.v3-menu,.v3-cap,.hud-div,#dock),html.v3d.v3-dock:root .v3-tog,html.v3d.v3-dock:root #v3Tip,
html.v3d.v3-dock:root body #hud #navTabs :is(.v3-chev,.v3-sub){display:none!important}
html.v3d.v3-dock:root body #hud #navTabs{display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:2px!important;flex:none!important;
  width:auto!important;min-width:0!important;max-height:none!important;padding:0!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn){
  flex-direction:column!important;justify-content:flex-start!important;align-items:center!important;gap:5px!important;flex:none!important;
  width:auto!important;min-width:60px!important;height:52px!important;padding:7px 10px 0!important;margin:0!important;border:0!important;border-radius:19px!important;
  background:none!important;box-shadow:none!important;cursor:pointer;transform:none!important;
  font:500 9px/1 var(--mono)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:rgba(255,255,255,.76)!important;transition:background .2s,color .2s!important}
html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn) i{flex:none;display:grid;place-items:center;width:20px!important;height:20px!important;border:0!important;background:none!important;
  box-shadow:none!important;transform:none!important;filter:none!important;animation:none!important;color:inherit}
html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn) i svg{width:19px!important;height:19px!important}
html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn) span{display:block!important;opacity:1!important;transform:none!important;animation:none!important;white-space:nowrap;
  transition:color .2s!important;color:inherit!important}
html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn):hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
html.v3d.v3-dock:root body #hud #navTabs .tab.active{color:#fff!important}
html.v3d.v3-dock:root body #hud #navTabs .tab.active i{color:var(--accent)!important;filter:drop-shadow(0 0 8px rgba(var(--accent-rgb,215,223,229),.55))!important}
html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn):focus-visible{outline:2px solid var(--accent)!important;outline-offset:-2px}
html.v3d.v3-dock:root body #hud .m2-liquid{display:block!important}
/* THE APPLE RISE (owner 28 Oct 2026: "I don't like the glass circle on icon inside menu but like how Apple has icons rise action"):
   no hover panel and no glow — the icon under the pointer rises and grows, its neighbours a little less (the macOS Dock). Pointer
   devices only. MOTION.md's hover lift is 2–4 px; the owner's call overrides it here (house curve, 260 ms). */
html.v3d.v3-dock:root body #hud #navTabs .tab.active i{filter:none!important}
@media (hover:hover){
  html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn):hover{background:none!important}
  html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn) i{transform-origin:50% 100%;transition:transform .26s cubic-bezier(.16,1,.3,1)!important}
  html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn):hover i{transform:translateY(-7px) scale(1.32)!important}
  html.v3d.v3-dock:root body #hud #navTabs .tab:has(+ .tab:hover) i,html.v3d.v3-dock:root body #hud #navTabs .tab:hover + .tab i{transform:translateY(-3px) scale(1.12)!important}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn) i,html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn):hover i,
  html.v3d.v3-dock:root body #hud #navTabs .tab:has(+ .tab:hover) i,html.v3d.v3-dock:root body #hud #navTabs .tab:hover + .tab i{transform:none!important;transition:none!important}
}
/* Full screen closes the row, after a hairline, labelled like the doors */
html.v3d.v3-dock:root body #hud #hudCtl{display:flex!important;flex:none!important;align-items:center;gap:0;padding:0 0 0 2px!important;margin:0 0 0 2px!important;border:0!important;
  border-left:1px solid rgba(255,255,255,.14)!important}
html.v3d.v3-dock:root body #hud #fsBtn{display:flex!important}
/* a narrow window: tighter doors (still ≥ 44 px each); narrower still, the pill's row scrolls with edge fades */
html.v3d.v3-dock.v3-dock-tight:root body #hud :is(#navTabs .tab,#fsBtn){min-width:50px!important;padding:7px 6px 0!important;font-size:8.5px!important;letter-spacing:.08em!important}
html.v3d.v3-dock.v3-dock-scroll:root body #hud{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:none}
html.v3d.v3-dock.v3-dock-scroll:root body #hud::-webkit-scrollbar{display:none}
html.v3d.v3-dock.v3-dock-scroll.v3-dock-more:root body #hud{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
html.v3d.v3-dock.v3-dock-scroll.v3-dock-less:root body #hud{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
html.v3d.v3-dock.v3-dock-scroll.v3-dock-more.v3-dock-less:root body #hud{-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)}
/* the Home's centre block keeps clear of the pill too */
html.v3w.v3-dock #isHome .v3-center{bottom:calc(var(--foot-h,81px) + var(--hud-h,62px) + 24px)}
@media (prefers-reduced-motion:reduce){html.v3d.v3-dock:root body #hud :is(#navTabs .tab,#fsBtn){transition:none!important}}

/* ── 5b · SEPARATE PILLS WITH THE HERO-CARD ACTION (owner 28 Oct 2026: "independent button instead of one menu grid like on site?"
   → "i thought there was a button/tab footer not full menu"; then, on the pill mock: "on sono site we had those four buttons at
   bottom of HERO … chrome border action and resizing … Can we do something like that here? It's better tho for sure").
   A mock by link only (?dock=pills, html.v3-pills; showcase-v3.js Dock.pills). Reference: sonoxr.media's hero cards
   (app/hero-navigation.css, the Novaverse cards): every door its own glass pill — an icon in a ring, its name — in ONE row of a set
   width that every door shares (Dock.pills: the natural row + room for one door to open). The open door, or the one under the
   pointer, widens (flex-grow 1.9), its ring fills chrome, its one line and number appear and a chrome rule draws along its foot;
   the others give way. At rest a door is its icon and name (the ring comes with the opening, which keeps the row compact).
   Desktop/tablet only (v3d); phones keep their bottom dock. Narrow windows: names only, no rings or lines. Make it yours (demos,
   the test links) rises above the row's left end, clear of it. */
html.v3d.v3-dock.v3-pills:root body #hud{border:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;padding:0!important;gap:8px!important;border-radius:0!important}
html.v3d.v3-dock.v3-pills:root body #hud::before,html.v3d.v3-dock.v3-pills:root body #hud::after{display:none!important}
html.v3d.v3-dock.v3-pills:root body #hud #navTabs{flex:1 0 auto!important;min-width:0!important;gap:8px!important}   /* grows into the set width, never shrinks under its doors (a row that can't fit goes tight, then scrolls) */
html.v3d.v3-dock.v3-pills:root body #hud #hudCtl{border-left:0!important;padding:0!important;margin:0!important;flex:none!important}
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn){position:relative!important;display:grid!important;grid-template-columns:auto auto;grid-template-areas:"ic nm" "ic ln";
  align-content:center!important;align-items:center!important;justify-content:start!important;column-gap:8px!important;row-gap:0!important;
  flex:1 1 0!important;min-width:fit-content!important;height:52px!important;padding:0 16px 0 13px!important;overflow:hidden!important;text-align:left;
  border:1px solid rgba(238,242,246,.18)!important;border-radius:999px!important;background:rgba(10,13,16,.5)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:inset 0 1px rgba(255,255,255,.1),0 18px 40px -18px rgba(0,0,0,.6)!important;
  font:500 14px/1.1 var(--is-sans,var(--sans,"Helvetica Neue",Arial,sans-serif))!important;letter-spacing:-.005em!important;text-transform:none!important;color:rgba(238,242,246,.88)!important;
  transition:flex-grow .55s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1),background-color .35s ease,border-color .35s ease,color .35s ease!important}
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn) i{grid-area:ic;display:grid!important;place-items:center;width:20px!important;height:20px!important;border-radius:50%!important;
  border:1px solid transparent!important;background:transparent!important;color:rgba(238,242,246,.92)!important;transform:none!important;filter:none!important;
  transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),background-color .35s ease,color .35s ease,border-color .35s ease!important}
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn) i svg{width:17px!important;height:17px!important}
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn) span{grid-area:nm;font:inherit!important;letter-spacing:inherit!important;text-transform:none!important;white-space:nowrap}   /* tablet widths style the name itself (small caps, tracked) */
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn) .pl-line{grid-area:ln;display:none;margin-top:3px;font:400 12px/1.2 var(--is-sans,var(--sans,sans-serif));color:rgba(238,242,246,.7);white-space:nowrap}
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn) .pl-n{grid-area:n;display:none;align-self:end;margin:0 0 10px 6px;font:500 10px/1 var(--mono,monospace);letter-spacing:.2em;color:rgba(238,242,246,.5)}
/* the chrome rule along the foot (the site's ::after accent) */
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn)::after{content:"";display:block!important;position:absolute;left:22px;right:22px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#f7f9fb,#c3cbd3 45%,#8e98a2 62%,#eef2f6);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
html.v3d.v3-dock.v3-pills:root body #hud .m2-liquid{display:none!important}
/* the open door (nothing under the pointer) — and, on pointer devices, whichever door is under it */
html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud:not(:has(:is(.tab,#fsBtn):is(:hover,:focus-visible))) #navTabs .tab.active,html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):focus-visible{
  flex-grow:1.9!important;padding-left:8px!important;grid-template-columns:auto auto auto!important;grid-template-areas:"ic nm n" "ic ln n"!important;background:rgba(64,72,80,.55)!important;border-color:rgba(238,242,246,.42)!important;color:#fff!important}
html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud:not(:has(:is(.tab,#fsBtn):is(:hover,:focus-visible))) #navTabs .tab.active i,html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):focus-visible i{width:34px!important;height:34px!important;background:#eef2f6!important;color:#0b0e11!important;border-color:#eef2f6!important}
html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud:not(:has(:is(.tab,#fsBtn):is(:hover,:focus-visible))) #navTabs .tab.active :is(.pl-line,.pl-n),html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):focus-visible :is(.pl-line,.pl-n){display:block}
html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud:not(:has(:is(.tab,#fsBtn):is(:hover,:focus-visible))) #navTabs .tab.active::after{transform:scaleX(.16)}
html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):focus-visible::after{transform:scaleX(1)}
html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn):focus-visible{outline:2px solid rgba(238,242,246,.7)!important;outline-offset:3px!important}
@media (hover:hover){
  html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):hover{flex-grow:1.9!important;padding-left:8px!important;grid-template-columns:auto auto auto!important;grid-template-areas:"ic nm n" "ic ln n"!important;background:rgba(64,72,80,.55)!important;border-color:rgba(238,242,246,.42)!important;color:#fff!important}
  html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):hover i{width:34px!important;height:34px!important;background:#eef2f6!important;color:#0b0e11!important;border-color:#eef2f6!important;transform:none!important}
  html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):hover :is(.pl-line,.pl-n){display:block}
  html.v3d.v3-dock.v3-pills:not(.pl-idle):root body #hud :is(#navTabs .tab,#fsBtn):hover::after{transform:scaleX(1)}
  html.v3d.v3-dock.v3-pills:root body #hud #navTabs .tab:has(+ .tab:hover) i,html.v3d.v3-dock.v3-pills:root body #hud #navTabs .tab:hover + .tab i{transform:none!important}   /* no Apple rise on the pills */
}
/* narrow windows: names only (no rings, lines or numbers); the open door keeps its fill and rule */
html.v3d.v3-dock.v3-pills.v3-dock-tight:root body #hud :is(#navTabs .tab,#fsBtn){padding:0 13px!important;height:46px!important;font-size:13px!important;column-gap:0!important}
html.v3d.v3-dock.v3-pills.v3-dock-tight:root body #hud :is(#navTabs .tab,#fsBtn) :is(i,.pl-line,.pl-n){display:none!important}
html.v3d.v3-dock.v3-pills #bpPill{bottom:calc(var(--foot-h,81px) + 12px + 52px + 16px)}
@media (prefers-reduced-motion:reduce){html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn),html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn)::after,html.v3d.v3-dock.v3-pills:root body #hud :is(#navTabs .tab,#fsBtn) i{transition:none!important}}

/* ── 5c · THE HOLO DECK (owner 28 Oct 2026: of three concepts drawn from his references — Plinth, Lobby, Holo deck — "C").
   Reference: the Luma Space smart-home board (glass icon nodes on a light circuit). By link only for now (?dock=holo, html.v3-holo;
   showcase-v3.js Dock.holo / holoLine). Reviewed as a concept by the design director first: one gentle line, not a ring (the ring
   Home lost the 25 Oct people test); names AND what's inside shown at rest (84% of visits never open a door); motion runs once, never
   loops (MOTION §8.2); no Tron floor grid; Full screen is a utility, out of the row. Each door is a glass disc (a little larger and
   lower in the middle, nearer the visitor); pointing lifts it and projects a tag; the open door fills chrome and rings once.
   Desktop/tablet only (v3d); phones keep their bottom dock. Narrow windows: smaller discs, names only. */
html.v3d.v3-dock.v3-holo:root body #hud{border:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
  padding:0 0 24px!important;gap:0!important;border-radius:0!important;overflow:visible!important;bottom:calc(var(--foot-h,81px) + var(--g-pill-off,20px))!important}
/* the deck's box holds its lowest (middle) doors, and its offset is the pages' own --g-pill-off, so every page ends above it (owner 28 Oct:
   "move deck up a bit higher to leave space for info bar below" — the doors' text sits ~24 px clear of the footer band) */
html.v3d.v3-dock.v3-holo{--g-pill-off:20px}
html.v3d.v3-dock.v3-holo:root body #hud::before,html.v3d.v3-dock.v3-holo:root body #hud::after{display:none!important}
html.v3d.v3-dock.v3-holo:root body #hud .m2-liquid{display:none!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs{gap:14px!important;align-items:flex-start!important;overflow:visible!important}
html.v3d.v3-dock.v3-holo:root body #hud > .hl-line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
html.v3d.v3-dock.v3-holo:root body #hud .hl-path{fill:none;stroke:rgba(232,240,246,.36);stroke-width:1.2}
html.v3d.v3-dock.v3-holo:root body #hud .hl-pulse{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:44 1000;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
html.v3d.v3-dock.v3-holo:root body #hud > .hl-line.run .hl-pulse{animation:hl-run 2.4s cubic-bezier(.16,1,.3,1) .5s 1 both}
@keyframes hl-run{0%{stroke-dashoffset:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-1000;opacity:0}}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab{position:relative!important;z-index:1;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;
  width:118px!important;min-width:0!important;height:auto!important;padding:0 0 2px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  overflow:visible!important;transform:translateY(var(--hy,0px))!important;font:600 12.5px/1 var(--is-sans,var(--sans,"Helvetica Neue",Arial,sans-serif))!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;color:rgba(238,242,246,.84)!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab i{position:relative;display:grid!important;place-items:center;width:58px!important;height:58px!important;border-radius:50%!important;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.3),rgba(255,255,255,.06) 62%)!important;border:1px solid rgba(232,240,246,.45)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 0 5px rgba(232,240,246,.05),0 0 26px rgba(220,232,240,.18)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#eef4f8!important;filter:none!important;transform:scale(var(--hs,1))!important;transition:transform .3s cubic-bezier(.7,0,.84,0),background .3s,border-color .3s!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab i svg{width:22px!important;height:22px!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab > span:not(.hl-tag){display:block!important;margin-top:11px;font:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;white-space:nowrap;opacity:1!important;transform:none!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-meta{display:block;margin-top:6px;font:400 11.5px/1.2 var(--is-sans,var(--sans,sans-serif));letter-spacing:0;text-transform:none;color:rgba(238,242,246,.66);white-space:nowrap}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-tag{position:absolute;left:50%;bottom:calc(100% + 26px);width:212px;margin-left:-106px;padding:11px 14px 12px;border-radius:12px;text-align:left;pointer-events:none;
  background:linear-gradient(180deg,rgba(226,236,244,.17),rgba(226,236,244,.05));border:1px solid rgba(232,240,246,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 0 30px rgba(220,232,240,.14);letter-spacing:0;text-transform:none;opacity:0!important;transform:translateY(8px)!important;transition:opacity .25s cubic-bezier(.7,0,.84,0),transform .3s cubic-bezier(.7,0,.84,0)!important}   /* !important: the dock's own span rule shows every span */
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-tag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:24px;background:linear-gradient(180deg,rgba(232,240,246,.7),rgba(232,240,246,0))}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-tag b{display:block;font:500 9.5px/1 var(--mono,monospace);letter-spacing:.22em;text-transform:uppercase;color:rgba(238,242,246,.6)}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-tag strong{display:block;margin-top:6px;font:600 15px/1.15 var(--is-sans,var(--sans,sans-serif));color:#fff}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-tag em{display:block;margin-top:4px;font:400 12px/1.3 var(--is-sans,var(--sans,sans-serif));font-style:normal;color:rgba(238,242,246,.78)}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:is(:hover,:focus-visible){color:#fff!important;background:none!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:is(:hover,:focus-visible) i{transition:transform .55s var(--sxr-ease,cubic-bezier(.16,1,.3,1)),background .3s,border-color .3s!important;transform:translateY(-8px) scale(calc(var(--hs,1) * 1.08))!important;
  border-color:rgba(255,255,255,.85)!important;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.45),rgba(255,255,255,.1) 62%)!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:is(:hover,:focus-visible) .hl-tag{opacity:1!important;transform:none!important;transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:focus-visible{outline:0!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:focus-visible i{outline:2px solid #fff;outline-offset:4px}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab.active{color:#fff!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab.active i{background:radial-gradient(circle at 35% 28%,#fff,rgba(226,234,241,.6) 70%)!important;color:#0b0e11!important;border-color:#fff!important;
  box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 36px rgba(255,255,255,.42)!important}
html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab.active i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(255,255,255,.7);opacity:0;animation:hl-ring 1.4s cubic-bezier(.16,1,.3,1) 1 both}
@keyframes hl-ring{from{transform:scale(.9);opacity:.9}to{transform:scale(1.55);opacity:0}}
@media (hover:hover){html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:has(+ .tab:hover) i,html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab:hover + .tab i{transform:scale(var(--hs,1))!important}}   /* no Apple rise here */
/* Full screen: a utility, out of the deck — it closes the footer band on the right as a bare icon (Dock.holoFoot); the socials move left */
html.v3d.v3-dock.v3-holo:root body #hud #hudCtl{display:none!important}
html.v3d.v3-holo #clientFoot .cf-methods.cf-soc{margin-left:6px;padding-left:12px;padding-right:0;border-left:1px solid rgba(238,242,246,.14);border-right:0}   /* the hairline now sits between contacts and socials, none trailing */
html.v3d.v3-holo #clientFoot .cf-fs{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:8px;background:none;color:rgba(238,242,246,.86);cursor:pointer;transition:color .2s}
html.v3d.v3-holo #clientFoot .cf-fs svg{width:22px;height:22px;display:block}
html.v3d.v3-holo #clientFoot .cf-fs:hover{color:#fff}
html.v3d.v3-holo #clientFoot .cf-fs:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* the Home's title block keeps clear of the raised deck and the tags it projects */
html.v3d.v3-holo.wl #isHome .wl-hero{bottom:calc(var(--foot-h,81px) + 196px)}
/* narrow windows: smaller discs, names only (no counts, no tags) */
html.v3d.v3-dock.v3-holo.v3-dock-tight:root body #hud #navTabs{gap:6px!important}
html.v3d.v3-dock.v3-holo.v3-dock-tight:root body #hud #navTabs .tab{width:92px!important;font-size:11px!important;letter-spacing:.1em!important}
html.v3d.v3-dock.v3-holo.v3-dock-tight:root body #hud #navTabs .tab i{width:46px!important;height:46px!important}
html.v3d.v3-dock.v3-holo.v3-dock-tight:root body #hud #navTabs .tab :is(.hl-meta,.hl-tag){display:none!important}
/* Make it yours (demos, test links) rises clear of the deck's left end */
html.v3d.v3-dock.v3-holo #bpPill{bottom:calc(var(--foot-h,81px) + 176px)}
@media (prefers-reduced-motion:reduce){html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab i,html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab .hl-tag{transition:none!important}html.v3d.v3-dock.v3-holo:root body #hud > .hl-line .hl-pulse,html.v3d.v3-dock.v3-holo:root body #hud #navTabs .tab.active i::after{animation:none!important;opacity:0!important}}

/* ── 6 · ONE PAGE GRAMMAR (Michael 26 Oct 2026, round 2: "A lot of the pages are crowded up top, some icon arrows/circles off,
   and again want everything on viewing screen to be aligned/designed to please eye"). With the dock pill (html.v3-dock — SONO),
   every door's page sits in ONE frame and starts with ONE control row:
     the frame   — the console: from --g-top (the header + 8) to --g-bottom (16 above the pill), --g-side in from each edge;
     the row     — 44 px glass controls on one baseline: Back to … left (the frame's edge) · the page's tabs centred · a pager or
                   a page action right (the frame's edge);
     the content — 16 under the row, the frame's full width (reading pages: one centred column, even margins);
     the circles — every round button 44 px, its icon optically centred (a drawn chevron, not a text glyph).
   Decoration that says nothing (the brackets beside the Gallery tabs) steps aside. Desktop/tablet only (v3d). ── */
html.v3d.v3-dock{--g-side:32px;--g-top:calc(var(--sales-header-h,112px) + 8px);--g-row:44px;--g-gap:16px;
  --g-pill-off:12px;--g-bottom:calc(var(--foot-h,81px) + var(--g-pill-off) + var(--hud-h,64px) + var(--g-gap));
  --g-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E")}
/* the frame */
html.v3d.v3-dock body:not(.on-asset-stage) #viewport #console{top:var(--g-top)!important;left:var(--g-side)!important;right:var(--g-side)!important;bottom:var(--g-bottom)!important}
/* Back to …: the row's left end, 44 tall */
html.v3d.v3-dock body #sxrBack{left:var(--g-side)!important;top:var(--g-top)!important;height:var(--g-row);min-height:var(--g-row);padding:0 18px 0 15px;box-sizing:border-box}
/* the deck pages (Overview · Explore · Gallery): the tabs pill is the row; the stage starts 16 under it, edge to edge of the frame */
html.v3d.v3-dock .story-page.ov-deck{border-radius:0}
html.v3d.v3-dock .ov-deck .ov-menu{top:0!important;height:var(--g-row);box-sizing:border-box;padding:3px;align-items:center}
html.v3d.v3-dock .ov-deck .ov-menu button{min-height:36px;height:36px;padding:0 16px}
html.v3d.v3-dock .ov-deck .ov-ind{top:3px;bottom:3px}
html.v3d.v3-dock .ov-deck :is(.ov-stage,.ov3-stage){inset:calc(var(--g-row) + var(--g-gap)) 0 0!important}
/* the pager: the row's right end */
html.v3d.v3-dock .ov-deck .ov-pager{top:0!important;right:0!important;bottom:auto!important;height:var(--g-row);gap:12px}
/* every round button: 44, its chevron drawn and centred */
html.v3d.v3-dock :is(.ov-pager button,.ov-step button,.ov3-arr,.ov3-rb,.ov-open){display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px;
  padding:0!important;line-height:1;text-align:center;box-sizing:border-box;flex:none}
html.v3d.v3-dock :is(.ov-pager button,.ov-step button){display:flex!important;align-items:center;justify-content:center;font-size:0!important;line-height:0!important;color:#fff}   /* flex: the hidden glyph and the drawn chevron share one centre */
html.v3d.v3-dock :is(.ov-pager button,.ov-step button)::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--g-chev) center/contain no-repeat;mask:var(--g-chev) center/contain no-repeat}
html.v3d.v3-dock :is(.ov-pager .ov-prev,.ov-step [data-sec-d="-1"])::before{transform:scaleX(-1)}
html.v3d.v3-dock :is(.ov3-arr,.ov3-rb,.ov-open) svg{width:18px;height:18px;display:block}
/* the documents browser: its filter row is the tabs pill, centred, no full-width strip; the cards keep to the frame */
html.v3d.v3-dock .explore-browser>.mg-scope{position:relative;display:flex;justify-content:center;align-items:center;height:var(--g-row);min-height:var(--g-row);margin:0!important;padding:0!important;
  background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.v3d.v3-dock .explore-browser>.mg-scope .mg-bar{padding:0!important;margin:0!important;background:none!important;border:0!important;min-height:0}
html.v3d.v3-dock .explore-browser>.mg-scope .mg-row{display:flex;gap:2px;height:var(--g-row);box-sizing:border-box;padding:3px;margin:0 auto;border-radius:999px;align-items:center;
  border:1px solid var(--gu-edge,rgba(255,255,255,.16));background:var(--gu-fill,rgba(16,22,27,.72));-webkit-backdrop-filter:blur(34px) saturate(1.5) brightness(.72);backdrop-filter:blur(34px) saturate(1.5) brightness(.72);
  box-shadow:var(--gu-hi,inset 0 1px 0 rgba(255,255,255,.08))}
html.v3d.v3-dock .explore-browser>.mg-scope .mg-row button{height:36px;min-height:36px;margin:0;border-radius:999px}
html.v3d.v3-dock .explore-browser .mg-wall.mh-grid{padding:var(--g-gap) 0 0!important}
/* reading pages (Features · Buy · What's inside): one centred column, its top 16 under the row */
html.v3d.v3-dock :is(.eg-page,.pp-page){padding-top:calc(var(--g-row) + var(--g-gap))!important;padding-left:0!important;padding-right:0!important}
html.v3d.v3-dock :is(.eg-page,.pp-page)>*{max-width:1240px;margin-left:auto;margin-right:auto}
/* 3D/360º: ← Home and the view tabs are the row; the view sits 16 under it, inside the frame */
html.v3d.v3-dock #assetStage .iv-toolbar{left:var(--g-side)!important;top:var(--g-top)!important}
html.v3d.v3-dock.m2[data-showcase-ui="glass"] body #assetStage.iv-interactive.iv-view-only #ivCanvas{
  inset:calc(var(--g-top) + var(--g-row) + var(--g-gap)) var(--g-side) var(--g-bottom) var(--g-side)!important}
html.v3d.v3-dock #assetStage .iv-toolbar{height:var(--g-row);box-sizing:border-box;padding-top:3px!important;padding-bottom:3px!important;align-items:center}
html.v3d.v3-dock #assetStage .iv-toolbar :is(#ivBack,.iv-cats button){height:36px!important;min-height:36px!important;box-sizing:border-box}
/* a reading page scrolls: its words fade out above the frame's foot instead of being cut by it */
html.v3d.v3-dock #mainPane:has(>#mpBody .pp-page){-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
/* the Gallery (showcase-gallery3.js): its row is the frame's top; the brackets beside its tabs step aside (decoration) */
html.v3d.v3-dock .gl3-door{inset:0!important}
html.v3d.v3-dock .gl3 .gl3-slot{left:0;top:0;height:var(--g-row)}
html.v3d.v3-dock .gl3 .gl3-hair{display:none!important}
html.v3d.v3-dock .gl3:not(.split) .gl3-door{grid-template-rows:44px 14px 36px 26px minmax(0,1fr) 12px 44px 6px 14px 4px 44px}
html.v3d.v3-dock .gl3:not(.split) .gl3-tabs{height:var(--g-row);box-sizing:border-box}
html.v3d.v3-dock .gl3:not(.split) .gl3-tabs button{height:36px}
html.v3d.v3-dock .gl3 .gl3-allbtn{height:var(--g-row)}
/* a short screen (≤ 860 tall: 1280 × 800, laptops): the Overview's dashboard keeps its modules whole and scrolls inside the frame,
   instead of cutting the first module's words off at its foot */
@media (max-height:860px){
  html.v3d.v3-dock .ov3-ch{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
  html.v3d.v3-dock .ov3-ch::-webkit-scrollbar{display:none}
  html.v3d.v3-dock{--g-top:calc(var(--sales-header-h,112px) + 4px);--g-gap:12px;--g-pill-off:8px}   /* the chrome tightens a little first */
  html.v3d.v3-dock .ov3-dash{height:auto;min-height:100%;grid-template-rows:340px clamp(140px,26.6%,168px)}
}