@font-face{font-family:Poppins;src:url('assets/Poppins-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/Poppins-Black.ttf') format('truetype');font-weight:900;font-display:swap}
:root{font-family:Arial,Helvetica,sans-serif;color:#85e5f5;background:#0016d5;color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:7px}button{border:0}button:disabled{cursor:default} [hidden]{display:none!important}
.scene{position:relative;width:100%;height:100svh;min-height:500px;overflow:hidden;background:#fff;isolation:isolate;contain:layout paint}
.background{position:absolute;inset:0;background:#fff url('assets/official-persona-background-poster.jpg') left center/cover no-repeat;pointer-events:none;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;transition:transform 1.05s cubic-bezier(.4,0,.2,1)}
.background video{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.scene.is-intro{background:#fff}.is-intro .background{transform:translate3d(50%,0,0)}
.intro{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(102deg,rgba(244,255,255,.96) 0%,rgba(244,255,255,.95) 58%,transparent 58.2%);z-index:4;transition:opacity .5s,transform .7s}
.start{background:none;color:#73d9e6;font-size:clamp(3rem,7.5vw,8rem);font-weight:950;font-style:italic;letter-spacing:-.045em;white-space:nowrap;text-shadow:2px 0 currentColor;animation:start-pulse 2s ease-in-out infinite}
.start span{display:block;margin-top:1.5rem;font-size:.8rem;font-weight:700;font-style:normal;letter-spacing:.22em;text-shadow:none}
.home{position:absolute;inset:0}.menu{position:absolute;top:16%;left:46%;width:49%;transform:rotate(-10deg);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.menu button{position:relative;z-index:0;display:block;background:none;padding:0 0 .045em;line-height:.95;text-align:left;white-space:nowrap;font-size:clamp(2rem,4.6vw,5.8rem);font-weight:950;letter-spacing:-.055em;text-shadow:1.5px 0 currentColor;transform-origin:25% 50%;transition:transform .13s ease,color .13s ease,margin .13s ease;isolation:isolate}
.menu button:nth-child(2){margin-left:8%}.menu button:nth-child(3){margin-left:1%}.menu button:nth-child(4){margin-left:4%}.menu button:nth-child(5){margin-left:8%}.menu button:nth-child(6){margin-left:0}.menu button:nth-child(7){margin-left:7%}.menu button:nth-child(8){margin-left:4%}
.menu button.identity{font-size:clamp(1.65rem,3.85vw,5rem);margin-bottom:.08em}.menu button.selected{transform:scale(1.2);color:#bbf4ff;z-index:2}.menu button::before{content:'';position:absolute;inset:1% -11% 4% -12%;background:#7999ed;clip-path:polygon(0 40%,100% 7%,87% 43%,98% 72%,6% 100%,16% 66%);opacity:0;z-index:-1;transition:opacity .14s}.menu button.selected::before{opacity:.46}
.controls{position:absolute;right:2.2%;bottom:3.5%;display:flex;gap:8px}.controls button{border:2px solid #77d8ff66;background:#82dfff57;color:#a0edfa;font-size:1.55rem;font-weight:700;width:36px;height:36px;line-height:28px;transition:background .1s}.controls button:hover{background:#a9ebff99}
.sound{position:absolute;bottom:3.5%;left:2.2%;background:transparent;color:#b5e6ff;opacity:.8;font-size:.75rem;letter-spacing:.13em;font-weight:700;z-index:6}
.detail{position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 0%,#0317cae8 39%,#00099eef 100%);padding:5vh 6vw 6vh 44vw;overflow:auto}.back{background:none;position:relative;font-weight:900;font-size:1rem;letter-spacing:.1em;padding:.7rem 0}.back kbd{font-size:.7rem;border:1px solid #77dfff66;padding:.2rem;margin-left:.6rem}.detail-content{padding-top:5vh}.detail-content h1{font-size:clamp(2.6rem,5.3vw,6rem);line-height:.95;letter-spacing:-.055em;margin:0 0 2rem;transform:rotate(-6deg);transform-origin:left;word-break:break-word}.detail-content p{font-size:clamp(1rem,1.65vw,1.3rem);line-height:1.6;max-width:36rem;color:#d2f7ff}.detail-content .eyebrow{font-size:.8rem;letter-spacing:.25em;color:#7fdceb}.detail-content a{color:#b0f9ff}.empty-state{border-top:2px solid #83dfff66;margin-top:2rem;padding-top:1.4rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.home.entering{animation:menu-in .65s both}.detail.entering{animation:detail-in .35s both}
@keyframes start-pulse{50%{opacity:.65}}@keyframes menu-in{from{opacity:0;transform:translateX(8%)}to{opacity:1;transform:translateX(0)}}@keyframes detail-in{from{opacity:0;transform:translateX(3%)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){.scene{min-height:540px}.background{background-position:40% center}.menu{left:26%;top:23%;width:70%}.menu button{font-size:clamp(2.2rem,8.1vw,3.6rem);line-height:1.05}.menu button.identity{font-size:clamp(1.9rem,6.9vw,3rem)}.start{font-size:12vw}.start span{font-size:.65rem}.controls{bottom:4%;right:6%}.sound{bottom:5%;left:5%}.detail{padding:5vh 7vw 12vh;background:#041abae8}.detail-content{padding-top:8vh}.detail-content h1{font-size:3.5rem}.intro{background:linear-gradient(102deg,#effcffeb 0%,#effcffeb 70%,transparent 70.2%)}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
.intro{background:none;transition:opacity .22s ease;will-change:opacity}.intro.leaving{opacity:0;pointer-events:none}.start{font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:10vw;letter-spacing:-.035em;color:#a1eefd;text-shadow:none;animation:none;transform:skew(-8deg)}.start span{font-family:Arial,sans-serif;opacity:0;transition:opacity .2s}.start:hover span,.start:focus-visible span{opacity:1}
.menu{left:48%;top:18%;width:48%;transform:none;gap:0}.menu button{font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:clamp(2rem,5.25vw,6.5rem);height:.81em;line-height:.8;letter-spacing:-.06em;text-shadow:none;padding:0;transform:rotate(var(--angle)) scale(1);margin-left:var(--offset)!important;transform-origin:40% 50%;color:var(--tint)}
.menu button:nth-child(1){--angle:-10deg;--offset:0%;--tint:#a1eefd}.menu button:nth-child(2){--angle:-14deg;--offset:10%;--tint:#71b2e4}.menu button:nth-child(3){--angle:-10deg;--offset:4%;--tint:#90e1f2}.menu button:nth-child(4){--angle:-8deg;--offset:-1%;--tint:#a3f0ff}.menu button:nth-child(5){--angle:0deg;--offset:10%;--tint:#71b2e4}.menu button:nth-child(6){--angle:-12deg;--offset:2%;--tint:#90e1f2}.menu button:nth-child(7){--angle:-6deg;--offset:6%;--tint:#9aebfc}.menu button:nth-child(8){--angle:7deg;--offset:11%;--tint:#6bbbfc}
.menu button.identity{font-size:clamp(1.65rem,3.7vw,4.65rem);margin-bottom:.42em;letter-spacing:-.065em}.menu button.selected{transform:rotate(var(--angle)) scale(1.28);color:var(--tint)}.menu button.selected::before{opacity:.6}.menu button::before{inset:-20% -10% -18% -15%;background:#8095f8;clip-path:polygon(0 58%,100% 0,78% 82%,4% 90%)}
.sound{color:#347cca}.is-intro .sound{color:#398caf}
@media(max-width:700px){.background video{object-position:32% center}.background{background-position:32% center}.is-intro .background{transform:translate3d(44%,0,0)}.menu{left:24%;top:29%;width:73%}.menu button{font-size:clamp(2.2rem,9.5vw,4.2rem);height:.92em}.menu button.identity{font-size:clamp(1.65rem,6.9vw,3rem);margin-bottom:.7em}.start{font-size:12vw}.intro{background:none}}
.menu button span{display:block;animation:drift 3.6s ease-in-out infinite;animation-delay:var(--delay)}.menu button.identity{word-spacing:.13em}.menu button:focus-visible{outline:none}.menu button:focus-visible span{filter:brightness(1.25)}
.contact-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.contact-links a{font-size:1rem;font-weight:800;border-bottom:2px solid #a1eefd;padding:.6rem 0;text-decoration:none}
@keyframes drift{0%,100%{translate:0 1.5px}25%{translate:1.5px 0}50%{translate:0 -1.5px}75%{translate:-1.5px 0}}
@media(min-width:701px){.menu button{font-size:min(5.25vw,9.5svh)}.menu button.identity{font-size:min(3.7vw,6.7svh)}}
@media(max-width:420px){.menu{left:21%;width:76%}.menu button.identity{font-size:6.7vw}.menu button.selected{transform:rotate(var(--angle)) scale(1.2)}}
@media(max-width:700px){.home::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#001487ce 0%,#001487b0 50%,#00148720 100%);pointer-events:none}.menu{left:25%;width:71%}.controls button{width:44px;height:44px;font-size:1.7rem}.sound{color:#b4e8fb;opacity:1}.is-intro .sound{color:#347cca}.menu button.identity{word-spacing:.04em}}
.menu button::before{inset:-20% -15% -17% -21%;background:#fff;clip-path:polygon(0 62%,100% 0,86% 91%,6% 100%);opacity:0;z-index:-1;transition:opacity .08s,scale .12s;scale:.92 1;pointer-events:none}
.menu button::after{content:'';position:absolute;inset:-25% -20% -22% -25%;background:linear-gradient(100deg,#ff63d9 3%,#ffaadf 45%,#ff47b7 100%);clip-path:polygon(0 78%,100% 0,83% 100%,8% 87%);opacity:0;z-index:-2;transition:opacity .08s,scale .12s;scale:.9 1;pointer-events:none}
.menu button.selected{color:#f90020;font-weight:900;text-shadow:-.055em .025em 0 #080018;transform:rotate(calc(var(--angle) - 2deg)) scale(1.28) skew(-7deg);filter:drop-shadow(0 0 9px #ff32a81c)}
.menu button.selected::before,.menu button.selected::after{opacity:1;scale:1}
.menu button.selected span{animation:none;position:relative;z-index:1}
@media(max-width:700px){.menu button.selected{transform:rotate(calc(var(--angle) - 2deg)) scale(1.2) skew(-7deg)}}
@media(max-width:700px){.menu button.identity.selected{transform:rotate(calc(var(--angle) - 2deg)) scale(1.08) skew(-7deg)}}
/* Keep each hit area steady while its visual label expands and tilts. */
.menu button,.menu button.selected,.menu button.identity.selected{transform:none;filter:none}
.menu button::before,.menu button::after{display:none}
.menu button span{position:relative;isolation:isolate;pointer-events:none;transform:rotate(var(--angle));transform-origin:40% 50%;transition:transform .12s,color .08s}
.menu button span::before,.menu button span::after{content:'';position:absolute;opacity:0;pointer-events:none;transition:opacity .08s,scale .12s;scale:.92 1}
.menu button span::before{inset:-20% -15% -17% -21%;background:#fff;clip-path:polygon(0 62%,100% 0,86% 91%,6% 100%);z-index:-1}
.menu button span::after{inset:-25% -20% -22% -25%;background:linear-gradient(100deg,#ff63d9 3%,#ffaadf 45%,#ff47b7 100%);clip-path:polygon(0 78%,100% 0,83% 100%,8% 87%);z-index:-2}
.menu button.selected span{transform:rotate(calc(var(--angle) - 2deg)) scale(1.28) skew(-7deg);filter:drop-shadow(0 0 9px #ff32a81c)}
.menu button.selected span::before,.menu button.selected span::after{opacity:1;scale:1}
@media(max-width:700px){.menu button.selected span{transform:rotate(calc(var(--angle) - 2deg)) scale(1.2) skew(-7deg)}.menu button.identity.selected span{transform:rotate(calc(var(--angle) - 2deg)) scale(1.08) skew(-7deg)}}
.audio-controls{position:absolute;left:2.2%;bottom:3.5%;display:flex;gap:1.3rem;z-index:6}.audio-controls .sound{position:static;min-height:36px;padding:0}.audio-controls .sound:hover{color:#ff7fcf}.audio-controls .sound:focus-visible{outline-offset:2px}
@media(max-width:700px){.audio-controls{left:5%;bottom:4%;gap:.7rem}.audio-controls .sound{font-size:.75rem;letter-spacing:.03em;min-height:44px}.controls{right:4%;gap:5px}}
.home.entering{animation:menu-in .45s cubic-bezier(.22,1,.36,1) both}
@keyframes menu-in{from{opacity:0;transform:translate3d(2.5%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(pointer:fine){html,body,.scene,.scene *{cursor:url('assets/persona-cursor.svg') 6 5,auto}.scene button,.scene a{cursor:url('assets/persona-cursor.svg') 6 5,pointer}}

/* Personal portfolio pages. */
.username-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.copy-username{background:#a4eaff;color:#07164c;font-weight:700;font-size:.9rem;padding:.7rem 1rem;min-height:44px}.copy-username:hover{background:#fff}.copy-feedback{font-size:.85rem;line-height:1.4;color:#b7e9ff;max-width:15rem}.copy-feedback:empty{display:none}.detail-content .discord-username{user-select:all;color:#e1f7ff;font-weight:700}.personal-note .discord-username{font-family:Poppins,Arial,sans-serif;font-size:2rem;letter-spacing:.02em;margin-bottom:.7rem}
.menu button span,.page-heading h1,.page-heading .eyebrow{text-transform:uppercase}.start>b{font:inherit}.detail-content p [data-copy]{white-space:pre-wrap}.section-links [data-copy]{margin-left:0;color:inherit}
.menu{top:16%}.menu button{font-size:min(4.5vw,7.65svh);height:.89em;--angle:0deg;--offset:4%;--tint:#90e1f2}.menu button.identity{font-size:min(3.35vw,5.7svh)}
.menu button:nth-child(8){--angle:-3deg;--offset:10%;--tint:#90e1f2}.menu button:nth-child(9){--angle:2deg;--offset:7%;--tint:#a1eefd}.menu button:nth-child(10){--angle:8deg;--offset:11%;--tint:#6bbbfc}
.detail{padding:24px 5vw 96px 37vw;background:linear-gradient(105deg,transparent 0%,#0715b5f5 33%,#000c8dfc 100%);scrollbar-width:thin;scrollbar-color:#69ccec #001293;overscroll-behavior:contain}
.detail .back{position:sticky;top:0;z-index:5;background:#0618b9;padding:.75rem 1rem;margin-left:-1rem;font-size:.875rem;box-shadow:0 7px 20px #0618b940}
.detail-content{max-width:860px;padding-top:1.8rem}.detail-content h1{font-family:Poppins,Arial,sans-serif;font-size:clamp(2.4rem,4.5vw,5rem);line-height:1.04;letter-spacing:-.05em;transform:rotate(-3deg);margin:1.3rem 0 2rem;color:#b3f0ff}
.detail-content h2{font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:1.3rem;line-height:1.3;letter-spacing:-.035em;color:#c8f5ff;margin:0 0 .7rem}
.detail-content p{font-size:1.0625rem;line-height:1.75;max-width:48rem;color:#d4eaff;margin:0 0 1.2rem}.detail-content .eyebrow{font-size:.75rem;letter-spacing:.16em;color:#73c5ed;margin:0}
.section-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 2rem;padding:0 0 1.1rem;border-bottom:1px solid #81cded44}.section-nav button{background:transparent;padding:.6rem .7rem;color:#89c4eb;font-size:.875rem;font-weight:700;transition:color .12s,background .12s}.section-nav button:hover{color:#fff;background:#619ee936}.section-nav button[aria-current]{background:#acf0ff;color:#041674;transform:skew(-5deg)}
.intro-copy p:first-child{font-size:1.2rem;line-height:1.75;color:#f0fbff}.profile-facts{display:grid;grid-template-columns:.55fr 1.1fr 1.15fr;gap:1.2rem;margin:2rem 0 2.5rem;padding:1.35rem 0;border-top:1px solid #6acaee66;border-bottom:1px solid #6acaee66}
.profile-facts dt,.favorite-list dt,.small-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#81bee9;font-weight:700;display:block;margin:0 0 .6rem}.profile-facts dd{margin:0;color:#f3fbff;font-size:1.06rem;font-weight:700;line-height:1.5}.profile-facts>div:first-child dd{font-family:Poppins;font-size:2.25rem;line-height:1}
.personal-section{margin-top:2.5rem}.personal-section h2{font-size:1.55rem}.section-links{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.section-links button{background:none;text-align:left;font-size:.95rem;font-weight:700;padding:.6rem 0;border-bottom:2px solid #b5e9ff;color:#e4faff}.section-links span{margin-left:1rem;color:#82dff7}
.education-card{display:flex;align-items:center;gap:1.8rem;padding:1.6rem 1.5rem;margin-bottom:1.75rem;border:1px solid #6cbfef66;border-left:4px solid #a4eaff;background:linear-gradient(110deg,#306fea66,#002c9e22)}.year-mark{font-family:Poppins;font-size:4.5rem;font-weight:900;line-height:1;color:#9ce9ff;letter-spacing:-.09em}.education-card h2{font-size:1.8rem}.education-card p{margin-bottom:0}.education-card .education-stage{font-size:1rem;color:#a6d5f8}
.personal-note{margin-top:2rem;border-left:2px solid #ff8ad9;padding:1rem 1.25rem;background:#5485da16}.personal-note p:last-child{margin-bottom:0}.detail-content .page-lead{font-size:1.18rem;color:#edf9ff;margin-bottom:1.7rem}
.project-card{padding:1.5rem 0 1.75rem;border-top:2px solid #a2e8fa;border-bottom:1px solid #a2e8fa55}.card-topline{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#96bce9}.project-status{border:1px solid #a3dcff88;padding:.35rem .55rem;color:#caf5ff}.project-card h2{font-size:1.65rem}.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0}.tags span{font-size:.85rem;color:#ddfaff;background:#598de936;border:1px solid #6cb6ee55;padding:.4rem .7rem}.detail-content .project-note,.detail-content .content-note{font-size:.875rem;color:#aac7e9;line-height:1.6}.project-card .project-note{margin-bottom:0}
.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1.5rem 0}.skill-card{border:1px solid #709efb66;background:#2c53cf33;padding:1.1rem}.skill-card h2{font-size:1.2rem}.skill-card p{font-size:.95rem;line-height:1.5;margin:0;color:#bed8f4}
.interest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.interest-card{padding:1.35rem 1.2rem;border-top:2px solid #80cee9;background:linear-gradient(135deg,#547bf326,#133ec80a)}.interest-card:last-child:nth-child(odd){grid-column:1/-1}.interest-index{display:block;font-size:.75rem;color:#70a6de;margin-bottom:.8rem;font-weight:700;letter-spacing:.1em}.interest-card p{font-size:1rem;line-height:1.7;margin:0}.favorite-list{margin:1rem 0}.favorite-list>div{padding:1rem 0;border-bottom:1px solid #64abe94d;display:grid;grid-template-columns:8rem 1fr;gap:1rem}.favorite-list dt{margin:0}.favorite-list dd{margin:0;font-size:1rem;color:#e0f4ff;line-height:1.6}
.social-list{margin:2rem 0}.social-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;border-bottom:1px solid #649de580;padding:1.4rem 0;text-decoration:none}.social-row h2{font-size:1.2rem;margin-bottom:.4rem}.social-row p{font-size:.95rem;margin:0;color:#a9c6ed}.social-row>span{font-size:.75rem;white-space:nowrap;color:#96b6de}.social-row[href]:hover h2{color:#ff96de}.social-action{font-size:1.2rem;font-weight:700;text-decoration:none}.text-link{font-size:1rem;font-weight:700;color:#c4f7ff;text-decoration:none}.inline-button{display:inline-block;background:none;padding:0 0 .5rem;margin-top:2rem;border-bottom:2px solid #a7ebff}.detail-content .page-signoff{font-size:.8rem;color:#759dd4;border-top:1px solid #86b5ed33;margin:3rem 0 0;padding-top:1rem}
@media(max-width:1000px) and (min-width:701px){.detail{padding-left:30vw;padding-right:4vw}.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-content h1{font-size:3rem}}
@media(max-width:700px){.menu{top:22%}.menu button{font-size:min(9.3vw,6.6svh);height:.92em}.menu button.identity{font-size:min(6.7vw,4.8svh);margin-bottom:.7em}.detail{padding:20px 6vw 110px;background:linear-gradient(145deg,#0026bdf8,#000961fa)}.detail-content{padding-top:1.25rem}.detail-content h1{font-size:clamp(2rem,8.5vw,3.2rem);margin-bottom:1.5rem}.section-nav{gap:.25rem}.section-nav button{padding:.6rem .5rem;font-size:.85rem}.intro-copy p:first-child{font-size:1.12rem}.profile-facts{grid-template-columns:1fr 1fr;gap:1.4rem}.profile-facts>div:first-child{grid-column:1/-1}.profile-facts>div:first-child dd{font-size:2rem}.education-card{gap:1.1rem;padding:1.2rem 1rem}.year-mark{font-size:3.5rem}.education-card h2{font-size:1.4rem}.interest-grid{grid-template-columns:1fr;gap:.75rem}.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.skill-card{padding:.9rem}.skill-card h2{font-size:1.1rem}.favorite-list>div{grid-template-columns:1fr;gap:.4rem}.social-row{align-items:flex-start}.detail .back{font-size:.875rem}.page-heading{overflow-wrap:anywhere}}