:root {
   
  --ink:        #050B1C;    
  --slate:      #0C1730;    
  --slate-2:    #111E3C;    
  --well:       #091334;    

   
  --line:       rgba(124, 152, 208, .14);
  --hair:       rgba(124, 152, 208, .08);

   
  --gold:       #C9A550;
  --gold-hi:    #DCBB6A;
  --gold-soft:  rgba(201, 165, 80, .06);
  --gold-edge:  rgba(201, 165, 80, .30);

   
  --paper:      #E9EEF9;
  --dim:        #93A3C4;
  --dimmer:     #63749A;

   
  --live:       #00E599;    
  --warn:       #E8B96A;    
  --error:      #E07070;

   
  --P:   #E8827F;  --P-edge:   rgba(232, 130, 127, .32);
  --LP:  #D9A0A0;  --LP-edge:  rgba(217, 160, 160, .30);
  --VUS: #7AB8E8;  --VUS-edge: rgba(122, 184, 232, .32);
  --LB:  #8FC7AC;  --LB-edge:  rgba(143, 199, 172, .30);
  --B:   #5FC095;  --B-edge:   rgba(95, 192, 149, .32);
  --UNK: #8A9DC0;  --UNK-edge: rgba(138, 157, 192, .20);

   
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

   




  --bg:           var(--ink);
  --surface:      var(--slate);
  --surface2:     var(--well);
  --border:       var(--line);
  --border-light: var(--hair);
  --text:         var(--paper);
  --text2:        var(--dim);
  --text3:        var(--dimmer);
  --gold2:        var(--gold-soft);
  --teal:         var(--live);
  --teal2:        rgba(0, 229, 153, .08);
  --P-bg:   rgba(232, 130, 127, .10);  --P-brd:   var(--P-edge);
  --LP-bg:  rgba(217, 160, 160, .08);  --LP-brd:  var(--LP-edge);
  --VUS-bg: rgba(122, 184, 232, .10);  --VUS-brd: var(--VUS-edge);
  --LB-bg:  rgba(143, 199, 172, .08);  --LB-brd:  var(--LB-edge);
  --B-bg:   rgba(95, 192, 149, .10);   --B-brd:   var(--B-edge);
  --UNK-bg: rgba(138, 157, 192, .06);  --UNK-brd: var(--UNK-edge);
  --mono-font: var(--mono);

   
  --nav-height:    60px;
  --footer-height: 86px;    
  --measure:    1180px;
  --gutter:     32px;
}

 
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

 

body {
  min-height: 100vh;
  padding-bottom: var(--footer-height);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "zero" 1;
}

 

[hidden] { display: none !important; }

a { color: inherit; }
button { font: inherit; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

 
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

 
.pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pip { animation: pip-pulse 2.6s ease-in-out infinite; }
}
@keyframes pip-pulse { 50% { opacity: .3; } }

 

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid; border-radius: 5px; padding: 2px 8px;
}
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag-P   { color: var(--P);   border-color: var(--P-edge);   }
.tag-LP  { color: var(--LP);  border-color: var(--LP-edge);  }
.tag-VUS { color: var(--VUS); border-color: var(--VUS-edge); }
.tag-LB  { color: var(--LB);  border-color: var(--LB-edge);  }
.tag-B   { color: var(--B);   border-color: var(--B-edge);   }
.tag-UNK { color: var(--UNK); border-color: var(--UNK-edge); }

@media (max-width: 640px) { :root { --gutter: 20px; } }