@font-face{font-family:Departure;src:url('/assets/fonts/departure-mono.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:AthensPixel;src:url('/assets/fonts/athens-pixel.woff2') format('woff2');font-display:swap;font-weight:400}
:root{
  --yellow:#c8ff4d;--ink:#071018;--paper:#f3f6ef;--line:#73808a;--pink:#ff4fd8;--salmon:#ff7357;--sand:#ffcf4a;--mint:#35f2c5;--blue:#7486ff;--purple:#a874ff;--white:#fff;--chrome-h:28px;
  color:var(--ink);background:var(--paper);font-family:Departure,"Courier New",monospace;font-synthesis:none;text-rendering:geometricPrecision
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper);scroll-padding-top:var(--chrome-h)}body{margin:0;min-width:320px;overflow-x:hidden;background:var(--paper);cursor:none}body.is-gray{filter:grayscale(1)}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}.skip-link{position:fixed;left:12px;top:-90px;z-index:99999;background:#fff;border:2px solid #000;padding:10px 14px}.skip-link:focus{top:40px}.paper-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--paper);background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:28px 28px}.scroll-progress{position:fixed;z-index:10002;top:0;left:0;width:100%;height:3px;background:rgba(0,0,0,.15)}.scroll-progress i{display:block;height:100%;width:0;background:#fff;mix-blend-mode:difference}.page-loader{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;background:#111;color:#fff;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility .8s;clip-path:inset(0 0 0 0)}.page-loader.is-done{clip-path:inset(0 0 100% 0);visibility:hidden}.loader-word{font-family:AthensPixel,Departure,monospace;font-size:clamp(3rem,10vw,10rem);letter-spacing:.06em}.loader-track{position:absolute;left:5vw;right:5vw;bottom:7vh;height:8px;border:1px solid #fff}.loader-track i{display:block;width:0;height:100%;background:#fff}.loader-count{position:absolute;right:5vw;top:5vh;font-size:clamp(2rem,5vw,5rem)}.page-wipe{position:fixed;z-index:99990;inset:0;background:var(--yellow);transform:translateY(100%);pointer-events:none}.page-wipe.is-leaving{animation:wipeIn .72s cubic-bezier(.76,0,.24,1) forwards}@keyframes wipeIn{to{transform:translateY(0)}}
.top-chrome{position:fixed;z-index:10000;top:0;left:0;width:100%;height:var(--chrome-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.45);background:rgba(240,240,237,.9);backdrop-filter:blur(9px);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.top-chrome>*{height:100%;display:flex;align-items:center}.chrome-home{padding:0 10px;justify-self:start}.chrome-status{gap:8px;justify-self:center}.status-led{width:7px;height:7px;background:#2dbb55;border-radius:50%;box-shadow:0 0 0 3px rgba(45,187,85,.12)}.menu-toggle{justify-self:end;padding:0 10px;border:0;background:transparent;cursor:none}.menu-toggle b{display:inline-block;transition:transform .3s}.menu-toggle:hover b{transform:rotate(90deg)}
.site-menu{position:fixed;z-index:9999;inset:var(--chrome-h) 0 0;background:#121212;color:#fff;transform:translateY(-105%);transition:transform .72s cubic-bezier(.76,0,.24,1);overflow:auto}.site-menu.is-open{transform:translateY(0)}.menu-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:35px 35px}.menu-close{position:absolute;right:18px;top:16px;z-index:2;border:1px solid #fff;background:#111;color:#fff;padding:9px 12px;cursor:none}.site-menu nav{position:relative;z-index:1;display:flex;flex-direction:column;padding:8vh 4vw 14vh}.site-menu nav a{display:grid;grid-template-columns:90px 1fr;align-items:center;border-top:1px solid rgba(255,255,255,.35);min-height:13vh;text-transform:uppercase;overflow:hidden}.site-menu nav a:last-child{border-bottom:1px solid rgba(255,255,255,.35)}.site-menu nav span{font-size:12px}.site-menu nav b{font-family:AthensPixel,Departure,monospace;font-weight:400;font-size:clamp(2.3rem,7vw,7rem);white-space:nowrap;transition:transform .35s}.site-menu nav a:hover b{transform:translateX(22px)}.menu-foot{position:absolute;left:4vw;right:4vw;bottom:3vh;z-index:2;display:flex;gap:24px;justify-content:flex-end;font-size:11px;text-transform:uppercase}.menu-foot span{margin-left:auto}
main{position:relative}.hero-yellow{position:relative;min-height:100svh;padding:calc(var(--chrome-h) + clamp(34px,7vw,100px)) clamp(16px,4vw,64px) 56px;background:var(--yellow);overflow:hidden;border-bottom:1px solid #000}.hero-noise{position:absolute;inset:0;opacity:.14;pointer-events:none;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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}.hero-kicker{position:relative;display:inline-block;background:#111;color:#fff;padding:5px 9px;font-size:11px}.hero-title-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,35vw);align-items:end;gap:4vw;margin-top:9vh}.hero-title-wrap h1{margin:0;font-family:AthensPixel,Departure,monospace;font-weight:400;font-size:clamp(4rem,13vw,13rem);line-height:.76;letter-spacing:-.055em;text-transform:uppercase}.hero-title-wrap h1 span{display:inline-block;background:#111;color:var(--yellow);padding:.08em .08em .02em}.hero-title-wrap p{margin:0 0 1vw;font-size:clamp(.92rem,1.45vw,1.25rem);line-height:1.6;max-width:44ch}.hero-pixel-art{position:relative;height:38vh;min-height:260px;margin:4vh auto 0;max-width:980px;border:1px solid rgba(0,0,0,.55);background:rgba(255,255,255,.16);background-image:linear-gradient(rgba(0,0,0,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.14) 1px,transparent 1px);background-size:32px 32px;perspective:800px}.pixel-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-12deg);display:grid;grid-template-columns:repeat(2,110px);grid-template-rows:repeat(2,90px);gap:10px}.pixel-window span{display:grid;place-items:center;background:#111;color:#fff;border:5px solid var(--yellow);box-shadow:12px 12px 0 #111;font-size:2rem;animation:tileFloat 4s ease-in-out infinite}.pixel-window span:nth-child(2){animation-delay:-1s}.pixel-window span:nth-child(3){animation-delay:-2s}.pixel-window span:nth-child(4){animation-delay:-3s}@keyframes tileFloat{50%{transform:translateY(-15px)}}.pixel-hand{position:absolute;right:10%;bottom:13%;width:84px;height:84px;transform:rotate(-15deg)}.pixel-hand i{position:absolute;background:#fff;border:4px solid #111}.pixel-hand i:nth-child(1){width:38px;height:52px;left:20px;top:20px}.pixel-hand i:nth-child(2){width:18px;height:46px;left:48px;top:0}.pixel-hand i:nth-child(3){width:17px;height:37px;left:65px;top:13px}.pixel-hand i:nth-child(4){width:17px;height:31px;left:5px;top:31px}.pixel-hand i:nth-child(5){width:18px;height:18px;left:42px;top:61px}.orbit-label{position:absolute;background:#111;color:#fff;padding:4px 8px;font-size:10px}.orbit-label.l1{left:8%;top:15%}.orbit-label.l2{right:9%;top:19%}.orbit-label.l3{left:20%;bottom:13%}.scroll-cue{position:absolute;right:4vw;bottom:20px;display:flex;gap:10px;align-items:center;font-size:11px}.scroll-cue b{font-size:20px;animation:bounce 1.3s ease-in-out infinite}@keyframes bounce{50%{transform:translateY(5px)}}
.about-yellow{position:relative;padding:clamp(70px,10vw,150px) clamp(16px,6vw,92px);background:var(--yellow);border-bottom:1px solid #111}.section-label,.terminal-tag{display:inline-block;background:#111;color:#fff;padding:5px 9px;font-size:11px;text-transform:uppercase}.about-intro{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:6vw;margin:46px 0 80px;align-items:start}.about-intro h2{margin:0;font-family:AthensPixel,Departure,monospace;font-size:clamp(3rem,7vw,7rem);font-weight:400;line-height:.9;text-transform:uppercase}.about-intro p{margin:0;max-width:780px;font-size:clamp(1rem,1.7vw,1.45rem);line-height:1.75}.about-board{display:grid;grid-template-columns:1.35fr .65fr;border:1px solid #111;background:#f4f4f1;box-shadow:10px 10px 0 rgba(0,0,0,.18);max-width:1120px;margin-left:auto}.board-copy{padding:clamp(24px,4vw,56px);border-right:1px solid #111}.board-copy p{margin:22px 0 0;line-height:1.75;font-size:1rem}.board-stamp{display:grid;place-content:center;text-align:center;font-family:AthensPixel,Departure,monospace;font-size:clamp(5rem,10vw,10rem);line-height:.65;background-image:linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px);background-size:25px 25px}.board-stamp small{font-family:Departure,monospace;font-size:11px;letter-spacing:.12em}.about-columns{display:grid;grid-template-columns:.75fr 1.25fr;gap:5vw;margin-top:110px}.about-block p{line-height:1.7}.skill-table{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border:1px solid #111;background:#f4f4f1}.skill-table>*{margin:0;padding:12px;border-right:1px solid #111}.skill-table>*:nth-child(3n){border-right:0}.skill-table span{font-size:10px;border-bottom:1px solid #111}.skill-table p{font-size:12px;line-height:1.8}.gray-toggle{margin-top:65px;border:1px solid #111;background:#fff;padding:9px 13px;box-shadow:4px 4px 0 #111;cursor:none}.gray-toggle:active{transform:translate(4px,4px);box-shadow:none}
.projects-dark{position:relative;padding:clamp(70px,8vw,120px) clamp(14px,4vw,64px) clamp(100px,12vw,180px);background:#202020;color:#111;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:30px 30px}.projects-head{display:flex;align-items:end;justify-content:space-between;gap:25px;max-width:1100px;margin:0 auto 50px}.terminal-tag.light{background:#000}.projects-head p{color:#fff;margin:18px 0 0;max-width:520px;font-size:12px}.shuffle-button{border:1px solid currentColor;background:var(--yellow);color:#111;padding:9px 12px;box-shadow:5px 5px 0 #000;cursor:none;text-transform:uppercase;font-size:10px}.shuffle-button:hover span{display:inline-block;transform:rotate(180deg)}.project-list{max-width:1100px;margin:auto;display:flex;flex-direction:column;gap:52px}.project-row{--tone:var(--pink);display:grid;grid-template-columns:125px minmax(0,1fr);gap:15px;align-items:stretch}.project-row[data-palette="sand"]{--tone:var(--sand)}.project-row[data-palette="mint"]{--tone:var(--mint)}.project-row[data-palette="blue"]{--tone:var(--blue)}.project-row-reverse{grid-template-columns:minmax(0,1fr) 125px}.project-row-reverse .project-ticket{order:2}.project-row-reverse .project-panel{order:1}.project-ticket{position:relative;min-height:320px;background:#f3f3f0;border:1px solid #111;padding:13px;display:flex;flex-direction:column;box-shadow:9px 9px 0 rgba(0,0,0,.4);transition:transform .25s}.project-ticket:hover{transform:translateY(-5px)}.project-ticket:after{content:"";position:absolute;top:0;right:-15px;width:15px;height:100%;background:linear-gradient(135deg,#bcbcb8 10px,transparent 0) 0 0/15px 15px,linear-gradient(45deg,#bcbcb8 10px,transparent 0) 0 15px/15px 15px}.project-row-reverse .project-ticket:after{right:auto;left:-15px;transform:scaleX(-1)}.project-ticket b{font-size:22px;border-bottom:1px solid #111;padding-bottom:5px}.project-ticket span{writing-mode:vertical-rl;text-orientation:mixed;margin:auto;font-size:12px;text-transform:uppercase}.project-ticket small{font-size:10px}.project-ticket i{position:absolute;right:8px;bottom:8px;background:#111;color:#fff;width:22px;height:22px;display:grid;place-items:center;font-style:normal}.project-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr);min-height:320px;background:var(--tone);border:1px solid #111;box-shadow:9px 9px 0 rgba(0,0,0,.45);transition:background .45s}.project-copy{position:relative;padding:28px 28px 60px}.card-overline{font-size:10px;text-transform:uppercase}.project-copy h3{font-family:AthensPixel,Departure,monospace;font-weight:400;font-size:clamp(2.4rem,5vw,5.2rem);line-height:.9;margin:16px 0}.project-copy>p{font-size:12px;line-height:1.65;max-width:620px}.project-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;padding-top:11px;border-top:1px solid rgba(0,0,0,.6)}.project-specs span{font-size:8px}.project-specs b{display:block;font-weight:400;margin-top:4px}.mini-button{position:absolute;right:18px;bottom:15px;background:#fff;border:1px solid #111;padding:6px 10px;font-size:9px}.project-preview{position:relative;overflow:hidden;border-left:1px solid #111;display:grid;place-items:center;isolation:isolate}.project-preview>span{position:relative;z-index:2;font-family:AthensPixel,Departure,monospace;font-size:clamp(2.4rem,5vw,5.3rem);line-height:.7;text-align:center}.preview-pixel{background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)),url('/assets/preview-mosaic.svg');background-size:cover;background-position:center}.preview-pixel:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(0,0,0,.35) 12px 13px),repeating-linear-gradient(0deg,transparent 0 12px,rgba(0,0,0,.35) 12px 13px)}.preview-particles{background:#111;color:var(--yellow)}.preview-particles canvas{position:absolute;inset:0;width:100%;height:100%}.preview-sketch{background:#eee}.preview-sketch:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(8deg,transparent 0 4px,rgba(0,0,0,.08) 5px)}.ink-head{position:absolute;width:120px;height:155px;border:4px double #111;border-radius:48% 48% 43% 43%;transform:rotate(-4deg)}.ink-head:before,.ink-head:after{content:"";position:absolute;width:22px;height:8px;border:2px solid #111;border-radius:50%;top:60px}.ink-head:before{left:22px}.ink-head:after{right:22px}.preview-ascii{background:#0a0a0a;color:#ccff9f}.preview-ascii pre{position:absolute;inset:-30px;margin:0;white-space:pre-wrap;word-break:break-all;font-size:27px;letter-spacing:5px;line-height:1;opacity:.22;transform:rotate(-9deg);animation:asciiDrift 9s linear infinite}@keyframes asciiDrift{50%{transform:rotate(7deg) translateY(-30px);opacity:.38}}
.labs-paper{padding:clamp(70px,9vw,140px) clamp(14px,5vw,76px);background:#ededeb;color:#111;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px);background-size:29px 29px}.labs-head{display:grid;grid-template-columns:1fr 1fr;max-width:1080px;margin:auto;border:1px solid #111;background:#f7f7f4}.labs-copy{padding:28px}.labs-copy p{font-size:12px;line-height:1.7;margin:20px 0 0;max-width:500px}.labs-logo{display:grid;place-items:center;border-left:1px solid #111;font-family:AthensPixel,Departure,monospace;font-size:clamp(4rem,9vw,9rem);background-image:linear-gradient(20deg,transparent 48%,rgba(0,0,0,.08) 49%,rgba(0,0,0,.08) 51%,transparent 52%)}.labs-controls{max-width:1080px;margin:20px auto;display:flex;justify-content:space-between;gap:20px}.light-button{background:#fff}.layout-button{border:0;border-bottom:1px solid transparent;background:transparent;padding:7px 9px;cursor:none;font-size:10px}.layout-button.is-active{border-color:#111}.labs-grid{max-width:1080px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;transition:grid-template-columns .35s}.labs-grid.is-column{grid-template-columns:1fr}.lab-card{--lab-tone:#fff;position:relative;min-height:250px;padding:20px;background:var(--lab-tone);border:1px solid #111;box-shadow:7px 7px 0 rgba(0,0,0,.16);transition:background .4s,transform .25s}.lab-card:hover{transform:translateY(-5px)}.lab-card>div{display:flex;justify-content:space-between;border-bottom:1px solid #111;padding-bottom:10px;font-size:10px}.lab-card h3{font-family:AthensPixel,Departure,monospace;font-size:clamp(2.2rem,4vw,4.5rem);font-weight:400;line-height:.9;margin:28px 0 12px;max-width:9ch}.lab-card p{font-size:11px;line-height:1.6;max-width:370px}.lab-card>a{position:absolute;right:15px;bottom:15px;background:#fff;border:1px solid #111;padding:6px 9px;font-size:9px}.source-buttons{display:flex;gap:10px;justify-content:center;margin-top:44px}.source-buttons a{border:1px solid #111;background:#fff;padding:9px 12px;font-size:10px}
.website-black{position:relative;padding:clamp(90px,12vw,180px) clamp(16px,6vw,92px);background:#050505;color:#fff;overflow:hidden}.website-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent)}.website-copy{position:relative;max-width:1120px;margin:auto}.yellow-tag{background:var(--yellow);color:#111}.website-copy h2{font-family:AthensPixel,Departure,monospace;font-weight:400;font-size:clamp(3.2rem,8vw,8rem);line-height:.83;margin:40px 0 70px;max-width:9ch}.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.45)}.goal-grid article{min-height:190px;padding:18px;border-right:1px solid rgba(255,255,255,.45)}.goal-grid article:last-child{border-right:0}.goal-grid b{color:var(--yellow);font-size:26px}.goal-grid p{font-size:11px;line-height:1.65;margin-top:45px}.website-note{max-width:790px;line-height:1.8;color:#bbb;font-size:12px;margin:55px 0 0}.smile-panel{position:relative;min-height:280px;display:grid;place-items:center;align-content:center;gap:12px;background:#efefec;border-bottom:1px solid #111;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:28px 28px}.pixel-smile{font-family:AthensPixel,Departure,monospace;font-size:62px}.smile-panel p{font-size:11px}.smile-panel a{position:absolute;right:18px;bottom:12px;font-size:9px}
.perspective-footer{position:relative;min-height:520px;background:#202020;color:#fff;overflow:hidden;padding-top:50px}.email-marquee{position:relative;z-index:2;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.4);white-space:nowrap}.email-marquee span{display:inline-block;font-family:AthensPixel,Departure,monospace;font-size:clamp(2.8rem,7vw,7rem);animation:marquee 18s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}.floor-grid{position:absolute;left:-20%;right:-20%;bottom:-36%;height:95%;transform:perspective(560px) rotateX(65deg);transform-origin:bottom;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to top,black,transparent)}.footer-links{position:relative;z-index:3;display:flex;justify-content:space-between;gap:20px;padding:160px 5vw 0}.footer-links>div{display:flex;flex-direction:column;gap:8px;font-size:10px}.footer-links button{border:0;background:transparent;color:#fff;padding:0;text-align:left;cursor:none}.copyright{position:absolute;z-index:3;bottom:15px;left:0;width:100%;text-align:center;font-size:8px;color:#aaa}.pixel-cursor{position:fixed;z-index:2147483647;left:0;top:0;width:64px;height:64px;pointer-events:none;transform:translate(-50%,-50%);color:#fff;opacity:0;will-change:left,top,transform;transition:width .22s cubic-bezier(.22,1,.36,1),height .22s cubic-bezier(.22,1,.36,1),opacity .18s ease;filter:drop-shadow(0 0 1px #000)}.pixel-cursor:before{content:"";position:absolute;inset:5px;border:2px solid currentColor;border-radius:50%;background:rgba(255,255,255,.04);mix-blend-mode:difference;transition:inset .22s cubic-bezier(.22,1,.36,1),border-radius .22s ease,background .22s ease,transform .18s ease}.pixel-cursor:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);background:currentColor;box-shadow:12px 0 0 currentColor,-12px 0 0 currentColor,0 12px 0 currentColor,0 -12px 0 currentColor;mix-blend-mode:difference}.pixel-cursor i{position:absolute;left:8px;top:7px;display:block;width:28px;height:34px;background:currentColor;clip-path:polygon(0 0,100% 52%,62% 63%,80% 100%,62% 100%,46% 69%,0 100%);mix-blend-mode:difference;transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .18s ease}.pixel-cursor span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 7px;background:#fff;color:#111;border:2px solid #111;box-shadow:4px 4px 0 #111;font:400 10px/1 Departure,monospace;letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1)}.pixel-cursor.is-hover{width:112px;height:112px}.pixel-cursor.is-hover:before{inset:2px;border-radius:4px;background:rgba(255,255,255,.15)}.pixel-cursor.is-hover i{opacity:0;transform:scale(.5)}.pixel-cursor.is-hover span{opacity:1;transform:translate(-50%,-50%) scale(1.08)}.pixel-cursor.is-down:before{transform:scale(.82)}.pixel-cursor.is-down span{transform:translate(-50%,-50%) scale(.92)}@media (pointer:fine){body,a,button,[role="button"],input,select,textarea,label,summary,.project-panel,.lab-card{cursor:none!important}}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:960px){.hero-title-wrap{grid-template-columns:1fr}.hero-title-wrap p{max-width:620px}.about-intro,.about-columns{grid-template-columns:1fr}.about-board{grid-template-columns:1fr}.board-copy{border-right:0;border-bottom:1px solid #111}.board-stamp{min-height:260px}.project-row,.project-row-reverse{grid-template-columns:92px minmax(0,1fr)}.project-row-reverse .project-ticket{order:0}.project-row-reverse .project-panel{order:0}.project-panel{grid-template-columns:1fr}.project-preview{min-height:250px;border-left:0;border-top:1px solid #111}.project-ticket:after{display:none}.goal-grid{grid-template-columns:repeat(2,1fr)}.goal-grid article:nth-child(2){border-right:0}.goal-grid article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.45)}}
@media (max-width:700px){body{cursor:auto}.pixel-cursor{display:none}.top-chrome{grid-template-columns:1fr auto}.chrome-status{display:none}.hero-title-wrap{margin-top:12vh}.hero-title-wrap h1{font-size:clamp(4rem,20vw,8rem)}.hero-pixel-art{height:300px}.pixel-window{grid-template-columns:repeat(2,78px);grid-template-rows:repeat(2,65px)}.projects-head{align-items:flex-start;flex-direction:column}.project-row,.project-row-reverse{grid-template-columns:1fr}.project-ticket{min-height:80px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px}.project-ticket span{writing-mode:horizontal-tb;margin:0}.project-ticket small{justify-self:end}.project-ticket i{display:none}.project-panel{box-shadow:6px 6px 0 rgba(0,0,0,.35)}.project-copy{padding:22px 18px 62px}.project-specs{grid-template-columns:1fr}.labs-head{grid-template-columns:1fr}.labs-logo{min-height:180px;border-left:0;border-top:1px solid #111}.labs-grid{grid-template-columns:1fr}.labs-controls{align-items:flex-start;flex-direction:column}.goal-grid{grid-template-columns:1fr}.goal-grid article{border-right:0;border-bottom:1px solid rgba(255,255,255,.45)}.goal-grid article:last-child{border-bottom:0}.menu-foot{position:relative;left:auto;right:auto;bottom:auto;padding:20px 4vw 35px;flex-wrap:wrap}.menu-foot span{width:100%;margin:0}.site-menu nav{padding-bottom:20px}.site-menu nav a{grid-template-columns:48px 1fr;min-height:11vh}.skill-table{grid-template-columns:1fr}.skill-table>*{border-right:0}.skill-table span{border-bottom:1px solid #111}.skill-table p{border-bottom:1px solid #111}.skill-table p:last-child{border-bottom:0}.source-buttons{flex-direction:column}.footer-links{padding-top:130px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}


/* === ROBERTO LAKSMANA V4 INTRO + COLOR SYSTEM === */
:root{--cyan:#35f2ff;--magenta:#ff4fd8;--lime:#c8ff4d;--orange:#ff8a3d;--navy:#071018;--violet:#7486ff}
body.intro-open{overflow:hidden}.page-loader{display:none!important}
.hero-yellow,.about-yellow{background:linear-gradient(135deg,var(--lime) 0 54%,#b7ff76 54% 70%,#7ff5ea 70%)}
.hero-title-wrap h1 span{background:var(--navy);color:var(--lime)}
.hero-pixel-art{background:linear-gradient(145deg,rgba(53,242,255,.22),rgba(255,79,216,.18)),rgba(255,255,255,.3)}
.pixel-window span{border-color:var(--navy);color:var(--navy);box-shadow:12px 12px 0 var(--navy)}
.pixel-window span:nth-child(1){background:var(--cyan)}.pixel-window span:nth-child(2){background:var(--magenta)}.pixel-window span:nth-child(3){background:var(--orange)}.pixel-window span:nth-child(4){background:var(--violet);color:#fff}
.page-wipe{background:linear-gradient(135deg,var(--cyan),var(--magenta) 55%,var(--lime))}
.projects-dark{background-color:#071018;background-image:linear-gradient(rgba(53,242,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,79,216,.09) 1px,transparent 1px)}
.website-black,.perspective-footer,.work-footer{background:#050a12}.yellow-tag{background:var(--lime)}
.project-preview{position:relative}.project-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.08);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s}.project-preview:hover>img{transform:scale(1.08);filter:saturate(1.35) contrast(1.12)}
.project-preview>span{position:relative;z-index:3;white-space:pre-line;text-shadow:5px 5px 0 rgba(0,0,0,.25)}
.project-preview:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(135deg,transparent 25%,rgba(7,16,24,.18)),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.13) 32px),repeating-linear-gradient(0deg,transparent 0 31px,rgba(7,16,24,.13) 32px);mix-blend-mode:overlay;pointer-events:none}
.preview-particles canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%}.preview-particles>span{z-index:4}
.lab-card:nth-child(1){--lab-tone:#ff4fd8!important}.lab-card:nth-child(2){--lab-tone:#35f2ff!important}.lab-card:nth-child(3){--lab-tone:#ffcf4a!important}.lab-card:nth-child(4){--lab-tone:#7486ff!important;color:#fff}
.pixel-cursor{color:var(--cyan)}.pixel-cursor.is-hover span{background:var(--lime);color:var(--navy);border-color:var(--navy);box-shadow:5px 5px 0 var(--magenta)}

.brand-intro{display:none}.js .brand-intro{display:block;position:fixed;z-index:2147483000;inset:0;background:#05070b;color:#fff;overflow:hidden;transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility .9s;clip-path:inset(0)}
.brand-intro.is-exiting{clip-path:inset(0 0 100% 0);visibility:hidden}.intro-photo{position:absolute;inset:0;background:url('/assets/github-profile-visual.png') center/cover no-repeat;filter:contrast(1.18) brightness(.38) saturate(.1);transform:scale(1.04)}
.intro-vignette{position:absolute;inset:0;background:radial-gradient(circle at 62% 46%,transparent 0 15%,rgba(5,7,11,.34) 48%,rgba(5,7,11,.92) 100%),linear-gradient(120deg,rgba(53,242,255,.1),transparent 34%,rgba(255,79,216,.16));mix-blend-mode:screen}
.intro-vignette:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent)}
.intro-topline{position:absolute;z-index:8;left:0;right:0;top:0;min-height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.38);padding:0 14px;font-size:10px;letter-spacing:.08em}.intro-topline span:nth-child(2){justify-self:center;color:var(--cyan)}.intro-topline button{justify-self:end;border:1px solid rgba(255,255,255,.5);background:#080b11;color:#fff;padding:6px 9px;cursor:none}
.intro-stage{position:relative;z-index:3;width:100%;height:100%;display:grid;place-items:center}.intro-svg{position:absolute;inset:4% 0 0;width:100%;height:96%;overflow:visible}.intro-path{opacity:.22;stroke-dasharray:10 14}.brand-intro.is-running .intro-path{opacity:.84}.intro-impact{transform-box:fill-box;transform-origin:center}.intro-copy{position:relative;z-index:5;width:min(92vw,1280px);padding-top:7vh}.intro-kicker{display:inline-block;background:var(--lime);color:var(--navy);border:2px solid var(--navy);padding:7px 10px;box-shadow:6px 6px 0 var(--magenta);font-size:10px;letter-spacing:.1em}.intro-name{margin:clamp(18px,3vh,35px) 0 12px;font-family:AthensPixel,Departure,monospace;font-size:clamp(4.3rem,13.7vw,13.5rem);line-height:.67;letter-spacing:-.055em;text-transform:uppercase}.intro-name-line{display:block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);clip-path:inset(0 100% 0 0);transform:translateY(24px);filter:blur(7px);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .8s,color .5s,text-shadow .5s}.intro-name-line.is-revealed{color:#fff;clip-path:inset(0);transform:none;filter:none;text-shadow:8px 8px 0 rgba(255,79,216,.5),-7px -7px 0 rgba(53,242,255,.26)}.intro-name-line:nth-child(2).is-revealed{color:var(--lime);text-shadow:8px 8px 0 rgba(53,242,255,.36),-7px -7px 0 rgba(255,79,216,.35)}
.intro-caption{margin:0;color:#d6e4e9;font-size:clamp(10px,1.2vw,14px);letter-spacing:.12em}.intro-actions{display:flex;gap:12px;align-items:center;margin-top:clamp(24px,4vh,42px)}.intro-actions button{min-height:44px;border:1px solid #fff;padding:10px 15px;background:#070b12;color:#fff;box-shadow:6px 6px 0 rgba(255,255,255,.22);cursor:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s}.intro-actions button:hover{background:var(--cyan);color:var(--navy);box-shadow:6px 6px 0 var(--magenta)}.intro-actions button:active{transform:translate(6px,6px);box-shadow:none}.intro-enter{background:var(--lime)!important;color:var(--navy)!important}.intro-click-note{position:absolute;left:calc(50% - min(46vw,640px) + 126px);bottom:16vh;font-size:10px;color:#fff;transform:rotate(-5deg);animation:introWiggle 1.1s ease-in-out infinite}.intro-click-note i{font-size:28px;color:var(--magenta)}@keyframes introWiggle{50%{transform:translate(5px,-4px) rotate(3deg)}}
.intro-progress{position:absolute;left:4vw;right:4vw;bottom:4vh;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:10px}.intro-progress i{display:block;height:8px;border:1px solid rgba(255,255,255,.6);position:relative}.intro-progress i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--intro-progress,0%);background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--lime));transition:width .1s linear}.intro-pixel-field{position:absolute;inset:0;pointer-events:none;z-index:4}.intro-pixel-field i{position:absolute;width:18px;height:18px;background:var(--cyan);opacity:.18;transform:scale(.3) rotate(0);animation:pixelDrift 5s ease-in-out infinite}.intro-pixel-field i:nth-child(2n){background:var(--magenta)}.intro-pixel-field i:nth-child(3n){background:var(--lime)}.intro-pixel-field i:nth-child(4n){background:var(--orange)}.intro-pixel-field i:nth-child(1){left:6%;top:20%}.intro-pixel-field i:nth-child(2){left:18%;top:72%;animation-delay:-1s}.intro-pixel-field i:nth-child(3){left:31%;top:14%;animation-delay:-2s}.intro-pixel-field i:nth-child(4){left:43%;top:84%;animation-delay:-.5s}.intro-pixel-field i:nth-child(5){left:57%;top:18%;animation-delay:-2.7s}.intro-pixel-field i:nth-child(6){left:68%;top:75%;animation-delay:-1.5s}.intro-pixel-field i:nth-child(7){left:82%;top:22%;animation-delay:-3s}.intro-pixel-field i:nth-child(8){left:91%;top:62%;animation-delay:-.8s}.intro-pixel-field i:nth-child(9){left:12%;top:45%;animation-delay:-2.2s}.intro-pixel-field i:nth-child(10){left:48%;top:47%;animation-delay:-3.5s}.intro-pixel-field i:nth-child(11){left:72%;top:42%;animation-delay:-1.8s}.intro-pixel-field i:nth-child(12){left:95%;top:12%;animation-delay:-2.9s}@keyframes pixelDrift{50%{opacity:.85;transform:scale(1.7) rotate(90deg);box-shadow:18px 18px 0 rgba(255,255,255,.2)}}
.brand-intro.is-running .intro-start,.brand-intro.is-running .intro-click-note{opacity:0;pointer-events:none}.brand-intro.is-complete .intro-caption{color:var(--cyan)}
@media(max-width:760px){.intro-topline{grid-template-columns:1fr auto}.intro-topline span:nth-child(2){display:none}.intro-copy{padding:8vh 5vw 0}.intro-name{font-size:clamp(4rem,20vw,8rem);line-height:.72}.intro-caption{max-width:70vw;line-height:1.6}.intro-svg{inset:12% -34% 0;width:150%;height:80%}.intro-click-note{left:12vw;bottom:19vh}.intro-actions{flex-wrap:wrap}.intro-actions button{min-height:48px}.intro-progress{bottom:max(18px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.intro-pixel-field{display:none}.intro-name-line{clip-path:inset(0);transform:none;filter:none;color:#fff}.intro-click-note{display:none}}

/* V5: GitHub-only intro visual; original Roberto identity remains primary. */
.intro-photo{background-color:#071018;background-image:url('/assets/github-profile-visual.png');background-position:center;background-size:cover;background-repeat:no-repeat;filter:brightness(.42) contrast(1.18) saturate(.88);transform:none}
.intro-vignette{background:radial-gradient(circle at 50% 47%,transparent 0 18%,rgba(5,7,11,.25) 42%,rgba(5,7,11,.92) 100%),linear-gradient(115deg,rgba(5,7,11,.82),rgba(53,242,255,.08) 46%,rgba(255,79,216,.14));mix-blend-mode:normal}
/* V5: compact cursor with exact center point for more accurate clicking. */
.pixel-cursor{width:30px;height:30px;transform:translate(-50%,-50%)}
.pixel-cursor:before{inset:3px;border-width:1px;background:rgba(255,255,255,.07)}
.pixel-cursor:after{width:4px;height:4px;box-shadow:7px 0 0 currentColor,-7px 0 0 currentColor,0 7px 0 currentColor,0 -7px 0 currentColor}
.pixel-cursor i{display:none}
.pixel-cursor span{left:50%;top:calc(100% + 6px);padding:4px 6px;border-width:1px;box-shadow:3px 3px 0 #111;font-size:8px}
.pixel-cursor.is-hover{width:52px;height:52px}
.pixel-cursor.is-hover:before{inset:2px;border-radius:3px}
.pixel-cursor.is-hover span{transform:translate(-50%,0) scale(1);opacity:1}
.pixel-cursor.is-down span{transform:translate(-50%,0) scale(.92)}

/* V8 precise cursor */
.pixel-cursor{width:22px;height:22px;transform:translate(-50%,-50%)}.pixel-cursor:before{inset:3px;border-width:1px;background:rgba(255,255,255,.07)}.pixel-cursor:after{width:4px;height:4px;box-shadow:5px 0 0 currentColor,-5px 0 0 currentColor,0 5px 0 currentColor,0 -5px 0 currentColor}.pixel-cursor i{display:none}.pixel-cursor span{left:50%;top:calc(100% + 6px);padding:4px 6px;border-width:1px;box-shadow:3px 3px 0 #111;font-size:8px}.pixel-cursor.is-hover{width:38px;height:38px}.pixel-cursor.is-hover:before{inset:2px;border-radius:3px}.pixel-cursor.is-hover span{transform:translate(-50%,0) scale(1);opacity:1}.pixel-cursor.is-down span{transform:translate(-50%,0) scale(.92)}
\n\n/* V9: high-contrast lab action buttons — fixes the invisible white-on-white CTA. */
.lab-card{padding-bottom:82px}
.lab-card>p{padding-right:132px}
.lab-card>a{
  z-index:6;
  right:20px;
  bottom:20px;
  min-width:122px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  color:#071018!important;
  background:#fff!important;
  border:2px solid #071018;
  box-shadow:5px 5px 0 #071018;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:1!important;
  visibility:visible!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.lab-card:nth-child(4)>a{background:#c8ff4d!important;color:#071018!important}
.lab-card>a:hover,.lab-card>a:focus-visible{
  background:#071018!important;
  color:#fff!important;
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 #ff4fd8;
  outline:3px solid #fff;
  outline-offset:3px;
}
.lab-card>a:active{transform:translate(5px,5px);box-shadow:none}
@media(max-width:700px){
  .lab-card{padding-bottom:92px}
  .lab-card>p{padding-right:0}
  .lab-card>a{left:20px;right:20px;bottom:20px;width:auto;min-height:48px}
}

/* V12: hero headline and description collision fix.
   Keeps the split editorial composition while guaranteeing readable text
   at desktop, laptop, tablet, and mobile widths. */
.hero-title-wrap{
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  column-gap:clamp(36px,5vw,96px);
  row-gap:clamp(24px,4vw,52px);
  align-items:center;
  isolation:isolate;
}
.hero-title-wrap h1{
  min-width:0;
  max-width:100%;
  font-size:clamp(4rem,9.4vw,10.8rem);
  line-height:.77;
}
.hero-title-wrap h1 span{
  display:block;
  width:100%;
  max-width:100%;
  padding:.09em .11em .035em;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero-title-wrap p{
  position:relative;
  z-index:4;
  min-width:0;
  max-width:36ch;
  margin:0;
  padding:clamp(18px,2vw,30px);
  color:var(--navy);
  background:rgba(239,239,236,.93);
  border:2px solid var(--navy);
  box-shadow:8px 8px 0 var(--navy);
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
@media(max-width:1280px){
  .hero-title-wrap{
    grid-template-columns:1fr;
    margin-top:clamp(56px,9vh,96px);
  }
  .hero-title-wrap h1{
    font-size:clamp(4rem,13.2vw,10rem);
  }
  .hero-title-wrap p{
    justify-self:end;
    width:min(100%,620px);
    max-width:54ch;
  }
}
@media(max-width:700px){
  .hero-title-wrap{
    margin-top:clamp(48px,9vh,76px);
    row-gap:24px;
  }
  .hero-title-wrap h1{
    font-size:clamp(3.4rem,18vw,7rem);
    line-height:.8;
  }
  .hero-title-wrap h1 span{
    padding:.1em .08em .045em;
  }
  .hero-title-wrap p{
    justify-self:stretch;
    width:100%;
    max-width:none;
    padding:16px;
    font-size:.92rem;
    line-height:1.55;
    box-shadow:6px 6px 0 var(--navy);
  }
}


/* V14: grayscale and footer viewport containment fix.
   The grayscale mode no longer filters the body itself, because a filter on
   body can create a containing/stacking context for fixed descendants. The
   visual sections are filtered individually, while the full-screen menu and
   browser chrome remain anchored to the viewport. */
html{
  min-height:100%;
  background:#202020;
}
body{
  min-height:100vh;
  min-height:100svh;
}
body.is-gray{
  filter:none!important;
}
body.is-gray > .brand-intro,
body.is-gray > main,
body.is-gray > .perspective-footer,
body.is-gray > .paper-grid{
  filter:grayscale(1);
}
body.is-gray > .top-chrome{
  filter:grayscale(1);
}

/* Keep every full-screen menu inside the actual viewport in gray mode. */
.site-menu{
  height:calc(100svh - var(--chrome-h));
  max-height:calc(100svh - var(--chrome-h));
  overscroll-behavior:contain;
  isolation:isolate;
}
@supports(height:100dvh){
  .site-menu{
    height:calc(100dvh - var(--chrome-h));
    max-height:calc(100dvh - var(--chrome-h));
  }
}

/* The footer now fills the remaining viewport and clips the perspective floor.
   This prevents the light-gray document canvas from appearing below it when
   the page is scrolled to the end or grayscale mode is active. */
.perspective-footer{
  min-height:max(520px,100svh);
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
  contain:paint;
  clip-path:inset(0);
  background:#202020;
}
@supports(height:100dvh){
  .perspective-footer{min-height:max(520px,100dvh)}
}
.perspective-footer::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:auto 0 0;
  height:42%;
  background:linear-gradient(to bottom,transparent,#202020 82%);
  pointer-events:none;
}
.floor-grid{
  z-index:1;
  bottom:-18%;
  background-color:#202020;
  height:78%;
  contain:paint;
}
.email-marquee,
.footer-links,
.copyright{
  position:relative;
  z-index:3;
}
.copyright{
  position:absolute;
}

/* Prevent scroll chaining from exposing the page canvas beneath overlays. */
body.menu-open{
  overflow:hidden;
  overscroll-behavior:none;
}
@media(max-width:700px){
  .perspective-footer{min-height:max(620px,100svh)}
  @supports(height:100dvh){.perspective-footer{min-height:max(620px,100dvh)}}
  .floor-grid{bottom:-12%;height:68%}
}

/* V15 Retro Terminal project */
.preview-terminal{background:#0c6974!important;color:#c8ff4d!important}.preview-terminal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.preview-terminal span{position:relative;z-index:3;text-shadow:6px 6px 0 #071018}.goal-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.pixel-window{grid-template-columns:repeat(5,1fr)}

/* V17 project preview containment patch
   Keeps the Roberto Retro OS / Chromatic Forge design, but prevents the
   visual preview panels from spilling, cropping, or covering card text. */
.project-panel{overflow:hidden;min-width:0}
.project-copy{z-index:2;min-width:0}
.project-preview{min-width:0;overflow:hidden;contain:paint;background-repeat:no-repeat;background-position:center;background-size:cover}
.project-preview>img{position:absolute;inset:clamp(10px,1.5vw,20px);width:calc(100% - clamp(20px,3vw,40px));height:calc(100% - clamp(20px,3vw,40px));object-fit:contain;object-position:center;max-width:none;max-height:none;z-index:1;filter:contrast(1.05) saturate(1.04)}
.project-preview>span{font-size:clamp(1.75rem,3.9vw,4.3rem);line-height:.78;max-width:92%;overflow-wrap:normal;text-wrap:balance;pointer-events:none}
.preview-pixel>img,.preview-sketch>img,.preview-ascii>img,.preview-terminal>img{opacity:.96}
.preview-pixel:after{opacity:.55;pointer-events:none}
.preview-particles canvas{z-index:0}
.preview-terminal span{text-shadow:5px 5px 0 rgba(7,16,24,.84)}
@media(max-width:700px){
  .project-panel{grid-template-columns:1fr;min-height:auto}
  .project-preview{min-height:clamp(190px,54vw,320px);border-left:0;border-top:1px solid #111}
  .project-preview>span{font-size:clamp(2rem,11vw,4rem)}
  .project-preview>img{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
}


/* V18 dynamic project preview upgrade
   Makes the circled preview blocks feel like modern interactive screens while keeping the exact Roberto Retro visual identity. */
.project-panel{
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  position:relative;
  overflow:hidden;
}
.project-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 52%,rgba(255,255,255,.20) 52% 54%,transparent 54% 100%);
  mix-blend-mode:overlay;
  opacity:.55;
}
.project-preview{
  position:relative;
  min-height:320px;
  padding:clamp(14px,2vw,24px);
  border-left:2px solid #071018;
  background:
    radial-gradient(circle at 18% 12%,rgba(53,242,255,.26),transparent 34%),
    radial-gradient(circle at 86% 82%,rgba(255,79,216,.22),transparent 36%),
    linear-gradient(135deg,#071018 0%,#071018 42%,#0c2740 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 42px rgba(53,242,255,.14);
  overflow:hidden;
  isolation:isolate;
}
.project-preview::before{
  content:"";
  position:absolute;
  inset:clamp(14px,2vw,24px);
  z-index:0;
  border:2px solid rgba(255,255,255,.84);
  background:
    linear-gradient(rgba(53,242,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,242,255,.10) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18));
  background-size:22px 22px,22px 22px,100% 100%;
  box-shadow:8px 8px 0 rgba(0,0,0,.42),0 0 0 999px rgba(0,0,0,.02);
}
.project-preview::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 48%,rgba(255,255,255,.60) 49%,transparent 50% 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 7px),
    linear-gradient(130deg,transparent 0 52%,rgba(200,255,77,.18) 52% 58%,transparent 58% 100%);
  mix-blend-mode:screen;
  opacity:.55;
  transform:translateX(-38%);
  animation:previewBeam 7s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes previewBeam{
  0%,62%{transform:translateX(-44%);opacity:.18}
  76%{transform:translateX(44%);opacity:.72}
  100%{transform:translateX(44%);opacity:.18}
}
.project-preview>img{
  z-index:1;
  inset:clamp(24px,3vw,36px)!important;
  width:calc(100% - clamp(48px,6vw,72px))!important;
  height:calc(100% - clamp(48px,6vw,72px))!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:saturate(1.22) contrast(1.1) drop-shadow(0 13px 0 rgba(0,0,0,.26));
  transform:translateZ(0) scale(.94);
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease;
}
.project-preview:hover>img,.project-panel:focus-within .project-preview>img{
  transform:translateZ(0) scale(1.02) rotate(-.7deg);
  filter:saturate(1.38) contrast(1.15) drop-shadow(0 16px 0 rgba(0,0,0,.34));
}
.project-preview>span{
  z-index:4;
  position:absolute;
  left:clamp(18px,2vw,28px);
  right:clamp(18px,2vw,28px);
  bottom:clamp(16px,2vw,24px);
  width:auto;
  max-width:none;
  padding:10px 12px 8px;
  border:2px solid rgba(255,255,255,.88);
  background:rgba(7,16,24,.78);
  color:#f3f6ef;
  box-shadow:6px 6px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(200,255,77,.35);
  font-size:clamp(1.15rem,2.5vw,2.65rem)!important;
  line-height:.86!important;
  letter-spacing:.02em;
  text-shadow:3px 3px 0 #071018, -2px 0 0 rgba(255,79,216,.55), 2px 0 0 rgba(53,242,255,.55)!important;
}
.project-preview>span::before{
  content:"LIVE PREVIEW";
  display:block;
  margin-bottom:6px;
  font-family:Departure,monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.16em;
  color:#c8ff4d;
  text-shadow:none;
}
.preview-pixel{color:#f3f6ef!important;background:linear-gradient(135deg,#071018,#151238 48%,#111)!important}
.preview-particles{color:#f3f6ef!important;background:linear-gradient(135deg,#03162b,#071018 45%,#23082b)!important}
.preview-sketch{color:#071018!important;background:linear-gradient(135deg,#f3f6ef,#dffcf3 45%,#f7f4e5)!important}
.preview-sketch::before{border-color:#071018;background:linear-gradient(rgba(7,16,24,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(7,16,24,.08) 1px,transparent 1px),#f5f4ef;background-size:20px 20px,20px 20px,100% 100%}
.preview-sketch>span{background:rgba(243,246,239,.86);color:#071018;text-shadow:2px 2px 0 rgba(53,242,255,.35),-2px 0 0 rgba(255,79,216,.35)!important;border-color:#071018}
.preview-ascii{color:#c8ff4d!important;background:linear-gradient(135deg,#071018,#09172b 48%,#02050a)!important}
.preview-terminal{color:#c8ff4d!important;background:linear-gradient(135deg,#002a32,#071018 55%,#0c6974)!important}
.preview-terminal>span{color:#c8ff4d!important}
@media(max-width:960px){
  .project-panel{grid-template-columns:1fr!important}
  .project-preview{min-height:clamp(230px,50vw,360px);border-left:0;border-top:2px solid #071018}
}
@media(max-width:700px){
  .project-preview{padding:12px;min-height:clamp(210px,58vw,330px)}
  .project-preview::before{inset:12px}
  .project-preview>img{inset:22px!important;width:calc(100% - 44px)!important;height:calc(100% - 44px)!important}
  .project-preview>span{left:16px;right:16px;bottom:16px;font-size:clamp(1.55rem,8vw,2.7rem)!important}
}
@media(prefers-reduced-motion:reduce){.project-preview::after{animation:none;transform:none}}

/* V19: clean premium preview cards.
   The previous V18 overlay label was intentionally dramatic, but it could cover
   the screenshots and make the previews look broken. V19 keeps the motion,
   frame, and retro identity while making the actual project image the hero. */
.project-panel{
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr)!important;
  gap:0;
  overflow:hidden;
}
.project-preview{
  min-height:320px;
  display:block!important;
  padding:0!important;
  background:#050a12!important;
  border-left:2px solid #071018;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 64px rgba(53,242,255,.12)!important;
  isolation:isolate;
}
.project-preview::before{
  content:""!important;
  position:absolute;
  inset:16px!important;
  z-index:4;
  border:1px solid rgba(255,255,255,.55)!important;
  background:
    linear-gradient(90deg,rgba(53,242,255,.42) 0 2px,transparent 2px calc(100% - 2px),rgba(53,242,255,.42) calc(100% - 2px)),
    linear-gradient(0deg,rgba(255,255,255,.18),transparent 28%,transparent 72%,rgba(255,255,255,.16));
  box-shadow:0 0 0 1px rgba(7,16,24,.8), 8px 8px 0 rgba(0,0,0,.38), inset 0 0 26px rgba(53,242,255,.10)!important;
  pointer-events:none;
}
.project-preview::after{
  content:""!important;
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 8px),
    linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.24) 48%,transparent 52% 100%);
  mix-blend-mode:screen;
  opacity:.28;
  transform:none!important;
  animation:previewSweepV19 8s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes previewSweepV19{
  0%,68%{background-position:0 0,-52vw 0;opacity:.18}
  80%{background-position:0 0,0 0;opacity:.42}
  100%{background-position:0 0,52vw 0;opacity:.18}
}
.project-preview>img{
  position:absolute!important;
  inset:18px!important;
  z-index:2!important;
  width:calc(100% - 36px)!important;
  height:calc(100% - 36px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(1.08) contrast(1.05) brightness(.96)!important;
  transform:translateZ(0) scale(1)!important;
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .45s ease!important;
}
.preview-pixel>img,
.preview-sketch>img,
.preview-ascii>img,
.preview-terminal>img{
  object-fit:contain!important;
  background:#061019;
}
.project-preview:hover>img,
.project-panel:focus-within .project-preview>img{
  transform:translateZ(0) scale(1.035)!important;
  filter:saturate(1.22) contrast(1.08) brightness(1)!important;
}
.project-preview>span{
  position:absolute!important;
  z-index:7!important;
  left:24px!important;
  top:24px!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  max-width:calc(100% - 48px)!important;
  display:inline-flex!important;
  align-items:center;
  min-height:28px;
  padding:7px 10px 6px!important;
  border:1px solid #071018!important;
  background:rgba(243,246,239,.92)!important;
  color:#071018!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.72)!important;
  font-family:Departure,monospace!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  text-align:left!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.project-preview>span::before{content:none!important;display:none!important}
.preview-particles canvas{
  z-index:3!important;
  opacity:.28!important;
  mix-blend-mode:screen;
}
.preview-particles>span{background:#c8ff4d!important;color:#071018!important}
.preview-sketch>span{background:#f3f6ef!important;color:#071018!important}
.preview-ascii>span,.preview-terminal>span{background:#071018!important;color:#c8ff4d!important;border-color:#c8ff4d!important}
.project-preview .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:960px){
  .project-panel{grid-template-columns:1fr!important}
  .project-preview{min-height:clamp(230px,56vw,380px);border-left:0;border-top:2px solid #071018}
}
@media(max-width:700px){
  .project-preview{min-height:clamp(220px,64vw,340px)}
  .project-preview::before{inset:12px!important}
  .project-preview>img{inset:14px!important;width:calc(100% - 28px)!important;height:calc(100% - 28px)!important}
  .project-preview>span{left:18px!important;top:18px!important;max-width:calc(100% - 36px)!important;font-size:9px!important}
}