/* Functional placeholder styles; real design comes later. */
:root { color-scheme: light dark; --mark: #fff3a3; --mark-text: #3d3300; }
@media (prefers-color-scheme: dark) { :root { --mark: #5c4d00; --mark-text: #fff6c2; } }
body { margin: 0; background: Canvas; color: CanvasText; font: 1rem/1.55 system-ui, sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 16px; overflow-wrap: break-word; }
h1 { font-size: 1.6rem; line-height: 1.25; }
h2 { font-size: 1.2rem; margin-top: 2rem; }
table { display: block; overflow-x: auto; border-collapse: collapse; }
th, td { border: 1px solid GrayText; padding: 6px 8px; text-align: left; vertical-align: top; }
mark.placeholder { background: var(--mark); color: var(--mark-text); padding: 0 2px; }
.notice { border-left: 4px solid GrayText; padding-left: 12px; }
.code { font: 700 2.4rem/1.2 ui-monospace, monospace; letter-spacing: 0.15em; }
.button { display: inline-block; padding: 12px 20px; border: 2px solid currentColor; border-radius: 8px; font-weight: 600; text-decoration: none; }