/* Shared by index.html and guide.html (guide spec, docs/superpowers/specs/2026-10-13-tillage-guide-design.md,
   section 2.1): the fonts, the dark hero's tokens (:root), the paper sections' tokens (.paper),
   the base rules and the buttons. Change a token here, and both pages follow. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Martian+Mono:wdth,wght@75..112.5,300..700&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&display=swap");
:root{
  --night:#0b0a08; --panel:#110e0b; --card:#1b1713;
  --ink:#efe7d8; --ink-2:#c0b5a3; --ink-3:#8b8171; --ink-4:#5f584d;
  --rule:rgba(239,231,216,.1); --rule-2:rgba(239,231,216,.2); --ink-rgb:239 231 216;
  --grid:transparent; --lift:0 30px 60px -32px rgb(0 0 0 / .7);
  --sun:#f2b544; --sun-2:#fcd383; --on-sun:#1d1405;
  --p1:#a9bb88; --p2:#8fa7bb; --p3:#ae9dc8; --p4:#d29a72; --clay:#de855e;
  /* Tillage's node colours, dark variants: proposition, approach, feature, question, guidance */
  --b:#a3ade6; --b-soft:#1b1f33; --c:#a2b8c9; --c-soft:#172027; --e:#4fb8a8; --e-soft:#11272a;
  --d:#e0a24a; --d-soft:#2a2114; --gd:#b3a6de; --gd-soft:#221e2e;
  /* work states */
  --agent:#f27ba0; --agent-soft:rgba(242,123,160,.13); --on-agent:#2b0a16;
  --wait:#e3a447; --wait-soft:rgba(227,164,71,.13);
  --good:#6cc8a4; --good-soft:rgba(108,200,164,.13);
  --bad:#e5806f;
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,0,0,1);
  color-scheme:dark;
}
/* Below the hero the page turns to paper. Node colours and inks are the app's own light tokens
   (src/canvas/typed/typedCanvas.css); the same rules read on either ground. */
.paper{
  --night:#f4f2eb; --panel:#faf9f4; --card:#fffefa;
  --ink:#2a2c2a; --ink-2:#4b4d48; --ink-3:#696b65; --ink-4:#a3a298; --ink-rgb:42 44 42;
  --rule:rgb(42 44 42 / .1); --rule-2:rgb(42 44 42 / .18); --grid:rgb(42 44 42 / .055);
  --lift:0 1px 2px rgb(44 44 39 / .05),0 22px 44px -26px rgb(44 44 39 / .28);
  --b:#56629f; --b-soft:#eef0f8; --c:#5d7689; --c-soft:#eef2f4; --e:#177065; --e-soft:#e7f1ee;
  --d:#b0731a; --d-soft:#fbf3e2; --gd:#6b5f8e; --gd-soft:#efecf5;
  --agent:#b5325f; --agent-soft:rgb(181 50 95 / .1); --on-agent:#fff;
  --wait:#8f590a; --wait-soft:rgb(209 139 31 / .14);
  --good:#27705c; --good-soft:rgb(39 112 92 / .12);
  --bad:#ad463e;
  background:var(--night); color:var(--ink); color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--f-ui);font-size:1rem;line-height:1.6}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:4px}
::selection{background:rgba(242,181,68,.35)}
p,li,dd{text-wrap:pretty}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4.5vw,64px)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--f-mono);font-stretch:87.5%;font-weight:500;font-size:.64rem;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:48px;padding-inline:22px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--f-ui);font-stretch:106%;font-weight:620;font-size:.93rem;line-height:1;
  transition-property:scale,background-color,box-shadow,color;transition-duration:.15s;transition-timing-function:ease-out}
.btn:active{scale:.96}
.btn-sun{background:var(--sun);color:var(--on-sun)}
.btn-sun:hover{background:#f6c76a}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn-sm{height:40px;padding-inline:16px;font-size:.86rem}