:root{
  --paper: #FBF3F0;
  --panel: #FFFBF9;
  --ink: #311847;
  --ink-soft: #6B5877;
  --rule: #E3D3DC;
  --succeeded: #A01A7D;
  --accent-hover: #A01A7D;
  --bronze: #E09F7D;
  --pink: #EF5D60;
  --magenta: #EC4067;
  --plum: #A01A7D;
  --amethyst: #311847;
  --warning: #A66A1E;
  --failed: #9E3B32;
}
[data-theme="dark"]{
  --paper: #1C1024;
  --panel: #241531;
  --ink: #F3E9EF;
  --ink-soft: #C9AFC0;
  --rule: #4A2F5E;
  --succeeded: #F1728C;
  --accent-hover: #EF5D60;
  --warning: #E0A455;
  --failed: #E2564A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #1C1024;
    --panel: #241531;
    --ink: #F3E9EF;
    --ink-soft: #C9AFC0;
    --rule: #4A2F5E;
    --succeeded: #F1728C;
    --accent-hover: #EF5D60;
    --warning: #E0A455;
    --failed: #E2564A;
  }
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  width:100%;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--succeeded);
  outline-offset:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;z-index:100;
  font-family:'JetBrains Mono',monospace;font-size:0.85rem;
  text-decoration:none;
}
.skip-link:focus{left:12px;top:12px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.mermaid-toggle{margin-top:22px;border-top:1px dashed var(--rule);padding-top:16px;}
.mermaid-toggle summary{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;color:var(--succeeded);
  cursor:pointer;
}
.mermaid-code{
  margin-top:12px;
  background:#1A1A17;
  color:#E8E6D8;
  padding:14px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  line-height:1.6;
  overflow-x:auto;
  white-space:pre;
}
.copy-btn{
  margin-top:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  background:none;
  border:1px solid var(--ink);
  color:var(--ink);
  padding:8px 14px;
  cursor:pointer;
}
.copy-btn:hover{background:var(--ink);color:var(--paper);}

.expr-tool{
  border:1px solid var(--rule);
  padding:32px;
  background:var(--panel);
  max-width:720px;
}
.expr-field{margin-bottom:20px;}
.expr-field label, .expr-output label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:8px;
}
.expr-field select{
  width:100%;
  padding:12px;
  font-family:'Source Serif 4',serif;
  font-size:1rem;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
}
.expr-inputs{
  display:grid;
  gap:16px;
  margin-bottom:24px;
}
.expr-inputs .expr-row label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.expr-inputs .expr-row input{
  width:100%;
  padding:10px 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.9rem;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink);
}
.expr-note{
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-soft);
  max-width:520px;
}

.filter-rows{display:grid;gap:12px;margin:20px 0;}
.filter-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:8px;
  align-items:center;
}
.filter-row input, .filter-row select{
  padding:9px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink);
}
.filter-row .remove-row{
  background:none;
  border:1px solid var(--rule);
  color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  padding:8px 10px;
  cursor:pointer;
}
.filter-row .remove-row:hover{border-color:#9E3B32;color:#9E3B32;}
@media(max-width:640px){
  .filter-row{grid-template-columns:1fr;}
}

nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 56px;
  border-bottom:1px solid var(--rule);
  gap:16px;
  flex-wrap:wrap;
}
.brand{
  font-family:'JetBrains Mono',monospace;
  font-size:1rem;font-weight:600;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.brand .dot{color:var(--succeeded);}
nav ul{display:flex;gap:34px;list-style:none;}
nav ul li a{
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;text-decoration:none;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:0.06em;
}
nav ul li a:hover{color:var(--ink);}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
}
@media(max-width:680px){
  .nav-toggle{display:flex;}
  nav{flex-wrap:nowrap;}
  #nav-links{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    width:100%;
    position:absolute;
    top:100%;
    left:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:20px 22px;
    z-index:50;
  }
  #nav-links.open{display:flex;}
  nav{position:relative;}
}
.theme-toggle{
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  color:var(--ink-soft);
  background:none;
  border:1px solid var(--rule);
  padding:6px 12px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-soft);}
body{transition:background-color .15s ease, color .15s ease;}
@media (prefers-reduced-motion: reduce){ body{transition:none;} }

