html.intro-pending{overflow:hidden}
.intro-pending body>header,.intro-pending .workspace{visibility:hidden}
.lab-intro{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;border:0;padding:clamp(24px,5vw,80px);background:var(--canvas);color:var(--ink);overflow:auto}
.lab-intro::backdrop{background:var(--canvas)}
.lab-intro[open]{display:flex;flex-direction:column;justify-content:center;align-items:center}

.intro-content{width:min(1100px,100%);margin-block:auto;padding-block:30px}

.intro-heading{position:relative;font-size:clamp(32px,5.8vw,80px);font-weight:500;line-height:1.12;letter-spacing:-.045em;margin:0;text-wrap:wrap}
.intro-reserve{visibility:hidden}
.intro-typed{position:absolute;inset:0;white-space:pre-wrap}
.intro-typed::after{content:'';display:inline-block;width:.045em;height:.85em;margin-left:.08em;background:currentColor;vertical-align:-.03em;animation:intro-caret .75s step-end infinite}
.typing-complete .intro-typed::after{display:none}
.intro-footer{min-height:48px;margin-top:32px}
.intro-heading:focus{outline:none}
.intro-enter[hidden]{display:none!important}
.lab-intro .intro-enter{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;min-width:160px;height:52px;padding:12px 24px;font-size:14px;white-space:nowrap;isolation:isolate}
.intro-enter:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.intro-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes intro-caret{50%{opacity:0}}
@media(max-width:560px){.intro-content{padding-block:12px}.intro-heading{font-size:clamp(30px,8.5vw,46px)}}
@media(prefers-reduced-motion:reduce){.intro-typed::after{animation:none}}

.intro-beam-text,.intro-beam-reserve{display:inline-block;white-space:nowrap;vertical-align:baseline}
.intro-beam-text{color:var(--ink);background-image:linear-gradient(105deg,#397fd4 0%,#9954d6 20%,#d45196 40%,#c18a30 60%,#299d83 80%,#397fd4 100%);background-size:300% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:intro-text-beam 4s linear infinite}
@keyframes intro-text-beam{to{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.intro-beam-text{animation:none;background-position:50% 50%}}
@media(forced-colors:active){.intro-beam-text{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}}
