/* ============================================================
   XO3D LABS - shared chrome (menu + footer)
   Injected by labs-chrome.js into #app on every tool page.
   Uses the same continuous shell geometry as XO3D Studio:
   one chrome sweep around an inset content panel.
   Class names are prefixed .labs- to avoid clashing with
   any per-tool styles (including the dead #tools-nav rules).
   ============================================================ */

/* The original Aileron CDN (suitenumerique/fonts) went 404, so every tool was falling back
   to system sans. We self-host Inter (the XO3D V2 brand typeface) and alias it as 'Aileron'
   so all existing font-family:'Aileron' references resolve with no per-tool edits. This file
   loads after each tool's inline @font-face, so these rules override the dead source site-wide. */
@font-face{font-family:'Aileron';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Aileron';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Aileron';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Aileron';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Aileron';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/inter-latin-800-normal.woff2') format('woff2')}

:root{
  --labs-ac:#4C9CFC;
  --labs-ac-soft:rgba(76,156,252,0.14);
  --labs-ac-border:rgba(76,156,252,0.32);
  --labs-nav-h:48px;
  --labs-r:4px;
  --labs-font:'Aileron','Segoe UI',system-ui,sans-serif;
  --labs-chrome-bg:#1f1e1c;
  --labs-panel-bg:#262523;
  --labs-panel-bg-2:#2e2d2a;
  --labs-panel-line:#34322e;
  --labs-panel-radius:12px;
  --labs-rail-radius:0;
  --labs-rail-border:rgba(var(--labs-fg),.09);
  --labs-rail-open:248px;
  --labs-rail-closed:76px;
  --labs-rail-width:var(--labs-rail-open);
  --labs-footer-h:34px;
  /* ============================================================
     THEME TOKENS (2026-08-20)
     Tom: "the white light version of the labs is not working ... so that when some one is
     on the studio app in light mode it will activate the light mode of the labs tools."

     DARK IS THE DEFAULT AND STAYS THE DEFAULT. There is no [data-labs-theme="dark"] block
     anywhere in this file: dark is what these :root values already are, so a dark page
     resolves to exactly the same computed values it did before this block existed. Light
     is a single token override under html[data-labs-theme="light"] near the end of this
     file, which is (0,1,1) and therefore beats each tool's own :root (0,1,0) without any
     per-tool edit - and there are 105 tool pages, so per-tool edits were never an option.

     The ink scale is SOLID, not alpha. That is not a style preference: the measured chrome
     failures were all alpha inks. .labs-current at rgba(var(--labs-fg),0.42) on var(--labs-chrome-bg)
     measured 4.09:1, .labs-foot-copy at 0.28 measured 2.46:1, and .labs-link .caret
     stacked opacity:0.7 on top of a 0.45 alpha and measured 2.81:1. An alpha ink's
     contrast is a function of whatever happens to sit behind it, so it cannot be
     guaranteed; a solid value can. Same reasoning as --dm:#9a9a9a further down.

     Measured on #0f0f0f / #000 / #171717 / #1a1a1a / #222:
       --labs-ink   #ffffff  19.17 21.00 17.93 17.40 15.91
       --labs-ink-2 #d5d8dd  13.41 14.70 12.55 12.18 11.13
       --labs-ink-3 #b2b7bf   9.51 10.42  8.89  8.63  7.89
       --labs-ink-4 #9aa0a9   7.28  7.98  6.81  6.61  6.04
     ============================================================ */
  /* The white-alpha family (borders, hover fills, tints) is expressed against ONE
     foreground triplet instead of a literal. There were 66 of them and each carries a
     meaningful alpha - a hairline is not a hover fill - so replacing them with fixed
     light values would have thrown that information away. Flipping the triplet keeps
     every alpha relationship and inverts the whole family in one declaration. */
  --labs-page-bg:#1b1a18;
  --labs-fg:255,255,255;
  --labs-ink:#ffffff;
  --labs-ink-2:#d5d8dd;
  --labs-ink-3:#b2b7bf;
  --labs-ink-4:#9aa0a9;
  --labs-chrome-bg-2:#101014;
  --labs-sheet-bg:rgba(18,18,24,.96);
  --labs-mob-bg:rgba(12,12,16,.96);
  --labs-line-1:rgba(var(--labs-fg),.08);
  --labs-line-2:rgba(var(--labs-fg),.13);
  --labs-line-3:rgba(var(--labs-fg),.34);
  --labs-hover:rgba(var(--labs-fg),.06);
  --labs-hover-2:rgba(var(--labs-fg),.045);
  --labs-fill-1:rgba(var(--labs-fg),.035);
  /* A solid accent FILL and the ink that goes on it, kept apart from --labs-ac.
     --labs-ac is a display and text colour: #4C9CFC measures 6.82:1 on #0f0f0f, so it
     reads fine AS text. It does not work UNDER white text - var(--labs-ink) on #4C9CFC is 2.81:1,
     which is what the Start-a-project pill, the consent Accept button, the About CTA and
     the gate submit were all measuring. The fill keeps the brand accent and the ink goes
     near-black instead: #06111f on #4C9CFC is 7.12:1. .labs-mobile-action already did
     exactly this, so this is the existing pattern applied to the rest of the chrome. */
  --labs-ac-fill:#4C9CFC;
  --labs-ac-on:#06111f;
  --labs-scrim:rgba(0,0,0,.62);
  /* Unified motion system (Labs polish v1, 2026-05-30) */
  --labs-d-fast:120ms;
  --labs-d-base:200ms;
  --labs-d-slow:320ms;
  --labs-d-reveal:460ms;
  --labs-ease-standard:cubic-bezier(0.4,0,0.2,1);
  --labs-ease-entrance:cubic-bezier(0.16,1,0.3,1);
}

/* Existing tool purple/red inks were tuned against pure black. The Studio panel is
   lighter, so dark mode uses the accessible members of the same colour families. */
html:not([data-labs-theme="light"]){--ac:#5aa7ff;--dm:#a4a4a4;--pu:#c084fc;--rd:#ff8b8b;}

html.labs-unified-shell *,html.labs-unified-shell *::before,html.labs-unified-shell *::after{box-sizing:border-box;}
html.labs-unified-shell img,html.labs-unified-shell video{max-width:100%;height:auto;}
html.labs-unified-shell canvas{max-width:100%;}
html.labs-unified-shell input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
html.labs-unified-shell select,
html.labs-unified-shell textarea,
html.labs-unified-shell button{max-width:100%;}
html.labs-unified-shell table{max-width:100%;overflow-x:auto;}

/* ============================================================
   CROSS-DOCUMENT VIEW TRANSITIONS (2026-06-08)
   Stops the "reloads/flashes on every page" feel: the browser holds the old
   page's pixels until the new page is ready, then morphs the persistent chrome
   (top bar, left menu, footer) in place while ONLY the content cross-fades.
   Each persistent element gets a stable view-transition-name so it is treated
   as the SAME element across documents (it stays put instead of repainting).
   Chrome/Edge 126+ and Safari 18+ animate; other browsers navigate normally
   (graceful, no worse than before). Safe now that the menu width is unified
   (it morphs to itself, not between mismatched sizes - the reason it was off).
   ============================================================ */
@view-transition{navigation:auto;}
.labs-nav{view-transition-name:labs-topbar;}
.labs-app-rail,.labs-main-menu,.labs-marketing-menu{view-transition-name:labs-menu;}
.labs-footer{view-transition-name:labs-footer;}
.labs-tool-content,.labs-home-content,.labs-marketing-content{view-transition-name:labs-content;}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(labs-content){animation:labsVtOut .16s ease both;}
  ::view-transition-new(labs-content){animation:labsVtIn .28s var(--labs-ease-entrance) both;}
  @keyframes labsVtOut{to{opacity:0;}}
  @keyframes labsVtIn{from{opacity:0;}to{opacity:1;}}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}

html.labs-unified-shell,html.labs-unified-shell body{height:100%;overflow:hidden;}
.labs-tool-app-shell{
  position:fixed !important;inset:0 !important;
  width:100% !important;height:100vh !important;height:100dvh !important;min-height:0 !important;
  display:flex !important;flex-direction:column !important;overflow:hidden !important;
  padding-bottom:var(--labs-footer-h);
  background:var(--labs-chrome-bg);
}
.labs-tool-shell{
  flex:1 1 auto;min-height:0;min-width:0;max-width:100vw;
  display:grid;grid-template-columns:var(--labs-rail-width) minmax(0,1fr);
  overflow:hidden;background:var(--labs-chrome-bg);position:relative;
  transition:grid-template-columns var(--labs-d-slow) var(--labs-ease-entrance);
}
/* STUDIO SHELL, 2026-08-22. The rail is part of the window chrome, not a floating card.
   Its colour runs continuously into the top and bottom bars; only the content pane is inset. */
.labs-app-rail{
  height:100%;min-height:0;margin:0;position:relative;
  display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;
  padding:17px 14px 22px;background:var(--labs-chrome-bg);border:0;
  border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  scrollbar-width:thin;scrollbar-color:rgba(var(--labs-fg),.08) transparent;
  font-family:var(--labs-font);z-index:3;
}
.labs-app-rail::-webkit-scrollbar{width:4px;}
.labs-app-rail::-webkit-scrollbar-thumb{background:rgba(var(--labs-fg),.08);border-radius:2px;}
.labs-app-brand{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 8px 10px;margin-bottom:6px;border-bottom:0;}
.labs-app-eyebrow{font-size:8px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--labs-ac);margin-bottom:8px;}
.labs-app-title{font-size:15px;font-weight:800;letter-spacing:0;line-height:1.15;color:var(--labs-ink);}
.labs-app-note{margin-top:7px;margin-bottom:10px;font-size:10px;line-height:1.45;color:var(--labs-ink-4);}
.labs-app-links{display:flex;flex-direction:column;gap:3px;}
.labs-app-links a,.labs-app-links button{
  display:flex;align-items:center;gap:12px;min-height:40px;padding:9px 12px;border:0;border-radius:8px;
  color:var(--labs-ink-3);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:0;
  font-family:var(--labs-font);background:transparent;width:100%;cursor:pointer;text-align:left;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.labs-app-links a:hover,.labs-app-links button:hover{background:rgba(var(--labs-fg),.045);color:var(--labs-ink);transform:none;}
.labs-app-links a.is-active,.labs-app-links button.is-active{background:rgba(76,156,252,.14);color:var(--labs-ink);box-shadow:inset 0 0 0 1px rgba(76,156,252,.24);}
.labs-app-links a.is-active .labs-rail-icon,.labs-app-links button.is-active .labs-rail-icon{color:var(--labs-ac);}
.labs-app-links .is-tool-link{margin-top:6px;background:rgba(76,156,252,.07);color:var(--labs-ink-2);}
.labs-app-dot{display:none;}
.labs-app-foot{margin-top:auto;padding:12px 10px 0;font-size:11px;line-height:1.45;color:var(--labs-ink-4);}
.labs-tool-content{
  min-width:0;height:calc(100% - 8px);min-height:0;margin:0 8px 8px 0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overflow-x:hidden;overscroll-behavior:contain;
  background:var(--labs-panel-bg);border:1px solid var(--labs-panel-line);border-radius:var(--labs-panel-radius);
}
/* Reserve a scrollbar gutter ONLY for scrolling tools. Full-height app tools
   (those that mount a flex #ws) never scroll here, so a reserved gutter just
   shows as an ugly empty strip on the right edge - omit it for them. */
.labs-tool-content:not(:has(>#ws)):not(:has(>.labs-fill)){scrollbar-gutter:stable;}
.labs-tool-content>.labs-stage{height:100%;min-height:0;}
.labs-rail-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;color:currentColor;}
.labs-rail-icon svg{width:18px;height:18px;display:block;}
.labs-rail-label{display:inline-flex;align-items:center;min-width:0;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:1;transform:translateX(0);transition:opacity var(--labs-d-base) var(--labs-ease-standard),max-width var(--labs-d-slow) var(--labs-ease-entrance),transform var(--labs-d-base) var(--labs-ease-standard);}
.labs-rail-brand-text{min-width:0;max-width:176px;opacity:1;transform:translateX(0);transition:opacity var(--labs-d-base) var(--labs-ease-standard),max-width var(--labs-d-slow) var(--labs-ease-entrance),transform var(--labs-d-base) var(--labs-ease-standard);}
.labs-rail-toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;min-height:30px;margin-left:auto;padding:0;border:1px solid rgba(var(--labs-fg),.1);border-radius:8px;background:var(--labs-hover-2);color:var(--labs-ink-3);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;}
.labs-rail-toggle:hover{background:rgba(var(--labs-fg),.075);border-color:rgba(var(--labs-fg),.18);color:var(--labs-ink);}
.labs-rail-toggle svg{width:16px;height:16px;display:block;}
.labs-rail-toggle-open{display:none;}
html.labs-menu-ready{--labs-rail-width:var(--labs-rail-open);}
html.labs-menu-ready .labs-home-shell,
html.labs-menu-ready .labs-marketing-stage,
html.labs-menu-ready .labs-tool-shell{grid-template-columns:var(--labs-rail-width) minmax(0,1fr);transition:grid-template-columns var(--labs-d-slow) var(--labs-ease-entrance);}
html.labs-menu-ready .labs-main-menu,
html.labs-menu-ready .labs-marketing-menu,
html.labs-menu-ready .labs-app-rail{
  height:100%;margin:0;position:relative;gap:8px;padding:17px 14px 22px;background:var(--labs-chrome-bg);
  border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;overflow-x:hidden;
}
html.labs-menu-ready .labs-home-shell,
html.labs-menu-ready .labs-marketing-stage,
html.labs-menu-ready .labs-tool-shell{background:var(--labs-chrome-bg);}
html.labs-menu-ready .labs-home-content,
html.labs-menu-ready .labs-marketing-content{
  height:calc(100% - 8px);margin:0 8px 8px 0;
  background:var(--labs-panel-bg);border:1px solid var(--labs-panel-line);border-radius:var(--labs-panel-radius);
}
html.labs-rail-collapsed .labs-home-content,
html.labs-rail-collapsed .labs-marketing-content,
html.labs-rail-collapsed .labs-tool-content{margin-left:8px;}
html.labs-menu-ready .labs-main-brand,
html.labs-menu-ready .labs-menu-brand,
html.labs-menu-ready .labs-app-brand{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 8px 10px;margin-bottom:6px;border-bottom:0;text-align:left;}
html.labs-menu-ready .labs-main-links,
html.labs-menu-ready .labs-menu-links,
html.labs-menu-ready .labs-app-links{display:flex;flex-direction:column;gap:3px;}
html.labs-menu-ready .labs-main-links a,
html.labs-menu-ready .labs-main-links button,
html.labs-menu-ready .labs-menu-links a,
html.labs-menu-ready .labs-menu-links button,
html.labs-menu-ready .labs-app-links a,
html.labs-menu-ready .labs-app-links button{
  min-height:40px;padding:9px 12px;border:0;border-radius:8px;gap:12px;font-size:14px;font-weight:600;letter-spacing:0;line-height:1.2;text-align:left;white-space:nowrap;
}
html.labs-menu-ready .labs-main-links a:hover,
html.labs-menu-ready .labs-main-links button:hover,
html.labs-menu-ready .labs-menu-links a:hover,
html.labs-menu-ready .labs-menu-links button:hover,
html.labs-menu-ready .labs-app-links a:hover,
html.labs-menu-ready .labs-app-links button:hover{background:rgba(var(--labs-fg),.045);color:var(--labs-ink);transform:none;}
html.labs-menu-ready .labs-main-links a.is-active,
html.labs-menu-ready .labs-main-links button.is-active,
html.labs-menu-ready .labs-menu-links a.is-active,
html.labs-menu-ready .labs-menu-links button.is-active,
html.labs-menu-ready .labs-app-links a.is-active,
html.labs-menu-ready .labs-app-links button.is-active{background:rgba(76,156,252,.14);color:var(--labs-ink);box-shadow:inset 0 0 0 1px rgba(76,156,252,.24);}
html.labs-menu-ready .labs-main-links a.is-active .labs-rail-icon,
html.labs-menu-ready .labs-main-links button.is-active .labs-rail-icon,
html.labs-menu-ready .labs-menu-links a.is-active .labs-rail-icon,
html.labs-menu-ready .labs-menu-links button.is-active .labs-rail-icon,
html.labs-menu-ready .labs-app-links a.is-active .labs-rail-icon,
html.labs-menu-ready .labs-app-links button.is-active .labs-rail-icon{color:var(--labs-ac);}
html.labs-menu-ready .labs-main-foot,
html.labs-menu-ready .labs-menu-foot,
html.labs-menu-ready .labs-app-foot{border-top:0;padding:12px 10px 0;font-size:11px;line-height:1.45;}
html.labs-rail-collapsed{--labs-rail-width:0px;}
/* Collapsed = the menu disappears completely; only the top-bar toggle remains to reopen it. */
html.labs-rail-collapsed .labs-main-menu,
html.labs-rail-collapsed .labs-marketing-menu,
html.labs-rail-collapsed .labs-app-rail{display:none !important;}
html.labs-rail-collapsed .labs-tool-shell,
html.labs-rail-collapsed .labs-home-shell,
html.labs-rail-collapsed .labs-marketing-stage{grid-template-columns:minmax(0,1fr) !important;}
html.labs-rail-collapsed .labs-main-brand,
html.labs-rail-collapsed .labs-menu-brand,
html.labs-rail-collapsed .labs-app-brand{justify-content:center;width:100%;padding-left:0;padding-right:0;}
html.labs-rail-collapsed .labs-rail-brand-text,
html.labs-rail-collapsed .labs-main-foot,
html.labs-rail-collapsed .labs-menu-foot,
html.labs-rail-collapsed .labs-app-foot{max-width:0;opacity:0;transform:translateX(-6px);pointer-events:none;overflow:hidden;}
html.labs-rail-collapsed .labs-rail-toggle{margin-left:0;}
html.labs-rail-collapsed .labs-rail-toggle-close{display:none;}
html.labs-rail-collapsed .labs-rail-toggle-open{display:block;}
html.labs-rail-collapsed .labs-main-links,
html.labs-rail-collapsed .labs-menu-links,
html.labs-rail-collapsed .labs-app-links{align-items:center;width:100%;}
html.labs-rail-collapsed .labs-main-links a,
html.labs-rail-collapsed .labs-main-links button,
html.labs-rail-collapsed .labs-menu-links a,
html.labs-rail-collapsed .labs-menu-links button,
html.labs-rail-collapsed .labs-app-links a,
html.labs-rail-collapsed .labs-app-links button{justify-content:center;width:44px;min-height:42px;padding:0;gap:0;border-radius:10px;}
html.labs-rail-collapsed .labs-rail-label{max-width:0;opacity:0;transform:translateX(-6px);pointer-events:none;}
@media (min-width:901px){
  html.labs-menu-ready .labs-main-menu,
  html.labs-menu-ready .labs-marketing-menu,
  html.labs-menu-ready .labs-app-rail{transition:padding var(--labs-d-slow) var(--labs-ease-entrance),margin var(--labs-d-slow) var(--labs-ease-entrance),border-radius var(--labs-d-base) var(--labs-ease-standard);}
  html.labs-menu-ready .labs-main-brand,
  html.labs-menu-ready .labs-menu-brand,
  html.labs-menu-ready .labs-app-brand{transition:padding var(--labs-d-slow) var(--labs-ease-entrance);}
  html.labs-rail-collapsed .labs-main-brand,
  html.labs-rail-collapsed .labs-menu-brand,
  html.labs-rail-collapsed .labs-app-brand{min-height:123px;}
  html.labs-rail-collapsed .labs-rail-brand-text{white-space:nowrap;}
  html.labs-menu-ready .labs-main-links a,
  html.labs-menu-ready .labs-main-links button,
  html.labs-menu-ready .labs-menu-links a,
  html.labs-menu-ready .labs-menu-links button,
  html.labs-menu-ready .labs-app-links a,
  html.labs-menu-ready .labs-app-links button{transition:background .18s ease,border-color .18s ease,color .18s ease,padding var(--labs-d-slow) var(--labs-ease-entrance),gap var(--labs-d-slow) var(--labs-ease-entrance);}
  html.labs-rail-collapsed .labs-main-menu,
  html.labs-rail-collapsed .labs-marketing-menu,
  html.labs-rail-collapsed .labs-app-rail{align-items:stretch;padding-left:10px;padding-right:10px;}
  html.labs-rail-collapsed .labs-main-brand,
  html.labs-rail-collapsed .labs-menu-brand,
  html.labs-rail-collapsed .labs-app-brand{justify-content:flex-start;padding:0 8px 10px;}
  html.labs-rail-collapsed .labs-rail-toggle{margin-left:auto;}
  html.labs-rail-collapsed .labs-main-links,
  html.labs-rail-collapsed .labs-menu-links,
  html.labs-rail-collapsed .labs-app-links{align-items:stretch;width:100%;}
  html.labs-rail-collapsed .labs-main-links a,
  html.labs-rail-collapsed .labs-main-links button,
  html.labs-rail-collapsed .labs-menu-links a,
  html.labs-rail-collapsed .labs-menu-links button,
  html.labs-rail-collapsed .labs-app-links a,
  html.labs-rail-collapsed .labs-app-links button{justify-content:flex-start;width:100%;min-height:40px;padding:9px 12px;gap:0;border-radius:8px;}
}
@media (prefers-reduced-motion: no-preference){
  .labs-tool-content{animation:labsPaneIn .36s var(--labs-ease-entrance) both;}
  @keyframes labsPaneIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
}
@media (max-width:1023px){
  :root{--labs-rail-open:220px;--labs-rail-closed:76px;}
  .labs-app-rail{padding:12px 10px;}
  .labs-app-title{font-size:13px;}
  .labs-app-note,.labs-app-foot{font-size:9.5px;}
}
@media (min-width:640px) and (max-width:900px){
  :root{--labs-rail-open:92px;--labs-rail-closed:72px;}
  .labs-app-rail{padding:12px 8px;}
  .labs-app-brand{justify-content:center;padding-left:2px;padding-right:2px;}
  .labs-app-title{font-size:10px;text-align:center;}
  .labs-app-note,.labs-app-foot{display:none;}
  .labs-app-links{align-items:center;gap:5px;}
  .labs-app-links a,.labs-app-links button{width:52px;min-height:46px;justify-content:center;padding:0;gap:0;border-radius:10px;}
  html.labs-menu-ready .labs-rail-brand-text,
  html.labs-menu-ready .labs-rail-label{display:none;}
  html.labs-menu-ready .labs-main-links,
  html.labs-menu-ready .labs-menu-links,
  html.labs-menu-ready .labs-app-links{align-items:center;}
  html.labs-menu-ready .labs-main-links a,
  html.labs-menu-ready .labs-main-links button,
  html.labs-menu-ready .labs-menu-links a,
  html.labs-menu-ready .labs-menu-links button,
  html.labs-menu-ready .labs-app-links a,
  html.labs-menu-ready .labs-app-links button{width:52px;min-height:46px;justify-content:center;padding:0;gap:0;border-radius:10px;}
  html.labs-menu-ready .labs-rail-toggle{width:38px;height:38px;min-width:38px;min-height:38px;margin-left:0;}
}
@media (max-width:639px){
  :root{--labs-rail-open:76px;--labs-rail-closed:58px;}
  .labs-app-rail{height:calc(100% - 16px);margin:8px 0;padding:9px 6px;border-radius:0 13px 13px 0;box-shadow:0 12px 32px rgba(0,0,0,.34);scrollbar-width:none;}
  .labs-app-rail::-webkit-scrollbar{display:none;}
  .labs-app-brand{text-align:center;padding:0 2px 8px;}
  .labs-app-eyebrow{font-size:7px;letter-spacing:.1em;margin-bottom:5px;}
  .labs-app-title{font-size:10px;line-height:1.12;}
  .labs-app-note,.labs-app-foot{display:none;}
  .labs-app-links{gap:6px;}
  .labs-app-links a,.labs-app-links button{
    min-height:45px;flex-direction:column;justify-content:center;gap:5px;padding:6px 3px;border-radius:7px;
    font-size:8px;line-height:1.08;letter-spacing:0;text-align:center;white-space:normal;
  }
  .labs-app-links a:hover,.labs-app-links a:active,.labs-app-links button:hover,.labs-app-links button:active{transform:none;background:rgba(var(--labs-fg),.05);}
  .labs-app-dot{width:5px;height:5px;}
  html.labs-menu-ready .labs-main-menu,
  html.labs-menu-ready .labs-marketing-menu,
  html.labs-menu-ready .labs-app-rail{
    height:calc(100% - 16px);margin:8px 0;padding:9px 6px;
    background:var(--labs-chrome-bg);border:1px solid var(--labs-rail-border);border-left:0;border-radius:0 13px 13px 0;
    box-shadow:0 12px 32px rgba(0,0,0,.34);
  }
  html.labs-menu-ready .labs-main-brand,
  html.labs-menu-ready .labs-menu-brand,
  html.labs-menu-ready .labs-app-brand{justify-content:center;padding:0 2px 8px;}
  html.labs-menu-ready .labs-rail-brand-text{display:none;}
  html.labs-menu-ready .labs-rail-toggle{width:38px;height:38px;min-width:38px;min-height:38px;margin-left:0;}
  html.labs-menu-ready .labs-main-links a,
  html.labs-menu-ready .labs-main-links button,
  html.labs-menu-ready .labs-menu-links a,
  html.labs-menu-ready .labs-menu-links button,
  html.labs-menu-ready .labs-app-links a,
  html.labs-menu-ready .labs-app-links button{width:44px;min-height:44px;justify-content:center;padding:0;gap:0;}
  html.labs-menu-ready .labs-rail-label{display:none;}
  html.labs-rail-collapsed .labs-main-links a,
  html.labs-rail-collapsed .labs-main-links button,
  html.labs-rail-collapsed .labs-menu-links a,
  html.labs-rail-collapsed .labs-menu-links button,
  html.labs-rail-collapsed .labs-app-links a,
  html.labs-rail-collapsed .labs-app-links button{width:40px;min-height:40px;}
}
@media (max-width:380px){
  :root{--labs-rail-open:68px;--labs-rail-closed:54px;}
  .labs-app-rail{padding:8px 5px;margin:8px 0;}
  html.labs-menu-ready .labs-main-menu,
  html.labs-menu-ready .labs-marketing-menu,
  html.labs-menu-ready .labs-app-rail{padding:8px 5px;margin:8px 0;}
  .labs-app-title{font-size:9px;}
  .labs-app-links a,.labs-app-links button{min-height:42px;font-size:7.5px;}
}

/* ---- STAGE ----
   Injected by labs-chrome.js ONLY when a tool's #app is a flex row (sidebar + main split).
   It restores that horizontal split as a flex:1 child so the chrome can stack
   nav / stage / footer vertically and the app still fills the whole viewport. */
.labs-stage{
  flex:1 1 auto;min-height:0;min-width:0;
  display:flex;flex-direction:row;
  overflow:hidden;
}
.labs-stage>*{min-width:0;}
/* .labs-fill, 2026-08-20. THE OPT-IN FOR A COLUMN APP THAT FILLS RATHER THAN SCROLLS.
   A tool whose root child is #ws was already handled here. A tool whose root child is a
   flex COLUMN #main was not, and .labs-tool-content is a block box, so `flex:1` on that
   #main had nothing to flex against and the tool's entire vertical layout collapsed to
   content height. Measured on /360-viewer/: #main resolved to 56px inside an 826px content
   row, which put the stage's bottom control scrim at y=47..96 - up under the toolbar and
   overlapping it - with the empty-state text crushed into no height and a black void below.
   That is the "gradient showing at the bottom": a layout collapse, not a gradient.
   Row apps never had this: inject-chrome.mjs already wraps those in .labs-stage, which is
   why 360-viewer was the only page in the estate measuring a collapsed root child. */
.labs-tool-content:has(>#ws),
.labs-tool-content:has(>.labs-fill){
  display:flex;flex-direction:column;
}
.labs-tool-content:has(>#ws)>#ws,
.labs-tool-content:has(>.labs-fill)>.labs-fill{
  flex:1 1 auto;min-height:0;min-width:0;
}
@media (max-width:767px){
  .labs-tool-content{overflow-y:auto;overflow-x:hidden;}
  .labs-tool-content>.labs-stage{height:auto;min-height:100%;}
  .labs-stage{flex-direction:column;overflow:visible;align-items:stretch;}
  .labs-stage>*{
    width:100% !important;max-width:100% !important;min-width:0 !important;
    flex-basis:auto !important;
  }
  html.labs-unified-shell #mob-nav{
    left:var(--labs-rail-width) !important;right:0 !important;width:auto !important;
    max-width:calc(100vw - var(--labs-rail-width)) !important;
  }
  html.labs-unified-shell #cv-3d,
  html.labs-unified-shell #cv3,
  html.labs-unified-shell canvas[style*="100vw"]{
    width:100% !important;max-width:100% !important;
  }
  html.labs-unified-shell input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
  html.labs-unified-shell select,
  html.labs-unified-shell textarea{min-height:40px;}
}

/* ---- NAV ---- */
.labs-nav{
  flex:0 0 var(--labs-nav-h);
  display:flex;align-items:center;gap:2px;
  height:var(--labs-nav-h);min-height:var(--labs-nav-h);
  padding:0 14px 0 0;
  background:var(--labs-chrome-bg);
  border-bottom:0;
  font-family:var(--labs-font);
  position:relative;z-index:60;
  -webkit-font-smoothing:antialiased;
}
.labs-logo{
  display:flex;align-items:baseline;gap:0;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  font-weight:800;font-size:13px;letter-spacing:0.13em;line-height:1;
}
.labs-logo .x{color:var(--labs-ink);}
.labs-logo .l{color:var(--labs-ink);}
.labs-logo:hover .x{opacity:0.85;}
.labs-div{width:1px;height:16px;background:rgba(var(--labs-fg),0.12);margin:0 12px;flex-shrink:0;}
.labs-current{
  font-size:8.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--labs-ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:38vw;
}
.labs-spacer{flex:1;}
.labs-link{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:none;cursor:pointer;
  font-family:var(--labs-font);font-size:8.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--labs-ink-3);text-decoration:none;
  padding:7px 10px;border-radius:var(--labs-r,4px);
  white-space:nowrap;flex-shrink:0;
  transition:color .14s ease,background .14s ease;
}
.labs-link:hover{color:var(--labs-ink);}
.labs-link .caret{transition:transform .16s ease;font-size:7px;opacity:1;}
.labs-link.open .caret{transform:rotate(180deg);}
.labs-link-cta{color:var(--labs-ac);}
.labs-link-cta:hover{color:var(--labs-ink);background:var(--labs-ac-soft);}
/* opacity on an already-mid-tone ink is the same defect .labs-link .caret had: the light
   accent measures 6.14:1 on white and 4.02:1 once 0.8 of it is blended into the page. The
   arrow is a glyph, not a decoration, so it carries the ink at full strength. */
.labs-arrow{font-size:9px;}
/* Studio uses a flat window control at the top-left, joined directly to the chrome. */
.labs-nav .labs-rail-toggle{
  width:44px;height:var(--labs-nav-h);min-width:44px;min-height:var(--labs-nav-h);margin:0 6px 0 0;flex:0 0 auto;
  border:0;border-radius:0;background:transparent;
}
.labs-nav .labs-rail-toggle:hover{border-color:transparent;background:var(--labs-hover);}
@media (max-width:639px){.labs-nav .labs-rail-toggle{display:none;}}

/* ---- BROWSE DROPDOWN (position:fixed so #app overflow:hidden never clips it) ---- */
.labs-menu-backdrop{position:fixed;inset:0;z-index:90;display:none;}
.labs-menu-backdrop.open{display:block;}
.labs-menu{
  position:fixed;top:calc(var(--labs-nav-h) + 6px);
  background:var(--labs-chrome-bg);border:1px solid rgba(var(--labs-fg),0.13);
  border-radius:8px;padding:6px;min-width:248px;max-width:300px;
  max-height:72vh;overflow-y:auto;overflow-x:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,0.7);
  z-index:100;
  font-family:var(--labs-font);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.97);transform-origin:top right;
  transition:opacity .18s ease, transform .24s cubic-bezier(0.16,1,0.3,1), visibility 0s linear .24s;
  will-change:opacity,transform;
}
.labs-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease, transform .28s cubic-bezier(0.16,1,0.3,1), visibility 0s;}
.labs-menu::-webkit-scrollbar{width:8px;}
.labs-menu::-webkit-scrollbar-thumb{background:rgba(var(--labs-fg),0.12);border-radius:8px;}
.labs-menu-head{
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--labs-ink-4);padding:8px 10px 5px;
}
.labs-menu a,.labs-menu button{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:4px;text-decoration:none;
  font-size:11px;font-weight:500;color:var(--labs-ink-2);
  font-family:var(--labs-font);background:transparent;border:0;width:100%;cursor:pointer;text-align:left;
  transition:background .12s ease,color .12s ease;
}
.labs-menu a:hover,.labs-menu button:hover{background:rgba(var(--labs-fg),0.06);color:var(--labs-ink);}
.labs-menu a.active{color:var(--labs-ac);background:var(--labs-ac-soft);}
.labs-menu a .dot,.labs-menu button .dot{width:5px;height:5px;border-radius:50%;background:var(--labs-ac);flex-shrink:0;opacity:0.5;}
.labs-menu a.active .dot{opacity:1;}
.labs-menu a .nm,.labs-menu button .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.labs-menu a .ct,.labs-menu button .ct{font-size:8px;letter-spacing:0.08em;text-transform:uppercase;color:var(--labs-ink-4);flex-shrink:0;}
.labs-menu-action{margin:2px 0 6px;background:var(--labs-ac-soft) !important;color:var(--labs-ink) !important;padding:9px 10px !important;}
.labs-menu-action .dot{opacity:1 !important;}

