/* Mirror of /web/legal.css + /web/blog.css so these pages also preview on their own. Safe to delete once deployed. */
:root { --bg:#fdf9f2; --text:#3b2619; --muted:#7a6556; --line:#efe5d4; --accent:#6d50b5; }
@media (prefers-color-scheme: dark) { :root { --bg:#1c1c1f; --text:#ecebe6; --muted:#a3a19a; --line:#35353b; --accent:#c5b1f2; } }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.7 "DM Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
main { max-width:720px; margin:0 auto; padding:40px 24px 80px; }
header a { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:600 18px "Fraunces", Georgia, serif; }
h1 { font:600 36px/1.2 "Fraunces", Georgia, serif; margin:36px 0 6px; }
h2 { font-size:19px; margin:32px 0 6px; }
a { color:var(--accent); }
.site-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-head nav { display:flex; align-items:center; gap:18px; font-size:15px; }
.site-head nav a { color:var(--text); text-decoration:none; font:500 15px "DM Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
.site-head nav a.try { color:var(--bg); background:var(--accent); padding:7px 16px; border-radius:999px; font-weight:600; }
.lead { font-size:18px; }
.meta { color:var(--muted); font-size:14.5px; margin:0 0 28px; }
kbd { font:13px ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; background:color-mix(in srgb, var(--line) 35%, transparent); }
.tip { border-left:3px solid var(--accent); padding:4px 0 4px 16px; margin:22px 0; }
.cta { display:inline-block; margin:8px 0 4px; padding:12px 22px; border-radius:999px; background:var(--accent); color:var(--bg); font-weight:600; text-decoration:none; }
.next { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.site-foot { margin-top:56px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
.site-foot a { color:var(--muted); }

/* What's-new posts: figures, videos and step lists. Builds on /web/legal.css + /web/blog.css. */
.badge-new { display:inline-block; font:600 12px/1 "DM Sans", ui-sans-serif, sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:999px; padding:5px 10px; margin-top:36px; }
.badge-new + h1 { margin-top:14px; }
figure.shot { margin:22px 0 26px; }
figure.shot img, figure.shot video { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 8px rgba(40,35,25,.06), 0 1px 2px rgba(40,35,25,.04); background:#fff; }
figure.shot.narrow img { max-width:340px; }
figure.shot figcaption { color:var(--muted); font-size:14px; margin-top:8px; }
figure.hero-video { margin:8px 0 30px; }
.steps { counter-reset:step; list-style:none; padding:0; margin:14px 0; }
.steps > li { counter-increment:step; position:relative; padding-left:40px; margin:0 0 12px; }
.steps > li::before { content:counter(step); position:absolute; left:0; top:2px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--bg); font:600 13px/1 "DM Sans", ui-sans-serif, sans-serif; }
pre.cmd { overflow-x:auto; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--line) 35%, transparent); font:13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
code { font:0.9em ui-monospace, SFMono-Regular, Menlo, monospace; }
.tabs-note { display:grid; gap:10px; margin:16px 0; }
.tabs-note details { border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.tabs-note summary { cursor:pointer; font-weight:600; }
.tabs-note details[open] summary { margin-bottom:6px; }
.chat { border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:10px; margin:18px 0; }
.chat .you, .chat .ai { max-width:85%; padding:10px 14px; border-radius:14px; font-size:15px; }
.chat .you { justify-self:end; background:color-mix(in srgb, var(--accent) 14%, transparent); }
.chat .ai { justify-self:start; border:1px solid var(--line); }
.chat .tool { font-size:13px; color:var(--muted); }
.chat-label { color:var(--muted); font-size:13px; margin:-4px 0 0; }
.tpl-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 18px; padding:0; list-style:none; }
@media (max-width:520px) { .tpl-grid { grid-template-columns:1fr; } }