body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 24px; color: #222; }
h1 { font-size: 20px; margin-bottom: 8px; }
.hint { color: #666; font-size: 12px; margin-bottom: 12px; }
textarea { width: 100%; height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; padding: 8px; }
button { padding: 8px 14px; font-size: 14px; cursor: pointer; }
.row { margin: 12px 0; }
.error { color: #a00; white-space: pre-wrap; }
.results { margin-top: 16px; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left; }
tfoot td { font-weight: 600; }
.small { font-size: 12px; color: #555; }
.muted { color: #666; }
.pill { display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
/* Dual range (two thumbs on one track) */
.dual-range { position: relative; width: 320px; height: 28px; }
.dual-range input[type=range] {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    background: transparent; pointer-events: none; /* only thumbs interact */
    -webkit-appearance: none; appearance: none; height: 28px;
}
/* WebKit track */
.dual-range input[type=range]::-webkit-slider-runnable-track {
    height: 6px; background: #e5e7eb; border-radius: 999px; border: 1px solid #e2e8f0;
}
/* WebKit thumb */
.dual-range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: #2563eb; border: 2px solid white; box-shadow: 0 0 0 1px #94a3b8; cursor: pointer;
    pointer-events: auto; /* thumbs are draggable */
    margin-top: -4px; /* center on track */
}
/* Firefox track (keeps default look but aligns height) */
.dual-range input[type=range]::-moz-range-track {
    height: 6px; background: #e5e7eb; border-radius: 999px; border: 1px solid #e2e8f0;
}
.dual-range input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border: none; border-radius: 50%; background: #2563eb; cursor: pointer;
    pointer-events: auto;
}
/* Make the second slider appear above for easier selection if overlapping */
.dual-range input#clampMax { z-index: 2; }
