@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/ds/fonts/Newsreader-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/ds/fonts/Archivo-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/ds/fonts/JetBrainsMono-variable.woff2') format('woff2');
}



:root {
  
  --ink: #1a1f1f;        
  --ink-soft: #3f4645;   
  --ink-mute: #6d7574;   

  
  --paper: #f5f7f6;      
  --canvas: #e7eae9;     
  --canvas-dot: rgba(20, 30, 30, 0.05); 
  --sheet: #ffffff;      
  --wash: #eef2f1;       
  --line: #d4dad8;       
  --line-strong: #c3cac8;

  
  --teal: #1f6f78;       
  --teal-press: #185860; 
  --teal-wash: #eef6f6;  
  --teal-line: #bcd9db;  
  --teal-bright: #57b0b7;

  
  --risk: #b1483f;       --risk-wash: #f8edec;  --risk-line: #e7c7c3;  
  --gold: #8a5e00;       --gold-wash: #fbf3dc;  --gold-line: #e3c98a;  --gold-ink: #6b4a00; 
  --proj: #5a6a8c;       --proj-wash: #eef0f6;  
  --ok: #1c7d3c;         --ok-wash: #eef7ee;    --ok-line: #bfe0c8;    

  
  --void: #0c0e12;       
  --signal: #2fd6a0;     

  
  --bg-page: var(--paper);
  --bg-canvas: var(--canvas);
  --bg-surface: var(--sheet);
  --bg-subtle: var(--wash);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-mute);
  --text-link: var(--teal);
  --border-default: var(--line);
  --border-strong: var(--line-strong);
  --accent: var(--teal);
  --accent-press: var(--teal-press);
  --focus-ring: var(--teal-wash);
}



:root {
  
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  --font-label: var(--font-mono);

  
  --text-xs: 11px;    
  --text-sm: 12.5px;  
  --text-base: 15px;  
  --text-md: 16px;    
  --text-lg: 18px;    
  --text-xl: 23px;    
  --text-2xl: 30px;   
  --text-3xl: 42px;   

  
  --weight-regular: 400;
  --weight-medium: 500;   
  --weight-semibold: 600; 
  --weight-bold: 700;     

  
  --leading-tight: 1.08;  
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --leading-snug: 1.45;

  
  --tracking-display: -0.02em; 
  --tracking-heading: -0.015em;
  --tracking-label: 0.06em;    

  
  --measure: 72ch;
}



:root {
  
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;

  
  --radius-xs: 4px;   
  --radius-sm: 5px;   
  --radius-md: 7px;   
  --radius-lg: 8px;   
  --radius-xl: 12px;  
  --radius-pill: 20px;
  --radius-round: 50%;

  
  --border-hairline: 1px solid var(--line);
  --border-control: 1px solid var(--line-strong);
  --border-accent: 1px solid var(--teal-line);

  
  --shadow-tip: 0 1px 4px rgba(0, 0, 0, 0.12);                  
  --shadow-card: 0 12px 32px -26px rgba(20, 30, 30, 0.55);      
  --shadow-panel: 0 16px 40px -30px rgba(20, 30, 30, 0.4);      
  --focus-shadow: 0 0 0 3px var(--teal-wash);                   
}



:root {
  --dur-fast: 0.12s;  
  --dur-base: 0.18s;  
  --dur-slow: 0.28s;  

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);  
  --ease-out: cubic-bezier(0, 0, 0.2, 1);  
  --ease-in: cubic-bezier(0.4, 0, 1, 1);  
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}



*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-base)/var(--leading-body) var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--font-serif); font-weight: var(--weight-medium); color: var(--ink); }
h1 { font-size: var(--text-2xl); margin: 0 0 8px; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-xl); margin: 22px 0 10px; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--ink); margin: 0.2em 0; }

p { margin: 0 0 12px; }
.muted { color: var(--ink-mute); }
strong, b { color: var(--ink); }
.lead { font-size: var(--text-md); color: var(--ink); margin: 0 0 12px; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--ink);
}

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }


.app-canvas {
  background-color: var(--canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--canvas-dot) 1px, transparent 0);
  background-size: 22px 22px;
}



table {
  border-collapse: collapse;
  width: 100%;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 0;          
  overflow: hidden;
  margin: var(--s2) 0;
  font-size: 14px;
  color: var(--ink);
}

th, td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

thead th {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  background: var(--wash);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }


tbody td:first-child { font-weight: 500; }

table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-mute);
  padding: 0 2px 8px;
}


th.num, td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  white-space: nowrap;
}


table.compact th, table.compact td { padding: 8px 12px; }
table.compact { font-size: 13px; }


table.rows-hover tbody tr { transition: background .1s; }
table.rows-hover tbody tr:hover { background: var(--teal-wash); cursor: default; }


tbody tr[aria-selected="true"] { background: var(--teal-wash); }
tbody tr[data-flag="risk"] td:first-child { box-shadow: inset 3px 0 0 var(--risk); }



[data-theme="terminal"] {
  --bg-page: var(--void);
  --bg-surface: #14171d;
  --bg-subtle: #1b1f27;
  --text-primary: #d7dce5;
  --text-secondary: #aeb6c2;
  --text-muted: #7f8896;
  --border-default: #262b34;
  --border-strong: #333a45;
  --accent: var(--signal);
  --accent-press: #28b389;
  --text-link: var(--signal);
  --focus-ring: rgba(47, 214, 160, 0.18);

  background: var(--void);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

[data-theme="terminal"] a { color: var(--signal); }
[data-theme="terminal"] code {
  background: #1b1f27;
  border-color: #262b34;
  color: #d7dce5;
}