:root { --bg: #FBF5F2; --surface: #FFFFFF; --ink: #2A2030; --muted: #8C7A82; --rose: #B85A78; --warn: #F8E8CC; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Jost", system-ui, sans-serif; line-height: 1.6;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
main { max-width: 680px; margin: 0 auto; background: var(--surface); border: 1px solid #C9956B; outline: 1px solid #C9956B; outline-offset: 5px; box-shadow: 10px 10px 0 #F6D9DF; padding: 24px 20px; }
h1 { font-family: "Bodoni Moda", Georgia, serif; font-size: 2.2rem; line-height: 1.1; margin: 0 0 6px; }
h2 { font-family: "Bodoni Moda", Georgia, serif; font-size: 1.3rem; margin: 26px 0 6px; }
p, li { max-width: 65ch; }
.meta { color: var(--muted); margin: 0 0 18px; }
.note { background: var(--warn); border: 1.5px dashed var(--ink); padding: 10px 12px; font-size: .92rem; }
a { color: var(--rose); }
.back { display: inline-block; margin-bottom: 16px; color: var(--rose); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; text-decoration: none; }
mark { background: #FFF1C9; color: inherit; padding: 0 3px; font-weight: 600; }