.ds-trigger, .ds-dialog {
font-family: var(--md-text-font-family, system-ui, sans-serif);
}
.ds-trigger {
flex: none;
margin-inline: .6rem;
padding: .45rem .65rem;
color: var(--md-default-fg-color);
font-size: .65rem;
font-weight: 650;
border: 1px solid currentColor;
border-radius: .25rem;
cursor: pointer;
}
.ds-dialog {
--ds-muted: var(--md-default-fg-color--light);
width: min(44rem, calc(100vw - 2rem));
max-height: min(85dvh, 42rem);
margin: auto;
padding: 1.3rem 1.5rem;
color: var(--md-default-fg-color);
background: var(--md-default-bg-color);
border: 1px solid var(--md-default-fg-color--lighter);
border-radius: .65rem;
overflow-y: auto;
scrollbar-color: var(--md-default-fg-color--light) var(--md-default-bg-color);
scrollbar-width: thin;
font-size: .8rem;
line-height: 1.55;
}
.ds-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.ds-top { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; }
.ds-top h2 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ds-close, .ds-original, .ds-evaluation { font-size: .7rem; color: var(--md-typeset-a-color); cursor: pointer; }
.ds-close { flex: none; padding: .4rem; }
.ds-intro { margin: .5rem 0 1.3rem; color: var(--ds-muted); }
.ds-label { display: block; font-size: .7rem; font-weight: 650; margin-bottom: .4rem; }
.ds-input-row { display: flex; gap: .6rem; }
.ds-input {
width: 100%; min-width: 0; padding: .65rem .75rem;
background: var(--md-code-bg-color); color: var(--md-default-fg-color);
border: 1px solid var(--md-default-fg-color--lighter); border-radius: .25rem;
font: inherit; caret-color: var(--md-typeset-a-color);
}
.ds-input::placeholder { color: var(--ds-muted); opacity: 1; }
.ds-submit {
flex: none; padding: .65rem .9rem; background: var(--md-typeset-a-color);
color: var(--md-default-bg-color); border-radius: .25rem; font: inherit; font-weight: 700; cursor: pointer;
}
.ds-modes { display: flex; flex-wrap: wrap; gap: 1rem; border: 0; padding: 0; margin: 1rem 0 0; }
.ds-modes legend { padding: 0; }
.ds-mode { display: flex; align-items: center; gap: .35rem; font-size: .75rem; cursor: pointer; }
.ds-mode input { accent-color: var(--md-typeset-a-color); }
.ds-mode:has(input:disabled) { color: var(--ds-muted); cursor: default; }
.ds-connection { color: var(--ds-muted); font-size: .65rem; margin: .5rem 0 .8rem; max-width: 70ch; }
.ds-suggestions { display: flex; flex-wrap: wrap; gap: .3rem .85rem; }
.ds-example { color: var(--md-typeset-a-color); font: inherit; font-size: .7rem; text-align: start; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.ds-status { margin: 1.2rem 0 .5rem; font-size: .7rem; font-variant-numeric: tabular-nums; }
.ds-results { list-style: none; margin: 0; padding: 0; }
.ds-result { padding: .8rem 0; border-top: 1px solid var(--md-default-fg-color--lighter); }
.ds-result-link { color: var(--md-typeset-a-color); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.ds-path { color: var(--ds-muted); font-size: .65rem; margin: .15rem 0 .3rem; }
.ds-excerpt { margin: 0; max-width: 70ch; overflow-wrap: anywhere; }
.ds-footer { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; padding-top: 1rem; margin-top: .5rem; border-top: 1px solid var(--md-default-fg-color--lighter); }
.ds-dialog a:hover, .ds-dialog button:hover, .ds-trigger:hover { text-decoration: underline; text-underline-offset: .2em; }
.ds-dialog :focus-visible, .ds-trigger:focus-visible { outline: 2px solid var(--md-typeset-a-color); outline-offset: 3px; }
.ds-dialog ::selection { color: var(--md-default-bg-color); background: var(--md-typeset-a-color); }
@media (max-width: 600px) {
.ds-trigger { font-size: .6rem; padding: .4rem; margin-inline: .3rem; }
.ds-dialog { width: calc(100vw - 1rem); padding: 1rem; max-height: 92dvh; }
.ds-top h2 { font-size: 1rem; }
.ds-input-row { flex-wrap: wrap; }
.ds-submit { width: 100%; }
}