/* ---- FOOTER ---- */
.labs-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  height:var(--labs-footer-h);box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:nowrap;overflow:hidden;
  padding:0 16px;
  background:var(--labs-chrome-bg);
  border-top:1px solid rgba(var(--labs-fg),0.09);
  font-family:var(--labs-font);font-size:9.5px;line-height:1.4;
  color:var(--labs-ink-4);
}
/* Static footer reservation for the homepage + marketing app-shells, plus a reveal
   on marketing (its own layout hides the footer by default). Desktop only (>=768px);
   on phones the footer is hidden and the bottom tab bar takes over (--labs-footer-h:0). */
@media (min-width:768px){
  html.labs-menu-ready .labs-home-shell{height:calc(100% - var(--labs-nav-h,40px) - var(--labs-footer-h));}
  html.labs-menu-ready .labs-marketing-stage{height:calc(100% - var(--labs-nav-h,40px) - var(--labs-footer-h));}
  html.labs-menu-ready #tool-finder{bottom:var(--labs-footer-h);}
  html.labs-menu-ready .labs-marketing-app>.labs-footer{display:flex;}
  html:has(#btm){--labs-footer-h:0px;}
  html:has(#btm) .labs-footer{display:none;}
}
/* Homepage Tools mode keeps the same primary Labs rail and swaps only the inset pane.
   The catalogue's filter sidebar is secondary navigation inside that panel. */
@media (min-width:640px){
  html.labs-menu-ready #app.tools-mode #tool-finder{
    left:var(--labs-rail-width) !important;right:8px;bottom:calc(var(--labs-footer-h) + 8px);
    overflow:hidden;background:var(--labs-panel-bg);border:1px solid var(--labs-panel-line);border-radius:var(--labs-panel-radius);
  }
  html.labs-rail-collapsed #app.tools-mode #tool-finder{left:8px !important;}
  html.labs-menu-ready #app.tools-mode #sidebar{
    height:100%;margin:0;border:0;border-right:1px solid var(--labs-panel-line);border-radius:0;box-shadow:none;
  }
}
.labs-foot-brand{display:flex;align-items:center;gap:8px;min-width:0;}
.labs-foot-brand .b{font-weight:800;letter-spacing:0.13em;color:var(--labs-ink-3);flex-shrink:0;}
.labs-foot-brand .b .l{color:var(--labs-ink);}
.labs-foot-tag{color:var(--labs-ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.labs-foot-links{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.labs-foot-links a{
  color:var(--labs-ink-3);text-decoration:none;padding:0 10px;
  letter-spacing:0.04em;transition:color .14s ease;white-space:nowrap;
}
.labs-foot-links a:first-child{padding-left:0;}
.labs-foot-links a:hover{color:var(--labs-ink);}
.labs-foot-links a + a{border-left:1px solid rgba(var(--labs-fg),0.12);}
.labs-foot-copy{color:var(--labs-ink-4);white-space:nowrap;}
.labs-foot-links button.labs-consent-settings{
  color:var(--labs-ink-3);background:transparent;border:0;border-left:1px solid rgba(var(--labs-fg),0.12);
  padding:0 10px;font:inherit;letter-spacing:0.04em;white-space:nowrap;cursor:pointer;
}
.labs-foot-links button.labs-consent-settings:hover{color:var(--labs-ink);}

/* ---- RESPONSIVE ---- */
@media (max-width:767px){
  .labs-current{display:none;}
  .labs-div{display:none;}
  .labs-link{padding:9px 8px;letter-spacing:0.08em;}
  /* On phones the top menu (logo, Browse Tools, XO3D Studio) covers navigation, and many
     tools have their own fixed bottom tab bar. Hide the footer so it never collides. */
  :root{--labs-footer-h:0px;}
  .labs-footer{display:none;}
}
@media (max-width:520px){
  .labs-nav{padding-left:10px;padding-right:10px;gap:1px;}
  .labs-logo{font-size:12px;letter-spacing:.1em;}
  .labs-link{padding-left:7px;padding-right:7px;}
  .labs-nav .labs-bug-trigger{display:none;}
  .labs-menu{left:10px !important;right:10px !important;min-width:0;max-width:none;width:auto;}
}
@media (max-width:460px){
  .labs-link-tools-word{display:none;}
}

/* ---- MOBILE APP NAV ----
   Phones use the same bottom-nav pattern as Overshove: five slots, raised centre
   action, and a More sheet for secondary destinations. */
.labs-mobile-tabs,
.labs-mobile-more-backdrop,
.labs-mobile-more-sheet{display:none;}

@media (max-width:639px){
  html.labs-menu-ready{--labs-rail-width:0px;}
  html.labs-menu-ready .labs-home-shell,
  html.labs-menu-ready .labs-marketing-stage,
  html.labs-menu-ready .labs-tool-shell{grid-template-columns:minmax(0,1fr) !important;}
  html.labs-menu-ready .labs-main-menu,
  html.labs-menu-ready .labs-marketing-menu,
  html.labs-menu-ready .labs-app-rail{display:none !important;}
  html.labs-menu-ready #tool-finder{left:0 !important;border-left:0 !important;}
  html.labs-menu-ready .labs-home-content,
  html.labs-menu-ready .labs-marketing-content,
  html.labs-menu-ready .labs-tool-content{
    height:calc(100% - 6px);margin:0 6px 6px;border-radius:10px;
    padding-bottom:calc(78px + env(safe-area-inset-bottom,0));
  }
  html.labs-menu-ready .labs-page{padding-bottom:calc(96px + env(safe-area-inset-bottom,0)) !important;}
  html.labs-menu-ready #grid-wrap{padding-bottom:calc(92px + env(safe-area-inset-bottom,0)) !important;}
  html.labs-unified-shell #mob-nav{
    left:0 !important;right:0 !important;width:auto !important;max-width:100vw !important;
    bottom:calc(70px + env(safe-area-inset-bottom,0)) !important;
  }
  html.labs-unified-shell #btm{
    bottom:calc(122px + env(safe-area-inset-bottom,0)) !important;
  }
  .labs-mobile-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;
    min-height:calc(64px + env(safe-area-inset-bottom,0));
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:0;
    padding:5px 8px calc(6px + env(safe-area-inset-bottom,0));
    background:var(--labs-mob-bg);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    border-top:1px solid var(--labs-line-2);border-radius:16px 16px 0 0;
    box-shadow:0 -14px 30px rgba(0,0,0,.26);
    font-family:var(--labs-font);
  }
  .labs-mobile-tab{
    flex:1 1 0;min-width:0;height:54px;min-height:0;padding:4px 1px;border:0;border-radius:14px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:transparent;color:var(--labs-ink-3);text-decoration:none;cursor:pointer;
    font-family:var(--labs-font);font-size:10px;font-weight:750;letter-spacing:0;line-height:1.05;
  }
  .labs-mobile-tab:hover,.labs-mobile-tab:active{background:transparent;color:var(--labs-ac);transform:none;}
  .labs-mobile-tab.is-active{color:var(--labs-ac);}
  .labs-mobile-ico{display:block;width:21px;height:21px;color:currentColor;}
  .labs-mobile-ico svg{display:block;width:21px;height:21px;}
  .labs-mobile-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .labs-mobile-tab-tools{justify-content:center;overflow:visible;}
  .labs-mobile-tab-tools .labs-mobile-action{
    width:clamp(48px,13vw,54px);height:clamp(48px,13vw,54px);margin-top:-22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(117,184,255,1) 0%,var(--labs-ac) 100%);
    color:#06111f;box-shadow:0 10px 26px rgba(76,156,252,.48),inset 0 1px 0 rgba(var(--labs-fg),.38);
  }
  .labs-mobile-tab-tools .labs-mobile-action .labs-mobile-ico,
  .labs-mobile-tab-tools .labs-mobile-action svg{width:24px;height:24px;color:#06111f;}
  .labs-mobile-tab-tools .labs-mobile-label{color:var(--labs-ink-3);margin-top:4px;}
  .labs-mobile-tab-tools.is-active .labs-mobile-label{color:var(--labs-ac);}
  /* Tool-local mobile tabs used a 35% foreground alpha. It measured 3.19:1 in dark and
     2.12:1 in light; the shared solid secondary ink keeps the same hierarchy in both. */
  html.labs-unified-shell .mob-tab:not(.mob-active){color:var(--labs-ink-3) !important;}
  .labs-mobile-more-backdrop{
    position:fixed;inset:0;z-index:84;display:block;background:rgba(0,0,0,.46);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .labs-mobile-more-sheet{
    position:fixed;left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom,0));z-index:89;display:block;
    max-height:min(58vh,330px);overflow-y:auto;scrollbar-width:none;
    padding:10px;
    background:var(--labs-sheet-bg);border:1px solid var(--labs-line-2);border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.58);font-family:var(--labs-font);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    transform:translateY(0) scale(1);opacity:1;
  }
  .labs-mobile-more-sheet::-webkit-scrollbar{display:none;}
  .labs-mobile-more-backdrop.hidden,
  .labs-mobile-more-sheet.hidden{display:none;}
  .labs-mobile-more-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;padding:0 2px;}
  .labs-mobile-more-head h2{margin:0;color:var(--labs-ink);font-size:14px;font-weight:800;letter-spacing:0;}
  .labs-mobile-more-close{
    display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;min-height:34px;
    padding:0;border:1px solid rgba(var(--labs-fg),.1);border-radius:12px;background:rgba(var(--labs-fg),.045);color:var(--labs-ink);
  }
  .labs-mobile-more-close svg{width:16px;height:16px;}
  .labs-mobile-more-groups{display:grid;gap:6px;}
  .labs-mobile-more-group{
     display:grid;grid-template-columns:1fr;gap:1px;padding:5px;
     border:1px solid rgba(var(--labs-fg),.08);border-radius:14px;background:rgba(var(--labs-fg),.035);
  }
  .labs-mobile-more-group span{
    color:var(--labs-ink-4);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    padding:5px 9px 4px;
  }
  .labs-mobile-more-group a,
  .labs-mobile-more-group button{
    min-height:38px;padding:0 11px;border:0;border-radius:11px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:transparent;color:var(--labs-ink-2);text-decoration:none;text-align:left;
    font-family:var(--labs-font);font-size:12px;font-weight:800;
    cursor:pointer;
  }
  .labs-mobile-more-group a::after,
  .labs-mobile-more-group button::after{content:"";width:5px;height:5px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(45deg);opacity:.5;flex:0 0 auto;}
  .labs-mobile-more-group a:hover,
  .labs-mobile-more-group button:hover{background:rgba(var(--labs-fg),.055);color:var(--labs-ink);}
  .labs-mobile-more-group a:active,
  .labs-mobile-more-group button:active{transform:scale(.98);}
  @media (prefers-reduced-motion:no-preference){
    .labs-mobile-more-backdrop{animation:labsMoreFade .18s ease both;}
    .labs-mobile-more-sheet{animation:labsMoreRise .24s var(--labs-ease-entrance) both;}
    @keyframes labsMoreFade{from{opacity:0}to{opacity:1}}
    @keyframes labsMoreRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
  }
}

