/* Native highlights preserve inline formatting, links and selection geometry. */
::highlight(reading-saved) { background-color: color-mix(in srgb, #e5b653 30%, transparent); text-decoration: underline; text-decoration-color: color-mix(in srgb, #b47b20 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::target-text { background-color: color-mix(in srgb, var(--reading-accent) 24%, transparent); color: var(--site-default-fg-color); }
.reading-selection-tools { position: fixed; inset: auto; z-index: 110; display: flex; align-items: center; gap: 3px; margin: 0; padding: 4px; border: 1px solid color-mix(in srgb, var(--reading-rule) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--reading-bg) 88%, transparent); color: var(--site-default-fg-color); box-shadow: 0 6px 24px -8px #14233626; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: reading-selection-in .14s ease both; }
.reading-selection-tools[hidden], .reading-selection-tools button[hidden] { display: none; }
.reading-selection-tools button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--site-default-fg-color--light); cursor: pointer; transition: color .15s, background .15s; }
.reading-selection-tools button:hover, .reading-selection-tools button:focus-visible { color: var(--reading-accent); background: color-mix(in srgb, var(--reading-accent) 7%, transparent); }
.reading-selection-tools button[aria-pressed='true'] { color: #ad791f; }
.reading-selection-tools button:focus-visible { outline: 2px solid var(--reading-accent); outline-offset: -2px; }
.reading-selection-tools svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Quiet, compact feedback with a clear action and a secondary storage hint. */
.reading-mark-notice {
    position: fixed; z-index: 120; display: flex; align-items: center; gap: 8px;
    box-sizing: border-box; width: max-content; max-width: min(300px, calc(100vw - 24px));
    min-height: 38px; padding: 7px 13px 7px 8px;
    border: 1px solid color-mix(in srgb, var(--reading-rule) 38%, transparent); border-radius: 15px;
    background: color-mix(in srgb, var(--reading-bg) 94%, transparent);
    color: color-mix(in srgb, var(--site-default-fg-color) 86%, var(--reading-bg));
    box-shadow: 0 3px 8px -5px color-mix(in srgb, var(--site-default-fg-color) 13%, transparent),
                0 9px 26px -12px color-mix(in srgb, var(--site-default-fg-color) 15%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--reading-bg) 65%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    font: 12px/1.5 'Source Sans 3', 'Noto Sans SC', system-ui, sans-serif;
    text-align: left; overflow-wrap: anywhere; pointer-events: none;
    opacity: 0; transform: translateY(3px); transition: opacity .16s, transform .18s;
}
.reading-mark-notice.is-visible { opacity: 1; transform: translateY(0); }
.reading-mark-notice__icon {
    display: flex; align-items: center; justify-content: center; flex: 0 0 22px; height: 22px;
    border-radius: 50%; color: var(--reading-accent);
    background: color-mix(in srgb, var(--reading-accent) 8%, transparent);
}
.reading-mark-notice__icon svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reading-mark-notice__content { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; min-width: 0; }
.reading-mark-notice__label { font-weight: 500; }
.reading-mark-notice__detail { color: var(--site-default-fg-color--light); font-size: 11px; font-weight: 400; }
.reading-mark-notice__detail:not([hidden])::before { content: '·'; margin-right: 9px; opacity: .5; }
.reading-mark-notice[data-tone='error'] .reading-mark-notice__icon { color: var(--site-default-fg-color--light); background: color-mix(in srgb, var(--reading-rule) 36%, transparent); }
.reading-mark-notice[data-tone='error'] .reading-mark-notice__label { font-weight: 400; }
@keyframes reading-selection-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (pointer: coarse) { .reading-selection-tools button { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .reading-selection-tools { animation: none; } .reading-selection-tools button, .reading-mark-notice { transition: none; } }