/* Shared styles for the hub-level pages (daily review, diagram library). Same tokens as index.html. */
:root{
  --page:#f4f6f3; --paper:#ffffff; --ink:#1c2624; --ink2:#5a6a65; --rule:#d9e2de; --grid:#e4ebe7; --head:#14302b;
  --accent:#2a7f6d; --accentInk:#fff; --accentSoft:#e3f1ec; --ok:#2a7648; --okSoft:#e2f2e7; --bad:#a53838; --badSoft:#f7e4e2; --warn:#a8690f;
  --m1:#3f8a4c; --m2:#5a5fc4; --m3:#11707b; --m4:#b0342c; --m5:#b07a12; --m6:#1f7a8c; --m7:#a3365a; --m8:#5f7f1f; --m9:#2b62a8; --m10:#c0612b; --m11:#7a3f8f; --mid:#3d4a5c;
  --display:"Source Serif 4", Georgia, serif; --sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page:#0f1715; --paper:#151f1c; --ink:#e3eeea; --ink2:#9fb4ad; --rule:#26352f; --grid:#1a2622; --head:#dcefe8; --accent:#5cc0a8; --accentInk:#0c1a16; --accentSoft:#1a2f29; --ok:#6cc394; --okSoft:#17311f; --bad:#e8908b; --badSoft:#3a1e1e; --warn:#e3b050;
  --m1:#6cc07a; --m2:#9a9ef0; --m3:#4db2be; --m4:#ec8b80; --m5:#e3b050; --m6:#6fb9c7; --m7:#e08aa6; --m8:#a9c46a; --m9:#86aee6; --m10:#eba277; --m11:#c497d6; --mid:#a9b6c8; } }
:root[data-theme="dark"]{ --page:#0f1715; --paper:#151f1c; --ink:#e3eeea; --ink2:#9fb4ad; --rule:#26352f; --grid:#1a2622; --head:#dcefe8; --accent:#5cc0a8; --accentInk:#0c1a16; --accentSoft:#1a2f29; --ok:#6cc394; --okSoft:#17311f; --bad:#e8908b; --badSoft:#3a1e1e; --warn:#e3b050;
  --m1:#6cc07a; --m2:#9a9ef0; --m3:#4db2be; --m4:#ec8b80; --m5:#e3b050; --m6:#6fb9c7; --m7:#e08aa6; --m8:#a9c46a; --m9:#86aee6; --m10:#eba277; --m11:#c497d6; --mid:#a9b6c8; }
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);color:var(--head);font-weight:600;line-height:1.15;margin:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.muted{color:var(--ink2)} .small{font-size:.88rem}
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--page) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:56px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--head);font-family:var(--display);font-weight:600;font-size:1.15rem}
.logo svg{flex:none}
.nav nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.nav nav a,.nav nav button{color:var(--ink2);text-decoration:none;font-weight:600;padding:6px 12px;border-radius:6px;font-size:.95rem;background:none;border:0;cursor:pointer;font-family:inherit}
.nav nav a:hover,.nav nav button:hover,.nav nav a[aria-current="page"]{color:var(--head);background:var(--accentSoft)}
.hero{position:relative;padding:34px 0 22px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;border-bottom:1px solid var(--rule)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--page));pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{max-width:44em;margin:10px 0 0;font-size:1.06rem}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:8px;background:var(--accent);color:var(--accentInk);font-weight:700;text-decoration:none;border:1.5px solid var(--accent);font-size:1rem;cursor:pointer;font-family:inherit}
.btn.ghost{background:var(--paper);color:var(--accent)}
.btn:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.counts{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.counts span{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.counts b{display:block;font-family:var(--display);font-size:1.7rem;color:var(--head);font-weight:600;letter-spacing:0;text-transform:none}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:18px 20px}
.plate{margin:0;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:12px 12px 8px;box-shadow:0 1px 0 var(--rule),0 18px 40px -26px rgba(20,48,43,.35)}
.plate svg{display:block;width:100%;height:auto;max-height:70vh}
.plate figcaption{font-family:var(--display);font-size:.92rem;color:#4b5b56;margin-top:6px;line-height:1.4}
.plate figcaption b{color:#14302b;font-weight:600}
.pill{display:inline-block;font:500 .7rem var(--mono);letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:3px 7px;background:color-mix(in srgb,var(--c,var(--accent)) 12%,var(--paper));color:var(--c,var(--accent))}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 12px;font:600 .88rem var(--sans);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 12%,var(--paper));color:var(--head)}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent));display:inline-block}
.sec{padding:26px 0}
.sec h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.foot{margin:40px auto 0;padding:20px 20px 130px;border-top:1px solid var(--rule);color:var(--ink2);font-size:.86rem}
@media (max-width:600px){ .wrap{padding:0 16px} .nav nav a,.nav nav button{padding:6px 7px;font-size:.88rem} .logo span{display:none} body{font-size:16px} }