.lab{background:radial-gradient(70rem 36rem at 50% -14rem, oklch(from var(--pui-accent) l c h / .12), transparent 70%), var(--pui-page);height:100dvh}.lab-wrap{width:min(1200px,100% - 48px);margin-inline:auto}.lab-wrap-wide{width:min(1360px,100% - 48px);margin-inline:auto}.lab-bar{z-index:20;border-bottom:1px solid oklch(from var(--pui-line) l c h / .6);background:oklch(from var(--pui-page) l c h / .72);-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);position:sticky;top:0}.lab-bar nav a:hover{color:var(--pui-ink)}.lab-mark{width:22px;height:22px}.lab-search{border-radius:var(--pui-radius-control);width:240px;height:32px;color:var(--pui-ink-3);font-size:var(--pui-text-sm);align-items:center;gap:8px;padding-inline:10px 6px;display:flex}.lab-search span{text-align:start;flex:1}.lab-eyebrow{color:var(--pui-ink-3);font-size:var(--pui-text-sm);letter-spacing:.01em}.lab-display{font-family:var(--pui-font-display);letter-spacing:-.045em;text-wrap:balance;font-size:clamp(2.75rem,5.6vw,5.25rem);font-weight:600;line-height:.98}.lab-display-sm{font-size:clamp(2.5rem,4.4vw,4rem)}.lab-bar .lab-search{box-shadow:inset 0 0 0 1px var(--pui-line-soft);background:oklch(from var(--pui-ink) l c h / .03)}.lab-catalogue{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.lab-specimen{border-radius:var(--pui-radius-panel);background:var(--pui-canvas);min-height:260px;box-shadow:inset 0 0 0 1px var(--pui-line-soft);grid-template-rows:1fr auto;margin:0;display:grid;overflow:hidden}.lab-specimen-stage{place-items:center;padding:32px 24px 8px;display:grid}.lab-specimen figcaption{color:var(--pui-ink-3);font-size:var(--pui-text-sm);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.lab-specimen:hover figcaption{color:var(--pui-ink)}.lab-window{border-radius:calc(var(--pui-radius-window) + 10px);background:var(--pui-bezel-shell);box-shadow:var(--pui-bezel-shell-edge), 0 40px 120px -40px oklch(from var(--pui-accent) l c h / .35);padding:10px;position:relative}.lab-window:before{content:"";background:linear-gradient(90deg, transparent, oklch(from var(--pui-accent) .85 c h / .9), transparent);height:1px;position:absolute;inset:-1px 15% auto}.lab-window-inner{border-radius:var(--pui-radius-window);background:var(--pui-page);height:760px;box-shadow:var(--pui-bezel-inner-edge);overflow:hidden;mask-image:linear-gradient(#000 82%,#0000)}.lab-transcript{border-radius:var(--pui-radius-card);font-size:var(--pui-text-sm);padding:18px 20px}.lab-prompt{border-bottom:1px solid var(--pui-line-soft);gap:10px;padding-bottom:12px;display:flex}.lab-transcript ol{gap:8px;padding:12px 0 0;display:grid}.lab-transcript li{animation:lab-in var(--pui-duration-standard) var(--pui-ease-out-strong) both;grid-template-columns:92px 16px 140px 1fr;align-items:baseline;display:grid}.lab-transcript b{color:var(--pui-accent-ink);font-weight:500}.lab-arrow{color:var(--pui-ink-3)}@keyframes lab-in{0%{opacity:0;translate:0 4px}}.lab-form-wrap{padding-inline-end:132px}.lab-form{border-radius:var(--pui-radius-panel);gap:22px;padding:28px;display:grid}.lab-callout{position:relative}.lab-callout:before{content:"";inset-inline-start:calc(100% + 10px);border-top:1px dashed oklch(from var(--pui-accent) l c h / .6);width:34px;position:absolute;top:50%}.lab-callout:after{content:attr(data-callout);inset-inline-start:calc(100% + 50px);border-radius:var(--pui-radius-chip);background:var(--pui-accent-tint);color:var(--pui-accent-ink);font-family:var(--pui-font-code);white-space:nowrap;padding:3px 8px;font-size:11px;position:absolute;top:50%;translate:0 -50%}@media (prefers-reduced-motion:reduce){.lab-transcript li{animation:none}}.hero-page{position:relative}.hero-page:before{content:"";pointer-events:none;background-image:linear-gradient(to right, oklch(from var(--pui-ink) l c h / .045) 1px, transparent 1px), linear-gradient(to bottom, oklch(from var(--pui-ink) l c h / .045) 1px, transparent 1px);background-size:56px 56px;height:980px;position:absolute;inset:0 0 auto;mask-image:radial-gradient(60rem 34rem at 72% 30%,#000,#0000 72%)}.hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:56px;min-height:calc(100dvh - 64px);padding-block:40px 72px;display:grid;position:relative}.hero-chip{background:oklch(from var(--pui-ink) l c h / .04);box-shadow:inset 0 0 0 1px var(--pui-line-soft);color:var(--pui-ink-2);font-size:var(--pui-text-sm);border-radius:999px;align-items:center;gap:10px;padding:6px 12px 6px 10px;display:inline-flex}.hero-chip-dot{background:var(--pui-accent);width:6px;height:6px;box-shadow:0 0 10px 1px var(--pui-accent);border-radius:50%}.hero-title{font-family:var(--pui-font-display);letter-spacing:-.045em;text-wrap:balance;background:linear-gradient(180deg, var(--pui-ink) 30%, oklch(from var(--pui-ink) calc(l - .18) c h));color:#0000;background-clip:text;margin-top:28px;font-size:clamp(3rem,4.9vw,4.6rem);font-weight:600;line-height:1}.hero-title span{background:linear-gradient(100deg, var(--pui-accent-ink), oklch(from var(--pui-accent) .9 .08 h));background-clip:text}.hero-lead{max-width:50ch;color:var(--pui-ink-2);font-size:var(--pui-text-lg);margin-top:26px;line-height:1.55}.hx-stage{justify-items:start;gap:18px;padding-inline-end:176px;display:grid;position:relative}.hx-stage:before{content:"";pointer-events:none;background:radial-gradient(closest-side, oklch(from var(--pui-accent) l c h / .22), transparent);filter:blur(20px);height:320px;position:absolute;inset:-80px 120px auto -40px}.hx-switch{position:relative}.hx-card{border-radius:var(--pui-radius-panel);width:100%;box-shadow:var(--pui-shadow-overlay), 0 50px 120px -50px oklch(from var(--pui-accent) l c h / .4);gap:18px;padding:28px 28px 24px 36px;display:grid;position:relative}.hx-head{justify-content:space-between;align-items:baseline;display:flex}.hx-actions{justify-content:flex-end;gap:8px;padding-top:4px;display:flex}.hx-rail{background:linear-gradient(to bottom, transparent, var(--pui-line), transparent);width:1px;position:absolute;inset:22px auto 22px 14px}.hx-beam{opacity:0;background:linear-gradient(to bottom, transparent, oklch(from var(--pui-accent) .8 .12 h / .6) 70%, oklch(98% .02 260));width:3px;height:120px;box-shadow:0 0 18px 3px oklch(from var(--pui-accent) l c h / .55);border-radius:3px;position:absolute;top:0;left:-1px}.hx-row{transition:height .42s cubic-bezier(.22,1,.36,1);display:grid;position:relative}.hx-layer{grid-area:1/1;align-self:start;transition:opacity .26s,filter .36s,clip-path .52s cubic-bezier(.22,1,.36,1),translate .52s cubic-bezier(.22,1,.36,1)}.hx-layer[data-layer=plain]{opacity:1}.hx-row[data-swapped=true] .hx-layer[data-layer=plain]{transition:opacity .36s .18s,filter .36s .18s}.hx-row[data-swapped=true] .hx-layer[data-layer=element]{transition:opacity .18s,clip-path .52s cubic-bezier(.22,1,.36,1),translate .52s cubic-bezier(.22,1,.36,1)}.hx-layer[data-layer=element]{opacity:0;clip-path:inset(0 100% 0 0);translate:0 4px}.hx-row[data-swapped=true] .hx-layer[data-layer=plain]{opacity:0;filter:blur(6px)}.hx-row[data-swapped=true] .hx-layer[data-layer=element]{opacity:1;clip-path:inset(-8px);animation:.9s cubic-bezier(.22,1,.36,1) hx-land;translate:0}@keyframes hx-land{0%{filter:drop-shadow(0 0 #0000)brightness(1.5)}35%{filter:drop-shadow(0 0 14px oklch(from var(--pui-accent) l c h / .45)) brightness(1.15)}to{filter:drop-shadow(0 0 #0000)brightness()}}.hx-callout{inset-inline-start:calc(100% + 50px);white-space:nowrap;gap:2px;width:150px;display:grid;position:absolute;top:calc(50% + 10px);translate:0 -9px}.hx-callout:before{content:"";inset-inline-end:calc(100% + 6px);border-top:1px dashed var(--pui-line-strong);width:38px;transition:border-color .3s;position:absolute;top:9px}.hx-callout-name{border-radius:var(--pui-radius-chip);background:oklch(from var(--pui-ink) l c h / .05);color:var(--pui-ink-3);font-family:var(--pui-font-code);text-decoration:line-through;-webkit-text-decoration-color:oklch(from var(--pui-red) l c h / .7);text-decoration-color:oklch(from var(--pui-red) l c h / .7);justify-self:start;padding:2px 8px;font-size:11px;transition:background .3s,color .3s}.hx-callout[data-same=true] .hx-callout-name,.hx-row[data-swapped=true] .hx-callout-name{text-decoration:none}.hx-row[data-swapped=true] .hx-callout-name{background:var(--pui-accent-tint);color:var(--pui-accent-ink);animation:.38s cubic-bezier(.34,1.4,.64,1) hx-pop}.hx-row[data-swapped=true] .hx-callout:before{border-top-color:oklch(from var(--pui-accent) l c h / .7)}.hx-callout-why{color:var(--pui-ink-3);font-size:11px;animation:.42s .12s both hx-in}@keyframes hx-pop{0%{opacity:0;scale:.8}}@keyframes hx-in{0%{opacity:0;translate:-4px}}.looks-section{padding-block:64px 140px}.looks-switch{scrollbar-width:none;justify-content:safe center;margin-bottom:20px;display:flex;overflow-x:auto}@media (width<=720px){.looks-switch{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),#0000)}.looks-switch:after{content:"";flex:0 0 40px}}.looks-head{text-align:center;justify-items:center;margin-bottom:36px;display:grid}.looks-head .hero-lead{margin-top:16px}.looks-title{font-family:var(--pui-font-display);letter-spacing:-.04em;font-size:clamp(2.25rem,3.4vw,3.25rem);font-weight:600;line-height:1.05}@media (prefers-reduced-motion:reduce){.hx-row,.hx-layer{transition:none}.hx-layer,.hx-callout-name,.hx-callout-why{animation:none!important}}@media (width<=1100px){.hero-grid{grid-template-columns:1fr}}