:root{
  --bg:#080b09;
  --panel:#0d120f;
  --text:#d7e2d9;
  --muted:#809083;
  --line:#27332a;
  --accent:#68e78d;
  --accent-dim:#1d9b4a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:15px;
  line-height:1.72;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(104,231,141,.08) 4px);
  z-index:2;
}

.navbar{background:rgba(8,11,9,.94);border-color:var(--line)!important}
.navbar-brand,.nav-link,a{color:var(--text);text-decoration:none}
.navbar-brand:before{content:"~/portfolio/";color:var(--muted);font-weight:400}
.navbar-brand span,.eyebrow,h1 em,.company,a:hover{color:var(--accent)}
.nav-link{font-size:.82rem;padding:.45rem .6rem!important}
.nav-link:before{content:"./";color:var(--muted)}
.navbar-toggler{border-color:var(--line);color:var(--accent)}
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.35rem;
  height:2.35rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--accent);
}

.hero,.learning-hero{background:none}
.hero-content{padding:4.5rem 0 3.5rem}
.learning-hero{padding:4.5rem 0 3rem}
.eyebrow{font-size:.78rem;margin-bottom:1rem}
.eyebrow:before{content:"$ ";color:var(--accent)}
h1,h2,h3{font-weight:500;letter-spacing:-.04em;line-height:1.18}
h1{font-size:clamp(1.9rem,3.5vw,3.1rem);max-width:18ch}
h1:before{content:"$ whoami\A";display:block;white-space:pre;color:var(--muted);font-size:.8rem;letter-spacing:0;margin-bottom:1.2rem}
h1 em{font-style:normal}
h2{font-size:clamp(1.65rem,3.3vw,2.6rem);max-width:24ch}
h2:before{content:"# ";color:var(--accent)}
h3{font-size:1.15rem}
.intro{color:var(--text);font-size:1.05rem;max-width:61ch}
.intro:before{content:"> ";color:var(--accent)}
.about-copy{font-size:1.05rem;color:var(--muted);max-width:64ch}

.btn{border-radius:0;font-family:inherit;font-size:.84rem;padding:.6rem .8rem}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#061009}
.btn-outline-secondary{border-color:var(--line);color:var(--text)}
.btn-outline-secondary:hover{background:var(--panel);border-color:var(--accent);color:var(--accent)}

.section{padding:5rem 0;border-top:1px solid var(--line)}
.alt{background:var(--panel)}
.system-card,.skill-group,.learning-card{
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:1.25rem;
  box-shadow:none;
}
.system-card:before,.learning-card:before{content:"[ process running ]";display:block;color:var(--muted);font-size:.72rem;margin-bottom:1rem}
.flow{
  display:flex;
  gap:.4rem;
  align-items:center;
  justify-content:space-between;
  border-left:2px solid var(--accent-dim);
  padding:.45rem .7rem;
  margin:.45rem 0;
  font-size:.82rem;
  background:rgba(104,231,141,.03);
}
.flow i{font-style:normal;color:var(--accent)}
hr{border-color:var(--line);opacity:1}
.principles,.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
.principles span,.tags span,.status{
  border:1px solid var(--line);
  padding:.2rem .5rem;
  font-size:.75rem;
  color:var(--muted);
}
.principles span:before,.tags span:before{content:"-- ";color:var(--accent)}
.status{color:var(--accent);border-color:var(--accent-dim)}

.experience-list{border-top:1px solid var(--line)}
.experience-item{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:2rem;
  padding:2.4rem 0;
  border-bottom:1px solid var(--line);
  max-width:980px;
}
.experience-item p{max-width:67ch}
.experience-item ul{padding-left:1.25rem;max-width:70ch;color:var(--muted)}
.experience-item li::marker{color:var(--accent)}
.period{color:var(--muted);font-size:.82rem}
.company{font-weight:400}

.learning-roadmap{display:grid;gap:1.25rem}
.learning-feature{padding:1.5rem}
.learning-structure{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
  margin-top:1.5rem;
}
.learning-list{margin:1rem 0 0;padding-left:1.2rem;color:var(--muted)}
.learning-list li::marker{color:var(--accent)}
.project-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1.5rem;
}
.project-link{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  border:1px solid var(--line);
  padding:1rem;
  background:rgba(104,231,141,.02);
}
.project-link span{color:var(--text);font-size:1rem}
.project-link small{color:var(--muted)}
.project-link:hover{border-color:var(--accent);background:rgba(104,231,141,.05)}

.fine-print{font-size:.78rem;color:var(--muted)}
.footer{background:#050706;color:var(--text);border-top:1px solid var(--line)}
.footer a{color:var(--text)}
.footer-email{font-size:1.05rem}
.footer-email:before{content:"$ mail --to ";color:var(--muted)}
.text-footer-muted{color:var(--muted)}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media(max-width:991px){
  .hero-content{padding:3.5rem 0}
  .learning-structure,.project-links{grid-template-columns:1fr}
}

@media(max-width:575px){
  body{font-size:14px}
  .hero-content,.learning-hero{padding:2.75rem 0}
  h1{font-size:clamp(1.8rem,9vw,2.4rem)}
  .section{padding:3.75rem 0}
  .system-card,.skill-group,.learning-card{padding:1rem}
  .experience-item{grid-template-columns:1fr;gap:.35rem;padding:2rem 0}
  .navbar-brand:before{content:"~/"}
}