:root {
  --bg: #f4ecdc; --card: #fffaf0; --ink: #2b2118; --muted: #7a6a58;
  --accent: #2f6f5e; --accent-ink: #fff; --warn: #a8431f; --line: #d9ccb4;
  --story: #fbf3e2; --blue: #2f5f9e; --red: #b23a2a;
  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22270%22%20viewBox%3D%220%200%20260%20270%22%3E%3Cg%20opacity%3D%220.09%22%3E%3Cg%20transform%3D%22translate%2830%2034%29%20rotate%28-14%29%20scale%280.085%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%232f6f5e%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28112%2030%29%20rotate%2818%29%22%3E%3Crect%20x%3D%22-10.0%22%20y%3D%22-10.0%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224.4%22%20fill%3D%22none%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2062%29%20rotate%2810%29%20scale%280.07%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23a8431f%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%20128%29%20rotate%28-10%29%22%3E%3Crect%20x%3D%22-9.0%22%20y%3D%22-9.0%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224.0%22%20fill%3D%22none%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28122%20118%29%20rotate%284%29%20scale%280.075%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%232b2118%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28206%20150%29%20rotate%2830%29%22%3E%3Crect%20x%3D%22-10.0%22%20y%3D%22-10.0%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224.4%22%20fill%3D%22none%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%232b2118%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2866%20206%29%20rotate%2820%29%20scale%280.08%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23a8431f%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20206%29%20rotate%28-22%29%22%3E%3Crect%20x%3D%22-9.0%22%20y%3D%22-9.0%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224.0%22%20fill%3D%22none%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%232b2118%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28226%20232%29%20rotate%28-8%29%20scale%280.065%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%232f6f5e%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2816%20250%29%20rotate%288%29%22%3E%3Crect%20x%3D%22-8.0%22%20y%3D%22-8.0%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.4%22%20fill%3D%22%232b2118%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #17140f; --card: #221d16; --ink: #efe5d3; --muted: #a8977f;
    --accent: #4fa58c; --accent-ink: #0c1512; --warn: #e07a52; --line: #3b3226;
    --story: #2a2318; --blue: #6f9fe0; --red: #e0705e; color-scheme: dark;
    --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22270%22%20viewBox%3D%220%200%20260%20270%22%3E%3Cg%20opacity%3D%220.07%22%3E%3Cg%20transform%3D%22translate%2830%2034%29%20rotate%28-14%29%20scale%280.085%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%234fa58c%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28112%2030%29%20rotate%2818%29%22%3E%3Crect%20x%3D%22-10.0%22%20y%3D%22-10.0%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224.4%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2062%29%20rotate%2810%29%20scale%280.07%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23e07a52%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%20128%29%20rotate%28-10%29%22%3E%3Crect%20x%3D%22-9.0%22%20y%3D%22-9.0%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224.0%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28122%20118%29%20rotate%284%29%20scale%280.075%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23efe5d3%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28206%20150%29%20rotate%2830%29%22%3E%3Crect%20x%3D%22-10.0%22%20y%3D%22-10.0%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224.4%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2866%20206%29%20rotate%2820%29%20scale%280.08%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23e07a52%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20206%29%20rotate%28-22%29%22%3E%3Crect%20x%3D%22-9.0%22%20y%3D%22-9.0%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224.0%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28226%20232%29%20rotate%28-8%29%20scale%280.065%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%234fa58c%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2816%20250%29%20rotate%288%29%22%3E%3Crect%20x%3D%22-8.0%22%20y%3D%22-8.0%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.4%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
}
:root[data-theme="dark"] { --bg: #17140f; --card: #221d16; --ink: #efe5d3; --muted: #a8977f;
  --accent: #4fa58c; --accent-ink: #0c1512; --warn: #e07a52; --line: #3b3226;
  --story: #2a2318; --blue: #6f9fe0; --red: #e0705e; color-scheme: dark;
    --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22270%22%20viewBox%3D%220%200%20260%20270%22%3E%3Cg%20opacity%3D%220.07%22%3E%3Cg%20transform%3D%22translate%2830%2034%29%20rotate%28-14%29%20scale%280.085%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%234fa58c%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28112%2030%29%20rotate%2818%29%22%3E%3Crect%20x%3D%22-10.0%22%20y%3D%22-10.0%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224.4%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2062%29%20rotate%2810%29%20scale%280.07%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23e07a52%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%20128%29%20rotate%28-10%29%22%3E%3Crect%20x%3D%22-9.0%22%20y%3D%22-9.0%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224.0%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28122%20118%29%20rotate%284%29%20scale%280.075%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23efe5d3%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28206%20150%29%20rotate%2830%29%22%3E%3Crect%20x%3D%22-10.0%22%20y%3D%22-10.0%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224.4%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-5.4%22%20cy%3D%22-5.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%221.8%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2866%20206%29%20rotate%2820%29%20scale%280.08%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%23e07a52%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20206%29%20rotate%28-22%29%22%3E%3Crect%20x%3D%22-9.0%22%20y%3D%22-9.0%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224.0%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%22-4.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%220.0%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%22-4.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%224.9%22%20r%3D%221.6%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28226%20232%29%20rotate%28-8%29%20scale%280.065%29%20translate%28-256%20-260%29%22%3E%3Cpath%20fill%3D%22%234fa58c%22%20d%3D%22M256%20170a30%2030%200%201%201%200%2060a30%2030%200%200%201%200-60Zm-30%2066c-24%200-46%208-49%2024c-3%2016%2014%2022%2034%2022l-8%2052c-2%2011%206%2016%2016%2016h22l15-34l15%2034h22c10%200%2018-5%2016-16l-8-52c20%200%2037-6%2034-22c-3-16-25-24-49-24Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2816%20250%29%20rotate%288%29%22%3E%3Crect%20x%3D%22-8.0%22%20y%3D%22-8.0%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22%23efe5d3%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%220.0%22%20r%3D%221.4%22%20fill%3D%22%23efe5d3%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.5 Georgia, "Times New Roman", serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%; }

