@font-face{font-family:Syne;src:url('/design-lab/fonts/Syne.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/design-lab/fonts/InstrumentSerif.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--lab-blue:#4f7bff;--lab-yellow:#ffc400;--lab-ink:#0b1220;--lab-paper:#f5f2e9;--lab-serif:'Instrument Serif',Georgia,serif;--lab-sans:Syne,'Trebuchet MS',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#0b0f19;color:#f5f2e9;font-family:var(--lab-sans);line-height:1.5}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}img,svg{display:block;max-width:100%}h1,h2,h3,p{margin:0}button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:3px solid #8fb0ff;outline-offset:6px}em{font:inherit;font-family:var(--lab-serif);font-style:normal;font-weight:400}button:disabled{cursor:default}[hidden]{display:none!important}
.study-toolbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 3vw;background:#101521;border-bottom:1px solid #293044;font-size:15px}.study-home{display:flex;align-items:center;gap:12px;white-space:nowrap}.study-toolbar nav{display:flex;gap:5px}.study-toolbar nav a,.compare-button{border-radius:30px;padding:10px 18px;transition:background .2s}.study-toolbar nav a:hover,.compare-button:hover{background:#263145}.study-toolbar nav a[aria-current=true]{background:var(--lab-yellow);color:var(--lab-ink)}.compare-button{background:transparent;border:1px solid #414b61;white-space:nowrap}
.study-main{padding:24px 3vw 60px;max-width:1800px;margin:auto}.study-caption{display:flex;align-items:center;gap:24px;margin:0 0 18px;color:#b7c1d5;font-size:15px}.study-caption h2{color:#fff;font-size:17px;white-space:nowrap}.study-caption>span{margin-left:auto;border:1px solid #394257;padding:5px 12px;border-radius:30px;white-space:nowrap}.concept{margin-bottom:48px}.mockup{position:relative;overflow:hidden;border-radius:20px;isolation:isolate}.mock-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 5%;position:relative;z-index:4;font-size:15px}.mock-nav img{width:165px;height:auto}.mock-nav>a{padding:12px 18px;border:1px solid currentColor;border-radius:30px;white-space:nowrap}.mock-nav>span{opacity:.6}.lab-label{font-size:15px;letter-spacing:.04em}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4f7bff;margin-right:8px}.pill{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;padding:17px 24px;border-radius:40px;font-size:15px;font-weight:600;width:fit-content;min-height:52px;transition:transform .2s,background .2s}.pill:hover{transform:translateY(-3px)}.yellow{background:var(--lab-yellow);color:var(--lab-ink)}.ink{background:var(--lab-ink);color:var(--lab-paper)}.hero-body{font-family:var(--lab-sans);font-size:16px;line-height:1.7;max-width:38ch;opacity:.7}.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 5% 32px;font-size:15px;color:#aab6cd}.scroll-cue{color:#fff}.text-link{font-size:15px;border-bottom:1px solid currentColor;padding:10px 0;display:inline-block;background:transparent;width:fit-content}
/* The optical graphic is a single light source, a lens, and its refracted beam. */
.optical-object{position:relative;width:100%;perspective:1000px}.optical-object>svg{width:100%;height:auto;overflow:visible;transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .35s ease-out}.lens-assembly{transform-origin:411px 340px;animation:none}.optical-rays{transform-origin:400px 350px;transform:none;transition:none;opacity:1}.lens-hotspot{opacity:.6;transition:opacity .5s}.light-scattered .lens-hotspot{opacity:1}.object-coordinate{position:absolute;right:16%;bottom:15%;font-size:15px;letter-spacing:.18em;opacity:.4;transform:rotate(-19deg)}.orbit-markers{transform-origin:400px 350px;animation:orbit 35s linear infinite}@keyframes lens-float{50%{transform:translateY(-12px) rotate(2deg)}}@keyframes orbit{to{transform:rotate(360deg)}}
/* Blended direction */
.blend-mockup{background:#0b1220}.blend-hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;min-height:650px;padding:20px 5% 50px;position:relative}.hero-intro{position:relative;z-index:3}.hero-intro h1{font-size:clamp(54px,6.3vw,100px);line-height:.94;letter-spacing:-.075em;font-weight:650;margin:30px 0}.hero-intro h1 em{font-size:1.4em;line-height:.7;color:#ffdf70;letter-spacing:-.04em;display:inline-block;cursor:pointer;position:relative}.hero-intro h1 em:after{content:'';display:block;width:130%;height:1px;position:absolute;bottom:0;left:-10%;background:linear-gradient(90deg,transparent,#ffc400,transparent);transform:rotate(-9deg)}.hero-intro .pill{margin-top:30px}.blend-stage{position:relative;align-self:stretch;display:flex;align-items:center;margin-left:-12%;margin-right:-14%}.blend-stage .optical-object{min-width:100%}.floating-note{position:absolute;bottom:12%;right:14%;display:flex;align-items:center;gap:14px;background:#f5f2e9;color:#0b1220;padding:18px 22px;border-radius:14px;box-shadow:0 20px 55px #0005;font-size:15px;transform:rotate(-4deg);transition:transform .25s}.floating-note:hover{transform:rotate(0) translateY(-4px)}.floating-note small{display:block;opacity:.6;font-size:15px;margin-top:4px}.note-icon{width:32px;height:32px;background:#ffc400;display:grid;place-items:center;border-radius:50%;font-size:18px}.blend-continuation{display:grid;grid-template-columns:.85fr 1.4fr;align-items:center;gap:6%;padding:90px 5%;background:var(--lab-paper);color:var(--lab-ink);border-radius:90px 0 0 0;margin-top:30px;position:relative}.continuation-heading h2{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.065em;margin:25px 0}.continuation-heading h2 em{font-size:1.2em}.continuation-heading>p:last-child{font-size:15px;max-width:32ch;opacity:.7}.experiment-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.experiment-card{text-align:left;min-height:340px;border-radius:24px;position:relative;padding:26px;display:flex;flex-direction:column;align-items:start;overflow:hidden;transition:transform .35s}.experiment-card:nth-child(2){margin-top:45px}.experiment-card:hover,.experiment-card.is-open{transform:translateY(-5px)}.experiment-card>span:first-child{font-size:15px}.experiment-card strong{font-size:clamp(25px,2.5vw,37px);line-height:1.05;letter-spacing:-.06em;margin-top:28px;font-weight:600;position:relative;z-index:1}.experiment-card strong em{font-size:1.2em}.experiment-card small{margin-top:auto;font-size:15px;padding-top:110px}.blue-card{background:#1a3fbf;color:#f5f2e9}.cream-card{background:#ebe5d3;color:#0b1220}.mini-optic{position:absolute;width:150px;height:150px;border:1px solid #8fb0ff;border-radius:50%;right:-20px;top:130px;box-shadow:inset 15px 0 35px #4f7bff88;transform:rotate(-20deg)}.mini-optic:after{content:'';position:absolute;inset:18px;border:1px solid #8fb0ff88;border-radius:50%}.mini-nodes{position:absolute;top:175px;right:25px;display:flex;align-items:center;gap:12px}.mini-nodes:before{content:'';height:1px;background:#1a3fbf;position:absolute;left:10px;right:10px}.mini-nodes i{width:30px;height:30px;border-radius:9px;background:#f5f2e9;border:1px solid #1a3fbf;position:relative;transition:transform .4s}.mini-nodes i:nth-child(2){background:#ffc400}.experiment-card:hover .mini-nodes i:nth-child(2){transform:translateY(-15px)}.card-detail{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s;margin-top:0;font-size:15px;line-height:1.6}.is-open .card-detail{max-height:140px;opacity:1;margin-top:16px}.work-teaser{background:var(--lab-paper);color:var(--lab-ink);display:grid;grid-template-columns:1fr 1.2fr;gap:7%;padding:20px 5% 90px;align-items:center}.work-teaser h2{font-size:clamp(30px,3.4vw,50px);line-height:1.05;letter-spacing:-.055em;margin:20px 0}.teaser-image{display:block;transform:none;transition:transform .4s;overflow:hidden;border-radius:16px;background:#fff}.teaser-image:hover{transform:translateY(-4px)}.teaser-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}.teaser-image>.teaser-caption{display:flex;justify-content:space-between;gap:10px;padding:16px;font-size:15px}.teaser-image>.teaser-caption>span{opacity:.6}
/* Optical direction */
.optical-mockup{background:#090f1c}.optical-hero>h1{text-align:center;font-size:clamp(50px,6vw,90px);line-height:1;letter-spacing:-.055em;margin-top:25px;font-weight:600}.optical-hero>h1 em{color:#f2e3b9;font-size:1.16em}.optical-hero>.lab-label{text-align:center;margin-top:40px}.optical-main-stage{position:relative;min-height:580px;margin-top:-15px}.optical-main-stage .optical-object{max-width:760px;width:65%;margin:auto}.optical-side-copy{position:absolute;left:6%;top:30%;font-size:15px;line-height:1.9;color:#b8c5dc}.optical-side-copy .pill{margin-top:24px;font-size:15px;padding:14px 20px}.optical-control{position:absolute;right:6%;bottom:25%;display:grid;gap:15px;font-size:15px;width:150px}.optical-control input{width:100%;accent-color:#ffc400;cursor:pointer}.optical-control button{background:transparent;border:1px solid #4f5970;border-radius:30px;padding:10px;font-size:15px}.optical-more{padding:100px 8%;position:relative;overflow:hidden;background:#0e1728;border-radius:100px 100px 0 0}.optical-more h2{font-size:clamp(34px,4.7vw,68px);font-weight:500;letter-spacing:-.045em;line-height:1.08;margin:25px 0 40px;position:relative}.optical-more h2 em{color:#ffe199}.optical-more>div{display:flex;justify-content:space-between;gap:40px;align-items:center}.optical-more>div p{font-size:15px;opacity:.7;max-width:45ch}.section-light{position:absolute;width:85%;height:1px;background:linear-gradient(90deg,transparent,#4f7bff,#ffc400,transparent);top:25%;left:10%;transform:rotate(-16deg)}
/* Living software direction */
.software-mockup{background:#f1efe7;color:#0b1220}.software-hero{display:grid;grid-template-columns:1fr 1fr;gap:3%;padding:65px 5% 90px;align-items:center}.software-hero h1{font-size:clamp(50px,5.6vw,88px);letter-spacing:-.065em;line-height:.98;margin:25px 0}.software-hero h1 em{font-size:1.25em;color:#1a3fbf}.software-hero .pill{margin-top:30px}.system-playground{padding:25px;background:#e6e5db;border-radius:30px;transform:none;transition:transform .3s}.system-playground:hover{transform:rotate(0)}.playground-label{display:flex;justify-content:space-between;gap:15px;font-size:15px}.system-status{color:#1a3fbf}.system-map{position:relative;aspect-ratio:520/420;min-height:300px}.system-map>svg{width:100%;height:100%;position:absolute;inset:0}.system-path{stroke:#b1b8c5;stroke-width:1.5;fill:none;transition:stroke .4s}.signal-particle{fill:#1a3fbf;opacity:0}.system-running .signal-particle{opacity:1}.system-running .system-path{stroke:#1a3fbf}.system-node{position:absolute;border-radius:16px;background:#f8f6ef;display:flex;flex-direction:column;text-align:left;padding:17px;font-size:15px;box-shadow:0 10px 25px #0b122008;width:135px;transition:transform .3s,background .3s;z-index:1}.system-node strong{font-size:15px;margin-top:10px;line-height:1.2}.system-node small{font-size:15px;margin-top:8px;opacity:.6}.system-node>span{font-size:19px;color:#1a3fbf}.node-input{left:0;top:12%;transform:none}.node-centre{left:34%;top:40%;background:#ffc400;transform:translateY(-30%)}.node-centre img{width:35px;height:35px}.node-team{right:-5px;top:0;transform:none}.node-customer{right:-5px;bottom:0;transform:none}.system-node:is(button):hover{transform:translateY(-6px)}.system-running .node-team,.system-running .node-customer{background:#dce5fc}.system-result{display:flex;gap:8px;align-items:baseline;font-size:15px;padding:18px 0 0;min-height:65px}.system-result .status-dot{flex:none}.system-reset{font-size:15px}.software-more{background:#1a3fbf;color:#f5f2e9;padding:70px 5%;border-radius:70px 70px 0 0}.software-more>h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.06em;line-height:.98;margin:24px 0 40px}.software-more>h2 em{font-size:1.2em;color:#ffd95a}.workflow-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.workflow-cards button{text-align:left;padding:28px;background:#ffffff0a;border:1px solid #8fb0ff55;border-radius:22px;transition:background .3s,transform .3s}.workflow-cards button:hover{background:#ffffff14;transform:translateY(-5px)}.workflow-cards button>span:first-child{font-size:15px;color:#c8d8ff}.workflow-cards strong{display:block;font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:-.045em;margin-top:25px}
/* Typography direction */
.type-mockup{background:#ffc400;color:#0b1220}.type-hero{padding:35px 5% 70px}.type-hero>h1{font-size:clamp(65px,12vw,185px);font-weight:800;line-height:.77;letter-spacing:-.09em;margin:50px 0 40px;position:relative}.type-hero>h1>span{display:block;width:fit-content}.type-serif{font-family:var(--lab-serif);font-weight:400;font-size:.8em;letter-spacing:-.045em;margin-left:29%;line-height:1}.type-outline{position:relative;color:transparent;-webkit-text-stroke:1.5px #0b1220;cursor:crosshair}.type-illuminated{position:absolute;inset:0;color:#f5f2e9;-webkit-text-stroke:1px #f5f2e9;clip-path:circle(105px at var(--type-x,50%) var(--type-y,50%));transition:clip-path .15s}.type-last{margin-left:13%;position:relative;margin-top:10px}.type-spark{font-family:var(--lab-serif);font-weight:400;display:inline-block;color:#1a3fbf;position:absolute;font-size:.85em;right:-.9em;top:0;transform:rotate(-12deg);transition:transform .5s}.type-lit .type-illuminated{clip-path:circle(150% at 50% 50%)}.type-lit .type-spark{transform:rotate(30deg)}.type-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:60px}.type-bottom p{font-size:15px;max-width:35ch}.type-switch{background:transparent;font-size:15px;border-bottom:1px solid #0b1220;padding:10px 0}.type-more{background:var(--lab-paper);padding:90px 6%;display:grid;grid-template-columns:1.5fr 1fr;gap:8%;align-items:center;border-radius:85px 0 0 0}.type-more>p{font-size:clamp(40px,5vw,80px);line-height:1;letter-spacing:-.045em}.type-more>p em{font-size:1.15em}.type-more>p strong{font-weight:650}.type-more>div>p{font-size:15px;margin:20px 0;max-width:32ch}
.study-footer{padding:20px 4vw 50px;font-size:15px;color:#aab6cd;display:flex;justify-content:space-between;gap:20px}.study-footer>span{opacity:.6;font-size:15px}.discovery-message{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#ffc400;color:#0b1220;padding:18px 28px;border-radius:40px;z-index:80;max-width:90%;font-size:15px;box-shadow:0 20px 60px #0005}.all-directions .study-main{display:grid;grid-template-columns:1fr 1fr;gap:30px}.all-directions .study-caption{flex-wrap:wrap;gap:8px}.all-directions .study-caption p{width:100%;order:2}.all-directions .study-caption>span{font-size:15px}.all-directions .mock-nav>span{display:none}.all-directions .mock-nav img{width:120px}.all-directions .mock-nav{padding:22px 5%;font-size:15px}.all-directions .blend-hero{min-height:410px}.all-directions .hero-intro h1{font-size:48px}.all-directions .hero-body{font-size:15px}.all-directions .lab-label{font-size:15px}.all-directions .pill{padding:12px 17px;font-size:15px;gap:12px}.all-directions .floating-note{font-size:15px;padding:12px;right:10%;bottom:8%}.all-directions .note-icon{display:none}.all-directions .hero-foot{font-size:15px;flex-wrap:wrap}.all-directions .scene-hint{display:none}.all-directions .blend-continuation,.all-directions .work-teaser,.all-directions .type-more{grid-template-columns:1fr;padding:40px 6%;gap:25px}.all-directions .continuation-heading h2{font-size:45px}.all-directions .experiment-card{padding:20px;min-height:280px}.all-directions .experiment-card strong{font-size:27px}.all-directions .work-teaser h2{font-size:35px}.all-directions .optical-hero>h1{font-size:45px}.all-directions .optical-main-stage{min-height:400px}.all-directions .optical-side-copy{font-size:15px;left:5%}.all-directions .optical-control{width:110px;font-size:15px;right:5%;bottom:10%}.all-directions .optical-main-stage .optical-object{width:85%}.all-directions .optical-more{padding:50px 7%;border-radius:50px 50px 0 0}.all-directions .optical-more h2{font-size:35px}.all-directions .optical-more>div{display:block}.all-directions .software-hero{grid-template-columns:1fr;padding:30px 6%;gap:35px}.all-directions .software-hero h1{font-size:55px}.all-directions .system-playground{max-width:480px;width:100%;margin:auto}.all-directions .software-more{padding:40px 6%}.all-directions .software-more>h2{font-size:45px}.all-directions .workflow-cards{grid-template-columns:1fr}.all-directions .workflow-cards strong{font-size:25px}.all-directions .type-hero>h1{font-size:clamp(60px,6vw,105px)}.all-directions .type-bottom{flex-wrap:wrap;gap:20px}.all-directions .type-more>p{font-size:45px}
@media(max-width:1000px){.study-home>span{display:none}.hero-intro h1{font-size:70px}.blend-hero{min-height:560px}.floating-note{bottom:8%;right:5%;padding:14px}.mock-nav>span{display:none}.optical-control{right:4%;width:130px}.system-node{width:115px;padding:12px}.software-hero{gap:4%}.system-map{min-height:300px}.workflow-cards{gap:12px}.workflow-cards button{padding:20px}.all-directions .study-main{grid-template-columns:1fr}}
@media(max-width:700px){html{scroll-padding-top:125px}.study-toolbar{flex-wrap:wrap;padding:12px 4%;gap:10px}.study-home>span{display:inline}.study-toolbar nav{order:3;width:100%;justify-content:space-between}.study-toolbar nav a{padding:8px 12px;font-size:15px}.compare-button{font-size:15px;padding:8px 13px}.study-main{padding:18px 3%}.study-caption{flex-wrap:wrap;gap:8px}.study-caption p{width:100%;order:2;font-size:15px}.study-caption>span{font-size:15px}.mockup{border-radius:15px}.mock-nav{padding:22px 6%;font-size:15px}.mock-nav img{width:140px}.mock-nav>a{padding:9px 12px}.blend-hero{grid-template-columns:1fr;padding:25px 7% 0;min-height:auto}.hero-intro h1{font-size:clamp(50px,12vw,78px);margin:28px 0}.hero-body{font-size:15px}.hero-intro .pill{margin-top:22px}.blend-stage{margin:-35px -12% -15px 8%;min-height:300px}.floating-note{right:12%;bottom:10%;font-size:15px}.hero-foot{flex-wrap:wrap;font-size:15px;padding:20px 7%}.scene-hint{display:none}.blend-continuation{grid-template-columns:1fr;padding:55px 7%;gap:35px;border-radius:50px 0 0 0}.continuation-heading h2{font-size:55px}.experiment-cards{gap:12px}.experiment-card{min-height:295px;padding:20px}.experiment-card strong{font-size:28px}.experiment-card small{font-size:15px}.experiment-card:nth-child(2){margin-top:25px}.mini-optic{width:120px;height:120px;top:145px}.mini-nodes{right:15px;gap:8px;top:170px}.mini-nodes i{width:24px;height:24px}.work-teaser{grid-template-columns:1fr;padding:0 7% 60px;gap:30px}.work-teaser h2{font-size:42px}.optical-hero>.lab-label{margin-top:25px}.optical-hero>h1{font-size:clamp(39px,9vw,64px);padding-inline:5%}.optical-main-stage{min-height:480px;margin-top:10px}.optical-main-stage .optical-object{width:100%;margin-top:0}.optical-side-copy{position:relative;left:auto;top:auto;margin:-5px 7% 0;font-size:15px}.optical-side-copy .pill{margin-top:15px}.optical-control{right:7%;bottom:30px;width:110px}.optical-more{padding:60px 7%;border-radius:45px 45px 0 0}.optical-more h2{font-size:38px}.optical-more>div{display:block}.optical-more .text-link{margin-top:20px}.software-hero{grid-template-columns:1fr;padding:40px 7%;gap:50px}.software-hero h1{font-size:65px}.system-playground{padding:22px;transform:none}.system-node{width:105px;padding:12px}.system-node strong{font-size:15px}.system-node small{font-size:15px}.node-centre{left:31%}.system-map{min-height:310px}.software-more{padding:55px 7%;border-radius:45px 45px 0 0}.software-more>h2{font-size:55px}.workflow-cards{grid-template-columns:1fr}.workflow-cards button{padding:25px}.workflow-cards strong{font-size:27px}.type-hero{padding:35px 6% 45px}.type-hero>h1{font-size:clamp(60px,15vw,110px);margin-block:40px}.type-bottom{flex-wrap:wrap;margin-top:35px;gap:20px}.type-bottom p{max-width:100%;width:100%}.type-more{padding:60px 7%;grid-template-columns:1fr;gap:35px;border-radius:45px 0 0 0}.type-more>p{font-size:55px}.study-footer{display:block;font-size:15px;padding:30px 7%}.study-footer>span{display:block;margin-top:14px}.all-directions .study-main{display:block}.all-directions .blend-hero{min-height:auto}.all-directions .optical-main-stage{min-height:470px}.all-directions .type-hero>h1{font-size:15vw}}
@media(max-width:480px){.experiment-cards{grid-template-columns:1fr}.experiment-card:nth-child(2){margin-top:0}.experiment-card{min-height:265px}.experiment-card strong{font-size:34px}.experiment-card small{padding-top:85px}.mini-optic{right:15px;top:90px}.mini-nodes{top:125px}.type-hero>h1,.all-directions .type-hero>h1{font-size:12.5vw}.type-more>p{font-size:44px}.system-node{width:92px;padding:10px}.system-node strong{font-size:15px}.system-node small{font-size:15px}.node-centre{left:29%}.system-playground{padding:18px}.hero-intro h1{font-size:12vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.optical-object>svg{transform:none}.signal-particle{display:none}.type-illuminated{clip-path:none}.type-outline{cursor:auto}}
.hero-intro h1 em>button{font:inherit;color:inherit;background:transparent;padding:0;display:block}
/* Rays and dielectric surfaces share the same coordinates; no independent ray transforms. */
.optical-object{display:block;border:0;background:transparent;padding:0;text-align:inherit;color:inherit}
.optical-rays,.lens-assembly{transform:none;animation:none;transition:none}
.experiment-card:nth-child(2){margin-top:0}
.teaser-image{position:relative;isolation:isolate}
.teaser-image>.teaser-caption{position:relative;z-index:2;background:#f5f2e9;cursor:pointer}
.light-shade{position:absolute;inset:0;background:#0b1220;opacity:0;pointer-events:none;z-index:1}
.flashlight-dot{display:none;position:absolute;left:var(--light-x);top:var(--light-y);width:6px;height:6px;border-radius:50%;background:#4f7bff;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .teaser-image.light-ready .light-shade{opacity:.78}
 .teaser-image.light-active{cursor:none}
 .teaser-image.light-active .light-shade{opacity:1;background:var(--flashlight-shade)}
 .teaser-image.light-active .flashlight-dot{display:block}
 .teaser-image:focus-visible .light-shade{opacity:0}
}
.type-illuminated{clip-path:none;mask-image:var(--type-mask,radial-gradient(circle at 50% 50%,#fff,transparent 65%));-webkit-mask-image:var(--type-mask,radial-gradient(circle at 50% 50%,#fff,transparent 65%));transition:none}
.type-lit .type-illuminated{clip-path:none;mask-image:none;-webkit-mask-image:none}
@media(prefers-reduced-motion:reduce){.type-illuminated{mask-image:none;-webkit-mask-image:none}}
.hero-pattern{position:absolute;inset:0;pointer-events:none;opacity:0;mask-image:var(--hero-mask);-webkit-mask-image:var(--hero-mask);overflow:hidden;z-index:0}
.hero-lit .hero-pattern{opacity:.7}
.pattern-ink{position:absolute;inset:-240px;background:url('/design-lab/pattern.svg') repeat;background-size:240px;animation:etched-flow 32s linear infinite}
@keyframes etched-flow{to{transform:translate(240px,-240px)}}
.blend-hero{isolation:isolate}.blend-stage{z-index:1}
.hidden-discovery{position:absolute;right:8%;bottom:22px;z-index:5;font:15px var(--lab-serif);letter-spacing:.09em;color:#ffd95a;background:transparent;padding:14px;opacity:var(--discovery-opacity,0);pointer-events:none}
.hidden-discovery.is-discovered,.hidden-discovery:focus-visible{pointer-events:auto}.hidden-discovery:focus-visible{opacity:1}
.xtralite{width:min(720px,94vw);max-height:94dvh;margin:auto;border:1px solid #35425c;border-radius:22px;background:#0b1220;color:#f5f2e9;padding:26px;overflow:auto;box-shadow:0 30px 120px #0008}
.xtralite::backdrop{background:#040912dd}
.game-heading{display:flex;justify-content:space-between;align-items:center}.game-label{font-size:15px;color:#aab6cd}.game-heading h2{font:40px var(--lab-serif);letter-spacing:-.04em}.game-heading>button{background:transparent;font-size:28px;padding:5px 15px}
.game-intro{font-size:15px;color:#aab6cd;margin-top:12px}.game-stage{max-width:540px;margin:0 auto}.game-stage .optical-object>svg{height:min(45dvh,400px);width:100%}.game-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px}.game-controls label{display:grid;gap:12px;font-size:15px;color:#aab6cd}.game-controls input{accent-color:#ffc400;width:100%;min-height:24px;cursor:pointer}.game-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:15px;margin-top:20px;min-height:40px}.game-footer button{background:transparent;font-size:25px;padding:8px}
@media(prefers-reduced-motion:reduce){.pattern-ink{animation:none}}
.pattern-ink{animation-play-state:paused}.hero-lit .pattern-ink{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.pattern-ink{animation:none}}

/* Readable supporting copy and deliberate dark-room project reveal. */
.hero-body{font-size:17px;opacity:.85}.hero-foot{font-size:15px;color:#c5cfdf}
.teaser-image>.teaser-caption{font-size:15px;line-height:1.5}.teaser-caption>span{opacity:.8}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .teaser-image.light-ready .light-shade{opacity:.995;background:#090f1c}
 .teaser-image.light-active .light-shade{opacity:1;background:var(--flashlight-shade)}
 .teaser-image:focus-visible .light-shade{opacity:0}
}
.xtralite{width:min(900px,96vw)}.arcade-field{display:block;width:100%;height:auto;touch-action:none;border-radius:12px;background:#090f1c}
.arcade-hud{display:flex;justify-content:space-between;gap:20px;margin:20px 0 12px;font-size:16px;color:#c5cfdf}.arcade-hud strong{color:#f5f2e9;margin-left:10px;font-variant-numeric:tabular-nums}
.game-intro{font-size:16px;line-height:1.6;color:#c5cfdf;max-width:65ch}.game-label,.game-footer{font-size:15px;color:#c5cfdf}.arcade-actions{display:flex;gap:10px}.arcade-actions button{font-size:15px;padding:12px 18px;border-radius:24px;border:1px solid #53617b}.arcade-actions button:first-child{background:#ffc400;color:#0b1220;border-color:#ffc400}.game-footer{flex-wrap:wrap}
@media(max-width:600px){.xtralite{padding:18px}.game-intro{font-size:15px}.game-footer{align-items:flex-start}.arcade-actions{width:100%}.arcade-actions button{flex:1}.hero-body{font-size:16px}}

/* The blended hero's expressive brand object, rather than a ray diagram. */
.brand-sculpture .sculpture-float{animation:brand-float 8s ease-in-out infinite;transform-origin:411px 340px}
.sculpture-orbit{transform-origin:411px 340px;animation:brand-orbit 40s linear infinite}
.sculpture-logo{transition:filter .5s;filter:drop-shadow(0 8px 18px #0b122080)}
.sculpture-reflection{opacity:.55;transition:opacity .5s}.brand-sculpture.is-awake .sculpture-logo{filter:drop-shadow(0 0 20px #ffc40055)}.brand-sculpture.is-awake .sculpture-reflection{opacity:1}
@keyframes brand-float{50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes brand-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.brand-sculpture .sculpture-float,.sculpture-orbit{animation:none}.brand-sculpture>svg{transform:none;transition:none}}