:root{
  --bg:#0B0E14;
  --surface:#12161F;
  --surface-2:#181D29;
  --border:#242A38;
  --text:#EAEDF3;
  --muted:#8891A3;
  --accent:#FF7A45;
  --accent-2:#49D6C8;
  --accent-ink:#160B05;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
  --bg:#F7F6F2;
  --surface:#FFFFFF;
  --surface-2:#F0EEE8;
  --border:#E3E0D8;
  --text:#16181D;
  --muted:#666D7A;
  --accent:#E85D2A;
  --accent-2:#0E9E90;
  --accent-ink:#FFFFFF;
}
*{box-sizing:inherit; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}
code, .mono{font-family:'JetBrains Mono', monospace;}

/* ---- nav ---- */
header{
  position:sticky; top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:10;
}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.brand{font-weight:700; font-size:15px; letter-spacing:-0.01em;}
.brand span{color:var(--accent);}
nav{display:flex; align-items:center; gap:22px;}
nav ul{display:flex; gap:24px; list-style:none;}
nav a{color:var(--muted); text-decoration:none; font-size:14px; transition:color .15s ease;}
nav a:hover{color:var(--text);}
nav a.current{color:var(--accent);}
.brand{text-decoration:none;}

.back-link{
  display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px;
  text-decoration:none; margin-top:28px; transition:color .15s ease, transform .15s ease;
}
.back-link:hover{color:var(--accent-2); transform:translateX(-2px);}

.skip-link{
  position:absolute; top:-100px; left:16px; z-index:100;
  background:var(--accent); color:var(--accent-ink); font-family:'JetBrains Mono',monospace;
  font-size:13px; font-weight:600; padding:10px 16px; border-radius:8px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:calc(16px + env(safe-area-inset-top,0px));}

/* ---- 404 page ---- */
.error-page{
  min-height:60vh; display:flex; flex-direction:column; justify-content:center;
  border-top:none; padding:80px 0;
}
.error-code{
  font-family:'JetBrains Mono',monospace; font-size:clamp(56px,14vw,96px); font-weight:700;
  color:var(--accent); line-height:1; letter-spacing:-0.02em;
}
.error-page h2{margin-top:12px;}
.error-page p{color:var(--muted); font-size:16px; margin-top:14px; max-width:46ch;}
.error-page .hero-links{margin-top:28px;}
@media (max-width:560px){ nav ul{gap:12px;} nav a{font-size:12.5px;} }

#theme-toggle{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
#theme-toggle:hover{border-color:var(--accent-2); transform:translateY(-1px);}
#theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] #theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] #theme-toggle .icon-moon{display:block;}

/* ---- hero ---- */
.hero{padding:100px 0 84px; position:relative; overflow:hidden;}
.symbol{
  position:absolute; font-family:'JetBrains Mono',monospace; color:var(--accent-2);
  opacity:.18; font-weight:600; pointer-events:none; animation:drift 9s ease-in-out infinite;
}
:root[data-theme="light"] .symbol{opacity:.14;}
.s1{top:6%; right:6%; font-size:34px; animation-delay:0s;}
.s2{top:52%; right:16%; font-size:22px; color:var(--accent); animation-delay:1.2s;}
.s3{top:18%; right:26%; font-size:20px; animation-delay:2.1s;}
.s4{bottom:10%; right:8%; font-size:28px; color:var(--accent); animation-delay:.6s;}
.s5{top:38%; right:2%; font-size:18px; animation-delay:3s;}
.s6{bottom:26%; right:32%; font-size:16px; animation-delay:1.8s;}
@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(6deg); }
}
.prompt-line{font-size:13px; color:var(--accent-2); margin-bottom:22px; display:flex; align-items:center; gap:2px;}
.prompt-line .caret{display:inline-block; width:7px; height:15px; background:var(--accent-2); animation:blink 1.1s steps(1) infinite; margin-left:2px;}
@keyframes blink{ 50%{opacity:0;} }
h1{font-size:clamp(32px,6vw,52px); font-weight:700; letter-spacing:-0.02em; line-height:1.1; max-width:15ch;
  opacity:0; animation:rise .7s ease .1s forwards;}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.hero p.lead{margin-top:20px; color:var(--muted); font-size:17px; max-width:46ch; min-height:26px;}
.type-caret{color:var(--accent); animation:blink 1s steps(1) infinite;}
.hero-links{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.btn{font-family:inherit; font-size:14px; font-weight:600; padding:11px 20px; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, background .15s ease, border-color .15s ease;}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.08);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent-2); transform:translateY(-1px);}
.scroll-cue{margin-top:56px; color:var(--muted); font-size:11.5px; letter-spacing:.05em; display:flex; align-items:center; gap:6px;}
.arrow{display:inline-block; animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

/* ---- sections & reveal ---- */
section{padding:64px 0; border-top:1px solid var(--border);}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.section-tag{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);}
h2{font-size:26px; font-weight:600; margin-top:8px; letter-spacing:-0.01em;}
.about p{color:var(--muted); font-size:16px; max-width:60ch; margin-top:18px;}

