/* Local product interactions share the production application's quiet chrome. */
.product-lab {--lab-ink:#eeeae2;--lab-dim:#9b9c9f;--lab-rule:#ffffff14;--lab-violet:#c6afe4;--lab-up:#a5cebc;position:relative;width:100%;min-width:0;background:#08090a;color:var(--lab-ink);font:400 13px/1.5 var(--font,Inter,sans-serif);font-variant-numeric:tabular-nums;isolation:isolate;container-type:inline-size}
.product-lab * {box-sizing:border-box}
.product-lab [hidden],.lab-product-copy[hidden] {display:none!important}
.product-lab :is(button,a,input) {-webkit-tap-highlight-color:#c6afe42b}
.product-lab button {appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.product-lab :is(button,a):focus-visible {outline:2px solid var(--lab-violet);outline-offset:3px;border-radius:3px}
.product-lab button:disabled {cursor:default}
.product-lab :is(h3,h4,h5,p) {margin:0}
.product-lab a {color:inherit;text-decoration:none}
.product-lab a:hover {text-decoration:underline;text-underline-offset:4px}
.lab-topbar {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 22px;background:linear-gradient(110deg,#141416,#0b0c0d);border-bottom:1px solid var(--lab-rule)}
.lab-brand {display:flex;align-items:center;gap:10px;min-width:0;font-size:12px}
.lab-brand b {font-weight:500;white-space:nowrap}
.lab-brand >span:last-child {color:#a5a1aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-brand-dot {width:6px;height:6px;flex:0 0 6px;background:#c6afe4;border-radius:50%;box-shadow:0 0 9px #c6afe42e}
.lab-brand-divider {color:#555358}
.product-lab .lab-auto {display:flex;align-items:center;gap:7px;min-height:30px;padding:4px 10px;border:1px solid #ffffff20;border-radius:6px;color:#b6afb9;font-size:10px;white-space:nowrap}
.lab-auto [data-lab-auto-icon] {font-size:9px}
.product-lab .lab-auto[aria-pressed="true"] {color:#e1d2ef;border-color:#c6afe44d;background:#c6afe408}
.lab-product-tabs {display:flex;align-items:stretch;gap:23px;padding:0 22px;border-bottom:1px solid var(--lab-rule);overflow-x:auto;scrollbar-width:none}
.lab-product-tabs::-webkit-scrollbar {display:none}
.lab-product-tabs [role="tab"] {position:relative;flex:0 0 auto;min-height:47px;padding:10px 0;color:#9d9aa2;font-size:12px;white-space:nowrap}
.lab-product-tabs [aria-selected="true"] {color:#f4edf9}
.lab-product-tabs [role="tab"]::after {content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#c6afe4;transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.lab-product-tabs [aria-selected="true"]::after {transform:scaleX(1)}
.lab-panel {min-width:0;outline-offset:-4px!important}
.lab-panels {position:relative;min-height:0}
#tools .chapter-copy:has([data-lab-copy]) {position:relative}

.lab-film {position:relative;aspect-ratio:16/9;overflow:hidden;background:#050607}
.lab-native-loading{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;color:#eeeae2;font-size:18px}
.lab-native-loading span{font-size:12px;color:#9b9c9f}
.lab-film:has(.lab-native-interactive.is-ready) .lab-native-loading{display:none}
.lab-film :is(picture,img,video) {position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.lab-film video {opacity:0;transition:none}
.lab-film video.has-frame {opacity:1}
.lab-film:has(video.has-frame) picture {visibility:hidden}
.lab-film-rail {display:flex;gap:20px;align-items:stretch;padding:0 22px;min-height:44px;overflow:auto;scrollbar-width:none;background:#0c0c0e;border-top:1px solid var(--lab-rule)}
.lab-film-rail>a,.lab-film-rail>button {position:relative;display:flex;align-items:center;flex-shrink:0;min-height:44px;color:#a7a3ac;font-size:11px;white-space:nowrap;text-decoration:none}
.lab-film-rail>a:hover,.lab-film-rail>button:hover,.lab-film-rail>button[aria-pressed=true] {color:#f0eaf7}
.lab-film-rail>button i {position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#c6afe4 calc(var(--cue-progress,0)*100%),#c6afe430 0);opacity:0}
.lab-film-rail>button[aria-pressed=true] i {opacity:1}
.lab-film-rail>button:disabled {cursor:default}
.lab-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--lab-rule);color:#8f8b94;font-size:10px;line-height:1.5}
.lab-footer>span {display:flex;align-items:center;gap:7px}
.lab-footer i {width:4px;height:4px;background:#bca7d4;border-radius:50%;flex:0 0 4px}
.lab-footer a {color:#d2c7de;white-space:nowrap}
.lab-brand img {object-fit:contain;width:12px;height:16px}
@media(max-width:680px) {
 .lab-film {aspect-ratio:9/16}
 .lab-topbar {padding:12px 16px}.lab-brand {gap:7px;font-size:11px}
 .lab-product-tabs {gap:20px;padding-inline:16px}.lab-product-tabs [role=tab] {font-size:11px;min-height:44px}
 .lab-film-rail {padding-inline:16px;gap:19px}
 .lab-film-rail>a,.lab-film-rail>button {font-size:10px}
 .lab-footer {padding:12px 16px;align-items:start;flex-direction:column;gap:6px;font-size:10px}
 .lab-brand-divider,.lab-brand>span:last-child {display:none}
}
@media(prefers-reduced-motion:reduce) {.product-lab *,.product-lab *::after {animation:none!important;transition:none!important}}

/* The product is the canvas; the surrounding player is only a single control row. */
.lab-sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.lab-toolbar {display:flex;align-items:center;gap:12px;padding:0 12px 0 20px;min-width:0;background:#090909;border-bottom:1px solid #ffffff14}
.lab-toolbar .lab-product-tabs {flex:1;min-width:0;gap:24px;padding:0;border:0}
.lab-toolbar .lab-product-tabs [role=tab] {min-height:48px;padding:12px 0;font-size:12px}
.lab-toolbar .lab-product-tabs [role=tab]::after {height:1px;background:#d1bde9}
.product-lab .lab-auto {display:grid;place-items:center;flex:0 0 32px;width:32px;min-height:32px;padding:0;border:1px solid #ffffff1c;border-radius:50%;background:transparent;color:#aaa}
.product-lab .lab-auto[aria-pressed=true] {background:transparent;border-color:#ffffff26;color:#e6dfed}
.product-lab .lab-auto:hover {background:#ffffff09;color:#fff;border-color:#ffffff40}
.lab-film {background:#000}
.lab-film-rail {min-height:40px;padding:0 106px 0 20px;gap:22px;background:#090909;border-top:1px solid #ffffff12}
.lab-film-rail>a,.lab-film-rail>button {min-height:40px;font-size:11px}
.lab-film-rail>button i {bottom:0;height:1px}
.lab-footer {position:absolute;right:0;bottom:0;height:40px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 10px 0 14px;border:0;background:#090909;box-shadow:-12px 0 14px #090909;font-size:10px}
.lab-demo-note {color:#77747c;cursor:help}
.lab-footer a {display:grid;place-items:center;width:30px;height:32px;font-size:17px;color:#c3beca;border-radius:5px}
.lab-footer a:hover {background:#ffffff09;text-decoration:none;color:white}
@media(min-width:1100px) {
 .editorial-hub #tools {grid-template-columns:minmax(0,1.7fr) minmax(240px,.72fr);gap:clamp(32px,4vw,64px)}
}
@media(max-width:680px) {
 .lab-toolbar {gap:8px;padding:0 9px 0 14px}
 .lab-toolbar .lab-product-tabs {gap:19px}
 .lab-toolbar .lab-product-tabs [role=tab] {font-size:11px;min-height:44px}
 .lab-film-rail {padding-left:14px;padding-right:88px;gap:18px}
 .lab-film-rail>a,.lab-film-rail>button {font-size:10px}
 .lab-footer {padding-right:6px;padding-left:8px;gap:5px}
 .lab-demo-note {font-size:9px}
}

/* Crisp portrait close-up; the Veo opening and ending remain the actual film. */
.lab-native-portrait{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000;opacity:0;visibility:hidden}
@media(max-width:680px){
 .lab-native-portrait{display:block;transition:opacity .18s ease,visibility .18s}
 .lab-native-portrait.is-ready{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.lab-native-portrait{transition:none}}

/* On a phone, metadata must never cover the last chapter control. */
@media(max-width:680px){
 .lab-film-rail{padding:0 14px;gap:18px}
 .lab-film-rail:has(>button){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible}
 .lab-film-rail>button{min-width:0;min-height:44px;justify-content:center;padding:8px 0;font-size:11px;line-height:1.35;white-space:normal;text-align:center;overflow-wrap:anywhere}
 .lab-footer{position:relative;height:32px;justify-content:space-between;padding:0 10px 0 14px;box-shadow:none;border-top:1px solid var(--lab-rule)}
 .lab-footer a{height:30px}
}

/* Original Veo camera shot opens and closes the film. The central screener
   sequence is the same production-derived interface rendered sharply in HTML. */
@media(min-width:681px){
 .lab-native-desktop{display:block;transition:opacity .18s ease,visibility .18s}
 .lab-native-desktop.is-ready{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.lab-native-desktop{transition:none}}

/* Give the filmed interface the full canvas on tablets. Keep the copy above it
   and reserve its height in JS, so switching products never shifts the player. */
@media (min-width:681px) and (max-width:1099px) {
 .editorial-hub #tools {display:flex;flex-direction:column;align-items:stretch;gap:30px}
 .editorial-hub #tools .chapter-copy {order:0;width:100%;max-width:680px}
 .editorial-hub #tools .product-lab {order:1;width:100%}
 .editorial-hub #tools .chapter-copy h2 {max-width:24ch}
 .editorial-hub #tools .chapter-links {display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 28px;margin-top:18px}
 .editorial-hub #tools .chapter-copy .eyebrow {margin-bottom:16px}
}

/* Source components stay operable during their close-up. */
.lab-native-interactive.is-ready{pointer-events:auto}
/* Isolate the moving embedded player from the neighbouring text compositor. */
.lab-native-interactive{contain:strict;isolation:isolate;transform:translateZ(0)}
#tools .chapter-copy{isolation:isolate;transform:translateZ(0)}

/* A long native portfolio tour stays a single compact chapter rail on phones. */
@media(max-width:680px){#lab-panel-portfolio .lab-film-rail:has(>button){display:flex;overflow-x:auto;gap:20px}#lab-panel-portfolio .lab-film-rail>button{flex:0 0 auto;white-space:nowrap;min-height:40px}}

/* A little more vertical room keeps native card actions inside the close-up.
   All products share the same canvas, so changing tabs cannot shift the copy. */
@media(min-width:681px){
 .lab-film{aspect-ratio:16/10}
 .lab-film :is(picture,img,video){object-fit:contain}
}

/* Match the native phone UI: multi-chart is desktop-only. */
.lab-label-mobile{display:none}
@media(max-width:680px){.lab-label-desktop{display:none}.lab-label-mobile{display:inline}}

/* A complete film stays cinematic until the visitor chooses native controls. */
[data-cinema-playback="film"] .lab-film :is(img,video){object-fit:contain}
[data-cinema-playback="film"] .lab-native-interactive{transition:none}
[data-cinema-playback="film"] .lab-film:has(.lab-native-interactive.is-ready)>:is(picture,video){visibility:hidden;pointer-events:none}
.lab-take-control{position:absolute;right:16px;bottom:16px;z-index:4;display:flex;align-items:center;gap:12px;border:1px solid #ffffff30;border-radius:24px;padding:10px 16px;background:#101012d9;color:#f4f2f8;font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;cursor:pointer;backdrop-filter:blur(12px);transition:background .2s,border-color .2s}
.lab-take-control:hover{background:#24212ae8;border-color:#c7addb88}
.lab-take-control:focus-visible{outline:2px solid #c7addb;outline-offset:3px}
.lab-take-control[hidden]{display:none}
@media(max-width:680px){.lab-take-control{right:10px;bottom:12px;min-height:44px;padding:10px 14px}}