:root { --vyasa-comment-glow-rgb: 245 158 11; }
.vyasa-comment-anchor {
    display: inline-flex;
    border: 0;
    cursor: pointer;
    margin-inline-start: .25rem;
    min-width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vyasa-accent, #45655b) 16%, transparent);
    color: var(--vyasa-accent, #45655b);
    font: 600 .7rem/1 var(--vyasa-font-ui, sans-serif);
    vertical-align: super;
}
.vyasa-comments { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.vyasa-comments[hidden] { display: none; }
.vyasa-comments-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vyasa-annotations-export { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; border-radius: .375rem; color: inherit; }
.vyasa-annotations-export[hidden] { display: none; }
.vyasa-annotations-export:hover { background: rgb(30 41 59 / .8); }
.vyasa-comments-list { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.vyasa-comment-editor { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: end; }
.vyasa-comment-editor textarea { min-height: 5rem; resize: vertical; }
.vyasa-comment { border-inline-start: 2px solid var(--vyasa-accent, #45655b); padding-inline-start: 1rem; }
.vyasa-comment-row { cursor: pointer; color: color-mix(in srgb, currentColor 72%, transparent); }
.vyasa-comment-author { display: flex; align-items: center; gap: .5rem; font: 600 .8rem/1.4 var(--vyasa-font-ui, sans-serif); }
.vyasa-comment-copy { display: inline-flex; margin-inline-start: auto; border: 0; background: transparent; color: var(--vyasa-ink-soft, #5a6060); cursor: pointer; }
.vyasa-comment-copy uk-icon { width: 1rem; height: 1rem; }
.vyasa-comment-copy-status { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 1800; border-radius: .5rem; background: var(--vyasa-ink, #2d3434); color: var(--vyasa-paper, white); padding: .55rem .75rem; font: 600 .75rem/1 var(--vyasa-font-ui, sans-serif); opacity: 0; transform: translateY(-.25rem); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.vyasa-comment-copy-status.is-visible { opacity: 1; transform: translateY(0); }
.vyasa-comment-backlink { margin-inline-end: .5rem; border: 0; background: transparent; color: var(--vyasa-accent, #45655b); font: inherit; cursor: pointer; }
.vyasa-comment-anchor:focus-visible, .vyasa-comment-backlink:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.vyasa-comment-body { margin-top: .25rem; }
.vyasa-comment-actions { display: inline-flex; gap: .25rem; margin-inline-start: .5rem; }
.vyasa-comment-replies { display: grid; gap: .75rem; margin: .75rem 0 0 1rem; padding: 0; list-style: none; }
.vyasa-comment-target { background: color-mix(in srgb, var(--vyasa-accent, #45655b) 14%, transparent); }
.vyasa-comment-quote { margin: 0 0 .75rem; padding: .65rem .75rem; border-radius: .5rem; background: var(--vyasa-paper-low, rgba(69, 101, 91, .08)); color: var(--vyasa-ink-soft, #5a6060); font-style: italic; }
.vyasa-comment-popup { position: fixed; z-index: 1500; box-sizing: border-box; width: min(22rem, calc(100vw - 1.5rem)); max-height: min(24rem, calc(100vh - 1.5rem)); overflow: auto; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: .75rem; background: var(--vyasa-paper, white); color: var(--vyasa-ink, #2d3434); padding: .75rem; box-shadow: 0 0 1.5rem rgb(var(--vyasa-comment-glow-rgb) / .18), 0 1rem 3rem rgb(0 0 0 / .18); opacity: 1; transition: opacity 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.vyasa-comment-popup.vyasa-comment-popup-target { background: color-mix(in srgb, var(--vyasa-paper, white) 88%, rgb(var(--vyasa-comment-glow-rgb)) 12%); box-shadow: 0 0 0 2px rgb(var(--vyasa-comment-glow-rgb) / .72), 0 0 1.75rem rgb(var(--vyasa-comment-glow-rgb) / .28), 0 1rem 3rem rgb(0 0 0 / .22); }
.vyasa-comment-popup[hidden] { display: none; }
.vyasa-comment-popup.is-hiding { opacity: 0; }
.vyasa-comment-popup.is-pinned { position: absolute; }
.vyasa-comment-popup-bar { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .5rem; cursor: grab; touch-action: none; }
.vyasa-comment-popup-bar:active { cursor: grabbing; }
.vyasa-comment-popup-bar button { border: 0; background: transparent; color: var(--vyasa-ink, #2d3434) !important; cursor: pointer; font: 600 .75rem/1 var(--vyasa-font-ui, sans-serif); }
.vyasa-comment-popup-bar uk-icon { display: inline-flex; width: 1rem; height: 1rem; }
.vyasa-comment-popup-bar uk-icon svg { color: inherit !important; stroke: currentColor !important; fill: none !important; }
.vyasa-comment-popup .vyasa-comment { list-style: none; }