:root {
  --bg: #0E0F14;
  --fg: #F4F7FA;
  --muted: #A7B0C0;
  --primary: #6B3CE9;
  --teal: #33F0C8;
  --lime: #C7FF41;
  --danger: #FF3860;
  --card: #141724;
  --grid: rgba(103, 120, 155, 0.1);
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
}
[data-theme="light"]{
  --bg: #FFFFFF;
  --fg: #0E0F14;
  --muted: #4A5568;
  --card: #F7FAFF;
  --grid: rgba(30, 41, 59, 0.08);
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(circle at 20% 10%, rgba(51,240,200,0.08), transparent 30%),
              radial-gradient(circle at 90% 30%, rgba(107,60,233,0.08), transparent 35%),
              var(--bg);
  color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  min-height:100vh;
}
.lab-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.0));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--grid);
}
.lab-brand{display:flex; align-items:center; gap:12px}
.brand-link{display:flex; align-items:center; gap:12px; color:var(--fg); text-decoration:none}
.logo{width:34px; height:34px; color:var(--teal); filter: drop-shadow(0 0 6px rgba(51,240,200,0.4));}
.brand-text{font-family:Orbitron, Inter, sans-serif; font-weight:700; letter-spacing:0.5px}
.lab-nav{display:flex; gap:18px}
.lab-nav a{color:var(--fg); text-decoration:none; opacity:0.85}
.lab-nav a:hover{opacity:1}
.lab-nav .cta{padding:8px 12px; border:1px solid var(--grid); border-radius:10px}
.lab-controls{display:flex; align-items:center; gap:12px}
.power-toggle{position:relative; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);}
.power-toggle input{display:none}
.power-toggle .slider{
  width:44px; height:22px; border-radius:999px; border:1px solid var(--grid); position:relative;
  background:var(--card); box-shadow:var(--shadow);
}
.power-toggle .slider::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--teal); transition: transform .25s ease;
  box-shadow: 0 0 10px rgba(51,240,200,0.6);
}
.power-toggle input:checked + .slider::after{ transform: translateX(22px); }
.power-toggle .label{letter-spacing:1px}
.status-led{display:inline-block; width:10px; height:10px; border-radius:50%; background:#444;}
.status-led.online{ background: radial-gradient(circle at 30% 30%, #7bff93, #0fbf2d); box-shadow:0 0 12px rgba(15,191,45,0.7); }

.content{padding:32px 20px; max-width:1120px; margin:0 auto; background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; background-position: center top;}

.hero{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; padding:32px 0}
.hero h1{font-family:Orbitron, Inter, sans-serif; line-height:1.2; font-size: clamp(28px, 3.8vw, 48px);}
.glow{color:var(--lime); text-shadow: 0 0 12px rgba(199,255,65,0.6);}
.hero-ctas{display:flex; gap:12px; margin:16px 0 8px;}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--grid); text-decoration:none; color:var(--fg);}
.btn:hover{border-color:var(--teal); box-shadow:0 0 12px rgba(51,240,200,0.3) inset;}
.btn.primary{background:linear-gradient(180deg, var(--primary), #5230b9); border-color:transparent; box-shadow:0 6px 22px rgba(107,60,233,0.35);}
.btn.ghost{background:transparent}
.ticker{margin-top:14px; font-family:JetBrains Mono, monospace; color:var(--muted);}
.ticker .label{opacity:.8; margin-right:6px}

.beaker{
  --w: 220px; width:var(--w); height: calc(var(--w) * 0.9);
  border:2px solid var(--teal); border-radius: 18px 18px 40px 40px/ 18px 18px 40px 40px; position:relative; overflow:hidden;
  box-shadow: 0 0 24px rgba(51,240,200,0.35) inset;
}
.beaker::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:58%;
  background: linear-gradient(180deg, rgba(51,240,200,0.25), rgba(51,240,200,0.6));
  border-top:1px solid rgba(255,255,255,0.35);
  filter: blur(0.2px);
}
.bubble{ position:absolute; border-radius:50%; background: var(--teal); opacity:0.9; animation: rise 6s infinite ease-in;}
.bubble.b1{ width:10px; height:10px; left:40%; bottom:12%; animation-delay:.4s}
.bubble.b2{ width:8px; height:8px; left:60%; bottom:18%; animation-delay:1.2s}
.bubble.b3{ width:12px; height:12px; left:30%; bottom:10%; animation-delay:2.2s}
@keyframes rise{
  0%{ transform: translateY(0) scale(1); opacity:0.9 }
  80%{ opacity:0.4 }
  100%{ transform: translateY(-160px) scale(1.1); opacity:0 }
}

.section-head{display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--card); border-radius:999px; border:1px solid var(--grid); color:var(--fg); font-size:12px}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--grid); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.45);}
.card-link{display:block; color:inherit; text-decoration:none; padding:16px}
.card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.mini-osc{ width:72px; height:24px; background:#090b12; border-radius:6px; border:1px solid var(--grid); position:relative; overflow:hidden}
.mini-osc .wave{ position:absolute; left:-30%; top:50%; width:200%; height:2px; background: linear-gradient(90deg, transparent, var(--lime), transparent); animation: sweep 1.8s linear infinite; }
@keyframes sweep{ from{ transform: translateY(-50%) translateX(0)} to{ transform: translateY(-50%) translateX(-50%)} }
.card h3{ margin:10px 0 6px; font-size:18px; }
.card .summary{ color:var(--muted); font-size:14px; min-height:40px}
.card .meta{ display:flex; gap:10px; color:var(--muted); font-size:12px}
.card .hatch{ margin-top:10px; display:flex; gap:8px; opacity:0.75 }
.status-stable{ color:#19d37e }
.status-beta{ color:#fbc531 }
.status-prototype{ color:#e84118 }

.page-head h1{ font-family:Orbitron, Inter, sans-serif; font-size: clamp(24px, 3vw, 36px); margin-bottom:6px }
.about-grid{ display:grid; grid-template-columns: 1fr 2fr; gap:20px }
.blueprint-portrait{ height:220px; background: repeating-linear-gradient(0deg, var(--grid), var(--grid) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, var(--grid), var(--grid) 1px, transparent 1px, transparent 12px); border:1px dashed var(--grid); border-radius:10px }
.timeline{ list-style:none; padding:0; margin:0 }
.timeline li{ margin:8px 0 }
.timeline .vial{ display:inline-block; width:10px; height:18px; border:1px solid var(--grid); border-radius: 3px 3px 10px 10px; background: linear-gradient(180deg, rgba(51,240,200,0.15), rgba(51,240,200,0.4)); margin-right:8px }

.project-detail .project-hero h1{ font-family:Orbitron, Inter, sans-serif; }
.project-detail .meta{ display:flex; gap:8px; margin:8px 0 2px }
.project-detail .summary{ color:var(--muted); }
.experiment-log .log-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px }
.bom-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px; list-style:none; padding:0 }
.lab-notes p{ color:var(--muted) }

.notes-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px }
.note-card{ background:var(--card); border:1px solid var(--grid); border-radius:14px; padding:14px; box-shadow:var(--shadow) }
.note-detail .note-body{ margin-top:10px }

.contact-box form{ background:var(--card); border:1px solid var(--grid); border-radius:14px; padding:14px; max-width:640px }
.contact-box .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.contact-box input, .contact-box textarea{ width:100%; padding:10px; border-radius:10px; border:1px solid var(--grid); background:transparent; color:var(--fg) }
.contact-box .hint{ color:var(--muted); margin-top:8px }

.lab-footer{ margin-top:40px; padding:18px 20px; border-top:1px solid var(--grid) }
.lab-footer .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.center{text-align:center; margin-top:16px}

@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr }
  .contact-box .row{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion: reduce){
  .bubble, .mini-osc .wave{ animation: none !important }
}