/* The rounded material is separate from its native scroll viewport. */
.modal-backdrop {width:100vw}
.dialog-frame {
 --dialog-height:calc(100dvh - 48px);
 --dialog-inset:8px;
 width:min(650px,100%);
 max-height:var(--dialog-height);
 padding:var(--dialog-inset);
 border:1px solid var(--glass-edge);
 border-radius:26px;
 overflow:hidden;
 background:#fafcff;
 box-shadow:inset 0 1px 0 #fff,0 30px 90px rgba(14,35,64,.2),0 5px 18px rgba(14,35,64,.09);
}
.dialog-frame>.dialog {
 width:100%;
 max-height:calc(var(--dialog-height) - var(--dialog-inset) - var(--dialog-inset) - 2px);
 padding:20px;
 border:0;
 border-radius:18px;
 background:transparent;
 box-shadow:none;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 overflow-y:auto;
 overflow-x:hidden;
 scrollbar-gutter:stable both-edges;
 scrollbar-width:auto;
}
.dialog-frame>.dialog::-webkit-scrollbar {width:6px;height:6px}
.dialog-frame>.dialog::-webkit-scrollbar-track {background:transparent;margin-block:16px}
.dialog-frame>.dialog::-webkit-scrollbar-thumb {
 background:#99adc2;
 border:1px solid transparent;
 background-clip:padding-box;
 border-radius:999px;
}
.dialog-frame>.dialog::-webkit-scrollbar-thumb:hover {background-color:#718ba6}
.dialog-frame>.dialog::-webkit-scrollbar-button {display:none;width:0;height:0}
.dialog-frame>.dialog::-webkit-scrollbar-corner {background:transparent}
.reading-backdrop .dialog-frame {
 width:min(820px,100%);
 border-radius:30px;
 background:#fafdff;
 border-color:rgba(255,255,255,.92);
 box-shadow:inset 0 1px 0 #fff,0 30px 100px rgba(18,41,72,.26),0 6px 24px rgba(18,41,72,.12);
}
.reading-backdrop .dialog-frame>.dialog {padding:0;border-radius:22px}
@supports not selector(::-webkit-scrollbar) {
 .dialog-frame>.dialog {scrollbar-width:thin;scrollbar-color:#99adc2 transparent}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .dialog-frame {background:rgba(251,253,255,.96);backdrop-filter:blur(28px) saturate(1.25);-webkit-backdrop-filter:blur(28px) saturate(1.25)}
}
@media(max-width:760px) {
 .reading-backdrop .dialog-frame {--dialog-height:calc(100dvh - 32px);--dialog-inset:6px;border-radius:24px}
 .reading-backdrop .dialog-frame>.dialog {border-radius:18px}
}
@media(max-width:430px) {
 .modal-backdrop:not(.reading-backdrop) {padding:16px}
 .modal-backdrop:not(.reading-backdrop) .dialog-frame {--dialog-height:calc(100dvh - 32px);--dialog-inset:6px;border-radius:24px}
 .modal-backdrop:not(.reading-backdrop) .dialog-frame>.dialog {padding:14px;border-radius:18px}
}
@media(max-width:350px) {
 .reading-actions .btn {padding-inline:8px;gap:6px;white-space:nowrap}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 .dialog-frame {background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more) {
 .dialog-frame {border-color:#577595;box-shadow:none}
 .dialog-frame>.dialog::-webkit-scrollbar-thumb {background-color:#355a7c}
}