.draft-comment-mark,.draft-comment,.content-wrapper>.margin-note.-comment{--commenter-strong:hsl(var(--commenter-hue) 65% 40%);--commenter-wash:hsl(var(--commenter-hue) 90% 60% / .22);--commenter-wash-active:hsl(var(--commenter-hue) 90% 60% / .45)}.-t-dark .draft-comment-mark,.-t-dark .draft-comment,.-t-dark .content-wrapper>.margin-note.-comment{--commenter-strong:hsl(var(--commenter-hue) 75% 70%);--commenter-wash:hsl(var(--commenter-hue) 70% 55% / .25);--commenter-wash-active:hsl(var(--commenter-hue) 70% 55% / .5)}.draft-comment-mark{color:inherit;background:var(--commenter-wash);border-bottom:2px solid var(--commenter-strong);cursor:pointer;transition:background .15s;&.-active{background:var(--commenter-wash-active)}}.content-wrapper>.margin-note.-comment{border-left:3px solid var(--commenter-strong);white-space:pre-line;padding-left:.5em;&.-active{background:var(--commenter-wash)}}.content-wrapper>.margin-note.-comment.-flash,.draft-comment.-flash{animation:2s draft-comment-flash}@keyframes draft-comment-flash{0%{background:var(--commenter-wash-active)}to{background:0 0}}.margin-note-author{color:var(--commenter-strong);font-weight:700}.draft-comments{border-top:1px solid var(--color-border);order:4;margin-top:3rem;padding-top:1.5rem;& h2{margin-top:0}}.draft-comments__hint,.draft-comments__status{color:var(--color-muted-foreground);font-size:.9rem}.draft-comments__list{gap:1rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.content-wrapper .draft-comments__list>li{margin-left:0;&::marker{content:none}}.draft-comment{border-left:3px solid var(--commenter-strong);border-radius:2px;padding:.25rem 0 .25rem .75rem;transition:background .3s;&.-active{background:var(--commenter-wash)}&.-detached .draft-comment__quote:after{content:" (this passage has since changed)";font-style:italic}}.draft-comment__meta{color:var(--color-muted-foreground);font-size:.8rem}.draft-comment__name{color:var(--commenter-strong);font-weight:700}.draft-comment__quote{color:var(--color-muted-foreground);border:none;margin:.25rem 0;padding:0;font-size:.85rem;&:before{content:"“"}&:after{content:"”"}}.draft-comment__body{white-space:pre-line;margin:0}.draft-comment-trigger,.draft-comment-composer{top:var(--anchor-top,0);left:var(--anchor-left,0);z-index:50;font-family:inherit;position:absolute;transform:translate(-50%)}.draft-comment-trigger{background:var(--color-primary);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:.3rem .75rem;font-size:.85rem;box-shadow:0 2px 8px #0003}.draft-comment-composer{background:var(--color-card);width:min(22rem,100vw - 2rem);color:var(--color-card-foreground);border:1px solid var(--color-border);border-radius:8px;gap:.5rem;padding:.75rem;font-size:.85rem;display:grid;box-shadow:0 4px 20px #00000026;& label{gap:.15rem;display:grid}& label>span{color:var(--color-muted-foreground);font-size:.75rem}& input,& textarea{font:inherit;color:inherit;background:var(--color-background);border:1px solid var(--color-border);border-radius:4px;padding:.35rem .5rem}& textarea{resize:vertical}&[hidden]{display:none}}.draft-comment-composer__quote{max-height:4.5em;color:var(--color-muted-foreground);border-left:2px solid var(--color-border);margin:0;padding-left:.5rem;font-style:italic;overflow:hidden}.draft-comment-composer__trap{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}.draft-comment__edit{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.draft-comment__edit-form{gap:.4rem;margin-top:.25rem;font-size:.85rem;display:grid;& textarea{font:inherit;color:inherit;background:var(--color-background);border:1px solid var(--color-border);resize:vertical;border-radius:4px;padding:.35rem .5rem}}.draft-comment-composer__error{color:var(--color-primary);margin:0}.draft-comment-composer__actions{justify-content:flex-end;gap:.5rem;display:flex;& button{font:inherit;cursor:pointer;border:1px solid var(--color-border);color:inherit;background:0 0;border-radius:4px;padding:.3rem .8rem}& button[type=submit]{border-color:var(--color-primary);background:var(--color-primary);color:#fff;&:disabled{opacity:.6;cursor:progress}}}@media (width<=640px){.draft-comment-composer{width:100%;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));border-radius:12px 12px 0 0;position:fixed;top:auto;bottom:0;left:0;transform:none}}@media (prefers-reduced-motion:reduce){.draft-comment-mark,.draft-comment{transition:none}.content-wrapper>.margin-note.-comment.-flash,.draft-comment.-flash{animation:none}}