/* OPSDECK brand — DEBUG DECK docs */
:root{
  --void:#000000;
  --ink:#05070B;
  --raise:#0A0D14;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --text:#F2F4F8;
  --dim:#7C8496;
  --faint:#4A5162;
  --ion:#7DE2FF;
  --ok:#5BE6A4;
  --err:#FF7A6B;
  --amber:#FFC46B;
  --purple:#B79BFF;
  --radius:2px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --micro:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(125,226,255,.22)}
a{color:var(--ion);text-decoration:none}
a:hover{text-decoration:underline}

/* microtype label */
.nav-label,.mission,.wordmark{
  font-family:var(--mono);
  font-size:var(--micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}

/* header */
.site-header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:rgba(5,7,11,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand:hover{text-decoration:none}
.wordmark{color:var(--text);letter-spacing:.22em}
.mark{display:block;width:26px;height:26px;color:#C3C9D4;flex:none}
.mark svg{width:100%;height:100%;display:block}
.mark.sm{width:16px;height:16px;color:var(--faint)}
@keyframes mark-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.brand:hover .mark{color:#FFFFFF;animation:mark-spin .7s ease-out 1}
.mission{color:var(--dim)}
.mission:hover{color:var(--text);text-decoration:none}

/* shell: sidebar + content */
.shell{display:flex;gap:40px;max-width:72rem;margin:0 auto;padding:32px 22px}
.sidebar{
  flex:0 0 180px;
  position:sticky;top:76px;align-self:flex-start;
  display:flex;flex-direction:column;gap:8px;
}
.nav-label{color:var(--faint);margin-bottom:4px}
.sidebar a{
  color:var(--dim);padding:5px 10px;border-left:1px solid var(--hair);
  font-size:14px;
}
.sidebar a:hover{color:var(--text);text-decoration:none;border-left-color:var(--hair-2)}
.sidebar a.active{color:var(--ion);border-left-color:var(--ion)}
.content{flex:1;min-width:0;max-width:46rem}

/* mobile: sidebar becomes horizontal strip */
@media (max-width:760px){
  .shell{flex-direction:column;gap:20px}
  .sidebar{
    position:static;flex:none;
    flex-direction:row;overflow-x:auto;gap:4px;
    border-bottom:1px solid var(--hair);padding-bottom:10px;
  }
  .nav-label{display:none}
  .sidebar a{border-left:none;white-space:nowrap;border-radius:var(--radius)}
  .sidebar a.active{background:var(--raise)}
}

/* typography */
.content h1,.content h2,.content h3,.content h4{
  font-family:var(--font);font-weight:700;line-height:1.25;
  margin:1.8em 0 .6em;
}
.content h1:first-child{margin-top:0}
.content h1{font-size:1.7rem;letter-spacing:-.01em}
.content h2{font-size:1.25rem;border-bottom:1px solid var(--hair);padding-bottom:.35em}
.content h3{font-size:1.05rem}
.content p,.content ul,.content ol{margin:0 0 1em}
.content ul,.content ol{padding-left:1.4em}
.content li{margin:.25em 0}
.content hr{border:none;border-top:1px solid var(--hair);margin:2em 0}
.content strong{color:var(--text)}
.content img{max-width:100%}

/* blockquotes */
.content blockquote{
  border-left:2px solid var(--purple);
  background:var(--ink);
  padding:10px 16px;margin:0 0 1em;
  color:var(--dim);border-radius:var(--radius);
}

/* tables */
.content table{
  width:100%;border-collapse:collapse;margin:0 0 1.2em;
  font-size:14px;display:block;overflow-x:auto;
}
.content th,.content td{
  border:1px solid var(--hair);padding:7px 12px;text-align:left;
}
.content th{
  background:var(--raise);font-family:var(--mono);
  font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:500;
}

/* code */
code{
  font-family:var(--mono);font-size:.86em;
  background:var(--raise);border:1px solid var(--hair);
  border-radius:var(--radius);padding:.12em .38em;color:var(--ion);
}
pre{
  background:var(--raise);border:1px solid var(--hair);
  border-radius:var(--radius);padding:14px 16px;
  overflow-x:auto;margin:0 0 1.2em;line-height:1.55;
}
pre code{background:none;border:none;padding:0;color:var(--text);font-size:13px}
div.highlight{margin:0}
.highlighter-rouge{margin-bottom:1.2em}

/* rouge — tuned for the dark palette */
.highlight .c,.highlight .c1,.highlight .cm,.highlight .cs{color:var(--faint);font-style:italic}
.highlight .k,.highlight .kd,.highlight .kn,.highlight .kr,.highlight .kt,.highlight .kc,.highlight .ow{color:var(--purple)}
.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sh,.highlight .sx,.highlight .sr{color:var(--ok)}
.highlight .mi,.highlight .mf,.highlight .mh,.highlight .mo,.highlight .m,.highlight .il{color:var(--amber)}
.highlight .nf,.highlight .fm,.highlight .nc,.highlight .nn{color:var(--ion)}
.highlight .nt,.highlight .nd{color:var(--err)}
.highlight .na,.highlight .nb,.highlight .bp{color:var(--amber)}
.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi{color:var(--text)}
.highlight .o,.highlight .p,.highlight .pi{color:var(--dim)}
.highlight .err{color:var(--err);background:none}
.highlight .gp{color:var(--faint)}
.highlight .no{color:var(--amber)}
.highlight .ss,.highlight .se{color:var(--ion)}

/* landing cards */
.guide-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin:26px 0;
}
.guide-card{
  display:block;background:var(--ink);border:1px solid var(--hair);
  border-radius:var(--radius);padding:18px;
  transition:border-color .15s,background .15s;
}
.guide-card:hover{border-color:var(--hair-2);background:var(--raise);text-decoration:none}
.guide-card h3{
  margin:0 0 8px;color:var(--text);font-size:1rem;font-weight:700;
}
.guide-card p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}

/* footer */
.site-footer{
  display:flex;justify-content:center;
  padding:34px 0 40px;border-top:1px solid var(--hair);
  margin-top:48px;
}