:root { --paper: #f2f4f9; --card: #fff; --ink: #1b1b1b; --ink-soft: #555b66; --accent: #ffcf33; --coral: #e8508f; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.05rem/1.6 "DM Sans", "Helvetica Neue", Arial, sans-serif; padding: 0 16px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 40px 0 80px; }
a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.back { display: inline-block; margin-bottom: 40px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.back:hover { text-decoration: underline; text-decoration-color: var(--coral); }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 32px; font-weight: 600; }
h2 { font-size: 1.2rem; margin: 32px 0 8px; font-weight: 600; }
p, ul, dl { margin: 0 0 12px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; }
dt { color: var(--ink-soft); }
dd { margin: 0; }
mark { background: var(--accent); padding: 0 4px; }
.note { font-size: .9rem; color: var(--ink-soft); margin-top: 40px; }
@media (max-width: 520px) { dl { grid-template-columns: 1fr; } dd { margin-bottom: 8px; } }
h3 { font-size: 1.02rem; margin: 20px 0 6px; font-weight: 600; }