.reflective-card-container{position:relative;width:320px;height:420px;border-radius:20px;overflow:hidden;background:#1a1a1a;box-shadow:0 20px 50px #00000080,0 0 0 1px #ffffff1a inset;isolation:isolate;font-family:IBM Plex Mono,monospace;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.reflective-card-container:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 60px #0009,0 0 0 1px #fff3 inset}.reflective-card-container:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:4px}.reflective-card-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(100%)}.reflective-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none}.reflective-noise{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;opacity:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");mix-blend-mode:overlay}.reflective-sheen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:linear-gradient(135deg,#fff6,#ffffff1a 40%,#fff0,#ffffff1a 60%,#ffffff4d);pointer-events:none;mix-blend-mode:overlay;opacity:var(--metalness, 1)}.reflective-border{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,#fffc,#fff3,#fff9);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:20;pointer-events:none}.reflective-content{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:32px;color:var(--text-color, white);background:var(--overlay-color, rgba(255, 255, 255, .05))}.card-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.user-info{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:-180px}.user-name{font-size:32px;font-weight:600;letter-spacing:.1em;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.5)}.user-role{font-size:11px;letter-spacing:.15em;opacity:.8;margin:0;text-transform:uppercase}.card-footer{display:flex;justify-content:center;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}.click-hint{font-size:11px;letter-spacing:.1em;opacity:.5;text-transform:uppercase;transition:opacity .2s ease}.reflective-card-container:hover .click-hint{opacity:.8}@media(max-width:768px){.reflective-card-container{width:280px;height:360px}.user-name{font-size:26px}.reflective-content{padding:24px}}.landing{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000}.landing-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.landing--exiting .landing-content{animation:fadeOutUp .6s ease-in forwards}.landing--exiting:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;z-index:100;animation:fadeIn .6s ease-in forwards}@keyframes fadeOutUp{to{opacity:0;transform:translateY(-30px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.site-header{position:sticky;top:0;z-index:100;width:100%;background:#fafaf9;border-bottom:1px solid rgba(0,0,0,.06);padding:var(--space-3) var(--space-6)}.header-inner{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:500}.header-item{display:inline-flex;align-items:center}.header-sep{color:#00000038;margin:0 var(--space-1);-webkit-user-select:none;user-select:none}.header-link{color:#404040;text-decoration:none}.header-link:hover{text-decoration:underline;text-underline-offset:3px;opacity:.9}.header-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}@media(min-width:768px){.site-header{padding:var(--space-4) var(--space-10)}.header-inner{font-size:var(--text-base)}}.typewriter{font-family:var(--font-body);display:inline-block}.typewriter-text{letter-spacing:.02em}.typewriter-cursor{display:inline-block;animation:typewriter-blink 1s step-end infinite;margin-left:1px;color:inherit;opacity:.9}@keyframes typewriter-blink{0%,50%{opacity:1}51%,to{opacity:.15}}.introduction{margin-bottom:var(--space-12);position:relative}.introduction-headings{text-align:center;margin-bottom:var(--space-8)}.introduction-headings h1{font-family:var(--font-heading);font-weight:600;line-height:1.2;text-align:center;color:inherit;letter-spacing:-.02em}.introduction-hero{font-size:var(--text-4xl);margin-bottom:var(--space-5)}.introduction-personal{max-width:600px;margin:0 auto;text-align:center}.introduction-tagline{font-size:var(--text-2xl);font-weight:600;margin:0 0 var(--space-6) 0;letter-spacing:-.02em}.introduction-story{text-align:left;margin-bottom:var(--space-8)}.introduction-story p{font-size:var(--text-base);line-height:1.8;margin:0 0 var(--space-4) 0;color:#404040}.introduction-story p:last-child{margin-bottom:0}.introduction-story .highlight{font-weight:600;color:inherit}.introduction-story a{font-weight:600;text-decoration:underline;text-underline-offset:3px}.introduction-ascii-wrap{display:flex;flex-direction:column;align-items:center;margin:var(--space-8) 0 var(--space-4);overflow-x:auto}.introduction-ascii{font-family:Courier New,Courier,monospace;font-size:9px;line-height:1.15;color:#b4b4b4;margin:0;text-align:left;white-space:pre}.introduction-location{font-size:var(--text-sm);color:#737373;letter-spacing:.02em;margin-top:var(--space-6)}@media(max-width:768px){.introduction-hero{font-size:var(--text-2xl)}.introduction-tagline{font-size:var(--text-xl)}.introduction-story p{font-size:var(--text-sm)}.introduction-ascii{font-size:6px}}.education-section{width:100%;margin-bottom:var(--space-20)}.education-intro{max-width:500px;margin:0 auto var(--space-8);text-align:center;font-size:var(--text-base);color:#525252}.education-list{display:flex;flex-direction:column;align-items:center;gap:var(--space-10);max-width:640px;margin:0 auto;text-align:center}.education-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}.education-label{font-size:var(--text-sm);font-weight:600;color:#525252;text-transform:uppercase;letter-spacing:.04em}.education-period{font-size:var(--text-sm);font-weight:500;color:#737373}.education-institution{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em;margin:0}.education-link{color:inherit;text-decoration:none}.education-link:hover{text-decoration:underline;text-underline-offset:3px;opacity:.9}.education-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.education-description{font-size:var(--text-base);line-height:1.6;color:#404040;margin:0;white-space:pre-line}.education-exchange{margin-top:var(--space-6);padding-top:var(--space-5);border-top:2px solid rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}.education-exchange-label{font-size:var(--text-sm);font-weight:600;color:#525252;text-transform:uppercase;letter-spacing:.04em}.education-exchange-period{font-size:var(--text-sm);font-weight:500;color:#737373}.education-exchange-institution{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;letter-spacing:-.02em;margin:0}.education-exchange-description{font-size:var(--text-sm);line-height:1.6;color:#404040;margin:0}.education-bonus{margin-top:var(--space-6);font-size:var(--text-sm);color:#737373;line-height:1.6}.education-bonus a{color:#404040;font-weight:500}.experience-section{width:100%;margin-bottom:var(--space-20);text-align:center}.experience-intro{max-width:500px;margin:0 auto var(--space-8);font-size:var(--text-base);color:#525252}.experience-timeline-wrap{width:100%;max-width:700px;margin:0 auto}.experience-timeline{width:100%;padding:0}.experience-timeline .MuiTimelineItem-root{min-height:72px}.experience-timeline .MuiTimelineContent-root{padding:var(--space-1) var(--space-4) var(--space-4)}.experience-timeline .MuiTimelineDot-outlinedPrimary{border-width:2px;border-color:#6366f1;background:transparent}.experience-timeline .MuiTimelineConnector-root{background:#0000001f}.experience-item{display:flex;flex-direction:column;gap:var(--space-1);align-items:center;text-align:center}.experience-logo-wrap{width:48px;height:48px;border-radius:10px;overflow:hidden;margin-bottom:var(--space-2);background:#ffffff0d;display:flex;align-items:center;justify-content:center}.experience-logo{width:100%;height:100%;object-fit:contain;filter:grayscale(100%);opacity:.8;transition:all .3s ease}.experience-item:hover .experience-logo{filter:grayscale(0%);opacity:1}.experience-timeline .MuiTimelineItem-root:nth-of-type(odd) .MuiTimelineContent-root{text-align:left}.experience-timeline .MuiTimelineItem-root:nth-of-type(odd) .experience-item{align-items:flex-start;text-align:left}.experience-timeline .MuiTimelineItem-root:nth-of-type(odd) .experience-heading{align-items:flex-start}.experience-timeline .MuiTimelineItem-root:nth-of-type(2n) .MuiTimelineContent-root{text-align:right}.experience-timeline .MuiTimelineItem-root:nth-of-type(2n) .experience-item{align-items:flex-end;text-align:right}.experience-timeline .MuiTimelineItem-root:nth-of-type(2n) .experience-heading{align-items:flex-end}.experience-period{font-size:var(--text-sm);font-weight:500;color:#525252}.experience-heading{display:flex;flex-direction:column;gap:2px;align-items:center}.experience-org{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;color:inherit}.experience-org:hover{opacity:.85}a.experience-org{text-decoration:underline;text-underline-offset:3px}.experience-title-role{font-size:var(--text-base);font-weight:500;color:#404040}.experience-location{font-size:var(--text-sm);color:#737373}.apps{padding:var(--space-12) 0 var(--space-24)}.apps-intro{max-width:600px;margin:0 auto var(--space-10);text-align:center;font-size:var(--text-base);line-height:1.7;color:#525252}.apps-masonry-wrap{width:100%;display:flex;justify-content:center}.apps-masonry{width:100%;max-width:960px;margin:0 auto;align-content:center!important}.project-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:var(--space-5) var(--space-5);transition:border-color .2s,box-shadow .2s;opacity:.001;transform:translateY(20px);transition:opacity .5s ease-out,transform .6s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}.project-card.visible{opacity:1;transform:translateY(0)}.project-card:hover{border-color:#0000001a;box-shadow:0 4px 20px #0000000f}.project-card-image-wrap{margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-3);border-radius:16px 16px 0 0;overflow:hidden;background:#f8f8f8}.project-card-image{width:100%;height:180px;object-fit:cover;display:block;vertical-align:middle;filter:grayscale(100%);transition:filter .3s ease}.project-card-image-wrap:hover .project-card-image{filter:grayscale(0%)}.project-card-header{margin-bottom:var(--space-3);text-align:center}.project-card-title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em;margin:0 0 var(--space-1) 0;color:inherit;text-align:center}.project-card-period{display:block;font-size:var(--text-sm);font-weight:500;color:#525252;margin-bottom:2px}.project-card-event{display:block;font-size:var(--text-sm);color:#737373}.project-card-description{font-size:var(--text-sm);line-height:1.55;color:#404040;margin:0 0 var(--space-4) 0}.project-card-highlights{margin-bottom:var(--space-4)}.project-card-highlights-label{font-size:var(--text-sm);font-weight:600;display:block;margin-bottom:var(--space-2)}.project-card-highlights ul{margin:0;padding-left:var(--space-5);font-size:var(--text-sm);line-height:1.5;color:#404040}.project-card-highlights li{margin-bottom:var(--space-1)}.project-card-skills{margin-bottom:var(--space-4)}.project-card-skills-label{font-size:var(--text-sm);font-weight:600;display:block;margin-bottom:var(--space-1)}.project-card-skills-list{font-size:var(--text-sm);color:#525252}.project-card-links{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid rgba(0,0,0,.06)}.project-card-link{font-size:var(--text-sm);font-weight:500;color:#6366f1;text-decoration:none}.project-card-link:hover{text-decoration:underline;text-underline-offset:3px}.project-card-link:focus-visible{outline:2px solid rgba(99,102,241,.4);outline-offset:2px}.about-page{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out;background:#000;color:#fafaf9;min-height:100vh;position:relative}.about-page--visible{opacity:1;transform:translateY(0)}.about-page .site-header{background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}.about-page .header-link{color:#ffffffb3;transition:color .2s ease}.about-page .header-link:hover{color:#fff}.about-page .header-sep{color:#ffffff4d}.about-page a{color:#ffffffe6;transition:color .2s ease}.about-page a:hover{color:#fff}.about-page .section-title{color:#ffffff80}.about-page .ascii-section-title-box{color:#ffffffe6;position:relative}.about-page .ascii-section-title{position:relative}.about-page .ascii-section-title:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);pointer-events:none}.about-page .introduction{padding:var(--space-6) 0}.about-page .introduction-hero{font-size:clamp(1.75rem,5vw,2.5rem);color:#fff}.about-page .introduction-tagline{color:#ffffffe6;font-size:var(--text-xl)}.about-page .introduction-story p{color:#ffffffb3}.about-page .introduction-story .highlight{color:#fff}.about-page .introduction-story a{color:#ffffffe6}.about-page .introduction-story a:hover{color:#fff}.about-page .introduction-ascii{color:#ffffff4d;font-size:8px;font-family:Courier New,Courier,monospace}.about-page .introduction-location{color:#ffffff80}.about-page .education-section{position:relative}.about-page .education-intro{color:#fff9}.about-page .education-item{background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:var(--space-8);transition:all .3s ease}.about-page .education-item:hover{background:#ffffff0a;border-color:#ffffff1f;transform:translateY(-4px)}.about-page .education-label,.about-page .education-exchange-label{color:#ffffff80;letter-spacing:.12em;font-size:10px}.about-page .education-period,.about-page .education-exchange-period{color:#fff6}.about-page .education-institution{font-size:var(--text-lg)}.about-page .education-description,.about-page .education-exchange-description{color:#ffffffb3}.about-page .education-exchange{border-top-color:#ffffff1a;margin-top:var(--space-8);padding-top:var(--space-8)}.about-page .education-bonus{color:#ffffff80}.about-page .education-bonus a{color:#ffffffb3}.about-page .education-link{position:relative}.about-page .education-link:after{content:" ↗";opacity:0;transition:opacity .2s ease}.about-page .education-link:hover:after{opacity:.5}.about-page .experience-section{position:relative}.about-page .experience-intro{color:#fff9}.about-page .experience-period{color:#ffffff80;font-size:11px;letter-spacing:.05em}.about-page .experience-title-role{color:#ffffffb3}.about-page .experience-location{color:#fff6;font-size:12px}.about-page .experience-timeline .MuiTimelineConnector-root{background:linear-gradient(180deg,#ffffff4d,#ffffff0d);width:2px}.about-page .experience-timeline .MuiTimelineDot-outlinedPrimary{border-color:#ffffff80;background:#000;transition:all .3s ease}.about-page .experience-item:hover .MuiTimelineDot-outlinedPrimary{border-color:#fff;box-shadow:0 0 20px #fff3}.about-page .experience-item{padding:var(--space-4);border-radius:12px;transition:all .3s ease}.about-page .experience-item:hover{background:#ffffff08}.about-page .experience-org{font-size:var(--text-base);transition:all .2s ease}.about-page a.experience-org:hover{letter-spacing:.02em}.about-page .experience-logo-wrap{background:#ffffff14;border:1px solid rgba(255,255,255,.1)}.about-page .experience-logo{filter:grayscale(100%) brightness(1.2);opacity:.7}.about-page .experience-item:hover .experience-logo{filter:grayscale(0%) brightness(1);opacity:1}.about-page .apps-intro{color:#fff9}.about-page .project-card{background:#ffffff05;border:1px solid rgba(255,255,255,.06);transition:all .3s ease}.about-page .project-card:hover{border-color:#ffffff26;background:#ffffff0a}.about-page .project-card-image-wrap{background:#ffffff08;position:relative;overflow:hidden}.about-page .project-card-image{filter:grayscale(100%) brightness(.7) contrast(1.1);transition:all .5s ease}.about-page .project-card:hover .project-card-image{filter:grayscale(0%) brightness(1) contrast(1);transform:scale(1.05)}.about-page .project-card-title{font-size:var(--text-lg);letter-spacing:-.02em;transition:letter-spacing .2s ease}.about-page .project-card:hover .project-card-title{letter-spacing:.02em}.about-page .project-card-period{color:#ffffff80;font-size:11px;letter-spacing:.05em}.about-page .project-card-event{color:#fff9;font-size:12px;font-weight:500}.about-page .project-card-description{color:#ffffffb3;line-height:1.6;font-size:var(--text-sm)}.about-page .project-card-description strong{color:#fffffff2;font-weight:600}.about-page .project-card-highlights ul{color:#ffffffb3}.about-page .project-card-skills-list{color:#ffffff80}.about-page .project-card-links{border-top-color:#ffffff14;padding-top:var(--space-4);margin-top:var(--space-4)}.about-page .project-card-link{color:#ffffffb3;transition:all .2s ease;padding:var(--space-1) var(--space-2);border-radius:4px;background:#ffffff0d}.about-page .project-card-link:hover{color:#fff;background:#ffffff1a}.about-page .cursor{color:#fffc;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.about-page .education-section,.about-page .experience-section,.about-page .apps{opacity:0;transform:translateY(40px);animation:sectionFadeIn .8s ease-out forwards}.about-page .education-section{animation-delay:.2s}.about-page .experience-section{animation-delay:.4s}.about-page .apps{animation-delay:.6s}@keyframes sectionFadeIn{to{opacity:1;transform:translateY(0)}}.about-page .project-card{opacity:0;transform:translateY(30px)}.about-page .project-card.visible{animation:cardFadeIn .6s ease-out forwards}.about-page .project-card:nth-child(1).visible{animation-delay:.1s}.about-page .project-card:nth-child(2).visible{animation-delay:.2s}.about-page .project-card:nth-child(3).visible{animation-delay:.3s}.about-page .project-card:nth-child(4).visible{animation-delay:.4s}.about-page .project-card:nth-child(5).visible{animation-delay:.5s}.about-page .project-card:nth-child(6).visible{animation-delay:.6s}.about-page .project-card:nth-child(7).visible{animation-delay:.7s}@keyframes cardFadeIn{to{opacity:1;transform:translateY(0)}}.app{min-height:100vh;width:100%;max-width:960px;margin:0 auto;padding:var(--space-8) var(--space-6)}.intro-section{text-align:center;padding:var(--space-24) 0 var(--space-16);opacity:0;transform:translateY(20px);animation:heroFadeIn .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes heroFadeIn{to{opacity:1;transform:translateY(0)}}@media(min-width:768px){.app{padding:var(--space-12) var(--space-10)}}*{margin:0;padding:0;box-sizing:border-box}:root{--font-heading: "IBM Plex Mono", monospace;--font-body: "IBM Plex Mono", monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.25rem}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:#fafaf9;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;min-height:100vh;color:#171717}#root{min-height:100vh}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.section-title{font-size:var(--text-lg);font-weight:500;color:#525252;margin-bottom:var(--space-6);text-align:center}