@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

/* A personal profile in the visual language of hardware, interfaces and spacesuits. */
:root { --accent:#f487ee; --accent-2:#d08dfa; --ink:#ffffff; --paper:#050505; --text-muted:#cccccc; --text-soft:#aaaaaa; --display:'Chakra Petch',sans-serif; --frame:#806290; --rule:#4c365b; --mono:'Courier New',monospace; }
html,body { background:#0e0a13; color:#f6f1fa; }
body { background-image:radial-gradient(ellipse at 85% 8%,#8c26db10,transparent 38%),linear-gradient(90deg,#d8b7ed08 1px,transparent 1px),linear-gradient(#d8b7ed08 1px,transparent 1px); background-size:100% 100%,80px 80px,80px 80px; }
body::before { display:none; }
::selection { background:var(--accent); color:#050505; }
.nav-wrapper { background:#0b0810; }

.developer-page { max-width:1240px; margin:auto; padding:calc(var(--nav-height) + 28px) 40px 0; position:relative; }
.developer-page p { font:400 .94rem/1.85 'Inter',sans-serif; color:#d4ccdc; }
.developer-page p + p { margin-top:22px; }
.developer-page h2 { font:500 clamp(1.8rem,3vw,2.5rem)/1.15 var(--display); letter-spacing:0; text-wrap:balance; }
.developer-page h3 { font:500 1.35rem/1.25 var(--display); letter-spacing:.01em; }
.developer-page a { color:inherit; text-underline-offset:5px; }
.developer-page a:focus-visible,.developer-page button:focus-visible { outline:3px solid currentColor; outline-offset:5px; }
.section-label,.folio { font:.7rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.section-label { display:block; margin-bottom:18px; color:var(--accent); }
.out-arrow { width:.85em; height:.85em; flex:none; vertical-align:0; }
.text-link { display:inline-flex; align-items:center; gap:22px; padding:8px 0; font:500 .86rem/1.6 var(--display); border-bottom:1px solid currentColor; }
.folio { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--frame); padding:12px 0; color:#ada0b9; }
.bio-title { position:relative; margin-bottom:32px; }
.bio-title::after { content:''; position:absolute; bottom:-2px; right:0; width:100px; height:3px; background:var(--accent); }
.bio-intro-copy h1 { font:600 clamp(3.4rem,6.5vw,5.5rem)/1 var(--display); text-transform:uppercase; letter-spacing:.055em; margin:10px 0 26px; color:#fff; text-shadow:2px 2px #f487ee60,0 0 32px #bd45ff18; }
.bio-intro { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:0 0 72px; align-items:start; }
.bio-intro-copy { padding-top:18px; }
.bio-intro h2 { margin-bottom:20px; max-width:500px; font-size:1.75rem; color:#e6deed; }
.bio-intro .hero-subtitle { font-size:1rem; color:#d4ccdc; line-height:1.85; max-width:440px; }
.bio-roles { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:22px; font:.66rem/1.7 var(--mono); }
.bio-roles span::before { content:'/'; margin-right:8px; }
.portrait { border:1px solid var(--frame); background:linear-gradient(145deg,#2d1c37,#1a1424); padding:12px; position:relative; box-shadow:inset 0 0 0 4px #0e0a13,6px 6px 0 #000; clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); }
.portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 33.33%; border:1px solid #493951; }
.portrait figcaption { color:#c8b9d3; display:flex; justify-content:space-between; gap:16px; padding:13px 16px; font:.65rem/1.7 var(--mono); }
.portrait::before { content:''; position:absolute; top:24px; right:4px; width:3px; height:76px; background:var(--accent); z-index:1; }
.contact-lines { margin-top:46px; max-width:440px; border-top:1px solid var(--frame); padding-top:20px; }
.contact-lines h3 { font-size:.85rem; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; }
.contact-lines ul { list-style:none; }
.contact-lines li { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #3c3046; }
.contact-lines li > span { font:.65rem/1.6 var(--mono); }
.contact-lines a { display:flex; justify-content:space-between; align-items:center; font:.85rem/1.5 var(--display); }
.bio-history { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; padding:42px 0 70px; border-top:1px solid var(--frame); }
.year-mark { font:.8rem/1.6 var(--mono); color:var(--accent); letter-spacing:.1em; margin:22px 0 12px; }
.bio-history h2 { font-size:clamp(1.8rem,3vw,2.5rem); }
.background-body strong { font-weight:600; }
.research { margin:0; padding:36px; background:linear-gradient(135deg,#341c44,#120c1c 65%); color:#f6f1fa; border:1px solid var(--frame); box-shadow:inset 0 0 0 5px #0e0a13; display:grid; grid-template-columns:1fr 1fr; gap:32px 60px; }
.research .section-label { color:var(--accent); }
.research-copy p { font-size:.92rem; color:#d4ccdc; }
.sampling-lab { grid-column:1 / -1; border-top:1px solid var(--frame); padding-top:26px; margin-top:12px; }
.sampling-head { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.sampling-head p { margin-top:8px; font-size:.82rem; color:#bcaec9; }
.sampling-head button { background:#f487ee12; color:var(--accent); border:1px solid #f487ee90; padding:13px 18px; cursor:pointer; font:600 .85rem/1.4 var(--display); flex:none; }
.sampling-head button:hover { background:var(--accent); color:#0e0a13; }
.probability-chart { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; max-width:650px; margin:30px 0 24px; }
.probability { display:flex; flex-direction:column; gap:8px; font:.7rem/1.5 var(--mono); text-align:center; }
.bar-space { height:100px; display:flex; align-items:end; border-bottom:1px solid #95879f; }
.bar-space i { width:100%; display:block; min-height:2px; }
.rank-top { background:#5eead4; color:#050505; }
.rank-middle { background:#fcd34d; color:#050505; }
.rank-tail { background:#f87171; color:#050505; }
.candidate { color:#bcaec9; }
.sample-legend { display:flex; flex-wrap:wrap; gap:12px 25px; font:.68rem/1.5 var(--mono); margin-bottom:28px; }
.sample-legend span { display:flex; align-items:center; gap:8px; }
.sample-legend i { display:inline-block; width:12px; height:12px; }
.sample-comparison { display:grid; grid-template-columns:1fr; gap:28px; }
.sample-sequence { min-width:0; }
.sample-sequence h4 { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; justify-content:space-between; font:500 1.2rem/1.5 var(--display); margin-bottom:14px; }
.sample-sequence h4 span { font:.65rem/1.6 var(--mono); color:#bcaec9; }
.sample-strip { display:flex; flex-wrap:nowrap; gap:2px; height:44px; }
.sample-strip span { display:block; flex:1 1 0; min-width:0; height:100%; }
.sample-sequence p { margin-top:14px; font:.7rem/1.8 var(--mono); color:#d4ccdc; }
.sampling-lab .sample-insight { position:relative; margin-top:24px; padding:14px 0 0 20px; border-top:1px solid var(--rule); max-width:850px; font:.76rem/1.8 var(--mono); color:#bcaec9; }
.sampling-lab .sample-insight::before { content:''; position:absolute; left:0; top:20px; width:6px; height:6px; background:#5eead4; }
.research > .text-link { grid-column:1 / -1; justify-self:start; color:var(--accent); border-bottom:1px solid #f487ee60; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.approach { padding:62px 0; }
.approach > header { padding-bottom:35px; border-bottom:1px solid var(--frame); }
.approach-body { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-top:32px; }
.approach article { position:relative; padding-left:64px; }
.article-number { position:absolute; left:0; top:4px; font:.75rem/1.5 var(--mono); color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:7px; }
.approach h3 { margin-bottom:20px; }
.approach p { font-size:.93rem; }
.approach .text-link { margin-top:18px; }
.platform { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; padding:40px 0 65px; border-top:1px solid var(--frame); }
.platform-title .text-link { margin-top:26px; }
.platform-body article + article { margin-top:30px; border-top:1px solid var(--rule); padding-top:30px; }
.platform-body h3 { margin-bottom:18px; }
.platform-body .section-label { margin-bottom:10px; }
.platform-body .text-link { margin-top:18px; }
.endgame { position:relative; padding:46px 0 58px; border-top:1px solid var(--frame); display:grid; grid-template-columns:.9fr 1.1fr; gap:20px 48px; align-items:start; }
.endgame header { grid-column:1; }
.endgame header p { margin-top:20px; font-size:.88rem; }
.endgame blockquote { grid-column:1; margin:0; }
.endgame blockquote p { font:500 clamp(2rem,3.6vw,3.1rem)/1.16 var(--display); color:var(--accent); letter-spacing:0; }
.endgame blockquote em { font-style:normal; }
.future { grid-column:2; grid-row:1 / span 3; align-self:center; position:relative; padding:10px; background:#271832; border:1px solid var(--frame); box-shadow:inset 0 0 0 4px #0e0a13; }
.future::before { content:''; position:absolute; left:-3px; top:30px; height:50px; border-left:4px solid var(--accent); }
.future img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.future figcaption { color:#c8b9d3; padding:12px 4px 2px; font:.65rem/1.7 var(--mono); }
.endgame-bottom { grid-column:1; display:flex; flex-direction:column; align-items:start; gap:18px; }
.endgame-bottom p { max-width:650px; font:.98rem/1.75 'Inter',sans-serif; }
.endgame-bottom a { flex:none; }
.site-footer-wrapper { margin-top:0; background:#050505; border:0; }
.site-footer,.site-footer > div:last-child { color:#bdb0c7; }
.site-footer-links a { color:#ffffff; }

@media(min-width:1400px) { .developer-page::before,.developer-page::after { content:''; position:absolute; top:120px; bottom:50px; width:7px; border-top:1px solid var(--frame); border-bottom:1px solid var(--frame); pointer-events:none; } .developer-page::before { left:0; border-left:1px solid var(--frame); } .developer-page::after { right:0; border-right:1px solid var(--frame); } }
@media(max-width:1050px) { .developer-page { padding-left:28px; padding-right:28px; } .bio-intro,.bio-history,.research,.approach-body { column-gap:32px; } .contact-lines { margin-top:28px; } .approach article { padding-left:42px; } .platform { gap:36px; } .research { padding:28px; } .endgame { gap:22px 32px; } }
@media(max-width:760px) {

 .developer-page { padding:calc(var(--nav-height) + 18px) 20px 0; }
 .folio { font-size:.58rem; }
 .folio span:last-child { max-width:145px; text-align:right; }
 .bio-title { margin-bottom:22px; }
 .bio-intro { grid-template-columns:1fr; gap:22px; padding-bottom:40px; }
 .bio-intro-copy { display:contents; }
 .bio-intro-copy > .section-label { order:0; margin:0; }
 .bio-intro-copy h1 { order:1; font-size:clamp(2.8rem,11vw,4.5rem); margin:0; }
 .bio-intro h2 { order:2; margin:0; font-size:1.5rem; }
 .bio-intro h2 br { display:none; }
 .bio-intro .hero-subtitle { order:3; max-width:none; font-size:.95rem; }
 .portrait { order:4; }
 .portrait img { aspect-ratio:4/3; }
 .bio-roles { order:5; margin:0; }
 .contact-lines { order:6; margin:0; max-width:none; padding-top:18px; }
 .bio-history { grid-template-columns:1fr; padding:28px 0 40px; gap:24px; }
 .bio-history header .section-label { margin:0; }
 .year-mark { margin:16px 0 10px; }
 .bio-history h2 { font-size:1.8rem; }
 .research { grid-template-columns:1fr; padding:24px 18px; gap:24px; margin:0 -4px; }
 .research h2 { font-size:1.8rem; }
 .research-copy p { font-size:.89rem; }
 .sampling-lab { margin-top:6px; padding-top:22px; }
 .sampling-head { flex-direction:column; align-items:start; gap:18px; }
 .sampling-head h3 { font-size:1.2rem; }
 .probability-chart { gap:8px; }
 .sample-legend { gap:12px 16px; font-size:.61rem; }
 .sample-sequence h4 { font-size:1.1rem; }
 .approach { padding:40px 0; }
 .approach-body { grid-template-columns:1fr; gap:32px; }
 .approach > header { padding-bottom:24px; }
 .platform { grid-template-columns:1fr; padding:28px 0 40px; gap:30px; }
 .platform-title h2 br { display:none; }
 .platform-title .text-link { margin-top:12px; }
 .endgame { grid-template-columns:1fr; padding:30px 0 40px; gap:24px; }
 .endgame header,.endgame blockquote,.endgame-bottom,.future { grid-column:1; grid-row:auto; }
 .endgame blockquote p { font-size:2.25rem; }
 .endgame-bottom p { font-size:.98rem; }
}
@media(max-width:360px) { .developer-page { padding-left:16px; padding-right:16px; } .portrait figcaption { font-size:.55rem; padding:10px 2px; } .contact-lines li { grid-template-columns:90px 1fr; } .contact-lines a { font-size:.8rem; } .research { padding-left:14px; padding-right:14px; } }

/* Illuminated edges on the console frames. */
.bio-title::after,.portrait::before,.future::before { box-shadow:0 0 14px #f487ee40; }
.bio-roles span::before { color:var(--accent); }
.sampling-head button { background:#f487ee1b; box-shadow:inset 0 0 16px #ff6ee70c; }
.text-link:hover,.contact-lines a:hover { color:var(--accent); }