::highlight(annotations) { background: #f0efe9; text-decoration: underline; text-decoration-color: #c2bfb3; }
::highlight(active-annotation) { background: #e1ded2; }
.comments-overview, .comment-link { border: 0; padding: 4px 0; color: #666; background: transparent; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.comments-overview { float: right; }
.selection-comment, .comment-panel button, .comment-marker { font: inherit; color: #333; cursor: pointer; }
.selection-comment { position: absolute; z-index: 10; background: white; border: 1px solid #aaa; padding: 7px 13px; font-size: 14px; box-shadow: 0 2px 6px #0000000d; }
.comment-marker { position: absolute; border: 0; background: white; padding: 5px 2px; font-size: 13px; color: #777; min-width: 20px; min-height: 28px; }
.comment-marker::before { content: ''; position: absolute; left: -9px; top: 50%; width: 9px; border-top: 1px solid #bbb; }
.comment-panel { position: absolute; z-index: 5; background: white; width: 280px; font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', Pagella, serif; font-size: 15px; line-height: 1.5; text-align: left; padding: 0 0 20px; border-top: 1px solid #ccc; }
.comment-panel[hidden], .selection-comment[hidden] { display: none; }
.comment-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 16px; }
.comment-panel h3 { font-size: 18px; line-height: 1.4; font-weight: 400; margin: 0; }
.comment-panel .comment-close { border: 0; background: none; padding: 6px 10px; margin-right: -10px; font-size: 21px; line-height: 1; }
.comment-panel textarea, .comment-panel input { display: block; width: 100%; border: 1px solid #bbb; background: white; color: #222; font: inherit; padding: 9px 10px; border-radius: 0; }
.comment-panel textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.comment-panel label { display: block; color: #666; margin-top: 14px; font-size: 14px; }
.comment-panel input { border-width: 0 0 1px; padding: 5px 0; }
.comment-panel .comment-identity { margin: 14px 0 8px; color: #666; font-size: 13px; text-align: left; line-height: 1.5; }
.comment-panel .comment-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 17px; }
.comment-panel .comment-submit { border: 1px solid #888; background: white; padding: 7px 12px; font-size: 14px; }
.comment-panel button:disabled { opacity: .55; cursor: default; }
.comment-panel button:focus-visible, .comment-panel input:focus-visible, .comment-panel textarea:focus-visible, .comment-marker:focus-visible, .selection-comment:focus-visible, .comments-overview:focus-visible { outline: 1px solid #444; outline-offset: 3px; }
.comment-panel .comment-notice { color: #666; font-size: 13px; line-height: 1.5; margin: 12px 0 0; text-align: left; }
.comment-panel .comment-error { color: #873f30; }
.comment-panel .comment-entry { border-bottom: 1px solid #ddd; padding: 0 0 16px; margin: 0 0 20px; }
.comment-panel .comment-entry p { font-size: 15px; line-height: 1.5; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; hyphens: none; margin: 7px 0; }
.comment-panel .comment-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: #666; font-size: 12px; }
.comment-panel .comment-meta span { overflow-wrap: anywhere; }
.comment-panel time { white-space: nowrap; font-size: 11px; }
.comment-panel .comment-entry-actions { display: flex; gap: 16px; font-size: 12px; }
.comment-panel .comment-replies { margin: 16px 0 0 14px; border-left: 1px solid #ddd; padding-left: 14px; }
.comment-panel .comment-replies .comment-entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.comment-panel blockquote { margin: 12px 0; font-size: 13px; color: #777; overflow-wrap: anywhere; }
.comment-ink { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.comment-ink span { position: absolute; background: #e9e7df88; }
.comment-panel.comment-inline { position: relative; width: auto; margin: 22px 0 30px; padding: 4px 0 20px; border-bottom: 1px solid #ddd; }
@media (hover: hover) { .comment-link:hover, .comments-overview:hover, .comment-marker:hover { color: #222; } .comment-submit:hover, .selection-comment:hover { background: #f7f6f2; } }
@media (max-width: 760px) { .comment-panel .comment-close { min-width: 44px; min-height: 44px; } .comment-panel .comment-actions button, .comment-panel .comment-entry-actions button { min-height: 44px; } .comment-panel textarea, .comment-panel input { font-size: 16px; } }
@media print { .comment-panel, .selection-comment, .comment-marker, .comments-overview, .comment-ink { display: none !important; } }