:root { color-scheme: light; --ink:#1c1915; --muted:#5c564c; --line:#e4dccf; --paper:#f7f3ec; --card:#fffdf8; --accent:#0f6e56; }
* { box-sizing: border-box; }
body { margin:0; font: 18px/1.5 Georgia, "Iowan Old Style", Palatino, serif; color:var(--ink); background:var(--paper); }
header, main, .wrap { max-width: 880px; margin: 0 auto; padding: 2.2rem 1.3rem 3rem; }
.mark { letter-spacing: .08em; text-transform: uppercase; font: 12px/1 ui-sans-serif, system-ui, sans-serif; color: var(--accent); margin: 0 0 .4rem; }
h1 { font-weight: 500; font-size: 2.4rem; line-height: 1.15; margin: 0 0 .6rem; }
h2 { font-weight: 500; font-size: 1.25rem; margin: 2rem 0 .8rem; }
.lead { color: var(--muted); max-width: 40rem; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.cards a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; color: inherit; text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards strong { display: block; font-size: 1.05rem; }
.cards span { display: block; color: var(--muted); font-size: .95rem; margin-top: .2rem; }
form { display: grid; gap: .7rem; margin: 1.2rem 0; }
label { display: grid; gap: .25rem; font: 14px/1.3 ui-sans-serif, system-ui, sans-serif; }
input, textarea { font: 16px/1.4 ui-sans-serif, system-ui, sans-serif; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
button { font: 15px/1 ui-sans-serif, system-ui, sans-serif; background: var(--accent); color: white; border: 0; border-radius: 8px; padding: .7rem 1rem; width: fit-content; cursor: pointer; }
pre, .out { white-space: pre-wrap; word-break: break-word; background: #1c1915; color: #f4efe6; padding: 1rem; border-radius: 10px; font: 13px/1.45 ui-monospace, monospace; }
.note { color: var(--muted); font-size: .95rem; }
a.ext { color: var(--accent); }
.error { color: #8a2b2b; }