:root{--cyan:#5ef7ff;--sky:#18bde4;--blue:#006fff;--navy:#02152d;--black:#070c13;--white:#fff;--pink:#ff5f9e;--red:#ed1839;--display:'Barlow Condensed','Roboto Condensed',Impact,sans-serif;--body:'Roboto Condensed',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#035ad4;color:var(--white);font:16px/1.5 var(--body);overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}::selection{background:var(--pink);color:var(--black)}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-180%);z-index:1000;background:white;color:#000;padding:12px}.skip-link:focus{transform:none}
.site-header{position:absolute;inset:26px 3.2vw auto;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.site-header>*{pointer-events:auto}.identity{display:flex;flex-direction:column;align-items:flex-end}.identity h1{font:900 italic clamp(28px,2.5vw,44px)/1 var(--display);text-shadow:3px 3px #00346c;letter-spacing:.5px}.identity-line{display:block;width:95px;height:4px;background:var(--cyan);margin-top:8px;transform:skew(-35deg)}.sound-tools{display:flex;gap:7px;align-items:center}.sound-tools button{background:#02152dd9;border:1px solid #85e7ff55;padding:8px 11px;font:700 12px/1 var(--body);letter-spacing:1px}.sound-tools button:hover{background:#00387b}.sound-tools button span:first-child{color:var(--cyan);font-size:18px;margin-right:5px}.sound-tools #music-state{font-size:10px;color:var(--cyan);margin-left:9px}.sound-tools #motion-toggle{min-width:34px;min-height:35px}
.stage{position:relative}.screen{position:relative;min-height:100svh;isolation:isolate;overflow:hidden}.scene{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;pointer-events:none}.scene-menu{background-image:url('assets/scenes/menu.webp')}.scene-skills{background-image:url('assets/scenes/skills.webp')}.scene-about{background-image:url('assets/scenes/about.webp')}.scene-contact{background-image:url('assets/scenes/contact.webp')}.scene-video{width:100%;height:100%;object-fit:cover;object-position:center}.scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#00102912,transparent 65%,#00102928)}.home-screen::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#00033860,transparent 35%)}
.ready{height:100svh;overflow:hidden}.ready .stage{height:100svh}.ready .screen{position:absolute;inset:0;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ready .scene{position:fixed}.ready .site-header{position:fixed}.home-caption{position:absolute;left:5vw;top:19%;display:flex;flex-direction:column;gap:4px;color:#00315a;font-size:11px;letter-spacing:2.7px;font-weight:800}.home-caption span:last-child{font-size:9px;letter-spacing:1.5px}.main-menu{position:absolute;left:57%;top:40%;width:35%;transform:rotate(-11deg);transform-origin:left center}.menu-choice{position:relative;display:flex;align-items:center;width:max-content;min-width:82%;padding:0 20px 0 10px;color:#73f8ff;font:900 italic clamp(50px,6.35vw,100px)/1.02 var(--display);letter-spacing:-2px;isolation:isolate;transition:color .15s,transform .18s}.menu-choice::before,.menu-choice::after{content:'';position:absolute;inset:6% -7% 0 -10%;clip-path:polygon(13% 0,100% 0,88% 100%,0 100%);z-index:-1;opacity:0;transition:opacity .14s}.menu-choice::before{background:white}.menu-choice::after{background:var(--pink);transform:translate(11px,5px);z-index:-2}.menu-choice.selected{color:var(--red);transform:translateX(-14px)}.menu-choice.selected::before,.menu-choice.selected::after{opacity:1}.menu-choice:focus-visible{outline:0}.menu-choice:focus-visible .menu-label{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}.menu-index{font:800 italic 13px/1 var(--display);letter-spacing:0;position:absolute;left:-11px;top:48%;opacity:0}.selected .menu-index{opacity:1;color:#0b3459}.menu-translation{position:absolute;right:16px;bottom:3px;font:800 10px/1 var(--body);letter-spacing:1px;color:#2c3a46;opacity:0}.selected .menu-translation{opacity:1}.menu-note{position:absolute;bottom:11%;right:8%;font-size:11px;font-weight:700;letter-spacing:4px;color:#94e8ff}
.screen-content{position:relative;width:min(59vw,820px);padding:110px 0 95px;margin-left:5vw}.section-banner{position:relative;width:calc(100% + 5vw);margin:0 0 28px -5vw;transform:rotate(-4deg);transform-origin:left center}.section-banner p{padding:0 0 7px 5vw;color:#022849;font:800 11px/1 var(--body);letter-spacing:4px}.section-banner h2{position:relative;margin:0;padding:9px 5vw 13px;font:900 italic clamp(48px,5.1vw,82px)/.95 var(--display);background:linear-gradient(100deg,#001221,#052a4c);clip-path:polygon(0 0,100% 0,95% 100%,0 100%);letter-spacing:-1px;text-shadow:1px 2px #091428}.section-banner::before{content:'';position:absolute;inset:9px -9px 4px 0;background:var(--cyan);clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}.section-banner::after{content:'';position:absolute;width:24px;height:24px;right:7%;top:-15px;background:#94ecff;clip-path:polygon(0 25%,100% 0,78% 100%)}.filters,.skill-tabs{display:flex;gap:5px;margin-bottom:15px;flex-wrap:wrap}.filters button,.skill-tabs button{background:#071624dc;border-bottom:2px solid #29d5f66b;transform:skew(-13deg);font:700 italic 12px/1.2 var(--body);padding:9px 11px}.filters sup{font-size:8px;margin-left:3px}.filters .active,.skill-tabs [aria-selected=true]{background:var(--sky);border-color:white;box-shadow:2px 2px #00132b}.filters button:hover,.skill-tabs button:hover{background:#0466aa}.project-list{max-height:calc(100svh - 325px);min-height:120px;overflow-y:auto;padding:6px 15px 8px 8px;scrollbar-width:thin;scrollbar-color:var(--cyan) #07152ca1}.project{display:flex;align-items:stretch;position:relative;margin:0 0 9px;gap:4px}.project:nth-child(even){margin-left:12px}.project-card{display:flex;align-items:center;text-align:left;background:linear-gradient(100deg,#052949,#065b94);width:100%;padding:9px 21px 9px 15px;min-height:59px;transform:skew(-13deg);border-bottom:1px solid #7bddff40;box-shadow:3px 3px #010b325c;transition:background .13s,color .13s}.project-card>*{transform:skew(13deg)}.project-card:hover,.project-card:focus-visible{background:white;color:#082035}.project-card:hover::after{content:'';position:absolute;right:0;top:0;width:9px;height:100%;background:var(--red)}.roman{font:900 italic 24px/1 var(--display);width:39px;flex-shrink:0}.project-copy{display:flex;flex-direction:column;gap:1px;min-width:0}.project-copy strong{font:700 italic clamp(20px,1.9vw,29px)/1.1 var(--display);white-space:normal}.project-copy small{font-size:11px;letter-spacing:.2px;color:#9ae1fc}.project-card:hover small,.project-card:focus-visible small{color:#346482}.card-arrow{margin-left:auto;padding-left:10px;font-size:20px;color:var(--cyan)}.source-link{align-self:center;font:700 10px/1 var(--body);padding:11px 6px;background:#02142adc;color:#acfaff;white-space:nowrap}.all-code{display:block;margin:14px 0 0 12px;width:max-content;font:700 italic 12px/1 var(--body);letter-spacing:1px;padding:7px 0;border-bottom:1px solid var(--cyan)}
.skills-screen .screen-content{width:min(65vw,880px)}.skill-panel h3{font:700 italic 20px/1.2 var(--display);margin:15px 0 17px;text-shadow:2px 2px #061a36}.skill-row{display:grid;grid-template-columns:minmax(170px,1fr) 1.1fr;align-items:center;gap:10px;background:#050f1ac4;margin:0 0 15px;padding:16px 22px;border-left:3px solid var(--cyan);transform:skew(-9deg);box-shadow:3px 5px #020b1954}.skill-row>*{transform:skew(9deg)}.skill-row strong{font:600 italic 18px/1.3 var(--body)}.skill-row>span{position:relative;color:#05263c;background:repeating-linear-gradient(110deg,#fff 0 7px,#daecf4 7px 10px);padding:5px 12px;font:700 11px/1.3 var(--body);letter-spacing:.3px;border-right:7px solid var(--pink);box-shadow:4px 4px #b6c7d561}.screen-footnote{margin-top:25px;font:700 11px/1.4 var(--body);letter-spacing:1px;color:#d2f7ff}.screen-footnote a{border-bottom:1px solid var(--cyan)}
.about-screen .screen-content{width:min(46vw,600px)}.profile-card{background:#030c13ed;padding:25px 28px 23px;box-shadow:6px 6px #00d8ff42;border-top:2px solid #17d8ffb0;font-size:16px;line-height:1.65}.profile-top{display:flex;gap:15px;align-items:center;margin-bottom:20px}.profile-avatar{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1ad8ff,#034ca9);width:65px;height:65px;flex-shrink:0;font:900 italic 36px/1 var(--display);border:2px solid #74f0ff}.profile-avatar span{color:#03243d}.profile-top h3{font:800 25px/1 var(--body)}.profile-top p{color:#9ed6f0;font-size:10px;letter-spacing:1px;margin-top:8px}.profile-card>p{margin-bottom:15px;color:#ebf5fb}.profile-card blockquote{margin:20px 0 18px;padding:15px 16px;background:#102434;font-style:italic;border-left:3px solid var(--cyan);font-size:15px}.profile-tags{display:flex;gap:7px;margin:12px 0 20px}.profile-tags span{border:1px solid #43ddff70;padding:2px 9px;color:#a4f5ff;font-size:10px;letter-spacing:1px}.profile-card>a{font:700 italic 12px/1 var(--body);border-bottom:1px solid var(--cyan);padding-bottom:5px}
.contact-screen .screen-content{width:min(51vw,665px)}.contact-panel{position:relative;background:#050b16ed;border:2px solid white;padding:35px 28px 28px;transform:skew(-8deg);box-shadow:9px 9px #063d68b3;margin-top:55px}.contact-panel>*{transform:skew(8deg)}.contact-panel h3{position:absolute;left:10px;top:-47px;font:900 italic 69px/1 var(--display);letter-spacing:-1px}.contact-intro{font:700 italic 17px/1.2 var(--body);margin-bottom:24px;color:#b9eeff}.contact-row{display:flex;align-items:center;gap:18px;background:white;color:#081629;min-height:74px;margin-bottom:16px;padding:0 18px 0 0;box-shadow:4px 4px #528ca661}.contact-row:hover,.contact-row:focus-visible{background:#a0f8ff}.contact-icon{display:flex;align-items:center;justify-content:center;align-self:stretch;width:64px;flex-shrink:0;background:var(--red);color:white;font-size:28px}.contact-row:nth-of-type(2) .contact-icon{background:#12a3d5}.contact-row:nth-of-type(3) .contact-icon{background:#082146}.contact-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}.contact-row strong{font:800 italic 14px/1 var(--body)}.contact-row small{font:500 17px/1.3 var(--body);overflow-wrap:anywhere}.contact-row b{margin-left:auto}.copy-email{background:transparent;border-bottom:1px solid #74deff;padding:7px 0;font:700 11px/1 var(--body);letter-spacing:1px}#copy-status{min-height:20px;color:var(--cyan);font-size:13px;overflow-wrap:anywhere;margin-top:10px}
.hud{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:end;justify-content:space-between;gap:15px;padding:15px 3vw 18px;background:linear-gradient(0deg,#000e32a8,transparent);pointer-events:none;font-size:11px}.hud a,.hud button{pointer-events:auto}.hud-credit{letter-spacing:1px;font-size:9px;color:#c5e9ff}.art-credit{display:block;font-size:7px;letter-spacing:.4px;margin-top:3px;opacity:.7}.hud-buttons{display:flex;align-items:center;gap:23px;font-style:italic}.keyboard-hint{display:flex;align-items:center;gap:7px}kbd{font:700 9px/1 var(--body);border:1px solid #e6faff9c;border-radius:10px;padding:3px 5px;background:#001035b0;color:white}.hud a{display:flex;gap:7px;align-items:center;padding:9px}.transition-iris{position:fixed;inset:0;z-index:50;pointer-events:none;background:#18c9eb;clip-path:circle(0% at 80% 60%);visibility:hidden}.switching .transition-iris{visibility:visible;animation:iris .6s ease-in-out both}@keyframes iris{0%{clip-path:circle(0% at 80% 60%)}40%{clip-path:circle(125% at 80% 60%)}100%{clip-path:circle(0% at 15% 45%)}}
.project-dialog{color:white;background:#031225;border:2px solid var(--cyan);padding:0;width:min(690px,calc(100vw - 34px));max-height:85svh;box-shadow:12px 12px #0068c996;overflow-y:auto}.project-dialog::backdrop{background:#001132b0;backdrop-filter:blur(6px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:#07598c;font-size:11px;letter-spacing:1px}.dialog-top button{background:white;color:#061729;padding:9px 12px;font-size:17px}.dialog-content{padding:25px 30px 32px}.dialog-kicker{font-size:10px;letter-spacing:3px;color:var(--cyan)}.dialog-content h2{font:800 italic 42px/1.05 var(--display);margin:12px 0 20px;overflow-wrap:anywhere}#dialog-intro{font-size:19px;line-height:1.5}.dialog-content h3{font-size:16px;margin-top:25px}.dialog-content ul{padding-left:20px;font-size:15px;line-height:1.65}.dialog-content li{margin-bottom:10px}.dialog-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.dialog-stack span{font-size:12px;background:#105176;padding:5px 9px}.dialog-note{font-size:13px;color:#bed7e6;margin:20px 0}#dialog-repo{display:inline-block;background:white;color:#08243a;padding:13px 18px;font-weight:800;font-style:italic}
.entry-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;isolation:isolate;background:linear-gradient(135deg,#023daa 0%,#007ded 48%,#16d5ea 100%)}.entry-screen::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/scenes/menu.webp') left center/cover;opacity:.16;mix-blend-mode:luminosity}.entry-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#b8f6ff15 1px,transparent 1px),linear-gradient(90deg,#b8f6ff15 1px,transparent 1px);background-size:30px 30px}.entry-content{width:min(660px,86vw);transform:rotate(-4deg)}.entry-kicker{font:800 12px/1 var(--body);letter-spacing:5px;margin-bottom:20px;color:#affbff}.entry-content h2{font:900 italic clamp(76px,9vw,132px)/.8 var(--display);letter-spacing:-3px;text-shadow:4px 5px #002f7180}.entry-content h2 span{color:var(--cyan)}.entry-description{font-size:15px;letter-spacing:4px;margin:28px 0 32px}.enter-button{width:min(440px,100%);background:white;color:#073071;font:900 italic 27px/1 var(--display);padding:17px 26px;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);text-align:left}.enter-button span{float:right;color:var(--red)}.enter-button:hover{background:var(--cyan)}.enter-button:focus-visible{outline:0;background:var(--cyan);text-decoration:underline;text-underline-offset:5px}.quiet-button{display:block;background:transparent;font:500 14px/1 var(--body);padding:15px 18px;color:#e0f9ff}.entry-track{font-size:9px;letter-spacing:2px;margin:24px 18px;color:#b5eeff}.entry-corner{position:absolute;bottom:30px;right:35px;font:800 italic 15px/1 var(--display);letter-spacing:1px}
.music-dock{position:fixed;bottom:65px;left:24px;z-index:35;width:244px;background:#040d1c;border:2px solid #41ddff;box-shadow:6px 6px #001a485e;color:white}.music-dock-header{display:flex;align-items:center;justify-content:space-between;padding:7px 8px;font-size:9px;letter-spacing:1px}.music-dock-header button{background:#ef2144;color:white;width:25px;height:25px}.music-dock iframe{display:block;border:0;width:240px;height:200px}.music-dock p{padding:9px 10px 4px;font-size:12px;min-height:25px}.music-dock>a{display:block;padding:6px 10px 10px;font-size:10px;color:#99f3ff}.noscript-note{padding:25px;background:#031b40;text-align:center}
body:not(.ready) .hud{position:relative}body:not(.ready) .skill-panel{margin-bottom:35px}body:not(.ready) .sound-tools{display:none}body:not(.ready) .project-list{max-height:none}body:not(.ready) .screen-content{padding-bottom:60px}body:not(.ready) .home-screen{height:100svh}
@media(min-width:1600px){.screen-content{padding-top:15vh}.main-menu{top:42%}.home-caption{top:20%}.project-list{max-height:calc(100svh - 38vh)}}
@media(max-height:660px) and (min-width:761px){.screen-content{padding-top:82px}.section-banner{margin-bottom:18px}.section-banner h2{font-size:50px;padding-top:7px;padding-bottom:7px}.section-banner p{font-size:9px}.project-list{max-height:calc(100svh - 260px)}.profile-card{padding:18px 23px;font-size:14px}.profile-top{margin-bottom:12px}.profile-card blockquote{margin:12px 0;padding:10px}.skill-row{padding:11px 20px;margin-bottom:10px}.contact-panel{margin-top:40px;padding:25px 24px 20px}.contact-row{min-height:60px;margin-bottom:10px}}
@media(max-width:760px){.site-header{inset:20px 20px auto}.identity h1{font-size:31px}.identity-line{width:60px;height:3px}.sound-tools button{font-size:9px;padding:7px}.sound-tools #music-state{margin-left:3px;font-size:8px}.sound-tools button span:first-child{font-size:14px;margin-right:2px}.sound-tools #motion-toggle{min-width:29px;min-height:29px}.scene{background-position:36% center}.scene-video{object-position:36% center}.scene::after{background:linear-gradient(0deg,#00153674,transparent 60%)}.home-caption{left:24px;top:16%;color:#001943;text-shadow:0 1px #fff8;font-size:10px}.home-caption span:last-child{font-size:8px}.main-menu{left:34%;top:48%;width:64%;transform:rotate(-11deg)}.menu-choice{font-size:clamp(46px,11.8vw,82px);letter-spacing:-1px;padding-left:7px;min-width:87%}.menu-translation{font-size:8px;bottom:2px;right:8px}.menu-index{font-size:10px;left:-12px}.menu-note{right:24px;bottom:12%;font-size:9px;letter-spacing:2px}.screen-content,.skills-screen .screen-content,.about-screen .screen-content,.contact-screen .screen-content{width:auto;margin:0 24px;padding-top:100px;padding-bottom:100px}.section-banner{margin-left:-24px;width:calc(100% + 24px);margin-bottom:25px}.section-banner p{padding-left:24px;font-size:9px;letter-spacing:2px}.section-banner h2{padding:12px 24px 14px;font-size:59px}.filters,.skill-tabs{gap:5px}.filters button,.skill-tabs button{font-size:10px;padding:9px 10px}.project-list{max-height:calc(100svh - 310px);padding-left:4px;padding-right:8px}.project{margin-bottom:10px}.project:nth-child(even){margin-left:6px}.project-card{padding:11px 13px 11px 10px;min-height:64px}.roman{font-size:21px;width:32px}.project-copy strong{font-size:24px}.project-copy small{font-size:9px}.source-link{font-size:8px;padding:12px 4px}.skill-panel h3{font-size:20px}.skill-row{grid-template-columns:1fr;padding:14px 17px;gap:11px;margin-bottom:16px}.skill-row strong{font-size:18px}.skill-row span{font-size:10px;padding:5px 8px}.skill-panels{padding:0 5px}.screen-footnote{font-size:9px}.profile-card{padding:20px;font-size:15px;background:#020b15ee}.profile-top{gap:12px}.profile-top h3{font-size:21px}.profile-avatar{width:54px;height:54px;font-size:31px}.profile-top p{font-size:8px;letter-spacing:.5px}.profile-card blockquote{font-size:14px}.contact-panel{padding:30px 17px 22px;margin:46px 9px 0;transform:skew(-5deg)}.contact-panel>*{transform:skew(5deg)}.contact-panel h3{font-size:61px;top:-44px}.contact-row{min-height:71px;gap:11px;padding-right:11px}.contact-icon{width:44px;font-size:23px}.contact-row strong{font-size:12px}.contact-row small{font-size:14px}.contact-intro{font-size:16px}.hud{padding:13px 20px;align-items:center}.hud-credit{font-size:8px;max-width:150px}.keyboard-hint{display:none}.hud-buttons{gap:0}.hud a{font-size:11px}.art-credit{font-size:6px}.music-dock{left:16px;bottom:63px}.entry-content{width:85vw}.entry-content h2{font-size:clamp(68px,17vw,116px)}.entry-kicker{font-size:9px;letter-spacing:3px}.entry-description{font-size:13px;letter-spacing:2px;margin-top:25px}.enter-button{font-size:26px;padding:17px 23px}.entry-corner{right:22px;bottom:28px;font-size:12px}.entry-track{font-size:8px;letter-spacing:1px}.dialog-content{padding:23px}.dialog-content h2{font-size:36px}#dialog-intro{font-size:17px}.dialog-content ul{font-size:14px}}
@media(max-width:390px){.site-header{inset:17px 14px auto}.sound-tools button{letter-spacing:0}.sound-tools{gap:4px}.identity h1{font-size:27px}.screen-content,.skills-screen .screen-content,.about-screen .screen-content,.contact-screen .screen-content{margin-left:20px;margin-right:20px}.project-copy strong{font-size:21px}.contact-row small{font-size:12px}.main-menu{left:33%}.menu-translation{font-size:7px}.profile-top h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.switching .transition-iris{visibility:hidden}}
.music-dock{left:auto;right:24px}
.main-menu .menu-choice{font-size:clamp(50px,5.5vw,90px)}
.menu-note{display:none}
.scene-projects{background-image:url('assets/scenes/projects.webp')}
.section-banner p{color:white;text-shadow:1px 1px 2px #002d50}
@media(max-width:760px){.music-dock{left:auto;right:16px}}
@media(max-width:760px){.main-menu .menu-choice{font-size:clamp(46px,11.8vw,82px)}}
@media(max-height:780px) and (min-width:761px){.screen-content{padding-top:90px}.section-banner{margin-bottom:22px}.section-banner h2{font-size:58px;padding-top:9px;padding-bottom:10px}.profile-card{font-size:14px;line-height:1.6;padding:21px 25px}.profile-top{margin-bottom:14px}.profile-avatar{height:56px;width:56px}.profile-card>p{margin-bottom:12px}.profile-card blockquote{margin:14px 0;padding:12px}.profile-tags{margin:10px 0 16px}.contact-panel{margin-top:40px;padding:26px 24px 20px}.contact-row{min-height:62px;margin-bottom:12px}}
body:not([data-scene="home"]) .keyboard-hint{display:none}