:root{--bg:#030405;--cyan:#13e4fb;--magenta:#ff08df;--green:#47ff55;--white:#f4f5f6}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030405;color:var(--white);font-family:Arial,Helvetica,sans-serif}
body{position:relative}
.stage{position:absolute;left:0;top:0;width:1586px;height:992px;overflow:hidden;transform-origin:0 0;background:radial-gradient(ellipse at 50% 0,rgba(12,18,25,.22),transparent 47%),linear-gradient(#020304,#050506 53%,#030405 100%);isolation:isolate}
.fx-canvas{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:screen}.smoke-canvas{left:0;top:0;width:1586px;height:390px;opacity:.12;filter:blur(12px) saturate(1.12) contrast(.92)}
.ambient{position:absolute;z-index:0;top:-80px;width:680px;height:410px;border-radius:50%;filter:blur(74px);mix-blend-mode:screen;opacity:.17;pointer-events:none}.ambient-cyan{left:-150px;background:radial-gradient(circle,rgba(0,158,255,.86),transparent 64%)}.ambient-magenta{right:-100px;background:radial-gradient(circle,rgba(242,0,255,.80),transparent 66%)}
.grain{position:absolute;z-index:12;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.stage:after{content:"";position:absolute;z-index:11;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.016) 0,rgba(255,255,255,.016) 1px,transparent 1px,transparent 4px);opacity:.16;mix-blend-mode:overlay}
.filters{position:absolute}
.portfolio-shell{position:absolute;z-index:3;inset:0}
.edge-code{position:absolute;z-index:4;top:20px;display:flex;flex-direction:column;gap:6px}.edge-code-left{left:18px}.edge-code-right{right:18px}.edge-code i{display:block;width:3px;height:12px;background:currentColor;box-shadow:0 0 8px currentColor;opacity:.88}.edge-code i:nth-child(2n){height:4px}.edge-code i:nth-child(3n){width:7px}.edge-code-left{color:var(--cyan)}.edge-code-right{color:var(--magenta)}
.ambient-beam{position:absolute;z-index:1;pointer-events:none;height:1px;transform-origin:0 50%;opacity:.28;mix-blend-mode:screen;background:linear-gradient(90deg,transparent,currentColor 7%,currentColor 34%,transparent 100%);box-shadow:0 0 5px currentColor,0 0 15px color-mix(in srgb,currentColor 55%,transparent)}.ambient-beam:after{content:"";position:absolute;left:4%;right:0;top:-8px;height:16px;background:linear-gradient(90deg,currentColor,transparent 72%);filter:blur(11px);opacity:.28}.beam-a{left:660px;top:602px;width:610px;color:var(--magenta);transform:rotate(-11deg)}.beam-b{left:80px;top:710px;width:580px;color:var(--green);transform:rotate(9deg)}.beam-c{left:695px;top:650px;width:560px;color:var(--cyan);transform:rotate(42deg);opacity:.24}

.hero{position:absolute;left:0;top:0;width:1586px;height:345px;text-align:center}
.name-block{position:absolute;left:50%;top:84px;margin:0;transform:translateX(-50%);width:760px;height:195px;font-family:Impact,'Arial Black',Arial,sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;line-height:.79;letter-spacing:5px}
.name{position:absolute;left:50%;display:block;white-space:nowrap;filter:url(#textWarp) drop-shadow(0 0 7px currentColor) drop-shadow(0 0 18px color-mix(in srgb,currentColor 55%,transparent));text-shadow:2px 0 0 rgba(255,255,255,.12);transform-origin:50% 50%}
.name:before,.name:after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;pointer-events:none}.name:before{clip-path:polygon(0 17%,100% 17%,100% 29%,0 29%);transform:translateX(-7px);opacity:.62;text-shadow:6px 0 0 currentColor,-2px 0 0 rgba(255,255,255,.4)}.name:after{clip-path:polygon(0 62%,100% 62%,100% 72%,0 72%);transform:translateX(8px);opacity:.67;text-shadow:-5px 0 0 currentColor}
.name-cyan{top:0;color:#1edff4;font-size:102px;transform:translateX(-50%) scaleX(1.29) skewX(-2deg);mask-image:linear-gradient(#000,#000)}
.name-magenta{top:86px;color:#f50cdd;font-size:112px;transform:translateX(-50%) scaleX(1.17) skewX(-2deg)}
.name-cyan::selection,.name-magenta::selection{background:transparent}
.descriptor{position:absolute;top:273px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;font:500 12px/1.1 'Courier New',monospace;letter-spacing:5.3px;color:#d5d8dc;text-transform:uppercase;text-shadow:0 0 10px rgba(255,255,255,.28)}.descriptor b{font-weight:500;color:var(--cyan);margin:0 11px;text-shadow:0 0 9px var(--cyan)}
.pager{position:absolute;top:320px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.pager i{display:block;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.hero-hud{position:absolute;top:40px;width:255px;height:78px;color:rgba(10,222,248,.55)}.hud-left{left:477px}.hud-right{right:477px}.hero-hud:before,.hero-hud:after{content:"";position:absolute;background:currentColor;box-shadow:0 0 6px currentColor}.hero-hud:before{top:0;width:54px;height:1px}.hero-hud:after{top:0;width:1px;height:57px}.hud-left:before,.hud-left:after{left:0}.hud-right:before,.hud-right:after{right:0}.hero-hud span{position:absolute;top:12px;width:38px;height:1px;background:currentColor;box-shadow:0 6px 0 currentColor,0 12px 0 currentColor}.hud-left span{left:14px}.hud-right span{right:14px}.hero-hud b{position:absolute;top:23px;width:2px;height:2px;background:currentColor;box-shadow:8px 0 currentColor,16px 0 currentColor}.hud-left b{left:56px}.hud-right b{right:56px}.hero-hud i{position:absolute;top:34px;width:70px;height:25px;border-top:1px solid rgba(15,220,249,.25)}.hud-left i{left:65px;transform:skewX(-38deg)}.hud-right i{right:65px;transform:skewX(38deg)}
.micro{position:absolute;top:47px;font:700 7px/1 monospace;letter-spacing:2px;color:rgba(18,224,247,.62)}.micro-left{left:547px}.micro-right{right:547px}

.skills-grid{position:absolute;left:0;top:0;width:1586px;height:850px;display:block}.skill-card:nth-child(1),.skill-card:nth-child(5){left:109px;width:326px}.skill-card:nth-child(2),.skill-card:nth-child(6){left:466px;width:309px}.skill-card:nth-child(3),.skill-card:nth-child(7){left:809px;width:309px}.skill-card:nth-child(4),.skill-card:nth-child(8){left:1144px;width:315px}.skill-card:nth-child(-n+4){top:371px}.skill-card:nth-child(n+5){top:621px}
.skill-card{--accent:var(--cyan);position:absolute;width:306px;height:216px;color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;transform-style:preserve-3d;will-change:transform;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 5%,transparent),transparent 34%),radial-gradient(circle at 50% 52%,rgba(15,32,44,.24),transparent 62%),linear-gradient(135deg,rgba(6,12,16,.90),rgba(2,3,5,.96));box-shadow:inset 0 0 55px rgba(0,0,0,.74),0 0 14px rgba(0,0,0,.95);transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}
.skill-card.cyan{--accent:var(--cyan)}.skill-card.magenta{--accent:var(--magenta)}.skill-card.green{--accent:var(--green)}
.skill-card:before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) 0 0/78px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 108px 0/60px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 204px 0/102px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/110px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 139px 100%/167px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/1px 209px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0/1px 64px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 87px/1px 129px no-repeat;filter:drop-shadow(0 0 3px var(--accent));opacity:.76}
.skill-card:after{content:"";position:absolute;z-index:1;inset:1px;pointer-events:none;opacity:.78;background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.015) 13px 14px,transparent 14px 29px),linear-gradient(116deg,transparent 0 43%,color-mix(in srgb,var(--accent) 3%,transparent) 48%,transparent 54%),radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 32%)}
.skill-card:hover{z-index:10;filter:brightness(1.12);box-shadow:inset 0 0 54px rgba(0,0,0,.65),0 0 22px color-mix(in srgb,var(--accent) 22%,transparent)}
.card-index{position:absolute;z-index:4;left:15px;top:12px;color:var(--accent);font:700 15px/1 'Courier New',monospace;letter-spacing:1px;text-shadow:0 0 9px var(--accent)}
.card-code{position:absolute;z-index:2;top:18px;width:44%;font:7px/1.5 'Courier New',monospace;color:var(--accent);opacity:.15;white-space:nowrap;overflow:hidden}.code-left{left:14px;text-align:left}.code-right{right:14px;text-align:right}
.skill-icon{position:relative;z-index:4;width:103px;height:103px;margin-top:3px;stroke:var(--accent);fill:none;stroke-width:3;overflow:visible;filter:drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 11px color-mix(in srgb,var(--accent) 44%,transparent));transform:translateY(17px) translateZ(14px) scale(1.19)}
.skill-icon text{fill:var(--accent);stroke:none;font:700 25px Arial,Helvetica,sans-serif}.skill-icon.ts rect{fill:rgba(0,145,230,.25);stroke:rgba(0,174,246,.62);filter:drop-shadow(0 0 8px #008dff)}.skill-icon.ts text{font-size:42px}.skill-icon.webgl{stroke-dasharray:2.3 5}.skill-icon.webgl text{font-size:20px}.skill-icon.node text{font-size:38px}.skill-icon.next{stroke-width:2.25}.skill-icon.gsap{stroke-width:1.5}.skill-icon.api{stroke-width:4}
.card-label{position:relative;z-index:4;margin-top:7px;color:#f5f5f6;font:600 16px/1 'Courier New',monospace;letter-spacing:2.7px;text-shadow:0 0 5px rgba(255,255,255,.25);transform:translateY(17px) translateZ(12px)}.mini-underline{position:relative;z-index:4;width:34px;height:2px;background:var(--accent);margin-top:9px;box-shadow:0 0 7px var(--accent);transform:translateY(17px) translateZ(10px)}
.edge-fragment{position:absolute;z-index:6;display:block;background:var(--accent);box-shadow:0 0 5px var(--accent);pointer-events:none}.edge-fragment.h{height:1px}.edge-fragment.v{width:1px}.edge-fragment.block{width:7px;height:3px}.edge-fragment.pixel{width:3px;height:3px}

.laser-burst{position:absolute;z-index:8;width:1px;height:1px;color:var(--accent);pointer-events:none;mix-blend-mode:screen}.skill-card[data-burst="r"] .laser-burst{right:24%;top:56%}.skill-card[data-burst="rb"] .laser-burst{right:13%;top:66%}.skill-card[data-burst="l"] .laser-burst{left:-2px;top:52%}
.laser-burst:before{content:"";position:absolute;left:-48px;top:-48px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 2%,color-mix(in srgb,var(--accent) 90%,white) 3%,color-mix(in srgb,var(--accent) 38%,transparent) 11%,color-mix(in srgb,var(--accent) 13%,transparent) 28%,transparent 62%);filter:blur(1.3px);opacity:.88}.burst-core{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff,0 0 22px var(--accent),0 0 52px var(--accent),0 0 78px color-mix(in srgb,var(--accent) 48%,transparent)}

.site-footer{position:absolute;left:43px;top:908px;width:1500px;height:91px;border-top:1px solid rgba(126,162,180,.18);display:grid;grid-template-columns:235px 330px 345px 355px 235px;align-items:center;color:#9da2a8;font-size:12px}.site-footer>*+*{border-left:1px solid rgba(255,255,255,.11)}
.brand-mark{position:relative;height:34px;display:flex;align-items:center;padding-left:7px;font:900 italic 31px/1 Impact,Arial Black,sans-serif;letter-spacing:-8px}.brand-mark span:first-child{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}.brand-mark span:nth-child(2){color:var(--magenta);text-shadow:0 0 10px var(--magenta)}.brand-mark em{position:absolute;left:9px;top:14px;width:34px;height:1px;background:#030405;box-shadow:0 5px 0 #030405;transform:skewX(-30deg)}
.footer-item{height:30px;display:flex;align-items:center;gap:13px;padding-left:66px;white-space:nowrap}.ficon{display:inline-flex;align-items:center;justify-content:center;color:var(--cyan);text-shadow:0 0 8px var(--cyan)}.ficon.mail{width:20px;height:14px;border:1px solid var(--cyan);font-size:0;transform:skewX(-2deg)}.ficon.mail:after{content:"";width:9px;height:9px;border-left:1px solid var(--cyan);border-bottom:1px solid var(--cyan);transform:rotate(-45deg) translate(1px,-1px)}.ficon.gh{width:23px;height:23px;color:#f2f2f2;font-size:16px;text-shadow:0 0 5px #fff}.ficon.in{width:20px;height:20px;background:var(--cyan);color:#010304;font:bold 14px/20px Arial;text-shadow:none}
.equalizer{height:31px;display:flex;align-items:center;justify-content:center;gap:15px}.bars{height:26px;display:flex;align-items:flex-end;gap:4px}.bars i{display:block;width:2px;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.bars i:nth-child(1){height:13px}.bars i:nth-child(2){height:25px}.bars i:nth-child(3){height:18px}.lines{display:flex;flex-direction:column;gap:5px}.lines b{display:block;height:1px;width:37px;background:var(--magenta);box-shadow:0 0 4px var(--magenta)}.lines b:nth-child(2){width:50px;opacity:.6}.lines b:nth-child(3){width:29px;opacity:.35}

@media (max-width:760px){html,body{overflow:auto}.stage.mobile{position:relative;width:100%;height:auto;min-height:100vh;transform:none!important;left:0!important;top:0!important;padding-bottom:40px}.stage.mobile .smoke-canvas{width:100%;height:320px}.stage.mobile .hero{position:relative;width:100%;height:310px}.stage.mobile .name-block{top:70px;width:100%;transform:none;left:0}.stage.mobile .name-cyan{font-size:67px}.stage.mobile .name-magenta{font-size:72px;top:70px}.stage.mobile .descriptor{top:235px;font-size:8px;letter-spacing:2px}.stage.mobile .hero-hud,.stage.mobile .micro{display:none}.stage.mobile .skills-grid{position:relative;left:auto;top:auto;width:auto;margin:0 16px;display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:18px}.stage.mobile .skill-card{width:100%;height:210px}.stage.mobile .site-footer{position:relative;left:auto;top:auto;width:auto;height:auto;margin:38px 16px 0;display:flex;flex-direction:column;align-items:stretch}.stage.mobile .site-footer>*{border-left:0!important;border-top:1px solid rgba(255,255,255,.1);padding:18px 10px}.stage.mobile .brand-mark{display:none}.stage.mobile .footer-item{padding-left:10px}.stage.mobile .equalizer{display:none}}
/* High-frequency smoke texture is a real composited asset; the procedural canvas underneath supplies low-frequency volume. */
.smoke-texture{position:absolute;z-index:1;top:0;height:360px;pointer-events:none;mix-blend-mode:screen;object-fit:fill;filter:saturate(1.12) contrast(1.08);will-change:transform;opacity:.98}
.smoke-texture-cyan{left:0;width:620px;transform-origin:35% 45%}
.smoke-texture-magenta{right:0;width:640px;transform-origin:65% 45%}

.skill-card:nth-child(6) .laser-burst{right:26%}.skill-card:nth-child(8) .laser-burst{right:28%}.skill-card:nth-child(4) .laser-burst{right:24%}
.digital-speck{position:absolute;z-index:2;background:var(--accent);box-shadow:0 0 5px var(--accent);pointer-events:none}
.text-tear{position:absolute;z-index:8;height:1px;background:#030405;box-shadow:4px 0 0 currentColor,-5px 0 0 rgba(2,3,5,.9);opacity:.95;pointer-events:none}

.skill-card:hover .laser-burst:before{opacity:1.15;transform:scale(1.12)}
@media (max-width:760px){
  .stage.mobile 
  .stage.mobile .smoke-texture{opacity:.58;height:300px}
  .stage.mobile .smoke-texture-cyan{width:76%;left:-18%}
  .stage.mobile .smoke-texture-magenta{width:78%;right:-18%}
}
@media (prefers-reduced-motion:reduce){
  .smoke-texture-cyan,.smoke-texture-magenta{animation:none!important}
  .skill-card{transition:none!important}
}

/* Reactive scene layer. This only re-energizes the existing smoke / glitch / laser vocabulary. */
.interaction-canvas{position:absolute;z-index:9;inset:0;width:1586px;height:992px;pointer-events:none;mix-blend-mode:screen;opacity:.94}
.stage{--scene-energy:0;--scene-x:0;--scene-y:0;--beam-drift:0deg}
.smoke-texture{filter:saturate(calc(1.12 + var(--scene-energy) * .22)) contrast(calc(1.08 + var(--scene-energy) * .08)) brightness(calc(1 + var(--scene-energy) * .07))}

.ambient-beam{transform:rotate(calc(var(--beam-angle) + var(--beam-drift)));will-change:transform,opacity,filter;filter:brightness(calc(1 + var(--scene-energy) * .6))}
.beam-a{--beam-angle:-11deg}.beam-b{--beam-angle:9deg}.beam-c{--beam-angle:42deg}

.skill-card{--relay-fill:transparent;--relay-shadow:transparent;--relay-x:50%;--relay-y:50%;--hover-energy:0;--burst-lean:0deg;--burst-scale:1;--content-shift-x:0px;--content-shift-y:0px;background:radial-gradient(circle at var(--relay-x) var(--relay-y),var(--relay-fill),transparent 29%),radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 5%,transparent),transparent 34%),radial-gradient(circle at 50% 52%,rgba(15,32,44,.24),transparent 62%),linear-gradient(135deg,rgba(6,12,16,.90),rgba(2,3,5,.96));box-shadow:inset 0 0 55px rgba(0,0,0,.74),0 0 14px rgba(0,0,0,.95),0 0 34px var(--relay-shadow)}
.skill-card .skill-icon,.skill-card .card-label,.skill-card .mini-underline{will-change:transform,filter}
.skill-card.is-active .skill-icon{filter:drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 17px color-mix(in srgb,var(--accent) 58%,transparent));transform:translate3d(var(--content-shift-x),calc(17px + var(--content-shift-y)),24px) scale(1.205)}
.skill-card.is-active .card-label{transform:translate3d(calc(var(--content-shift-x) * .55),calc(17px + var(--content-shift-y) * .55),20px)}
.skill-card.is-active .mini-underline{transform:translate3d(calc(var(--content-shift-x) * .35),calc(17px + var(--content-shift-y) * .35),16px) scaleX(calc(1 + var(--hover-energy) * .35))}
.laser-burst{transform:rotate(var(--burst-lean)) scale(var(--burst-scale));transform-origin:0 0;transition:transform 100ms linear;will-change:transform}
.skill-card.is-active .laser-burst:before{opacity:calc(.88 + var(--hover-energy) * .38);filter:blur(calc(1.3px - var(--hover-energy) * .3px));transform:scale(calc(1 + var(--hover-energy) * .22))}
.skill-card.is-active .burst-core{box-shadow:0 0 10px #fff,0 0 calc(22px + var(--hover-energy) * 14px) var(--accent),0 0 calc(52px + var(--hover-energy) * 35px) var(--accent),0 0 90px color-mix(in srgb,var(--accent) 60%,transparent)}

.skill-card.glitch-hit:before{animation:borderKick 150ms steps(2,end) 1}
.skill-card.glitch-hit .skill-icon{animation:iconKick 145ms steps(2,end) 1}
.skill-card.glitch-hit .card-label{animation:labelKick 125ms steps(2,end) 1}
.name.glitch-hit:before{animation:nameSliceBefore 120ms steps(2,end) 1}
.name.glitch-hit:after{animation:nameSliceAfter 145ms steps(2,end) 1}
.name.glitch-hit{animation:nameCoreKick 120ms steps(2,end) 1}
@keyframes borderKick{0%{clip-path:inset(0)}25%{clip-path:polygon(0 0,100% 0,100% 17%,91% 17%,91% 22%,100% 22%,100% 100%,0 100%)}55%{clip-path:polygon(0 0,100% 0,100% 68%,82% 68%,82% 73%,100% 73%,100% 100%,0 100%)}100%{clip-path:inset(0)}}
@keyframes iconKick{0%,100%{translate:0 0}35%{translate:5px 0;filter:drop-shadow(-6px 0 4px var(--accent))}62%{translate:-3px 1px}}
@keyframes labelKick{0%,100%{clip-path:inset(0);translate:0 0}40%{clip-path:inset(0 0 55% 0);translate:-4px 0}65%{clip-path:inset(55% 0 0 0);translate:4px 0}}
@keyframes nameCoreKick{0%,100%{filter:url(#textWarp) drop-shadow(0 0 7px currentColor) drop-shadow(0 0 18px color-mix(in srgb,currentColor 55%,transparent))}40%{filter:url(#textWarp) drop-shadow(6px 0 2px currentColor) drop-shadow(-5px 0 3px rgba(255,255,255,.35))}}
@keyframes nameSliceBefore{0%,100%{transform:translateX(-7px)}45%{transform:translateX(-15px) skewX(-5deg)}}
@keyframes nameSliceAfter{0%,100%{transform:translateX(8px)}50%{transform:translateX(17px) skewX(4deg)}}

.edge-code i{transform-origin:50% 50%;will-change:transform,opacity}
.equalizer .bars i,.equalizer .lines b{transform-origin:50% 100%;will-change:transform,opacity,filter}

@media (max-width:760px){.stage.mobile .interaction-canvas{display:none}.stage.mobile{--smoke-x:0px!important;--smoke-y:0px!important;--laser-x:0px!important;--laser-y:0px!important}.stage.mobile .skill-card{--relay-fill:transparent!important;--relay-shadow:transparent!important}}
@media (prefers-reduced-motion:reduce){.interaction-canvas{display:none!important}.ambient-beam{filter:none!important}.skill-card,.laser-burst,.skill-icon,.card-label,.mini-underline{animation:none!important;transition:none!important}}

/* ========================================================================== */
/* MOTION REFINEMENT V2 — quieter idle, intro ignition, autonomous smoke      */
/* ========================================================================== */


/* The WebGL smoke canvas is now the active motion surface. The extracted
   textures remain as a very faint fallback/detail bed and never follow input. */
.smoke-canvas{z-index:1;opacity:.96;filter:saturate(1.12) contrast(1.06);mix-blend-mode:screen;will-change:contents}
.smoke-texture{z-index:0;opacity:.28;filter:saturate(1.04) contrast(1.04);mix-blend-mode:screen;will-change:transform,opacity}
.stage.smoke-webgl-ready .smoke-texture{opacity:.105;filter:saturate(1.03) contrast(1.02) blur(.35px)}
.smoke-texture-cyan{animation:smokeFallbackC 24s cubic-bezier(.42,0,.58,1) infinite alternate!important;transform-origin:38% 52%}
.smoke-texture-magenta{animation:smokeFallbackM 27s cubic-bezier(.42,0,.58,1) infinite alternate!important;transform-origin:62% 50%}
@keyframes smokeFallbackC{
  0%{transform:translate3d(-7px,3px,0) rotate(-.35deg) scale(1.018,1.01)}
  38%{transform:translate3d(3px,-5px,0) rotate(.18deg) scale(1.035,1.027)}
  72%{transform:translate3d(9px,1px,0) rotate(.43deg) scale(1.022,1.04)}
  100%{transform:translate3d(1px,-8px,0) rotate(-.12deg) scale(1.043,1.018)}
}
@keyframes smokeFallbackM{
  0%{transform:translate3d(8px,-4px,0) rotate(.34deg) scale(1.018,1.028)}
  34%{transform:translate3d(-1px,4px,0) rotate(-.22deg) scale(1.039,1.018)}
  69%{transform:translate3d(-9px,-3px,0) rotate(-.42deg) scale(1.025,1.041)}
  100%{transform:translate3d(2px,7px,0) rotate(.16deg) scale(1.046,1.02)}
}

/* Hero typography: a sharp primary glyph with restrained bloom behind it.
   Glitch copies are narrow accents, not another fuzzy copy of the whole word. */
.name-block{font-family:'Arial Black',Impact,Arial,sans-serif;font-style:italic;letter-spacing:1.5px}
.name{
  filter:none!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  -webkit-text-stroke:.18px rgba(255,255,255,.22);
  text-shadow:
    0 0 1px rgba(255,255,255,.34),
    0 0 5px color-mix(in srgb,currentColor 78%,transparent),
    0 0 14px color-mix(in srgb,currentColor 31%,transparent),
    0 7px 18px rgba(0,0,0,.58);
}
.name:before,.name:after{opacity:.34;filter:none;text-shadow:none}
.name:before{clip-path:polygon(0 20%,100% 20%,100% 25%,0 25%);transform:translateX(-3px);text-shadow:3px 0 0 currentColor}
.name:after{clip-path:polygon(0 67%,100% 67%,100% 72%,0 72%);transform:translateX(4px);text-shadow:-3px 0 0 currentColor}
.name-cyan{transform:translateX(-50%) scaleX(1.22) skewX(-2deg)}
.name-magenta{transform:translateX(-50%) scaleX(1.12) skewX(-2deg)}
.text-tear{opacity:.70;box-shadow:2px 0 0 currentColor,-3px 0 0 rgba(2,3,5,.9)}

/* Dormant by default. The parent burst fades in/out from a single energy
   variable, allowing the DOM rays, origin core and specks to decay together. */
.skill-card{--burst-visible:0}
.laser-burst{
  opacity:var(--burst-visible)!important;
  transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .11s linear;
  filter:brightness(calc(.88 + var(--burst-visible) * .26));
}
.laser-burst:before,.skill-card:hover .laser-burst:before{opacity:.92;transform:none}
.skill-card.is-active .laser-burst:before{opacity:1;transform:scale(calc(1 + var(--hover-energy) * .15))}

/* Keep the panel reaction richer than idle, but let it recede rather than snap. */
.skill-card .skill-icon,.skill-card .card-label,.skill-card .mini-underline{transition:transform .24s cubic-bezier(.16,1,.3,1),filter .2s ease}
.skill-card.is-active .skill-icon{transform:translate3d(var(--content-shift-x),calc(17px + var(--content-shift-y)),24px) scale(1.202)}
.skill-card.is-active .card-label{transform:translate3d(calc(var(--content-shift-x) * .52),calc(17px + var(--content-shift-y) * .52),20px)}
.skill-card.is-active .mini-underline{transform:translate3d(calc(var(--content-shift-x) * .32),calc(17px + var(--content-shift-y) * .32),16px) scaleX(calc(1 + var(--hover-energy) * .31))}

/* Crisp glitch impulse for the hero — no displacement filter on the core. */
@keyframes nameCoreKick{
  0%,100%{transform:translateX(-50%) var(--name-extra,translateZ(0));filter:none}
  38%{filter:drop-shadow(4px 0 0 currentColor) drop-shadow(-3px 0 0 rgba(255,255,255,.28))}
  64%{filter:drop-shadow(-2px 0 0 currentColor)}
}
/* Preserve authored transforms while the core flashes; pseudo slices carry
   most of the glitch so readability does not collapse. */
.name.glitch-hit{animation:none!important}
.name.glitch-hit:before{animation:nameSliceBeforeClean 115ms steps(2,end) 1}
.name.glitch-hit:after{animation:nameSliceAfterClean 135ms steps(2,end) 1}
@keyframes nameSliceBeforeClean{0%,100%{transform:translateX(-3px)}45%{transform:translateX(-9px) skewX(-3deg)}}
@keyframes nameSliceAfterClean{0%,100%{transform:translateX(4px)}52%{transform:translateX(11px) skewX(3deg)}}

@media (prefers-reduced-motion:reduce){
  .smoke-texture-cyan,.smoke-texture-magenta{animation:none!important}
  .smoke-canvas{opacity:.58}
  .laser-burst{opacity:0!important}
}

/* SVG turbulence is the no-WebGL fallback, so even conservative/headless
   browsers get real deformation instead of a rigid translating bitmap. */
.stage:not(.smoke-webgl-ready) .smoke-texture-cyan{filter:url(#smokeFlowC) saturate(1.09) contrast(1.05)}
.stage:not(.smoke-webgl-ready) .smoke-texture-magenta{filter:url(#smokeFlowM) saturate(1.09) contrast(1.05)}


/* Tyler Pflanz identity refinements */
/* TYLER is one glyph wider than the original first name; keep the hero balance crisp. */
.name-cyan{font-size:98px;scale:.98 1}
@media (max-width:760px){.stage.mobile .name-cyan{font-size:63px;scale:.98 1}}


/* ========================================================================== */
/* TYLER PFLANZ — CAPABILITY WALL                                             */
/* Personal profile, not a sales funnel.                                      */
/* ========================================================================== */
.descriptor{letter-spacing:4.5px}
.micro-left,.micro-right{font-size:7.2px;letter-spacing:1.7px}

/* Secondary card copy stays live DOM text for crisp rendering. */
.card-note{
  position:relative;z-index:4;margin-top:7px;color:rgba(224,232,237,.52);
  font:600 6.8px/1 'Courier New',monospace;letter-spacing:1.25px;white-space:nowrap;
  transform:translateY(3px) translateZ(10px);transition:opacity .2s ease,transform .2s ease;
}
.skill-card.is-active .card-note{opacity:.78;transform:translate3d(calc(var(--content-shift-x) * .28),calc(3px + var(--content-shift-y) * .28),14px)}

.skill-icon text{font-family:Arial,Helvetica,sans-serif;font-weight:900;fill:var(--accent);stroke:none}

/* Footer is identity/context only: no fake social handles, no conversion CTA. */
.site-footer{grid-template-columns:235px 330px 345px 355px 235px}
.footer-stat{color:#a7afb6;letter-spacing:.9px;font:600 10px/1 'Courier New',monospace}
.ficon.code,.ficon.grid{width:24px;color:var(--cyan);font:700 14px/1 'Courier New',monospace;text-shadow:0 0 8px var(--cyan)}
.footer-item:nth-child(3) .ficon{color:var(--magenta);text-shadow:0 0 8px var(--magenta)}

@media (max-width:760px){
  .stage.mobile .descriptor{font-size:7.8px;letter-spacing:1.55px}
  .stage.mobile .card-note{font-size:6.5px}
}


/* ========================================================================== */
/* V3 — SYSTEM PROJECTION / UNCLIPPED LASER ARCHITECTURE                       */
/* ========================================================================== */
/* Generated panel screenshots are no longer used at runtime. The source of
   truth is DOM/SVG plus the stage-level Canvas light field, so no baked beam can
   ever be clipped by a card rectangle. */
.interaction-canvas{z-index:2!important;opacity:1!important}
.portfolio-shell{z-index:3}
.skill-card{overflow:visible!important}
.laser-burst:before{opacity:calc(var(--burst-visible) * .86)!important}
.laser-burst .burst-core{opacity:var(--burst-visible)!important}

/* 3 x 2 capability architecture. The larger panels make the broad systems read
   as intentional categories instead of a résumé-like logo wall. */
.skills-grid{height:860px}
.skill-card:nth-child(1),.skill-card:nth-child(4){left:108px;width:410px}
.skill-card:nth-child(2),.skill-card:nth-child(5){left:588px;width:410px}
.skill-card:nth-child(3),.skill-card:nth-child(6){left:1068px;width:410px}
.skill-card:nth-child(-n+3){top:371px}
.skill-card:nth-child(n+4){top:621px}
.skill-card{height:216px;background:
  radial-gradient(circle at var(--relay-x) var(--relay-y),var(--relay-fill),transparent 28%),
  radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 6%,transparent),transparent 35%),
  repeating-linear-gradient(90deg,transparent 0 19px,rgba(255,255,255,.012) 19px 20px,transparent 20px 39px),
  linear-gradient(135deg,rgba(5,10,14,.94),rgba(2,3,5,.985));
  box-shadow:inset 0 0 64px rgba(0,0,0,.78),0 0 18px rgba(0,0,0,.94),0 0 34px var(--relay-shadow)}
.skill-card:before{background:
 linear-gradient(var(--accent),var(--accent)) 0 0/96px 1px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 144px 0/72px 1px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 278px 0/132px 1px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 0 100%/134px 1px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 188px 100%/222px 1px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 0 0/1px 209px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 100% 0/1px 72px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 100% 99px/1px 117px no-repeat;
 opacity:.76}
.skill-card:after{opacity:.72;background:
 linear-gradient(116deg,transparent 0 43%,color-mix(in srgb,var(--accent) 3%,transparent) 48%,transparent 54%),
 radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 29%),
 repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.007) 4px 5px)}
.card-code{width:39%;font-size:7px;opacity:.12}
.skill-icon{width:95px;height:95px;transform:translateY(1px) translateZ(14px) scale(1.02)}
.skill-icon text{font-family:Arial,Helvetica,sans-serif;font-weight:900;fill:var(--accent);stroke:none}
.javascript-mark{stroke-width:2.4}.javascript-mark text{font-size:42px}
.commerce-mark,.interactive-mark,.integration-mark,.performance-mark{stroke-width:2.8}
.backend-mark{stroke-width:2.5}.backend-mark text{font-size:11px;letter-spacing:.3px}
.card-label{font-size:15px;letter-spacing:2.35px;transform:translateY(1px) translateZ(12px)}
.card-note{font-size:7px;letter-spacing:1.15px;transform:translateY(1px) translateZ(10px)}
.mini-underline{transform:translateY(1px) translateZ(10px)}
.card-hint{position:absolute;z-index:5;right:13px;bottom:10px;color:var(--accent);font:700 6px/1 'Courier New',monospace;letter-spacing:.85px;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;text-shadow:0 0 8px var(--accent)}
.skill-card:is(:hover,.is-active,.is-pinned) .card-hint{opacity:.55;transform:none}
.skill-card.is-pinned{z-index:14;filter:brightness(1.12)}

/* Corruption bits are event-only now: boot sequence, hover/focus, then darkness. */
.edge-fragment,.digital-speck{opacity:0;will-change:transform,opacity,filter}

/* Holographic stack projection. It is visual taxonomy, not a sales CTA. */
.stack-projection{position:absolute;z-index:18;left:0;top:0;width:520px;height:178px;pointer-events:none;opacity:0;transform:translate3d(0,10px,0) scale(.965);transition:opacity .16s ease,transform .22s cubic-bezier(.16,1,.3,1);color:var(--projection-accent,var(--cyan));filter:drop-shadow(0 0 18px color-mix(in srgb,var(--projection-accent) 22%,transparent))}
.stack-projection.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.projection-frame{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--projection-accent) 55%,transparent);background:linear-gradient(180deg,rgba(2,6,9,.88),rgba(2,4,6,.70));box-shadow:inset 0 0 45px color-mix(in srgb,var(--projection-accent) 5%,transparent);clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.projection-frame:before,.projection-frame:after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--projection-accent),transparent);opacity:.55;animation:projectionScan 1.7s linear infinite}
.projection-frame:before{top:24px}.projection-frame:after{bottom:24px;animation-delay:-.85s}
@keyframes projectionScan{0%{transform:translateX(-45%);opacity:0}20%{opacity:.45}80%{opacity:.45}100%{transform:translateX(45%);opacity:0}}
.projection-kicker{position:absolute;left:18px;top:15px;font:700 6.5px/1 'Courier New',monospace;letter-spacing:1.6px;color:var(--projection-accent);opacity:.7}
.projection-title{position:absolute;left:18px;top:34px;color:#f5f7f8;font:700 13px/1 'Courier New',monospace;letter-spacing:2.3px;text-shadow:0 0 10px color-mix(in srgb,var(--projection-accent) 42%,transparent)}
.projection-items{position:absolute;left:18px;right:18px;top:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px 10px}
.projection-chip{position:relative;height:32px;border:1px solid color-mix(in srgb,var(--projection-accent) 35%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--projection-accent) 8%,transparent),rgba(2,4,6,.38));display:flex;align-items:center;padding:0 10px;color:#cdd6db;font:700 8px/1 'Courier New',monospace;letter-spacing:.65px;opacity:0;transform:translateY(7px) scaleX(.94);box-shadow:inset 0 0 14px rgba(0,0,0,.55)}
.stack-projection.is-visible .projection-chip{animation:chipProject .34s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--delay)}
.projection-chip:before{content:"";width:4px;height:4px;margin-right:7px;background:var(--projection-accent);box-shadow:0 0 8px var(--projection-accent)}
@keyframes chipProject{0%{opacity:0;transform:translateY(8px) scaleX(.90);filter:blur(2px)}65%{opacity:.9;filter:blur(0)}100%{opacity:.82;transform:none;filter:none}}
.projection-lock{position:absolute;right:17px;bottom:9px;font:700 5.8px/1 'Courier New',monospace;letter-spacing:.9px;color:var(--projection-accent);opacity:.42}

/* The origin itself stays on the panel, while every outgoing beam is Canvas. */
.skill-card[data-burst="r"] .laser-burst{right:-1px;top:55%}
.skill-card[data-burst="rb"] .laser-burst{right:-1px;top:68%}
.skill-card[data-burst="l"] .laser-burst{left:-1px;top:54%}
.laser-burst:before{width:82px;height:82px;left:-41px;top:-41px}
.burst-core{width:3px;height:3px;left:-1.5px;top:-1.5px}

@media (max-width:760px){
  .stage.mobile .skills-grid{display:grid!important;grid-template-columns:1fr!important}
  .stage.mobile .skill-card{position:relative!important;left:auto!important;top:auto!important;width:100%!important}
  .stack-projection{display:none!important}
  .card-hint{display:none}
}


/* V3.1 — negative-space lasers + chip projection */
.ambient-beam{opacity:0!important;transition:opacity .18s ease}
.stage.laser-intro .ambient-beam{opacity:.035!important}
.skill-card:focus-visible{outline:none;box-shadow:inset 0 0 54px rgba(0,0,0,.65),0 0 22px color-mix(in srgb,var(--accent) 28%,transparent)}

.skill-card[data-burst="ru"] .laser-burst{right:-1px;top:24%}
.skill-card[data-burst="u"] .laser-burst{left:50%;top:-1px}
.skill-card[data-burst="lu"] .laser-burst{left:-1px;top:24%}
.skill-card[data-burst="rd"] .laser-burst{right:-1px;top:76%}
.skill-card[data-burst="d"] .laser-burst{left:50%;bottom:-1px;top:auto}
.skill-card[data-burst="ld"] .laser-burst{left:-1px;top:76%}

/* The stack is now a projected chip rail rather than a second large panel. */
.stack-projection{width:430px!important;height:72px!important;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--projection-accent) 18%,transparent));transform:translate3d(0,6px,0) scale(.98)!important}
.stack-projection.is-visible{transform:translate3d(0,0,0) scale(1)!important}
.projection-frame{inset:0!important;border:0!important;background:transparent!important;box-shadow:none!important;clip-path:none!important}
.projection-frame:before{top:35px!important;left:5%!important;right:5%!important;height:1px!important;background:linear-gradient(90deg,transparent,var(--projection-accent),transparent)!important;opacity:.32!important;animation:projectionScan 1.55s linear infinite!important}
.projection-frame:after{display:none!important}
.projection-kicker{left:7px!important;top:0!important;font-size:5.8px!important;letter-spacing:1.35px!important;opacity:.55!important}
.projection-title{right:7px!important;left:auto!important;top:0!important;font-size:7px!important;letter-spacing:1.35px!important;color:var(--projection-accent)!important;opacity:.66!important;text-shadow:0 0 8px var(--projection-accent)!important}
.projection-items{left:0!important;right:0!important;top:16px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:5px 7px!important}
.projection-chip{height:24px!important;padding:0 7px!important;border-color:color-mix(in srgb,var(--projection-accent) 32%,transparent)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--projection-accent) 8%,transparent),rgba(2,4,6,.52))!important;font-size:6.7px!important;letter-spacing:.45px!important;box-shadow:inset 0 0 10px rgba(0,0,0,.58),0 0 7px color-mix(in srgb,var(--projection-accent) 6%,transparent)!important}
.projection-chip:before{width:3px!important;height:3px!important;margin-right:5px!important}
.projection-lock{display:none!important}
.stack-projection.is-above{transform-origin:50% 100%!important}
.stack-projection.is-below{transform-origin:50% 0!important}

