@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
/* =====================================================================
   THEME: BENTO — the site as a bento box. Warm paper, ink-black actions,
   and colour only as tiles: each part of the site has its own tint (the
   catalog sage, the tools apricot, monitoring sky, data lilac, account
   butter) and the hero is one big tile of it. Catalog cards cycle through
   the tints like compartments. No gradients, no blur, no glow.
   Loaded over style.css + theme-base.css. Delete this file to drop it.
   ===================================================================== */
:root{
  --paper:#F5F2EB; --surface:#FFFFFF; --surface-2:#EFEBE2; --surface-3:#E6E1D5; --row-hover:#F1EDE4;
  --ink:#16140F; --body:#46423A; --muted:#6B655C;
  --line:#DDD7CA; --line-soft:#E8E3D8; --rule:#16140F18; --rule-strong:#16140F33;
  --link:#16140F; --link-soft:#E3EFD9;
  --accent:#16140F; --accent-dark:#000000; --accent-soft:#E3EFD9; --accent-ink:#1F4A2C;
  --alive:#23865A; --alive-soft:#DDF0E4; --signal:#23865A;
  --wobbly:#A8730D; --wobbly-soft:#F8EDCF; --dead:#C8432F; --dead-soft:#F8E1DC; --stale:#8A847A; --unknown:#A49E93;
  --band:#F5F2EB; --band-ink:#16140F; --band-body:#46423A; --band-dim:#5E584F;
  --band-line:rgba(22,20,15,.10); --band-fill:rgba(22,20,15,.05);
  --r:12px; --r-lg:24px; --r-xl:32px;
  --shadow:none; --shadow-lift:0 24px 50px -28px rgba(22,20,15,.35);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --tile-1:#DCEAD6; --tile-2:#F9DEC4; --tile-3:#E4DCF4; --tile-4:#D5E6F2; --tile-5:#F4EAB6; --tile-6:#F3D6D9;

  --th-display:'Bricolage Grotesque',system-ui,sans-serif; --th-body:'Figtree',system-ui,sans-serif;
  --th-display-weight:800; --th-display-track:-.035em;
  --th-eyebrow:var(--ink); --th-eyebrow-font:'Figtree',system-ui,sans-serif;
  --th-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='21' height='36' rx='7' fill='%2316140F'/%3E%3Crect x='25' y='2' width='13' height='16' rx='5.5' fill='%238FCB98'/%3E%3Crect x='25' y='20' width='13' height='18' rx='5.5' fill='%23F2A968'/%3E%3Cpath d='M7.5 20.5l4 4 7-8.5' fill='none' stroke='%23F5F2EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --th-logo-w:30px; --th-logo-h:30px; --th-brand-track:-.035em; --th-brand-weight:800;
  --th-card-radius:24px; --th-card-border:0; --th-card-shadow:none;
  --th-card-shadow-hover:0 0 0 2px var(--ink); --th-card-lift:translateY(-3px);
  --th-btn-radius:100px; --th-btn-bg:var(--ink); --th-btn-ink:var(--paper); --th-btn-border:1.5px solid var(--ink);
  --th-btn-bg-hover:#34302A; --th-btn-lift:translateY(-1px);
  --th-btn2-bg:var(--surface); --th-btn2-ink:var(--ink); --th-btn2-border:1.5px solid var(--line); --th-btn2-border-hover:var(--ink);
  --th-panel-bg:var(--surface); --th-panel-border:0; --th-panel-radius:24px;
  --th-panel-shadow:0 18px 40px -24px rgba(22,20,15,.35); --th-panel-shadow-lg:0 30px 70px -30px rgba(22,20,15,.45);
  --th-input-bg:var(--surface); --th-input-border:1.5px solid var(--line); --th-input-radius:14px;
  --th-focus:var(--ink); --th-focus-ring:rgba(22,20,15,.12);
  --th-head-bg:var(--paper); --th-head-border:0; --th-strip-bg:var(--surface-2); --th-strip-ok:var(--alive);
  --th-foot-bg:var(--surface-2); --th-foot-border:0;
  --th-hero-bg:var(--tile-1); --th-hero-border:0; --th-hero-em:var(--ink);
  --th-badge-radius:100px; --th-badge-font:'Figtree',system-ui,sans-serif;
  --th-chip-radius:100px; --th-chip-font:'Figtree',system-ui,sans-serif;
  --th-section-dot:var(--ink); --th-tile-stripe:none;
  --th-grade-a:#23865A; --th-grade-b:#5E9F4F; --th-grade-c:#C99612; --th-grade-d:#DB6B2E; --th-grade-f:#C8432F;
}
:root[data-theme="dark"]{
  --paper:#12110E; --surface:#1C1A16; --surface-2:#23211C; --surface-3:#2B2822; --row-hover:#23211C;
  --ink:#F3EFE6; --body:#C5BFB3; --muted:#9A948A;
  --line:#34312A; --line-soft:#2A2722; --rule:#FFFFFF1A; --rule-strong:#FFFFFF33;
  --link:#F3EFE6; --link-soft:#25331F;
  --accent:#F3EFE6; --accent-dark:#FFFFFF; --accent-soft:#25331F; --accent-ink:#BFE3B0;
  --alive:#5CCB8A; --alive-soft:#15291D; --signal:#5CCB8A;
  --wobbly:#E6B04A; --wobbly-soft:#2E2512; --dead:#F07A63; --dead-soft:#33180F; --stale:#8A847A; --unknown:#6F6A62;
  --band:#12110E; --band-ink:#F3EFE6; --band-body:#C5BFB3; --band-dim:#A7A196;
  --band-line:rgba(243,239,230,.10); --band-fill:rgba(243,239,230,.05);
  --shadow-lift:0 24px 50px -24px rgba(0,0,0,.7);
  --tile-1:#1F2A1D; --tile-2:#33251A; --tile-3:#272035; --tile-4:#1B2833; --tile-5:#302B15; --tile-6:#321F22;
  --th-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='21' height='36' rx='7' fill='%23F3EFE6'/%3E%3Crect x='25' y='2' width='13' height='16' rx='5.5' fill='%238FCB98'/%3E%3Crect x='25' y='20' width='13' height='18' rx='5.5' fill='%23F2A968'/%3E%3Cpath d='M7.5 20.5l4 4 7-8.5' fill='none' stroke='%2312110E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --th-btn-bg-hover:#FFFFFF;
  --th-panel-shadow:0 18px 40px -22px rgba(0,0,0,.7); --th-panel-shadow-lg:0 30px 70px -26px rgba(0,0,0,.8);
  --th-focus-ring:rgba(243,239,230,.18);
  --th-grade-a:#5CCB8A; --th-grade-b:#8FBF6A; --th-grade-c:#E6B04A; --th-grade-d:#EE8A4E; --th-grade-f:#F07A63;
  --th-grade-ink:#12110E;
}

