:root{--bg:#090d0c;--surface:#111816;--surface-2:#17221e;--text:#f3f6f4;--muted:#9ba9a3;--line:rgba(255,255,255,.11);--accent:#43c78a;--accent-2:#25845b;--purple:#9b6dff;--cyan:#38bde8;--orange:#ff9a56;--pink:#ff6d9f;--dark:#07100c;--header:rgba(9,13,12,.8);--container:1180px;--radius:24px;--shadow:0 25px 80px rgba(0,0,0,.28)}
[data-theme="light"]{--bg:#f3f5f1;--surface:#fff;--surface-2:#e6ece7;--text:#111713;--muted:#606b65;--line:rgba(17,23,19,.12);--accent:#167a50;--accent-2:#0e5d3b;--header:rgba(243,245,241,.84);--shadow:0 25px 80px rgba(19,52,34,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6;overflow-x:hidden;transition:background .3s,color .3s}body.nav-open{overflow:hidden}::selection{background:var(--accent);color:var(--dark)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{color:inherit}img{display:block;width:100%;max-width:100%}.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}.section{padding:130px 0;position:relative}.skip-link{position:fixed;left:20px;top:-100px;z-index:9999;background:var(--accent);color:var(--dark);padding:12px 18px;border-radius:10px;font-weight:700}.skip-link:focus{top:20px}.page-noise{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.035;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:2000}.scroll-progress span{display:block;height:100%;width:0;background:var(--accent)}
.site-header{position:fixed;inset:0 0 auto;z-index:900;background:var(--header);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav-wrap{height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--accent);color:var(--dark);border-radius:50%;font:800 13px/1 "Manrope",sans-serif;letter-spacing:-.04em}.brand-copy{display:grid;line-height:1.2}.brand-copy strong{font:700 14px "Manrope",sans-serif}.brand-copy small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.14em}.main-nav{display:flex;align-items:center;gap:31px}.main-nav a{position:relative;color:var(--muted);font-size:14px;font-weight:600}.main-nav a:hover,.main-nav a.active{color:var(--text)}.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--accent);transition:right .25s}.main-nav a.active::after{right:0}.nav-actions{display:flex;align-items:center;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border:1px solid var(--accent);border-radius:100px;background:var(--accent);color:var(--dark);font-weight:700;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}.button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(198,255,69,.18)}.button-small{min-height:42px;padding:0 19px;font-size:13px}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;display:grid;place-items:center;font-size:20px;cursor:pointer;transition:.25s}.icon-button:hover{background:var(--surface-2);border-color:var(--muted)}.menu-toggle{display:none}
.hero{min-height:100vh;padding-top:160px;padding-bottom:0;overflow:hidden}.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:70px;align-items:center}.hero-copy{position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 24px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.eyebrow span{width:28px;height:2px;background:var(--accent)}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-family:"Manrope",sans-serif}h1{margin-bottom:28px;font-size:clamp(3.2rem,6.7vw,6.7rem);line-height:.95;letter-spacing:-.065em;font-weight:700}h1 em,h2 em{color:var(--accent);font-style:normal}.hero-lead{max-width:650px;margin-bottom:36px;color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.25rem)}.hero-actions{display:flex;align-items:center;gap:28px}.text-link{display:inline-flex;align-items:center;gap:9px;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:5px}.text-link i,.project-arrow i,.contact-mail i{transform:rotate(45deg);transition:transform .25s}.text-link:hover i,.project-image:hover .project-arrow i,.contact-mail:hover i{transform:rotate(90deg)}.hero-stats{display:flex;margin-top:70px;border-top:1px solid var(--line);padding-top:26px;gap:0}.hero-stats div{display:grid;padding-right:38px;margin-right:38px;border-right:1px solid var(--line)}.hero-stats div:last-child{border:0}.hero-stats strong{font:700 25px "Manrope",sans-serif}.hero-stats span{color:var(--muted);font-size:12px}.hero-visual{position:relative}.portrait-frame{position:relative;max-width:420px;margin-left:auto;padding:12px;border:1px solid var(--line);border-radius:190px 190px 25px 25px;background:var(--surface);box-shadow:var(--shadow)}.portrait-frame>img{aspect-ratio:4/5.2;object-fit:cover;object-position:center 22%;border-radius:180px 180px 18px 18px;filter:saturate(.7) contrast(1.05)}.portrait-topline{position:absolute;z-index:2;top:30px;left:-12px;right:-12px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;transform:rotate(-3deg);color:#fff}.portrait-card{position:absolute;bottom:35px;left:-55px;right:25px;padding:15px 18px;display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(9,11,16,.8);color:#fff;backdrop-filter:blur(12px)}.portrait-card div{display:grid;line-height:1.25}.portrait-card small{color:#bfc2ca}.portrait-card i{margin-left:auto;font-size:22px;transform:rotate(45deg)}.status-dot{width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px rgba(198,255,69,.15)}.hero-glow{position:absolute;border-radius:50%;filter:blur(1px);opacity:.12;pointer-events:none}.glow-one{width:500px;height:500px;background:var(--accent);right:-250px;top:100px}.glow-two{width:300px;height:300px;border:1px solid var(--accent);left:-150px;bottom:30px}.tech-marquee{margin-top:110px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.marquee-track{min-width:max-content;display:flex;align-items:center;justify-content:space-around;gap:32px;padding:24px 5px;color:var(--muted);font:600 13px "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.11em}.marquee-track i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.section-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:end;margin-bottom:65px}.section-heading h2,.about-intro h2,.contact-copy h2{margin-bottom:0;font-size:clamp(2.5rem,5vw,4.7rem);line-height:1.04;letter-spacing:-.055em}.section-heading>p{color:var(--muted);font-size:17px;margin-bottom:5px}.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.expertise-card{position:relative;min-height:410px;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform .3s,border-color .3s}.expertise-card:hover{transform:translateY(-8px);border-color:rgba(198,255,69,.5)}.card-number{position:absolute;right:28px;top:24px;color:var(--muted);font:600 12px "Manrope",sans-serif}.card-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:70px;border-radius:17px;background:var(--accent);color:var(--dark);font-size:27px}.expertise-card h3{font-size:23px;letter-spacing:-.03em}.expertise-card p{color:var(--muted)}.expertise-card ul{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}.expertise-card li,.project-tags span{padding:6px 11px;border:1px solid var(--line);border-radius:100px;color:var(--muted);font-size:11px}.stack-panel{display:grid;grid-template-columns:.65fr 1.35fr;gap:50px;margin-top:20px;padding:48px;border-radius:var(--radius);background:var(--accent);color:var(--dark)}.stack-panel .eyebrow{color:#4c571f}.stack-panel .eyebrow span{background:var(--dark)}.stack-panel h3{font-size:30px}.stack-list{display:flex;flex-wrap:wrap;gap:9px}.stack-list span{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(9,11,16,.2);border-radius:100px;font-size:13px;font-weight:700}.stack-list i{font-size:18px}
.projects-section{background:var(--surface)}.project-filters{display:flex;gap:8px;margin:-25px 0 35px}.filter-button{padding:10px 16px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}.filter-button span{opacity:.6;margin-left:5px}.filter-button.active{background:var(--accent);border-color:var(--accent);color:var(--dark)}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:55px 22px}.project-card{transition:opacity .3s,transform .3s}.project-card.hidden{display:none}.project-card:nth-child(even){margin-top:75px}.project-image{position:relative;display:block;overflow:hidden;border-radius:var(--radius);background:var(--surface-2)}.project-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.25));opacity:0;transition:.35s}.project-image img{aspect-ratio:16/10;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}.project-image:hover img{transform:scale(1.045);filter:saturate(1.08)}.project-image:hover::after{opacity:1}.project-arrow{position:absolute;right:18px;top:18px;z-index:2;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--dark);font-size:21px;transform:scale(0);transition:transform .3s}.project-image:hover .project-arrow{transform:scale(1)}.project-label{position:absolute;left:18px;top:18px;padding:7px 12px;background:rgba(9,11,16,.8);border-radius:100px;color:#fff;font-size:11px}.project-info{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:20px 5px 0}.project-info p{margin-bottom:5px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.13em}.project-info h3{margin:0;font-size:27px;letter-spacing:-.04em}.project-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.about-intro>p:not(.eyebrow){max-width:580px;color:var(--muted);font-size:17px}.about-intro h2{margin-bottom:35px}.about-intro .text-link{margin-top:15px}.journey{padding:45px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.journey>h3{margin-bottom:40px;font-size:26px}.timeline-item{position:relative;padding:0 0 45px 30px;border-left:1px solid var(--line)}.timeline-item:last-child{padding-bottom:0}.timeline-dot{position:absolute;left:-6px;top:4px;width:11px;height:11px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.timeline-item small{color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-weight:700}.timeline-item h4{margin:9px 0 2px;font-size:20px}.timeline-item p{margin-bottom:10px;color:var(--muted)}.timeline-item div>span{font-size:12px;color:var(--muted)}
.articles-section{padding-top:30px}.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:transform .3s}.article-card:hover{transform:translateY(-7px)}.article-card img{aspect-ratio:16/9;object-fit:cover;filter:saturate(.65);transition:.4s}.article-card:hover img{filter:saturate(1)}.article-card div{padding:25px}.article-card span{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.11em}.article-card h3{min-height:88px;margin:10px 0 20px;font-size:19px;line-height:1.4}.article-card p{margin:0;color:var(--muted);font-weight:700;font-size:13px}.article-card p i{margin-left:5px;transition:transform .2s}.article-card:hover p i{transform:translateX(5px)}
.contact-section{margin-top:100px;background:var(--accent);color:var(--dark)}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.eyebrow.light{color:#4d571f}.eyebrow.light span{background:var(--dark)}.contact-copy h2 em{color:var(--dark);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}.contact-copy>p:not(.eyebrow){max-width:500px;margin:28px 0;color:#3d441c;font-size:17px}.contact-mail{display:inline-flex;align-items:center;gap:12px;font:700 clamp(1.15rem,2vw,1.6rem) "Manrope",sans-serif;border-bottom:2px solid var(--dark);padding-bottom:4px}.social-links{display:flex;gap:20px;margin-top:45px}.social-links a{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px}.social-links i{font-size:20px}.contact-form{padding:38px;border-radius:var(--radius);background:var(--dark);color:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form label{display:grid;gap:8px;margin-bottom:17px;font-size:12px;font-weight:700;color:#c8c9cc}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:12px;outline:0;background:#12151b;color:#fff;padding:13px 15px;resize:vertical;transition:border .2s,box-shadow .2s}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,255,69,.1)}.button-dark{width:100%;margin-top:5px;background:var(--accent)}.form-note{text-align:center;margin:13px 0 0;color:#797d86;font-size:11px}
.site-footer{padding:35px 0;background:#090b10;color:#fff}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.site-footer p{margin:0;color:#797d86;font-size:12px}.back-to-top{font-size:12px;font-weight:700}.back-to-top i{margin-left:5px}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}.js .reveal.visible,.js .hero .reveal{opacity:1;transform:none}.reveal-delay{transition-delay:.15s}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
@media(max-width:1000px){.section{padding:100px 0}.main-nav{position:fixed;inset:80px 0 auto;background:var(--bg);padding:35px 20px 45px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;border-bottom:1px solid var(--line);transform:translateY(-130%);opacity:0;transition:.3s;z-index:-1}.main-nav.open{transform:none;opacity:1}.main-nav a{font-size:20px}.menu-toggle{display:grid}.hero-grid{grid-template-columns:1fr;gap:65px}.hero-copy{max-width:800px}.hero-visual{width:min(85%,470px);margin-inline:auto}.portrait-frame{margin:auto}.section-heading{gap:40px}.expertise-grid{grid-template-columns:1fr 1fr}.expertise-card:last-child{grid-column:1/-1;min-height:auto}.about-grid,.contact-grid{gap:55px}.nav-actions .button-small{display:none}}
@media(max-width:720px){.container{width:min(calc(100% - 28px),var(--container))}.section{padding:78px 0}.nav-wrap{height:70px}.main-nav{inset:70px 0 auto}.brand-copy{display:none}.hero{padding-top:125px}.hero-grid{gap:55px}h1{font-size:clamp(3rem,15vw,4.5rem)}.hero-lead{font-size:1rem}.hero-actions{align-items:flex-start;flex-direction:column}.hero-stats{margin-top:50px;justify-content:space-between}.hero-stats div{padding-right:14px;margin-right:14px}.hero-stats strong{font-size:21px}.hero-stats span{font-size:10px}.portrait-card{left:-5px}.tech-marquee{margin-top:75px}.section-heading{grid-template-columns:1fr;gap:22px;margin-bottom:42px}.section-heading h2,.about-intro h2,.contact-copy h2{font-size:clamp(2.4rem,12vw,3.5rem)}.expertise-grid,.projects-grid,.articles-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.expertise-card{min-height:auto}.expertise-card:last-child{grid-column:auto}.card-icon{margin-bottom:45px}.stack-panel{grid-template-columns:1fr;padding:30px;gap:18px}.project-card:nth-child(even){margin-top:0}.project-filters{margin-top:0;overflow:auto;padding-bottom:5px}.project-info{align-items:flex-start;flex-direction:column}.project-tags{justify-content:flex-start}.journey{padding:30px}.articles-section{padding-top:10px}.article-card h3{min-height:0}.contact-section{margin-top:70px}.form-row{grid-template-columns:1fr}.contact-form{padding:24px}.footer-inner{flex-direction:column;text-align:center}.site-footer .brand-copy{display:grid}}

/* Hero refresh */
.hero{min-height:auto;padding-top:145px;background:radial-gradient(circle at 82% 26%,rgba(198,255,69,.1),transparent 27%)}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(390px,.72fr);gap:clamp(55px,7vw,105px)}
.hero-copy{padding-top:10px}
.hero-kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 27px;padding:8px 13px 8px 11px;border:1px solid var(--line);border-radius:100px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hero-kicker .status-dot{width:7px;height:7px;box-shadow:0 0 0 4px rgba(198,255,69,.12)}
.hero-title{max-width:760px;margin-bottom:25px;font-size:clamp(3.5rem,5.8vw,6rem);line-height:.97;letter-spacing:-.06em}
.hero-title em{display:block;margin-top:8px;color:var(--text);font-style:normal}
.hero-title em::after{content:"";display:inline-block;width:.18em;height:.18em;margin-left:.08em;border-radius:50%;background:var(--accent)}
.hero-lead{max-width:620px;margin-bottom:33px;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.75}
.hero-actions{gap:14px}
.hero-mail{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:100px;color:var(--muted);font-size:14px;font-weight:700;transition:.25s}
.hero-mail span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:var(--text);font-size:18px}
.hero-mail:hover{background:var(--surface);color:var(--text)}
.hero-stats{max-width:590px;margin-top:54px;padding-top:21px}
.hero-stats div{grid-template-columns:auto 1fr;align-items:baseline;gap:9px;padding-right:30px;margin-right:30px}
.hero-stats strong{font-size:22px}
.hero-stats span{font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.hero-visual{isolation:isolate}
.hero-image-card{position:relative;margin-left:auto;padding:11px;border:1px solid var(--line);border-radius:30px;background:var(--surface);box-shadow:var(--shadow);transform:rotate(1.5deg)}
.hero-image-top{display:flex;justify-content:space-between;padding:5px 5px 13px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.14em}
.hero-image-shell{height:515px;overflow:hidden;border-radius:21px;background:var(--surface-2)}
.hero-image-shell img{height:100%;object-fit:cover;object-position:center 27%;filter:saturate(.75) contrast(1.04);transition:filter .35s,transform .6s}
.hero-image-card:hover .hero-image-shell img{filter:saturate(1);transform:scale(1.015)}
.hero-focus{position:absolute;right:-25px;bottom:23px;display:grid;min-width:240px;padding:14px 17px;border:1px solid rgba(255,255,255,.15);border-radius:15px;background:rgba(9,11,16,.88);color:#fff;box-shadow:0 15px 35px rgba(0,0,0,.22);backdrop-filter:blur(10px);transform:rotate(-1.5deg)}
.hero-focus span{color:#a8abb2;font-size:9px;text-transform:uppercase;letter-spacing:.12em}
.hero-focus strong{font:600 13px "Manrope",sans-serif}
.hero-code-card{position:absolute;z-index:2;left:-43px;top:76px;display:grid;min-width:180px;padding:14px 17px;border:1px solid var(--line);border-radius:15px;background:var(--bg);box-shadow:var(--shadow);transform:rotate(-4deg)}
.hero-code-card span{margin-bottom:7px;color:var(--muted);font-size:9px}.hero-code-card code{color:var(--muted);font-size:11px}.hero-code-card strong{color:var(--accent);font:700 13px "Manrope",sans-serif}
.tech-marquee{margin-top:90px}

@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:65px}.hero-copy{max-width:820px}.hero-visual{width:min(88%,520px);margin-inline:auto}.hero-image-card{margin:auto}.hero-image-shell{height:560px}}
@media(max-width:720px){.hero{padding-top:112px}.hero-grid{gap:50px}.hero-title{font-size:clamp(3rem,14vw,4.5rem)}.hero-title em{margin-top:4px}.hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap}.hero-stats{margin-top:42px}.hero-stats div{display:grid;grid-template-columns:1fr;padding-right:12px;margin-right:12px;gap:0}.hero-visual{width:92%}.hero-image-shell{height:440px}.hero-code-card{left:-18px;top:55px;min-width:155px}.hero-focus{right:-15px;min-width:210px}.tech-marquee{margin-top:65px}}
@media(max-width:430px){.hero-title{font-size:3.25rem}.hero-lead{line-height:1.65}.hero-actions .button{width:100%}.hero-mail{padding-left:0}.hero-image-shell{height:390px}.hero-code-card{display:none}.hero-focus{right:-10px;left:20px;min-width:0}.hero-stats span{font-size:9px}}

