*{box-sizing:border-box;margin:0;padding:0}body,body[data-variant="vault"]{--page-bg:#0a0b0e;--page-fg:#fff;--font-ui:'Space Grotesk',system-ui,sans-serif;--font-num:ui-monospace,'JetBrains Mono',Menlo,monospace;--muted:#8d95ab;--card-bg:#14161f;--card-border:1px solid #262b3d;--card-radius:20px;--card-shadow:none;--track-bg:#2a3145;--track-h:6px;--track-radius:9999px;--fill-on:#c8ff00;--thumb-size:24px;--thumb-bg:#ffffff;--thumb-border:2px solid #0a0b0e;--thumb-radius:9999px;--thumb-shadow:0 2px 8px rgba(0,0,0,0.5);--bubble-bg:#1d2130;--bubble-fg:#c8ff00;--bubble-border:1px solid #313a52;--bubble-radius:8px;--read-fg:#c8ff00;--focus:#c8ff00;--toolbar-border:#262b3d;--toolbar-active:#1d2130}body[data-variant="soft"]{--page-bg:#eef2ff;--page-fg:#312e81;--font-ui:'Space Grotesk',system-ui,sans-serif;--font-num:'Space Grotesk',system-ui,sans-serif;--muted:#6366f1;--card-bg:#ffffff;--card-border:1px solid #c7d2fe;--card-radius:24px;--card-shadow:0 16px 40px rgba(99,102,241,0.16);--track-bg:#e0e7ff;--track-h:12px;--track-radius:9999px;--fill-on:#6366f1;--thumb-size:28px;--thumb-bg:#ffffff;--thumb-border:3px solid #6366f1;--thumb-radius:9999px;--thumb-shadow:0 6px 16px rgba(99,102,241,0.3);--bubble-bg:#4338ca;--bubble-fg:#ffffff;--bubble-border:1px solid transparent;--bubble-radius:14px;--read-fg:#4338ca;--focus:#4338ca;--toolbar-border:#c7d2fe;--toolbar-active:#ffffff}body[data-variant="corporate"]{--page-bg:#f8fafc;--page-fg:#0f172a;--font-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--font-num:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--muted:#64748b;--card-bg:#ffffff;--card-border:1px solid #e2e8f0;--card-radius:8px;--card-shadow:0 1px 2px rgba(15,23,42,0.06),0 8px 24px rgba(15,23,42,0.06);--track-bg:#e2e8f0;--track-h:4px;--track-radius:2px;--fill-on:#2563eb;--thumb-size:18px;--thumb-bg:#ffffff;--thumb-border:2px solid #2563eb;--thumb-radius:3px;--thumb-shadow:0 1px 3px rgba(15,23,42,0.3);--bubble-bg:#0f172a;--bubble-fg:#ffffff;--bubble-border:1px solid transparent;--bubble-radius:4px;--read-fg:#2563eb;--focus:#2563eb;--toolbar-border:#cbd5e1;--toolbar-active:#dbeafe}body{background:var(--page-bg);color:var(--page-fg);font-family:var(--font-ui);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}.range-card{width:100%;max-width:460px;background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.7rem 1.6rem 1.4rem}.range-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2.6rem}.range-title{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}.range-read{font-family:var(--font-num);font-size:1rem;font-weight:600;color:var(--read-fg)}.range-body{position:relative;padding:0 calc(var(--thumb-size) / 2)}.range-track{position:relative;height:var(--track-h);background:var(--track-bg);border-radius:var(--track-radius)}.range-fill{position:absolute;top:0;left:0;width:0;height:100%;background:var(--fill-on);border-radius:var(--track-radius)}.range-thumb{position:absolute;top:50%;left:0;margin-top:calc(var(--thumb-size) / -2);width:var(--thumb-size);height:var(--thumb-size);background:var(--thumb-bg);border:var(--thumb-border);border-radius:var(--thumb-radius);box-shadow:var(--thumb-shadow);cursor:grab;touch-action:pan-y;z-index:2}.range-thumb:active{cursor:grabbing}.range-thumb.is-focus{outline:2px solid var(--focus);outline-offset:3px}.range-bubble{position:absolute;top:-2.4rem;left:calc(var(--thumb-size) / 2);padding:4px 9px;font-family:var(--font-num);font-size:0.78rem;font-weight:600;white-space:nowrap;background:var(--bubble-bg);color:var(--bubble-fg);border:var(--bubble-border);border-radius:var(--bubble-radius);pointer-events:none;z-index:3}.range-scale{display:flex;justify-content:space-between;margin-top:1.1rem;font-family:var(--font-num);font-size:0.7rem;color:var(--muted)}.has-js .range-native{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}html:not(.has-js) .range-track,html:not(.has-js) .range-bubble{display:none}html:not(.has-js) .range-native{display:block;width:100%;margin-bottom:0.8rem;accent-color:var(--fill-on)}html:not(.has-js) .range-head{margin-bottom:1rem}@media (prefers-reduced-motion:reduce){*{animation-duration:0.001s !important;transition-duration:0.001s !important}}