:root{--bg: #111214;--fg: #ececec;--muted: #9a9ca0;--accent: #8fb3ff;--rule: #24262a}*{box-sizing:border-box;margin:0;padding:0}.net-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(3px);opacity:.5}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,#11121459,#111214c7)}main{position:relative;z-index:1}#find-me,#projects,#contact{scroll-margin-top:96px}.floating-nav{position:fixed;top:16px;left:50%;z-index:40;display:flex;align-items:center;gap:28px;padding:10px 14px 10px 20px;border-radius:999px;background:#141518b8;border:1px solid var(--rule);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:0 8px 30px #00000073;transform:translate(-50%) translateY(-150%);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}.floating-nav.visible{transform:translate(-50%) translateY(0);opacity:1;pointer-events:auto}.floating-nav .nav-brand{font-size:1rem;font-weight:600;letter-spacing:-.01em;text-transform:lowercase;color:var(--fg);text-decoration:none;white-space:nowrap}.floating-nav .nav-brand{display:inline-flex;align-items:center;gap:7px}.floating-nav .nav-rat{font-size:1.05em;line-height:1}.floating-nav .nav-links{display:flex;align-items:center;gap:6px}.floating-nav .nav-links a{font-size:.9rem;text-transform:lowercase;color:var(--muted);text-decoration:none;padding:6px 14px;border-radius:999px;transition:color .2s ease,background .2s ease}.floating-nav .nav-links a:hover{color:var(--fg);background:#ffffff12}@media (max-width: 520px){.floating-nav{gap:12px;padding:8px 10px 8px 16px}.floating-nav .nav-links{gap:2px}.floating-nav .nav-links a{padding:6px 10px;font-size:.82rem}}html{scroll-behavior:smooth}html,body{background:var(--bg);color:var(--fg);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}main{max-width:640px;margin:0 auto;padding:96px 24px 64px}h1{font-size:1.6rem;font-weight:600;letter-spacing:-.01em;margin-bottom:48px;text-transform:lowercase}.wave{display:inline-block;transform:rotate(8deg)}.intro .tagline{font-size:2.2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:16px;text-transform:lowercase}.tagline-row{display:flex;align-items:center;gap:18px}.tagline-row .tagline{margin-bottom:0}.tagline-img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 22px -8px #0009;transition:transform .3s ease}.tagline-row:hover .tagline-img{transform:rotate(-6deg) scale(1.06)}@media (max-width: 520px){.tagline-img{width:56px;height:56px}}.intro .bio{font-size:2.2rem;font-weight:500;letter-spacing:-.02em;color:var(--muted);text-transform:lowercase;margin-bottom:96px}section h2{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--rule)}section+section{margin-top:64px}.experience ul,.links{list-style:none}.experience li{display:flex;align-items:baseline;gap:10px;padding:14px 0;font-size:1.05rem;text-transform:lowercase;border-bottom:1px solid var(--rule)}.experience li:last-child{border-bottom:none}.emoji{font-size:1.1rem}.year{margin-left:auto;color:var(--muted);font-size:.95rem;white-space:nowrap}a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease}a:hover{border-bottom-color:var(--accent)}.links{display:flex;flex-wrap:wrap;gap:8px 20px}.links li{text-transform:lowercase}footer{margin-top:96px;width:calc(100vw - 160px);margin-left:calc(50% - 50vw + 80px);padding:24px 0 0;border-top:1px solid var(--rule);color:var(--muted);font-size:.9rem;text-transform:lowercase;text-align:right}@media (max-width: 520px){main{padding:64px 20px 48px}.intro .tagline,.intro .bio{font-size:1.7rem}.tagline-row{gap:12px}.experience li{flex-wrap:wrap}.year{margin-left:0;flex-basis:100%;padding-left:28px}}.quote{display:flex;align-items:center;gap:22px;margin-top:160px}.quote-img{flex:none;width:130px;height:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));transition:transform .4s ease}.quote:hover .quote-img{transform:rotate(-4deg) translateY(-3px)}.quote-text{margin:0;font-size:1.15rem;font-style:italic;font-weight:500;line-height:1.5;color:var(--fg);letter-spacing:-.01em;text-transform:lowercase}.quote-mark{color:var(--muted);font-size:1.6em;line-height:0;position:relative;top:.18em;margin:0 2px}.quote-cite{display:block;margin-top:10px;font-size:.9rem;font-style:normal;font-weight:500;color:var(--muted);letter-spacing:.01em;text-transform:lowercase}@media (max-width: 520px){.quote{flex-direction:column;align-items:flex-start;gap:14px}.quote-img{width:110px}}.cta{display:flex;align-items:center;gap:18px;margin-top:64px;padding:18px 22px;border-radius:18px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:var(--fg);transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}.cta:hover{transform:translateY(-4px);background:#ffffff0d;border-color:#ffffff2e;box-shadow:0 22px 50px -16px #0000008c}.cta-img,.cta-emoji{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;background:#ffffff0a;display:inline-flex;align-items:center;justify-content:center;font-size:36px;line-height:1;transition:transform .3s ease}.cta:hover .cta-img,.cta:hover .cta-emoji{transform:rotate(-6deg) scale(1.05)}.cta-text{display:flex;flex-direction:column;min-width:0}.cta-title{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;text-transform:lowercase}.cta-sub{font-size:.9rem;color:var(--muted);text-transform:lowercase;margin-top:2px}.cta-arrow{margin-left:auto;color:var(--muted);flex:none;transition:transform .3s ease,color .3s ease}.cta:hover .cta-arrow{transform:translate(6px);color:var(--fg)}.jumpscare{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#000;display:none;pointer-events:none}.jumpscare.active{display:block;animation:jumpscare-in .06s ease-out}.jumpscare img{width:100%;height:100%;object-fit:contain;background:#000;display:block}@keyframes jumpscare-in{0%{transform:scale(.7)}60%{transform:scale(1.06)}to{transform:scale(1)}}.big-name{cursor:pointer;transition:color .2s ease,text-shadow .2s ease;-webkit-user-select:none;user-select:none}.big-name:hover{color:#ff5b5b;text-shadow:0 0 18px rgba(255,91,91,.45)}.big-name:active{color:#ff2d2d}.easter-egg{position:fixed;bottom:24px;right:24px;width:200px;z-index:100;padding:12px 12px 34px;background:#f6f5f1;border-radius:4px;box-shadow:0 14px 32px #0000008c,0 4px 10px #00000059;opacity:0;pointer-events:none;transform:rotate(-7deg) translateY(30px) scale(.85);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);cursor:pointer;-webkit-user-select:none;user-select:none}.easter-egg.revealed{opacity:1;pointer-events:auto;transform:rotate(-7deg) translateY(0) scale(1)}.easter-egg:hover{transform:rotate(-3deg) translateY(-4px) scale(1.04)}.easter-egg img{display:block;width:100%;height:auto;border-radius:2px;background:#1a1a1a}.egg-caption{display:block;text-align:center;font-size:11px;font-weight:600;color:#1a1a1a;margin-top:6px;letter-spacing:.04em;text-transform:lowercase;font-family:ui-sans-serif,Caveat,Inter,sans-serif}.egg-caption-sub{margin-top:2px;font-size:10px;font-weight:500;font-style:italic;color:#4a4a4a;letter-spacing:.02em}.wave{-webkit-user-select:none;user-select:none}.top-name{cursor:pointer;-webkit-user-select:none;user-select:none}@media (pointer: fine){*,*:before,*:after{cursor:none!important}}.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);will-change:transform;opacity:1;transition:opacity .2s ease;mix-blend-mode:difference}.cursor-dot{width:7px;height:7px;background:#fff}.cursor-ring{width:22px;height:22px;border:1.5px solid rgba(255,255,255,.55);transition:width .25s ease,height .25s ease,border-color .25s ease,background .25s ease,opacity .2s ease}.cursor-ring.cursor-hover{width:36px;height:36px;border-color:#fffffff2;background:#ffffff14}.cursor-dot.cursor-hidden,.cursor-ring.cursor-hidden{opacity:0}@media (pointer: coarse),(hover: none){.cursor-dot,.cursor-ring{display:none}}.scroll-fade-top{position:fixed;top:0;left:0;right:0;height:140px;pointer-events:none;z-index:30;background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 30%,rgba(17,18,20,.6) 65%,rgba(17,18,20,0) 100%);opacity:0;transition:opacity .35s ease;will-change:opacity}.scroll-fade-top.visible{opacity:1}[data-reveal]{opacity:0;filter:blur(14px);transform:translateY(20px);transition:opacity .9s ease,filter .9s ease,transform .9s ease;will-change:opacity,filter,transform}[data-reveal].reveal--visible{opacity:1;filter:blur(0);transform:translateY(0)}@media (prefers-reduced-motion: reduce){[data-reveal],[data-reveal].reveal--visible{opacity:1;filter:none;transform:none;transition:none}}a{text-underline-offset:4px}.projects-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--rule)}.projects-head h2{margin:0;padding:0;border:none}.projects-nav{display:flex;gap:8px}.nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:var(--fg);cursor:pointer;transition:background .2s ease,transform .2s ease,border-color .2s ease}.nav-btn:hover{background:#ffffff1a;border-color:#ffffff40;transform:scale(1.08)}.nav-btn:active{transform:scale(.95)}.projects-rail{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;scroll-behavior:auto;padding:20px 24px 60px;margin:-20px -24px -40px;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none}.projects-rail::-webkit-scrollbar{display:none}.projects-rail.dragging{cursor:grabbing;scroll-behavior:auto}.project-card{flex:0 0 280px;scroll-snap-align:start;padding:18px;border-radius:14px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);text-transform:lowercase;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;will-change:transform}.project-card:hover{transform:translateY(-10px);background:#ffffff0f;border-color:#ffffff2e;box-shadow:0 22px 50px -16px color-mix(in srgb,var(--c1) 60%,transparent),0 12px 28px -10px color-mix(in srgb,var(--c2) 50%,transparent)}.project-thumb{height:280px;border-radius:10px;margin-bottom:14px;display:flex;align-items:flex-end;padding:16px;font-family:ui-monospace,JetBrains Mono,Menlo,Consolas,monospace;font-weight:700;font-size:1.6rem;color:#fffffff2;background:linear-gradient(135deg,var(--c1),var(--c2));letter-spacing:-.02em;position:relative;overflow:hidden}.project-thumb:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 60%);pointer-events:none}.project-title{font-weight:600;font-size:1rem;letter-spacing:-.01em}.project-sub{font-size:.88rem;color:var(--muted);margin-top:2px}.projects-rail--single{overflow:visible;cursor:default;justify-content:stretch}.project-card--hero{flex:1 1 100%;display:block;text-decoration:none;color:inherit;padding:24px}.project-card--hero .project-thumb{height:auto;aspect-ratio:1872 / 1170;font-size:2.2rem;padding:0}.project-thumb--img{padding:0}.project-thumb--img img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:block}.project-thumb--img .thumb-fallback{position:absolute;left:16px;bottom:16px;font-family:ui-monospace,JetBrains Mono,Menlo,Consolas,monospace;font-weight:700;letter-spacing:-.02em}.project-card--hero .project-title{font-size:1.35rem;margin-top:4px;text-transform:none}.project-card--hero .project-sub{font-size:1rem}.link-box{display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);text-transform:lowercase;text-decoration:none;color:var(--fg);cursor:pointer;font:inherit;width:100%;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;will-change:transform}.link-box:hover{transform:scale(1.04) translateY(-2px);background:#ffffff0f;border-color:#ffffff2e;box-shadow:0 18px 40px -18px #0009}.link-box:active{transform:scale(1.01)}.box-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#ffffff0a;transition:background .25s ease,transform .25s ease}.link-box:hover .box-icon{transform:rotate(-4deg) scale(1.05)}.box-text{min-width:0}.box-label{font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--fg)}.box-sub{font-size:.9rem;color:var(--muted);margin-top:2px}.hover-instagram:hover{border-color:#dd2a7bb3;box-shadow:0 22px 50px -14px #dd2a7bb3,0 14px 32px -10px #f585298c,0 8px 22px -6px #feda7766}.hover-chula:hover{border-color:#ec4899bf;box-shadow:0 22px 50px -14px #ec4899b3,0 10px 26px -8px #ec489980}.hover-github:hover{border-color:#ffffff8c;box-shadow:0 22px 50px -14px #ffffff59,0 10px 26px -8px #fff3}.hover-discord:hover{border-color:#5865f2d9;box-shadow:0 22px 50px -14px #5865f2cc,0 10px 26px -8px #5865f280}.lang-python,.lang-cpp,.lang-react{font-family:ui-monospace,JetBrains Mono,Menlo,Consolas,monospace;font-weight:700;letter-spacing:-.01em}.py-blue{color:#3776ab}.py-yellow{color:#f5c518}.lang-cpp{color:#00599c}.cpp-plus{display:inline-block;font-size:.78em;transform:translateY(-.25em);letter-spacing:-.05em;margin-left:.04em}.lang-react{color:#61dafb}.lang-link{text-decoration:none;border-bottom:none!important;display:inline-flex;align-items:center;gap:.3em;transition:transform .2s ease,filter .2s ease}.lang-icon{width:1em;height:1em;object-fit:contain;vertical-align:-.12em}.lang-text{text-transform:none}.lang-link:hover{transform:translateY(-2px);filter:brightness(1.15)}.lang-python.lang-link:hover{filter:brightness(1.15) drop-shadow(0 0 10px rgba(255,212,59,.5))}.lang-cpp.lang-link:hover{filter:brightness(1.2) drop-shadow(0 0 10px rgba(0,89,156,.6))}.lang-react.lang-link:hover{filter:brightness(1.2) drop-shadow(0 0 12px rgba(97,218,251,.6))}.cta,.project-card{position:relative;isolation:isolate;background:linear-gradient(135deg,#ffffff1f,#ffffff0a 55%,#ffffff12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 1px #ffffff59,inset 0 0 0 1px #ffffff0a,inset 0 -8px 24px -12px #ffffff1f,0 12px 32px -14px #0009;overflow:hidden}.cta:before,.project-card:before{content:"";position:absolute;top:-60%;left:-30%;width:80%;height:220%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.18) 55%,transparent 100%);transform:translate(-120%) rotate(8deg);transition:transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:.7}.cta:hover:before,.project-card:hover:before{transform:translate(180%) rotate(8deg)}.cta:hover,.project-card:hover{background:linear-gradient(135deg,#ffffff2e,#ffffff12 55%,#ffffff1c);border-color:#ffffff52;box-shadow:inset 0 1px #ffffff80,inset 0 0 0 1px #ffffff0f,inset 0 -10px 28px -12px #ffffff2e,0 26px 56px -18px #0000009e}.cta-img,.cta-emoji{background:#ffffff1a;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%);box-shadow:inset 0 1px #ffffff4d}.project-card .project-thumb,.project-card .project-title,.project-card .project-sub{position:relative;z-index:3}