/* Selected work refresh */
.projects-section{background:var(--surface);overflow:hidden}
.work-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:40px}
.work-heading h2{margin:0;font-size:clamp(2.7rem,5vw,4.7rem);line-height:1.04;letter-spacing:-.055em}
.work-heading h2 em{color:var(--accent);font-style:normal}
.work-heading-side{max-width:430px;justify-self:end}
.work-heading-side p{margin:16px 0 0;color:var(--muted);font-size:16px}
.work-count{display:inline-block;color:var(--accent);font:700 11px "Manrope",sans-serif;letter-spacing:.15em}
.projects-section .project-filters{margin:0 0 34px;padding-top:20px;border-top:1px solid var(--line)}
.work-showcase{display:grid;gap:22px}
.work-featured{display:grid;grid-template-columns:1.35fr .65fr;min-height:470px;border:1px solid var(--line);border-radius:28px;background:var(--bg);overflow:hidden}
.work-featured .work-visual{height:100%;border-radius:0}
.work-featured .work-visual img{height:100%;aspect-ratio:auto}
.work-featured .work-content{display:flex;flex-direction:column;justify-content:center;padding:45px}
.work-featured .work-content h3{font-size:clamp(2.3rem,4vw,4rem)}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.work-card{margin:0!important;border:1px solid var(--line);border-radius:24px;background:var(--bg);overflow:hidden;transition:transform .35s,border-color .35s,opacity .3s}
.work-card:hover{transform:translateY(-5px);border-color:rgba(198,255,69,.42)}
.work-card.hidden{display:none}
.work-visual{position:relative;display:block;height:300px;overflow:hidden;background:var(--surface-2)}
.work-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,11,16,.05),rgba(9,11,16,.35));opacity:.35;transition:opacity .35s}
.work-visual img{height:100%;object-fit:cover;aspect-ratio:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.work-card:hover .work-visual img{transform:scale(1.035);filter:saturate(1.06)}
.work-card:hover .work-visual::after{opacity:.1}
.work-index{position:absolute;z-index:2;left:18px;top:18px;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(9,11,16,.72);color:#fff;font:700 10px "Manrope",sans-serif;backdrop-filter:blur(10px)}
.work-open{position:absolute;z-index:2;right:18px;top:18px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--dark);font-size:20px;transform:scale(.85);transition:transform .3s}
.work-open i,.work-link i{transform:rotate(45deg);transition:transform .25s}
.work-card:hover .work-open{transform:scale(1)}
.work-card:hover .work-open i,.work-link:hover i{transform:rotate(90deg)}
.work-content{padding:28px}
.work-type{margin-bottom:7px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.work-content h3{margin:0 0 14px;font-size:clamp(1.65rem,2.6vw,2.25rem);letter-spacing:-.045em}
.work-description{max-width:550px;margin-bottom:20px;color:var(--muted);font-size:14px;line-height:1.7}
.work-content .project-tags{justify-content:flex-start;margin-bottom:27px}
.work-link{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:auto;padding-bottom:4px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700}
.work-link-muted{color:var(--muted);cursor:default}.work-link-muted i{transform:none}
.private-badge{position:absolute;z-index:2;right:18px;top:18px;padding:8px 12px;border-radius:100px;background:rgba(9,11,16,.8);color:#fff;font-size:10px;font-weight:700;backdrop-filter:blur(10px)}

@media(max-width:900px){.work-heading{grid-template-columns:1fr;gap:25px}.work-heading-side{justify-self:start}.work-featured{grid-template-columns:1fr}.work-featured .work-visual{height:370px}.work-featured .work-content{padding:32px}.work-grid{grid-template-columns:1fr 1fr}.work-visual{height:250px}}
@media(max-width:680px){.work-grid{grid-template-columns:1fr}.work-featured .work-visual,.work-visual{height:240px}.work-featured .work-content,.work-content{padding:24px}.work-heading h2{font-size:2.75rem}.projects-section .project-filters{overflow:auto;white-space:nowrap}.work-description{font-size:13px}}

/* Playful developer motion system */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(67,199,138,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(67,199,138,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.cursor-glow{position:fixed;z-index:1;left:0;top:0;width:340px;height:340px;border-radius:50%;pointer-events:none;opacity:.13;background:radial-gradient(circle,var(--accent),transparent 68%);filter:blur(18px);transform:translate3d(-50%,-50%,0);transition:opacity .25s}
.code-particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--accent);font:700 12px/1 monospace;opacity:.13}
.code-particles span{position:absolute;padding:7px 9px;border:1px solid currentColor;border-radius:8px;animation:codeFloat 11s ease-in-out infinite}
.code-particles span:nth-child(1){left:3%;top:18%;animation-delay:-2s}.code-particles span:nth-child(2){right:4%;top:14%;animation-delay:-7s}.code-particles span:nth-child(3){left:8%;top:68%;animation-delay:-5s}.code-particles span:nth-child(4){right:8%;top:76%;animation-delay:-9s}.code-particles span:nth-child(5){left:42%;top:9%;animation-delay:-4s}.code-particles span:nth-child(6){right:28%;top:58%;animation-delay:-1s}.code-particles span:nth-child(7){left:27%;top:84%;animation-delay:-8s}.code-particles span:nth-child(8){right:40%;top:33%;animation-delay:-6s}
main,.site-footer{position:relative;z-index:2}
.site-header{z-index:900}
.brand-mark{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-radius .3s}.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.08);border-radius:12px}
.main-nav a:hover::after{right:0}.theme-toggle:hover i{animation:iconSpin .6s ease}
.button{position:relative;overflow:hidden}.button:hover{box-shadow:0 12px 30px rgba(31,128,81,.2)}.button i{transition:transform .25s}.button:hover i{transform:translateX(4px)}
.click-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.42);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:ripple .65s ease-out forwards}
.hero{background:radial-gradient(circle at 82% 26%,rgba(42,151,94,.12),transparent 29%)}
.hero-kicker .status-dot{box-shadow:0 0 0 4px rgba(54,175,112,.14);animation:statusPulse 2.2s ease-in-out infinite}
.hero-title .letter{display:inline-block;opacity:1;transform:translateY(.45em) rotate(4deg);animation:letterIn .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*22ms + 140ms)}
.hero-title .letter.space{width:.25em}
.hero-image-card{animation:portraitFloat 5s ease-in-out infinite}
.hero-code-card{animation:codeCardFloat 4.2s ease-in-out infinite}
.hero-code-card strong{display:inline-block;min-height:21px}.hero-code-card strong::after{content:"_";margin-left:2px;animation:blink .8s step-end infinite}
.hero-focus{animation:focusFloat 4.8s ease-in-out infinite}
.glow-one{animation:glowBreathe 5s ease-in-out infinite}.glow-two{animation:orbitSlow 14s linear infinite}
.marquee-track{animation:marqueeDrift 11s ease-in-out infinite alternate}.marquee-track i{animation:dotPulse 1.6s ease-in-out infinite}.marquee-track i:nth-of-type(even){animation-delay:.8s}
.eyebrow span{transform-origin:left;animation:linePulse 2.4s ease-in-out infinite}
.expertise-card:hover .card-icon{animation:iconBounce .55s ease}.expertise-card:hover{border-color:rgba(45,160,101,.5)}
.stack-list span{transition:transform .25s,background .25s}.stack-list span:hover{transform:translateY(-5px) rotate(-2deg);background:rgba(255,255,255,.16)}.stack-list span:nth-child(even):hover{transform:translateY(-5px) rotate(2deg)}
.work-card{transform-style:preserve-3d;will-change:transform}.work-card:hover{border-color:rgba(39,145,90,.5)}
.work-visual::before{content:"";position:absolute;z-index:3;left:0;right:0;top:-3px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;box-shadow:0 0 15px var(--accent)}
.work-card:hover .work-visual::before{opacity:.85;animation:scanProject 1.7s linear infinite}
.work-index{transition:transform .3s,background .3s}.work-card:hover .work-index{transform:rotate(-10deg) scale(1.08);background:var(--accent);color:var(--dark)}
.article-card:hover img{transform:scale(1.04)}.article-card:nth-child(2):hover{transform:translateY(-7px) rotate(1deg)}.article-card:nth-child(3):hover{transform:translateY(-7px) rotate(-1deg)}
.filter-button{transition:transform .2s,background .2s,color .2s}.filter-button:hover{transform:translateY(-2px)}
.social-links a i{transition:transform .25s}.social-links a:hover i{transform:rotate(-8deg) scale(1.15)}
[data-theme="light"] .button,[data-theme="light"] .brand-mark,[data-theme="light"] .filter-button.active,[data-theme="light"] .work-open,[data-theme="light"] .card-icon{color:#fff}
[data-theme="light"] .stack-panel,[data-theme="light"] .contact-section{color:#fff}
[data-theme="light"] .stack-panel .eyebrow,[data-theme="light"] .contact-section .eyebrow,[data-theme="light"] .contact-copy>p:not(.eyebrow){color:rgba(255,255,255,.75)}
[data-theme="light"] .stack-panel .eyebrow span,[data-theme="light"] .contact-section .eyebrow span{background:#fff}
[data-theme="light"] .contact-copy h2 em{color:#fff}
[data-theme="light"] .contact-mail{border-color:#fff}

@keyframes codeFloat{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(18px,-28px,0) rotate(4deg)}}
@keyframes iconSpin{to{transform:rotate(180deg)}}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(5);opacity:0}}
@keyframes statusPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.65}}
@keyframes letterIn{to{opacity:1;transform:none}}
@keyframes portraitFloat{0%,100%{transform:rotate(1.5deg) translateY(0)}50%{transform:rotate(.5deg) translateY(-8px)}}
@keyframes codeCardFloat{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-10px)}}
@keyframes focusFloat{0%,100%{transform:rotate(-1.5deg) translateX(0)}50%{transform:rotate(-.5deg) translateX(6px)}}
@keyframes blink{50%{opacity:0}}
@keyframes glowBreathe{0%,100%{transform:scale(1);opacity:.08}50%{transform:scale(1.12);opacity:.16}}
@keyframes orbitSlow{to{transform:rotate(360deg)}}
@keyframes marqueeDrift{to{transform:translateX(-8%)}}
@keyframes dotPulse{50%{transform:scale(1.8);opacity:.35}}
@keyframes linePulse{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
@keyframes iconBounce{40%{transform:translateY(-7px) rotate(-8deg)}70%{transform:translateY(2px) rotate(3deg)}}
@keyframes scanProject{to{top:100%}}

@media(max-width:800px),(hover:none){.cursor-glow{display:none}.code-particles{opacity:.08}.work-card{transform:none!important}}
@media(prefers-reduced-motion:reduce){.code-particles,.cursor-glow{display:none!important}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.hero-title .letter{opacity:1!important;transform:none!important}.work-card{transform:none!important}}

/* Process — from idea to product */
.process-section{overflow:hidden;background:linear-gradient(145deg,var(--bg),var(--surface))}
.process-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 15% 20%,rgba(155,109,255,.11),transparent 25%),radial-gradient(circle at 85% 80%,rgba(255,154,86,.1),transparent 24%)}
.process-heading h2 em{color:var(--purple)}
.process-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.process-steps{position:relative}.process-steps::before{content:"";position:absolute;left:23px;top:32px;bottom:32px;width:1px;background:linear-gradient(var(--purple),var(--cyan),var(--orange),var(--pink));transform-origin:top;animation:processLine 3s ease-in-out infinite alternate}
.process-step{position:relative;display:grid;grid-template-columns:48px 54px 1fr;gap:18px;align-items:start;padding:18px 0}
.process-step:nth-child(2){transition-delay:.1s}.process-step:nth-child(3){transition-delay:.2s}.process-step:nth-child(4){transition-delay:.3s}
.step-number{position:relative;z-index:2;display:grid;place-items:center;width:47px;height:47px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--muted);font:700 10px "Manrope",sans-serif}
.step-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;font-size:23px;transition:transform .35s,border-radius .35s}.process-step:hover .step-icon{transform:rotate(-9deg) scale(1.08);border-radius:50%}
.color-purple{background:var(--purple)}.color-cyan{background:var(--cyan)}.color-orange{background:var(--orange)}.color-pink{background:var(--pink)}
.process-step h3{margin:0 0 5px;font-size:20px}.process-step p{max-width:430px;margin:0;color:var(--muted);font-size:13px}
.process-blob{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(25px);opacity:.16;pointer-events:none}.blob-purple{left:-150px;top:10%;background:var(--purple)}.blob-orange{right:-140px;bottom:3%;background:var(--orange)}
.code-workbench{position:relative;min-height:510px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:#0b0e16;color:#e8ebf2;box-shadow:0 35px 100px rgba(0,0,0,.34);overflow:hidden;transform:perspective(1200px) rotateY(-2deg)}
.workbench-bar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.09);background:#111622;font:600 10px "Manrope",sans-serif;letter-spacing:.09em}.workbench-bar>div{display:flex;gap:7px}.workbench-bar i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.workbench-bar i:nth-child(2){background:#ffd166}.workbench-bar i:nth-child(3){background:#43c78a}.workbench-bar span{color:#9ba3b4}.workbench-bar small{color:#43c78a;animation:livePulse 1.5s ease infinite}
.workbench-body{padding:35px}.code-lines{margin:0;padding-left:42px;color:#aeb6c6;font:500 14px/2.15 monospace;counter-reset:item}.code-lines li{padding-left:13px;opacity:.28;transform:translateX(-10px);animation:codeLineReveal .4s ease forwards}.code-lines li:nth-child(1){animation-delay:.2s}.code-lines li:nth-child(2){animation-delay:.5s}.code-lines li:nth-child(3){animation-delay:.8s}.code-lines li:nth-child(4){animation-delay:1.1s}.code-lines li:nth-child(5){animation-delay:1.4s}.code-lines li:nth-child(6){animation-delay:1.7s}.code-lines li:nth-child(7){animation-delay:2s}.code-purple{color:#b794ff}.code-blue{color:#53cef5}.code-orange{color:#ffad70}.code-pink{color:#ff7ead}
.terminal-output{position:relative;margin-top:30px;padding:20px;border:1px solid rgba(67,199,138,.25);border-radius:15px;background:rgba(67,199,138,.06);font:12px monospace}.terminal-output>span{display:block;color:#8992a4}.terminal-output strong{display:block;margin-top:8px;color:#64dea2}.terminal-output strong i{margin-right:6px}.terminal-loader{display:flex;align-items:end;gap:4px;height:25px;margin-top:18px}.terminal-loader i{width:5px;border-radius:5px;background:linear-gradient(var(--cyan),var(--purple));animation:terminalBars 1s ease-in-out infinite}.terminal-loader i:nth-child(1){height:30%}.terminal-loader i:nth-child(2){height:70%;animation-delay:.1s}.terminal-loader i:nth-child(3){height:100%;animation-delay:.2s}.terminal-loader i:nth-child(4){height:55%;animation-delay:.3s}.terminal-loader i:nth-child(5){height:80%;animation-delay:.4s}
.workbench-orbit{position:absolute;right:-42px;top:85px;width:125px;height:125px;border:1px dashed rgba(155,109,255,.45);border-radius:50%;animation:orbitSpin 10s linear infinite}.workbench-orbit span{position:absolute;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1c2230;color:#fff;font:700 9px "Manrope",sans-serif}.workbench-orbit span:nth-child(1){left:43px;top:-19px;background:var(--purple)}.workbench-orbit span:nth-child(2){right:-8px;bottom:3px;background:var(--cyan)}.workbench-orbit span:nth-child(3){left:-10px;bottom:4px;background:var(--orange)}

/* Colorful code lab */
.lab-section{overflow:hidden;background:#0b0e16;color:#f6f7fb}
.lab-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px}
.lab-gradient{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(80px);opacity:.15;pointer-events:none}.lab-gradient-one{left:-250px;top:10%;background:var(--purple)}.lab-gradient-two{right:-250px;bottom:0;background:var(--cyan)}
.lab-heading{position:relative;max-width:900px;margin:0 auto 65px;text-align:center}.lab-heading .eyebrow{justify-content:center;color:#9098a8}.lab-heading h2{margin-bottom:25px;font-size:clamp(2.7rem,5vw,4.8rem);line-height:1.04;letter-spacing:-.055em}.lab-heading h2 em{color:transparent;font-style:normal;background:linear-gradient(90deg,var(--purple),var(--cyan),var(--pink),var(--orange));background-size:250% auto;background-clip:text;-webkit-background-clip:text;animation:gradientText 5s linear infinite}.lab-heading>p:last-child{max-width:650px;margin:auto;color:#969dad}
.lab-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.lab-card{position:relative;min-height:360px;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:26px;background:rgba(19,24,37,.86);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s}.lab-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--purple),transparent 45%);box-shadow:0 25px 70px rgba(0,0,0,.3)}
.lab-card-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;color:#858d9e;font:700 10px "Manrope",sans-serif;letter-spacing:.14em}.lab-card-head i{font-size:22px;color:#fff}
.orbit-lab{grid-row:span 2;min-height:738px;background:radial-gradient(circle at 50% 40%,rgba(56,189,232,.14),transparent 30%),rgba(19,24,37,.86)}.orbit-lab h3{position:absolute;left:35px;right:35px;bottom:35px;margin:0;font-size:30px;line-height:1.2;letter-spacing:-.04em}
.tech-orbit{position:absolute;left:50%;top:47%;width:390px;height:390px;transform:translate(-50%,-50%)}.orbit-ring{position:absolute;left:50%;top:50%;border:1px dashed rgba(255,255,255,.18);border-radius:50%}.ring-one{width:350px;height:350px;margin:-175px;animation:orbitSpin 14s linear infinite}.ring-two{width:240px;height:240px;margin:-120px;animation:orbitSpinReverse 9s linear infinite}.orbit-ring span{position:absolute;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:#161d2c;color:#fff;font:700 11px "Manrope",sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.25)}.orbit-ring span:first-child{left:50%;top:-29px;margin-left:-29px}.orbit-ring span:last-child{left:50%;bottom:-29px;margin-left:-29px}.ring-one span:first-child{background:#42b883}.ring-one span:last-child{background:#00a8e8}.ring-two span:first-child{background:#138fc5}.ring-two span:last-child{background:#5b5bd6}
.orbit-core{position:absolute;left:50%;top:50%;width:115px;height:115px;margin:-57px;display:grid;place-items:center;align-content:center;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 70px rgba(155,109,255,.35);animation:corePulse 2.5s ease-in-out infinite}.orbit-core i{font-size:32px}.orbit-core strong{font-size:10px;letter-spacing:.15em}
.principle-lab{border-color:color-mix(in srgb,var(--lab-accent),transparent 70%);background:linear-gradient(135deg,color-mix(in srgb,var(--lab-accent),transparent 86%),rgba(19,24,37,.9))}.lab-switches{display:flex;gap:7px;margin:28px 0}.lab-switch{padding:8px 13px;border:1px solid rgba(255,255,255,.12);border-radius:100px;background:transparent;color:#8e96a6;font-size:11px;cursor:pointer;transition:.25s}.lab-switch:hover{color:#fff;transform:translateY(-2px)}.lab-switch.active{border-color:var(--lab-accent);background:var(--lab-accent);color:#fff}.lab-output{padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(0,0,0,.16)}.output-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:13px;background:var(--lab-accent);font-size:22px;transition:background .3s}.lab-output h3{margin-bottom:8px;font-size:23px}.lab-output p{margin:0;color:#9199a9;font-size:13px}
.color-lab{background:linear-gradient(135deg,rgba(255,109,159,.09),rgba(19,24,37,.9))}.color-stack{display:flex;height:95px;margin:30px 0 22px}.color-stack span{flex:1;margin-left:-12px;border:4px solid #131825;border-radius:18px;box-shadow:-10px 8px 20px rgba(0,0,0,.2);transition:transform .3s}.color-stack span:first-child{margin-left:0;background:var(--purple)}.color-stack span:nth-child(2){background:var(--cyan)}.color-stack span:nth-child(3){background:var(--accent)}.color-stack span:nth-child(4){background:var(--orange)}.color-stack span:nth-child(5){background:var(--pink)}.color-lab:hover .color-stack span:nth-child(odd){transform:translateY(-10px) rotate(-3deg)}.color-lab:hover .color-stack span:nth-child(even){transform:translateY(7px) rotate(3deg)}
.mini-ui{display:flex;align-items:center;gap:10px;padding:13px;border-radius:15px;background:#f7f8fb;color:#10131b}.mini-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink))}.mini-ui>div{display:grid;gap:5px;flex:1}.mini-ui>div i{height:6px;width:75%;border-radius:10px;background:#dfe3eb}.mini-ui>div i:last-child{width:48%}.mini-ui button{padding:8px 12px;border:0;border-radius:9px;background:#111722;color:#fff;font-size:10px}.color-lab h3{margin:22px 0 0;font-size:22px}
.signal-lab{min-height:250px;background:linear-gradient(145deg,rgba(255,154,86,.1),rgba(19,24,37,.9))}.signal-bars{display:flex;align-items:center;justify-content:center;gap:6px;height:100px;margin-top:20px}.signal-bars i{width:7px;height:20%;border-radius:10px;background:linear-gradient(var(--orange),var(--pink));animation:signalWave 1.2s ease-in-out infinite}.signal-bars i:nth-child(2n){animation-delay:.15s}.signal-bars i:nth-child(3n){animation-delay:.3s}.signal-bars i:nth-child(4n){animation-delay:.45s}.signal-lab p{display:flex;align-items:center;gap:9px;margin:0;color:#9ba2b2;font-size:11px}.signal-lab p span{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:statusPulse 1.5s infinite}.signal-lab h3{margin:12px 0 0;font-size:21px}

.spark-trail,.click-burst{position:fixed;z-index:2500;width:7px;height:7px;border-radius:50%;pointer-events:none;background:var(--spark,var(--purple));box-shadow:0 0 12px var(--spark,var(--purple));animation:sparkFade .7s ease-out forwards}.click-burst{width:8px;height:8px;animation:burstOut .65s ease-out forwards}

@keyframes processLine{to{transform:scaleY(.72);filter:hue-rotate(55deg)}}
@keyframes livePulse{50%{opacity:.35}}
@keyframes codeLineReveal{to{opacity:1;transform:none}}
@keyframes terminalBars{50%{height:20%;filter:hue-rotate(80deg)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbitSpinReverse{to{transform:rotate(-360deg)}}
@keyframes gradientText{to{background-position:250% center}}
@keyframes corePulse{50%{transform:scale(1.07);box-shadow:0 0 95px rgba(155,109,255,.5)}}
@keyframes signalWave{50%{height:85%;filter:hue-rotate(70deg)}}
@keyframes sparkFade{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@keyframes burstOut{to{transform:translate(var(--dx),var(--dy)) rotate(180deg) scale(0);opacity:0}}

@media(max-width:1000px){.process-layout{grid-template-columns:1fr}.code-workbench{max-width:720px;width:100%;margin:auto}.lab-grid{grid-template-columns:1fr 1fr}.orbit-lab{grid-row:auto;grid-column:1/-1;min-height:620px}.tech-orbit{width:350px;height:350px}.ring-one{width:320px;height:320px;margin:-160px}}
@media(max-width:680px){.process-layout{gap:45px}.process-step{grid-template-columns:42px 45px 1fr;gap:12px}.step-number,.step-icon{width:42px;height:42px}.process-steps::before{left:20px}.workbench-body{padding:22px 15px}.code-lines{padding-left:32px;font-size:10px}.workbench-orbit{display:none}.code-workbench{min-height:450px}.lab-grid{grid-template-columns:1fr}.orbit-lab{grid-column:auto;min-height:520px}.tech-orbit{width:290px;height:290px}.ring-one{width:270px;height:270px;margin:-135px}.ring-two{width:190px;height:190px;margin:-95px}.orbit-ring span{width:48px;height:48px}.lab-card{padding:24px}.lab-heading{text-align:left}.lab-heading .eyebrow{justify-content:flex-start}.lab-heading h2{font-size:2.7rem}.lab-switches{overflow:auto}.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){.process-steps::before,.workbench-bar small,.terminal-loader i,.workbench-orbit,.orbit-ring,.orbit-core,.signal-bars i,.signal-lab p span,.lab-heading h2 em{animation:none!important}.code-lines li{opacity:1!important;transform:none!important}}

/* Site-wide colorful playground skin */
body{background-color:var(--bg);background-image:radial-gradient(circle at 8% 12%,rgba(155,109,255,.07),transparent 24%),radial-gradient(circle at 92% 38%,rgba(56,189,232,.06),transparent 24%)}
.site-header{border-bottom-color:rgba(255,255,255,.08);background:rgba(9,13,18,.78)}
[data-theme="light"] .site-header{background:rgba(243,245,241,.85)}
.scroll-progress span{background:linear-gradient(90deg,var(--purple),var(--cyan),var(--accent),var(--orange),var(--pink));box-shadow:0 0 15px var(--cyan)}
.hero{background-image:radial-gradient(circle at 78% 22%,rgba(56,189,232,.15),transparent 24%),radial-gradient(circle at 9% 66%,rgba(155,109,255,.1),transparent 22%),radial-gradient(circle at 70% 82%,rgba(255,109,159,.08),transparent 22%)}
.hero-title em{color:transparent;background:linear-gradient(90deg,var(--purple),var(--cyan),var(--accent),var(--orange));background-size:220% auto;background-clip:text;-webkit-background-clip:text;animation:gradientText 6s linear infinite}
.hero-title em::after{background:var(--pink);box-shadow:0 0 22px rgba(255,109,159,.5)}
.hero-image-card::before{content:"";position:absolute;z-index:-1;inset:-3px;border-radius:33px;background:linear-gradient(135deg,var(--purple),var(--cyan),var(--accent),var(--orange),var(--pink));background-size:300% 300%;filter:blur(13px);opacity:.38;animation:colorFlow 7s ease infinite}
.hero-code-card{border-color:rgba(155,109,255,.32)}.hero-focus{border-color:rgba(56,189,232,.28)}
.marquee-track i:nth-of-type(4n+1){background:var(--purple)}.marquee-track i:nth-of-type(4n+2){background:var(--cyan)}.marquee-track i:nth-of-type(4n+3){background:var(--orange)}.marquee-track i:nth-of-type(4n){background:var(--pink)}

#expertise{overflow:hidden;background:radial-gradient(circle at 0 45%,rgba(155,109,255,.12),transparent 25%),radial-gradient(circle at 100% 75%,rgba(56,189,232,.1),transparent 26%),var(--bg)}
#expertise .section-heading h2 em{color:var(--cyan)}
.expertise-card{--card-tone:var(--purple);background:linear-gradient(145deg,color-mix(in srgb,var(--card-tone),transparent 91%),var(--surface));overflow:hidden}
.expertise-card:nth-child(2){--card-tone:var(--cyan)}.expertise-card:nth-child(3){--card-tone:var(--orange)}
.expertise-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--card-tone),transparent);transform:scaleX(.25);transition:transform .4s}.expertise-card:hover::before{transform:scaleX(1)}
.expertise-card .card-icon{background:var(--card-tone);color:#fff;box-shadow:0 12px 35px color-mix(in srgb,var(--card-tone),transparent 65%)}
.expertise-card .card-number{color:var(--card-tone)}
.stack-panel{position:relative;overflow:hidden;background:linear-gradient(115deg,#5937b5,#147a83,#167a50,#a65325);background-size:250% 250%;color:#fff;animation:colorFlow 10s ease infinite}
.stack-panel::after{content:"</>";position:absolute;right:-25px;bottom:-45px;color:rgba(255,255,255,.1);font:800 130px/1 monospace;transform:rotate(-10deg)}
.stack-panel .eyebrow{color:rgba(255,255,255,.7)}.stack-panel .eyebrow span{background:#fff}.stack-list{position:relative;z-index:2}.stack-list span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}

.projects-section{background-image:radial-gradient(circle at 10% 10%,rgba(255,154,86,.09),transparent 25%),radial-gradient(circle at 90% 90%,rgba(255,109,159,.09),transparent 24%)}
.work-heading h2 em{color:var(--orange)}
.work-card{--work-tone:var(--purple);background:linear-gradient(145deg,color-mix(in srgb,var(--work-tone),transparent 94%),var(--bg))}.work-grid .work-card:nth-child(1){--work-tone:var(--cyan)}.work-grid .work-card:nth-child(2){--work-tone:var(--purple)}.work-grid .work-card:nth-child(3){--work-tone:var(--orange)}.work-grid .work-card:nth-child(4){--work-tone:var(--pink)}.work-grid .work-card:nth-child(5){--work-tone:var(--accent)}
.work-card .work-type{color:var(--work-tone)}.work-card .work-open{background:var(--work-tone);color:#fff}.work-card:hover{border-color:color-mix(in srgb,var(--work-tone),transparent 45%);box-shadow:0 25px 70px color-mix(in srgb,var(--work-tone),transparent 87%)}
.work-card .work-index{border-color:color-mix(in srgb,var(--work-tone),white 20%)}.work-card:hover .work-index{background:var(--work-tone);color:#fff}
.filter-button:nth-child(2).active{background:var(--cyan);border-color:var(--cyan)}.filter-button:nth-child(3).active{background:var(--purple);border-color:var(--purple)}

#about{overflow:hidden;background:radial-gradient(circle at 16% 55%,rgba(255,109,159,.1),transparent 25%),radial-gradient(circle at 85% 35%,rgba(155,109,255,.1),transparent 24%),var(--bg)}
#about .about-intro h2 em{color:var(--pink)}
.journey{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(155,109,255,.08),rgba(255,109,159,.05),var(--surface));border-color:rgba(155,109,255,.2)}
.journey::after{content:"01\A 10\A 11";white-space:pre;position:absolute;right:18px;top:10px;color:rgba(155,109,255,.08);font:800 74px/.78 monospace;transform:rotate(8deg)}
.timeline-item:first-of-type .timeline-dot{background:var(--purple);box-shadow:0 0 0 1px var(--purple),0 0 18px rgba(155,109,255,.5)}.timeline-item:last-child .timeline-dot{background:var(--pink);box-shadow:0 0 0 1px var(--pink),0 0 18px rgba(255,109,159,.5)}

.articles-section{background:radial-gradient(circle at 50% 100%,rgba(56,189,232,.08),transparent 32%)}
.articles-section .section-heading h2 em{color:var(--cyan)}
.article-card{--article-tone:var(--purple);position:relative;background:linear-gradient(145deg,color-mix(in srgb,var(--article-tone),transparent 93%),var(--surface));border-color:color-mix(in srgb,var(--article-tone),transparent 78%)}.article-card:nth-child(2){--article-tone:var(--orange)}.article-card:nth-child(3){--article-tone:var(--cyan)}
.article-card::before{content:"";position:absolute;z-index:3;left:18px;right:18px;top:0;height:3px;border-radius:3px;background:var(--article-tone);box-shadow:0 0 18px var(--article-tone)}.article-card span{color:var(--article-tone)}.article-card:hover{box-shadow:0 22px 60px color-mix(in srgb,var(--article-tone),transparent 87%)}

.contact-section{position:relative;overflow:hidden;background:linear-gradient(120deg,#5836b3,#137b91,#14754d,#b85b29);background-size:300% 300%;color:#fff;animation:colorFlow 12s ease infinite}
.contact-section::before,.contact-section::after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.14);border-radius:50%;animation:orbitSlow 18s linear infinite}.contact-section::before{left:-190px;top:-120px}.contact-section::after{right:-140px;bottom:-210px;animation-direction:reverse}
.contact-section .eyebrow,.contact-copy>p:not(.eyebrow){color:rgba(255,255,255,.75)}.contact-section .eyebrow span{background:#fff}.contact-copy h2 em{color:#fff}.contact-mail{border-color:#fff}
.contact-form{position:relative;background:rgba(8,12,18,.82);border:1px solid rgba(255,255,255,.15);box-shadow:0 28px 80px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.contact-form::before{content:"SEND_MESSAGE()";position:absolute;right:25px;top:15px;color:rgba(255,255,255,.08);font:700 12px monospace}.contact-form .button{background:linear-gradient(90deg,var(--purple),var(--cyan));border:0;color:#fff}
.site-footer{border-top:1px solid rgba(255,255,255,.08);background:#080a10}

/* Ctrl + K command palette */
body.command-open{overflow:hidden}.command-toggle{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);cursor:pointer;transition:.25s}.command-toggle:hover{border-color:var(--purple);color:var(--text);transform:translateY(-2px)}.command-toggle i{font-size:17px;color:var(--purple)}.command-toggle kbd,.command-search kbd,.command-links kbd,.command-foot kbd{border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.05);padding:2px 5px;color:var(--muted);font:600 9px "Manrope",sans-serif}
.command-menu{position:fixed;inset:0;z-index:4000;display:grid;place-items:start center;padding-top:min(13vh,120px)}.command-menu[hidden]{display:none}.command-backdrop{position:absolute;inset:0;border:0;background:rgba(5,7,12,.72);backdrop-filter:blur(12px);opacity:0;transition:opacity .22s}.command-panel{position:relative;width:min(calc(100% - 28px),620px);max-height:76vh;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:#101520;color:#f4f6fb;box-shadow:0 35px 120px rgba(0,0,0,.55);overflow:hidden;opacity:0;transform:translateY(-18px) scale(.97);transition:opacity .22s,transform .22s}.command-menu.open .command-backdrop,.command-menu.open .command-panel{opacity:1}.command-menu.open .command-panel{transform:none}
.command-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.command-head>div{display:flex;align-items:center;gap:12px}.command-head>div>div{display:grid;line-height:1.25}.command-head strong{font:700 13px "Manrope",sans-serif}.command-head small{color:#858d9d;font-size:10px}.command-logo{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:linear-gradient(135deg,var(--purple),var(--cyan));font-size:19px}.command-close{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:transparent;color:#9aa2b2;cursor:pointer}.command-close:hover{color:#fff;background:rgba(255,255,255,.07)}
.command-search{display:flex;align-items:center;gap:10px;margin:15px 15px 7px;padding:11px 13px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:#0b0f18}.command-search>i{color:var(--cyan);font-size:19px}.command-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff}.command-search input::placeholder{color:#687183}.command-links{padding:7px 10px 13px;overflow:auto}.command-links a{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:10px;border:1px solid transparent;border-radius:13px;outline:0;transition:.2s}.command-links a:hover,.command-links a:focus{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.055);transform:translateX(4px)}.command-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;color:#fff;font-size:18px}.command-links a>div{display:grid;line-height:1.3}.command-links strong{font:600 12px "Manrope",sans-serif}.command-links small{color:#737c8e;font-size:10px}.command-links a>kbd{margin-right:5px}.command-foot{display:flex;gap:18px;padding:11px 20px;border-top:1px solid rgba(255,255,255,.08);color:#697285;font-size:9px}.command-foot span{display:flex;align-items:center;gap:4px}.command-foot span:last-child{margin-left:auto;color:#4e5768}

@keyframes colorFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media(max-width:1120px){.command-toggle kbd{display:none}.command-toggle{width:42px;justify-content:center;padding:0}}
@media(max-width:720px){.command-toggle{display:none}.command-menu{padding-top:7vh}.command-panel{max-height:86vh}.command-foot span:first-child{display:none}.hero-title em{animation:none}.stack-panel::after{font-size:90px}}
@media(prefers-reduced-motion:reduce){.hero-title em,.hero-image-card::before,.stack-panel,.contact-section{animation:none!important}.command-panel,.command-backdrop{transition:none!important}}

/* Complete light theme — follows the device preference */
.device-theme-note{display:block;margin-top:5px;color:#69756e;font-size:9px}.device-theme-note i{margin-right:4px;color:var(--accent)}
[data-theme="light"] body{background-image:radial-gradient(circle at 8% 12%,rgba(119,74,205,.08),transparent 24%),radial-gradient(circle at 92% 38%,rgba(25,142,178,.07),transparent 24%)}
[data-theme="light"] .hero{background-image:radial-gradient(circle at 78% 22%,rgba(35,154,187,.13),transparent 24%),radial-gradient(circle at 9% 66%,rgba(123,81,207,.09),transparent 22%),radial-gradient(circle at 70% 82%,rgba(211,70,120,.07),transparent 22%)}
[data-theme="light"] .hero-image-card{background:#fff}[data-theme="light"] .hero-code-card{background:#f9faf8}[data-theme="light"] .hero-code-card code{color:#69736d}
[data-theme="light"] .projects-section{background-color:#e9eee9}[data-theme="light"] .work-card{background:linear-gradient(145deg,color-mix(in srgb,var(--work-tone),transparent 94%),#fff)}
[data-theme="light"] .article-card{background:linear-gradient(145deg,color-mix(in srgb,var(--article-tone),transparent 93%),#fff)}
[data-theme="light"] .lab-section{background:#eef2f5;color:#111820}
[data-theme="light"] .lab-section::before{background-image:linear-gradient(rgba(16,24,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,32,.04) 1px,transparent 1px)}
[data-theme="light"] .lab-heading .eyebrow,[data-theme="light"] .lab-heading>p:last-child{color:#606d78}
[data-theme="light"] .lab-card{border-color:rgba(22,31,40,.11);background:rgba(255,255,255,.87);box-shadow:0 20px 60px rgba(28,52,39,.07)}
[data-theme="light"] .lab-card:hover{border-color:color-mix(in srgb,var(--purple),transparent 55%);box-shadow:0 25px 70px rgba(50,42,82,.13)}
[data-theme="light"] .lab-card-head{color:#687581}[data-theme="light"] .lab-card-head i{color:#172029}
[data-theme="light"] .orbit-lab{background:radial-gradient(circle at 50% 40%,rgba(56,189,232,.16),transparent 32%),rgba(255,255,255,.9)}
[data-theme="light"] .orbit-ring{border-color:rgba(20,30,38,.17)}[data-theme="light"] .orbit-ring span{border-color:rgba(255,255,255,.8);box-shadow:0 12px 30px rgba(29,44,54,.14)}
[data-theme="light"] .principle-lab{background:linear-gradient(135deg,color-mix(in srgb,var(--lab-accent),transparent 90%),rgba(255,255,255,.92))}
[data-theme="light"] .lab-switch{border-color:rgba(20,30,38,.13);color:#66727d}[data-theme="light"] .lab-switch:hover{color:#111820}[data-theme="light"] .lab-switch.active{color:#fff}
[data-theme="light"] .lab-output{border-color:rgba(20,30,38,.09);background:rgba(255,255,255,.72)}[data-theme="light"] .lab-output p{color:#66727d}
[data-theme="light"] .color-lab{background:linear-gradient(135deg,rgba(255,109,159,.1),rgba(255,255,255,.92))}
[data-theme="light"] .signal-lab{background:linear-gradient(145deg,rgba(255,154,86,.13),rgba(255,255,255,.94))}[data-theme="light"] .signal-lab p{color:#67727c}
[data-theme="light"] .site-footer{border-top-color:rgba(17,23,19,.1);background:#e8ede9;color:#111713}[data-theme="light"] .site-footer p{color:#68736d}[data-theme="light"] .device-theme-note{color:#7b857f}
[data-theme="light"] .footer-inner .brand-mark{color:#fff}
@media(max-width:720px){.device-theme-note{margin-top:7px}}

/* The animated role uses per-letter color so it remains readable in every theme. */
.hero-title em{color:var(--text);background:none;animation:none}
.hero-title em .letter:nth-child(5n+1){color:var(--purple)}
.hero-title em .letter:nth-child(5n+2){color:var(--cyan)}
.hero-title em .letter:nth-child(5n+3){color:var(--accent)}
.hero-title em .letter:nth-child(5n+4){color:var(--orange)}
.hero-title em .letter:nth-child(5n){color:var(--pink)}

/* Photo-free animated developer workspace */
.hero-dev-shell{display:flex;background:#0b0f17;color:#cbd2df;text-align:left}
.dev-sidebar{width:52px;flex:0 0 52px;display:flex;flex-direction:column;align-items:center;gap:25px;padding:16px 0;border-right:1px solid rgba(255,255,255,.08);background:#101621;color:#647083;font-size:19px}.dev-sidebar>i{transition:color .25s,transform .25s}.dev-sidebar>i:hover{color:#fff;transform:scale(1.15)}.dev-sidebar>i:last-child{margin-top:auto}.dev-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--cyan));color:#fff;font-size:18px;box-shadow:0 8px 22px rgba(111,82,205,.28)}
.dev-workspace{min-width:0;flex:1;display:flex;flex-direction:column}.dev-tabs{height:44px;display:flex;border-bottom:1px solid rgba(255,255,255,.08);background:#111722;overflow:hidden}.dev-tabs span{display:flex;align-items:center;gap:7px;padding:0 14px;border-right:1px solid rgba(255,255,255,.06);color:#687386;font:500 10px "Manrope",sans-serif;white-space:nowrap}.dev-tabs span.active{border-top:2px solid var(--cyan);background:#0b0f17;color:#dce2eb}.dev-tabs i{font-size:15px;color:#42b883}.dev-tabs span:nth-child(2) i{color:#f0c948}.dev-tabs b{margin-left:8px;color:#687386}
.dev-breadcrumb{height:36px;display:flex;align-items:center;gap:5px;padding:0 14px;color:#687386;font-size:9px}.dev-breadcrumb i{font-size:9px}.dev-breadcrumb strong{color:#aeb7c6}
.dev-code{flex:1;padding:7px 0 8px;font:500 11px/1.95 monospace;overflow:hidden}.dev-code .line{display:grid;grid-template-columns:34px 1fr;min-height:22px;opacity:.28;transform:translateX(-8px);animation:devLineIn .35s ease forwards}.dev-code .line:nth-child(1){animation-delay:.2s}.dev-code .line:nth-child(2){animation-delay:.35s}.dev-code .line:nth-child(3){animation-delay:.5s}.dev-code .line:nth-child(4){animation-delay:.65s}.dev-code .line:nth-child(5){animation-delay:.8s}.dev-code .line:nth-child(6){animation-delay:.95s}.dev-code .line:nth-child(7){animation-delay:1.1s}.dev-code .line:nth-child(8){animation-delay:1.25s}.dev-code .line:nth-child(9){animation-delay:1.4s}.dev-code .line:nth-child(10){animation-delay:1.55s}.dev-code .line>b{padding-right:10px;color:#3f4858;text-align:right;font-weight:400;user-select:none}.dev-code code{position:relative;color:#c4ccd8;white-space:nowrap}.active-line{background:rgba(56,189,232,.06);border-left:2px solid var(--cyan)}.syntax-purple{color:#b68cff;font-style:normal}.syntax-cyan{color:#54cef2;font-style:normal}.syntax-orange{color:#ffae75}.syntax-pink{color:#ff7daa}.code-caret{display:inline-block;width:2px;height:15px;margin-left:2px;vertical-align:-3px;background:var(--cyan);animation:blink .8s step-end infinite}
.dev-console{padding:10px 14px 13px;border-top:1px solid rgba(255,255,255,.08);background:#090d14;font:9px/1.6 monospace}.console-head{display:flex;gap:16px;margin-bottom:7px;color:#525d70;font-size:8px;letter-spacing:.08em}.console-head strong{color:#c1c8d4;border-bottom:1px solid var(--cyan)}.dev-console p{margin:2px 0;color:#7d8798}.dev-console p>i:first-child{color:var(--purple)}.dev-console p span{color:#bfc7d3}.console-success{color:#67dca2!important}.console-success strong{color:#54cef2}.console-progress{height:2px;margin-top:8px;overflow:hidden;background:#171e29}.console-progress span{display:block;width:45%;height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan),var(--accent));box-shadow:0 0 10px var(--cyan);animation:consoleLoading 2.2s ease-in-out infinite}
.hero-focus strong i{margin-right:5px;color:var(--accent)}
@keyframes devLineIn{to{opacity:1;transform:none}}
@keyframes consoleLoading{0%{transform:translateX(-110%)}70%,100%{transform:translateX(245%)}}
@media(max-width:520px){.dev-sidebar{width:42px;flex-basis:42px;gap:20px;font-size:16px}.dev-code{font-size:9px}.dev-code .line{grid-template-columns:27px 1fr}.dev-tabs span{padding:0 9px}.dev-tabs span:nth-child(2){display:none}.dev-code .line:nth-child(5),.dev-code .line:nth-child(8){display:none}.dev-console{padding-inline:9px}.console-head{gap:9px}.console-head span:nth-child(2),.console-head span:nth-child(4){display:none}}
@media(prefers-reduced-motion:reduce){.dev-code .line{opacity:1!important;transform:none!important}.console-progress span,.code-caret{animation:none!important}}