:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#1c191f;color:#eee6ec}*{box-sizing:border-box}body{margin:0;min-height:100svh;padding:12px;background:radial-gradient(ellipse at 50% 55%,#35252f 0,transparent 70%)}.frame{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:min(100%,490px);min-height:calc(100svh - 24px);margin:auto;padding:42px 20px 24px;border:1px solid #57414d;border-radius:25px;background:radial-gradient(ellipse at 50% 46%,#231b24 0,#141216 65%);box-shadow:0 0 0 7px #ffffff03,inset 0 0 35px #0002}header{text-align:center}h1{font-size:31px;letter-spacing:-1.4px;margin:0;font-weight:600}h1 span{display:inline-block;color:#e5adc4;margin-left:3px;font-size:33px;vertical-align:-2px}header p{color:#a997a3;font-size:12px;margin:5px 0 0;letter-spacing:.4px}form{width:100%;text-align:center;margin:50px 0 30px}.circle{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,310px);aspect-ratio:1;margin:auto;border:10px solid transparent;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#2b232b 0,#110f13 65%) padding-box,linear-gradient(150deg,#bb8199,#624353 32%,#322a33 55%,#c293a8) border-box;box-shadow:0 14px 65px #0003;cursor:text;transition:box-shadow .2s}.circle:focus-within{box-shadow:0 0 0 4px #d89eb514,0 0 48px #d89eb512}.digits{display:flex;gap:17px;align-items:center;justify-content:center;width:100%;pointer-events:none}.digits span{font-size:29px;font-weight:400;width:25px;color:#735564;line-height:1}.digits span.filled{color:#ecc3d3}.circle input{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;border-radius:50%;outline:none;color:transparent;caret-color:transparent;font-size:24px;text-align:center;opacity:.01}#hint{font-size:12px;line-height:1.6;color:#b8a4af;margin:33px 0 0}#hint strong{font-weight:400;color:#e9bbce}#message{min-height:34px;font-size:12px;line-height:1.5;color:#e8acc1;margin:14px auto 0;max-width:280px}footer{font:23px Georgia,serif;color:#976d81}.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}.circle.invalid{border-color:#b8798f}.circle.busy{opacity:.7}@media(max-width:380px){.frame{padding:32px 17px 18px}.circle{border-width:8px;width:260px;max-width:100%}.digits{gap:12px}#hint{font-size:11px}}@media(max-height:650px){.frame{padding-top:24px}form{margin:25px 0 10px}.circle{width:min(100%,240px)}#hint{margin-top:22px}}@media(prefers-reduced-motion:reduce){.circle{transition:none}}