/* Neon refinement: retain the authored palette, use fluid layout and compositor motion. */
html,body{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto}
.stage{position:relative;width:100%;max-width:1800px;height:auto;min-height:100svh;margin:auto;padding:0 28px;overflow:hidden;transform:none;left:auto;top:auto}
.portfolio-shell{position:relative;inset:auto}
.hero{position:relative;width:100%;height:345px}
.hero-hud{display:none}
.micro-left{left:calc(50% - 260px)}.micro-right{right:calc(50% - 260px)}
.name-block{width:min(760px,100%)}
.name{filter:none!important;text-shadow:0 0 9px currentColor,0 0 25px color-mix(in srgb,currentColor 32%,transparent)}
.name:before,.name:after{animation:identity-slice 8s steps(1,end) infinite!important;will-change:transform,opacity}
.name:after{animation-delay:-3.8s!important;animation-direction:reverse!important}
.name-magenta:before{animation-delay:-1.3s!important}.name-magenta:after{animation-delay:-5.1s!important}
@keyframes identity-slice{0%,4%,100%{transform:translateX(0);opacity:0}1%{transform:translateX(-6px);opacity:.65}2%{transform:translateX(7px);opacity:.5}3%{transform:translateX(-3px);opacity:.6}}
.hero-emblem,.hero-emblem img{animation:none!important}
.smoke-texture{width:min(48vw,760px);height:370px;filter:none!important;mix-blend-mode:normal;opacity:.78;animation:smoke-drift 17s ease-in-out infinite alternate!important;will-change:transform,opacity}
.smoke-texture-cyan{left:-30px;transform-origin:20% 60%}
.smoke-texture-magenta{right:-30px;transform-origin:80% 60%;animation-delay:-9s!important;animation-direction:alternate-reverse!important}
.smoke-wisp{opacity:.2;animation:smoke-fold 23s ease-in-out infinite alternate!important;animation-delay:-11s!important}
.smoke-wisp.smoke-texture-magenta{animation-delay:-4s!important;animation-direction:alternate-reverse!important}
@keyframes smoke-drift{from{transform:translate3d(-12px,8px,0) rotate(-3deg) scale(1.02);opacity:.68}to{transform:translate3d(24px,-14px,0) rotate(4deg) scale(1.09);opacity:.92}}
@keyframes smoke-fold{from{transform:translate3d(22px,-12px,0) rotate(7deg) scale(1.12,.96);opacity:.12}to{transform:translate3d(-22px,16px,0) rotate(-5deg) scale(.99,1.12);opacity:.3}}
.ambient{filter:none;opacity:.1}.ambient-beam,.grain,.edge-code{display:none}
.skills-grid{position:relative;inset:auto;width:100%;height:auto;max-width:1160px;margin:24px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.skills-grid .skill-card:nth-child(n){position:relative;inset:auto;width:100%;height:244px;transform:none!important;transform-style:flat;will-change:auto;transition:none;filter:none}
.skill-card .skill-icon,.skill-card .card-label,.skill-card .mini-underline{will-change:auto}
.skill-card .card-label{max-width:100%;margin:12px 8px 0;font-size:18px!important;line-height:1.25!important;letter-spacing:1.5px!important;text-align:center;white-space:normal}
.panel-link{color:inherit;text-decoration:none}.panel-link:after{content:"";position:absolute;inset:-100px 0 -25px}
.skill-card .card-note{font-size:10px!important;letter-spacing:1px!important;white-space:normal;text-align:center;padding:0 8px}
.skill-card .card-hint{font-size:10px!important;opacity:.68!important;right:16px;bottom:14px!important;letter-spacing:1px}
.skill-card .card-code{font-size:9px!important}.laser-burst{display:none}
.panel-stack{position:absolute;z-index:8;inset:0;padding:18px 16px 16px;background:#050b10;border:1px solid var(--accent);box-shadow:inset 0 0 36px color-mix(in srgb,var(--accent) 6%,transparent);visibility:hidden;opacity:0;pointer-events:none}
.skill-card:hover .panel-stack,.skill-card:focus-within .panel-stack,.skill-card.is-expanded .panel-stack{visibility:visible;opacity:1;pointer-events:auto}
.stack-overview{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:32px;margin-bottom:13px;color:var(--accent);font:700 14px/1.35 'Courier New',monospace;letter-spacing:1px;text-decoration:none}
.stack-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stack-links a{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;min-height:47px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 4%,#071016);color:#edf5f7;font:500 15px/1.25 Arial,Helvetica,sans-serif;text-decoration:none;overflow-wrap:anywhere}
.stack-links a span{color:var(--accent);font-size:13px;flex-shrink:0}
.stack-links a:hover{background:color-mix(in srgb,var(--accent) 14%,#071016);border-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent,var(--cyan));outline-offset:3px}
.skill-card:focus-within{z-index:10}
.site-footer{position:relative;inset:auto;width:100%;max-width:1360px;height:auto;min-height:84px;margin:54px auto 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 0}
.site-footer>*+*{border:0}.footer-item{padding-left:0;font-size:12px!important}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{text-decoration:underline}.brand-mark-image small{font-size:10px}.equalizer{min-width:85px}
.detail-dialog{width:min(720px,calc(100% - 32px));max-height:calc(100svh - 40px);padding:0;border:1px solid var(--detail-accent);background:#050a0e;color:#e6eff3;overflow:auto;overscroll-behavior:contain;box-shadow:0 0 50px #000b}
.detail-dialog::backdrop{background:#010408ed}
.detail-inner{padding:42px 40px 24px;position:relative}
.detail-close{position:sticky;top:0;float:right;display:grid;place-items:center;width:44px;height:44px;margin:-24px -22px 0 10px;color:var(--detail-accent);background:#050a0e;border:1px solid #ffffff25;text-decoration:none;font:28px/1 Arial}
.detail-kicker{color:var(--detail-accent);font:700 11px/1.6 'Courier New',monospace;letter-spacing:1.5px;margin:0 45px 16px 0}
.detail-dialog h2{font:700 clamp(25px,4vw,36px)/1.15 'Courier New',monospace;margin:0 0 28px;overflow-wrap:anywhere}
.detail-dialog h3{color:var(--detail-accent);font:700 12px/1.5 'Courier New',monospace;text-transform:uppercase;letter-spacing:1px;margin:24px 0 8px}
.detail-dialog p{font-size:16px;line-height:1.7}.detail-dialog .detail-kicker{font-size:11px}
.detail-dialog footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #ffffff20;margin-top:30px;padding-top:18px;color:#91a2ad;font:10px/1.6 'Courier New',monospace}
.detail-open{overflow:hidden}
html:not(.enhanced) .detail-dialog:target{display:block;position:fixed;inset:20px 0;z-index:100;margin:auto;height:fit-content}
html:not(.enhanced) .panel-stack{visibility:visible;opacity:1;pointer-events:auto}
.motion-paused .smoke-texture,.motion-paused .name:before,.motion-paused .name:after{animation-play-state:paused!important}
@media(max-width:1200px){.skills-grid .skill-card:nth-child(n){height:282px}}
@media(max-width:1000px){
 .skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;gap:24px}
 .hero-emblem{left:0;width:95px;height:90px}.micro{display:none}.smoke-texture{width:58vw}
 .site-footer{justify-content:center}.site-footer .equalizer{display:none}
}
@media(max-width:620px){
 .stage{padding:0 16px}.hero{height:295px}.hero-emblem{width:68px;height:60px;top:12px}
 .name-block{top:92px;height:150px}.name-cyan{font-size:min(64px,16vw)}.name-magenta{font-size:min(72px,18vw);top:61px}
 .descriptor{top:247px;font-size:min(10px,2.4vw)!important;letter-spacing:.8px}.descriptor b{margin:0 6px}.pager{top:279px}
 .skills-grid{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:22px;max-width:420px}
 .smoke-texture{width:78vw;height:300px}.smoke-texture-cyan{left:-26%}.smoke-texture-magenta{right:-26%}
 .site-footer{margin-top:32px;gap:12px}.site-footer .brand-mark-image{width:100%;justify-content:center}.footer-item{font-size:10px!important;gap:7px}
 .detail-inner{padding:32px 24px 20px}.detail-close{margin:-16px -10px 0 8px}.detail-dialog footer span{display:none}
}
@media(hover:none){
 .skills-grid .skill-card:nth-child(n){height:auto;min-height:400px;justify-content:flex-start;padding-top:24px}
 .skill-card .skill-icon{width:68px;height:68px}.skill-card .card-label{font-size:16px!important;margin-top:8px}.skill-card .card-hint,.skill-card .mini-underline{display:none}
 .panel-stack{position:relative;inset:auto;align-self:stretch;margin-top:20px;border:0;border-top:1px solid color-mix(in srgb,var(--accent) 32%,transparent);visibility:visible;opacity:1;pointer-events:auto;padding:12px}
 .stack-overview{display:none}.stack-links a{min-height:48px}.panel-link:after{display:none}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .stage .smoke-texture,.stage .name:before,.stage .name:after{animation:none!important}
 .name:before,.name:after{opacity:0!important}
}

/* The exact Showcase monogram, composed into the existing Neon logo slots. */
.hero-emblem img,.brand-mark-image img{object-fit:cover;object-position:center;transform:scale(1.3);filter:none;opacity:1;mask-image:radial-gradient(ellipse at center,#000 0 42%,transparent 74%)}

/* Fixed viewport composition. Small displays scroll the capability wall internally. */
html,body{height:100%;width:100%;overflow:hidden}
.stage{height:100vh;height:100svh;min-height:0;max-height:100svh;overflow:hidden}
.portfolio-shell{height:100%;display:grid;grid-template-rows:30% minmax(0,1fr) 78px;gap:16px}
.hero{height:100%;min-height:0}
.name-block{top:24%;height:65%}
.name-cyan{font-size:clamp(56px,10.8svh,98px)}
.name-magenta{font-size:clamp(62px,12.2svh,112px);top:.77em}
.descriptor{top:85%}.pager{top:97%}
.skills-grid{height:100%;min-height:0;max-height:100%;margin:0 auto;grid-template-rows:repeat(2,minmax(0,1fr));gap:28px}
.skills-grid .skill-card:nth-child(n){height:100%;min-height:0}
.skill-card .skill-icon{width:clamp(54px,10svh,95px);height:clamp(54px,10svh,95px)}
.site-footer{height:100%;min-height:0;margin:0 auto;padding:10px 0;flex-wrap:nowrap}

/* Each holographic menu resolves inside its own panel. */
@media(hover:hover) and (min-width:1001px) and (min-height:601px){
 .skill-card:is(:hover,:focus-within,.is-expanded){z-index:30}
 .panel-stack{inset:0;padding:12px 14px;display:flex;flex-direction:column;background:linear-gradient(125deg,#07121bfa,#03070c 65%);overflow:hidden;transform-origin:center;box-shadow:inset 0 0 32px color-mix(in srgb,var(--accent) 10%,transparent)}
 .skill-card:is(:hover,:focus-within,.is-expanded) .panel-stack{animation:var(--menu-motion) var(--burst-duration) steps(1,end) both}
 .stack-overview{font-size:14px;min-height:26px;margin-bottom:8px;flex-shrink:0}
 .stack-links{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
 .stack-links a{font-size:15px;min-height:0;padding:6px 8px;border-left:2px solid var(--accent)}
}
/* Glitch fragments and code are visible only during boot/interaction. */
.glitch-burst{position:absolute;inset:-5px;z-index:32;pointer-events:none;color:var(--accent);overflow:visible}
.glitch-code,.glitch-bit{position:absolute;left:var(--bit-x);top:var(--bit-y);opacity:0;pointer-events:none}
.glitch-code{font:700 10px/1 'Courier New',monospace;white-space:nowrap;color:var(--accent);text-shadow:2px 0 #fff8,-3px 0 #030405}
.glitch-bit{width:28px;height:2px;background:var(--accent);box-shadow:0 0 7px var(--accent)}
.is-glitching .glitch-code,.is-glitching .glitch-bit{animation:var(--code-motion) var(--burst-duration) steps(1,end) var(--bit-delay) both}
@keyframes code-corrupt{0%,100%{opacity:0;transform:translateX(0) scaleX(.7)}10%,42%{opacity:.85;transform:translateX(var(--bit-shift)) scaleX(1.12)}24%,68%{opacity:.16;transform:translateX(3px) scaleX(.9)}54%,82%{opacity:.7;transform:translateX(calc(var(--bit-shift) * -.45)) scaleX(1)}}
.glitch-burst:before,.glitch-burst:after{content:"";position:absolute;width:150px;height:1px;opacity:0;background:linear-gradient(90deg,#fff,var(--accent),transparent);box-shadow:0 0 5px var(--accent);transform-origin:0 50%}
.glitch-burst:before{left:99%;top:5%;--ray-angle:-25deg}.glitch-burst:after{left:1%;top:95%;--ray-angle:155deg}
.is-glitching .glitch-burst:before,.is-glitching .glitch-burst:after{animation:ray-kick .55s ease-out both}
@keyframes ray-kick{0%,100%{opacity:0;transform:rotate(var(--ray-angle)) scaleX(.05)}15%,35%{opacity:.85;transform:rotate(var(--ray-angle)) scaleX(1)}55%{opacity:.25;transform:rotate(var(--ray-angle)) scaleX(.55)}}
.is-glitching .card-code{animation:var(--code-motion) var(--burst-duration) steps(1,end)}
@keyframes code-signal{0%,100%{opacity:.16}15%,45%{opacity:.65}25%,60%{opacity:.24;transform:translateX(-3px)}}
.name:before,.name:after{animation-name:identity-corrupt!important;animation-duration:5.8s!important}
@keyframes identity-corrupt{0%,7%,39%,45%,100%{transform:translateX(0);opacity:0}1%,40%{transform:translateX(-12px);opacity:.8}2%,42%{transform:translateX(9px) skewX(5deg);opacity:.65}4%,44%{transform:translateX(-5px);opacity:.85}6%{transform:translateX(4px);opacity:.3}}
.scene-boot .name:before,.scene-boot .name:after{animation-duration:1.2s!important}
.scene-boot .hero-emblem{animation:logo-lock .8s steps(1,end)!important}
@keyframes logo-lock{0%,18%{opacity:.15;transform:translateX(-8px)}12%,26%,45%{opacity:.8;transform:translateX(4px)}55%,100%{opacity:.78;transform:none}}
@media(max-height:760px) and (min-width:1001px){
 .portfolio-shell{grid-template-rows:32% minmax(0,1fr) 54px;gap:10px}.skills-grid{gap:18px}
 .hero-emblem{width:110px;height:90px;top:10px}.micro{top:18px}.descriptor{font-size:11px!important}
 .skill-card .card-label{font-size:15px!important;margin-top:5px}.skill-card .card-note{font-size:9px!important}.skill-card .card-hint{font-size:8px!important;bottom:6px!important}
 .panel-stack{padding:10px}.stack-overview{min-height:20px;margin-bottom:5px}.stack-links a{min-height:35px;font-size:13px;padding:5px 7px}
}
@media(max-width:1000px),(hover:none),(max-height:600px){
 .portfolio-shell{grid-template-rows:min(280px,34svh) minmax(0,1fr) 56px;gap:12px}
 .skills-grid{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#13e4fb55 transparent;grid-template-rows:none;grid-auto-rows:max-content;align-content:start;gap:18px;padding:8px 3px}
 .skills-grid .skill-card:nth-child(n){height:auto;min-height:390px;justify-content:flex-start;padding-top:18px}
 .panel-stack{position:relative;inset:auto;align-self:stretch;margin-top:18px;visibility:visible;opacity:1;pointer-events:auto;padding:12px;border:0;border-top:1px solid var(--accent);background:linear-gradient(135deg,#0a1a24ee,#03080ded);transform:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
 .stack-overview{display:none}.panel-link:after{display:none}.skill-card .card-hint,.skill-card .mini-underline{display:none}
 .skill-card .skill-icon{width:60px;height:60px}.skill-card .card-label{font-size:16px!important;margin:8px 8px 0}
 .site-footer{gap:8px;justify-content:space-between}.site-footer .footer-stat,.site-footer .equalizer{display:none}.site-footer .brand-mark-image{width:auto}.brand-mark-image img{width:40px;height:36px}.brand-mark-image small{margin-left:7px}.footer-item{font-size:11px!important}
 .glitch-burst{inset:0;overflow:hidden}.name-block{top:27%;height:65%}.name-cyan{font-size:min(64px,16vw,9svh)}.name-magenta{font-size:min(72px,18vw,10svh);top:.83em}.descriptor{top:88%;font-size:min(10px,2.4vw)!important}.pager{top:99%}
}
@media(prefers-reduced-motion:reduce){
 .stage .name:before,.stage .name:after,.stage .hero-emblem,.stage .glitch-code,.stage .glitch-bit,.stage .glitch-burst:before,.stage .glitch-burst:after,.stage .card-code{animation:none!important}
}

/* Showcase identity lockup: a single-line name, role and platform rail. */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:28px}
.hero .name-block{position:relative;inset:auto;width:auto;max-width:100%;height:auto;transform:skewX(-1.5deg);display:flex;align-items:center;justify-content:center;gap:.15em;font-family:'Noto Sans Display ExtraCondensed Black','Noto Sans Display','Arial Narrow',Impact,sans-serif;font-weight:950;font-style:normal;font-size:clamp(44px,8.2vw,118px);line-height:.85;letter-spacing:.008em;white-space:nowrap;margin:0}
.hero .name{position:relative;inset:auto;transform:none;scale:none;font-size:inherit;line-height:inherit;color:transparent;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;mask-image:none}
.hero .name-cyan{background-image:repeating-linear-gradient(180deg,#ffffff35 0 1px,transparent 2px 8px),linear-gradient(180deg,#b8fbff -24%,#00e8ff 26%,#00aef2 72%,#006dc7 132%)}
.hero .name-magenta{background-image:repeating-linear-gradient(180deg,#ffffff35 0 1px,transparent 2px 8px),linear-gradient(180deg,#ffd3fb -20%,#ff49e2 28%,#ff13cf 72%,#a800c8 135%)}
.hero .name:before,.hero .name:after{background:inherit;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.hero .name:before{clip-path:polygon(0 14%,100% 14%,100% 20%,0 20%,0 61%,100% 61%,100% 66%,0 66%)}
.hero .name:after{clip-path:polygon(0 34%,100% 34%,100% 39%,0 39%,0 78%,100% 78%,100% 83%,0 83%)}
.role-lockup{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px}
.role-lockup strong{font:500 16px/1.2 'Courier New',monospace;letter-spacing:.34em;text-transform:uppercase;color:#f5f6f7}
.role-lockup>span{font:300 30px/1 'Courier New',monospace;color:var(--cyan);text-shadow:0 0 8px var(--cyan)}
.hero-stack{display:flex;align-items:center;justify-content:center;gap:13px;margin:13px 0 0;font:700 11px/1.3 'Courier New',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.hero-stack i{width:3px;height:3px;background:currentColor;box-shadow:0 0 6px currentColor}
.spectrum-cue{color:var(--cyan);font:24px/1 Arial;text-decoration:none;margin-top:9px;padding:0 15px}
@media(max-height:760px){.hero{padding-top:22px}.hero .name-block{font-size:min(8.2vw,13svh)}.role-lockup{margin-top:11px}.role-lockup strong{font-size:13px}.role-lockup>span{font-size:24px}.hero-stack{font-size:10px;margin-top:6px}.spectrum-cue{margin-top:3px;font-size:19px}}
@media(max-width:1000px){.hero{padding-top:36px}.hero .name-block{font-size:9vw}.role-lockup{gap:12px;margin-top:15px}.role-lockup strong{font-size:clamp(10px,2.5vw,15px);letter-spacing:.2em}.hero-stack{font-size:clamp(8px,1.7vw,11px);gap:7px;letter-spacing:.02em}.role-lockup>span{font-size:24px}.spectrum-cue{margin-top:5px;font-size:20px}.hero-emblem{width:65px;height:56px;left:0;top:0}}

.hero .micro{display:none}

/* Six separate packet signatures, used by boot and pointer/focus interaction. */
[data-effect="scan"]{--code-motion:packet-scan;--menu-motion:menu-scan;--burst-duration:.52s}
[data-effect="split"]{--code-motion:channel-split;--menu-motion:menu-split;--burst-duration:.44s}
[data-effect="rows"]{--code-motion:row-rebuild;--menu-motion:menu-rows;--burst-duration:.58s}
[data-effect="fold"]{--code-motion:holo-fold;--menu-motion:menu-fold;--burst-duration:.62s}
[data-effect="route"]{--code-motion:trace-route;--menu-motion:menu-route;--burst-duration:.49s}
[data-effect="pixels"]{--code-motion:pixel-lock;--menu-motion:menu-pixels;--burst-duration:.55s}
@keyframes packet-scan{0%,100%{opacity:0;transform:translateX(-25px)}15%,65%{opacity:.9;transform:translateX(22px)}35%{opacity:.3;transform:translateX(-8px)}}
@keyframes channel-split{0%,100%{opacity:0;transform:scaleX(.5)}12%,55%{opacity:.9;transform:translateX(var(--bit-shift)) skewX(18deg)}30%,75%{opacity:.4;transform:translateX(calc(var(--bit-shift) * -1)) skewX(-12deg)}}
@keyframes row-rebuild{0%,100%{opacity:0;transform:translateY(-28px)}18%{opacity:.8;transform:translateY(18px)}38%{opacity:.3;transform:translateY(-12px)}60%,80%{opacity:.9;transform:translateY(3px)}}
@keyframes holo-fold{0%,100%{opacity:0;transform:perspective(200px) rotateX(85deg)}20%,70%{opacity:.8;transform:perspective(200px) rotateX(-25deg) scaleX(1.15)}45%{opacity:.3;transform:perspective(200px) rotateX(35deg)}}
@keyframes trace-route{0%,100%{opacity:0;transform:translate(-25px,20px)}15%{opacity:1;transform:translate(15px,-12px)}35%{opacity:.3;transform:translate(15px,8px)}55%,80%{opacity:.8;transform:translate(-8px,-4px)}}
@keyframes pixel-lock{0%,100%{opacity:0;transform:scale(.1)}10%,40%{opacity:1;transform:scale(1.4,.4)}25%,65%{opacity:.3;transform:scale(.6,1.8)}80%{opacity:.9;transform:scale(1)}}
@keyframes menu-scan{0%{clip-path:inset(0 0 96%)}25%{clip-path:inset(0 0 52%)}45%{clip-path:inset(0 0 67%)}70%{clip-path:inset(0 0 18%)}100%{clip-path:inset(0)}}
@keyframes menu-split{0%{transform:translateX(-12px) scaleX(.5);opacity:.3}22%{transform:translateX(8px) scaleX(1);opacity:1}44%{transform:translateX(-5px);opacity:.5}70%,100%{transform:none;opacity:1}}
@keyframes menu-rows{0%{clip-path:inset(90% 0 0)}20%{clip-path:inset(60% 0 0);transform:translateY(8px)}43%{clip-path:inset(30% 0 0);transform:translateY(-5px)}65%,100%{clip-path:inset(0);transform:none}}
@keyframes menu-fold{0%{transform:perspective(600px) rotateX(78deg) scale(.8);opacity:.2}25%{transform:perspective(600px) rotateX(-12deg);opacity:.8}50%{transform:perspective(600px) rotateX(8deg);opacity:.5}80%,100%{transform:none;opacity:1}}
@keyframes menu-route{0%{clip-path:polygon(0 0,0 0,0 0);opacity:.3}25%{clip-path:polygon(0 0,80% 0,0 80%);opacity:1}48%{clip-path:polygon(0 0,100% 0,100% 30%,30% 100%,0 100%);opacity:.6}75%,100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
@keyframes menu-pixels{0%{transform:scale(.2,.15);opacity:.2}18%{transform:scale(.55,.9);opacity:.8}36%{transform:scale(.95,.45);opacity:.4}55%{transform:scale(.8,1);opacity:1}78%,100%{transform:none;opacity:1}}
[data-effect="split"] .glitch-burst:before{--ray-angle:180deg;left:80%;top:30%}
[data-effect="rows"] .glitch-burst:before{--ray-angle:90deg;left:12%;top:0}
[data-effect="fold"] .glitch-burst:before{--ray-angle:45deg;left:50%;top:20%}
[data-effect="route"] .glitch-burst:before{--ray-angle:-45deg;left:10%;top:85%}
[data-effect="pixels"] .glitch-bit{width:9px;height:9px}
.glitch-burst{inset:0;overflow:hidden}
.hero .name-block{gap:0;text-transform:none;font-size:clamp(42px,8.2vw,118px)}
.hero .name-magenta{margin-left:.025em}
.spectrum-cue{display:flex;align-items:center;justify-content:center}
@media(max-width:1000px){.hero .name-block{font-size:9vw}}
@media(max-height:760px) and (min-width:1001px){.hero .name-block{font-size:min(8.2vw,13svh)}}

/* Purposeful angular identity with full glyph metrics and a distinct P. */
@font-face{font-family:'Chakra Petch';src:url('assets/chakra-petch-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
.hero .name-block{font-family:'Chakra Petch',sans-serif;font-weight:700;font-style:normal;transform:none;line-height:1.18;letter-spacing:-.045em;font-size:clamp(42px,7.8vw,112px);overflow:visible}
.hero .name{line-height:1.18;padding-bottom:.07em;margin-bottom:-.07em;-webkit-text-stroke:0;overflow:visible}
.hero .name-purple{background-image:linear-gradient(180deg,#e1caff,#ac7bff 50%,#8754eb)}
.hero .name-dot{background-image:linear-gradient(#ffc179,#ff884d);margin:0 .015em}
.hero .name-magenta{margin-left:0}
.role-lockup{margin-top:4px}
@media(max-width:1000px){.hero .name-block{font-size:8.6vw}.role-lockup{margin-top:4px}}
@media(max-height:760px) and (min-width:1001px){.hero .name-block{font-size:min(7.8vw,11.5svh)}}

.skill-card .card-label{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:1.2px!important}
/* Original 2D technical wireframes: consistent primary/detail/guide weights. */
.skill-card .wireframe-icon{width:clamp(72px,12svh,112px);height:clamp(72px,12svh,112px);flex-shrink:0;margin-top:0;transform:none!important;fill:none;stroke:color-mix(in srgb,var(--accent) 80%,white);stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;filter:none}
.wireframe-icon .guide{stroke-width:1;opacity:.23}
.wireframe-icon .detail{stroke-width:1.15;opacity:.8}
.wireframe-icon .bright{stroke:color-mix(in srgb,var(--accent) 65%,white);stroke-width:2}
.wireframe-icon .node{fill:var(--accent);stroke:none}
@media(max-width:1000px),(hover:none),(max-height:600px){.skill-card .wireframe-icon{width:88px;height:88px}}