*{box-sizing:border-box;margin:0;padding:0}body{color:#1e293b;background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);min-height:100vh;padding:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;position:relative}body:before{content:"";z-index:-1;background:radial-gradient(circle at 20% 80%,#7877c64d 0%,#0000 50%),radial-gradient(circle at 80% 20%,#ff77c64d 0%,#0000 50%),radial-gradient(circle at 40% 40%,#78dbff4d 0%,#0000 50%);width:100%;height:100%;animation:8s ease-in-out infinite backgroundShift;position:fixed;top:0;left:0}@keyframes backgroundShift{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.dark body{color:#e2e8f0;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)}.box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#fffffff2 0%,#f8fafce6 100%);border:1px solid #fff3;border-radius:20px;width:100%;max-width:100%;margin:0 auto;padding:1.5rem;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000001a,0 0 0 1px #fff3,inset 0 1px #ffffff4d}.box:before{content:"";background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#ff6b6b) 0 0/200% 100%;height:4px;animation:3s ease-in-out infinite gradientFlow;position:absolute;top:0;left:0;right:0}@keyframes gradientFlow{0%,to{background-position:0%}50%{background-position:100%}}.dark .box{background:linear-gradient(145deg,#1e293bf2 0%,#0f172ae6 100%);box-shadow:0 20px 40px #0000004d,0 0 0 1px #ffffff1a,inset 0 1px #ffffff1a}#app-title{display:none}label{color:#1e293b;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.75rem;font-size:.9rem;font-weight:600;display:block;position:relative}label:after{content:"";background:linear-gradient(90deg,#667eea,#764ba2);border-radius:1px;width:30px;height:2px;position:absolute;bottom:-4px;left:0}.dark label{background:linear-gradient(135deg,#4ecdc4 0%,#45b7d1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.dark label:after{background:linear-gradient(90deg,#4ecdc4,#45b7d1)}select,input[type=number]{color:#1e293b;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:linear-gradient(145deg,#ffffffe6 0%,#f8fafccc 100%);border:2px solid #0000;border-radius:12px;width:100%;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .3s;position:relative;box-shadow:0 4px 12px #0000001a,inset 0 1px #ffffff4d}select:hover,input[type=number]:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026,inset 0 1px #fff6}.dark select,.dark input[type=number]{color:#e2e8f0;background:linear-gradient(145deg,#1e293be6 0%,#0f172acc 100%);border-color:#ffffff1a}select:focus,input:focus{border-color:#667eea;outline:none;transform:translateY(-2px);box-shadow:0 0 0 4px #667eea33,0 8px 25px #667eea26,inset 0 1px #fff6}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23667eea' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.5rem}select:hover{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ff6b6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")}select:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23667eea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")}.display{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;grid-template-columns:1fr auto;align-items:center;margin:1rem 0;padding:1.5rem;display:grid;position:relative;overflow:hidden;box-shadow:0 8px 32px #667eea4d,inset 0 1px #fff3}.display:before{content:"";background:linear-gradient(45deg,#0000 30%,#ffffff1a 50%,#0000 70%);animation:2s ease-in-out infinite shimmer;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.dark .display{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a}.price{color:#fff;text-shadow:0 2px 4px #0000004d;z-index:2;font-size:1.8rem;font-weight:700;position:relative}.dark .price{color:#e2e8f0}.digit{color:gold;text-shadow:0 0 10px #ffd70080,0 2px 4px #0000004d;z-index:2;font-size:2.5rem;font-weight:700;animation:2s ease-in-out infinite alternate digitGlow;position:relative}@keyframes digitGlow{0%{text-shadow:0 0 10px #ffd70080,0 2px 4px #0000004d}to{text-shadow:0 0 20px #ffd700cc,0 2px 8px #00000080}}.controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:.5rem 0;display:grid}.hint{color:#6b7280;background:linear-gradient(135deg,#ff6b6b 0%,#4ecdc4 100%);-webkit-text-fill-color:transparent;background-color:#ff6b6b1a;-webkit-background-clip:text;background-clip:text;border:1px solid #ff6b6b33;border-radius:6px;padding:.25rem .5rem;font-size:.75rem;font-weight:500}.dark .hint{background:linear-gradient(135deg,#4ecdc4 0%,#45b7d1 100%);-webkit-text-fill-color:transparent;background-color:#4ecdc41a;-webkit-background-clip:text;background-clip:text;border-color:#4ecdc433}.digits-section{margin:.75rem 0}.digits-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.samples{color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:1px solid #fff3;border-radius:8px;padding:.5rem .75rem;font-size:.875rem;font-weight:600;box-shadow:0 4px 12px #667eea4d,inset 0 1px #fff3}.dark .samples{color:#fff;background:linear-gradient(135deg,#4ecdc4 0%,#45b7d1 100%);box-shadow:0 4px 12px #4ecdc44d,inset 0 1px #fff3}.digits{grid-template-columns:repeat(10,minmax(48px,1fr));gap:.75rem;margin-bottom:1rem;display:grid}@media (min-width:1024px){.circle{width:64px;height:64px}}.digit-item{justify-content:center;display:flex}.circle{cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:linear-gradient(145deg,#ffffffe6 0%,#f8fafccc 100%);border:2px solid #0000;border-radius:12px;justify-content:center;align-items:center;width:60px;height:60px;transition:all .3s;display:flex;position:relative;overflow:visible;box-shadow:0 4px 12px #0000001a,inset 0 1px #ffffff4d}.circle:hover{transform:translateY(-4px)scale(1.05);box-shadow:0 8px 25px #00000026,inset 0 1px #fff6}.circle.current:after{content:"";border-bottom:12px solid #3b82f6;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;animation:1.4s ease-in-out infinite alternate pointer-slide;position:absolute;top:-12px;left:50%;transform:translate(-50%)}@keyframes pointer-slide{0%{transform:translate(calc(-50% - 18px))}to{transform:translate(calc(18px - 50%))}}.dark .circle{background:linear-gradient(145deg,#1e293be6 0%,#0f172acc 100%);border-color:#ffffff1a}.circle-content{text-align:center;z-index:2;position:relative}.circle-num{color:#1e293b;font-size:1.25rem;font-weight:700}.dark .circle-num{color:#e2e8f0}.circle-pct{color:#6b7280;margin-top:.125rem;font-size:.75rem}.dark .circle-pct{color:#9ca3af}.circle.current{background:inherit;border-color:inherit;box-shadow:inherit;transform:none}.circle.top{background:linear-gradient(145deg,#10b981 0%,#059669 100%);border-width:3px;border-color:#10b981;transform:scale(1.02);box-shadow:0 0 0 4px #10b9814d,0 8px 25px #10b98133}.circle.top:after{border-bottom-color:#10b981}.circle.second{background:linear-gradient(145deg,#3b82f6 0%,#2563eb 100%);border-width:2px;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633,0 4px 15px #3b82f626}.circle.second:after{border-bottom-color:#3b82f6}.circle.least{background:linear-gradient(145deg,#ef4444 0%,#dc2626 100%);border-width:3px;border-color:#ef4444;transform:scale(1.02);box-shadow:0 0 0 4px #ef44444d,0 8px 25px #ef444433}.circle.least:after{border-bottom-color:#ef4444}.circle.secondleast{background:linear-gradient(145deg,#f59e0b 0%,#d97706 100%);border-width:2px;border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b33,0 4px 15px #f59e0b26}.circle.secondleast:after{border-bottom-color:#f59e0b}.dark .circle.current{background:inherit}.dark .circle.top{background:linear-gradient(145deg,#10b981 0%,#059669 100%)}.dark .circle.second{background:linear-gradient(145deg,#3b82f6 0%,#2563eb 100%)}.dark .circle.least{background:linear-gradient(145deg,#ef4444 0%,#dc2626 100%)}.dark .circle.secondleast{background:linear-gradient(145deg,#f59e0b 0%,#d97706 100%)}.circle .circle-num{color:#1e293b}.circle .circle-pct{color:#6b7280}.dark .circle .circle-num{color:#e2e8f0}.dark .circle .circle-pct{color:#9ca3af}.legend{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.legend-item{color:#6b7280;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.dark .legend-item{color:#9ca3af}.dot{border-radius:50%;width:12px;height:12px}.dot-current{background:#3b82f6}.dot-least{background:#ef4444}.separator{background:#e5e7eb;height:1px;margin:1.5rem 0}.dark .separator{background:#4b5563}.ou-header,.md-header,.eo-header{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.ou-header span,.md-header span,.eo-header span{color:#1e293b;font-weight:600}.dark .ou-header span,.dark .md-header span,.dark .eo-header span{color:#e2e8f0}.ou-section,.eo-section,.md-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ffffffe6 0%,#f8fafccc 100%);border:2px solid #0000;border-radius:16px;margin:1.5rem 0;padding:1.5rem;position:relative;overflow:hidden;box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff4d}.ou-section:before,.eo-section:before,.md-section:before{content:"";background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4) 0 0/200% 100%;height:4px;animation:3s ease-in-out infinite gradientFlow;position:absolute;top:0;left:0;right:0}.dark .ou-section,.dark .eo-section,.dark .md-section{background:linear-gradient(145deg,#1e293be6 0%,#0f172acc 100%);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a}.ou-cards,.md-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1rem;display:grid}.eo-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.25rem;margin-bottom:1rem;display:grid}.ou-card,.md-card{text-align:center;background:#f8fafc;border-radius:8px;padding:1rem}.eo-card{text-align:center;background:#f8fafc;border-radius:8px;padding:.5rem}.dark .ou-card,.dark .md-card,.dark .eo-card{background:#334155}.ou-card-title,.md-card-title,.eo-card-title{color:#1e293b;margin-bottom:.25rem;font-size:.875rem;font-weight:600}.dark .ou-card-title,.dark .md-card-title,.dark .eo-card-title{color:#e2e8f0}.ou-card-value,.md-card-value{color:#1e293b;margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.eo-card-value{color:#1e293b;margin-bottom:.25rem;font-size:1.25rem;font-weight:700}.dark .ou-card-value,.dark .md-card-value,.dark .eo-card-value{color:#e2e8f0}.muted{color:#6b7280;font-size:.875rem;font-weight:400}.dark .muted{color:#9ca3af}.ou-barline,.md-barline{background:#e5e7eb;border-radius:4px;height:12px;overflow:hidden}.eo-barline{background:#e5e7eb;border-radius:4px;height:20px;overflow:hidden}.dark .ou-barline,.dark .md-barline,.dark .eo-barline{background:#4b5563}.ou-fill,.md-fill,.eo-fill{height:100%;transition:width .3s}.ou-fill-under{background:#10b981}.ou-fill-equal{background:#6b7280}.ou-fill-over{background:#ef4444}.md-fill-match{background:#10b981}.md-fill-differ{background:#ef4444}.eo-fill-even{background:#10b981}.eo-fill-odd{background:#ef4444}.ou-seq,.md-seq,.eo-seq{margin-top:1rem}.ou-seq-header,.md-seq-header,.eo-seq-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.ou-seq-header span,.md-seq-header span,.eo-seq-header span{color:#1e293b;font-weight:500}.dark .ou-seq-header span,.dark .md-seq-header span,.dark .eo-seq-header span{color:#e2e8f0}.ou-seq-header button,.md-seq-header button,.eo-seq-header button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:4px;padding:.25rem .5rem;font-size:.75rem;transition:background .2s}.ou-seq-header button:hover,.md-seq-header button:hover,.eo-seq-header button:hover{background:#2563eb}.ou-chips,.md-chips,.eo-chips{flex-wrap:wrap;gap:.25rem;display:flex}.ou-chip,.md-chip,.eo-chip{color:#fff;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:600;display:flex}.ou-chip.under,.eo-chip.even,.md-chip.match{background:#10b981}.ou-chip.equal{background:#6b7280}.ou-chip.over,.eo-chip.odd,.md-chip.differ{background:#ef4444}@media (max-width:640px){.box{margin:.5rem;padding:1rem}.digits{grid-template-columns:repeat(5,1fr);gap:.25rem}.circle{width:50px;height:50px}.circle-num{font-size:1rem}.circle-pct{font-size:.625rem}.ou-cards,.md-cards,.eo-cards{grid-template-columns:1fr}.display{flex-direction:column;gap:.5rem}.controls{flex-direction:column;align-items:flex-start}}