@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Mukta:wght@400;600;700;800&display=swap');

:root{
  --bg:#05061a;
  --panel:#10163d;
  --panel-2:#151d4f;
  --edge:#2d3b86;
  --text:#f6f7ff;
  --muted:#9aa3d1;
  --cyan:#6ee7f9;
  --gold:#ffd166;
  --coral:#ff6b6b;
  --green:#7cffb2;
  --ink:#05061a;
}

*{ box-sizing:border-box; }
html, body{ margin:0; min-height:100%; }
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 12%, rgba(110,231,249,0.16), transparent 24rem),
    radial-gradient(circle at 82% 8%, rgba(255,209,102,0.12), transparent 20rem),
    linear-gradient(180deg, #0b0f30, var(--bg));
  color:var(--text);
  font-family:'Mukta', system-ui, sans-serif;
}

a{ color:inherit; }
.pixel{ font-family:'Press Start 2P', monospace; letter-spacing:0; }

.page-shell{
  width:min(1120px, 100%);
  margin:0 auto;
  padding:24px clamp(16px, 4vw, 40px) 48px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}

.brand-link,
.back-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  border:1px solid rgba(110,231,249,0.34);
  border-radius:8px;
  padding:10px 12px;
  color:var(--cyan);
  background:rgba(110,231,249,0.07);
  text-decoration:none;
  font-size:9px;
}

.hero{
  display:grid;
  gap:12px;
  margin-bottom:24px;
}

.eyebrow{
  color:var(--gold);
  font-size:10px;
}

h1{
  margin:0;
  font-size:clamp(28px, 7vw, 58px);
  line-height:1.02;
}

.intro{
  max-width:680px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
}

.experiment-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:16px;
}

.experiment-card{
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border:1px solid rgba(110,231,249,0.24);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(21,29,79,0.92), rgba(8,11,35,0.94));
  text-decoration:none;
  box-shadow:0 18px 34px rgba(0,0,0,0.24);
}

.experiment-card h2{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.1;
}

.experiment-card p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}

.mini-graph{
  width:100%;
  height:82px;
  display:block;
  border-radius:8px;
  background:rgba(5,6,26,0.44);
}

.launch-label{
  color:var(--gold);
  font-size:9px;
}

.lab-layout{
  display:grid;
  grid-template-columns:minmax(260px, 340px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

.controls,
.readout{
  border:1px solid rgba(110,231,249,0.24);
  border-radius:8px;
  background:rgba(16,22,61,0.86);
  padding:16px;
}

.controls{
  display:grid;
  gap:16px;
}

.control-row{
  display:grid;
  gap:8px;
}

.control-row label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--text);
  font-weight:800;
}

.control-row output{
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}

input[type="range"]{
  width:100%;
  accent-color:var(--cyan);
}

.graph-panel{
  border:1px solid rgba(110,231,249,0.28);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(9,13,42,0.95), rgba(5,6,26,0.98));
  overflow:hidden;
}

.graph-svg{
  display:block;
  width:100%;
  aspect-ratio:1.35;
  min-height:320px;
}

.grid-line{ stroke:rgba(154,163,209,0.17); stroke-width:0.035; }
.axis-line{ stroke:rgba(246,247,255,0.55); stroke-width:0.055; }
.curve-line{ fill:none; stroke:var(--gold); stroke-width:0.09; stroke-linecap:round; stroke-linejoin:round; }
.line-plot{ fill:none; stroke:var(--green); stroke-width:0.09; stroke-linecap:round; stroke-linejoin:round; }
.point-dot{ fill:var(--coral); stroke:var(--text); stroke-width:0.04; }
.root-dot{ fill:var(--cyan); stroke:var(--ink); stroke-width:0.04; }
.graph-label{ fill:var(--muted); font:0.45px 'Mukta', sans-serif; }

.readout{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-top:14px;
}

.metric{
  min-height:74px;
  padding:12px;
  border-radius:8px;
  background:rgba(5,6,26,0.38);
}

.metric span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.metric strong{
  display:block;
  margin-top:4px;
  color:var(--text);
  font-size:18px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.action-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.preset-button{
  flex:1 1 130px;
  min-height:42px;
  border:1px solid rgba(255,209,102,0.38);
  border-radius:8px;
  background:rgba(255,209,102,0.1);
  color:var(--gold);
  cursor:pointer;
  font-weight:800;
}

@media (max-width:760px){
  .topbar{ align-items:flex-start; flex-direction:column; }
  .lab-layout{ grid-template-columns:1fr; }
  .graph-svg{ min-height:280px; }
}