@scope (.portfolio-opening) {
:scope{color-scheme:dark;--bg:#090e14;--ink:#ecf0f2;--muted:#7e8c98;--cyan:#71e4e1;--orange:#efa777;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}button,a,[tabindex]{-webkit-tap-highlight-color:transparent}a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}.header{position:absolute;top:0;left:0;width:100%;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:30px 4.5vw}.brand{font-size:26px;font-weight:800;letter-spacing:-2px}.brand span,.loader-mark span{color:var(--cyan)}.header-label,.edition{font:10px monospace;letter-spacing:2px;color:var(--muted)}.edition{border:1px solid #283039;padding:9px 12px}.loader{position:fixed;inset:0;z-index:10;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .45s,visibility .45s}.loader.done{opacity:0;visibility:hidden}.loader-mark{font-weight:800;font-size:38px}.loader p,.loader output{font:10px monospace;letter-spacing:2px}.loader-track{height:1px;width:220px;background:#26343c;margin:18px}.loader-track i{display:block;background:var(--cyan);height:100%;width:0;transition:width .2s}.no-script{position:fixed;bottom:10px;left:20px}body:has(.no-script) .loader{display:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.hero{position:relative;min-height:100svh;isolation:isolate;display:flex;align-items:center;padding:120px 3vw 140px;overflow:hidden}.hero-background{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 17% 58%,#17303955,transparent 36%),radial-gradient(ellipse at 85% 58%,#412e2138,transparent 34%),linear-gradient(#090e14,#0c121a);opacity:0;transition:opacity .7s}.hero-background::after{content:'';position:absolute;inset:0;background-image:linear-gradient(#8199a307 1px,transparent 1px),linear-gradient(90deg,#8199a307 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#0008)}#hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.hero-layout{width:100%;max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.45fr) minmax(0,1fr);align-items:center;gap:16px}.hero-copy{text-align:center;min-width:0;padding:15px 0;opacity:0;transform:translateY(18px)}.eyebrow{font:10px monospace;letter-spacing:3px;color:var(--cyan);margin-bottom:30px;display:flex;justify-content:center;align-items:center;gap:10px}.eyebrow span,.status-dot{width:5px;height:5px;background:var(--cyan);display:inline-block;border-radius:50%;box-shadow:0 0 12px #71e4e144}h1{margin:0}h1>span{display:block;font-size:clamp(15px,1.65vw,24px);letter-spacing:.22em;font-weight:400;margin-bottom:12px}h1 strong{display:block;font-size:clamp(46px,5vw,80px);letter-spacing:-.065em;font-weight:800;line-height:1.05}.title-dot{color:var(--cyan)}.disciplines{font:10px monospace;letter-spacing:1.6px;margin:27px -10px 0;white-space:nowrap}.disciplines b{color:var(--cyan);margin:0 8px;font-weight:400}.tagline{font-size:17px;line-height:1.65;color:#98a6b1;margin:28px 0 32px;font-weight:400}.explore{display:inline-flex;gap:32px;align-items:center;border:1px solid #71e4e166;background:#71e4e109;padding:18px 23px;font:10px monospace;letter-spacing:1.5px;transition:background .2s,transform .2s,border-color .2s;opacity:0}.explore span{font-size:18px;color:var(--cyan)}.explore:hover{background:#71e4e119;transform:translateY(-3px);border-color:var(--cyan)}.robot-slot{min-width:0;opacity:0;transform:translateX(-22px)}.robot-right{transform:translateX(22px)}.robot-viewport{height:clamp(300px,42vw,490px);width:100%;position:relative;cursor:grab;touch-action:pan-y;border-radius:20px}.robot-viewport:active{cursor:grabbing}.robot-viewport::after{content:'';position:absolute;bottom:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#71e4e177,transparent)}.robot-right .robot-viewport::after{background:linear-gradient(90deg,transparent,#efa77777,transparent)}.model-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;color:var(--muted)}.asset-symbol{font:32px monospace;color:#71e4e166;letter-spacing:8px}.model-fallback strong{font:10px monospace;letter-spacing:2px;color:#b2c0c8}.model-fallback>span:last-child{font:11px monospace;color:#6d7d89}.robot-right .asset-symbol{color:#efa77777}.robot-caption{font:9px monospace;letter-spacing:1.4px;margin:24px 0 0;text-align:center;color:#9baab4}.robot-caption .status-dot{margin-right:8px;opacity:.4}.robot-slot.loaded .status-dot{opacity:1}.robot-caption small{display:block;color:#647580;font-size:8px;letter-spacing:1px;margin-top:10px}.robot-right .status-dot{background:var(--orange)}.hero-footer{position:absolute;bottom:32px;left:4.5vw;right:4.5vw;border-top:1px solid #869aa31e;padding-top:22px;display:flex;align-items:center;justify-content:space-between;font:9px/1.7 monospace;color:#62727e;letter-spacing:1px}.hero-footer b{color:#97a4ae;font-weight:400}.scroll-cue{display:flex;align-items:center;gap:22px}.scroll-cue i{font:22px Arial;color:var(--cyan)}.ready .hero-background{opacity:1}.ready .robot-slot{animation:enter .8s .1s both}.ready .robot-right{animation-delay:.2s}.ready .hero-copy{animation:enter .8s .3s both}.ready .explore{animation:enter .5s .75s both}@keyframes enter{to{opacity:1;transform:translate(0)}}@media(min-width:761px) and (max-width:1050px){.hero{padding-top:105px;padding-bottom:130px}.hero-layout{grid-template-columns:1fr;gap:28px;max-width:600px}.robot-viewport{height:320px;max-width:340px;margin:auto}.hero-copy{grid-row:2}.robot-right{grid-row:3}.robot-caption{margin-top:15px}.footer-coordinate{display:none}}@media(max-width:760px){.header{padding:22px 6vw}.header-label{display:none}.hero{padding:125px 6vw 125px;align-items:flex-start}.hero-layout{display:flex;flex-direction:column;gap:0}.hero-copy{display:contents}.eyebrow{order:0;margin-bottom:24px}h1{order:1;text-align:center}h1>span{font-size:14px}h1 strong{font-size:clamp(43px,11.2vw,78px)}.robot-right{order:2;width:min(100%,360px);margin-top:22px}.robot-right .robot-viewport{height:310px}.robot-caption{margin-top:12px}.disciplines{order:3;margin:32px 0 0;font-size:8px;letter-spacing:.7px}.disciplines b{margin:0 5px}.tagline{order:4;text-align:center;font-size:16px;margin:22px 0}.explore{order:5}.robot-left{order:6;width:220px;margin-top:48px}.robot-left .robot-viewport{height:240px}.hero-footer{left:6vw;right:6vw;bottom:22px;font-size:8px}.footer-coordinate,.scroll-cue{display:none}}@media(max-width:400px){.robot-left{display:none}.edition{font-size:8px}.hero{padding-bottom:135px}}@media(prefers-reduced-motion:reduce){.hero-copy,.robot-slot,.explore{opacity:1;transform:none}.hero-background{opacity:1}}
[hidden]{display:none!important}

}

.portfolio-opening.scene{padding:0;overflow-y:auto;overflow-x:hidden;background:transparent;color:var(--text-primary)}
.portfolio-opening .hero{min-height:100svh}
.portfolio-opening .loader{position:absolute}
.portfolio-opening .header{font-family:Arial,Helvetica,sans-serif}
.portfolio-opening h1{color:#ecf0f2;background:none;-webkit-text-fill-color:initial}
.portfolio-opening.ready .hero-background{opacity:1}
.portfolio-opening.ready .hero-copy,.portfolio-opening.ready .robot-slot,.portfolio-opening.ready .explore{opacity:1;transform:none;animation:opening-enter .8s both}
@keyframes opening-enter{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
/* The opening shares the CV background, theme, navigation and cursor. */
.portfolio-opening{--bg:var(--bg-deep);--ink:var(--text-primary);--muted:var(--text-muted);--cyan:var(--accent)}
.portfolio-opening .hero-background{display:none}
.portfolio-opening .header .edition,.portfolio-opening .scroll-cue{display:none}
.portfolio-opening h1{color:var(--text-primary)}
.portfolio-opening .tagline{color:var(--text-secondary)}
.portfolio-opening .eyebrow,.portfolio-opening .title-dot,.portfolio-opening .explore span{color:var(--accent)}
.portfolio-opening .disciplines,.portfolio-opening .robot-caption{color:var(--text-secondary)}
.portfolio-opening .hero-footer,.portfolio-opening .robot-caption small{color:var(--text-muted)}
.portfolio-opening .hero-footer b{color:var(--text-secondary)}
.portfolio-opening .explore{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.portfolio-opening .explore:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
@media(min-width:901px){
 .portfolio-opening .hero{margin-left:240px;width:calc(100% - 240px);padding-left:20px;padding-right:20px}
 .portfolio-opening .header{padding-left:42px;padding-right:42px}
 .portfolio-opening .hero-layout{grid-template-columns:minmax(0,1fr) minmax(320px,1.45fr) minmax(0,1fr);gap:10px}
 .portfolio-opening h1 strong{font-size:clamp(40px,4.1vw,72px)}
 .portfolio-opening .disciplines{font-size:9px;letter-spacing:1px;white-space:normal}
 .portfolio-opening .disciplines b{margin:0 4px}
 .portfolio-opening .hero-footer{left:20px;right:20px}
 .portfolio-opening .footer-coordinate{margin-right:95px}
}
@media(min-width:901px) and (max-width:1200px){.portfolio-opening .hero{margin-left:190px;width:calc(100% - 190px)}}
@media(min-width:901px) and (max-width:1050px){.portfolio-opening .hero-layout{grid-template-columns:1fr}}
@media(max-width:900px){.portfolio-opening .hero{padding-bottom:165px}.portfolio-opening .hero-footer{bottom:85px}.portfolio-opening .header{padding-right:160px}.portfolio-opening .header-label{display:none}}
@media(min-width:901px){.portfolio-opening .header-label{position:absolute;left:50%;transform:translateX(-50%)}}

/* One shared WebGL canvas, scissored to the visible Hero or About robot slot. */
.scenes>.portfolio-robot-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}