:root { --maxw: 780px; }
* { box-sizing: border-box; }

/* Base styles */
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.6; background: #fafafa;  color: #111;
}

.wrapper { max-width: var(--maxw); margin: 6vh auto; padding: 24px; }

header { display:flex; justify-content: space-between; align-items: center };

header h1 { margin: 0 0 4px; font-size: 2rem; }
header p { margin: 0; color: #555; }


/* Layout classes */
.list { display: grid; gap: 14px; margin-top: 20px; }
.grid { display: grid; gap: 16px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Inner layout styles */
.card { border: 2px solid #e2e2e2; border-radius: 12px; padding: 16px; background: #fff; transition: border-color .15s ease, transform .08s ease; }
.card a { color: inherit; text-decoration: none; display: block; }
.card h2 { font-size: 1.125rem; margin: 0 0 6px; }
.card p { margin: 0; color: #444; font-size: .95rem; }
.card .label { font-weight:600; display:block; margin-bottom:6px; }
.card-hover:hover { border-color: #888; transform: translateY(-1px); }
.card ul { padding-inline-start: 20px; }

/* Specific elements */
.links { display:flex; align-items:center; gap:12px; flex-wrap: wrap; }
.pill { border:1px solid #cfcfcf; border-radius:999px; padding:8px 12px; text-decoration:none; }
.pill:hover { border-color:#888; }

.back { display:inline-block; margin-top:24px; padding:8px 14px; border:1px solid #ccc; border-radius:8px; background:#fff; text-decoration:none; color:#333; }
.back:hover { background:#f3f3f3; }

code { background:#f3f3f3; padding:2px 6px; border-radius:6px; }

.literature a { color: #2e7d32; display: inline; }
.literature a:hover { color: #1b5e20; }