/* ============================================================
   Mitocôndria — console bioenergético
   Dark, cellular aesthetic. Energy = amber/gold, membrane = teal,
   oxidative stress = red. All original / procedural.
   ============================================================ */

:root{
  --bg:      #04070b;
  --bg2:     #080e15;
  --panel:   rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.055);
  --line:    rgba(150,180,200,.14);
  --line-2:  rgba(150,180,200,.22);
  --ink:     #eaf3f7;
  --ink-dim: #b6c6d1;
  --muted:   #7d90a0;
  --gold:    #ffcf6b;
  --gold-2:  #f4a63c;
  --teal:    #46e6cf;
  --teal-2:  #2bb6ac;
  --ros:     #ff5d70;
  --violet:  #9a7bff;
  --shadow:  0 24px 60px -24px rgba(0,0,0,.8);
  --r:       16px;
  --maxw:    1240px;
}

*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(70,230,207,.10), transparent 60%),
    radial-gradient(900px 700px at 8% 12%, rgba(255,207,107,.07), transparent 62%),
    linear-gradient(180deg, var(--bg2), var(--bg) 60%);
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:"Space Grotesk", "Inter", sans-serif; font-weight:600; letter-spacing:-.01em; line-height:1.08; margin:0; }
a{ color:inherit; }
em{ font-style:normal; }

.skip-link{
  position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  background:var(--gold); color:#1a1204; padding:.5rem 1rem; border-radius:0 0 10px 10px;
  font-weight:600; z-index:100; transition:top .18s ease;
}
.skip-link:focus{ top:0; }

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(14px, 4vw, 42px);
  background:linear-gradient(180deg, rgba(4,7,11,.86), rgba(4,7,11,.35) 70%, transparent);
  backdrop-filter:blur(10px);
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand-mark{ color:var(--teal); display:grid; place-items:center; filter:drop-shadow(0 0 8px rgba(70,230,207,.5)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{ font-family:"Space Grotesk"; font-weight:600; font-size:1.02rem; letter-spacing:.01em; }
.brand-text em{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.topnav{ display:flex; gap:clamp(.7rem,2.4vw,1.6rem); flex-wrap:nowrap; }
.topnav a{ text-decoration:none; color:var(--ink-dim); font-size:.86rem; font-weight:500; white-space:nowrap; padding:.25rem 0; border-bottom:1px solid transparent; transition:.16s; }
.topnav a:hover{ color:var(--ink); border-color:var(--teal); }

/* ---------------- console layout ---------------- */
.console{
  max-width:var(--maxw); margin:clamp(10px,2vw,26px) auto 0;
  padding:0 clamp(14px, 4vw, 42px);
  display:grid; grid-template-columns:minmax(0,1.42fr) minmax(330px, 430px);
  gap:clamp(16px, 2.6vw, 40px);
  align-items:stretch;
}

.stage{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(10,20,28,.6), rgba(3,6,10,.9) 70%),
    #03060a;
  box-shadow:var(--shadow), inset 0 0 90px rgba(0,0,0,.6);
  overflow:hidden;
  min-height:min(70vh, 620px);
}
#mito{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.stage-top{
  position:absolute; top:12px; left:12px; right:12px;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; z-index:3;
  pointer-events:none;
}
.specimen{ font-family:"JetBrains Mono", monospace; font-size:.64rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.stage-tools{ display:flex; gap:.4rem; pointer-events:auto; flex-wrap:nowrap; }
.pill{
  font:inherit; font-size:.72rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink-dim); background:rgba(10,18,26,.7); border:1px solid var(--line-2);
  border-radius:999px; padding:.32rem .74rem; cursor:pointer; white-space:nowrap;
  transition:.15s; backdrop-filter:blur(6px);
}
.pill:hover{ color:var(--ink); border-color:var(--teal); }
.pill[aria-pressed="true"]{ color:#04120f; background:var(--teal); border-color:var(--teal); font-weight:600; }

.stage-gauge{
  position:absolute; left:18px; top:42px; z-index:3; pointer-events:none;
}
.gauge-num{ display:flex; align-items:baseline; gap:.12rem; }
.gauge-num span{ font-family:"Space Grotesk"; font-weight:700; font-size:clamp(2.4rem, 5.4vw, 3.7rem); line-height:.82;
  color:var(--gold); text-shadow:0 0 30px rgba(255,207,107,.5); font-variant-numeric:tabular-nums; }
.gauge-num small{ font-family:"Space Grotesk"; font-weight:600; font-size:1.05rem; color:var(--gold-2); }
.gauge-cap{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
.stage-disc{
  position:absolute; right:14px; bottom:12px; margin:0; z-index:3; pointer-events:none;
  font-size:.62rem; letter-spacing:.05em; color:var(--muted); text-align:right; max-width:60%;
}

/* ---------------- panel ---------------- */
.panel{
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding:clamp(16px, 2vw, 24px);
  display:flex; flex-direction:column; gap:1.15rem;
  box-shadow:var(--shadow);
}
.panel-head h1{ font-size:clamp(1.24rem, 2.3vw, 1.62rem); }
.panel-head p{ margin:.5rem 0 0; color:var(--ink-dim); font-size:.92rem; }

.ctl-group{ display:flex; flex-direction:column; gap:.85rem; }
.ctl-group.anchor{ padding-top:.9rem; border-top:1px dashed var(--line-2); }
.ctl-group-title{ font-family:"JetBrains Mono", monospace; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.ctl{ display:flex; flex-direction:column; gap:.28rem; }
.ctl label{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; font-size:.9rem; font-weight:500; color:var(--ink); }
.ctl-val{ font-family:"JetBrains Mono", monospace; font-size:.8rem; color:var(--teal); font-weight:500; }
.ctl-ends{ display:flex; justify-content:space-between; font-size:.66rem; color:var(--muted); letter-spacing:.02em; }

/* range slider */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]:focus{ outline:none; }
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(70,230,207,.35); }
input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(70,230,207,.35); }
input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:99px;
  background:linear-gradient(90deg, var(--teal-2), var(--gold-2));
  opacity:.55;
}
input[type=range]::-moz-range-track{
  height:5px; border-radius:99px;
  background:linear-gradient(90deg, var(--teal-2), var(--gold-2)); opacity:.55;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:17px; height:17px; margin-top:-6px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, var(--gold-2));
  border:1px solid rgba(0,0,0,.4); box-shadow:0 2px 8px rgba(0,0,0,.5), 0 0 14px rgba(255,207,107,.5);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.4);
  background:radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, var(--gold-2));
  box-shadow:0 2px 8px rgba(0,0,0,.5), 0 0 14px rgba(255,207,107,.5);
}

