.developer-intro{--intro-cream:var(--cinema-paper,#eee9df);--intro-mint:var(--cinema-mint,#b8e5cc);--intro-violet:var(--cinema-violet,#b7a0f2);--intro-dark:var(--cinema-bg,#141517);--intro-duration:1.15s;color:var(--intro-cream)}.developer-intro.intro-session{z-index:3;pointer-events:none;width:min(27vw,300px);position:absolute;top:90px;right:4vw}.intro-graphic{position:relative}.intro-graphic svg{width:100%;height:auto;display:block}.intro-session .intro-graphic{opacity:0}.intro-registration{opacity:.3;stroke-width:.7px}.intro-monogram{color:var(--intro-cream)}.intro-links{color:var(--intro-mint);opacity:.6}.intro-nodes{color:var(--intro-violet);opacity:.6}.intro-nodes rect{stroke:currentColor;stroke-width:.8px}.intro-nodes text,.intro-kicker{fill:currentColor;font:7px var(--font-geist-mono), monospace;letter-spacing:.1em}.intro-kicker{opacity:.65}.intro-name{fill:currentColor;font:13px var(--font-geist), sans-serif;letter-spacing:.09em}.developer-intro[data-intro-status=playing] .intro-graphic{animation:intro-clock var(--intro-duration) linear both}.intro-session[data-intro-status=playing] .intro-graphic svg{animation:intro-leave var(--intro-duration) ease both}.developer-intro[data-intro-status=playing] .intro-monogram path{stroke-dasharray:1;animation:.36s cubic-bezier(.2,.65,.25,1) both intro-draw}.developer-intro[data-intro-status=playing] .intro-monogram path:nth-child(2){animation-delay:60ms}.developer-intro[data-intro-status=playing] .intro-monogram path:nth-child(3){animation-delay:.1s}.developer-intro[data-intro-status=playing] .intro-links path{stroke-dasharray:1;animation:.35s .2s both intro-draw}.developer-intro[data-intro-status=playing] .intro-nodes{animation:.4s .18s both intro-assemble}.developer-intro[data-intro-status=playing] .intro-name{animation:.35s .41s both intro-name}.intro-skip{min-height:44px;color:var(--intro-cream);background:var(--intro-dark);border:1px solid var(--canvas-line,#454641);pointer-events:auto;align-items:center;gap:20px;padding:0 14px;font-size:11px;display:flex;position:absolute;top:-65px;right:0}.canvas-study[data-intro=playing]:not([data-intro-variant=advanced]) .canvas-name{animation:.7s cubic-bezier(.2,.7,.2,1) .35s backwards intro-hero-name}.canvas-study[data-intro=playing] .canvas-identity>span:last-child{opacity:0}.canvas-study[data-intro=playing]:not([data-intro-variant=advanced]) .canvas-portrait-frame{animation:.85s cubic-bezier(.2,.7,.2,1) .1s backwards intro-hero-media}.intro-lab{background:var(--cinema-bg);color:var(--cinema-paper);min-height:80svh;padding:50px 5vw 70px}.intro-lab-header{grid-template-columns:1.2fr 1fr;align-items:end;gap:60px;max-width:1200px;margin:auto;display:grid}.intro-lab-header h1{letter-spacing:-.065em;margin-top:18px;font-size:clamp(48px,6vw,90px);line-height:.98}.intro-lab-header p{max-width:450px;color:var(--cinema-muted);font-size:14px;line-height:1.8}.intro-lab a{color:var(--cinema-mint);text-underline-offset:5px;text-decoration:underline}.intro-preview{max-width:1200px;margin:40px auto 0}.intro-preview .intro-graphic{border-block:1px solid var(--cinema-line);background:radial-gradient(at 50% 35%,#b7a0f20b,#0000 60%);width:100%;min-height:300px;padding:32px max(30px,17%)}.intro-controls{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;display:flex}.intro-controls button{border:1px solid var(--cinema-line);background:0 0;min-height:44px;padding:10px 18px;font-size:12px}.intro-controls button:first-child{color:var(--cinema-bg);background:var(--cinema-paper);border-color:var(--cinema-paper)}.intro-controls label{align-items:center;gap:8px;min-height:44px;margin-left:auto;font-size:12px;display:flex}.intro-controls input{accent-color:var(--cinema-violet)}.intro-preview-status{min-height:44px;color:var(--cinema-muted);padding-top:18px;font-size:12px}.intro-lab-note{flex-wrap:wrap;justify-content:space-between;gap:20px;max-width:1200px;margin:25px auto 0;font-size:12px;display:flex}@keyframes intro-clock{0%,to{opacity:1}}@keyframes intro-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes intro-assemble{0%{opacity:0;transform:translateY(8px)}to{opacity:.6;transform:translateY(0)}}@keyframes intro-name{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes intro-leave{0%,75%{opacity:1}to{opacity:0;transform:translateY(-8px)}}@keyframes intro-hero-name{0%{transform:translateY(8px)}to{transform:translateY(0)}}@keyframes intro-hero-media{0%{transform:translateY(8px)}to{transform:translateY(0)}}@media (max-width:999px){.developer-intro.intro-session{width:25vw;top:75px}.intro-skip{top:-55px}}@media (max-width:650px){.developer-intro{--intro-duration:.8s}.developer-intro.intro-session{width:84px;top:44px;right:5vw}.intro-session .intro-kicker,.intro-session .intro-nodes,.intro-session .intro-links,.intro-session .intro-name{display:none}.intro-skip{gap:8px;padding:0 10px;font-size:10px;top:-44px}.canvas-study[data-intro=playing]:not([data-intro-variant=advanced]) .canvas-name{animation-duration:.45s;animation-delay:.15s}.canvas-study[data-intro=playing]:not([data-intro-variant=advanced]) .canvas-portrait-frame{animation:none}.intro-lab{padding-top:30px}.intro-lab-header{grid-template-columns:1fr;gap:24px}.intro-preview .intro-graphic{min-height:230px;padding:45px 12px}.intro-controls{gap:6px}.intro-controls button{padding-inline:12px}.intro-controls label{width:100%;margin-left:0}.intro-preview-status{font-size:11px}}@media (prefers-reduced-motion:reduce){.developer-intro *,.canvas-study[data-intro=playing]:not([data-intro-variant=advanced]) .canvas-name,.canvas-study[data-intro=playing]:not([data-intro-variant=advanced]) .canvas-portrait-frame{animation:none!important}}.developer-intro[data-intro-reduced=true] *{animation:none!important}