:root { color-scheme: dark; --bg:#101217; --surface:#171a21; --surface-alt:#1b1f28; --text:#e3e7ef; --muted:#a5adbd; --link:#8ebcff; --line:#2b3240; --accent:#edc87a; }
:root[data-theme="light"] { color-scheme:light; --bg:#f6f7fa; --surface:#fff; --surface-alt:#eef1f7; --text:#242c3b; --muted:#596579; --link:#245eaa; --line:#d8dfeb; --accent:#866021; }
* { box-sizing:border-box; }
main #highlights { color:#f4c777 !important; }
main #highlights + div[style] { background:#211e18 !important; border-color:#655033 !important; border-left:3px solid #e3b766 !important; }
main #highlights + div strong { color:#f4c777 !important; }
:root[data-theme="light"] main #highlights { color:#946018 !important; }
:root[data-theme="light"] main #highlights + div[style] { background:#fff6e5 !important; border-color:#e5c68c !important; }
:root[data-theme="light"] main #highlights + div strong { color:#946018 !important; }
.space-3d { position:fixed; top:20vh; width:calc((100vw - 880px) / 2); max-width:340px; text-align:center; }
.space-3d.left { left:0; } .space-3d.right { right:0; }
.space-3d canvas { display:block; width:100%; height:clamp(240px,43vh,420px); cursor:grab; touch-action:none; }
.space-3d canvas:active { cursor:grabbing; }
.space-3d .figure-caption { padding:0 18px; margin:10px 0; color:var(--text); font-size:14px; line-height:1.6; }
.space-3d .figure-label { font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.space-3d .figure-hint { font-size:11px; color:var(--muted); margin:8px 12px; }
@media(max-width:700px) {
  header.site-nav { display:grid; grid-template-columns:1fr auto; gap:10px; }
  .site-nav .nav-controls { grid-column:2; grid-row:1; }
  .site-nav nav { grid-column:1 / -1; grid-row:2; justify-content:space-between; }
}
@media(max-width:1099px), (pointer:coarse) { #space-scenes { display:none; } }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body, td, th, tr, p, a, strong { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { position:relative; max-width:860px; margin:40px auto 0; padding:0 28px 48px; z-index:1; }
main > table { max-width:100% !important; }
main p, main td, main h1, main h2, main h3, main heading, main summary, main span { color:var(--text) !important; }
main a { color:var(--link) !important; }
main a:hover { color:var(--accent) !important; text-decoration:underline; text-underline-offset:4px; }
main h1 { font-size:36px; letter-spacing:-1.4px; margin:24px 0 8px !important; }
main h1 + p { color:var(--muted) !important; }
main p { line-height:1.7; }
main p, main li, main td { font-size:16px !important; line-height:1.75; }
main a, main strong, main em { font-size:inherit; }
main h3 { font-size:18px !important; font-weight:650; letter-spacing:-.2px; }
main h3 + p { font-size:16px !important; line-height:1.65; margin-top:10px !important; color:var(--muted) !important; }
main h3 + p strong { color:var(--text); font-weight:650; }
main td[style*="width:70%"] { padding:24px !important; }
main p[style*="justify"] { text-align:left !important; }
main td[style*="background-color"], main div[style*="background-color"], main h2[style*="background-color"] { background:var(--surface) !important; }
main td[style*="#f9f9f9"], main td[style*="#ffe4d1"] { background:var(--surface-alt) !important; }
main td[style*="border-left"] { border-left:0 !important; border-bottom:1px solid var(--line); }
main table[style*="box-shadow"] { box-shadow:none !important; border:1px solid var(--line); border-radius:12px !important; }
main div[style*="overflow-y"] { border:1px solid var(--line) !important; box-shadow:none !important; text-align:left; line-height:1.9; padding:14px 18px !important; max-height:150px !important; }
main h2 { text-align:left !important; font-size:21px !important; letter-spacing:-.5px; }
main h3 { line-height:1.5; }
main img, main video { object-fit:contain; }
main .one, main .two { width:100%; height:auto; min-height:0; position:relative; }
main .one > img { display:block; }
main .two[style*="opacity: 0"] { position:absolute; }
.profile-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:18px 0 32px !important; }
.profile-links a { padding:8px 13px; border:1px solid var(--line); background:var(--surface); border-radius:7px; font-size:13px; }
.site-nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:20px; max-width:860px; margin:auto; padding:16px 28px; background:var(--bg); border-bottom:1px solid var(--line); }
.site-nav a { color:var(--muted); font-size:13px; font-weight:550; white-space:nowrap; }
.site-nav a:hover { color:var(--text); }
.wordmark { font-size:20px !important; font-weight:800 !important; letter-spacing:-1px; color:var(--text) !important; }
.wordmark span { color:var(--link); }
.site-nav nav { display:flex; flex:1; gap:20px; }
.nav-controls { display:flex; gap:6px; }
button { cursor:pointer; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); width:36px; height:36px; font-size:20px; }
button:hover { border-color:var(--link); }
:focus-visible { outline:2px solid var(--link); outline-offset:4px; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:20; padding:12px; background:var(--surface); }
.skip-link:focus { top:12px; }
.space-scene { position:fixed; top:19vh; width:clamp(150px, calc((100vw - 890px) / 2), 290px); height:65vh; max-height:650px; pointer-events:none; opacity:.75; }
.scene-left { left:8px; } .scene-right { right:8px; }
.space-scene .ink { stroke:var(--muted); fill:var(--bg); }
.space-scene .stars { fill:var(--muted); opacity:.28; }
.scene-caption { fill:var(--muted); font:9px ui-monospace, monospace; letter-spacing:3px; opacity:.65; }
.n1-flight { animation:evasion 8s cubic-bezier(.4,0,.2,1) infinite; }
.n1-bank { animation:bank 8s ease-in-out infinite; }
.speed-lines { animation:streaks .7s linear infinite; }
.tie-flight { animation:pursuit 8s cubic-bezier(.4,0,.2,1) infinite; }
.tie-second { animation-name:pursuit-second; }
.counterfire { animation:counterfire 8s linear infinite; opacity:0; }
.counterfire-second { animation-name:counterfire-second; }
.enemy-fire { animation:enemyfire 8s linear infinite; opacity:0; }
.blast { animation:blast 8s linear infinite; transform-box:fill-box; transform-origin:center; opacity:0; }
.blast + .blast { animation-name:blast-second; }
.falcon-flight { animation:struggle 8s ease-in-out infinite; }
.exhaust { animation:thrust .6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:top; }
.force { animation:force 3s ease-in-out infinite; stroke-dasharray:6 12; }
.vader-hand { animation:hand 8s ease-in-out infinite; transform-origin:155px 353px; }
@keyframes evasion {
  0%{transform:translate(0,0) rotate(0deg)}
  10%{transform:translate(-50px,-65px) rotate(-28deg)}
  21%{transform:translate(48px,-95px) rotate(30deg)}
  30%{transform:translate(60px,-130px) rotate(70deg)}
  39%{transform:translate(86px,0) rotate(165deg)}
  48%{transform:translate(0,225px) rotate(260deg)}
  55%,61%{transform:translate(-50px,215px) rotate(360deg)}
  70%,74%{transform:translate(53px,228px) rotate(360deg)}
  88%{transform:translate(20px,-180px) rotate(370deg);opacity:1}
  91%{transform:translate(0,-260px) rotate(360deg);opacity:0}
  92%{transform:translate(0,190px) rotate(360deg);opacity:0}
  96%{opacity:1} 100%{transform:translate(0,0) rotate(360deg)}
}
@keyframes bank { 0%,55%,61%,70%,74%,100%{transform:scaleX(1) skewY(0deg)} 10%,39%{transform:scaleX(.58) skewY(-12deg)} 21%,48%{transform:scaleX(.65) skewY(12deg)} 30%{transform:scaleX(.85) skewY(-5deg)} 88%{transform:scale(.8)} }
@keyframes streaks { from{transform:translateY(-55px);opacity:0} 20%,80%{opacity:.25} to{transform:translateY(90px);opacity:0} }
@keyframes pursuit { 0%,100%{transform:translate(0,25px) rotate(0deg);opacity:1} 12%{transform:translate(-28px,-70px) rotate(-20deg)} 23%{transform:translate(48px,-100px) rotate(25deg)} 36%{transform:translate(25px,-150px) rotate(-15deg)} 53%,61%{transform:translate(0,0) rotate(0deg);opacity:1} 63%,91%{transform:translate(12px,15px) rotate(35deg);opacity:0} 92%{transform:translate(0,120px);opacity:0} }
@keyframes pursuit-second { 0%,100%{transform:translate(0,25px) rotate(0deg);opacity:1} 14%{transform:translate(-55px,-65px) rotate(-25deg)} 25%{transform:translate(18px,-100px) rotate(20deg)} 38%{transform:translate(-15px,-150px) rotate(-15deg)} 55%,73%{transform:translate(0,0) rotate(0deg);opacity:1} 75%,91%{transform:translate(15px,15px) rotate(-35deg);opacity:0} 92%{transform:translate(0,120px);opacity:0} }
@keyframes counterfire { 0%,56%,63%,100%{opacity:0;transform:translateY(72px)} 57%{opacity:1;transform:translateY(72px)} 62%{opacity:1;transform:translateY(0)} }
@keyframes counterfire-second { 0%,69%,76%,100%{opacity:0;transform:translateY(72px)} 70%{opacity:1;transform:translateY(72px)} 75%{opacity:1;transform:translateY(0)} }
@keyframes enemyfire { 0%,10%,40%,100%{opacity:0;transform:translateY(0)} 12%,28%{opacity:.8;transform:translateY(-30px)} 19%,35%{opacity:0;transform:translateY(-180px)} }
@keyframes blast { 0%,61%,73%,100%{opacity:0;transform:scale(.1)} 63%{opacity:.9;transform:scale(.5)} 71%{opacity:0;transform:scale(1.8)} }
@keyframes blast-second { 0%,73%,85%,100%{opacity:0;transform:scale(.1)} 75%{opacity:.9;transform:scale(.5)} 83%{opacity:0;transform:scale(1.8)} }
@keyframes struggle { 0%,100%{transform:translate(0,12px) rotate(-7deg)} 30%{transform:translate(5px,-24px) rotate(-3deg)} 38%{transform:translate(2px,-20px) rotate(-5deg)} 55%{transform:translate(-3px,6px) rotate(-8deg)} 75%{transform:translate(2px,-8px) rotate(-4deg)} }
@keyframes thrust { from{transform:scaleY(.7);opacity:.45} to{transform:scaleY(1.25);opacity:.9} }
@keyframes force { 0%,100%{opacity:.2;stroke-dashoffset:0} 50%{opacity:.65;stroke-dashoffset:36} }
@keyframes hand { 0%,100%{transform:rotate(0deg)} 35%{transform:rotate(-8deg)} 70%{transform:rotate(4deg)} }
.motion-paused #space-scenes *, .tab-hidden #space-scenes * { animation-play-state:paused !important; }
@media (max-width:1190px) { .space-scene { opacity:.16; width:150px; } main { background:var(--bg); } }
@media (max-width:700px) { .space-scene { display:none; } main { margin-top:20px; padding:0 16px 30px; } .site-nav { padding:12px 16px; gap:12px; flex-wrap:wrap; } .site-nav nav { gap:12px; } .site-nav nav a { font-size:12px; } .site-nav nav a[href="#projects"] { display:none; } main h1 { font-size:29px; } main table table > tbody > tr { display:flex; flex-wrap:wrap; } main table table > tbody > tr > td { width:100% !important; max-width:100% !important; } main td[style*="width:30%"], main td[style*="width:25%"] { padding-bottom:0 !important; border-bottom:0; } main .one { max-width:260px; margin:0 auto; } main img[alt*="profile"] { max-width:220px !important; display:block; margin:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } #space-scenes * { animation:none !important; } .counterfire,.enemy-fire,.blast { opacity:0; } }