header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); }
header .logo { font-size: 20px; margin: 0 8px 0 0; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; }
header .logo img { display: block; }
header .spacer { flex: 1; }
header button { padding: 8px 12px; }
header .tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.flag { display: inline-flex; width: 24px; height: 16px; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); vertical-align: middle; }
.flag svg { width: 100%; height: 100%; display: block; }
header .langpick { position: relative; display: inline-flex; }
header .langpick > button { line-height: 0; }
header .langmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: grid; gap: 4px;
  min-width: 170px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); }
header .langmenu button { display: flex; align-items: center; gap: 10px; text-align: left; border-color: transparent; }
header .langmenu button.on { border-color: var(--accent); }
header input.vol { width: 90px; accent-color: var(--accent); }
@media (max-width: 900px) { header input.vol { display: none; } }

/* celular */
@media (max-width: 640px) {
  body { font-size: 16px; }
  header { gap: 6px; padding: 8px 12px; }
  header .logo { font-size: 18px; margin: 0; }
  header .logo.in-game .name { display: none; }
  header .pill:not(.status) { display: none; }

  header .lbl { display: none; }
  header button { padding: 7px 10px; }
  main { padding: 12px; gap: 12px; }
  .card { padding: 14px; }
  h2 { font-size: 21px; }
  .nav button { flex: 1; }
  .phases div { font-size: 10px; padding: 5px 1px; }
  .wstep { font-size: 20px; }
  .wnav { position: sticky; bottom: 0; z-index: 1; background: var(--card); margin: 16px -14px -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px; }
}
.pill { font: 14px system-ui, sans-serif; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 99px; color: var(--muted); }

main { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid;
  grid-template-columns: 1fr 320px; gap: 16px; }
