:root{color:#171a20;background:#f7f8fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: rgba(255, 255, 255, .88);--panel-border: rgba(120, 132, 154, .22);--text-soft: #4b5567;--cyan: #1f8bff;--blue: #2563eb;--warm: #f08a24}*{box-sizing:border-box}html{min-height:100%;background:#f7f8fb}body{min-width:320px;min-height:100vh;margin:0}body.modal-open{overflow:hidden}button,input,textarea{font:inherit}a{color:inherit}.portfolio-shell{position:relative;display:grid;min-height:100vh;overflow:hidden;padding:clamp(2rem,4vw,4rem);background:radial-gradient(circle at 18% 22%,rgba(174,201,236,.62),transparent 28rem),radial-gradient(circle at 76% 70%,rgba(235,225,210,.78),transparent 24rem),radial-gradient(circle at 50% 76%,rgba(221,228,238,.86),transparent 24rem),linear-gradient(145deg,#fff,#f3f5f8 48%,#e8ecf2);isolation:isolate}.portfolio-shell:before,.portfolio-shell:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;content:""}.portfolio-shell:before{background:linear-gradient(90deg,rgba(50,64,86,.045) 1px,transparent 1px),linear-gradient(rgba(50,64,86,.04) 1px,transparent 1px);background-size:84px 84px;-webkit-mask-image:radial-gradient(circle at center,black,transparent 70%);mask-image:radial-gradient(circle at center,black,transparent 70%)}.portfolio-shell:after{background:radial-gradient(circle at center,transparent 0 50%,rgba(210,216,226,.42) 86%);pointer-events:none}.circuit-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.circuit{position:absolute;display:block;width:min(36vw,460px);height:min(14vw,170px);border:1px solid rgba(82,112,155,.2);opacity:.64;filter:drop-shadow(0 0 10px rgba(72,124,190,.14))}.circuit:after{position:absolute;width:7px;height:7px;border-radius:999px;background:#5f8fca;box-shadow:0 0 16px #3d7dd980;content:""}.circuit-one{top:-8px;left:-70px;border-right:0;border-bottom-left-radius:48px;transform:skew(-6deg)}.circuit-one:after{top:44px;left:86px}.circuit-two{top:16%;right:-110px;border-left:0;border-top-left-radius:72px}.circuit-two:after{bottom:22px;left:44px;background:#4f8bff}.circuit-three{bottom:9%;left:-120px;border-right:0;border-top-right-radius:70px}.circuit-three:after{top:20px;right:74px}.circuit-four{right:-92px;bottom:-24px;border-left:0;border-top-left-radius:56px;border-color:#bc8f5433;filter:drop-shadow(0 0 12px rgba(196,145,72,.14))}.circuit-four:after{top:40px;left:80px;background:#c99452;box-shadow:0 0 18px #c994526b}.hero{display:grid;align-content:center;justify-items:center;gap:clamp(3.6rem,7vw,6.4rem);width:min(100%,1180px);margin:0 auto;text-align:center}.hero-copy{display:grid;gap:.38rem}.eyebrow{margin:0;color:#32517ecc;font-size:clamp(.72rem,1vw,.82rem);font-weight:600;letter-spacing:.22em;text-transform:uppercase}h1{margin:0;color:#111318;font-size:clamp(3.1rem,8.1vw,6.35rem);font-weight:520;letter-spacing:0;line-height:.95;text-shadow:0 1px 0 #ffffff,0 18px 42px rgba(31,41,55,.14)}.subtitle{margin:0;color:#3f4652;font-size:clamp(1.18rem,3vw,2.05rem);font-weight:400;line-height:1.2}.keyboard-row{display:grid;grid-template-columns:repeat(4,minmax(132px,1fr));gap:clamp(1rem,2.2vw,1.55rem);width:min(100%,780px);perspective:900px}.keyboard-key{position:relative;min-height:clamp(118px,14vw,164px);padding:0;border:0;border-radius:24px;color:#151922;cursor:pointer;background:radial-gradient(circle at 28% 18%,#fff,#fff0 35%),linear-gradient(180deg,#fff,#f9fafc 44%,#d9dee8),linear-gradient(135deg,#fff,#aeb8ca);box-shadow:0 22px #bdc6d6,0 24px 28px #535e7147,0 34px 74px #728bb24d,inset 0 2px 6px #fffffffa,inset 0 -12px 18px #707c9742;transform:translateY(0);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;-webkit-tap-highlight-color:transparent}.keyboard-key:before,.keyboard-key:after{position:absolute;border-radius:inherit;pointer-events:none;content:""}.keyboard-key:before{top:8px;right:9px;bottom:15px;left:9px;border:1px solid rgba(255,255,255,.9);background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.82),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.72),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.3),transparent 58%)}.keyboard-key:after{inset:auto 9px -16px;height:22px;background:linear-gradient(90deg,#4c7ad26b,#5bb8ff6b);filter:blur(9px);opacity:.72;transition:opacity .18s ease,filter .18s ease}.keyboard-key--warm:after{background:linear-gradient(90deg,#4d97e757,#de933c80)}.keyboard-key:hover,.keyboard-key:focus-visible{filter:brightness(1.08);outline:none;transform:translateY(-10px);box-shadow:0 27px #aeb9ca,0 32px 32px #4e586b42,0 42px 86px #5884c459,inset 0 2px 7px #fff,inset 0 -12px 18px #62718e33}.keyboard-key:hover:after,.keyboard-key:focus-visible:after{filter:blur(8px);opacity:1}.keyboard-key:active{transform:translateY(8px);box-shadow:0 11px #aab4c3,0 16px 24px #4a546640,0 20px 46px #4872af3d,inset 0 2px 9px #ffffffe6,inset 0 -10px 16px #434f677a}.key-face{position:relative;z-index:1;display:grid;min-height:inherit;place-items:center;padding:1.4rem;font-size:clamp(1.05rem,2vw,1.36rem);font-weight:500}.bottom-tagline{align-self:end;justify-self:center;margin:2rem 0 0;color:#304157;font-size:clamp(1rem,2vw,1.28rem);font-weight:400;letter-spacing:.14em;text-align:center;text-shadow:0 1px 0 #ffffff}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:clamp(1rem,3vw,2rem);overflow-y:auto;background:#f0f3f8c7;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.modal-panel{width:min(100%,1040px);max-height:min(86vh,860px);overflow:hidden;border:1px solid var(--panel-border);border-radius:24px;background:radial-gradient(circle at 18% 0%,rgba(216,229,248,.8),transparent 24rem),linear-gradient(145deg,#fffffff5,#edf1f7f5);box-shadow:0 0 0 1px #ffffffd1 inset,0 36px 110px #48556a47,0 0 80px #7a98c229}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:clamp(1.2rem,3vw,2rem);border-bottom:1px solid rgba(99,116,143,.16)}.modal-kicker{margin:0 0 .3rem;color:#315f9f;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.modal-header h2{margin:0;color:#12151b;font-size:clamp(1.85rem,4vw,3.2rem);line-height:1}.modal-close{display:grid;flex:0 0 auto;width:44px;height:44px;place-items:center;border:1px solid rgba(99,116,143,.18);border-radius:999px;color:#171a20;cursor:pointer;background:#ffffffc7;font-size:1.7rem;line-height:1;transition:background .16s ease,transform .16s ease}.modal-close:hover,.modal-close:focus-visible{outline:none;background:#fff;transform:scale(1.04)}.modal-content{max-height:calc(min(86vh,860px) - 116px);overflow-y:auto;padding:clamp(1.2rem,3vw,2rem)}.skills-list{display:grid;gap:.85rem}.skill-row,.project-card,.about-facts div,.contact-links,.contact-form{border:1px solid rgba(124,137,160,.18);background:#ffffffad;box-shadow:inset 0 1px #fffc,0 16px 40px #48556a14}.skill-row{display:grid;grid-template-columns:minmax(190px,.38fr) 1fr;gap:1rem;align-items:center;min-height:68px;padding:1rem 1.1rem;border-radius:14px}.skill-row h3{margin:0;color:#151922;font-size:.92rem;font-weight:650}.skill-row p{margin:0;color:#465265;line-height:1.65}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.project-card{display:grid;gap:1rem;padding:1.25rem;border-radius:18px}.project-card h3{margin:0;color:#151922;font-size:1.22rem}.project-card p{margin:0;color:var(--text-soft)}.project-meta{display:grid;gap:.2rem}.project-meta span{color:#315f9f;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.project-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.2rem}.project-actions a,.contact-links a,.primary-action{min-height:44px;border:1px solid rgba(69,110,172,.22);border-radius:999px;color:#172033;background:#ffffffc2;text-decoration:none;transition:background .16s ease,transform .16s ease,border-color .16s ease}.project-actions a{display:inline-flex;align-items:center;padding:.65rem .95rem}.project-actions a:hover,.project-actions a:focus-visible,.contact-links a:hover,.contact-links a:focus-visible,.primary-action:hover,.primary-action:focus-visible{border-color:#315f9f61;outline:none;background:#fffffffa;transform:translateY(-2px)}.about-layout,.contact-layout{display:grid;gap:1.25rem}.about-copy{display:grid;gap:.95rem;max-width:78ch}.about-copy p{margin:0;color:#2f3746;font-size:1.05rem}.about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0}.about-facts div{display:grid;gap:.25rem;padding:1rem;border-radius:16px}.about-facts dt{color:#315f9f;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.about-facts dd{margin:0;color:#172033}.primary-action{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:.75rem 1.15rem;cursor:pointer;font-weight:700}.contact-links{display:flex;flex-wrap:wrap;gap:.75rem;padding:1rem;border-radius:18px}.contact-links a{display:inline-flex;align-items:center;padding:.68rem .95rem}.contact-form{display:grid;gap:1rem;padding:clamp(1rem,3vw,1.4rem);border-radius:18px}.contact-form label{display:grid;gap:.45rem;color:#172033;font-weight:650}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(124,137,160,.24);border-radius:14px;color:#111827;background:#ffffffc7;padding:.86rem .95rem;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:#315f9f8a;outline:none;box-shadow:0 0 0 3px #315f9f1c}@media(max-width:820px){.portfolio-shell{padding:2rem 1.15rem}.hero{gap:3rem}.keyboard-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.55rem,1.8vw,.9rem);width:min(100%,620px)}.keyboard-key{min-height:clamp(82px,17vw,128px);border-radius:20px;box-shadow:0 15px #bdc6d6,0 18px 22px #535e713d,0 24px 54px #728bb23d,inset 0 2px 6px #fffffffa,inset 0 -10px 15px #62718e3d}.key-face{padding:.7rem;font-size:clamp(.78rem,2.8vw,1.05rem)}.project-grid,.about-facts,.skill-row{grid-template-columns:1fr}.bottom-tagline{letter-spacing:.08em}}@media(max-width:520px){.portfolio-shell{min-height:100svh}.eyebrow{letter-spacing:.14em}.keyboard-row{gap:.48rem}.keyboard-key{min-height:78px;border-radius:16px}.keyboard-key:hover,.keyboard-key:focus-visible{transform:translateY(-5px)}.modal-backdrop{align-items:start;padding:.75rem}.modal-panel{max-height:calc(100svh - 1.5rem);border-radius:18px}.modal-header{align-items:center}.modal-content{max-height:calc(100svh - 128px)}}