:root{
  --bg:#0f1216; --panel:#171c22; --line:#26303a; --ink:#e8edf2;
  --muted:#93a3b3; --accent:#3f8cff; --accent-ink:#fff;
  --warn:#f2b23e; --ok:#3ec98a; --bad:#f2775e;
  --radius:14px; --maxw:52rem;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f7fa; --panel:#fff; --line:#dfe6ee; --ink:#16202b;
         --muted:#5b6b7c; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:var(--accent)}
main{max-width:var(--maxw); margin:0 auto; padding:0 1.1rem 3rem}

/* header */
.top{
  max-width:var(--maxw); margin:0 auto; padding:1.1rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
}
.wordmark{font-weight:700; font-size:1.05rem; letter-spacing:.01em;
  text-decoration:none; color:var(--ink); margin-inline-end:auto}
.top nav{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.who{color:var(--muted); font-size:.9rem}
.langs{display:flex; gap:.15rem; margin-inline-start:.4rem}
.lang{font-size:.75rem; letter-spacing:.06em; text-decoration:none;
  color:var(--muted); padding:.2rem .35rem; border-radius:6px}
.lang.on{color:var(--ink); background:var(--panel)}

/* buttons */
.btn{
  display:inline-block; padding:.55rem 1rem; border-radius:10px;
  text-decoration:none; font-weight:600; font-size:.94rem;
  border:1px solid var(--line); color:var(--ink); background:transparent;
}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-quiet{color:var(--muted)}
.btn-lg{padding:.75rem 1.4rem; font-size:1rem}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* hero + panels */
.hero{padding:2.4rem 0 1.4rem}
.hero.compact{padding:1.6rem 0 .8rem}
.hero h1{margin:0 0 .4rem; font-size:clamp(1.7rem,4.5vw,2.5rem); line-height:1.2}
.tagline{margin:.2rem 0 1rem; font-size:1.12rem; color:var(--muted)}
.lead{margin:.2rem 0 1.2rem; max-width:44rem}
.note{color:var(--muted); font-size:.9rem}

.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem; margin:1.4rem 0;
}
.panel h1{margin-top:0}
.panel h2{margin:1.4rem 0 .6rem; font-size:1.15rem}
.panel h2:first-of-type{margin-top:0}
.panel h3{margin:1.1rem 0 .4rem; font-size:1rem; color:var(--muted)}

/* accordion */
details{border-top:1px solid var(--line); padding:.2rem 0}
details:first-of-type{border-top:0}
summary{
  cursor:pointer; padding:.75rem 0; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:.6rem;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--accent); font-weight:700; width:1ch}
details[open] summary::before{content:"\2212"}
summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.answer{padding:0 0 .9rem 1.6rem; color:var(--muted)}
.answer strong{color:var(--ink)}

/* links list */
.links{list-style:none; padding:0; margin:.4rem 0}
.links li{padding:.3rem 0; display:flex; gap:.6rem; flex-wrap:wrap}
.ctype{color:var(--muted); min-width:5.5rem; font-size:.9rem}

/* cockpit cards */
.cards{list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:.9rem}
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.2rem;
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.card-body{flex:1 1 16rem; min-width:0}
.card h2{margin:0 0 .25rem; font-size:1.1rem}
.card p{margin:0; color:var(--muted); font-size:.94rem}
.badge{
  display:inline-block; margin-top:.5rem; padding:.15rem .5rem;
  border:1px solid var(--warn); color:var(--warn);
  border-radius:999px; font-size:.75rem; font-weight:600;
}

/* jump / probe */
.jump .actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem}
.warn{color:var(--warn)}
.probe{
  margin:1.1rem 0 0; padding:.7rem .9rem; border-radius:10px;
  border:1px solid var(--line); font-size:.94rem;
}
.probe.checking{color:var(--muted)}
.probe.ok{border-color:var(--ok); color:var(--ok)}
.probe.fail{border-color:var(--bad); color:var(--bad)}
.probe.unknown{border-color:var(--warn); color:var(--warn)}

.steps{padding-inline-start:1.2rem}
.steps li{margin:.45rem 0}
.warnbox{
  border:1px solid var(--warn); border-radius:10px;
  padding:.9rem 1.1rem; margin:1.2rem 0;
}
.warnbox h3{margin:0 0 .35rem; color:var(--warn)}
.warnbox p{margin:0; color:var(--muted)}

/* footer */
.foot{
  max-width:var(--maxw); margin:0 auto; padding:1.4rem 1.1rem 2.4rem;
  border-top:1px solid var(--line); color:var(--muted); font-size:.85rem;
}
.foot p{margin:.25rem 0}