@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";body{margin:0;padding:0;font-family:Space Grotesk,Poppins,system-ui,sans-serif;background:#04060c;color:#eef2fa;-webkit-font-smoothing:antialiased;min-height:100vh}.App{max-width:1380px;margin:0 auto;padding:10px}.playground-loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000;color:#9fc87a;font-size:1.1rem;font-style:italic;letter-spacing:1px}.main{padding:0 20px 90px}.main-spacer{height:100px}.footer{text-align:center;padding:50px 0 60px}.world-mute{position:absolute;bottom:18px;right:20px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:#0a0f1973;font-size:1.1rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .25s ease;z-index:30}.world-mute:hover{border-color:#fffc;transform:translateY(-2px)}.blackhole-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background:#000;animation:blackhole-fade-in 1.8s ease-out}@keyframes blackhole-fade-in{0%{opacity:0}to{opacity:1}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:#02040a99;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:modal-fade .3s ease both}.modal-content{position:relative;width:min(420px,100%);padding:30px 28px 26px;border-radius:18px;text-align:center;color:#fff;background:#0a0d18e0;border:1px solid var(--glass-border-hover);box-shadow:0 30px 70px #0009,0 0 40px #8cb4ff26;animation:modal-rise .45s var(--ease-out) both}.contact-me-title{margin:0 0 18px;font-family:var(--font-display);font-size:1.7rem;font-weight:600;letter-spacing:-.02em}.email-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:#ffffff0a;border:1px solid var(--glass-border)}.email-text{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.85rem;color:var(--ice-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-copy{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:8px;border-radius:8px;border:1px solid var(--glass-border);background:#b9d3ff14;color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,border-color .2s ease}.email-copy:hover{background:#b9d3ff29;border-color:var(--glass-border-hover)}.close-button{margin-top:16px;padding:10px 30px;border-radius:999px;border:1px solid var(--glass-border-hover);background:#b9d3ff14;color:#fff;font-family:inherit;font-size:.92rem;cursor:pointer;transition:background .2s ease,transform .35s var(--ease-out)}.close-button:hover{background:#b9d3ff29;transform:translateY(-2px)}.email-copy:focus-visible,.close-button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-rise{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}.header{text-align:center;padding:18px 10px 10px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:2px 50px 0}.logo{height:35px;filter:invert(100%) brightness(1000%);display:block}.social-icons{display:flex;gap:15px}.social-icons a{display:flex;color:#bcbcbc;font-size:1.8rem;transition:color .3s ease,transform .3s ease}.social-icons a:hover{color:#fff;transform:translateY(-3px)}.hero{position:relative;padding:54px 10px 6px}.hero:before{content:"";position:absolute;left:50%;top:46%;width:min(900px,100%);height:70%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(3,5,12,.72),rgba(3,5,12,.35) 60%,transparent);z-index:-1;pointer-events:none}.hero-name{margin:0 0 14px;font-family:var(--font-display);font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff}.hero-name span{display:inline-block;background:linear-gradient(180deg,#fff 30%,#b9cdf0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(160,195,255,.35));animation:letter-in .9s var(--ease-out) both;padding:.04em .06em .2em;margin:-.04em -.06em -.2em}@keyframes letter-in{0%{opacity:0;transform:translateY(.35em);filter:blur(10px)}to{opacity:1;transform:none;filter:drop-shadow(0 0 22px rgba(160,195,255,.35))}}.hero-tagline{margin:0 0 24px;font-size:1.12rem;color:#e6ecf7;text-shadow:0 0 12px rgba(3,5,12,.95),0 1px 2px rgba(0,0,0,.9);animation:hero-rise .8s var(--ease-out) .7s both}.description{font-size:1.02rem;line-height:1.75;max-width:680px;margin:0 auto;padding:0 0 13px;color:#d6dded;text-shadow:0 0 14px rgba(3,5,12,.95),0 0 4px rgba(3,5,12,.9),0 1px 2px rgba(0,0,0,.9);animation:hero-rise .8s var(--ease-out) .85s both}.accent-word{font-weight:600;color:transparent;background-image:linear-gradient(90deg,#e2ecff,#9dbcff);background-image:linear-gradient(90deg,color-mix(in oklab,#ffe2b8 calc(var(--warmth, 0) * 100%),#e2ecff),color-mix(in oklab,#ffa25e calc(var(--warmth, 0) * 100%),#9dbcff));-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 3px rgba(3,5,12,1)) drop-shadow(0 0 10px rgba(3,5,12,.85))}@keyframes hero-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.button-container{margin-top:20px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;animation:hero-rise .8s var(--ease-out) 1s both}.button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:11px 22px 11px 26px;margin:0;line-height:1.4;border-radius:999px;border:1px solid rgba(185,211,255,.35);color:#fff;background:#0c101e8c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-decoration:none;font-size:.92rem;font-weight:500;letter-spacing:.01em;font-family:inherit;cursor:pointer;box-shadow:inset 0 1px #ffffff1f,0 8px 22px #00000059;transition:transform .4s var(--ease-out),box-shadow .4s ease,border-color .3s ease,background .3s ease}.button svg{transition:transform .35s var(--ease-out)}.button:first-child{color:#0b1020;background:linear-gradient(180deg,#f4f8ff,#c9dcff);border-color:#fffc}.button:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skew(-20deg);transition:left .6s ease;pointer-events:none}.button:hover{transform:translateY(-2px);border-color:#dce9ffcc;box-shadow:inset 0 1px #fff3,0 0 26px #8cb4ff66,0 10px 26px #00000073}.button:hover svg{transform:translate(2px,-2px)}.button:first-child:hover svg{transform:translate(2px,2px)}.button:hover:before{left:120%}.button:focus-visible{outline:2px solid var(--ice);outline-offset:3px}@media (max-width: 640px){.topbar{padding:2px 14px 0}.hero{padding-top:36px}.hero-tagline{font-size:1rem}.description{font-size:.95rem}}@media (prefers-reduced-motion: reduce){.hero-name span,.hero-tagline,.description,.button-container{animation:none}}.shooting-stars-container{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;pointer-events:none}.shooting-star{position:absolute;top:50%;left:70%;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 0 4px #ffffff1a,0 0 0 8px #ffffff1a,0 0 20px #ffffff1a;animation:animate-star 3s linear infinite;rotate:315deg}.shooting-star:before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:300px;height:1px;background:linear-gradient(90deg,white,transparent)}@keyframes animate-star{0%{transform:translate(0);opacity:1}70%{opacity:.8}to{transform:translate(-1000px);opacity:0}}.shooting-star:nth-child(1){top:0;right:0;animation-delay:0s;animation-duration:1s}.shooting-star:nth-child(2){top:0;right:180px;animation-delay:.2s;animation-duration:3s}.blob-container{position:fixed;transform:translate(-50%,-50%);filter:blur(100px);z-index:-1}.blob{position:absolute;width:100%;height:100%;border-radius:50%;animation:blob-animation 8s infinite alternate ease-in-out}@keyframes blob-animation{0%{transform:scale(1) translate(0)}to{transform:scale(1.25) translate(-30px,20px)}}.section-toggle-wrap{display:flex;justify-content:flex-start;margin:10px auto 22px;max-width:1300px}.section-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px #00000059}.toggle-indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(180deg,#dce9ff3d,#b9d3ff1a);border:1px solid rgba(220,233,255,.35);box-shadow:0 0 18px var(--glow),inset 0 1px #ffffff40;transform:translate(calc(var(--active, 0) * 100%));transition:transform .5s var(--ease-out)}.toggle-button{position:relative;z-index:1;min-width:118px;padding:8px 20px;background:transparent;border:none;border-radius:999px;color:var(--text-dim);font-family:inherit;font-size:.92rem;font-weight:400;cursor:pointer;transition:color .3s ease}.toggle-button:hover{color:#fff}.toggle-button.active{color:#fff;font-weight:500}.toggle-button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}@media (max-width: 800px){.section-toggle-wrap{justify-content:center}}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(320px,1fr));gap:26px;margin:0 auto;max-width:1300px;padding-bottom:10px}@media (max-width: 1024px){.work-grid{grid-template-columns:repeat(2,minmax(320px,1fr))}}@media (max-width: 640px){.work-grid{grid-template-columns:repeat(1,minmax(320px,1fr));padding:0 10px}}.work-item{cursor:pointer;overflow:hidden;display:flex;flex-direction:column}.work-photo{position:relative;overflow:hidden;height:220px;margin:8px 8px 0;border-radius:calc(var(--radius-card) - 6px);background:#ffffff0a}.work-photo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(8,11,22,.55) 100%)}.work-photo img,.work-photo video{transition:transform .7s var(--ease-out),filter .5s ease;filter:saturate(.92)}@media (hover: hover){.work-item:hover .work-photo img,.work-item:hover .work-photo video{transform:scale(1.05);filter:saturate(1.05)}.work-item:hover .work-open{opacity:1;transform:translate(0)}}.work-hover-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .4s ease,transform .7s var(--ease-out)}.work-hover-video.is-playing{opacity:1}.work-open{position:absolute;top:10px;right:10px;z-index:4;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:1rem;color:#fff;background:#0a0e1c99;border:1px solid var(--glass-border-hover);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translate(-6px,6px);transition:opacity .3s ease,transform .4s var(--ease-out)}.work-image-one-only{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1}img[src="/shader_toy_mcp.JPG"]{object-fit:contain;background-color:transparent}div.work-photo:has(img[src="/shader_toy_mcp.JPG"]){position:relative;background-color:#000}div.work-photo:has(img[src="/shader_toy_mcp.JPG"]):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/shader_toy_mcp.JPG);background-size:cover;background-position:center;filter:blur(8px) brightness(.7);z-index:0}.work-image-left{width:50%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1}.work-image-right{width:51%;height:100%;object-fit:cover;position:absolute;top:0;right:0;z-index:1}.work-description{position:relative;z-index:2;padding:14px 18px 20px;color:var(--text-dim);flex:1}.work-description h3{font-family:var(--font-display);font-size:1.28rem;font-weight:600;letter-spacing:-.01em;margin:0;color:#fff}.work-description p{font-size:.9rem;line-height:1.55;margin:6px 0 0}.skills-label{display:flex;justify-content:center;align-items:center;background-color:#d4f0f8;border:2px solid #b2d5f2;border-radius:10px;color:#333;padding:0 7px;margin-right:10px;font-size:.75rem;font-weight:700}:root{--ice: #b9d3ff;--ice-strong: #dce9ff;--glass-bg: rgba(12, 16, 30, .55);--glass-bg-strong: rgba(10, 13, 24, .78);--glass-border: rgba(185, 211, 255, .16);--glass-border-hover: rgba(185, 211, 255, .45);--glow: rgba(140, 180, 255, .28);--text-dim: #a9b2c6;--radius-card: 14px;--ease-out: cubic-bezier(.22, 1, .36, 1);--font-display: "Space Grotesk", "Poppins", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}.section-content{display:flex;justify-content:center;max-width:1200px;margin:0 auto}.glass-card{position:relative;isolation:isolate;border-radius:var(--radius-card);background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px #00000059;transition:transform .45s var(--ease-out),border-color .3s ease,box-shadow .45s var(--ease-out)}.glass-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%),rgba(185,211,255,.13),transparent 45%)}@media (hover: hover){.glass-card:hover{transform:translateY(-6px);border-color:var(--glass-border-hover);box-shadow:0 22px 45px #0000008c,0 0 32px var(--glow)}.glass-card:hover:after{opacity:1}}@media (prefers-reduced-motion: reduce){.glass-card,.glass-card:hover{transform:none}}.xp-rail{--node: 46px;--gap: 22px;--pad: 22px;position:relative;width:100%;max-width:900px;margin:0 auto;padding:16px var(--pad) 18px var(--pad);box-sizing:border-box;border-radius:20px;background:#060912b8;border:1px solid var(--glass-border);backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);box-shadow:0 20px 50px #00000073}.xp-rail:before{content:"";position:absolute;left:calc(var(--pad) + 14px + var(--node) / 2 - 1px);top:50px;bottom:70px;width:2px;border-radius:2px;background:linear-gradient(180deg,#dce9ffd9,#8cb4ff66 60%,#8cb4ff00);box-shadow:0 0 10px #8cb4ff4d}.rail-item{position:relative;isolation:isolate;display:flex;gap:var(--gap);padding:18px 20px 18px 14px;margin-bottom:8px;border-radius:16px;transition:background .3s ease}.rail-item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),rgba(185,211,255,.09),transparent 50%),#b9d3ff06;border:1px solid rgba(185,211,255,.12)}@media (hover: hover){.rail-item:hover:after{opacity:1}}.rail-node{position:relative;z-index:1;flex-shrink:0;width:var(--node);height:var(--node);border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 5px #0a0e19,0 0 0 6px #b9d3ff47}.rail-node img{width:100%;height:100%;object-fit:contain}.rail-node-letter{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:#0b1020}.rail-node.is-current{animation:node-glow 2.8s ease-in-out infinite}@keyframes node-glow{0%,to{box-shadow:0 0 0 5px #0a0e19,0 0 0 6px #b9d3ff73,0 0 14px 6px #8cb4ff40}50%{box-shadow:0 0 0 5px #0a0e19,0 0 0 6px #dce9ffcc,0 0 26px 10px #8cb4ff73}}.rail-body{flex:1;min-width:0;padding-top:2px}.rail-body h3{margin:0;font-family:var(--font-display);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;color:#fff}.rail-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:4px}.rail-workplace{font-size:.95rem;color:#cdd5e4}.rail-date{font-family:var(--font-mono);font-size:.74rem;color:var(--ice);opacity:.8}.rail-body p{margin:8px 0 0;font-size:.92rem;line-height:1.6;color:var(--text-dim)}.rail-roles{margin-top:14px;display:flex;flex-direction:column;gap:16px}.rail-role{position:relative}.rail-role h4{margin:0 0 2px;font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:#fff}.rail-role p{margin-top:4px}.rail-role-dot{position:absolute;left:calc(-1 * (var(--gap) + var(--node) / 2) - 5px);top:6px;width:10px;height:10px;border-radius:50%;background:#9fb9e6;box-shadow:0 0 0 4px #0a0e19}.rail-role-dot.is-current{background:#eaf2ff;box-shadow:0 0 0 4px #0a0e19,0 0 12px 3px #a0c3ffb3}@media (max-width: 640px){.xp-rail{--node: 38px;--gap: 16px;--pad: 8px}.rail-item{padding:14px 10px}.xp-rail:before{left:calc(var(--pad) + 10px + var(--node) / 2 - 1px)}.rail-body h3{font-size:1.08rem}}@media (prefers-reduced-motion: reduce){.rail-node.is-current{animation:none}}.dive-track{position:relative;height:320vh;pointer-events:none}.dive-hint{display:flex;justify-content:center;padding-top:10px;font-size:1.6rem;color:#dce9ffb3;opacity:calc(1 - var(--dive, 0) * 12);animation:dive-bounce 1.8s ease-in-out infinite}@keyframes dive-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}.dive-end{position:absolute;height:100vh;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;pointer-events:auto;--reveal: clamp(0, (var(--dive, 0) - .975) * 50, 1);opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal)) * 14px));visibility:hidden}:root.dive-done .dive-end{visibility:visible}.dive-end-title{margin:0;font-family:var(--font-display, inherit);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;letter-spacing:-.02em;color:#fff;text-shadow:0 0 30px rgba(160,195,255,.35)}.dive-end-email{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono, monospace);font-size:1rem;color:#dce9ff;text-decoration:none;padding:10px 18px;border-radius:999px;border:1px solid rgba(185,211,255,.25);background:#b9d3ff0f;transition:background .25s ease,border-color .25s ease}.dive-end-email:hover{background:#b9d3ff1f;border-color:#b9d3ff80}.dive-end-socials{display:flex;gap:18px}.dive-end-socials a{display:flex;font-size:1.6rem;color:#bcbcbc;transition:color .3s ease,transform .3s ease}.dive-end-socials a:hover{color:#fff;transform:translateY(-3px)}.dive-return{margin-top:26px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(185,211,255,.45);background:#0c101e99;color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 0 26px #8cb4ff59;transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s ease}.dive-return:hover{transform:translateY(-3px);background:#b9d3ff24}.dive-end a:focus-visible,.dive-return:focus-visible{outline:2px solid #b9d3ff;outline-offset:3px}@media (prefers-reduced-motion: reduce){.dive-hint{animation:none}}