/* ---- PREMIUM MOTION ---- */
.labs-link{transition:color .16s ease, background .16s ease, transform .12s ease;}
.labs-link:active{transform:scale(0.95);}
.labs-logo .l{transition:text-shadow .25s ease;}
.labs-logo:hover .l{text-shadow:0 0 14px rgba(76,156,252,0.5);}
.labs-menu a{transition:background .14s ease, color .14s ease, transform .16s cubic-bezier(0.16,1,0.3,1);}
.labs-menu a:hover{transform:translateX(3px);}
.labs-foot-links a,.labs-logo,.labs-link-cta .labs-arrow{transition:color .16s ease, transform .16s ease;}
.labs-link-cta:hover .labs-arrow{transform:translate(2px,-2px);}

/* ============================================================
   LABS POLISH LAYER v1 (2026-05-30)
   This file loads last, so these low-collision, state-only rules
   enhance every tool page with no per-file edits. Base component
   looks are left to each tool (avoids the .btn-dl accent-vs-ghost
   collision); we only add focus, motion, tap, and press/hover feel.
   ============================================================ */

/* ---- KEYBOARD FOCUS RING (a11y; was absent across all 55 tools) ----
   !important guarantees the ring beats per-tool `outline:none` (no tool
   defines any :focus-visible rule, so nothing legitimate is overridden).
   :focus-visible keeps mouse/touch clicks ring-free; keyboard nav shows it. */
