:root { --bg: #2a1c15; --panel: #3d2a20; --cream: #fff3df; --muted: #d9c3a5; --orange: #e8743b; --teal: #2fa39b; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--cream); line-height: 1.6;
  background: radial-gradient(circle at 15% 0%, rgba(232,116,59,.25), transparent 45%), radial-gradient(circle at 85% 10%, rgba(47,163,155,.22), transparent 45%), var(--bg); }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
header { text-align: center; margin-bottom: 24px; }
header img { width: min(420px, 90%); height: auto; }
h1, h2 { line-height: 1.25; }
h1 { font-size: 1.9rem; margin: 8px 0; }
h2 { font-size: 1.3rem; margin-top: 32px; color: var(--cream); }
p, li { color: var(--muted); }
a { color: #ffd08a; }
.card { background: var(--panel); border-radius: 18px; padding: 20px 22px; margin: 16px 0; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role { border-radius: 14px; padding: 14px 16px; background: rgba(0,0,0,.18); border-left: 6px solid var(--orange); }
.role.serve { border-left-color: var(--teal); }
.role strong { color: var(--cream); display: block; }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--orange); color: var(--cream); font-weight: 600; text-decoration: none; }
footer { margin-top: 40px; font-size: .9rem; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } h1 { font-size: 1.5rem; } }