:root{--bg: #ffffff;--bg-glow-1: rgba(147, 180, 255, .15);--bg-glow-2: rgba(200, 160, 255, .1);--card-bg: #0a0a0a;--card-radius: 20px;--card-shadow: 0px 4px 16px 0px rgba(0,0,0,.35), 0px 34px 44px 0px rgba(0,0,0,.17);--text-light: #ffffff;--text-muted: #adadad;--text-dark-muted: rgba(255, 255, 255, .45);--text-dark: #000;--font: "Suisse Intl S Alt", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;--ease: cubic-bezier(.4, 0, .2, 1);--transition: .4s var(--ease)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}body{font-family:var(--font);background:var(--bg);height:100dvh;margin:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 30% 20%,var(--bg-glow-1),transparent),radial-gradient(ellipse 70% 50% at 70% 80%,var(--bg-glow-2),transparent);pointer-events:none;z-index:0}header{width:100%;max-width:700px;padding:20px 28px;display:flex;justify-content:flex-start;align-items:center;z-index:1}.logo{font-weight:500;font-size:21px;color:#000;letter-spacing:-.84px}main{flex:1;display:flex;align-items:center;justify-content:center;z-index:1;padding:0 20px 20px;width:100%}.card{width:100%;max-width:900px;aspect-ratio:1 / 1;max-height:90vh;background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);overflow:hidden;position:relative;color:var(--text-light);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}#phase-container{width:100%;flex:1;position:relative;display:flex;flex-direction:column}#phase-container>*{flex:1}.auth-error{padding:56px 40px;text-align:center;animation:fadeIn .5s var(--ease)}.auth-error h2{font-size:24px;font-weight:500;letter-spacing:-.48px;margin-bottom:16px}.auth-error p{color:var(--text-muted);font-size:15px;line-height:1.6}.intro{padding:48px 40px;animation:fadeIn .6s var(--ease)}.intro h1{font-size:92px;font-weight:500;letter-spacing:-5.52px;line-height:1;margin-bottom:20px;color:#fff}.intro p{color:var(--text-muted);font-size:18px;letter-spacing:-.36px;font-weight:500;line-height:1.2;margin-bottom:16px;max-width:380px}.intro .player-name{color:#ffffffa6;font-size:13px;font-weight:500;margin-top:20px;letter-spacing:0px}@property --ring-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes ringSpin{to{--ring-angle: 360deg}}.action-btn{width:64px;height:64px;border-radius:50%;background:#fff;border:none;color:#000;font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:28px;transition:transform .3s ease,background .3s ease,color .3s ease;outline:none;position:relative;overflow:visible;z-index:1;box-shadow:0 2px 8px #00000026;--ring-dur: 10s}.action-btn:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--ring-angle),#ff6b6b,#fdcb6e,#55efc4,#00cec9,#6c5ce7,#fd79a8,#ff6b6b);pointer-events:none;opacity:0;animation:ringSpin var(--ring-dur) linear infinite;transition:opacity .35s ease;z-index:-1}.action-btn svg{width:29px;height:29px;position:relative;z-index:2}.action-btn:hover{transform:scale(1.04)}.action-btn:hover:after{opacity:1}.action-btn:active{transform:scale(.94)!important}.countdown-phase{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.countdown-number{font-family:var(--font);font-size:min(160px,40vw);font-weight:500;letter-spacing:-6px;line-height:1;opacity:0;transform:scale(.3)}@keyframes countdownZoom{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.15)}50%{opacity:1;transform:scale(.95)}70%{opacity:1;transform:scale(1.02)}85%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.countdown-number.countdown-zoom{animation:countdownZoom .95s cubic-bezier(.34,1.56,.64,1) forwards}.memorize{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;animation:colorFadeIn .6s var(--ease)}.overlay-label{position:absolute;font-size:12px;font-weight:500;letter-spacing:1.92px;z-index:2;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.round-label{top:30px;left:30px}.brand-label{bottom:30px;right:30px;font-size:14px;letter-spacing:-.56px;opacity:.5}.countdown{position:absolute;top:6px;right:16px;font-family:var(--font);font-size:min(92px,18vw);font-weight:500;letter-spacing:-2.76px;font-variant-numeric:tabular-nums;line-height:1;text-align:right;z-index:2;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:none;padding:0;border-radius:0}.countdown .timer-int{display:inline-block;position:relative}.countdown .timer-dec{display:inline-block;opacity:.52}.recreate{display:flex;width:100%;height:100%;position:relative;animation:fadeIn .5s var(--ease)}.sliders-panel{display:flex;gap:0;padding:0;width:min(150px,40%);height:100%;z-index:2;flex-shrink:0;border-radius:var(--card-radius) 0 0 var(--card-radius);overflow:hidden}.slider-group{display:flex;flex-direction:column;align-items:center;height:100%;flex:1}.slider-track{width:100%;flex:1;border-radius:0;position:relative;cursor:pointer;touch-action:none;overflow:visible}@keyframes numSlideIn{0%{transform:translateY(-22%);filter:blur(4px);opacity:0}to{transform:translateY(0);filter:blur(0);opacity:1}}.num-in-fast{animation:numSlideIn .07s ease-out forwards}.score-int,.score-dot,.score-dec{display:inline-block}.slider-track.hue-track{background-image:linear-gradient(to bottom,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.slider-track:focus{outline:none;box-shadow:inset 0 0 0 2px #ffffff59}.slider-track:focus .slider-thumb{box-shadow:0 0 0 3px #ffffff80,0 4px 10px #0006;transform:translate(-50%) scale(1.15)}.slider-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:none;position:absolute;left:50%;transform:translate(-50%);pointer-events:none;box-shadow:0 4px 10px #0006;z-index:3;transition:box-shadow .2s,transform .15s ease}.slider-label{font-size:10px;font-weight:700;color:#ffffff59;text-transform:uppercase;letter-spacing:1px}.color-preview{flex:1;position:relative;transition:background-color .08s}.preview-hsb{display:none}.round-label{position:absolute;top:30px;left:30px;font-size:16px;font-weight:600;z-index:2;pointer-events:none;letter-spacing:-.32px}#recreate-brand{position:absolute;top:30px;right:30px;font-size:18px;font-weight:600;z-index:2;pointer-events:none;letter-spacing:-.5px}.submit-btn{position:absolute;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;border:none;background:#fff;color:#000;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:transform .15s ease;outline:none;padding:0}.submit-btn svg{width:24px;height:24px}.submit-btn:hover{transform:scale(1.02)}.submit-btn:active{transform:scale(.97)}.reveal{width:100%;height:400px;display:flex;flex-direction:column;position:relative;animation:fadeIn .4s var(--ease)}.reveal-top{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.reveal-bottom{flex:1;position:relative;overflow:hidden}.reveal-score{font-family:var(--font);font-size:min(92px,18vw);font-weight:500;letter-spacing:-2.76px;line-height:1;z-index:2}.reveal-quip{font-size:18px;font-weight:500;letter-spacing:-.36px;text-align:center;max-width:280px;line-height:1.2;margin-top:8px;z-index:2}.reveal-info{position:absolute;bottom:14px;left:20px;z-index:2}.reveal-info-label{font-size:11px;font-weight:500;opacity:.5}.reveal-info-value{font-size:13px;font-weight:700}.next-btn{position:absolute;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;border:none;background:#fff;color:#000;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:transform .15s ease;outline:none;padding:0}.next-btn svg{width:24px;height:24px}.next-btn:hover{transform:scale(1.02)}.results{padding:40px 36px;text-align:center;animation:fadeIn .6s var(--ease);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.results-total{font-family:var(--font);font-size:min(92px,22vw);font-weight:500;letter-spacing:-5.52px;line-height:.97;animation:scorePopIn .7s var(--ease)}.results-max{font-size:18px;color:var(--text-muted);font-weight:500;margin-top:2px}.results-emojis{font-size:36px;margin-top:24px;letter-spacing:6px;animation:fadeIn .8s var(--ease) .3s both}.results-breakdown{display:flex;gap:12px;margin-top:20px;animation:fadeIn .8s var(--ease) .5s both}.round-score-chip{padding:6px 12px;border-radius:12px;background:#ffffff14;font-size:13px;font-weight:600;color:#ffffffb3}.results-status{margin-top:28px;font-size:14px;font-weight:500;animation:fadeIn .8s var(--ease) .7s both}.results-status.success{color:#6bcb77}.results-screen{display:flex;flex-direction:column;width:100%;height:100%;max-width:480px;margin:0 auto}.result-colors{display:flex;width:100%;height:80px;margin-top:10px;margin-bottom:25px}.result-color-box{flex:1;position:relative}.result-half{position:absolute;inset:0;width:100%;height:100%}.result-label{position:absolute;top:4px;left:6px;font-size:11px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);font-family:var(--font)}.results-card{width:100%;background:#111;border-radius:12px;padding:16px;border:1px solid #333;text-align:left}.results-status.submitting{color:var(--text-muted)}.results-status.error{color:#ef233c}.share-btn{margin-top:16px;padding:14px 28px;border-radius:58px;border:none;background:#fff;color:#000;font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:-.28px;cursor:pointer;transition:transform .15s ease,background .3s ease,color .3s ease;animation:fadeIn .8s var(--ease) .9s both}.share-btn:hover{opacity:.9}.share-btn:active{transform:scale(.97)}.share-btn.copied{background:#14b861;color:#fff}footer{padding:16px 28px;z-index:1;color:#00000059;font-size:11px;font-weight:500;letter-spacing:-.22px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes colorFadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes countPulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes scorePopIn{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@media (max-width: 580px){body{background:var(--card-bg)}main{padding:0;align-items:stretch}header{background:var(--card-bg)}.card{border-radius:0;max-width:100%;aspect-ratio:auto;height:auto;min-height:100dvh;max-height:none;border:none;box-shadow:none}.intro{padding:30px 28px}.intro h1{font-size:min(72px,18vw);letter-spacing:-2.16px}.intro p{font-size:14px;line-height:17px;letter-spacing:-.28px}.slider-track{width:28px}.results-emojis{font-size:28px;letter-spacing:4px}}@media (max-width: 380px){.intro h1{font-size:44px}.slider-track{width:26px}.sliders-panel{gap:4px;padding:16px 8px 16px 10px}}