.reader-note-ref { position: relative; font-size: .82em; vertical-align: super; text-decoration-thickness: .08em; text-underline-offset: .13em; padding-inline: .12em; }
.reader-note-ref::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(44px, 100%); height: max(44px, 100%); transform: translate(-50%, -50%); }
.reader-note-ref:focus-visible::after { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.reader-note-ref:focus-visible,.reader-note-return:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.reader-note-returns { display: block; margin-block-start: .5rem; }
.reader-note-return { display: inline-flex; align-items: center; min-height: 44px; font: .8125rem/1.4 var(--sans); margin-inline-end: .7rem; }
.reader-note-dialog { box-sizing: border-box; width: min(42rem, calc(100vw - 24px)); max-height: min(75dvh, 48rem); padding: 1.25rem; color: var(--ink); background: var(--surface, white); border: 1px solid var(--line); border-radius: 12px; overflow: auto; overscroll-behavior: contain; }
.reader-note-dialog::backdrop { background: rgb(0 0 0 / .35); }
.reader-note-dialog header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.reader-note-dialog h2 { margin: 0; font: 1.5rem/1.2 var(--serif); }
.reader-note-dialog button { min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); font: inherit; }
.reader-note-body { font: 1.1rem/1.65 var(--reader-font, var(--serif)); overflow-wrap: anywhere; }
.reader-note-body p { margin-block: 1rem; }
.reader-note-foot { margin: 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.reader-note-goto { display: inline-flex; align-items: center; min-height: 44px; font: .9375rem/1.4 var(--sans); }