:root{
    --bg-void: #0B0E1A;
    --bg-panel: #131A2B;
    --bg-panel-2: #1A2338;
    --line-faint: rgba(232,184,109,0.14);
    --line-const: rgba(140,155,216,0.55);
    --star-gold: #E8B86D;
    --star-gold-dim: #B98F52;
    --text-main: #E9ECF4;
    --text-dim: #8A93AC;
    --violet: #6B78C4;
    --danger: #D9707A;
    --radius: 3px;
    --font-display: 'Big Shoulders Display', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--bg-void);
    color:var(--text-main);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
    position:relative;
  }

  #starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; }
  .content{ position:relative; z-index:1; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--star-gold); color:var(--bg-void); }

  .wrap{ max-width:1100px; margin:0 auto; padding:0 32px; }
  section{ padding:120px 0; }
  @media (max-width:640px){ section{ padding:72px 0; } .wrap{ padding:0 20px; } }

  .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--star-gold-dim);
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
  }
  .eyebrow::before{ content:''; width:18px; height:1px; background:var(--star-gold-dim); display:inline-block; }
  .eyebrow-center{ justify-content:center; }

  h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:0.01em; }

  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 32px; backdrop-filter:blur(10px);
    background:linear-gradient(to bottom, rgba(11,14,26,0.85), transparent);
  }
  .nav-mark{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.1em; color:var(--text-dim); white-space:nowrap; }
  .nav-mark strong{ color:var(--star-gold); font-weight:500; }
  .nav-links{ display:flex; gap:28px; }
  .nav-links a{
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--text-dim); transition:color .2s ease;
  }
  .nav-links a:hover{ color:var(--star-gold); }
  @media (max-width:640px){
    nav{ padding:18px 20px; }
    .nav-links{ gap:14px; }
    .nav-links a{ font-size:10px; }
  }
  @media (max-width:480px){
    .nav-mark .full-name{ display:none; }
  }

  .hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:100px; position:relative; }
  .hero-coord{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); letter-spacing:0.1em; margin-bottom:24px; }
  .hero-coord span{ color:var(--star-gold-dim); }
  .hero h1{ font-size:clamp(44px, 9vw, 108px); line-height:0.95; color:var(--text-main); max-width:900px; }
  .hero h1 em{ font-style:normal; color:var(--star-gold); }
  .hero-sub{ margin-top:28px; max-width:560px; font-size:18px; color:var(--text-dim); }
  .hero-actions{ margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; }
  .btn{
    font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em;
    padding:14px 26px; border-radius:var(--radius); border:1px solid var(--line-faint);
    transition:all .2s ease; display:inline-block;
  }
  .btn-primary{ background:var(--star-gold); color:var(--bg-void); border-color:var(--star-gold); font-weight:500; }
  .btn-primary:hover{ background:#f2c988; }
  .btn-ghost{ color:var(--text-main); }
  .btn-ghost:hover{ border-color:var(--star-gold-dim); color:var(--star-gold); }

  .scroll-hint{
    position:absolute; bottom:36px; left:32px; font-family:var(--font-mono);
    font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:8px;
  }
  .scroll-hint .bar{
    width:1px; height:28px;
    background:linear-gradient(to bottom, var(--star-gold-dim), transparent);
    animation:pulse-bar 2s ease-in-out infinite;
  }
  @keyframes pulse-bar{ 0%,100%{opacity:.3} 50%{opacity:1} }

  @media (max-width:400px){
    .hero h1{ font-size:clamp(34px, 12vw, 60px); }
    .hero-actions{ flex-direction:column; }
    .hero-actions .btn{ text-align:center; }
    .scroll-hint{ display:none; }
  }

  .rocket-drift{
    position:absolute; top:8%; right:6%; width:90px; height:150px; z-index:1;
    opacity:0.9; animation:rocket-path 16s ease-in-out infinite;
    filter:drop-shadow(0 0 12px rgba(232,184,109,0.15));
  }
  @keyframes rocket-path{
    0%   { transform:translate(0,0) rotate(-6deg); }
    25%  { transform:translate(-24px,26px) rotate(2deg); }
    50%  { transform:translate(-8px,60px) rotate(-4deg); }
    75%  { transform:translate(18px,30px) rotate(4deg); }
    100% { transform:translate(0,0) rotate(-6deg); }
  }
  .rocket-flame{ animation:flame-flicker 0.5s ease-in-out infinite alternate; transform-origin:60px 178px; }
  @keyframes flame-flicker{ 0%{ opacity:0.55; transform:scaleY(0.85); } 100%{ opacity:0.95; transform:scaleY(1.15); } }
  @media (max-width:800px){ .rocket-drift{ width:60px; height:100px; top:4%; right:4%; opacity:0.7; } }
  @media (max-width:480px){ .rocket-drift{ width:44px; height:76px; opacity:0.55; } }

  .sec-head{ margin-bottom:56px; }
  .sec-head h2{ font-size:clamp(32px,5vw,52px); }
  .sec-head p{ color:var(--text-dim); max-width:520px; margin-top:12px; font-size:16px; }
  @media (max-width:640px){ .sec-head{ margin-bottom:36px; } }

  .about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:60px; }
  @media (max-width:800px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-text p{ color:var(--text-dim); font-size:16px; margin-bottom:16px; }
  .about-text p strong{ color:var(--text-main); font-weight:600; }

  .instruments-col{ display:flex; flex-direction:column; gap:36px; }
  .instruments{ display:flex; flex-direction:column; gap:0; }
  .instrument-row{
    display:flex; justify-content:space-between; align-items:baseline; padding:14px 0;
    border-bottom:1px solid var(--line-faint); font-family:var(--font-mono); font-size:13px; gap:12px;
  }
  .instrument-row:first-child{ border-top:1px solid var(--line-faint); }
  .instrument-row .label{ color:var(--text-dim); letter-spacing:0.05em; }
  .instrument-row .val{ color:var(--star-gold); text-align:right; }

  .astro-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:8px; }
  .astronaut-float{
    width:120px; height:130px; animation:astro-bob 6s ease-in-out infinite;
    filter:drop-shadow(0 8px 16px rgba(107,120,196,0.2));
  }
  @keyframes astro-bob{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-18px) rotate(3deg); } }
  .astro-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; color:var(--text-dim); text-transform:uppercase; }
  @media (max-width:800px){ .astro-wrap{ display:none; } }

  .timeline{ position:relative; padding-left:30px; }
  .timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-faint); }
  .timeline-item{ position:relative; padding-bottom:44px; }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-marker{
    position:absolute; left:-30px; top:4px; width:11px; height:11px;
    border-radius:50%; background:var(--bg-panel); border:2px solid var(--star-gold);
  }
  .timeline-period{ font-family:var(--font-mono); font-size:11px; color:var(--star-gold-dim); letter-spacing:0.08em; margin-bottom:8px; }
  .timeline-content h3{ font-size:24px; margin-bottom:4px; color:var(--text-main); }
  .timeline-company{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-bottom:10px; }
  .timeline-content p{ color:var(--text-dim); font-size:15px; max-width:600px; }
  @media (max-width:640px){
    .timeline{ padding-left:22px; }
    .timeline-marker{ left:-22px; }
    .timeline-content h3{ font-size:20px; }
  }

  .map-shell{
    position:relative; border:1px solid var(--line-faint); border-radius:var(--radius);
    background:radial-gradient(ellipse at 30% 20%, rgba(107,120,196,0.08), transparent 60%);
    padding:20px; min-height:520px;
  }
  #constellation-svg{ width:100%; height:520px; display:block; }
  @media (max-width:800px){
    .map-shell{ min-height:auto; padding:0; border:none; background:none; }
    #constellation-svg{ display:none; }
  }

  .const-line{ stroke:var(--line-const); stroke-width:1; fill:none; stroke-dasharray:4 4; opacity:0.6; }
  .const-node circle{ fill:var(--bg-panel); stroke:var(--star-gold); stroke-width:1.5; cursor:pointer; transition:all .25s ease; }
  .const-node:hover circle, .const-node.active circle{ fill:var(--star-gold); r:9; }
  .const-node text{ font-family:var(--font-mono); font-size:11px; fill:var(--text-dim); pointer-events:none; }
  .const-node.active text{ fill:var(--star-gold); }

  .project-list{ display:none; flex-direction:column; gap:14px; }
  @media (max-width:800px){ .project-list{ display:flex; } }

  .project-card{
    background:var(--bg-panel); border:1px solid var(--line-faint); border-radius:var(--radius);
    padding:24px; display:none;
  }
  .project-card.visible{ display:block; }
  @media (max-width:800px){ .project-card{ display:block; margin-bottom:0; } }
  @media (max-width:480px){ .project-card{ padding:18px; } }

  .project-card .p-index{ font-family:var(--font-mono); font-size:11px; color:var(--star-gold-dim); letter-spacing:0.1em; margin-bottom:10px; }
  .project-card h3{ font-size:26px; margin-bottom:10px; color:var(--text-main); }
  .project-card p.desc{ color:var(--text-dim); font-size:15px; margin-bottom:16px; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .tag{
    font-family:var(--font-mono); font-size:11px; padding:4px 10px;
    border:1px solid var(--line-faint); border-radius:20px; color:var(--text-dim);
  }
  .project-card .p-links{ display:flex; gap:14px; flex-wrap:wrap; }
  .project-card .p-links a{
    font-family:var(--font-mono); font-size:12px; color:var(--star-gold);
    border-bottom:1px solid var(--star-gold-dim); padding-bottom:2px;
  }
  .project-card .p-links a:hover{ color:#fff; }

  .map-hint{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-bottom:24px; }
  @media (max-width:800px){ .map-hint{ display:none; } }

  .contact-panel{
    border:1px solid var(--line-faint); border-radius:var(--radius); padding:56px;
    background:linear-gradient(135deg, rgba(107,120,196,0.06), rgba(232,184,109,0.04));
    text-align:center;
  }
  @media (max-width:640px){ .contact-panel{ padding:32px 20px; } }
  .contact-panel h2{ font-size:clamp(30px,6vw,48px); margin-bottom:16px; }
  .contact-panel p{ color:var(--text-dim); max-width:480px; margin:0 auto 32px; }

  .btn-icon{ display:inline-flex; align-items:center; gap:9px; }
  .btn-icon svg{ width:16px; height:16px; flex-shrink:0; }

  .contact-links{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
  @media (max-width:480px){
    .contact-links{ flex-direction:column; }
    .contact-links .btn{ width:100%; justify-content:center; }
  }

  footer{
    padding:36px 0; text-align:center; font-family:var(--font-mono);
    font-size:11px; color:var(--text-dim); letter-spacing:0.05em;
  }

  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--star-gold); outline-offset:3px; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .scroll-hint .bar{ animation:none; }
    .rocket-drift{ animation:none; }
    .rocket-flame{ animation:none; }
    .astronaut-float{ animation:none; }
  }

  #project-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px}
.project-card.selected{border-color:var(--star-gold)}