:where(a,button,input,select,textarea,summary,[tabindex],
  .opt,.chip,.preset,.preset-btn,.seg-btn,.rate-tab,.vtab,.plat-tab,
  .btn-primary,.btn-begin,.btn-act,.cta-link,.btn-ghost,.btn-sm,
  .btn-dl,.btn-gen,.btn-copy,.btn-apply,.btn-dl-all,.btn-dl-custom,
  .card-dl,.lock-btn,.filter-btn,.cat-btn,.view-btn,.tb-sort,.tool-card):focus-visible{
  outline:2px solid var(--labs-ac) !important;
  outline-offset:2px !important;
  border-radius:var(--labs-r,4px);
}
input[type=range]:focus-visible{ outline:2px solid var(--labs-ac) !important; outline-offset:4px !important; }

/* ---- CUSTOM RADIO/CHECKBOX VISIBLE FOCUS (a11y) ----
   A few tools hide the native radio/checkbox behind a styled proxy, so the generic
   input:focus-visible ring above lands on an invisible element and shows nothing.
   Ring the visible proxy via :focus-within instead. Wrappers enumerated from the
   audit (scripts/a11y-audit.mjs): .cb-radio segmented pills, .tg toggle switch.
   :focus-within is used (not :has(> input:focus-visible)): verified in-browser that
   :has() with a dynamic :focus / :focus-visible does NOT restyle in the current
   engine, while :focus-within does and has universal support. :focus-within shows
   the ring on pointer focus too, which is an acceptable, standard focus indicator
   for a custom control.
   .tg also hid its input with display:none, which drops it from the tab order
   entirely; make it focusable-hidden (off-screen, not display:none) so keyboard
   users can reach and toggle it. The :checked + .tg-track sibling rule is
   unaffected (the input stays a sibling of the track). */
