:root{font-family:Arial,Helvetica,sans-serif;color:#172338;background:#f4f6fa;font-synthesis:none}
*{box-sizing:border-box}body{min-height:100vh;min-height:100dvh;margin:0;display:flex;align-items:center;justify-content:center;padding:20px}
.panel{width:min(100%,660px);border-radius:24px;padding:clamp(22px,5vw,38px) clamp(15px,4vw,32px);background:white;box-shadow:0 16px 60px rgba(20,44,78,.09);text-align:center}
.brand-line img{width:92px;height:auto;max-height:92px;object-fit:contain}h1{font-size:clamp(23px,4.5vw,30px);margin:11px 0 5px}.subtitle{font-size:15px;color:#6b7380;margin:0 0 25px}
.lock{width:min(100%,570px);aspect-ratio:2.04;position:relative;margin:auto;padding:2.8%;border-radius:49%;background:linear-gradient(152deg,#25272b,#060708 28%,#42474c 58%,#0b0c0e 91%);box-shadow:0 13px 19px #0002, inset 0 0 0 3px #484a4b}
.face{width:100%;height:100%;border-radius:49%;position:relative;overflow:hidden;border:2px solid #a5adb4;background:linear-gradient(160deg,#fff 0%,#c1c5c8 28%,#f6f8f9 50%,#8f969e 79%,#e6e8e9 100%);box-shadow:inset 0 6px 13px #fff,inset 0 -9px 13px #30353a44}
.badge{position:absolute;left:39%;top:6%;width:22%;height:31%;border-radius:49%;background:#0d0e10;display:flex;align-items:center;justify-content:center;border:3px solid #dfe2e5;box-shadow:0 2px 4px #0005;overflow:hidden}
.badge img{height:77%;width:auto;max-width:70%;object-fit:contain;border-radius:50%}
.track{position:absolute;top:42%;left:18%;width:64%;height:39%;padding:1.3%;border-radius:8px;background:linear-gradient(90deg,#83898e,#f6f8fa 11%,#737b83 23%,#cfd5d8 85%,#636b73);box-shadow:inset 0 4px 7px #0009}
.reels{height:100%;display:flex;gap:2.3%}.reel{min-width:0;flex:1;position:relative;overflow:hidden;border-radius:5px;background:linear-gradient(90deg,#07090a,#34393d 45%,#0b0c0e);box-shadow:inset 3px 0 4px #000a,inset -3px 0 4px #0009}
.reel:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#000a,transparent 30%,transparent 69%,#000a)}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}.digit{height:var(--digit-height);display:grid;place-items:center;font-size:clamp(21px,5.3vw,44px);font-weight:800;line-height:1;color:white;text-shadow:0 2px 3px #000}.reel .alignment{height:2px;width:10%;position:absolute;top:50%;background:#d9dee1;z-index:1;box-shadow:0 1px 2px #000}.alignment.left{left:0}.alignment.right{right:0}
#status{min-height:21px;margin:22px 0 12px;color:#586679;font-size:14px}button{background:#1767b2;color:#fff;border:0;border-radius:9px;padding:12px 22px;font-size:14px;font-weight:700;cursor:pointer}button:focus-visible{outline:3px solid #0e528b;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.footnote{font-size:12px;color:#7e8795;line-height:1.5;margin:19px 0 0}.code-accessible{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
@media(max-width:440px){.panel{padding:24px 12px}.lock{aspect-ratio:1.98}.track{height:41%}.badge{border-width:2px}.digit{font-size:clamp(18px,7vw,33px)}}
@media(prefers-reduced-motion:reduce){.strip{transition:none!important}}