:root{--font:"Departure Mono", "IBM Plex Mono", "Courier New", monospace;--font-display:"Geist", sans-serif;--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-base:15px;--text-lg:18px;--text-xl:24px;--text-2xl:32px;--text-3xl:80px;--color-close:#d7d7d7;--color-name:#1a1a1add;--color-header-text:#e8e8e8;--color-nav-link:#bbb}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);overflow:hidden}canvas{transition:top .4s;display:block;position:fixed;top:0;left:0}canvas.with-header{top:0}#site-header{z-index:10;opacity:0;transition:opacity .4s;position:fixed;top:24px;right:28px}#site-header.header-hidden{display:none}#hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:6px;display:flex}#hamburger span{background:var(--color-header-text);width:22px;height:2px;transition:background .15s;display:block}#hamburger:hover span{background:var(--color-accent)}#site-nav{opacity:0;pointer-events:none;background:0 0;flex-direction:column;gap:0;min-width:120px;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:calc(100% + 10px);right:0;transform:translateY(-6px)}#site-nav.nav-open{opacity:1;pointer-events:all;transform:translateY(0)}#site-nav.nav-hidden{opacity:0;pointer-events:none}.nav-link{font-family:var(--font-display);font-size:var(--text-base);letter-spacing:.04em;text-transform:lowercase;color:var(--color-nav-link);cursor:pointer;text-align:right;background:0 0;border:none;padding:10px 4px;font-weight:400;transition:color .15s}.nav-link:hover{color:var(--color-header-text)}.nav-link.nav-active{color:var(--color-accent)}#ui{opacity:0;transition:opacity .6s}#ui.visible{opacity:1}#overlay{z-index:30;pointer-events:none;opacity:0;transition:opacity .3s;position:fixed;inset:0}#overlay.visible{opacity:1;pointer-events:all}#overlay-generic{background:var(--color-overlay-bg);border:1px solid var(--color-border);border-left:3px solid var(--color-accent);flex-direction:column;width:min(640px,88vw);max-height:80vh;display:none;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}#overlay-generic.active{display:flex}#overlay-header{border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 28px;display:flex}#overlay-title{font-size:var(--text-lg);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);font-weight:500}#overlay-close{color:var(--color-close);font-size:var(--text-xl);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-weight:300;line-height:1;transition:color .15s}#overlay-close:hover{color:var(--color-fg)}#overlay-body{color:var(--color-body-text);font-size:var(--text-base);padding:32px 28px;line-height:1.75;overflow-y:auto}#overlay-body h2{font-size:var(--text-lg);color:var(--color-fg);letter-spacing:.01em;margin:0 0 16px;font-weight:500}#overlay-body p{margin:0 0 12px}#overlay-body a{color:var(--color-accent);border-bottom:1px solid #0000;text-decoration:none;transition:border-color .15s}#overlay-body a:hover{border-bottom-color:var(--color-accent)}#overlay-body::-webkit-scrollbar{width:6px}#overlay-body::-webkit-scrollbar-track{background:0 0}#overlay-body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}#overlay-body::-webkit-scrollbar-thumb:hover{background:var(--color-muted)}#overlay-body{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}#overlay-projects{pointer-events:none;display:none;position:absolute;inset:0;overflow:hidden}#overlay-projects.active{pointer-events:all;display:block}#projects-menu{background:var(--color-overlay-bg);border:1px solid var(--color-border);border-left:3px solid var(--color-accent);z-index:1;flex-direction:column;width:min(320px,88vw);max-height:80vh;transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}#overlay-projects.detail-open #projects-menu{transform:translate(calc(190px - 50vw),-50%)}#projects-menu-header{font-size:var(--text-sm);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 28px;font-weight:500;display:flex}#projects-menu-close{color:var(--color-close);font-size:var(--text-xl);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-weight:300;line-height:1;transition:color .15s}#projects-menu-close:hover{color:var(--color-fg)}#projects-menu-list{flex:1;padding:8px 0;overflow-y:auto}#projects-menu-list::-webkit-scrollbar{width:4px}#projects-menu-list::-webkit-scrollbar-thumb{background:var(--color-border)}.proj-menu-item{text-align:left;cursor:pointer;background:0 0;border:none;border-left:2px solid #0000;flex-direction:column;gap:4px;width:100%;padding:14px 28px;transition:background .15s,border-color .15s;display:flex}.proj-menu-item:hover{background:color-mix(in srgb, var(--color-fg) 5%, transparent)}.proj-menu-item.active{border-left-color:var(--color-accent);background:color-mix(in srgb, var(--color-accent) 8%, transparent)}.proj-menu-title{font-family:var(--font);font-size:var(--text-md);color:var(--color-fg);font-weight:500;line-height:1.2}.proj-menu-item.active .proj-menu-title{color:var(--color-accent)}.proj-menu-stack{font-size:var(--text-2xs);letter-spacing:.1em;color:var(--color-muted);text-transform:uppercase}#projects-detail{background:var(--color-overlay-bg);border:1px solid var(--color-border);border-left:3px solid var(--color-accent);z-index:2;flex-direction:column;width:min(560px,88vw);max-height:80vh;transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;right:calc(50% - 560px);overflow:hidden;transform:translateY(-50%)translate(calc(100% + 560px))}#projects-detail.open{transform:translateY(-50%)}#projects-detail-close{color:var(--color-close);font-size:var(--text-xl);cursor:pointer;z-index:1;background:0 0;border:none;padding:4px 8px;font-weight:300;line-height:1;transition:color .15s;position:absolute;top:16px;right:20px}#projects-detail-close:hover{color:var(--color-fg)}#projects-detail-body{flex-direction:column;flex:1;gap:24px;padding:48px 40px 40px;display:flex;overflow-y:auto}#projects-detail-body::-webkit-scrollbar{width:6px}#projects-detail-body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.proj-detail-media{border:1px solid var(--color-border);object-fit:cover;width:100%;display:block}.proj-detail-meta{flex-direction:column;gap:8px;display:flex}.proj-detail-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-fg);letter-spacing:.02em;margin:0;font-weight:700}.proj-detail-stack{font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);margin:0;font-weight:500}.proj-detail-desc{font-size:var(--text-base);color:var(--color-body-text);margin:4px 0 0;line-height:1.75}.proj-detail-link{font-size:var(--text-sm);color:var(--color-accent);letter-spacing:.04em;border-bottom:1px solid #0000;align-self:flex-start;margin-top:4px;text-decoration:none;transition:border-color .15s;display:inline-block}.proj-detail-link:hover{border-bottom-color:var(--color-accent)}.resume-section{margin-bottom:28px}.resume-section:last-child{margin-bottom:0}.resume-section h2{font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);border-bottom:1px solid var(--color-border);margin:0 0 12px;padding-bottom:8px;font-weight:500}.resume-entry{border-bottom:1px solid var(--color-border);padding:12px 0}.resume-entry:last-child{border-bottom:none;padding-bottom:0}.resume-entry-header{justify-content:space-between;align-items:baseline;margin-bottom:2px;display:flex}.resume-entry-title{font-size:var(--text-md);color:var(--color-fg);font-weight:500}.resume-entry-date{font-size:var(--text-2xs);color:var(--color-muted);white-space:nowrap;margin-left:12px}.resume-entry-sub{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:4px}.resume-entry p{font-size:var(--text-md);margin:0;line-height:1.6}#homepage{z-index:15;pointer-events:all;flex-direction:column;justify-content:center;align-items:center;transition:opacity .7s;display:flex;position:fixed;inset:0}#homepage.hidden{opacity:0;pointer-events:none}#homepage-text{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}#homepage-name{letter-spacing:.04em;text-transform:uppercase;color:var(--color-header-text);font-size:clamp(56px,10vw,120px);font-weight:700;line-height:1;font-family:var(--font-display)}#homepage-subtext{font-size:var(--text-lg);letter-spacing:.2em;text-transform:lowercase;color:var(--color-accent);font-family:var(--font-display);min-height:1.4em;transition:opacity .35s}#homepage-subtext.fade{opacity:0}#homepage-cta{color:var(--color-muted);cursor:pointer;opacity:.5;background:0 0;border:none;padding:12px 24px;font-size:48px;line-height:1;transition:opacity .2s,transform .2s;animation:2s ease-in-out infinite cta-bob;position:absolute;bottom:48px;left:50%;transform:translate(-50%)}#homepage-cta:hover{opacity:1;animation-play-state:paused}@keyframes cta-bob{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(8px)}}#dialogue-box{z-index:20;background:var(--color-overlay-bg);border:1px solid var(--color-border);width:min(480px,88vw);font-family:var(--font);font-size:var(--text-sm);color:var(--color-fg);letter-spacing:.04em;pointer-events:none;opacity:0;cursor:pointer;padding:16px 24px;line-height:1.7;transition:opacity .3s;position:fixed;top:calc(100vh - 160px);bottom:auto;left:50%;transform:translate(-50%)}#dialogue-box.visible{opacity:1;pointer-events:all}#dialogue-cursor{background:var(--color-accent);vertical-align:text-bottom;flex-shrink:0;width:8px;height:1em;margin-right:10px;display:inline-block}#dialogue-close{color:var(--color-close);font-size:var(--text-lg);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-weight:300;line-height:1;transition:color .15s;position:absolute;top:8px;right:10px}#dialogue-close:hover{color:var(--color-fg)}#dialogue-caret{color:var(--color-accent);margin-left:2px;animation:1s step-end infinite caret-blink}@keyframes caret-blink{0%,to{opacity:1}50%{opacity:0}}#cube-label{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:.12em;color:var(--color-accent);text-transform:uppercase;pointer-events:none;white-space:nowrap;z-index:10;font-weight:590;transition:opacity .3s;position:fixed;bottom:12%;left:50%;transform:translate(-50%)}