.tg input{ display:inline-block; position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.cb-radio:focus-within,
.tg:focus-within{
  outline:2px solid var(--labs-ac) !important;
  outline-offset:2px;
  border-radius:var(--labs-r,4px);
}

/* ---- MOBILE TAP FEEDBACK (touch devices have no hover) ---- */
@media (hover:none){
  a,button,.opt,.chip,.preset,.preset-btn,.seg-btn,.rate-tab,.vtab,.plat-tab,
  .btn-primary,.btn-begin,.btn-act,.cta-link,.btn-sm,.btn-dl,.btn-gen,.btn-copy,
  .btn-apply,.card-dl,.lock-btn,[role=button]{ -webkit-tap-highlight-color:transparent; }
}

/* ---- PRESS FEEDBACK on shared button + option classes (consistent tactile cue) ---- */
.btn-primary:active,.btn-begin:active,.btn-act:active,.cta-link:active,
.btn-dl:active,.btn-gen:active,.btn-copy:active,.btn-apply:active,.btn-dl-all:active,.btn-dl-custom:active,
.preset-btn:active,.seg-btn:active,.preset:active,.opt:active,.chip:active,.card-dl:active{
  transform:scale(0.97);
}

/* ---- HOVER LIFT on accent primaries (wizard primaries match the calculators' glow) ---- */
@media (hover:hover){
  .btn-primary:hover,.btn-begin:hover,.btn-act:not(.sec):hover,.cta-link:hover{
    box-shadow:0 4px 14px rgba(76,156,252,0.30);
  }
}

/* ---- TOAST: one consistent shadow across tools ---- */
#toast{ box-shadow:0 8px 28px rgba(0,0,0,0.55); }

/* ---- CONTRAST: lift the dimmest grey token site-wide.
   Per-tool --dm was rgba(var(--labs-fg),0.28) ~2.3:1, and the prior rgba(var(--labs-fg),0.45)
   override still failed WCAG AA on the darkest and lightest surfaces (4.43:1 on #000,
   4.47:1 on #1a1a1a, 4.31:1 on #222). This file loads last so this :root wins. A solid
   grey is used instead of an alpha because alpha contrast drifts with whatever sits
   behind it: #9a9a9a clears AA (>=4.5:1) on every standard surface, from 7.46:1 on #000
   down to 5.65:1 on #222. Per-surface table: scripts/a11y-audit.mjs. ---- */
:root{ --dm:#9a9a9a; --dim:#9a9a9a; }
/* --dim is one page's name for the same role and carried the same defect: it was declared as
   a 0.28 alpha, which measured 2.48:1 on that page's own panels in dark. Solid, like --dm. */

/* ---- MOBILE INPUT ANTI-ZOOM (iOS zooms inputs below 16px on focus) ---- */
@media (max-width:767px){
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
  select,textarea{ font-size:16px; }
}

/* ---- REDUCED MOTION: neutralise all tool-level animation + transition ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   LABS MOTION KIT v1 (2026-05-30) - opt-in premium in-tool motion.
   Tools add these classes (or call window.LabsAnim, see labs-chrome.js)
   on their RESULT/OUTPUT moment to feel premium and consistent.
   All gated behind prefers-reduced-motion so motion-averse users get
   none of it (and the reduce block above is a second backstop).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes labsRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
  @keyframes labsScaleIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
  @keyframes labsSheen{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
  @keyframes labsFlash{0%,100%{text-shadow:none}40%{text-shadow:0 0 12px var(--labs-ac)}}

  /* Single element rises + fades in. */
  .labs-reveal{animation:labsRise var(--labs-d-reveal) var(--labs-ease-entrance) both}
  .labs-reveal-scale{animation:labsScaleIn var(--labs-d-slow) var(--labs-ease-entrance) both}

  /* Staggered children: add .labs-stagger to a results wrapper; its
     direct children rise in sequence. Re-trigger by removing+re-adding the class. */
  .labs-stagger>*{animation:labsRise var(--labs-d-reveal) var(--labs-ease-entrance) both}
  .labs-stagger>*:nth-child(1){animation-delay:.05s}
  .labs-stagger>*:nth-child(2){animation-delay:.13s}
  .labs-stagger>*:nth-child(3){animation-delay:.21s}
  .labs-stagger>*:nth-child(4){animation-delay:.29s}
  .labs-stagger>*:nth-child(5){animation-delay:.37s}
  .labs-stagger>*:nth-child(6){animation-delay:.45s}
  .labs-stagger>*:nth-child(7){animation-delay:.53s}
  .labs-stagger>*:nth-child(8){animation-delay:.61s}
  .labs-stagger>*:nth-child(n+9){animation-delay:.68s}

  /* One-shot light sweep across a hero result card: add .labs-sheen (subtle, premium). */
  .labs-sheen{position:relative;overflow:hidden}
  .labs-sheen::before{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;
    background:linear-gradient(100deg,transparent,rgba(var(--labs-fg),.06),transparent);
    transform:translateX(-130%);animation:labsSheen 1.05s var(--labs-ease-standard) .14s 1;
    pointer-events:none;z-index:1}

  /* Brief accent glow when a live value updates: JS toggles .labs-flash. */
  .labs-flash{animation:labsFlash .5s var(--labs-ease-standard)}
}

/* ============================================================
   ABOUT & FAQ MODAL (2026-05-30) - SEO/GEO content surface.
   The #labs-about content is STATIC in each tool's HTML (so it is
   crawlable and feeds AI search + the FAQPage schema). It is hidden
   by default and shown as an on-brand modal via the footer trigger
   wired in labs-chrome.js. Mirrors the Browse-dropdown overlay model.
   ============================================================ */
.labs-about{position:fixed;inset:0;z-index:200;display:none;font-family:var(--labs-font);}
.labs-about.open{display:block;}
.labs-about-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.62);opacity:0;transition:opacity .2s ease;}
.labs-about.open .labs-about-backdrop{opacity:1;}
.labs-about-panel{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(640px,92vw);max-height:85vh;overflow-y:auto;
  background:var(--labs-chrome-bg);border:1px solid rgba(var(--labs-fg),0.13);border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,0.72);
  padding:28px 30px 30px;
  opacity:0;transition:opacity .22s ease, transform .3s var(--labs-ease-entrance);
  -webkit-font-smoothing:antialiased;
}
.labs-about.open .labs-about-panel{opacity:1;transform:translate(-50%,-50%) scale(1);}
.labs-about-panel::-webkit-scrollbar{width:8px;}
.labs-about-panel::-webkit-scrollbar-thumb{background:rgba(var(--labs-fg),0.12);border-radius:8px;}
.labs-about-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  border-radius:var(--labs-r,4px);border:1px solid rgba(var(--labs-fg),0.14);
  background:transparent;color:var(--labs-ink-3);cursor:pointer;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .14s ease,color .14s ease;
}
.labs-about-close:hover{background:rgba(var(--labs-fg),0.07);color:var(--labs-ink);}
.labs-about-eyebrow{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--labs-ac);font-weight:700;margin-bottom:10px;}
.labs-about h2{font-size:18px;font-weight:800;color:var(--labs-ink);letter-spacing:0;line-height:1.25;margin:0 0 11px;}
.labs-about-lead{font-size:13px;line-height:1.65;color:var(--labs-ink-3);margin:0 0 6px;}
.labs-about h3{
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--labs-ink-4);
  font-weight:700;margin:24px 0 14px;padding-top:18px;border-top:1px solid rgba(var(--labs-fg),0.08);
}
.labs-faq{margin:0 0 15px;}
.labs-faq:last-child{margin-bottom:0;}
.labs-faq-q{font-size:12.5px;font-weight:700;color:var(--labs-ink);line-height:1.4;margin:0 0 5px;}
.labs-faq-a{font-size:12px;line-height:1.62;color:var(--labs-ink-3);margin:0;}