/* Make boot/hover corruption visible as short high-energy data loss, but never
   leave the little rectangles permanently lit. */
.edge-fragment{box-shadow:0 0 7px var(--accent),0 0 14px color-mix(in srgb,var(--accent) 35%,transparent)!important}
.digital-speck{box-shadow:0 0 6px var(--accent)!important}


/* ========================================================================== */
/* TP IDENTITY EMBLEM — final integrated treatment                            */
/* ========================================================================== */
.hero-emblem{
  position:absolute;z-index:2;left:48px;top:26px;width:148px;height:130px;
  pointer-events:none;opacity:.78;mix-blend-mode:screen;overflow:visible;
  animation:tpCrestBoot 1.15s cubic-bezier(.16,1,.3,1) both;
}
.hero-emblem img{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center;
  mix-blend-mode:screen;opacity:1;
  filter:saturate(1.03) brightness(.94) contrast(1.06) drop-shadow(0 0 7px rgba(19,228,251,.16));
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 0 72%,rgba(0,0,0,.92) 80%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 0 72%,rgba(0,0,0,.92) 80%,transparent 100%);
  animation:tpCrestBreathe 8s ease-in-out 1.2s infinite alternate;
}
@keyframes tpCrestBoot{
  0%{opacity:0;transform:translate3d(-7px,0,0) scale(.965);filter:blur(2px)}
  45%{opacity:.92;transform:translate3d(1px,0,0) scale(1.008);filter:blur(0)}
  58%{opacity:.68;transform:translate3d(-1px,0,0) scale(.998)}
  100%{opacity:.78;transform:none;filter:none}
}
@keyframes tpCrestBreathe{
  from{transform:translate3d(0,0,0) scale(.997);filter:saturate(1.01) brightness(.93) contrast(1.06) drop-shadow(0 0 6px rgba(19,228,251,.12))}
  to{transform:translate3d(0,-1px,0) scale(1.006);filter:saturate(1.05) brightness(.97) contrast(1.07) drop-shadow(0 0 10px rgba(19,228,251,.21))}
}
.brand-mark-image{position:relative;height:52px;display:flex;align-items:center;padding-left:4px;letter-spacing:0;font:inherit}
.brand-mark-image img{
  width:52px;height:46px;object-fit:contain;object-position:center;mix-blend-mode:screen;opacity:.72;
  filter:saturate(1.02) brightness(.9) contrast(1.08) drop-shadow(0 0 5px rgba(19,228,251,.14));
  -webkit-mask-image:radial-gradient(ellipse 78% 80% at 50% 50%,#000 0 72%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 80% at 50% 50%,#000 0 72%,transparent 100%);
}
.brand-mark-image small{position:static!important;margin-left:13px;color:#747d84;font:600 8px/1 'Courier New',monospace;letter-spacing:1.2px;white-space:nowrap}
@media (max-width:760px){
  .stage.mobile .hero-emblem{left:14px;top:14px;width:82px;height:72px;opacity:.58}
}
@media (prefers-reduced-motion:reduce){
  .hero-emblem,.hero-emblem img{animation:none!important}
}


/* ========================================================================== */
/* V5 REFINED — RELIABLE HOVER, LARGER TYPE, CLICKABLE DEEP-DIVE MODAL       */
/* ========================================================================== */
.skill-card{cursor:pointer}
.card-code{font-size:9px!important;line-height:1.48!important;opacity:.16!important}
.card-index{font-size:17px!important}
.card-label{font-size:18px!important;letter-spacing:2.45px!important}
.card-note{font-size:9px!important;letter-spacing:1.35px!important;line-height:1.15!important;margin-top:6px}
.card-hint{font-size:7.8px!important;letter-spacing:.9px!important;opacity:.28!important;bottom:9px!important}
.skill-card:is(:hover,.is-active,:focus-visible) .card-hint{opacity:.72!important}
.micro{font-size:8.5px!important}
.descriptor{font-size:13px!important}
.footer-stat{font-size:11.5px!important;letter-spacing:1px!important}
.footer-item{font-size:12px!important}

/* Hover taxonomy should always be readable when visible. */
.stack-projection{width:470px!important;height:86px!important;transition:opacity .12s ease,transform .16s cubic-bezier(.16,1,.3,1)!important}
.projection-kicker{font-size:7px!important;letter-spacing:1.45px!important}
.projection-title{font-size:9.5px!important;letter-spacing:1.55px!important}
.projection-items{top:19px!important;gap:6px 8px!important}
.projection-chip{height:28px!important;padding:0 9px!important;font-size:8.4px!important;letter-spacing:.5px!important}
.projection-chip:before{width:4px!important;height:4px!important;margin-right:6px!important}

.system-modal{--modal-accent:var(--cyan);position:absolute;z-index:80;inset:0;display:block;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.system-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease,visibility 0s linear 0s}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,3,5,.86);backdrop-filter:blur(9px) saturate(.85)}
.modal-backdrop:before{content:"";position:absolute;inset:0;background:
 radial-gradient(circle at 23% 52%,color-mix(in srgb,var(--modal-accent) 14%,transparent),transparent 30%),
 repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px);mix-blend-mode:screen}
