:root { --bg: #fdf6e3; --card: #fffdf6; --ink: #3b2a17; --muted: #7a6a52; --green: #2f6b3a; --line: #e2d3b0; }
@media (prefers-color-scheme: dark) { :root { --bg: #1c1a15; --card: #26231c; --ink: #f1e8d4; --muted: #b7a98c; --green: #8fd19a; --line: #4a4232; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; }
main { max-width: 780px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { color: var(--green); font-size: 30px; margin: 14px 0 4px; line-height: 1.25; }
h2 { color: var(--green); font-size: 21px; margin: 28px 0 8px; }
.meta { color: var(--muted); font-size: 15px; margin-top: 0; }
a { color: var(--green); }
.back { display: inline-block; margin: 6px 0; padding: 8px 14px; border: 2px solid var(--green); border-radius: 12px; text-decoration: none; font-weight: 700; }
ul { padding-left: 22px; } li { margin: 4px 0; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--green); }
@media (max-width: 520px) { table, tr, td, th { display: block; } th { display: none; } td:first-child { font-weight: 700; padding-bottom: 0; border: 0; } }