*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:transparent}
body{font-family:Inter,system-ui,Arial,sans-serif;color:#fff}
.odb-stage{position:relative;width:100vw;height:100vh;display:grid;place-items:center;isolation:isolate;background:radial-gradient(circle at 50% 42%,rgba(250,204,21,.22),transparent 28%),radial-gradient(circle at 25% 55%,rgba(14,165,233,.24),transparent 25%),linear-gradient(180deg,rgba(3,5,10,.94),rgba(2,6,23,.96))}
.odb-glow{position:absolute;width:42vmin;height:42vmin;border-radius:50%;filter:blur(44px);opacity:.55;z-index:0}.odb-glow-blue{left:8%;top:14%;background:#0ea5e9}.odb-glow-gold{right:7%;bottom:10%;background:#f59e0b}
.odb-card{position:relative;z-index:2;width:min(86vw,760px);aspect-ratio:1/1;display:grid;place-items:center;align-content:center;gap:clamp(14px,2.5vmin,28px);padding:clamp(34px,6vmin,58px);text-align:center;border:clamp(3px,.8vmin,7px) solid rgba(250,204,21,.92);border-radius:50%;background:radial-gradient(circle,rgba(2,6,23,.98) 0 56%,rgba(0,0,0,.96) 68%),linear-gradient(135deg,rgba(14,165,233,.16),rgba(250,204,21,.18));box-shadow:0 0 0 1.6vmin rgba(250,204,21,.12),0 0 7vmin rgba(250,204,21,.55),inset 0 0 8vmin rgba(14,165,233,.2)}
.odb-card::before,.odb-card::after{content:"";position:absolute;inset:-4.5vmin;border-radius:50%;border:.5vmin dashed rgba(56,189,248,.58);animation:odbSpin 12s linear infinite}.odb-card::after{inset:-7vmin;border-color:rgba(250,204,21,.32);animation-duration:18s;animation-direction:reverse}
.odb-ring{--progress:1;position:relative;z-index:3;width:clamp(330px,62vmin,590px);height:clamp(330px,62vmin,590px);display:block;border-radius:50%;background:radial-gradient(circle,#020617 0 54%,transparent 55%),conic-gradient(#facc15 calc(var(--progress) * 360deg),rgba(239,68,68,.34) 0);box-shadow:0 0 3vmin rgba(250,204,21,.62),inset 0 0 6vmin rgba(14,165,233,.18);overflow:hidden}
.odb-ring::before{content:"";position:absolute;inset:clamp(9px,1.6vmin,18px);border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(250,204,21,.18),transparent 36%),radial-gradient(circle at 36% 28%,rgba(56,189,248,.26),transparent 34%),linear-gradient(180deg,rgba(3,7,18,.96),rgba(0,0,0,.96));box-shadow:inset 0 0 5vmin rgba(250,204,21,.16),inset 0 0 8vmin rgba(56,189,248,.12)}
.odb-ring::after{content:"";position:absolute;inset:1.7vmin;border-radius:50%;border:.35vmin solid rgba(255,255,255,.24);pointer-events:none;z-index:4}
.odb-logo-original{position:absolute;z-index:2;left:50%;top:50%;width:126%;height:auto;display:block;object-fit:contain;transform:translate(-50%,-50%) rotate(-4deg);filter:drop-shadow(0 1.5vmin 1.3vmin rgba(0,0,0,.82)) drop-shadow(0 0 2.3vmin rgba(56,189,248,.45)) drop-shadow(0 0 2.4vmin rgba(250,204,21,.42));pointer-events:none}
.odb-ring strong{position:absolute;z-index:3;left:50%;top:38%;transform:translate(-50%,-50%) skewX(-8deg);font-weight:1000;letter-spacing:-.12em;font-size:clamp(7.5rem,24vmin,16.5rem);line-height:.72;color:#facc15;background:linear-gradient(180deg,#fff7b0 0%,#facc15 26%,#f59e0b 55%,#78350f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.045em rgba(255,248,180,.52);text-shadow:.07em .08em 0 rgba(88,37,0,.98),0 0 2.3vmin rgba(250,204,21,.88),0 0 4.2vmin rgba(245,158,11,.58);filter:drop-shadow(0 0 1.2vmin rgba(255,255,255,.5));min-width:2.1em;text-align:center}
.odb-label,.odb-hint{position:relative;z-index:3;margin:0;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.odb-label{color:#22c55e;font-size:clamp(1.1rem,3.2vmin,2rem)}.odb-hint{color:rgba(226,232,240,.82);font-size:clamp(.9rem,2.4vmin,1.4rem);letter-spacing:.05em}.odb-card.is-running{animation:odbPulse 1s ease-in-out infinite}.odb-card.is-finished .odb-label{color:#f87171}.odb-card.is-finished .odb-ring strong{background:linear-gradient(180deg,#fecaca,#fb7185 45%,#7f1d1d);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.045em rgba(254,202,202,.52);text-shadow:.07em .08em 0 rgba(69,10,10,.98),0 0 2.6vmin rgba(248,113,113,.9)}
@keyframes odbSpin{to{transform:rotate(360deg)}}@keyframes odbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}