/* ---- project cards ---- */
.project{background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; position:relative;}
.project.live{margin-top:28px; display:grid; grid-template-columns:1.05fr 1fr;}
@media (max-width:680px){ .project.live{grid-template-columns:1fr;} }
.project-num{position:absolute; top:18px; left:20px; font-size:12px; color:var(--muted);}
.project-info{padding:28px; padding-left:52px;}
.project-info h3{font-size:20px; font-weight:600; margin-top:6px;}
.project-info .url{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--accent-2); margin-top:6px; display:block;}
.project-info p{color:var(--muted); font-size:14.5px; margin-top:14px;}
.status{font-size:10.5px; padding:3px 8px; border-radius:5px; font-weight:600;}
.status-live{background:var(--accent-2); color:var(--accent-ink);}
.status-soon{background:var(--surface-2); color:var(--muted); border:1px solid var(--border);}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.tag{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:4px 9px;}
.project-info .btn{margin-top:20px;}

.preview{
  background:radial-gradient(300px 200px at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface-2);
  border-left:1px solid var(--border); padding:22px; display:flex; flex-direction:column; justify-content:center; gap:14px; min-height:230px;
}
@media (max-width:680px){ .preview{border-left:none; border-top:1px solid var(--border);} }
.preview .chip{align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--accent-ink); background:var(--accent-2); padding:3px 8px; border-radius:5px; font-weight:600;}
.preview .handle{font-size:22px; font-weight:700;}
.preview .handle span{color:var(--accent);}
.preview .bar-track{height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin-top:4px;}
.preview .bar-fill{height:100%; width:87%; border-radius:4px; background:linear-gradient(90deg, var(--accent-2), var(--accent));}
.preview .score-row{display:flex; justify-content:space-between; align-items:baseline;}
.preview .score{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted);}
.preview .score b{color:var(--text); font-size:15px;}
.preview .caption{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:2px;}

.soon-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px;}
@media (max-width:560px){ .soon-grid{grid-template-columns:1fr;} }
.project.soon{border-style:dashed; opacity:.85;}
.project.soon .project-info{padding:22px; padding-left:52px;}
.project.soon h3{font-size:16px; color:var(--muted);}
.project.soon p{font-size:13.5px; margin-top:6px;}

/* ---- skills ---- */
.skills-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:26px;}
@media (max-width:560px){ .skills-grid{grid-template-columns:1fr;} }
.skill-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px;}
.skill-card h3{font-size:15.5px; font-weight:600;}
.skill-card p{color:var(--muted); font-size:13.5px; margin-top:8px;}

/* ---- contact ---- */
.contact-box{margin-top:26px; background:var(--surface); border:1px dashed var(--border); border-radius:12px; padding:28px;}
.contact-box p{color:var(--muted); font-size:14.5px;}
.email-link{font-family:'JetBrains Mono',monospace; color:var(--accent-2); font-size:15px; display:inline-block; margin-top:12px; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease;}
.email-link:hover{border-color:var(--accent-2);}

footer{padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px));}
footer p{color:var(--muted); font-size:12.5px; font-family:'JetBrains Mono',monospace;}

/* ---- home: quick links ---- */
.quick-links{padding:12px 0 8px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:560px){ .quick-links{grid-template-columns:1fr;} }
.qlink{
  display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:20px; text-decoration:none; color:var(--text);
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.qlink:hover{border-color:var(--accent-2); transform:translateY(-2px);}
.qlink-num{color:var(--accent); font-size:12px; flex-shrink:0;}
.qlink h3{font-size:16px; font-weight:600;}
.qlink p{color:var(--muted); font-size:13px; margin-top:4px;}
.qlink-arrow{margin-left:auto; color:var(--muted); font-size:16px; transition:transform .15s ease, color .15s ease;}
.qlink:hover .qlink-arrow{color:var(--accent-2); transform:translateX(3px);}

/* ---- home: featured project ---- */
.featured{padding-top:56px;}
.featured-card{
  margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr;
}
@media (max-width:680px){ .featured-card{grid-template-columns:1fr;} }
.featured-info{padding:32px;}
.featured-info h2{font-size:24px;}
.featured-info p{color:var(--muted); font-size:15px; margin-top:14px; max-width:48ch;}

:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  .prompt-line .caret, .type-caret, .symbol, .arrow, h1{animation:none;}
  .reveal{transition:none; opacity:1; transform:none;}
  h1{opacity:1;}
}