html.record-open { overflow: hidden; }
.record-preview { width: min(700px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line, #8885); color: var(--text, #242424); background: var(--bg, #fffdf7); box-shadow: 0 16px 64px #0005; }
.record-preview[open] { display: flex; flex-direction: column; }
.record-preview::backdrop { background: #0009; }
.record-preview header { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid #8885; }
.record-preview header h2 { flex: 1; margin: 0; font: inherit; }
.record-preview button { background: none; border: 0; color: inherit; font: 28px/1 sans-serif; width: 36px; height: 36px; cursor: pointer; }
.record-preview article { overflow: auto; padding: 8px 24px 24px; line-height: 1.55; }
.record-preview article h2 { font-size: 1.1em; margin-top: 1.5em; }
.record-preview nav { margin: 0; padding: 14px 24px; border-top: 1px solid #8885; }
.record-preview a { color: var(--accent, #6240a0); }
.record-document { color-scheme: light dark; font: 17px/1.6 system-ui, sans-serif; margin: 0; }
.record-document main { max-width: 680px; margin: auto; padding: 24px; }
.record-document h1 { font-size: 1.6em; line-height: 1.2; }
.record-document h2 { font-size: 1.15em; margin-top: 1.5em; }
.record-preview li, .record-document li { margin: 8px 0; }