/* Flour — shared shell for the reading pages. Same tokens as the launcher;
   these pages scroll, the launcher does not. */
:root{
  --u:8px; --u2:16px; --u3:24px; --u4:32px; --u6:48px; --u8:64px;
  --bg:#FFFFFF; --s1:#FAFAF9; --s2:#F4F3F1; --surface:#FAFAF9; --surface-2:#F4F3F1;
  --line:rgba(22,21,26,.09); --line2:rgba(22,21,26,.16); --line-2:rgba(22,21,26,.16);
  --ink:#16151A; --ink2:#63626B; --ink3:#9A99A1; --ink-2:#63626B; --ink-3:#9A99A1;
  --accent:#CE8129; --amber:#CE8129; --blue:#1B6FE0;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(18px,3.2vw,44px);
  --ease:cubic-bezier(.32,.72,0,1); --t:200ms;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.62; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; }
body{ padding:0 calc(var(--pad) + env(safe-area-inset-left)) calc(var(--u8) + env(safe-area-inset-bottom))
      calc(var(--pad) + env(safe-area-inset-right)); }
body::before{
  content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 40% at 20% 20%, rgba(206,129,41,.06), transparent 70%),
    radial-gradient(32% 34% at 82% 78%, rgba(90,128,162,.045), transparent 70%);
  animation:wash 54s var(--ease) infinite alternate;
}
@keyframes wash{
  from{ transform:translate3d(-1.4%,-1%,0) scale(1); }
  to  { transform:translate3d(1.6%,1.4%,0) scale(1.07); }
}

.wrap{ width:min(68ch,100%); margin:0 auto; }

header.top{ display:flex; align-items:center; justify-content:space-between; gap:var(--u2);
  height:56px; margin-bottom:var(--u8); position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--bg) 62%, rgba(255,255,255,0)); }
.lockup{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.lockup svg{ width:26px; height:26px; }
.lockup .name{ font-size:17px; font-weight:590; letter-spacing:-.025em; }
.top .right{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); }
.dot{ width:9px; height:9px; border-radius:50%; border:1.6px solid var(--ink-3); display:inline-block; }
.dot.on{ background:var(--accent); border-color:var(--accent); }

h1{ font-size:clamp(30px,4.4vw,42px); font-weight:640; letter-spacing:-.035em; line-height:1.1;
  margin:0 0 var(--u2); }
h2{ font-size:19px; font-weight:620; letter-spacing:-.025em; margin:var(--u8) 0 var(--u2); }
h3{ font-size:16px; font-weight:600; margin:var(--u3) 0 var(--u); }
p{ margin:0 0 var(--u2); }
ul,ol{ padding-left:22px; margin:0 0 var(--u2); }
li{ margin:0 0 6px; }
a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--u8) 0; }
.lede{ color:var(--ink-2); font-size:18px; line-height:1.55; }
.card{ border:1px solid var(--line); border-radius:16px; padding:var(--u3); background:var(--surface);
  margin:var(--u3) 0; }
.card p:last-child{ margin:0; }
table{ border-collapse:collapse; width:100%; font-size:14px; margin:0 0 var(--u2); }
th,td{ border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
th{ font-weight:600; color:var(--ink-2); border-bottom-color:var(--line-2); }
code{ font-family:var(--mono); font-size:.88em; background:var(--surface-2); border-radius:5px; padding:1px 5px; }
pre{ font-family:var(--mono); font-size:.86em; background:var(--surface-2); border-radius:12px;
  padding:14px 16px; overflow-x:auto; }
blockquote{ margin:0 0 var(--u2); padding-left:14px; border-left:2px solid var(--line-2); color:var(--ink-2); }

.btn{ height:38px; padding:0 14px; border-radius:10px; border:0; background:var(--surface-2);
  color:var(--ink-2); font:inherit; font-size:14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; transition:background var(--t) var(--ease), color var(--t) var(--ease); }
@media (hover:hover){ .btn:hover{ background:#EAEAE7; color:var(--ink); } }
.btn:active{ transform:scale(.97); }
.btn.go{ background:var(--ink); color:#fff; }
.row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

footer.bot{ border-top:1px solid var(--line); margin-top:var(--u8); padding-top:var(--u3);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:11.5px; }
footer.bot a{ color:inherit; text-decoration:none; }
@media (hover:hover){ footer.bot a:hover{ color:var(--ink-2); } }
.sig{ display:inline-flex; align-items:center; gap:6px; }
.bluedot{ width:7px; height:7px; border-radius:50%; background:var(--blue); display:inline-block; }

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

/* the bench's own tokens, so shared pages can reuse its components */
:root{ --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; }
.btn.go{ background:var(--ink); color:#fff; border:0; }
.note{ font-size:13px; color:var(--ink3); line-height:1.55; }