/* Footer "About & FAQ" trigger - matches the other footer links + divider chain. */
.labs-foot-links button.labs-about-trigger{
  background:none;border:none;cursor:pointer;font:inherit;
  color:var(--labs-ink-3);padding:0 10px;letter-spacing:0.04em;white-space:nowrap;
  transition:color .14s ease;
}
.labs-foot-links button.labs-about-trigger:first-child{padding-left:0;}
.labs-foot-links button.labs-about-trigger:hover{color:var(--labs-ink);}
.labs-foot-links button.labs-about-trigger + a,
.labs-foot-links a + button.labs-about-trigger{border-left:1px solid rgba(var(--labs-fg),0.12);}
.labs-foot-links button.labs-share-trigger{
  background:none;border:none;cursor:pointer;font:inherit;
  color:var(--labs-ink-3);padding:0 10px;letter-spacing:0.04em;white-space:nowrap;
  transition:color .14s ease;
}
.labs-foot-links button.labs-share-trigger:hover{color:var(--labs-ink);}
.labs-foot-links button.labs-about-trigger + button.labs-share-trigger,
.labs-foot-links button.labs-share-trigger + button.labs-bug-trigger,
.labs-foot-links a + button.labs-share-trigger,
.labs-foot-links button.labs-share-trigger + a{border-left:1px solid rgba(var(--labs-fg),0.12);}

/* Top-nav FAQ trigger is the primary, always-visible way into the About/FAQ panel.
   Keep the nav tidy on phones: the logo + Browse already cover "all tools", so hide
   the redundant All Tools text link there (the FAQ + Studio links stay). */
@media (max-width:639px){ .labs-link-all{display:none;} }

/* Make the top-nav FAQ trigger unmissable: a filled accent pill, not plain grey nav text. */
.labs-nav .labs-about-trigger{
  color:var(--labs-ac);
  background:var(--labs-ac-soft);
  border:1px solid var(--labs-ac-border);
  border-radius:20px;
  padding:5px 14px;
  margin-left:4px;
}
.labs-nav .labs-about-trigger:hover{ background:var(--labs-ac-fill); color:var(--labs-ac-on); }

