:root{
  --paper:#0b0d10; --ink:#e7ecf2; --ink-dim:#b8c1ce; --line:#202733;
  --accent:#7aa0ff; --accent2:#58d3ff;
}
*{box-sizing:border-box}
body.yavin{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; background:var(--paper); color:var(--ink); margin:0}
a{color:var(--ink); text-decoration:none}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:20}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{height:32px}
.brand-name{font-weight:800; letter-spacing:.4px}
.menu{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.menu a{color:var(--ink); text-decoration:none; padding:10px 12px; border:1px solid transparent; border-radius:10px}
.menu a:hover{border-color:var(--line); background:#0e1116}
.nav-actions .btn{padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); cursor:pointer}

#app{max-width:1100px; margin:0 auto; padding:24px 18px}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; min-height:520px}
.hero-title{font-size:48px; margin:10px 0 6px}
.subtitle{color:var(--ink-dim)}
.prose{max-width:72ch; line-height:1.7}
.section{margin:36px 0}
.section h2{font-size:36px; margin:0 0 8px}
.section h3{margin:16px 0 6px}
.divider{height:1px; background:var(--line); margin:18px 0}
.panel{border:1px solid var(--line); border-radius:16px; padding:16px; background:#0e1116}
.grid{display:grid; gap:18px}
.columns{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#0e1116; color:var(--ink); cursor:pointer}
.btn.primary{background:linear-gradient(135deg, rgba(40,75,255,0.2), rgba(0,167,217,0.25)); border-color:#284bff22}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas; border:1px solid var(--line); border-radius:6px; padding:2px 6px; background:#0e1116}

.note{background:#0e1116; border-left:3px solid var(--accent); padding:12px; border-radius:8px}
.footer{border-top:1px solid var(--line); padding:30px 18px; margin-top:60px}
.footer-inner{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr auto; align-items:center}
canvas{max-width:100%}

.card{border:1px solid var(--line); border-radius:16px; padding:16px; background:#0e1116}
.card h3{margin:0 0 8px}

.quiz .answers button{display:block; width:100%; text-align:left; background:#0e1116; color:#fff; border:1px solid #2b3342; border-radius:12px; padding:12px; margin:8px 0; cursor:pointer}
.quiz .answers button.correct{border-color:#2fd37c}
.quiz .answers button.wrong{border-color:#ff6a6a}

@media (max-width: 960px){ .hero{grid-template-columns:1fr} .columns{grid-template-columns:1fr} }
@media (max-width: 720px){
  body.yavin{font-size:16px}
  #app{margin:24px auto}
  .nav{padding:10px 14px; gap:10px}
  .brand-logo{height:24px}
  .brand-name{font-size:16px}
  .menu{overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px}
  .menu a{flex:0 0 auto; padding:8px 10px}
  .hero-title{font-size:34px}
  .section h2{font-size:28px}
  .panel{padding:12px}
  .btn{padding:12px 14px}
  .columns{grid-template-columns:1fr}
  canvas{max-width:100%}
}
@media (max-width: 420px){ .hero-title{font-size:28px} .footer-inner{grid-template-columns:1fr} }
/* Improve nav scrollbars on mobile */
.menu::-webkit-scrollbar{height:6px}
.menu::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px}


/* Captions for charts and figures */
.caption{color:var(--ink-dim); font-size:12.5px; margin:8px 2px 0}

/* Scroll progress bar aesthetic */
.yavin-progress{position:sticky; top:0; left:0; right:0; height:3px; background:transparent; z-index:50}
.yavin-progress__bar{height:3px; width:0; background:linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow:0 0 12px rgba(88,211,255,0.5)}


/* Section header halo underline (subtle accent on scroll) */
.section h2{ position:relative; display:inline-block }
.section h2::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; height:2px; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:2px; opacity:0; transition:width .45s ease, opacity .45s ease;
  box-shadow:0 0 12px rgba(88,211,255,0.35);
}
.section.inview h2::after{ width:72%; opacity:.95 }


/* Aurora spotlight (pointer-follow) */
.aurora{position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(240px 160px at var(--mx,50%) var(--my,20%), rgba(122,160,255,0.18), rgba(0,0,0,0) 60%);
  opacity:.9; transition: background-position .08s ease; mix-blend-mode:screen;
}
/* keep stacking order: place nav/content above */
.nav, #app, .footer, .bottom-nav{ position:relative; z-index:1 }

/* Improve tap targets */
@media (max-width: 720px){
  .btn, .menu a{ min-height:44px }
}


/* Neural Mesh canvas (home hero only) */
#hero{ position:relative; overflow:hidden }
#neuralMesh{
  position:absolute; inset:0; z-index:0; opacity:.5;
}
.hero > div, .hero .panel{ position:relative; z-index:1 }


/* Slide-in overlay menu (mobile) */
@media (max-width: 720px){
  .nav{ z-index:1001 }
  .menu{
    position:fixed; top:0; right:0; bottom:0; width:min(86vw,420px);
    background:rgba(11,13,16,0.98); backdrop-filter: blur(10px);
    border-left:1px solid var(--line);
    display:flex !important; flex-direction:column; gap:8px;
    padding:18px; transform: translateX(100%); opacity:0; pointer-events:none;
    transition: transform .24s ease, opacity .24s ease;
    z-index:1001;
  }
  :root.is-menu-open .menu{ transform:none; opacity:1; pointer-events:auto }
  .menu-backdrop{ display:none }
  :root.is-menu-open .menu-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000 }
  .nav .nav-toggle{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; font-weight:700; cursor:pointer }
  .menu a{ display:block; padding:14px 12px; border-radius:10px; font-size:16px; border:1px solid transparent }
  .menu a:active{ transform: translateY(1px) }
  }

/* Scroll-reveal for sections */
.section{ opacity:0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease }
.section.inview{ opacity:1; transform:none }

/* Magnetic hover on buttons/panels (desktop only) */
@media (hover:hover){
  .btn:hover, .panel:hover{ transform: translateY(-2px); transition: transform .18s ease }
}


/* Active link accent */
.menu a.active{ position:relative; color:var(--ink) }
.menu a.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:2px; box-shadow:0 0 8px rgba(88,211,255,0.45);
}
.menu a:hover{ background:#0f1319; border-color:#2a3342 }

/* Parallax tilt (desktop only) */
@media (hover:hover){
  [data-parallax]{ will-change: transform; transition: transform .08s ease }
}


/* Mobile: never hide sections before reveal to avoid blank first render */
@media (max-width: 720px){
  .section{opacity:1; transform:none}
}


/* Ambient corner orbs (subtle, behind content) */
body.yavin::before, body.yavin::after{
  content:""; position:fixed; width:520px; height:520px; border-radius:50%;
  pointer-events:none; filter: blur(48px); opacity:.12; z-index:0;
  background: radial-gradient(circle at 50% 50%, var(--accent2), transparent 60%);
  animation: drift 40s linear infinite;
}
body.yavin::before{ top:-120px; left:-120px }
body.yavin::after{ bottom:-160px; right:-140px; animation-direction: reverse }
@keyframes drift{
  0%{ transform: translate3d(0,0,0) scale(1) }
  50%{ transform: translate3d(20px, -30px, 0) scale(1.06) }
  100%{ transform: translate3d(0,0,0) scale(1) }
}