/* each part of the site is its own tile colour */
body.sec-catalog{--th-hero-bg:var(--tile-1)}
body.sec-tools{--th-hero-bg:var(--tile-2)}
body.sec-monitor{--th-hero-bg:var(--tile-4)}
body.sec-data{--th-hero-bg:var(--tile-3)}
body.sec-account{--th-hero-bg:var(--tile-5)}

/* the hero is one big tile, inset from the edges */
.hero,.page-hero,.tools-hero,.grave-hero,body.beta .hero,body.beta .page-hero,body.beta .tools-hero,body.beta .grave-hero{
  margin:10px 12px 0!important;border-radius:32px!important;overflow:hidden}
@media(max-width:640px){.hero,.page-hero,.tools-hero,.grave-hero,body.beta .hero,body.beta .page-hero{margin:6px 8px 0!important;border-radius:24px!important}}
.hero .eyebrow,.page-hero .eyebrow,.tools-hero .eyebrow,.grave-hero .eyebrow{
  display:inline-flex!important;align-items:center;gap:8px;width:auto;max-width:max-content;align-self:flex-start;padding:6px 12px;border-radius:100px;
  background:var(--surface);font-size:12px;letter-spacing:.04em;text-transform:none;font-weight:700}
.hero h1 span.soft,.page-hero .page-h1 span,.hero .tools-h1 span{
  box-shadow:inset 0 -.26em 0 color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink)!important}
h1,.page-h1,.hero-grid h1{line-height:1!important}

/* catalog cards and categories are compartments of the box */
.gcard:nth-child(6n+1),.cat-card:nth-child(6n+1){background-color:var(--tile-1)!important}
.gcard:nth-child(6n+2),.cat-card:nth-child(6n+2){background-color:var(--tile-2)!important}
.gcard:nth-child(6n+3),.cat-card:nth-child(6n+3){background-color:var(--tile-3)!important}
.gcard:nth-child(6n+4),.cat-card:nth-child(6n+4){background-color:var(--tile-4)!important}
.gcard:nth-child(6n+5),.cat-card:nth-child(6n+5){background-color:var(--tile-5)!important}
.gcard:nth-child(6n+6),.cat-card:nth-child(6n+6){background-color:var(--tile-6)!important}
.tool-tile,body.beta .tool-tile{background-color:color-mix(in srgb,var(--tc,#888) 13%,var(--surface))!important}
.tools-sec{background:transparent!important;border:0!important}
.tools-sec::before{display:none}

/* nav: the current page is a filled pill, not an underline */
.nav > a:not(.btn){padding:8px 14px!important;border-radius:100px}
.nav a.active{background:var(--th-hero-bg)}
.nav a.active::after{display:none!important}
.badge,body.beta .badge{border:0!important}
.band-head h2::before{border-radius:4px!important}