@font-face {
  font-family: 'Geist';
  src: url('fonts/geist.woff2') format('woff2-variations'),
       url('fonts/geist.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono.woff2') format('woff2-variations'),
       url('fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/neue-machina-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  --bg:       #0e0e10;
  --bg-2:     #151517;
  --hi:       #1b1b1e;   
  --line:     #242427;   
  --line-2:   #2f2f33;   
  --line-3:   #3d3d42;   
  --rule:     1px solid var(--line);

  --ink:      #ececee;
  --ink-2:    #a1a1a7;
  --ink-3:    #6f6f76;

  --surf:     #161619;   
  --surf-2:   #1c1c20;   
  --edge:     #2b2b30;   
  --lift:     0 1px 2px rgba(0, 0, 0, .4);

  --act:      #a99bff;

  --act-fill: #6c5cf0;
  --act-on:   #ffffff;
  --act-soft: #221c46;

  --ok:        #4ea87a;
  --ok-fill:   #14301f;
  --ok-on:     #86e0ad;
  --ok-edge:   #1e4630;
  --stop-edge: #56201b;

  --stop:      #e5766a;
  --stop-fill: #3d1613;
  --stop-on:   #f5b3aa;

  --done-fill: var(--ink);
  --done-on:   var(--bg);

  --pri-bg:    #f4f4f5;
  --pri-on:    var(--bg);
  --pri-hover: #ffffff;

  --data:      #7c7c84;

  --glass:     #0a0a0c;
  --glass-2:   #111113;
  --glass-3:   #19191c;
  --glass-ln:  #1e1e21;
  --g-ink:     #c9c9cd;
  --g-ink-2:   #8b8b92;
  --g-ink-3:   #56565d;
  --add:       #6fd39a;
  --del:       #e5766a;
  --syn-key: #c4b5fd; --syn-str: #9fe6b6; --syn-num: #f2d48a;
  --syn-fn:  #93c5fd; --syn-typ: #f5b3aa; --syn-att: #a3a3a8;

  --veil:      rgba(0, 0, 0, .55);
  --shadow:    0 8px 24px rgba(0, 0, 0, .4);

  --s1: 4px;  --s2: 8px;  --s3: 16px;  --s4: 24px;  --s5: 32px;  --s6: 48px;

  --t-sm: 12px;  --l-sm: 16px;   
  --t-md: 13px;  --l-md: 20px;   
  --t-lg: 16px;  --l-lg: 24px;   
  --t-xl: 24px;  --l-xl: 32px;   
  --t-lab: 11px;  --ls-lab: .08em;   
  --t-dsp: 30px;  --l-dsp: 36px;     
  --t-big: 40px;  --l-big: 44px;     
  --t-page: var(--t-dsp);

  --h-xs:  20px;
  --h-sm:  24px;
  --h:     32px;
  --h-bar: 48px;
  
  --lights-strip: 28px;

  --r:      6px;
  --r-pill: 999px;
  --r-panel: 10px;      

  --label:    128px;    
  --label-lg: 240px;    
  --measure:  72ch;     
  --wide:     1180px;   
  --list-w:   240px;    
  --work-w:   560px;    
  --side-w:   320px;    

  --fn: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fm: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  --fw: 'Neue Machina', 'Geist', system-ui, sans-serif;
  --code-size: 12px;
  --sb: 10px;           
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: var(--fn); font-size: var(--t-md); line-height: var(--l-md);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden; }

h1, h2, h3, h4, p, dl, dd, dt, ul, ol, figure, pre, form { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; opacity: .5; }
a { color: var(--act); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
code, pre, kbd { font-family: var(--fm); font-size: var(--t-sm); }
img, svg { display: block; max-width: 100%; }
svg.i { width: 16px; height: 16px; flex: 0 0 auto; }
[hidden] { display: none !important; }
::selection { background: var(--act-fill); color: var(--act-on); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: var(--r); }
::-webkit-scrollbar { width: var(--sb); height: var(--sb); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

p { color: var(--ink-2); max-width: var(--measure); }
.lead { color: var(--ink); }
.dim, .dimr { color: var(--ink-3); }
.mono { font-family: var(--fm); font-size: var(--t-sm); }
.num { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.sel { user-select: text; -webkit-user-select: text; }

.thead > *, .pfk, .tgroup, .labhd, .kvk, .ngroup, .sgroup {
  font-size: var(--t-lab); line-height: var(--l-sm); letter-spacing: var(--ls-lab);
  text-transform: uppercase; font-weight: 500; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
  .nlogo.think .nd { animation: none !important; }
}