.hero{
  padding:56px 56px 0;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.hero-text{padding-top:14px;}
.status-line{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-bottom:26px;
  display:flex;align-items:center;gap:8px;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--succeeded);
  display:inline-block;
}
h1{
  font-weight:500;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.18;
  max-width:760px;
  letter-spacing:-0.01em;
}
h1 .accent{color:var(--magenta, #EC4067);font-style:italic;}
.hero p.sub{
  margin-top:24px;
  max-width:440px;
  font-size:1.06rem;
  color:var(--ink-soft);
}
.hero-ctas{
  margin-top:36px;
  display:flex;gap:14px;flex-wrap:wrap;
}
.btn{
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem;font-weight:500;
  padding:12px 22px;
  text-decoration:none;
  display:inline-block;
  letter-spacing:0.02em;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--succeeded);}
.btn-secondary{border:1px solid var(--ink);color:var(--ink);}
.btn-secondary:hover{border-color:var(--ink-soft);color:var(--ink-soft);}

/* Signature: real flowchart diagram narrated below */
.flowchart{
  border:1px solid var(--rule);
  padding:32px 26px;
  background:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:24px 24px;
  background-color: var(--panel);
  margin-top:6px;
}
.fc-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:24px;
}
svg{overflow:visible;display:block;max-width:100%;}
.fc-node-text{font-family:'JetBrains Mono',monospace;font-size:12px;fill:var(--ink);}
.fc-connector{stroke:var(--ink-soft);stroke-width:1.2;fill:none;}
.narration{
  margin-top:30px;
  padding-top:26px;
  border-top:1px dashed var(--rule);
  font-size:1.05rem;
  max-width:680px;
}
.narration .mark{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--succeeded);
  display:block;margin-bottom:8px;
}

section{padding:72px 56px;border-bottom:1px solid var(--rule);}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:40px;flex-wrap:wrap;gap:12px;
}
.section-head .num{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;color:var(--ink-soft);
}
.section-head h2{
  font-weight:500;font-size:1.7rem;margin-top:6px;
}
.section-head p{color:var(--ink-soft);font-size:0.92rem;max-width:380px;font-family:'JetBrains Mono',monospace;line-height:1.5;}

.manifest{border-top:1px solid var(--rule);}
.mrow{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
}
.mnum{
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:var(--ink-soft);
  padding-top:4px;
}
.mbody h3{
  font-weight:500;font-size:1.2rem;margin-bottom:8px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.mbody .mtag{
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;color:var(--succeeded);
  text-transform:uppercase;letter-spacing:0.05em;
  font-weight:400;
}
.mbody p{color:var(--ink-soft);font-size:0.94rem;max-width:520px;}

.credentials{
  display:flex;gap:56px;flex-wrap:wrap;align-items:center;
}
.credentials .credtext{flex:1;min-width:280px;}
.credentials h2{font-weight:500;font-size:1.5rem;margin-bottom:14px;}
.credentials p{color:var(--ink-soft);max-width:460px;}
.badges{display:flex;gap:14px;flex-wrap:wrap;}
.badge{
  border:1px solid var(--ink);
  padding:14px 18px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  min-width:140px;
}
.badge .num{font-size:1.2rem;font-weight:600;display:block;margin-bottom:4px;color:var(--succeeded);}

.posts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);
}
.post{background:var(--paper);padding:24px;display:block;text-decoration:none;color:inherit;}
.post .meta{
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:0.05em;
  margin-bottom:12px;
}
.post h3{font-weight:500;font-size:1.08rem;margin-bottom:8px;line-height:1.35;color:var(--ink);}
.post p{color:var(--ink-soft);font-size:0.88rem;}
.post-live{cursor:pointer;transition:background .15s;}
.post-live:hover{background:var(--panel);}
.post-live .meta{color:var(--succeeded);}
.post-soon{opacity:0.55;}

footer{
  padding:34px 56px;
  display:flex;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;color:var(--ink-soft);
  flex-wrap:wrap;gap:10px;
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:44px;}
}
@media(max-width:640px){
  nav, section, footer{padding-left:22px;padding-right:22px;}
  .hero{padding-left:22px;padding-right:22px;}
  nav ul{gap:18px;}
  .flowchart{padding:28px 18px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}

/* Per-tool pages */
.breadcrumb{
  font-family:'JetBrains Mono',monospace;font-size:0.75rem;
  color:var(--ink-soft);margin-bottom:18px;
}
.breadcrumb a{color:inherit;}
.tool-guide{max-width:680px;}
.tool-guide h2{font-weight:500;font-size:1.5rem;margin-bottom:16px;}
.tool-guide p, .tool-guide li{color:var(--ink-soft);margin-bottom:14px;}
.tool-guide ol{padding-left:22px;margin-bottom:14px;}
.tool-guide code{font-family:'JetBrains Mono',monospace;font-size:0.85em;color:var(--ink);}