/* ---- COOKIE CONSENT (only rendered when GA4 is configured) ---- */
.labs-consent{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(150%);
  z-index:900;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:min(680px,calc(100vw - 24px));
  background:var(--labs-chrome-bg);border:1px solid rgba(var(--labs-fg),0.14);border-radius:10px;
  padding:12px 16px;box-shadow:0 18px 48px rgba(0,0,0,0.62);
  font-family:var(--labs-font);font-size:11.5px;line-height:1.5;color:var(--labs-ink-3);
  opacity:0;transition:transform .26s var(--labs-ease-entrance),opacity .26s ease;
}
.labs-consent.in{transform:translateX(-50%) translateY(0);opacity:1;}
.labs-consent.out{transform:translateX(-50%) translateY(150%);opacity:0;}
.labs-consent-txt a{color:var(--labs-ac);text-decoration:underline;text-underline-offset:2px;}
.labs-consent-txt a:hover{text-decoration:underline;}
.labs-consent-btns{display:flex;gap:8px;flex-shrink:0;}
.labs-consent button{
  font-family:var(--labs-font);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--labs-r,4px);cursor:pointer;border:1px solid transparent;transition:all .14s ease;
}
.labs-consent-no{background:transparent;border-color:var(--labs-line-3);color:var(--labs-ink-3);}
.labs-consent-no:hover{color:var(--labs-ink);border-color:rgba(var(--labs-fg),0.34);}
.labs-consent-yes{background:var(--labs-ac-fill);color:var(--labs-ac-on);}
.labs-consent-yes:hover{background:#3a88e8;}
@media (max-width:767px){ .labs-consent{bottom:76px;} }
@media (max-width:480px){ .labs-consent{flex-direction:column;gap:10px;text-align:center;} }
@media (prefers-reduced-motion: reduce){ .labs-consent{transition:opacity .2s ease;transform:translateX(-50%);} }

@media (prefers-reduced-motion: reduce){
  .labs-about-panel,.labs-about-backdrop{transition:none !important;}
}

/* ============================================================
   ABOUT PANEL - LONG-FORM CONTENT + RELATED TOOLS + SERVICE CTA
   (2026-06-01) Growth pass. These live inside the existing
   #labs-about modal (static, crawlable DOM, feeds Article/FAQ
   schema). Generated by scripts/seo-inject.mjs from the TOOLS
   array. Matches the modal's existing var(--labs-chrome-bg) / accent / 4px look.
   ============================================================ */
.labs-about-block{margin:0 0 4px;}
.labs-about-h{
  font-size:11px;letter-spacing:0.04em;text-transform:none;color:var(--labs-ink);font-weight:700;
  margin:20px 0 7px;padding-top:0;border-top:none;
}
.labs-about-block:first-of-type .labs-about-h{margin-top:16px;}
.labs-about-p{font-size:12px;line-height:1.62;color:var(--labs-ink-3);margin:0;}

/* Related tools list */
.labs-related{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:2px;}
.labs-related li{margin:0;}
.labs-related a{
  display:block;text-decoration:none;color:var(--labs-ink-2);
  font-size:12px;font-weight:500;padding:7px 10px;border-radius:var(--labs-r,4px);
  border:1px solid rgba(var(--labs-fg),0.07);background:rgba(var(--labs-fg),0.02);
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.labs-related a:hover{background:var(--labs-ac-soft);color:var(--labs-ink);border-color:var(--labs-ac-border);}

/* Service CTA button */
.labs-about-cta{margin-top:22px;padding-top:18px;border-top:1px solid rgba(var(--labs-fg),0.08);}
.labs-cta-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--labs-ac-fill);color:var(--labs-ac-on);text-decoration:none;
  font-family:var(--labs-font);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  padding:11px 18px;border-radius:var(--labs-r,4px);
  transition:background .14s ease,transform .12s ease,box-shadow .16s ease;
}
.labs-cta-btn:hover{background:#3a88e8;box-shadow:0 4px 14px rgba(76,156,252,0.30);}
.labs-cta-btn:active{transform:scale(0.97);}
.labs-cta-arrow{font-size:11px;}
@media (prefers-reduced-motion: reduce){ .labs-cta-btn{transition:none;} }

/* ============================================================
   MOBILE FAQ TRIGGER (2026-06-01)
   The footer About/FAQ link is hidden on phones (the footer is
   display:none < 768px). The top-nav FAQ pill is the mobile-visible
   entry point. Harden it so it can never be crowded off-screen on
   the narrowest phones, and give it a comfortable 44px tap target.
   ============================================================ */
@media (max-width:767px){
  /* The FAQ pill stays visible on mobile; keep it from shrinking when the
     nav gets tight, and meet the 44px touch-target guidance via padding. */
  .labs-nav .labs-about-trigger{
    flex-shrink:0;
    min-height:30px;
    padding:7px 14px;
  }
  /* Trim lower-priority nav text so the FAQ pill + Studio CTA always fit. */
  .labs-link-all{display:none;}
}
@media (max-width:420px){
  /* On the very narrowest phones, drop the Studio CTA label to an arrow icon so
     the FAQ pill is never pushed off the row (the footer link is hidden here). */
  .labs-link-cta{width:32px;justify-content:center;padding:7px 8px;font-size:0;}
  .labs-link-cta .labs-arrow{font-size:10px;}
}

/* ============================================================
   EMAIL GATE MODAL (2026-06-01, task 06) - lead capture surface.
   Built and revealed by labs-chrome.js, which keeps it INERT until a
   HubSpot Portal ID + Form GUID are set. Mirrors the About/FAQ modal:
   same tokens, backdrop, focus trap, Esc and backdrop close.
   ============================================================ */
.labs-gate{position:fixed;inset:0;z-index:920;display:none;font-family:var(--labs-font);}
.labs-gate.open{display:block;}
.labs-gate-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.62);opacity:0;transition:opacity .2s ease;}
.labs-gate.open .labs-gate-backdrop{opacity:1;}
.labs-gate-panel{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(440px,92vw);max-height:88vh;overflow-y:auto;
  background:var(--labs-chrome-bg);border:1px solid rgba(var(--labs-fg),0.13);border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,0.72);
  padding:28px 30px 26px;
  opacity:0;transition:opacity .22s ease, transform .3s var(--labs-ease-entrance);
  -webkit-font-smoothing:antialiased;
}
.labs-gate.open .labs-gate-panel{opacity:1;transform:translate(-50%,-50%) scale(1);}
.labs-gate-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  border-radius:var(--labs-r,4px);border:1px solid rgba(var(--labs-fg),0.14);
  background:transparent;color:var(--labs-ink-3);cursor:pointer;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .14s ease,color .14s ease;
}
.labs-gate-close:hover{background:rgba(var(--labs-fg),0.07);color:var(--labs-ink);}
.labs-gate-eyebrow{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--labs-ac);font-weight:700;margin-bottom:10px;}
.labs-gate h2{font-size:18px;font-weight:800;color:var(--labs-ink);letter-spacing:0;line-height:1.25;margin:0 0 9px;}
.labs-gate-lead{font-size:12.5px;line-height:1.6;color:var(--labs-ink-3);margin:0 0 16px;}
.labs-gate-form{display:flex;gap:8px;flex-wrap:wrap;}
.labs-gate-input{
  flex:1;min-width:160px;font-family:var(--labs-font);font-size:14px;color:var(--labs-ink);
  background:rgba(var(--labs-fg),0.05);border:1px solid rgba(var(--labs-fg),0.16);
  border-radius:var(--labs-r,4px);padding:11px 12px;
}
.labs-gate-input:focus{outline:2px solid var(--labs-ac);outline-offset:1px;border-color:var(--labs-ac);}
.labs-gate-input::placeholder{color:var(--labs-ink-4);}
.labs-gate-submit{
  font-family:var(--labs-font);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  padding:11px 16px;border-radius:var(--labs-r,4px);border:none;cursor:pointer;
  background:var(--labs-ac-fill);color:var(--labs-ac-on);transition:background .14s ease;
}
.labs-gate-submit:hover{background:#3a88e8;}
.labs-gate-submit:disabled{opacity:0.6;cursor:default;}
.labs-gate-err{font-size:11.5px;color:#ff8a8a;margin:10px 0 0;}
.labs-gate-fine{font-size:10.5px;line-height:1.5;color:var(--dm);margin:14px 0 0;}
.labs-gate-fine a{color:var(--labs-ac);text-decoration:none;}
.labs-gate-fine a:hover{text-decoration:underline;}
.labs-gate-skip{display:block;margin:13px auto 0;background:none;border:none;color:var(--dm);font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;}
.labs-gate-skip[hidden],.labs-gate-err[hidden]{display:none !important;}
.labs-gate-skip:hover{color:var(--labs-ink);}
@media (max-width:520px){
  .labs-about-panel,.labs-gate-panel{width:min(100% - 22px,92vw);padding:24px 22px;}
  .labs-gate-form{display:grid;grid-template-columns:1fr;}
  .labs-gate-input,.labs-gate-submit{width:100%;}
  .labs-gate-submit{min-height:42px;}
}
@media (prefers-reduced-motion: reduce){
  .labs-gate-panel,.labs-gate-backdrop{transition:none !important;}
}

/* ---- SHARE SETUP MODAL ---- */
.labs-share-panel{width:min(560px,92vw);}
.labs-share-field{display:flex;flex-direction:column;gap:7px;margin:12px 0 12px;}
.labs-share-field span{
  font-family:var(--labs-font);font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--labs-ink-4);
}
.labs-share-input{
  width:100%;font-family:var(--labs-font);font-size:12px;line-height:1.45;color:var(--labs-ink);
  background:rgba(var(--labs-fg),0.05);border:1px solid rgba(var(--labs-fg),0.16);
  border-radius:var(--labs-r,4px);padding:11px 12px;
}
.labs-share-input:focus{outline:2px solid var(--labs-ac);outline-offset:1px;border-color:var(--labs-ac);}
.labs-share-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.labs-share-refresh{
  font-family:var(--labs-font);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  padding:10px 14px;border-radius:var(--labs-r,4px);cursor:pointer;
  background:transparent;border:1px solid var(--labs-line-3);color:var(--labs-ink-3);
}
.labs-share-refresh:hover{border-color:rgba(var(--labs-fg),0.34);color:var(--labs-ink);background:rgba(var(--labs-fg),0.05);}
.labs-share-summary{min-height:16px;}
.labs-share-toast{
  position:fixed;right:18px;bottom:18px;z-index:380;
  background:var(--labs-chrome-bg-2);border:1px solid rgba(76,156,252,0.38);border-radius:8px;
  color:var(--labs-ink);font-family:var(--labs-font);font-size:12px;font-weight:700;
  padding:10px 13px;box-shadow:0 16px 44px rgba(0,0,0,0.58);
  opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .22s var(--labs-ease-entrance);
}
.labs-share-toast.in{opacity:1;transform:translateY(0);}
.labs-share-loaded{
  position:fixed;right:18px;bottom:18px;z-index:310;width:min(360px,calc(100vw - 24px));
  background:var(--labs-chrome-bg-2);border:1px solid rgba(76,156,252,0.32);border-radius:10px;
  box-shadow:0 18px 54px rgba(0,0,0,0.64);padding:16px 18px 15px;
  font-family:var(--labs-font);color:var(--labs-ink-2);
}
.labs-share-loaded strong{display:block;color:var(--labs-ink);font-size:13px;margin-bottom:5px;}
.labs-share-loaded p{margin:0 22px 7px 0;font-size:12px;line-height:1.52;}
.labs-share-note{color:var(--labs-ink-3);}
.labs-share-loaded details{margin-top:8px;border-top:1px solid rgba(var(--labs-fg),0.08);padding-top:8px;}
.labs-share-loaded summary{cursor:pointer;color:var(--labs-ac);font-size:11px;font-weight:700;}
.labs-share-loaded pre{
  margin:8px 0 0;max-height:150px;overflow:auto;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10.5px;line-height:1.45;color:var(--labs-ink-3);
}
.labs-share-loaded-close{
  position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:var(--labs-r,4px);
  border:1px solid rgba(var(--labs-fg),0.12);background:transparent;color:var(--labs-ink-3);cursor:pointer;
}
.labs-share-loaded-close:hover{background:rgba(var(--labs-fg),0.07);color:var(--labs-ink);}
@media (max-width:767px){
  .labs-nav .labs-share-trigger{display:none;}
  .labs-share-loaded,.labs-share-toast{left:12px;right:12px;bottom:76px;width:auto;}
}

/* ---- BUG REPORT MODAL ---- */
.labs-bug-panel{width:min(560px,92vw);}
.labs-bug-form{display:grid;grid-template-columns:1fr 170px;gap:12px;margin-top:16px;}
.labs-bug-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.labs-bug-field span,.labs-bug-check span{
  font-family:var(--labs-font);font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--labs-ink-4);
}
.labs-bug-wide,.labs-bug-check,.labs-bug-submit{grid-column:1/-1;}
.labs-bug-field input,.labs-bug-field select,.labs-bug-field textarea{
  width:100%;box-sizing:border-box;font-family:var(--labs-font);font-size:13px;color:var(--labs-ink);
  background:rgba(var(--labs-fg),0.05);border:1px solid rgba(var(--labs-fg),0.16);
  border-radius:var(--labs-r,4px);padding:11px 12px;color-scheme:dark;
}
.labs-bug-field textarea{resize:vertical;min-height:92px;line-height:1.5;}
.labs-bug-field select{appearance:none;background-color:var(--labs-chrome-bg-2);background-image:linear-gradient(45deg,transparent 50%,var(--labs-ink-3) 50%),linear-gradient(135deg,var(--labs-ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.labs-bug-field select option{background:var(--labs-chrome-bg-2);color:var(--labs-ink);}
.labs-bug-field select option:checked{background:rgba(76,156,252,.28);color:var(--labs-ink);}
.labs-bug-field input:focus,.labs-bug-field select:focus,.labs-bug-field textarea:focus{outline:2px solid var(--labs-ac);outline-offset:1px;border-color:var(--labs-ac);}
.labs-bug-check{display:flex;align-items:flex-start;gap:9px;line-height:1.5;margin-top:2px;}
.labs-bug-check input{margin-top:2px;accent-color:var(--labs-ac);}
.labs-bug-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.labs-bug-submit{justify-self:start;}
.labs-foot-links button.labs-bug-trigger{
  background:none;border:none;cursor:pointer;font:inherit;
  color:var(--labs-ink-3);padding:0 10px;letter-spacing:0.04em;white-space:nowrap;
  transition:color .14s ease;
}
.labs-foot-links button.labs-bug-trigger:hover{color:var(--labs-ink);}
.labs-foot-links button.labs-bug-trigger + a,
.labs-foot-links a + button.labs-bug-trigger,
.labs-foot-links button.labs-about-trigger + button.labs-bug-trigger,
.labs-foot-links button.labs-share-trigger + button.labs-bug-trigger{border-left:1px solid rgba(var(--labs-fg),0.12);}
@media (max-width:767px){
  .labs-bug-form{grid-template-columns:1fr;}
  .labs-bug-panel{padding:24px 22px;}
}
@media (max-width:520px){
  .labs-nav .labs-bug-trigger{padding-left:9px;padding-right:9px;font-size:8px;}
}
@media (max-width:380px){
  .labs-nav .labs-about-trigger{padding-left:10px;padding-right:10px;}
  .labs-nav .labs-bug-trigger{min-width:42px;justify-content:center;font-size:0;}
  .labs-nav .labs-bug-trigger::before{content:"Bug";font-size:8px;}
}

/* ============================================================
   LIGHT THEME (2026-08-20)

   Tom: "the white light version of the labs is not working ... so that when some one is on
   the studio app in light mode it will activate the light mode of the labs tools. The labs
   tools online should also have the option for users to change light and dark mode. but
   need to make sure it looks good. clean and everything readable."

   WHY IT IS ONE BLOCK AND NOT 105 EDITS. Every tool page declares its own :root with the
   same fifteen token names - --bg, --p1..--p4, --b1..--b3, --wh, --mu, --dm, --ac, --ac2,
   --ac3, --gr, --rd, --am - and the values agree across the estate (--bg:#000 on 98 of 107
   pages, --p1:#0f0f0f on 95 of 95, --wh:#fff on 96 of 96). So the theme is a token
   override, not a restyle. html[data-labs-theme="light"] is (0,1,1) and each tool's :root
   is (0,1,0), so this wins with no !important and no per-tool edit, and this file is loaded
   after every tool's inline <style> on all 105 pages.

   THERE IS NO DARK BLOCK. Dark is the :root default at the top of this file, so a dark page
   computes exactly what it computed before light mode existed. Measured to confirm it, not
   assumed: the dark sweep is run before and after and the numbers have to match.

   STUDIO PALETTE, 2026-08-21. These are the current computed Studio roles, not a Labs
   approximation: page #eef1f5, chrome #eceff3, panel #fff, panel-2 #f6f7f9, soft
   #eef0f3, ink #1f2329, muted #5f6673, dim #666d7a, line #e4e7ec, line-strong
   #d0d5dd, accent display #2a78d6, accent text/strong fill #2266bd, good #0f7a3d,
   warning #9a6407 and danger #c23636. Small white text on the display blue is 4.42:1,
   so solid controls use Studio's strong blue. The rendered gate asserts the core mapping
   on every light page so a later per-tool :root cannot quietly pull Labs back to its older
   blue-grey palette.

   THE ACCENT CANNOT BE ONE VALUE. --ac has to read AS text on white and has to sit UNDER
   text as a button fill. Text on white needs relative luminance <= 0.133; black text on the
   fill needs >= 0.175. Those do not overlap, so no single accent satisfies both - which is
   why the accent here is the readable dark blue and the fill-ink rule below forces white
   ink on accent-filled buttons instead of the #000 the tools hardcode.
   ============================================================ */
html[data-labs-theme="light"]{
  /* native form controls, scrollbars and the UA canvas follow the theme */
  color-scheme:light;

  /* -- chrome tokens (see :root at the top of this file for the dark values) -- */
  --labs-fg:31,35,41;
  --labs-page-bg:#eef1f5;
  --labs-chrome-bg:#eceff3;
  --labs-panel-bg:#ffffff;
  --labs-panel-bg-2:#f6f7f9;
  --labs-panel-line:#e4e7ec;
  --labs-chrome-bg-2:#f6f7f9;
  --labs-sheet-bg:rgba(255,255,255,.97);
  --labs-mob-bg:rgba(236,239,243,.97);
  --labs-ink:#1f2329;
  --labs-ink-2:#5f6673;
  --labs-ink-3:#666d7a;
  --labs-ink-4:#666d7a;
  --labs-rail-border:#e4e7ec;
  --labs-line-1:#e4e7ec;
  --labs-line-2:#d0d5dd;
  --labs-line-3:#d0d5dd;
  --labs-hover:#eef0f3;
  --labs-hover-2:#f6f7f9;
  --labs-fill-1:#f6f7f9;
  --labs-ac:#2266bd;
  --labs-ac-soft:#e9f1fc;
  --labs-ac-border:rgba(42,120,214,.34);
  --labs-ac-fill:#2266bd;
  --labs-ac-on:#ffffff;
  --labs-scrim:rgba(31,35,41,.34);

  /* -- the tool tokens: the same names all 105 tool pages already declare -- */
  --bg:#eef1f5;
  --p1:#ffffff;
  --p2:#f6f7f9;
  --p3:#eef0f3;
  --p4:#e4e7ec;
  --b1:#e4e7ec;
  --b2:#d0d5dd;
  --b3:#d0d5dd;
  --wh:#1f2329;
  --mu:#5f6673;
  --dm:#666d7a;
  --ac:#2266bd;
  --ac2:#e9f1fc;
  --ac3:rgba(42,120,214,.34);
  --gr:#0f7a3d;
  --gr2:#e7f5ec;
  --rd:#c23636;
  --am:#9a6407;
  --am2:#fdf3e0;
  --pu:#6b3fc4;
  --pu2:rgba(107,63,196,.08);
  --or:#a4470a;
  --vi:#6b3fc4;
  --ks:#a4470a;         /* KeyShot orange #FF7A45 in dark, kept in hue */
  /* the minority token names, same roles (11 pages use --panel, 10 --muted/--line/--green/
     --blue, 9 --text, and a handful of one-offs). Mapped rather than left dark, because a
     single un-mapped surface token is a black panel in the middle of a light page. */
  --panel:#ffffff;
  --panel2:#f6f7f9;
  --sidebar:#eceff3;
  --line:#e4e7ec;
  --line2:#d0d5dd;
  --text:#1f2329;
  --txt:#1f2329;
  --white:#1f2329;
  --muted:#5f6673;
  --mut:#5f6673;
  --soft:#5f6673;
  --dim:#666d7a;
  --grey-mid:#eef0f3;   /* a surface, not an ink: #1D1D1D in dark */
  --green:#0f7a3d;
  --success:#0f7a3d;
  --blue:#2266bd;
  --amber:#9a6407;
  --red:#c23636;
  /* the remaining per-tool vocabularies, from the full enumeration of every colour-valued
     custom property declared anywhere in the estate */
  --card:#eef0f3;
  --card2:#e4e7ec;
  --card3:#d0d5dd;
  --dark-grey:#f6f7f9;
  --accent:#2266bd;
  --achov:#2266bd;
  --card-ac:#2266bd;
  --c4d:#2266bd;
  --path-ac:#2266bd;
  --abg:#e9f1fc;
  --abd:rgba(42,120,214,.34);
  --blue2:#e9f1fc;
  --sbg:#e7f5ec;
  --am3:rgba(154,100,7,.28);

  /* ---- THE ESCAPE-HATCH FAMILIES ----
     These are declared here and NOWHERE ELSE, on purpose. 399 hardcoded literals across the
     tool pages were rewritten as color:var(--li-blue,#8fc2ff) and background:var(--ls-0,#000),
     so in dark the declaration is absent, the fallback literal wins, and every one of those
     399 computed values is exactly what it was before light mode existed. In light the
     declaration exists and a pale-on-black ink becomes a dark-on-white one.
     Measured on #ffffff: blue 6.14, green 6.24, red 6.42, amber 7.06, orange 6.31,
     purple 6.70, neutral 10.29. --li-on-accent is the ink that sits ON a filled control,
     where the fill has itself gone dark, so it is white rather than near-black. */
  --li-blue:#2266bd;
  --li-green:#0f7a3d;
  --li-red:#c23636;
  --li-amber:#9a6407;
  --li-orange:#a4470a;
  --li-purple:#6b3fc4;
  --li-neutral:#5f6673;
  --li-on-accent:#ffffff;
  --black:#ffffff;      /* one page's name for the ink ON its accent fill, so it follows the fill */
  --ls-0:#eef1f5;
  --ls-1:#ffffff;
  --ls-2:#f6f7f9;
  --ls-3:#eef0f3;
  --ls-4:#e4e7ec;
  /* found by the second measured pass, not by reading the files: these are the literals that
     were still painting a dark panel under light ink on /pro/, /account/, /labs-concierge/,
     /3d-rendering/ and /cgi-sustainability-savings-calculator/ */
  --ls-5:#d0d5dd;
  /* A recessed panel: black scrim in dark, a light recess in light. USED IN ONE PLACE ON
     PURPOSE. A black scrim at 0.22-0.42 alpha paints a mid-grey band on a light page, which
     reads as unstyled rather than unreadable, so the contrast gate cannot see it. Applying it
     to all 38 such fills in one pass looked tidier and MEASURED WORSE: 54 light elements went
     below 4.5:1, because the inks on those scrims were picked to sit on black and stayed pale
     when the scrim went light. Pulled back to the one panel whose two inks were checked. The
     other 37 are a reported observation, not a silent change. */
  --li-blue-2:#2266bd;
  --li-mint:#0f7a3d;
}

/* THE FILL-INK RULE WAS REMOVED, 2026-08-20, and this note is why.
   It listed the accent-filled button classes and forced white ink on them in light. It was
   measurably wrong on several tools: .btn-dl, .btn-copy and .cta-btn are the GHOST variant
   there (the polish layer above already notes the ".btn-dl accent-vs-ghost collision"), so
   the rule painted white ink on a #eef0f3 fill - 1.04:1, worse than what it replaced.
   The precise version of the same fix is the --li-on-accent literal substitution: a tool that
   writes color:#000 is telling you the element sits on a fill, which a class name cannot. */

/* WHITE INK ON A SEMANTIC FILL, measured in both themes, fixed in both.
   These fill with the brand accent or a status colour and then put white on it: the Labs
   accent #4C9CFC carries white at 2.81:1, the green #3DD68C at 1.88:1, the amber #F5A623 at
   2.03:1. Near-black ink on the same fills measures 7.1, 11.4 and 10.4. Listed by name
   because these were found by measurement, and a class name alone cannot tell you whether a
   given .btn-dl is filled or ghost. */
:is(.labs-rc-submit,.dp-launch,.btn-begin,.g-bar,#rv-pro-badge.free,#labs-pro-pill.free){
  color:var(--labs-ac-on);
}

/* Named view-transition surfaces receive literal theme paints as well as inherited tokens.
   Chromium can otherwise retain their previous bitmap until reload after an in-place toggle. */
html:not([data-labs-theme="light"]) :is(.labs-nav,.labs-footer,.labs-app-rail,.labs-main-menu,.labs-marketing-menu,.labs-tool-shell,.labs-home-shell,.labs-marketing-stage){background:#1f1e1c;}
html:not([data-labs-theme="light"]) :is(.labs-tool-content,.labs-home-content,.labs-marketing-content){background:#262523;border-color:#34322e;}
html[data-labs-theme="light"] :is(.labs-nav,.labs-footer,.labs-app-rail,.labs-main-menu,.labs-marketing-menu,.labs-tool-shell,.labs-home-shell,.labs-marketing-stage){background:#eceff3;}
html[data-labs-theme="light"] :is(.labs-tool-content,.labs-home-content,.labs-marketing-content){background:#fff;border-color:#e4e7ec;}

/* Chrome pieces whose dark treatment is a lift off black and reads as a smudge on white. */
html[data-labs-theme="light"] .labs-app-rail,
html[data-labs-theme="light"] html.labs-menu-ready .labs-main-menu,
html[data-labs-theme="light"] html.labs-menu-ready .labs-marketing-menu{
  box-shadow:none;
}
html[data-labs-theme="light"] .labs-app-rail{box-shadow:none;}
html[data-labs-theme="light"] .labs-nav{border-bottom:1px solid var(--labs-line-1);}
html[data-labs-theme="light"] .labs-menu{box-shadow:0 18px 48px rgba(16,24,40,.16);}
html[data-labs-theme="light"] .labs-about-panel,
html[data-labs-theme="light"] .labs-gate-panel{box-shadow:0 30px 80px rgba(16,24,40,.22);}
html[data-labs-theme="light"] .labs-consent{box-shadow:0 18px 48px rgba(16,24,40,.18);}
html[data-labs-theme="light"] .labs-share-toast,
html[data-labs-theme="light"] .labs-share-loaded{box-shadow:0 16px 44px rgba(16,24,40,.18);}
html[data-labs-theme="light"] #toast{box-shadow:0 8px 28px rgba(16,24,40,.20);}
html[data-labs-theme="light"] .labs-mobile-tabs{box-shadow:0 -10px 26px rgba(16,24,40,.10);border-top:1px solid var(--labs-line-2);}
html[data-labs-theme="light"] .labs-mobile-more-sheet{box-shadow:0 18px 50px rgba(16,24,40,.20);}
html[data-labs-theme="light"] .labs-mobile-more-backdrop{background:var(--labs-scrim);}
html[data-labs-theme="light"] .labs-about-backdrop,
html[data-labs-theme="light"] .labs-gate-backdrop{background:var(--labs-scrim);}
/* The raised centre action keeps the bright brand gradient, so its ink stays near-black. */
html[data-labs-theme="light"] .labs-mobile-tab-tools .labs-mobile-action{
  background:#2266bd;color:#fff;
  box-shadow:0 10px 26px rgba(42,120,214,.34),inset 0 1px 0 rgba(255,255,255,.30);
}
html[data-labs-theme="light"] .labs-mobile-tab-tools .labs-mobile-action .labs-mobile-ico,
html[data-labs-theme="light"] .labs-mobile-tab-tools .labs-mobile-action svg{color:#fff;}
/* color-scheme:dark is hardcoded on the bug-report controls; it paints a dark UA widget. */
html[data-labs-theme="light"] .labs-bug-field input,
html[data-labs-theme="light"] .labs-bug-field select,
html[data-labs-theme="light"] .labs-bug-field textarea{color-scheme:light;color:var(--labs-ink);}
html[data-labs-theme="light"] .labs-bug-field select option{background:#fff;color:var(--labs-ink);}
html[data-labs-theme="light"] .labs-gate-input,
html[data-labs-theme="light"] .labs-share-input{color:var(--labs-ink);background:#fff;border-color:var(--labs-line-2);}
html[data-labs-theme="light"] .labs-gate-err{color:#c23636;}
/* Generated comparison pages still emit their FAQ copy as a foreground alpha. The Studio
   muted role is the solid equivalent and stays readable on every light surface. */
html[data-labs-theme="light"] .faq p{color:var(--labs-ink-2);}
/* The sheen sweep is a white wash; on a light card it has to be a dark one to be visible. */
html[data-labs-theme="light"] .labs-sheen::before{
  background:linear-gradient(100deg,transparent,rgba(31,35,41,.05),transparent);
}

/* ---- THEME TOGGLE ----
   Both named modes stay visible so the control cannot be mistaken for an unlabelled icon.
   The selected half is resolved entirely from the pre-painted root theme. */
.labs-theme-toggle{
  position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  height:30px;min-height:30px;margin:0 6px 0 0;padding:2px;gap:2px;flex:0 0 auto;
  border:1px solid var(--labs-line-2);border-radius:8px;background:var(--labs-hover-2);
  color:var(--labs-ink-3);cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.labs-theme-toggle:hover{background:var(--labs-hover);border-color:var(--labs-line-3);color:var(--labs-ink);}
.labs-theme-choice{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;height:24px;padding:0 6px;
  border-radius:5px;font-family:var(--labs-font);font-size:8px;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;color:var(--labs-ink-4);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.labs-theme-choice svg{width:13px;height:13px;display:block;flex:0 0 auto;}
.labs-theme-choice-dark{background:var(--labs-ink);color:var(--labs-page-bg);box-shadow:0 1px 3px rgba(0,0,0,.18);}
html[data-labs-theme="light"] .labs-theme-choice-dark{background:transparent;color:var(--labs-ink-4);box-shadow:none;}
html[data-labs-theme="light"] .labs-theme-choice-light{background:var(--labs-ink);color:var(--labs-page-bg);box-shadow:0 1px 3px rgba(0,0,0,.12);}
/* Keep both words visible on phones; dropping only the decorative icons saves the width
   needed by the FAQ and Studio controls. */
@media (max-width:639px){
  .labs-nav .labs-theme-toggle{height:34px;min-height:34px;margin-right:4px;}
  .labs-nav .labs-theme-choice{height:28px;padding:0 5px;}
  .labs-nav .labs-theme-choice svg{display:none;}
}