:root { color-scheme:dark; --sound:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:#e1e5ed; background:#090c12; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; padding:32px 20px; display:grid; place-items:center; isolation:isolate; overflow-x:clip; background:radial-gradient(ellipse at 50% 35%,#18202d 0%,#0d111a 45%,#080b11 100%); }
.nebula,.stars,.shooting-stars { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.nebula { inset:-15%; background:radial-gradient(ellipse at 18% 36%,#42648621,transparent 40%),radial-gradient(ellipse at 85% 70%,#66547d1c,transparent 43%); filter:blur(32px); animation:nebula-breathe 24s ease-in-out infinite alternate; }
.stars { opacity:.4; background-image:radial-gradient(1px 1px at 12% 20%,#d0ddf0 80%,transparent),radial-gradient(1px 1px at 70% 15%,#bfcde2 80%,transparent),radial-gradient(1.4px 1.4px at 80% 65%,#cddbed 80%,transparent),radial-gradient(1px 1px at 30% 78%,#a8b9cc 80%,transparent),radial-gradient(1px 1px at 55% 42%,#b8c8dc 80%,transparent),radial-gradient(.7px .7px at 9% 57%,#b8c8dc 80%,transparent); background-size:570px 490px; filter:brightness(calc(1 + var(--sound)*.18)); }
.shell { position:relative; width:min(480px,100%); padding:44px 40px 26px; border:1px solid #ffffff0f; border-top-color:#ffffff18; border-radius:24px; background:linear-gradient(155deg,#1a202a,#131820 65%); box-shadow:0 24px 80px #0005,0 2px 8px #0003; text-align:center; }
.shield { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 26px; border:1px solid #a8bddc26; border-radius:50%; color:#b7cbe9; background:#a1bce509; box-shadow:0 0 calc(15px + var(--sound)*20px) rgba(130,155,195,calc(.025 + var(--sound)*.04)); }
.shield svg { width:32px; height:32px; }
h1 { margin:0 0 12px; font-size:21px; line-height:1.35; font-weight:600; letter-spacing:-.5px; }
.description { margin:0; color:#9ba5b5; font-size:13px; line-height:1.75; }
.verification { margin-top:32px; }
.slider-wrap { position:relative; height:48px; border:1px solid #b4c7e52e; border-radius:999px; background:linear-gradient(120deg,#252e3b,#1b222e); overflow:hidden; transition:border-color .2s; }
.slider-wrap:hover,.slider-wrap:focus-within { border-color:#adc3e66b; }
.slider-fill { position:absolute; inset:0 auto 0 0; width:0; background:#c1d5f414; pointer-events:none; }
.slider-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-left:28px; font-size:12px; color:#c0c9d8; white-space:nowrap; pointer-events:none; }
input[type=range] { position:absolute; inset:auto; left:6px; top:50%; transform:translateY(-50%); width:calc(100% - 12px); height:34px; margin:0; padding:0; border:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:grab; touch-action:none; }
input[type=range]:active { cursor:grabbing; }
input[type=range]:disabled { cursor:default; opacity:.65; }
input[type=range]:focus-visible,.retry:focus-visible { outline:2px solid #b8cce9; outline-offset:-2px; border-radius:999px; }
input[type=range]::-webkit-slider-runnable-track { height:34px; background:transparent; }
input[type=range]::-moz-range-track { height:34px; background:transparent; }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:34px; height:34px; border:0; border-radius:50%; background:linear-gradient(145deg,#d3ddec,#a5b4cb); box-shadow:0 1px 4px #0004; }
input[type=range]::-moz-range-thumb { width:34px; height:34px; border:0; border-radius:50%; background:linear-gradient(145deg,#d3ddec,#a5b4cb); box-shadow:0 1px 4px #0004; }
.slider-wrap::after { content:"›"; position:absolute; top:50%; left:6px; width:34px; height:34px; transform:translateY(-50%); display:grid; place-items:center; padding-bottom:2px; font-family:Arial,sans-serif; font-size:24px; line-height:1; color:#424f63; pointer-events:none; }
.slider-wrap.moving::after,.slider-wrap.success::after { display:none; }
.slider-wrap.success { border-color:#9cc6af4d; background:#92bda315; }
.slider-wrap.success .slider-label { padding-left:0; color:#bfdbc9; }
.slider-wrap.error { border-color:#df9e8e66; }
.retry { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; border:0; background:#202936; color:#d5deeb; font:inherit; font-size:12px; cursor:pointer; }
.retry.demo-reset { background:transparent; color:#bfdbc9; }
[hidden] { display:none !important; }
.status { min-height:40px; margin:12px 0 0; color:#8f9bae; font-size:11px; line-height:1.7; }
.shell:has(.slider-wrap.error) .status { color:#d4aa9d; }
.shell:has(.slider-wrap.success) .shield { color:#b5d4bf; border-color:#9cc6af40; background:#92bda30b; }
.card-footer { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:16px; padding-top:22px; border-top:1px solid #ffffff0a; color:#768397; font-size:11px; letter-spacing:.5px; }
.signature-mark { width:9px; height:11px; background:#8293ad; clip-path:polygon(50% 0,94% 19%,87% 65%,50% 100%,13% 65%,6% 19%); opacity:.65; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sound-halo { display:none; }
.shooting-stars { overflow:hidden; }
.shooting-stars i { position:absolute; left:15%; top:8%; width:95px; height:1px; border-radius:100%; opacity:0; background:linear-gradient(90deg,transparent,#a8b1c34d 85%,#c8cedd); transform:rotate(35deg); animation:shooting-star 26s linear infinite; }
.shooting-stars i::after { content:""; position:absolute; right:0; top:0; width:2px; height:2px; border-radius:50%; background:#d1dbea; box-shadow:0 0 4px #b9caff55; }
.shooting-stars i:nth-child(2) { left:55%; top:2%; width:70px; animation-duration:37s; animation-delay:12s; }
.shooting-stars i:nth-child(3) { left:-10%; top:35%; animation-duration:32s; animation-delay:7s; }
@keyframes nebula-breathe { from { transform:translate3d(-1%,0,0); opacity:.65; } to { transform:translate3d(2%,1%,0); opacity:1; } }
@keyframes shooting-star { 0% { opacity:0; transform:translate3d(-140px,-98px,0) rotate(35deg); } 1% { opacity:.45; } 5%,100% { opacity:0; transform:translate3d(480px,336px,0) rotate(35deg); } }
@media(max-width:480px) { body { padding:24px 16px; } .shell { padding:32px 24px 24px; border-radius:20px; } h1 { font-size:20px; } .shield { width:68px; height:68px; margin-bottom:22px; } }
@media(prefers-reduced-motion:reduce) { .nebula,.shooting-stars i { animation:none; } .slider-wrap { transition:none; } }