.modal-shell{position:absolute;left:50%;top:50%;width:1160px;height:660px;transform:translate(-50%,-47%) scale(.965);opacity:0;overflow:hidden;outline:none;color:#edf4f7;background:linear-gradient(145deg,rgba(8,13,17,.985),rgba(2,4,6,.99));border:1px solid color-mix(in srgb,var(--modal-accent) 62%,rgba(255,255,255,.12));box-shadow:0 0 0 1px rgba(255,255,255,.025),0 0 75px color-mix(in srgb,var(--modal-accent) 22%,transparent),inset 0 0 90px rgba(0,0,0,.72);clip-path:polygon(0 18px,18px 0,calc(100% - 44px) 0,calc(100% - 32px) 12px,100% 12px,100% calc(100% - 20px),calc(100% - 20px) 100%,42px 100%,30px calc(100% - 12px),0 calc(100% - 12px));transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .18s ease}
.system-modal.is-open .modal-shell{transform:translate(-50%,-50%) scale(1);opacity:1}
.modal-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(var(--modal-accent),var(--modal-accent)) 0 0/150px 2px no-repeat,
 linear-gradient(var(--modal-accent),var(--modal-accent)) 100% 100%/180px 2px no-repeat,
 linear-gradient(var(--modal-accent),var(--modal-accent)) 0 0/2px 105px no-repeat,
 linear-gradient(var(--modal-accent),var(--modal-accent)) 100% 100%/2px 120px no-repeat;filter:drop-shadow(0 0 7px var(--modal-accent));opacity:.8}