/* readouts */
.readouts{ display:flex; flex-direction:column; gap:.6rem; padding-top:.95rem; border-top:1px dashed var(--line-2); }
.ro-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ro-list li{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.4rem .6rem; font-size:.84rem; }
.ro-list li .ro-bar{ grid-column:1 / -1; order:3; }
.ro-k{ color:var(--ink-dim); }
.ro-k em{ color:var(--muted); font-size:.72rem; }
.ro-v{ font-family:"JetBrains Mono", monospace; color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums; }
.ro-mv{ font-family:"JetBrains Mono", monospace; color:var(--teal); font-weight:500; }
.ro-bar{ position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.ro-bar i{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--teal-2), var(--gold)); transition:width .35s ease; }
.ro-bar.ros i{ background:linear-gradient(90deg, #b7524f, var(--ros)); }

/* ---------------- reading band ---------------- */
.reading{ max-width:var(--maxw); margin:clamp(18px,3vw,34px) auto 0; padding:0 clamp(14px, 4vw, 42px); }
.reading-inner{
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(120deg, rgba(70,230,207,.07), rgba(255,207,107,.05));
  padding:clamp(18px,2.4vw,30px);
  position:relative; overflow:hidden;
}
.reading-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.reading-badge{
  display:inline-block; font-family:"JetBrains Mono", monospace; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--teal); border:1px solid var(--line-2); border-radius:99px;
  padding:.28rem .7rem;
}
.copy-btn{
  font:inherit; font-size:.78rem; font-weight:500; color:var(--ink-dim);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:99px;
  padding:.34rem .9rem; cursor:pointer; transition:.15s; white-space:nowrap;
}
.copy-btn:hover{ color:var(--ink); border-color:var(--teal); }
.copy-btn.done{ color:#04120f; background:var(--teal); border-color:var(--teal); font-weight:600; }
.reading-proj{ margin:.7rem 0 0; font-size:.98rem; color:var(--ink); }
.reading-proj b{ color:var(--gold); font-weight:600; }
.reading-proj .arrow{ color:var(--teal); }
.reading-text{ margin:0; font-family:"Space Grotesk"; font-weight:500; font-size:clamp(1.1rem, 2.4vw, 1.55rem); line-height:1.32; color:var(--ink); }
.reading-text b{ color:var(--gold); font-weight:600; }
.reading-levers{ margin:.7rem 0 0; color:var(--ink-dim); font-size:.94rem; }
.reading-levers b{ color:var(--teal); font-weight:600; }

/* ---------------- presets ---------------- */
.presets, .why{ max-width:var(--maxw); margin:clamp(30px,5vw,64px) auto 0; padding:0 clamp(14px, 4vw, 42px); }
.presets h2, .why h2{ font-size:clamp(1.3rem, 3vw, 2rem); }
.sec-sub{ margin:.4rem 0 1.2rem; color:var(--muted); font-size:.95rem; max-width:60ch; }
.preset-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.preset{
  font:inherit; font-size:.86rem; font-weight:500; text-align:left;
  color:var(--ink-dim); background:var(--panel); border:1px solid var(--line-2);
  border-radius:12px; padding:.7rem .95rem; cursor:pointer; transition:.16s; line-height:1.25;
  display:flex; flex-direction:column; gap:.15rem; min-width:150px;
}
.preset:hover{ color:var(--ink); border-color:var(--teal); transform:translateY(-2px); background:var(--panel-2); }
.preset[aria-pressed="true"]{ border-color:var(--gold); color:var(--ink); box-shadow:0 0 0 1px var(--gold-2) inset; }
.preset strong{ font-weight:600; font-size:.9rem; }
.preset span{ font-size:.72rem; color:var(--muted); }

/* ---------------- why grid ---------------- */
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:.9rem; }
.why-card{
  border:1px solid var(--line); border-radius:14px; padding:1.05rem 1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  display:flex; flex-direction:column; gap:.5rem;
}
.why-card .wc-top{ display:flex; align-items:center; gap:.6rem; }
.why-icon{ width:34px; height:34px; flex:0 0 auto; }
.why-card h3{ font-size:1rem; }
.why-card .wc-mech{ font-family:"JetBrains Mono", monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }
.why-card p{ margin:0; font-size:.86rem; color:var(--ink-dim); }

/* ---------------- footer ---------------- */
.foot{ max-width:var(--maxw); margin:clamp(40px,6vw,80px) auto 0; padding:clamp(20px,3vw,34px) clamp(14px, 4vw, 42px) clamp(40px,6vw,70px); }
.foot-disc{ font-size:.82rem; color:var(--muted); line-height:1.6; max-width:80ch; padding:1rem 1.15rem;
  border:1px solid var(--line); border-left:2px solid var(--gold-2); border-radius:10px; background:rgba(255,255,255,.02); }
.foot-disc strong{ color:var(--ink-dim); }
.foot-meta{ display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; margin-top:1.2rem; font-size:.82rem; color:var(--muted); }
.foot-meta a{ text-decoration:none; color:var(--ink-dim); border-bottom:1px solid var(--line-2); padding-bottom:1px; }
.foot-meta a:hover{ color:var(--teal); border-color:var(--teal); }

/* ---------------- responsive ---------------- */
@media (max-width: 900px){
  .console{ grid-template-columns:1fr; }
  .stage{ min-height:64vh; aspect-ratio:1/1; min-height:unset; }
  .panel{ order:2; }
}
@media (max-width: 560px){
  .nav-wide{ display:none; }
}
@media (max-width: 460px){
  body{ font-size:15px; }
  .topnav{ gap:.9rem; }
  .brand-text em{ display:none; }
  .stage{ aspect-ratio:4/5; }
  .gauge-num span{ font-size:2.5rem; }
  .stage-disc{ max-width:56%; font-size:.58rem; }
  .preset{ min-width:calc(50% - .3rem); }
  .stage-tools .pill{ font-size:.66rem; padding:.28rem .6rem; }
  .stage-gauge{ top:38px; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .skip-link{ transition:none; }
}