/* AISBERG Labs (/labs/, /en/labs/). One black stage: the opening film
   (labs.js), then the footer. Nav, menu, footer and the button come from
   glacier.css, home-outro.css and brand-colors.css, as on the other pages. */
@font-face{font-family:"Aisberg Sans";src:url('./assets/fonts/instrument-sans-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#f1f3f4;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.skip{position:fixed;z-index:40;top:-80px;left:16px;padding:12px 16px;background:#fff;color:#000;border-radius:6px}
.skip:focus{top:12px}
/* one space between every two sections of the page, the same everywhere: from the opening to the sentence, the
   sentence to the reels, the reels to the studio, the studio to the questions, the questions to the footer */
.labs{--lb-gap:clamp(150px,16.7vw,280px);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;background:#000;color:var(--ink);overflow:hidden}

/* While the film plays there is only the film: the bar (logo, Menu) waits (the page's head holds the
   scrolling, labs.js lets it go at the end). The bar fades in as the film ends: its two parts, not their
   fixed shell, so it is smooth in every browser. */
.labs-js .g-nav-brand,.labs-js .g-nav-trigger{transition:opacity 1.5s cubic-bezier(.33,0,.15,1),translate 1.7s cubic-bezier(.22,1,.36,1),color .25s ease}
.labs-js .g-nav-trigger{transition-delay:.12s,.12s,0s}
.labs-quiet .g-nav-brand,.labs-quiet .g-nav-trigger{opacity:0;translate:0 -10px;pointer-events:none}

/* ── The stage: the word on the centre line, its reflection on still water,
   the copy under the water at the end. */
/* As tall as the largest screen (phones: toolbars hidden), so nothing of the footer ever shows under it;
   the word is centred on the part really on screen (labs.js). */
.labs-hero{position:relative;height:100vh;height:100lvh;min-height:600px;overflow:hidden;background:#000;color:#f1f7fa}
#lb-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* the light of the series, the same as the home's card: magenta under the water, violet from the top
   right, a little coral from the bottom left; it rises while labs locks on (labs.js) and fades into
   the footer's black at the bottom */
.labs-glow{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;background:
 linear-gradient(180deg,transparent 72%,#000),
 radial-gradient(ellipse 58% 46% at 50% 74%,rgb(224 71 159 / .30),transparent 70%),
 radial-gradient(ellipse 44% 56% at 94% -6%,rgb(107 92 255 / .30),transparent 72%),
 radial-gradient(ellipse 36% 44% at 4% 92%,rgb(255 122 89 / .16),transparent 72%)}
.labs-fallback .labs-glow,html:not(.labs-js) .labs-glow{opacity:1}
/* with WebGL the light is drawn by the GPU, dithered (labs.js): this CSS one is only the fallback */
.labs-gl .labs-glow{display:none}
#lb-stage,#lb-fxs{position:absolute;left:0;top:0;display:block;overflow:visible;pointer-events:none}
/* the word's own layer, only the band above the water: while it melts it is blurred and thresholded on the
   GPU, and tinted the colour of ice through a multiply */
#lb-words{position:absolute;left:0;top:0;display:block;overflow:visible;pointer-events:none}
/* the reflection, from the water down: .34 at the water, nothing at the bottom, as in the film */
.lb-refl{position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;pointer-events:none;opacity:0;will-change:opacity;
 -webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / .34),transparent);mask-image:linear-gradient(180deg,rgb(0 0 0 / .34),transparent)}
#lb-rsvg{display:block}
.lb-ice{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;background:#c6e6ff;mix-blend-mode:multiply;opacity:0}
/* (class names, not #lb-stage descendants: the reflection is a <use> copy of
   the word, and its copy only takes rules that don't depend on ancestors) */
.lb-lg{fill:#f1f7fa}
.lb-lw,.lb-t-sans,.lb-pilltxt{font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;fill:#f1f7fa}
.lb-pilltxt{letter-spacing:-.01em}
.lb-t-serif,.lb-t-it{font-family:"Aisberg Serif",Georgia,serif}
.lb-t-it{font-style:italic}

/* the scene: the word, its reflection and the water's line, which rise together at the end (labs.js) */
.lb-scene{position:absolute;inset:0;pointer-events:none}
.lb-scene.is-moving{will-change:transform}

/* ── The way to the profile: a button of the site's family (the label, a thin divider, the sign; a line of
   light along its foot that runs on hover), made for this scene: dark glass over the light, a hairline in
   labs' colours. It is not on the water, so it has no reflection. */
.lb-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-width:238px;min-height:56px;padding:14px 15px 14px 22px;
 border-radius:9px;background:rgb(255 255 255 / .055);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
 box-shadow:inset 0 1px 0 rgb(255 255 255 / .09),0 12px 34px rgb(0 0 0 / .32);color:#f5f7fa;
 font:500 15px/1.3 "Aisberg Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:-.015em;text-decoration:none;overflow:hidden;
 transition:background .35s ease,box-shadow .35s ease;-webkit-tap-highlight-color:transparent}
.lb-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(110deg,rgb(154 139 255 / .7),rgb(224 71 159 / .5) 50%,rgb(255 122 89 / .65));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 opacity:.55;transition:opacity .35s ease}
.lb-btn::after{content:"";position:absolute;left:14%;right:58%;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#e0479f,#ff7a59,transparent);
 transition:left .55s cubic-bezier(.2,.7,.2,1),right .55s cubic-bezier(.2,.7,.2,1)}
.lb-btn-sym{position:relative;display:grid;place-items:center;flex:none;width:31px;height:26px;border-left:1px solid rgb(255 255 255 / .16)}
.lb-btn-sym svg{width:15px;height:15px;margin-left:4px;fill:none;stroke:#ee86b4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lb-btn:hover,.lb-btn:focus-visible{background:rgb(255 255 255 / .09);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 14px 40px rgb(0 0 0 / .38)}
.lb-btn:hover::before,.lb-btn:focus-visible::before{opacity:1}
.lb-btn:hover::after,.lb-btn:focus-visible::after{left:58%;right:8%}
.lb-btn:hover .lb-btn-sym svg,.lb-btn:focus-visible .lb-btn-sym svg{transform:translate(2px,-2px)}
.lb-btn:focus-visible{outline:2px solid #f1f7fa;outline-offset:4px}
/* in the opening: under the reflection, labs.js brings it in */
.lb-btn-hero{position:absolute;left:0;right:0;top:0;width:max-content;margin:0 auto;opacity:0;visibility:hidden}
/* on plain black there is nothing to see through: no glass */
.lb-btn:not(.lb-btn-hero){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(255 255 255 / .06)}
/* "labs" in its colours, exactly as on the opening's word: the colours make one whole turn in a tile 1.5 times
   the word (so one tile meets the next without a seam) and flow left to right, one turn every 7.5 s */
.labs-desc .lbw span,.labs-endmark .end-wordmark-text>span,.labs-endmark .end-wordmark-mirror-text>span{padding-right:.08em;margin-right:-.08em;background:linear-gradient(90deg,#9a8bff,#bb69da 16.67%,#e0479f 33.33%,#f2607a 50%,#ff7a59 66.67%,#ec5b8a 78%,#bd6fd6 90%,#9a8bff) 0 0/150% 100% repeat-x;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:lb-flow 7.5s linear infinite paused}
.labs-desc.is-run .lbw span,.end-footer.is-sweeping .labs-endmark span{animation-play-state:running}
@keyframes lb-flow{to{background-position:-300% 0}}
/* "Scroll": a word and a thin line with light running down it */
.lb-cue{position:absolute;left:0;right:0;top:0;width:max-content;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 10px;
 font:500 11px/1 "Aisberg Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(241 247 250 / .58);opacity:0;visibility:hidden}
.lb-cue i{position:relative;width:1px;height:38px;overflow:hidden;background:rgb(255 255 255 / .16)}
/* it leaves as soon as the page is scrolled, and comes back at the top */
.lb-cue>span,.lb-cue>i{transition:opacity .6s cubic-bezier(.33,0,.2,1),transform .6s cubic-bezier(.33,0,.2,1)}
.lb-cue.is-away{pointer-events:none}
.lb-cue.is-away>span,.lb-cue.is-away>i{opacity:0;transform:translate3d(0,-8px,0)}
/* the water answers a tap: no grey flash of the tapped area, no zoom on a double tap */
.labs-hero{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lb-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:linear-gradient(transparent,#f1f7fa);animation:lb-cue 2.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes lb-cue{to{top:100%}}
.lb-cue:hover{color:#f1f7fa}
.lb-cue:focus-visible{outline:2px solid #f1f7fa;outline-offset:4px;border-radius:6px}

/* ── Below the opening: what aisberglabs is (one big sentence), the reels, the studio at work, the questions,
   the profile. */
/* The sentence, big and in the middle of the page. With the script it comes up, stops when the whole of it is in
   the middle of the screen (under the bar), and only then its words light up one after another as the page goes
   on scrolling (labs.js); then it goes on up. Without the script, or with reduced motion, it is simply there, lit.
   Only the name (aisberglabs) and AISBERG's logo are in full white and weight; the other words are thinner and a
   little dimmer, the three kinds of news in the italic and in the colours of labs, flowing as on the word. */
/* (the page's frame clips what overflows it, as before, but without becoming a scroller: so the sentence can stay
   on screen while the page passes) */
@supports (overflow:clip){main.continuation.labs{overflow:clip}}
.labs-desc{position:relative;padding:var(--lb-gap) 0 0;background:#000}
/* where it stops: on computers in the middle of the screen, never under the bar (labs.js measures the bar and the sentence) */
.labs-desc.is-arm .labs-desc-pin{position:sticky;top:max(var(--lb-hb,0px),calc((100vh - var(--lb-ph,0px)) / 2));top:max(var(--lb-hb,0px),calc((100svh - var(--lb-ph,0px)) / 2))}
/* how long it stays: the reading */
.labs-desc-run{display:none}
.labs-desc.is-arm .labs-desc-run{display:block;height:150vh;height:150svh}
.labs-desc-pin>.outro-wrap{position:relative;width:100%;box-sizing:border-box}
.labs-desc-txt{max-width:24em;margin:0 auto;text-align:center;font-size:clamp(26px,3.3vw,58px);font-weight:400;line-height:1.2;letter-spacing:-.022em;color:rgb(241 247 250 / .76);text-wrap:balance}
/* in Italian the first line runs from the big name to the AISBERG logo, one at each end (computers; on phones the
   words flow): the box is a little wider so that line fits, and it never wraps */
.labs-desc-txt.has-l1{max-width:25.6em;font-size:clamp(24px,3.3vw,58px)}
.labs-desc .lb-l1{white-space:nowrap}
.labs-desc .lb-l1::after{content:"\A";white-space:pre}
/* the name, bigger, and AISBERG's logo where it is named */
.labs-desc .lbw{font-size:1.3em;font-weight:500;line-height:1;letter-spacing:-.032em;color:#f1f7fa}
.labs-desc .lgw{white-space:nowrap;color:#f1f7fa}
.labs-desc .lb-logo{display:inline-block;height:1.22em;width:auto;vertical-align:-.265em;overflow:visible}
.labs-desc .k{font-family:"Aisberg Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.012em;line-height:1}
.labs-desc .k .w{padding-right:.07em;margin-right:-.07em;
 background:linear-gradient(90deg,#9a8bff,#bb69da 16.7%,#e0479f 33.3%,#f2607a 50%,#ff7a59 66.7%,#bd6fd6 83.3%,#9a8bff) 0 0/var(--pw,8em) 100% repeat-x;
 background-position:calc(0px - var(--o,0px)) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 animation:lb-kflow 7.5s linear infinite paused}
.labs-desc.is-run .k .w{animation-play-state:running}
@keyframes lb-kflow{to{background-position:calc(0px - var(--o,0px) - var(--pw,8em)) 0}}
.labs-desc.is-arm .w{opacity:.12;transition:opacity .5s cubic-bezier(.33,0,.2,1)}
.labs-desc.is-arm .w.on{opacity:1}
/* on computers, under it, a thin line fills as it is read: the line of the water, again (it is not part of what
   is centred; on phones there is no line) */
.labs-desc-line{position:absolute;left:50%;top:100%;width:min(62vw,1080px);height:1px;margin-top:clamp(34px,4vw,60px);background:rgb(241 247 250 / .1);overflow:hidden;transform:translateX(-50%)}
.labs-desc-line i{position:absolute;inset:0;background:linear-gradient(90deg,rgb(241 247 250 / .2),#f1f7fa 40%,#f1f7fa);transform:scaleX(1);transform-origin:0 50%}
.labs-desc.is-arm .labs-desc-line i{transform:scaleX(0)}
/* the sections' titles: as big and clear as the page's other titles, the second half in the italic */
.labs-h2{margin:0;font-size:clamp(40px,4.6vw,80px);font-weight:500;line-height:1;letter-spacing:-.045em;color:#f1f7fa}
.labs-h2 span{font-family:"Aisberg Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
.labs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(30px,3.6vw,56px)}
.labs-head .g-eyebrow,.labs-faq-head .g-eyebrow{margin:0 0 14px;color:rgb(241 247 250 / .5)}
/* The reels: three places, waiting for the real ones, always all three on screen: one in the middle, in front, and
   one on each side, smaller and dimmer. Every few seconds they turn (the middle one goes to the left, the right one
   comes to the middle, the left one passes behind to the right) and the one in the middle plays, its bar filling
   (labs.js). They never stop under the mouse or the finger. Without the script, or with reduced motion, they
   simply stand there. Each light breathes in a colour of labs. */
.labs-reels{position:relative;padding:var(--lb-gap) 0 0}  /* no background: the line under the sentence goes up with it */
.lb-handle{text-transform:none;letter-spacing:.06em}
.labs-reels-all{flex:none;display:inline-flex;align-items:center;gap:10px;padding-bottom:.4em;font-size:17px;line-height:1;color:rgb(241 247 250 / .76);text-decoration:none;transition:color .25s}
.labs-reels-all:hover{color:#f1f7fa}
.labs-reels-all:focus-visible{outline:2px solid #f1f7fa;outline-offset:4px;border-radius:4px}
.labs-reels-all svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.labs-reels-stage{--rw:clamp(220px,21vw,340px);--side:96%;position:relative;height:calc(var(--rw) * 16 / 9)}
.labs-reels-row{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.labs-reel{position:absolute;left:50%;top:0;width:var(--rw);margin-left:calc(var(--rw) / -2);z-index:2;opacity:.5;transform:scale(.8);
 transition:transform 1s cubic-bezier(.65,0,.25,1),opacity 1s cubic-bezier(.65,0,.25,1)}
.labs-reel[data-p="0"]{transform:translate3d(calc(-1 * var(--side)),0,0) scale(.8)}
.labs-reel[data-p="2"]{transform:translate3d(var(--side),0,0) scale(.8)}
.labs-reel[data-p="1"]{z-index:3;opacity:1;transform:none}
/* the one on the left goes on out to the left, fading, and comes back in from the right, behind the others (labs.js) */
.labs-reel.is-wrap{z-index:1;transition:none}
.labs-reel-v{position:relative;aspect-ratio:9/16;border-radius:clamp(16px,1.6vw,24px);overflow:hidden;isolation:isolate;background:#0b0a10;border:1px solid rgb(255 255 255 / .08)}
.labs-reel-v::before{content:"";position:absolute;inset:0;z-index:-1;
 background:url('./assets/dither.png') 0 0/64px,radial-gradient(120% 72% at 50% 108%,rgb(var(--c) / .3) 0%,rgb(var(--c) / .18) 24.8%,rgb(var(--c) / .06) 49.6%,rgb(var(--c) / .034) 55.8%,rgb(var(--c) / .015) 62%,rgb(var(--c) / .004) 68.2%,rgb(var(--c) / 0) 74.4%);
 animation:lb-breathe 6s ease-in-out infinite;animation-delay:calc(var(--i) * -2s)}
@keyframes lb-breathe{50%{opacity:.5;transform:scale(1.06)}}
.labs-reel-v span{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.4vw,20px);font-size:11px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:rgb(241 247 250 / .5)}
/* the bar at the top, as on a reel that plays: it fills while the reel is in the middle */
.labs-reel-bar{position:absolute;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);top:clamp(12px,1.2vw,18px);height:2px;border-radius:2px;background:rgb(255 255 255 / .2);overflow:hidden}
.labs-reel-bar b{position:absolute;inset:0;background:#f1f7fa;transform:scaleX(0);transform-origin:0 50%}
.labs-reels-stage.is-play .labs-reel[data-p="1"] .labs-reel-bar b{animation:lb-bar 3.8s linear forwards}
@keyframes lb-bar{to{transform:none}}
/* The questions, in short (they are also what search engines and assistants read and repeat) */
.labs-faq{position:relative;padding:var(--lb-gap) 0;background:#000}
.labs-faq .outro-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.labs-faq .labs-h2 span{display:block}
.labs-faq-list{border-top:1px solid rgb(241 247 250 / .12)}
.labs-faq details{border-bottom:1px solid rgb(241 247 250 / .12)}
.labs-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:clamp(16px,1.7vw,24px) 0;
 font-size:clamp(18px,1.45vw,22px);font-weight:500;line-height:1.25;letter-spacing:-.015em;color:#f1f7fa}
.labs-faq summary::-webkit-details-marker{display:none}
.labs-faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) 50%/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50%/1.5px 14px no-repeat;
 opacity:.6;transition:transform .35s cubic-bezier(.3,0,.2,1),opacity .25s}
.labs-faq details[open] summary::after{transform:rotate(45deg);opacity:1}
.labs-faq summary:hover::after{opacity:1}
.labs-faq summary:focus-visible{outline:2px solid #f1f7fa;outline-offset:4px;border-radius:6px}
.labs-faq-a{overflow:hidden}
.labs-faq details p{max-width:36em;margin:0 0 clamp(20px,2vw,28px);font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:rgb(241 247 250 / .68)}
.labs-faq details a{color:#f1f7fa;text-decoration:underline;text-decoration-color:rgb(241 247 250 / .35);text-underline-offset:3px}
.labs-faq details a:hover{text-decoration-color:#f1f7fa}
/* where the browser can, the answer opens softly */
.labs-faq details{interpolate-size:allow-keywords}
.labs-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s cubic-bezier(.3,0,.2,1),content-visibility .4s allow-discrete}
.labs-faq details[open]::details-content{block-size:auto}
/* with the script the answer opens and closes softly on every browser, phones too (labs.js), and the browser's own
   opening steps aside */
.labs-faq-list.is-soft details::details-content{transition:none}
.labs-faq details.is-closing summary::after{transform:none;opacity:.6}
.labs-studio{position:relative;padding:var(--lb-gap) 0 0;background:#000}
.labs-studio-txt{margin:0;max-width:24em;padding-bottom:.3em;text-align:right;font-size:clamp(15px,1.15vw,18px);line-height:1.45;color:rgb(241 247 250 / .62);text-wrap:balance}
.labs-studio-view{position:relative}
/* the light behind the studio: both glows end well inside their box, and the box itself fades out towards all its
   edges, so nowhere does the light stop on a line against the page */
.labs-studio-view::before{content:"";position:absolute;inset:-14% -8% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 46% 44% at 50% 58%,rgb(224 71 159 / 0.1600) 0.0%,rgb(224 71 159 / 0.0960) 23.2%,rgb(224 71 159 / 0.0320) 46.4%,rgb(224 71 159 / 0.0180) 52.2%,rgb(224 71 159 / 0.0080) 58.0%,rgb(224 71 159 / 0.0020) 63.8%,rgb(224 71 159 / 0.0000) 69.6%),radial-gradient(ellipse 30% 40% at 76% 32%,rgb(107 92 255 / 0.1600) 0.0%,rgb(107 92 255 / 0.0960) 23.2%,rgb(107 92 255 / 0.0320) 46.4%,rgb(107 92 255 / 0.0180) 52.2%,rgb(107 92 255 / 0.0080) 58.0%,rgb(107 92 255 / 0.0020) 63.8%,rgb(107 92 255 / 0.0000) 69.6%);-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent)}
/* The studio at work: the four parts of a reel, each made with AI, seen as layers from the side, one above the
   other: the picture (it appears from the top down), the voice, the music, the subtitles. Each comes in with its name
   beside it, on a thin line from the edge of its own layer (labs.js puts each name exactly level with that edge; the
   still copy of the stack, unseen, is where it measures). Then the names go, the layers close up and turn to face us:
   one 9:16 reel, which plays. Twelve seconds, again and again, only while it is on screen, from the start each time it
   comes back into view. The picture is abstract (light in the colours of labs): nothing pretends to be a real video.
   With reduced motion it is the four layers with their names, still; without the script the finished reel, still.
   Only opacity and transforms move. */
.st{--cw:clamp(176px,15.4vw,234px);--ch:calc(var(--cw) * 16 / 9);--r:calc(var(--cw) * .11);--d:calc(var(--cw) * .42);--ms:1.08;--sx:-90px;--sy:0px;--lg:clamp(34px,3.4vw,52px);--T:12s;
 position:relative;height:calc(var(--cw) * 2.2);font-size:clamp(13.5px,1.02vw,15px)}
.st *{animation-duration:var(--T);animation-iteration-count:infinite;animation-play-state:paused}
.st.is-run *{animation-play-state:running}
.st svg{display:block;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.st-stage{position:absolute;inset:0;perspective:calc(var(--cw) * 9);pointer-events:none}
.st-stk{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);transform-style:preserve-3d;transform:translate(var(--sx),var(--sy)) scale(1) rotateX(58deg) rotateZ(-38deg);animation-name:st-stk}
.st-pl{position:absolute;inset:0;border-radius:var(--r);transform:translateZ(var(--z))}
.st-p0{--z:calc(var(--d) * -1.5)}.st-p1{--z:calc(var(--d) * -.5)}.st-p2{--z:calc(var(--d) * .5)}.st-p3{--z:calc(var(--d) * 1.5)}
.st-stk>.st-p0{animation-name:st-z0}.st-stk>.st-p1{animation-name:st-z1}.st-stk>.st-p2{animation-name:st-z2}.st-stk>.st-p3{animation-name:st-z3}
.st-ghost{visibility:hidden}
.st-ghost,.st-ghost *{animation:none!important}
/* the point of a layer's edge that stands out furthest to the right, seen from the side: on its rounded corner */
.st-pin{position:absolute;right:calc(var(--r) * .212);bottom:calc(var(--r) * .384);width:0;height:0}
.st-glass{position:absolute;inset:0;border-radius:inherit;background:rgb(154 139 255 / .07);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .24);animation-name:st-glass}
.st-p0 .st-glass{background:none}
.st-img{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;background:#0d0b14}
.st-pic{position:absolute;inset:-4%;z-index:-1;animation-name:st-zoom;
 background:url('./assets/dither.png') 0 0/64px,
  radial-gradient(58% 34% at 30% 28%,rgb(154 139 255 / .85),rgb(154 139 255 / .3) 45%,transparent 72%),
  radial-gradient(52% 34% at 74% 56%,rgb(224 71 159 / .8),rgb(224 71 159 / .26) 46%,transparent 72%),
  radial-gradient(70% 30% at 38% 88%,rgb(255 122 89 / .7),rgb(255 122 89 / .2) 48%,transparent 74%),#15111f}
.st-cover{position:absolute;inset:0;background:url('./assets/dither.png') 0 0/64px,#0d0b14;transform:translate3d(0,101%,0);animation-name:st-cover}
.st-cover::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#fff 30%,#fff 70%,transparent);box-shadow:0 0 16px 2px rgb(186 195 255 / .7)}
.st-wave{position:absolute;left:20%;right:20%;bottom:27%;height:calc(var(--cw) * .16);display:flex;align-items:center;justify-content:space-between;animation-name:st-wave}
.st-wave i{width:max(2px,calc(var(--cw) * .02));height:100%;border-radius:3px;background:#fff;transform:scaleY(var(--h));animation:st-bar .8s ease-in-out infinite alternate paused}
.st-wave i:nth-child(3n){animation-delay:-.3s}.st-wave i:nth-child(3n+1){animation-delay:-.55s}
.st.is-run .st-wave i{animation-play-state:running}
.st-note{position:absolute;right:7%;top:9%;display:grid;place-items:center;width:calc(var(--cw) * .19);height:calc(var(--cw) * .19);border-radius:50%;background:rgb(0 0 0 / .45);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22);color:#fff;animation-name:st-note}
.st-note svg{width:52%;height:52%;stroke-width:1.4}
.st-cap{position:absolute;left:14%;right:14%;bottom:10%;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--cw) * .028)}
.st-cap i{height:calc(var(--cw) * .043);border-radius:9px;background:#fff}
.st-cap i:nth-child(1){width:34%;animation-name:st-c0}.st-cap i:nth-child(2){width:24%;animation-name:st-c1}.st-cap i:nth-child(3){width:46%;animation-name:st-c2}
.st-play{position:absolute;left:6%;right:6%;top:4%;height:2px;border-radius:2px;overflow:hidden;background:rgb(255 255 255 / .25);opacity:0;animation-name:st-fr}
.st-play i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;animation-name:st-pb}
.st-rim{position:absolute;inset:calc(var(--cw) * -.04);border-radius:calc(var(--r) + var(--cw) * .04);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .3),0 30px 70px rgb(0 0 0 / .5);opacity:0;animation-name:st-fr}
/* the names: level with the edge of their layer (--x, --y), all in one column (--l, the line up to it) */
.st-lab{position:absolute;left:var(--x,0);top:var(--y,0);display:flex;align-items:center;transform:translateY(-50%);visibility:hidden;white-space:nowrap}
.st.is-placed .st-lab{visibility:visible}
.st-dot{position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#f1f7fa;box-shadow:0 0 0 3px rgb(241 247 250 / .14)}
.st-line{width:var(--l,40px);height:1px;background:linear-gradient(90deg,rgb(241 247 250 / .7),rgb(241 247 250 / .26));transform-origin:0 50%}
.st-tag{display:flex;align-items:center;gap:.6em;padding:.58em 1em .58em .8em;border-radius:999px;background:#13111c;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .15);color:#f1f7fa;line-height:1.2}
.st-tag svg{flex:none;width:1.1em;height:1.1em;color:#bac3ff}
.st-tag b{font-weight:500}
.st-l0 .st-dot{animation-name:st-d0}.st-l0 .st-line{animation-name:st-n0}.st-l0 .st-tag{animation-name:st-t0}
.st-l1 .st-dot{animation-name:st-d1}.st-l1 .st-line{animation-name:st-n1}.st-l1 .st-tag{animation-name:st-t1}
.st-l2 .st-dot{animation-name:st-d2}.st-l2 .st-line{animation-name:st-n2}.st-l2 .st-tag{animation-name:st-t2}
.st-l3 .st-dot{animation-name:st-d3}.st-l3 .st-line{animation-name:st-n3}.st-l3 .st-tag{animation-name:st-t3}
@keyframes st-stk{0%,52%{transform:translate(var(--sx),var(--sy)) scale(1) rotateX(58deg) rotateZ(-38deg);animation-timing-function:cubic-bezier(.62,0,.22,1)}64%,95%{transform:translate(0px,0px) scale(var(--ms)) rotateX(0deg) rotateZ(0deg)}97%,100%{transform:translate(var(--sx),var(--sy)) scale(1) rotateX(58deg) rotateZ(-38deg)}}
@keyframes st-z0{0%,3%{opacity:0;transform:translateZ(calc(var(--z) + var(--d) * .7));animation-timing-function:cubic-bezier(.2,.75,.25,1)}5%{opacity:1}9%,52%{opacity:1;transform:translateZ(var(--z));animation-timing-function:cubic-bezier(.62,0,.22,1)}64%,90%{opacity:1;transform:translateZ(0.0px)}95%,100%{opacity:0;transform:translateZ(0.0px)}}
@keyframes st-d0{0%,6%{opacity:0;transform:scale(.2)}7.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-n0{0%,6.5%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}10%,100%{transform:none}48%{opacity:1}51%,100%{opacity:0}}
@keyframes st-t0{0%,8%{opacity:0;transform:translate3d(-8px,0,0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}11.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-z1{0%,11%{opacity:0;transform:translateZ(calc(var(--z) + var(--d) * .7));animation-timing-function:cubic-bezier(.2,.75,.25,1)}13%{opacity:1}17%,52%{opacity:1;transform:translateZ(var(--z));animation-timing-function:cubic-bezier(.62,0,.22,1)}64%,90%{opacity:1;transform:translateZ(0.6px)}95%,100%{opacity:0;transform:translateZ(0.6px)}}
@keyframes st-d1{0%,14%{opacity:0;transform:scale(.2)}15.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-n1{0%,14.5%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}18%,100%{transform:none}48%{opacity:1}51%,100%{opacity:0}}
@keyframes st-t1{0%,16%{opacity:0;transform:translate3d(-8px,0,0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}19.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-z2{0%,19%{opacity:0;transform:translateZ(calc(var(--z) + var(--d) * .7));animation-timing-function:cubic-bezier(.2,.75,.25,1)}21%{opacity:1}25%,52%{opacity:1;transform:translateZ(var(--z));animation-timing-function:cubic-bezier(.62,0,.22,1)}64%,90%{opacity:1;transform:translateZ(1.2px)}95%,100%{opacity:0;transform:translateZ(1.2px)}}
@keyframes st-d2{0%,22%{opacity:0;transform:scale(.2)}23.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-n2{0%,22.5%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}26%,100%{transform:none}48%{opacity:1}51%,100%{opacity:0}}
@keyframes st-t2{0%,24%{opacity:0;transform:translate3d(-8px,0,0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}27.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-z3{0%,27%{opacity:0;transform:translateZ(calc(var(--z) + var(--d) * .7));animation-timing-function:cubic-bezier(.2,.75,.25,1)}29%{opacity:1}33%,52%{opacity:1;transform:translateZ(var(--z));animation-timing-function:cubic-bezier(.62,0,.22,1)}64%,90%{opacity:1;transform:translateZ(1.8px)}95%,100%{opacity:0;transform:translateZ(1.8px)}}
@keyframes st-d3{0%,30%{opacity:0;transform:scale(.2)}31.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-n3{0%,30.5%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}34%,100%{transform:none}48%{opacity:1}51%,100%{opacity:0}}
@keyframes st-t3{0%,32%{opacity:0;transform:translate3d(-8px,0,0);animation-timing-function:cubic-bezier(.2,.75,.25,1)}35.5%,48%{opacity:1;transform:none}51%,100%{opacity:0;transform:none}}
@keyframes st-glass{0%,55%{opacity:1}63%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes st-cover{0%,6%{transform:none;animation-timing-function:cubic-bezier(.5,0,.35,1)}14%,94%{transform:translate3d(0,101%,0)}96%,100%{transform:none}}
@keyframes st-wave{0%,14%{opacity:0;transform:translate3d(0,8px,0)}17%,100%{opacity:1;transform:none}}
@keyframes st-bar{to{transform:scaleY(calc(var(--h) * .3 + .08))}}
@keyframes st-note{0%,22%{opacity:0;transform:scale(.5)}25%,100%{opacity:1;transform:none}}
@keyframes st-c0{0%,30.0%{opacity:0;transform:translate3d(0,6px,0)}32.5%,100%{opacity:1;transform:none}}
@keyframes st-c1{0%,31.5%{opacity:0;transform:translate3d(0,6px,0)}34.0%,100%{opacity:1;transform:none}}
@keyframes st-c2{0%,33.0%{opacity:0;transform:translate3d(0,6px,0)}35.5%,100%{opacity:1;transform:none}}
@keyframes st-fr{0%,62%{opacity:0}67%,100%{opacity:1}}
@keyframes st-pb{0%,67%{transform:scaleX(0)}91%,100%{transform:none}}
@keyframes st-zoom{0%,64%{transform:none}92%,100%{transform:scale(1.07)}}
/* without the script: the finished reel, still */
html:not(.labs-js) .st *{animation:none}
html:not(.labs-js) .st-stk{transform:translate(0px,0px) scale(var(--ms)) rotateX(0deg) rotateZ(0deg)}
html:not(.labs-js) .st-p1,html:not(.labs-js) .st-p2,html:not(.labs-js) .st-p3{transform:none}
html:not(.labs-js) .st-glass{opacity:0}
html:not(.labs-js) .st-play,html:not(.labs-js) .st-rim{opacity:1}
html:not(.labs-js) .st-play i{transform:scaleX(.6)}
/* The footer is aisberglabs' own: in the corner who it is by (AISBERG, its logo, back to the home) and the way to
   the profile; at the bottom the big name, standing on its reflection like AISBERG's on the other pages */
.labs .end-footer{padding-top:0}  /* the questions keep the one gap above its line */
.labs-foot-by{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.labs-powered{display:inline-flex;align-items:center;gap:12px;color:rgb(241 247 250 / .56);text-decoration:none;font-size:13px;line-height:1;letter-spacing:.04em;white-space:nowrap;transition:color .25s}
.labs-powered:hover{color:#f1f7fa}
.labs-powered:focus-visible{outline:2px solid #f1f7fa;outline-offset:5px;border-radius:4px}
.labs-powered .lb-logo{display:block;flex:none;height:24px;width:auto;overflow:visible;color:#f1f7fa}
/* the big name, and under it on the right, written on its reflection, who it is by: "powered by" and AISBERG's logo */
.labs-endstage{--lb-fs:clamp(56px,17.8vw,300px);position:relative;width:max-content;max-width:100%;margin:clamp(55px,7vw,112px) 0 clamp(30px,4vw,65px)}
.labs-endstage .labs-endmark{margin:0}
.labs-endstage .labs-powered{position:absolute;right:calc(var(--lb-fs) * .03);top:calc(var(--lb-fs) * 1.1 - 12px)}
.labs-endmark{font-size:var(--lb-fs,clamp(56px,17.8vw,300px));line-height:1;letter-spacing:-.045em;font-weight:500;color:#f1f7fa;white-space:nowrap}
.labs-endmark .end-wordmark-mask{padding:.06em .03em .2em;margin:-.06em -.03em -.2em}
.labs-endmark .end-wordmark-text{display:block}
/* the mirror line is the letters' baseline, .856em down the 1em line: the mirror's top margin collapses with the
   mask's -.2em, so it carries the whole lift; the flipped name is raised so its own baseline sits on the line */
.labs-endmark .end-wordmark-mirror{height:.5em;margin-top:-.344em}
.labs-endmark .end-wordmark-mirror-text{display:block;transform:scaleY(-1);margin-top:-.144em}
.labs-endmark:focus-visible{outline:2px solid #f1f7fa;outline-offset:8px;border-radius:8px}
/* what comes after the opening rises into place the first time it is seen */
.labs-js .labs-rv{opacity:0;transform:translate3d(0,44px,0);transition:opacity 1s cubic-bezier(.33,0,.2,1),transform 1.25s cubic-bezier(.22,1,.36,1)}
.labs-js .labs-rv.is-in{opacity:1;transform:none}
.labs-studio-view.labs-rv{transition-delay:.08s}

/* Without the script (or if it never arrives): the finished picture, still, with the ring under it. */
.labs-static{display:none}
.labs-fallback .labs-static,html:not(.labs-js) .labs-static{display:block;position:absolute;left:0;right:0;top:38vh;top:38svh;margin:0;transform:translateY(-62%);text-align:center;
 font:500 clamp(54px,12vw,120px)/1 "Aisberg Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:-.012em;color:#f1f7fa}
.labs-static span{background:linear-gradient(90deg,#9a8bff,#e0479f 58%,#ff7a59);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.labs-fallback .lb-btn-hero,html:not(.labs-js) .lb-btn-hero{opacity:1;visibility:visible;top:calc(38vh + 110px);top:calc(38svh + 110px)}
.labs-fallback .lb-cue,html:not(.labs-js) .lb-cue{opacity:1;visibility:visible;top:calc(100vh - 92px);top:calc(100svh - 92px)}
.labs-fallback .labs-rv{opacity:1!important;transform:none!important}
.labs-fallback #lb-stage,.labs-fallback #lb-gl,.labs-fallback .lb-scene{display:none}

@media(max-width:700px){
 .lb-cue{gap:10px;font-size:10px}
 .lb-cue i{height:30px}
 .labs{--lb-gap:130px}
 .labs-desc.is-arm .labs-desc-run{height:130vh;height:130svh}
 /* on phones it stops in the middle of what is under the bar */
 .labs-desc.is-arm .labs-desc-pin{top:max(var(--lb-hb,0px),calc((100vh + var(--lb-hb,0px) - var(--lb-ph,0px)) / 2));top:max(var(--lb-hb,0px),calc((100svh + var(--lb-hb,0px) - var(--lb-ph,0px)) / 2))}
 .labs-desc-txt{font-size:clamp(23px,6.6vw,28px);line-height:1.24;letter-spacing:-.02em}
 .labs-desc .lbw{font-size:1.28em}
 .labs-desc-txt.has-l1{max-width:24em;font-size:clamp(23px,6.6vw,28px)}
 .labs-desc .lb-l1{white-space:normal}
 .labs-desc .lb-l1::after{content:none}
 .labs-desc-line{display:none}
 .labs-h2{font-size:clamp(36px,10.4vw,44px)}
 .labs-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
 .labs-reels-all{font-size:16px}
 .labs-reels-stage{--rw:44vw;--side:62%}
 .labs-faq .outro-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
 .labs-foot-by{gap:22px;margin-bottom:12px}
 .labs .end-footer-top{border-top:0;padding-top:0}  /* on phones no line between the questions and the footer */
 .labs-endstage{margin:48px 0 44px}
 /* on phones the name is small: "powered by" goes over the logo, both small, so the credit stays under "labs" on
    the reflection, clear of the g */
 .labs-endstage .labs-powered{top:calc(var(--lb-fs) * .98);flex-direction:column;align-items:flex-end;gap:4px;font-size:9.5px;letter-spacing:.06em}
 .labs-powered .lb-logo{height:14px}
 .labs-studio-txt{text-align:left;font-size:15px}
 /* on phones the stack is smaller, so its names fit beside it; closed up, the reel grows to fill the width */
 .st{--cw:clamp(96px,calc((100vw - 32px - 128px) / 1.96),150px);--ms:1.56;--lg:22px;height:calc(var(--cw) * 2.98);font-size:12px}
 .st-tag{gap:.5em;padding:.55em .85em .55em .7em}
}
@media(prefers-reduced-motion:reduce){
 .lb-cue i::after,.labs-desc .lbw span,.labs-desc .k .w,.labs-reel-v::before,.labs-endmark span{animation:none}
 .labs-reel{transition:none}
 .st *,.st-wave i{animation:none!important}
 .labs-faq summary::after{transition:none}
 .lb-cue>span,.lb-cue>i{transition:none}
 .labs-js .labs-rv{opacity:1;transform:none;transition:none}
}