.modal-shell:after{content:"";position:absolute;inset:1px;pointer-events:none;background:linear-gradient(90deg,transparent 0 33%,rgba(255,255,255,.018) 33.1% 33.2%,transparent 33.3% 66%,rgba(255,255,255,.012) 66.1% 66.2%,transparent 66.3%),radial-gradient(circle at 25% 50%,color-mix(in srgb,var(--modal-accent) 5%,transparent),transparent 37%);opacity:.85}
.modal-scan{position:absolute;z-index:8;left:0;right:0;top:-3px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--modal-accent),rgba(255,255,255,.8),var(--modal-accent),transparent);box-shadow:0 0 14px var(--modal-accent);opacity:0}
.system-modal.is-open .modal-scan{animation:modalScan 1.05s cubic-bezier(.3,0,.7,1) .12s 1}
@keyframes modalScan{0%{top:5%;opacity:0}12%{opacity:.82}82%{opacity:.6}100%{top:95%;opacity:0}}
.modal-topbar{position:absolute;z-index:5;left:32px;right:32px;top:22px;height:42px;border-bottom:1px solid color-mix(in srgb,var(--modal-accent) 22%,rgba(255,255,255,.06));display:grid;grid-template-columns:1fr auto 1fr;align-items:start;font:700 9px/1 'Courier New',monospace;letter-spacing:2px;color:var(--modal-accent)}
.modal-index{justify-self:center;color:#dfe7eb}.modal-status{justify-self:end;opacity:.72}.modal-kicker{opacity:.75}
.modal-grid{position:absolute;z-index:4;left:36px;right:36px;top:82px;bottom:48px;display:grid;grid-template-columns:390px 1fr;gap:48px}
.modal-visual{position:relative;border-right:1px solid color-mix(in srgb,var(--modal-accent) 18%,rgba(255,255,255,.07));display:flex;flex-direction:column;align-items:center;padding-right:42px}
.modal-visual:before{content:"";position:absolute;left:26px;right:72px;top:18px;height:310px;background:radial-gradient(circle,color-mix(in srgb,var(--modal-accent) 15%,transparent),transparent 63%);filter:blur(12px)}
.modal-orbit{position:absolute;z-index:1;left:50%;top:160px;border:1px solid color-mix(in srgb,var(--modal-accent) 42%,transparent);border-radius:50%;transform:translate(-56%,-50%);box-shadow:0 0 18px color-mix(in srgb,var(--modal-accent) 12%,transparent)}
.orbit-a{width:272px;height:272px;animation:orbitA 16s linear infinite}.orbit-b{width:218px;height:218px;border-style:dashed;opacity:.55;animation:orbitB 11s linear infinite reverse}
.orbit-a:before,.orbit-b:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--modal-accent);box-shadow:0 0 11px var(--modal-accent);left:50%;top:-4px}
@keyframes orbitA{to{transform:translate(-56%,-50%) rotate(360deg)}}@keyframes orbitB{to{transform:translate(-56%,-50%) rotate(360deg)}}
.modal-icon{position:relative;z-index:3;width:200px;height:200px;margin-top:56px;display:flex;align-items:center;justify-content:center;color:var(--modal-accent)}
.modal-icon .skill-icon{width:178px!important;height:178px!important;margin:0!important;transform:none!important;stroke:var(--modal-accent)!important;filter:drop-shadow(0 0 8px var(--modal-accent)) drop-shadow(0 0 27px color-mix(in srgb,var(--modal-accent) 45%,transparent))!important}
.modal-icon .skill-icon text{fill:var(--modal-accent)!important}
.modal-stack-label{position:relative;z-index:3;margin-top:50px;align-self:flex-start;font:700 8px/1 'Courier New',monospace;letter-spacing:2px;color:var(--modal-accent);opacity:.68}
.modal-stack{position:relative;z-index:3;align-self:stretch;display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.modal-stack span{padding:7px 9px;border:1px solid color-mix(in srgb,var(--modal-accent) 36%,transparent);background:color-mix(in srgb,var(--modal-accent) 5%,rgba(1,3,5,.8));font:700 9px/1 'Courier New',monospace;letter-spacing:.6px;color:#d6e0e5;box-shadow:inset 0 0 12px rgba(0,0,0,.55)}
.modal-copy{position:relative;padding:12px 26px 0 0}
.modal-title-wrap{border-bottom:1px solid color-mix(in srgb,var(--modal-accent) 22%,rgba(255,255,255,.06));padding-bottom:21px}
.modal-eyebrow{display:block;font:700 8px/1 'Courier New',monospace;letter-spacing:2.3px;color:var(--modal-accent);opacity:.7;margin-bottom:11px}
.modal-title{margin:0;color:#f4f7f8;font:800 36px/.98 'Courier New',monospace;letter-spacing:3.6px;text-transform:uppercase;text-shadow:0 0 20px color-mix(in srgb,var(--modal-accent) 24%,transparent)}
.modal-subtitle{margin:12px 0 0;color:color-mix(in srgb,var(--modal-accent) 42%,#d4dce0);font:700 11px/1.35 'Courier New',monospace;letter-spacing:1.4px;text-transform:uppercase}
.modal-sections{margin-top:26px;display:grid;gap:21px}
.modal-sections article{display:grid;grid-template-columns:46px 1fr;gap:14px;position:relative;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.065)}
.modal-sections article:last-child{border-bottom:0}
.section-index{font:700 15px/1 'Courier New',monospace;color:var(--modal-accent);text-shadow:0 0 11px var(--modal-accent)}
.modal-sections h3{margin:0 0 8px;color:#eef4f7;font:800 11px/1 'Courier New',monospace;letter-spacing:2.2px}
.modal-sections p{margin:0;color:#aebbc3;font:500 14px/1.48 Arial,Helvetica,sans-serif;letter-spacing:.15px;max-width:610px}
.modal-footer{position:absolute;z-index:5;left:34px;right:34px;bottom:15px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.055);padding-top:10px;color:#73818a;font:700 7.5px/1 'Courier New',monospace;letter-spacing:1.6px}
.modal-close{position:absolute;z-index:12;right:24px;top:18px;width:32px;height:32px;border:0;background:transparent;cursor:pointer}
.modal-close span{position:absolute;left:6px;top:15px;width:22px;height:1px;background:var(--modal-accent);box-shadow:0 0 8px var(--modal-accent)}.modal-close span:first-child{transform:rotate(45deg)}.modal-close span:last-child{transform:rotate(-45deg)}
.modal-close:hover span{background:#fff;box-shadow:0 0 11px var(--modal-accent)}
body.modal-open{cursor:default}

@media (max-width:760px){
  .card-code{font-size:8px!important}.card-label{font-size:17px!important}.card-note{font-size:8.2px!important}
  .system-modal{position:fixed}.modal-shell{width:calc(100vw - 24px);height:min(760px,calc(100vh - 24px));clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
  .modal-grid{left:20px;right:20px;top:70px;bottom:42px;display:block;overflow:auto}.modal-visual{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:0 0 22px}.modal-orbit{top:116px}.orbit-a{width:190px;height:190px}.orbit-b{width:150px;height:150px}.modal-icon{width:150px;height:150px;margin-top:34px}.modal-icon .skill-icon{width:132px!important;height:132px!important}.modal-stack-label{margin-top:22px}.modal-copy{padding:26px 0 10px}.modal-title{font-size:28px}.modal-sections p{font-size:14px}.modal-topbar{left:20px;right:20px}.modal-footer{left:20px;right:20px}.modal-status{display:none}
}


/* V5 refined readability polish after visual inspection */
.card-code{font-size:9.6px!important}
.card-label{font-size:20px!important;letter-spacing:2.55px!important}
.card-note{font-size:10.2px!important;letter-spacing:1.42px!important}
.card-hint{font-size:8.5px!important}
.micro{font-size:9.2px!important}
.footer-stat{font-size:12.3px!important}
.footer-item{font-size:12.8px!important}
.stack-projection.is-visible .projection-chip{animation-duration:.18s!important}

.modal-backdrop{background:rgba(1,3,5,.955)!important;backdrop-filter:blur(12px) saturate(.78)!important}
.modal-shell{background:#030608!important;isolation:isolate;box-shadow:0 0 0 1px rgba(255,255,255,.025),0 0 82px color-mix(in srgb,var(--modal-accent) 24%,transparent),inset 0 0 90px rgba(0,0,0,.88)!important}
.modal-shell:after{z-index:0!important;opacity:.55!important;background:linear-gradient(90deg,transparent 0 33%,rgba(255,255,255,.012) 33.1% 33.2%,transparent 33.3% 66%,rgba(255,255,255,.008) 66.1% 66.2%,transparent 66.3%),radial-gradient(circle at 25% 50%,color-mix(in srgb,var(--modal-accent) 4%,transparent),transparent 35%)!important}
.modal-topbar,.modal-grid,.modal-footer,.modal-close,.modal-scan{z-index:5}
.modal-title{font-size:39px!important;line-height:1.02!important}
.modal-subtitle{font-size:12.5px!important;line-height:1.45!important}
.modal-sections h3{font-size:12px!important}
.modal-sections p{font-size:15.5px!important;line-height:1.52!important;color:#bac6cd!important}
.modal-stack span{font-size:9.8px!important;padding:8px 10px!important}
.modal-stack-label{font-size:8.8px!important}
/* Hover stack is intentionally deterministic: no stagger that can read as missing content. */
.stack-projection.is-visible .projection-chip{
  animation:none!important;
  opacity:.82!important;
  transform:none!important;
  filter:none!important;
}

/* --------------------------------------------------------------------------
   Mobile reflow fix (tylerp.codes demo deploy, 2026-08-19)
   A late `.descriptor{font-size:13px!important}` overrode the mobile 7.8px
   rule, so the hero descriptor rendered 437px wide inside a 390px viewport
   and was clipped at both ends. Size it from the viewport instead.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .stage.mobile .descriptor{font-size:min(13px,2.6vw)!important;letter-spacing:min(1.55px,.34vw)}
  .stage.mobile .descriptor b{margin:0 min(11px,2vw)}
  .stage.mobile .name-cyan{font-size:min(63px,16vw)}
  .stage.mobile .name-magenta{font-size:min(72px,18vw)}
}