:root{
  --bg0:#060a12;
  --bg1:#0b1220;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.74);
  --line: rgba(255,255,255,0.14);
  --panel: rgba(255,255,255,0.06);
  --card: rgba(255,255,255,0.075);
  --glass: rgba(7,11,19,0.68);
  --accent:#66c2ff;
  --accent2:#8fffcb;
  --shadow2: 0 10px 24px rgba(0,0,0,0.30);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --maxw: 1080px;
  --h1: clamp(1.95rem, 1.2rem + 2.0vw, 2.55rem);
  --h2: clamp(1.20rem, 0.95rem + 1.05vw, 1.55rem);
  --h3: 1.04rem;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background:
    radial-gradient(1200px 700px at 10% 12%, rgba(102,194,255,0.14), transparent 62%),
    radial-gradient(900px 600px at 82% 18%, rgba(143,255,203,0.10), transparent 58%),
    radial-gradient(800px 500px at 60% 90%, rgba(102,194,255,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%);
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.20;
  mask-image: radial-gradient(circle at 35% 20%, black 0%, transparent 70%);
}

.container{
  width: min(var(--maxw), calc(100% - 40px));
  margin: 0 auto;
}

a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid rgba(102,194,255,0.70);
  outline-offset: 2px;
  border-radius: 10px;
}

.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  z-index: 999;
}

header.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: var(--glass);
  border-bottom: 1px solid var(--line);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}
.brand{ display:flex; flex-direction:column; line-height:1.12; }
.brand .name{ font-weight: 820; letter-spacing: 0.25px; }
.brand .tag{ font-size: 0.92rem; color: var(--muted); }
.brand-link{ color: inherit; text-decoration: none; }
.brand-link:hover{ text-decoration:none; }

nav.menu{ display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
nav.menu a{
  color: var(--text);
  font-weight: 680;
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease;
}
nav.menu a:hover{ border-color: var(--line); background: var(--panel); text-decoration:none; }
nav.menu a.active{ border-color: rgba(102,194,255,0.55); background: rgba(102,194,255,0.12); }

.nav-mobile{ display:none; }
.nav-mobile details{ border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.04); overflow: clip; }
.nav-mobile summary{ list-style:none; cursor:pointer; padding: 8px 12px; font-weight: 760; color: rgba(255,255,255,0.90); }
.nav-mobile summary::-webkit-details-marker{ display:none; }
.nav-mobile .panel{ padding: 8px 10px 12px 10px; display:flex; flex-direction:column; gap: 8px; }
.nav-mobile a{ padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; color: var(--text); font-weight: 680; }
.nav-mobile a.active{ border-color: rgba(102,194,255,0.55); background: rgba(102,194,255,0.12); }
.nav-mobile a:hover{ border-color: var(--line); background: var(--panel); text-decoration:none; }

main{ padding: 36px 0 58px 0; }

.hero h1{ margin: 0 0 10px 0; font-size: var(--h1); letter-spacing: 0.35px; }
.hero p{ margin: 0; color: var(--muted); max-width: 86ch; }
.hero .sub{ margin-top: 10px; font-size: 0.98rem; color: rgba(255,255,255,0.70); }

.hero-card{ border: 1px solid var(--line); background: rgba(255,255,255,0.055); border-radius: var(--radius-xl);
  padding: 18px 18px; box-shadow: var(--shadow2); }

.page-home .hero-top{ display:grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
.page-home .hero-text{ min-width: 0; }
.page-home .hero-photo{ width: 140px; height: 140px; border-radius: 18px; object-fit: cover; border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 34px rgba(0,0,0,0.34); opacity: 0.95; }

.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 16px; }
.card{ grid-column: span 6; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg);
  padding: 16px 16px; box-shadow: var(--shadow2); }
.card h2{ margin: 0 0 8px 0; font-size: 1.12rem; color: var(--accent); }
.card p, .card li{ color: var(--muted); }
.card ul{ margin: 8px 0 0 18px; }

.section{ margin-top: 18px; }
.section h2{ margin: 30px 0 12px 0; font-size: var(--h2); color: rgba(102,194,255,0.92); letter-spacing: 0.22px;
  position: relative; padding-bottom: 10px; }
.section h2::after{ content:""; position:absolute; left: 0; bottom: 0; width: min(540px, 92%); height: 1px;
  background: linear-gradient(90deg, rgba(102,194,255,0.62), rgba(255,255,255,0.00)); }

.portfolio{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.project{ grid-column: span 6; border: 1px solid var(--line); background: rgba(255,255,255,0.06); border-radius: var(--radius-lg);
  padding: 14px 14px; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.project:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); }
.project h3{ margin: 0 0 8px 0; font-size: var(--h3); letter-spacing: 0.16px; }
.project p{ margin: 0; color: var(--muted); }

.portfolio.stack{ grid-template-columns: 1fr; }
.portfolio.stack .project{ grid-column: auto; max-width: 940px; padding: 18px 18px; background: rgba(255,255,255,0.055); }

.figure-box{ margin-top: 12px; border: 1px dashed rgba(255,255,255,0.25); border-radius: var(--radius-md); padding: 14px;
  background: rgba(0,0,0,0.12); color: rgba(255,255,255,0.66); font-size: 0.95rem; }

.note{ margin-top: 12px; border-left: 3px solid rgba(102,194,255,0.60); padding-left: 12px; color: rgba(255,255,255,0.74); }

.subhead{ margin: 24px 0 10px 0; font-size: 1.08rem; font-weight: 800; color: rgba(255,255,255,0.92); }
.subhead span{ color: rgba(143,255,203,0.88); font-weight: 860; }

.chips{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip a{ display:inline-block; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(102,194,255,0.55);
  background: rgba(102,194,255,0.12); color: rgba(255,255,255,0.92); font-weight: 760; }
.chip a:hover{ background: rgba(102,194,255,0.18); text-decoration:none; }

input, textarea{ width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.92); }
label{ font-weight: 760; }
button{ margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(102,194,255,0.55);
  background: rgba(102,194,255,0.14); color: rgba(255,255,255,0.92); font-weight: 820; cursor:pointer;
  transition: transform 160ms ease, background 160ms ease; }
button:hover{ background: rgba(102,194,255,0.18); transform: translateY(-1px); }

footer.site-footer{ border-top: 1px solid var(--line); color: var(--muted); padding: 18px 0 28px 0; font-size: 0.92rem; }

@media (max-width: 860px){
  .card{ grid-column: span 12; }
  .project{ grid-column: span 12; }
  nav.menu{ display:none; }
  .nav-mobile{ display:block; }
  .brand .tag{ display:none; }
}
@media (max-width: 600px){
  .page-home .hero-top{ grid-template-columns: 1fr; }
  .page-home .hero-photo{ width: 112px; height: 112px; }
}

@media (prefers-reduced-motion: reduce){
  nav.menu a, .project, button{ transition: none !important; }
  .project:hover, button:hover{ transform:none; }
}