@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%}:root{--bg-main: #0A0A0A;--bg-subtle: #111111;--bg-elevated: #1A1A1A;--text-primary: #EAEAEA;--text-secondary: #A1A1A1;--text-muted: #6B6B6B;--border-subtle: rgba(255, 255, 255, .08);--accent: #C6F7E2;--font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;--fs-xs: 11px;--fs-sm: 13px;--fs-base: 15px;--fs-lg: 18px;--fs-xl: 24px;--tracking-tight: -.02em;--tracking-wide: .15em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 80px;--space-9: 64px;--space-10: 96px;--space-11: 144px;--container-padding: var(--space-8);--grid-columns: 12;--grid-gap: var(--space-5);--frame-gap: var(--space-11);--grid-cell-size: 80px;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--noise-opacity: 0}[data-theme=light]{--bg-main: #EDEDED;--bg-subtle: #FFFFFF;--bg-elevated: #FFFFFF;--text-primary: #111111;--text-secondary: #444444;--text-muted: #777777;--border-subtle: rgba(0, 0, 0, .08);--accent: #0EA5A4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-mono);background-color:var(--bg-main);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}.caps-xs{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:500}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.nav{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--container-padding);z-index:100;border-bottom:1px solid var(--border-subtle);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.nav-logo{font-weight:700;letter-spacing:var(--tracking-wide);font-size:var(--fs-lg);cursor:pointer;transition:opacity var(--transition-smooth)}.nav-logo:hover{opacity:.6}.nav-links{display:flex;gap:var(--space-6)}.nav-links a{text-decoration:none;color:var(--text-secondary);transition:color var(--transition-smooth)}.nav-links a:hover{color:var(--text-primary)}.theme-btn{border:1px solid var(--border-subtle);padding:var(--space-1) var(--space-3);border-radius:4px;font-size:var(--fs-xs);color:var(--text-secondary);transition:all var(--transition-smooth)}.theme-btn:hover{color:var(--text-primary);border-color:var(--text-primary);background:var(--bg-elevated)}#home{position:relative;width:100%;overflow:hidden;height:100vh}.home-screen-1{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:20;background-color:transparent;pointer-events:none}.home-screen-2{position:relative;height:100vh;width:100%;display:flex;align-items:center;background-color:var(--bg-main);z-index:10}.container-full{width:100%;padding:0 var(--container-padding)}.combined-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:var(--frame-gap);width:fit-content}.profile-image-container{width:400px!important;height:500px!important;overflow:visible;background-color:var(--bg-main);border:1px solid var(--border-subtle);z-index:10;flex-shrink:0;position:relative}.vertical-signature{position:absolute;left:-40px;bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--text-secondary);font-size:10px;letter-spacing:.3em;white-space:nowrap;opacity:.6}.name-header h1{font-family:var(--font-mono);letter-spacing:-.02em;font-weight:500}.name-header p{font-size:10px;opacity:.7}.reveal-image{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1)}.about-text-content{width:600px;opacity:0;display:flex;flex-direction:column;justify-content:center}.about-bio{line-height:1.3;margin-top:var(--space-4);font-weight:500}.about-bio-sub{max-width:450px;line-height:1.6}.meta-bottom{position:fixed;bottom:var(--container-padding);left:0;width:100%;padding:0 var(--container-padding);display:flex;justify-content:space-between;align-items:flex-end;z-index:50}.meta-group{display:flex;flex-direction:column;gap:var(--space-4)}.meta-item p{line-height:1.2}.text-right{text-align:right}.fs-xs{font-size:var(--fs-xs)}.fs-base{font-size:var(--fs-base)}.fs-xl{font-size:var(--fs-xl)}.caps-xs{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.grid-12{display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gap)}.col-span-6{grid-column:span 6}.col-span-5{grid-column:span 5}.col-span-1{grid-column:span 1}.mb-4{margin-bottom:var(--space-4)}.mt-6{margin-top:var(--space-6)}@media screen and (max-width:768px){:root{--mobile-padding: 16px;--mobile-columns: 4;--mobile-gap: 12px}.container-padding,.container-full{padding-left:var(--mobile-padding)!important;padding-right:var(--mobile-padding)!important}.grid-12{grid-template-columns:repeat(var(--mobile-columns),1fr)!important;gap:var(--mobile-gap)!important}.col-span-6,.col-span-5{grid-column:span 4!important}.col-span-1{grid-column:span 1!important}.mobile-col-1{grid-column:span 1}.mobile-col-2{grid-column:span 2}.mobile-col-3{grid-column:span 3}.mobile-col-4{grid-column:span 4}.nav{padding:var(--space-3) var(--mobile-padding)}.nav-links{display:none}.nav-logo{font-size:var(--fs-base)}.mobile-menu-btn{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px}.mobile-menu-btn span{width:24px;height:2px;background:var(--text-primary);transition:all .3s ease}.grid-curtain{grid-template-columns:repeat(var(--curtain-cols, 6),var(--grid-cell-size, 80px));grid-template-rows:repeat(var(--curtain-rows, 10),var(--grid-cell-size, 80px))}.home-screen-2{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.home-screen-2 .grid-12{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.home-screen-2 .container-full{width:100%;display:flex;align-items:center;justify-content:center}.combined-frame{display:flex;flex-direction:column;gap:var(--space-5);width:100%;padding:0 var(--mobile-padding);align-items:center;justify-content:center}.profile-image-container{width:280px!important;height:350px!important;position:relative}.reveal-image{transform:scale(1.05)}.vertical-signature{display:none}.about-text-content{width:100%!important;max-width:100%;padding:0 var(--mobile-padding);margin-top:0}.about-text-content .fs-xl{font-size:16px!important}.about-bio{font-size:16px!important;line-height:1.5}#image-fragments,.fragment{width:100%!important;height:100%!important}.portfolio-title{font-size:16px!important;letter-spacing:.3em!important}.meta-bottom{flex-direction:column;gap:var(--space-4);bottom:var(--space-4);padding:0 var(--mobile-padding)}.meta-group{flex-direction:row;justify-content:space-between;width:100%}.meta-group.text-right{text-align:left}.meta-item p{font-size:10px}.fs-xl,.fs-lg,.fs-base{font-size:16px!important}.name-header h1{font-size:16px;letter-spacing:-.01em}.name-header p{font-size:10px}.grid-curtain .curtain-cell{will-change:transform,opacity}a,button{min-height:44px;min-width:44px}.home-screen-1,.home-screen-2{touch-action:pan-y;user-select:none;-webkit-user-select:none}}@media screen and (max-width:375px){:root{--mobile-padding: 12px}.profile-image-container{width:240px!important;height:300px!important;margin:0 auto;position:relative}#image-fragments,.fragment{width:100%!important;height:100%!important}.about-bio{font-size:16px!important;line-height:1.5}}@media screen and (min-width:769px)and (max-width:1024px){:root{--tablet-padding: 40px;--tablet-columns: 8}.container-padding,.container-full{padding-left:var(--tablet-padding)!important;padding-right:var(--tablet-padding)!important}.grid-12{grid-template-columns:repeat(var(--tablet-columns),1fr)!important}.combined-frame{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);flex-direction:column;gap:var(--space-6);width:100%;padding:0 var(--tablet-padding);align-items:center;justify-content:center}.profile-image-container{width:350px!important;height:438px!important;margin:0 auto;position:relative}.about-text-content{width:400px!important}}@media(hover:none)and (pointer:coarse){.theme-btn,.nav-links a{padding:12px 16px}.nav-links a:hover,.theme-btn:hover{background:transparent;color:var(--text-secondary)}.theme-btn:active,.nav-links a:active{opacity:.7}}
