:root {
  --bg: #EEF1F7; --card: #FFFFFF; --field: #F4F6FA; --ink: #1B1E2B; --ink2: #3A3F52; --muted: #6B7185; --soft: #8A90A2;
  --line: #E1E6EF; --brand: #3B82F0; --brand-l: #EAF2FE; --warn: #B96F0B; --warn-bg: #FFF1DE;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Outfit', system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); display: flex; align-items: center; justify-content: center; }
.logo i::after { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid #fff; }
.logo b { font-weight: 700; font-size: 19px; }
.card { background: var(--card); border-radius: 24px; padding: 32px; }
h1 { font-size: 28px; letter-spacing: -.5px; margin: 0 0 6px; }
.updated { color: var(--soft); font-size: 14px; margin: 0 0 20px; }
.draft { background: var(--warn-bg); color: var(--warn); border-radius: 14px; padding: 14px 16px; font-size: 14px; margin-bottom: 28px; line-height: 1.5; }
.draft b { display: block; margin-bottom: 2px; }
h2 { font-size: 18px; margin: 28px 0 8px; }
p, li { font-size: 15px; color: var(--ink2); }
ul { padding-left: 20px; }
.placeholder { background: var(--field); padding: 1px 4px; border-radius: 4px; font-family: monospace; font-size: 13px; }
.back { display: inline-block; margin-top: 28px; font-size: 14px; }