/* SPDX-License-Identifier: MIT */
:root { color-scheme: light dark; --bg:#FBF7F2; --fg:#2B1D14; --accent:#7A4A1E; --accent-fg:#fff; --card:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#1C1410; --fg:#EFE6DC; --accent:#E0B07A; --accent-fg:#1C1410; --card:#2A1F18; } }
* { box-sizing: border-box; }
body { margin:0; font-family: "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--fg); }
.top { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; }
.logo { height:56px; }
.logo-dark { display:none; }
@media (prefers-color-scheme: dark) { .logo-light { display:none; } .logo-dark { display:inline; } }
button { background:var(--accent); color:var(--accent-fg); border:0; border-radius:.75rem; padding:10px 20px; font-size:1rem; cursor:pointer; }
main { max-width:860px; margin:0 auto; padding:24px 32px; display:grid; gap:24px; }
section, aside { background:var(--card); border-radius:1rem; padding:24px 28px; }
dt { opacity:.7; font-size:.85rem; margin-top:10px; } dd { margin:0; font-size:1.05rem; }
code { background:rgba(127,127,127,.15); padding:2px 6px; border-radius:6px; }
footer { text-align:center; opacity:.6; padding:32px; font-size:.85rem; }
nav { display:flex; align-items:center; gap:20px; }
nav a { color:var(--fg); }
.user-code { font-size:2.5rem; font-weight:bold; letter-spacing:.1em; font-family:monospace; margin:16px 0; }
.muted { opacity:.7; font-size:.9rem; }

/* Flow gallery */
.intro { background:none; padding:0 0 8px; }
.profile-banner { background:var(--card); border-radius:1rem; padding:12px 20px; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; }
.tabs button { background:transparent; color:var(--fg); border:1px solid var(--accent); opacity:.6; padding:8px 14px; font-size:.9rem; border-radius:999px; }
.tabs button[aria-selected="true"] { background:var(--accent); color:var(--accent-fg); opacity:1; }
.panel form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:16px 0; }
.panel label { display:block; font-size:.85rem; opacity:.7; margin-bottom:4px; }
.panel input { padding:8px 10px; border-radius:.5rem; border:1px solid rgba(127,127,127,.4); font-size:1rem; background:var(--card); color:var(--fg); }
.panel details { margin-top:16px; }
.panel summary { cursor:pointer; font-weight:bold; }
.panel pre { overflow-x:auto; background:rgba(127,127,127,.1); padding:12px 16px; border-radius:.75rem; font-size:.82rem; line-height:1.5; }