/* A legible, responsive control center with motion tied to exploration. */
:root { --bg:#080d17; --surface:rgba(16,25,43,.93); --surface-solid:#10192b; --surface-2:#18253e; --text:#f0f5ff; --muted:#b0bfd5; --dim:#91a4c1; --cyan:#65efcf; --violet:#b4a0ff; --blue:#7299ff; --line:rgba(151,180,228,.2); --line-strong:rgba(151,180,228,.38); --max:1240px; }
html[data-theme='light'] { --dim:#536783; --muted:#465873; --cyan:#096953; }
body { overflow-x:clip; }
body::before { background-size:96px 96px; opacity:.17; }
body::after { opacity:.45; }
.ambient-orb { opacity:.055; filter:blur(100px); }
.site-header,.section-shell { width:min(calc(100% - 64px),var(--max)); }
.site-header { display:flex; justify-content:space-between; min-height:84px; height:auto; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 93%,transparent); backdrop-filter:blur(18px); gap:20px; }
.wordmark { font-size:14px; white-space:nowrap; }
.mark { flex-shrink:0; width:38px; height:38px; border-radius:12px 3px 12px 3px; color:var(--cyan); border:1px solid var(--cyan); background:transparent; box-shadow:none; }
.mark::after { display:none; }
.nav-links { gap:17px; }
.nav-links a { display:inline-flex; min-height:44px; align-items:center; font-size:14px; font-weight:500; }
.nav-links a::after { bottom:1px; }
.header-actions { gap:7px; }
.theme-toggle,.menu-toggle,.motion-toggle { min-width:44px; min-height:44px; }
.motion-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 10px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:var(--surface); font-size:12px; cursor:pointer; }
.motion-toggle:hover { border-color:var(--cyan); }
.nav-cv { min-height:44px; font-size:13px; }
.hero { min-height:auto; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:50px 60px; padding-block:66px 0; }
.hero-copy { min-width:0; }
.hero .kicker { margin:0 0 24px; font-size:12px; }
.hero h1 { font-size:clamp(3.3rem,5.9vw,5.1rem); line-height:1.07; letter-spacing:-.065em; }
.gradient-text { display:inline-block; padding-bottom:.12em; background:linear-gradient(105deg,var(--cyan) 20%,var(--blue) 65%,var(--violet)); background-size:160% auto; background-clip:text; -webkit-background-clip:text; }
.hero-lede { max-width:510px; margin-top:25px; font-size:17px; line-height:1.85; }
.hero-lede strong { color:var(--text); font-weight:600; }
.hero-actions { gap:10px; margin-top:28px; }
.button { min-height:50px; border-radius:10px; }
.button-primary { color:#071b17; background:var(--cyan); border-color:var(--cyan); box-shadow:0 6px 30px color-mix(in srgb,var(--cyan) 12%,transparent); }
html[data-theme='light'] .button-primary { color:#fff; }
.text-link { font-size:14px; }
.stack-line { gap:8px 16px; margin-top:28px; font-size:12px; }
.system-card { min-width:0; width:100%; border-radius:20px; background:linear-gradient(135deg,var(--surface-2),var(--surface-solid) 65%); }
.system-card::after,.project-card::after { display:none; }
.system-topline { padding:20px 24px 12px; border-bottom:0; }
.system-topline h2 { font-size:30px; }
.live-badge { font-size:12px; white-space:nowrap; text-transform:none; letter-spacing:0; }
.orbit-map { min-height:0; height:210px; }
.orbit-map svg { inset:-16px 0 16px; }
.orbit-map::after { opacity:.55; }
.node text { font-size:13px; }
.connections path { opacity:.35; transition:opacity .4s,stroke-width .4s; }
.connections path.is-active { opacity:1; stroke:var(--cyan); stroke-width:2; animation-duration:3s; }
.node.is-active circle { fill:color-mix(in srgb,var(--cyan) 12%,var(--surface-2)); }
.node.is-active { filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cyan) 45%,transparent)); }
.core-ring { transform-box:fill-box; transform-origin:center; animation-duration:24s; }
.map-caption { position:absolute; inset:auto 0 4px; text-align:center; color:var(--dim); font:400 12px/1.6 'DM Mono',monospace; letter-spacing:.02em; }
.map-caption b { font:500 12px 'Manrope',sans-serif; color:var(--muted); }
.stage-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line); background:var(--surface); }
.stage-controls button { position:relative; min-height:68px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:11px 13px; border:0; background:transparent; color:var(--muted); font-size:14px; cursor:pointer; transition:background .3s,color .3s; }
.stage-controls button + button { border-left:1px solid var(--line); }
.stage-controls button span { color:var(--dim); font:400 12px 'DM Mono',monospace; }
.stage-controls button.is-active { color:var(--cyan); background:color-mix(in srgb,var(--cyan) 7%,transparent); }
.stage-controls button.is-active::after { content:''; position:absolute; inset:auto 0 0; height:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.stage-controls button:hover { background:var(--surface-2); }
.stage-controls button:focus-visible { outline-offset:-4px; }
.system-activity { min-height:155px; grid-template-columns:1fr auto; align-content:center; gap:8px 12px; padding:18px 24px; border-top:0; background:transparent; }
.activity-label,.activity-count,.activity-note { font:400 12px/1.6 'DM Mono',monospace; letter-spacing:0; }
.activity-copy { grid-column:1/-1; min-height:45px; margin:0; white-space:normal; overflow:visible; color:var(--text); font:400 14px/1.65 'Manrope',sans-serif; }
.activity-note { grid-column:1/-1; color:var(--dim); }
.metric-grid div { padding:14px 18px; }
.metric-grid strong { font-size:23px; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.metric-grid span { display:block; margin-top:4px; font:400 12px/1.5 'Manrope',sans-serif; text-transform:none; letter-spacing:0; color:var(--muted); }
.system-footer { padding:16px 24px; font:400 12px/1.5 'Manrope',sans-serif; }
.engineering-signals { margin-top:8px; border-radius:0; border-inline:0; background:var(--line); }
.engineering-signals div { padding:24px; gap:3px 16px; background:var(--bg); }
.engineering-signals div:first-child { padding-left:0; }
.engineering-signals span { font-size:12px; }
.engineering-signals b { font-size:14px; }
.engineering-signals small { font:400 12px/1.6 'Manrope',sans-serif; color:var(--muted); }
.work { padding-block:96px 50px; }
.section-heading { grid-template-columns:1.1fr 1fr; gap:60px; }
.section-heading h2,.proof-copy > h2 { font-size:clamp(34px,4vw,53px); font-weight:600; line-height:1.15; }
.project-toolbar { margin-top:34px; }
.filter { min-height:44px; font-size:14px; }
.result-count { font-size:12px; }
.project-grid { gap:20px; }
.project-card { display:flex; flex-direction:column; min-height:0; padding:30px; border-radius:20px; backdrop-filter:none; }
.project-card:hover { transform:translateY(-3px); box-shadow:0 16px 50px #0002; }
.project-wide { padding:38px; }
.project-index { top:26px; right:25px; color:var(--dim); font:400 12px 'DM Mono',monospace; letter-spacing:0; }
.project-card:hover .project-index { color:var(--cyan); transform:none; }
.project-status { max-width:calc(100% - 28px); padding:6px 10px; border-radius:5px; font-size:12px; text-transform:none; letter-spacing:0; line-height:1.4; }
.project-body { margin-top:30px; flex:1; align-self:auto; }
.project-body h3 { font-size:27px; line-height:1.25; margin-bottom:15px; }
.project-wide h3 { max-width:880px; font-size:clamp(28px,3vw,40px); }
.project-body > p:not(.micro-label) { max-width:820px; font-size:16px; line-height:1.7; }
.project-proof { flex-wrap:wrap; gap:10px 28px; margin-block:20px 12px; font:400 14px/1.5 'Manrope',sans-serif; }
.project-proof b { color:var(--text); }
.project-body > .evidence-note { margin-top:18px; padding-left:14px; border-left:2px solid var(--violet); font-size:13px !important; }
.architecture-ribbon { display:flex; flex-wrap:wrap; max-width:none; gap:10px; padding:16px 0; border-radius:0; border-inline:0; background:transparent; }
.architecture-ribbon span { font-size:12px; color:var(--cyan); text-transform:none; letter-spacing:0; }
.architecture-ribbon i { width:28px; }
.tags li { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.project-links { margin-top:24px; padding-top:12px; gap:6px 28px; }
.project-links a { display:inline-flex; align-items:center; gap:5px; min-height:44px; font-size:14px; }
.project-links a span { transition:transform .2s; }
.project-links a:hover span { transform:translate(2px,-2px); }
.case-study summary { min-height:44px; padding-block:12px; font:500 14px/1.6 'Manrope',sans-serif; text-transform:none; letter-spacing:0; }
.case-study-grid div { padding:18px; }
.case-study-grid b,.case-study-grid p { font-size:14px; }
.case-study[open] .case-study-grid { animation:detailEnter .35s ease both; }
.proof { padding-top:65px; }
.research-section { grid-template-columns:.95fr 1.05fr; gap:60px; }
.research-card { padding:32px; border-radius:20px; }
.research-head a { font-size:14px; white-space:nowrap; }
.research-card h3 { margin-top:28px; font-size:clamp(25px,2.7vw,34px); line-height:1.25; }
.research-card > p { font-size:16px; }
.research-metrics { gap:16px; margin-top:28px; }
.research-metrics div + div { border:0; padding-left:0; }
.research-metrics strong { font-size:25px; font-variant-numeric:tabular-nums; text-shadow:none; }
.research-metrics span { font:400 12px/1.6 'Manrope',sans-serif; text-transform:none; color:var(--muted); }
.career-grid { margin-top:80px; gap:20px; grid-template-columns:1fr 1fr; }
.timeline-panel,.about-card,.skills-panel { border-radius:20px; }
.timeline-meta { font-size:12px; flex-wrap:wrap; }
.timeline-place { font-size:14px; }
.timeline-item ul { font-size:15px; }
.timeline-item li + li { margin-top:8px; }
.about-card > p { font-size:16px; }
.credential-row span { font:400 12px/1.6 'Manrope',sans-serif; }
.skills-panel { margin-top:20px; }
.skills-grid h3,.skills-grid p { font-size:14px; }
.contact-person p:last-child { font-size:16px; }
.contact-panel { margin-top:80px; padding:44px; background:linear-gradient(125deg,var(--surface-2),var(--surface)); border-radius:20px; }
footer { font:400 12px/1.7 'Manrope',sans-serif; }
footer a { display:inline-flex; align-items:center; min-height:44px; }
.reveal { opacity:1; filter:none; transform:none; }
.reveal.will-reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes detailEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
html[data-motion='paused'] { scroll-behavior:auto; }
html[data-motion='paused'] *,html[data-motion='paused'] *::before,html[data-motion='paused'] *::after { animation-play-state:paused !important; transition-duration:0s !important; }
html[data-motion='paused'] .reveal { opacity:1; transform:none; }
@media (min-width:981px) and (max-width:1190px) {
  .nav-links { gap:12px; }
  .nav-cv,.motion-toggle [data-motion-label] { display:none; }
  .hero { column-gap:36px; }
}
@media (max-width:980px) {
  .site-header { gap:12px; }
  .wordmark { margin-right:auto; }
  .menu-toggle { order:3; }
  .nav-links { top:78px; }
  .nav-links a { justify-content:center; }
  .hero { grid-template-columns:1fr; padding-top:56px; }
  .hero h1 { font-size:clamp(56px,8vw,88px); }
  .hero-lede { max-width:610px; }
  .orbit-map { height:250px; }
  .system-card { width:100%; }
  .engineering-signals { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .engineering-signals div { grid-template-columns:1fr; padding:20px 16px; }
  .engineering-signals span { grid-row:auto; margin-bottom:6px; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card { grid-column:auto; }
  .project-wide { grid-column:1/-1; }
  .research-section,.career-grid { grid-template-columns:1fr; }
  .research-card { max-width:none; }
}
@media (max-width:700px) {
  .section-shell,.site-header { width:calc(100% - 36px); }
  .site-header { min-height:76px; gap:8px; }
  .wordmark { font-size:13px; gap:8px; }
  .mark { width:32px; height:34px; font-size:12px; }
  .header-actions { gap:5px; }
  .motion-toggle [data-motion-label] { display:none; }
  .theme-toggle,.motion-toggle { padding:0; }
  .nav-links { top:70px; }
  .hero { padding-top:40px; gap:36px; }
  .hero .kicker { margin-bottom:20px; letter-spacing:.035em; }
  .hero h1 { font-size:clamp(44px,10.5vw,66px); letter-spacing:-.055em; }
  .hero-lede { margin-top:20px; font-size:16px; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
  .hero-actions .button { padding-inline:10px; font-size:13px; gap:7px; }
  .hero-actions .text-link { grid-column:1/-1; }
  .stack-line { margin-top:18px; gap:6px 14px; }
  .system-topline { padding:18px 18px 8px; align-items:center; }
  .system-topline h2 { font-size:26px; }
  .orbit-map { height:205px; min-height:0; }
  .stage-controls button { padding:10px 7px; font-size:13px; align-items:center; }
  .system-activity { padding:18px; min-height:170px; grid-template-columns:1fr auto; }
  .activity-label { font-size:12px; }
  .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .metric-grid div { display:block; padding:14px 10px; }
  .metric-grid div + div { border-top:0; border-left:1px solid var(--line); }
  .metric-grid strong { font-size:21px; }
  .system-footer { padding:16px 18px; gap:8px; }
  .engineering-signals { margin-top:8px; grid-template-columns:1fr; }
  .engineering-signals div,.engineering-signals div:first-child { padding:18px 0; grid-template-columns:38px 1fr; gap:2px 12px; }
  .engineering-signals span { grid-row:1/3; margin:0; }
  .work { padding-block:64px 30px; }
  .section-heading { grid-template-columns:1fr; gap:20px; }
  .section-heading h2,.proof-copy > h2 { font-size:35px; }
  .project-toolbar { margin-top:26px; gap:12px; }
  .filter { font-size:13px; padding:8px 9px; }
  .result-count { margin:0; }
  .project-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .project-card,.project-wide,.compact-project { grid-column:auto; padding:23px; min-height:0; }
  .project-body { margin-top:26px; }
  .project-body h3,.project-wide h3 { font-size:26px; }
  .project-proof { gap:8px; }
  .architecture-ribbon { gap:10px 7px; overflow:visible; }
  .architecture-ribbon i { flex:0 0 12px; }
  .proof { padding-top:40px; }
  .research-section { gap:30px; }
  .research-card { padding:23px; }
  .research-card h3 { font-size:27px; }
  .research-head { gap:12px; align-items:flex-start; }
  .research-metrics div { display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .research-metrics div + div { padding:14px 0 0; border-top:1px solid var(--line); }
  .research-metrics span { text-align:right; max-width:140px; }
  .career-grid { margin-top:56px; }
  .timeline-panel,.about-card,.skills-panel { padding:23px; }
  .contact-panel { margin-top:56px; padding:25px; gap:25px; }
}
@media (max-width:360px) {
  .wordmark > span:last-child { max-width:90px; white-space:normal; line-height:1.3; }
  .hero-actions { grid-template-columns:1fr; }
  .stage-controls button { font-size:12px; }
}
@media (hover:none) { .project-card:hover { transform:none; } }
@media (prefers-reduced-motion:reduce) { .reveal.will-reveal { opacity:1; transform:none; } }