main.full { grid-template-columns: 1fr; max-width: 820px; }
@media (max-width: 820px) { main { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.card + .card { margin-top: 16px; }
h2 { margin: 0 0 8px; font-size: 24px; }
h3 { margin: 0 0 8px; font: 600 14px system-ui, sans-serif; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.lead { color: var(--muted); margin-top: 0; }
.meta { color: var(--muted); font: 14px system-ui, sans-serif; }
.big { font-size: 30px; font-weight: bold; }
.center { text-align: center; }
.prose p { margin: 0 0 10px; }

button { font: 15px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
/* link com cara de botão (ex.: doação) */
.btn { display: inline-block; font: 15px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.card.donate { margin-top: 16px; border-style: dashed; }

/* textura de fundo: meeples e dados espalhados (tokens --pattern por tema) */
body { background-image: var(--pattern); background-attachment: fixed; }
header { background: var(--bg); }
.btn.disabled { opacity: .5; cursor: not-allowed; }

/* estante: ordenação, filtros e etiquetas */
.shelf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0;
  padding: 10px 12px; border-radius: 10px; background: var(--bg); font: 14px system-ui, sans-serif; }
.shelf-tools .sort { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.shelf-tools select { font: 14px system-ui, sans-serif; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { font-size: 13px; padding: 5px 11px; border-radius: 99px; }
.chip-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.shelf-tools .mech { flex-basis: 100%; }
.shelf-tools .mech summary { color: var(--accent); margin-bottom: 6px; }
.shelf-tools .link { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 5px 4px; }
.gamecard .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 0; }
.gamecard .tag { font: 12px system-ui, sans-serif; padding: 2px 8px; border-radius: 99px; background: var(--bg);
  border: 1px solid var(--line); color: var(--muted); }
.gamecard .weight { font-size: 12px; letter-spacing: 1px; color: var(--accent); margin-right: 4px; }
.empty { margin: 16px 4px; color: var(--muted); }
@media (max-width: 640px) { .gamecard .tag.mech { display: none; } }

/* rodapé de créditos da estante */
.credits { margin-top: 28px; padding: 14px 16px; border-radius: 10px; background: var(--bg);
  font: 13px/1.5 system-ui, sans-serif; color: var(--muted); }
.credits h3 { margin: 0 0 6px; font-size: 12px; }
.credits ul { margin: 0 0 8px; padding-left: 18px; }
.credits p { margin: 0 0 4px; }
.credits a { color: var(--accent); }
button.warn { color: var(--warn); border-color: var(--warn); }
button.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
button:disabled { opacity: .45; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* apresentação acima da estante */
.hero { font-size: 16px; color: var(--muted); margin: 4px 0 18px; padding: 12px 16px; max-width: 70ch;
  border-radius: 10px; background: var(--bg); }

/* estante */
.shelf-head { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 10px 6px 4px;
  border-radius: 8px; background: var(--bg); }
.shelf-head h2 { margin: 0; font-size: 20px; }
.shelf-head .lead { margin: 0; font-size: 15px; }
.shelf { display: grid; gap: 16px; margin-top: 12px; }
.shelf .card + .card { margin-top: 0; }
.gamecard { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gamecard:hover, .gamecard:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
.gamecard:active { transform: scale(.99); }
.gamecard .badge { display: inline-block; font: 600 13px system-ui, sans-serif; padding: 4px 10px;
  border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.gamecard .cover { aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: var(--story); border: 1px solid var(--line); }
.gamecard .cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gamecard .cover .emoji { display: none; }
.gamecard .cover:not(.noimg) { background: none; border-color: transparent; }
.gamecard .cover.noimg { display: grid; place-items: center; }
.gamecard .cover.noimg .emoji { display: block; font-size: 72px; }
.gamecard h2 { margin-top: 2px; }
.gamecard .lead { margin-bottom: 6px; }
.gamecard .desc { margin: 0 0 8px; font-size: 16px; }

/* opções grandes */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.option { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; }
.option b { font-size: 17px; }
.option span:last-child { color: var(--muted); font-size: 14px; }

/* checklist */
ul.steps { list-style: none; padding: 0; margin: 12px 0; }
ul.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px;
  border-bottom: 1px dashed var(--line); cursor: pointer; }
ul.steps .box { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--accent);
  border-radius: 5px; display: grid; place-items: center; color: var(--accent-ink); font: bold 14px system-ui; }
ul.steps li.done .box { background: var(--accent); }
ul.steps li.done > div > div:first-child { text-decoration: line-through; color: var(--muted); }
.why { font-size: 15px; color: var(--muted); margin-top: 4px; }
.tipline { font-size: 15px; margin-top: 4px; color: var(--accent); }
.term { border-bottom: 1px dotted var(--accent); cursor: help; }
.lupa { font-size: .7em; margin-left: 2px; vertical-align: super; }

/* imagem de referência no glossário */
figure.ref { margin: 8px 0 12px; text-align: center; }
figure.ref img { max-width: 100%; max-height: 45vh; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
figure.ref.zoomed img { max-height: none; cursor: zoom-out; }
figure.ref figcaption { display: none; font: 14px system-ui; color: var(--muted); background: var(--bg);
  border: 1px dashed var(--line); border-radius: 8px; padding: 14px; }
figure.ref.missing img { display: none; }
figure.ref.missing figcaption { display: block; }
figure.ref code { word-break: break-all; }

/* passo a passo */
.wbar { display: flex; gap: 4px; margin: 4px 0 8px; }
.wbar .seg { flex: 1; height: 8px; border-radius: 99px; background: var(--line); cursor: pointer; transition: background .2s; }
.wbar .seg.done { background: var(--accent); }
.wbar .seg.on { background: var(--warn); }
.wstep { font-size: 22px; line-height: 1.45; margin: 4px 0 10px; min-height: 3em; }
.wizard .why, .wizard .tipline { font-size: 16px; }

.phases { display: flex; gap: 4px; margin: 0 0 14px; }
.phases div { flex: 1; text-align: center; font: 12px system-ui, sans-serif; padding: 6px 2px;
  border-radius: 6px; background: var(--bg); color: var(--muted); }
.phases div.past { opacity: .6; }
.phases div.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.story { background: var(--story); border-left: 4px solid var(--warn); padding: 14px 16px;
  border-radius: 6px; margin: 12px 0; font-style: italic; }
.story .effect { font-style: normal; font-family: system-ui, sans-serif; font-size: 15px;
  margin-top: 8px; color: var(--warn); }
.choices { display: grid; gap: 8px; margin-top: 10px; font-style: normal; }
.choices button { text-align: left; }
details { margin-top: 10px; font-size: 15px; }
summary { cursor: pointer; color: var(--accent); font-family: system-ui, sans-serif; }
.tip { font-size: 15px; background: var(--bg); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.tip p { margin: 0 0 6px; }

.log { font: 14px system-ui, sans-serif; max-height: 240px; overflow: auto; }
.log p { margin: 0 0 6px; }
label.opt { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 16px; cursor: pointer; }
label.opt input { width: 18px; height: 18px; accent-color: var(--accent); }

.pile { display: flex; flex-direction: column-reverse; gap: 4px; margin: 8px 0; }
.pile div { height: 14px; border-radius: 3px; background: var(--line); }
.pile div.full { background: #8b5a2b; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.chip { font: 600 14px system-ui; padding: 4px 10px; border-radius: 6px; color: #fff; }
.chip.azul { background: var(--blue); }
.chip.vermelha { background: var(--red); }

.field { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 16px; }
.field small { display: block; color: var(--muted); font-size: 13px; font-family: system-ui; }
.field input { width: 80px; font: inherit; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
table.totals { width: 100%; border-collapse: collapse; font: 15px system-ui; margin-top: 8px; }
table.totals td, table.totals th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; }
table.totals td:first-child, table.totals th:first-child { text-align: left; }

dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  max-width: min(560px, calc(100vw - 32px)); padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog dl { max-height: 60vh; overflow: auto; }
dialog dt { font-weight: bold; margin-top: 10px; }
dialog dd { margin: 2px 0 0; color: var(--muted); }
dialog h3 { margin-top: 8px; }

/* estante no celular (fica no fim para valer sobre as regras acima) */
@media (max-width: 640px) {
  .gamecard { grid-template-columns: 88px 1fr; gap: 12px; }
  .gamecard h2 { font-size: 19px; }
  .gamecard .lead { font-size: 15px; }
  .gamecard .desc { font-size: 14px; }
  .gamecard .cover.noimg .emoji { font-size: 40px; }
}