.chroma-game{-webkit-font-smoothing:antialiased;background:#000;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;position:fixed;inset:0}.chroma-card{background:#000;width:100%;height:100%;position:relative;overflow:hidden}@media (min-width:768px){.chroma-card{border-radius:16px;width:476px;max-height:780px;box-shadow:0 0 0 1px #ffffff0f,0 25px 60px #0009}}.chroma-screen{color:#fff;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.chroma-back-btn{z-index:10;color:#fff9;cursor:pointer;background:#ffffff14;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .15s;display:flex;position:absolute;top:16px;left:16px}.chroma-back-btn:hover{color:#fff;background:#ffffff24}.chroma-intro{background:#000;gap:0}.chroma-intro__content{flex-direction:column;align-items:center;gap:24px;display:flex}.chroma-title{letter-spacing:.14em;-webkit-text-fill-color:transparent;background:conic-gradient(#ff6b6b,#fdcb6e,#55efc4,#00cec9,#6c5ce7,#fd79a8,#ff6b6b);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(52px,14vw,88px);font-weight:700;line-height:1;animation:6s linear infinite chromaHueRotate}@keyframes chromaHueRotate{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}.chroma-subtitle{color:#ffffff4d;text-align:center;margin:0;font-size:13px;line-height:1.7}.chroma-how-to{align-items:center;gap:12px;display:flex}.chroma-how-to__step{flex-direction:column;align-items:center;gap:6px;display:flex}.chroma-how-to__icon{background:#ffffff0d;border:1px solid #ffffff0f;border-radius:14px;justify-content:center;align-items:center;width:52px;height:52px;font-size:28px;line-height:1;display:flex}.chroma-how-to__label{color:#ffffff73;white-space:nowrap;font-size:11px;font-weight:500}.chroma-how-to__arrow{color:#ffffff26;margin-bottom:18px;font-size:14px}.chroma-intro__row{gap:8px;width:100%;display:flex}.chroma-intro__row .chroma-btn{flex:1}.chroma-btn--quick{color:#fff9}.chroma-btn--daily{color:#ffffffb3;background:#ffffff0f;border:1px solid #ffffff14}.chroma-btn--daily:hover{color:#fff;background:#ffffff1f}.chroma-intro__actions{flex-direction:column;align-items:center;gap:10px;width:100%;max-width:220px;margin-top:16px;display:flex}.chroma-play-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:14px;justify-content:center;align-items:center;width:100%;padding:14px 32px;font-size:15px;font-weight:700;transition:all .15s;display:flex;position:relative;overflow:hidden}.chroma-play-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ffffff26}.chroma-play-btn:active{transform:translateY(0)}.chroma-play-btn__label{z-index:1;letter-spacing:.03em;position:relative}.chroma-play-btn__ring{background:conic-gradient(from var(--ring-angle,0deg),#ff6b6b,#fdcb6e,#55efc4,#00cec9,#6c5ce7,#fd79a8,#ff6b6b);z-index:0;opacity:0;border-radius:16px;transition:opacity .3s;animation:10s linear infinite ringSpin;position:absolute;inset:-2px}.chroma-play-btn:hover .chroma-play-btn__ring{opacity:1}@property --ring-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ringSpin{to{--ring-angle:360deg}}.chroma-countdown{transition:background-color .45s}.chroma-countdown__round{color:#ffffff80;letter-spacing:.06em;text-shadow:0 1px 4px #0000004d;font-size:12px;font-weight:600;position:absolute;top:20px;left:20px}.chroma-countdown__text{text-transform:lowercase;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px #0000004d;text-align:right;font-size:clamp(56px,18vw,92px);font-weight:500;position:absolute;top:20px;right:24px}.chroma-countdown--hard{animation:.15s ease-in-out infinite hardShake}@keyframes hardShake{0%,to{transform:translate(0)}25%{transform:translate(-3px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-1px,-3px)}}.chroma-countdown--hard .chroma-countdown__text{text-shadow:-2px 0 red,2px 0 #0ff,0 2px 12px #0006}.chroma-memorize{transition:background-color .15s}.chroma-memorize__round{color:#fff9;letter-spacing:.06em;text-shadow:0 1px 6px #0009;font-size:12px;font-weight:600;position:absolute;top:20px;left:20px}.chroma-memorize__timer{letter-spacing:-.02em;color:#fff;text-shadow:0 2px 16px #00000080;font-variant-numeric:tabular-nums;font-size:clamp(56px,18vw,92px);font-weight:500;line-height:1;position:absolute;top:12px;right:20px}.chroma-memorize__hint{letter-spacing:.06em;color:#ffffffb3;text-shadow:0 1px 8px #00000080;text-align:center;font-size:14px;font-weight:500;position:absolute;bottom:40px}.chroma-memorize__timer-last{opacity:.4}.chroma-memorize__timer-label{letter-spacing:.15em;color:#ffffff59;text-shadow:0 1px 4px #0006;font-size:10px;font-weight:600;position:absolute;top:calc(16px + clamp(56px,18vw,92px));right:20px}.chroma-picker{justify-content:flex-end;align-items:flex-start;transition:background-color 80ms}.chroma-picker__round{color:#ffffff80;letter-spacing:.06em;text-shadow:0 1px 4px #0006;z-index:2;font-size:12px;font-weight:600;position:absolute;top:20px;left:20px}.chroma-picker__hint{color:#ffffff59;text-shadow:0 1px 4px #0006;z-index:2;letter-spacing:.03em;font-size:12px;font-weight:500;position:absolute;bottom:28px;left:140px}.chroma-picker__sliders{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1;background:#00000040;justify-content:center;align-items:stretch;gap:2px;width:120px;padding:50px 14px 60px;display:flex;position:absolute;top:0;bottom:0;left:0}.chroma-slider{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.chroma-slider__track{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:14px;width:28px;height:100%;position:relative;box-shadow:inset 0 1px 2px #0000004d}.chroma-slider__thumb{pointer-events:none;border:2.5px solid #fff;border-radius:50%;width:28px;height:28px;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 6px #0006,0 0 0 1px #0000001a}.chroma-slider__label{letter-spacing:.1em;color:#ffffff4d;font-size:9px;font-weight:600}.chroma-go-btn{color:#000;letter-spacing:.04em;cursor:pointer;z-index:2;background:#fff;border:none;border-radius:50%;width:50px;height:50px;font-size:14px;font-weight:800;transition:transform .15s;position:absolute;bottom:24px;right:24px;box-shadow:0 4px 16px #0000004d}.chroma-go-btn:hover{transform:scale(1.06)}.chroma-go-btn:active{transform:scale(.94)}.chroma-result{padding:0}.chroma-result__halves{flex-direction:column;display:flex;position:absolute;inset:0}.chroma-result__half{flex:1;transition:background-color .3s;position:relative}.chroma-result__half-label{letter-spacing:.12em;font-size:10px;font-weight:600;position:absolute}.chroma-result__half-hsb{letter-spacing:.02em;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:11px;font-weight:500;position:absolute}.chroma-result__half--guess .chroma-result__half-label{top:16px;left:16px}.chroma-result__half--guess .chroma-result__half-hsb{top:16px;right:16px}.chroma-result__half--target .chroma-result__half-label{bottom:16px;left:16px}.chroma-result__half--target .chroma-result__half-hsb{bottom:16px;right:16px}.chroma-result__overlay{z-index:1;text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:relative}.chroma-result__round{color:#ffffff80;letter-spacing:.06em;text-shadow:0 1px 4px #0006;font-size:12px;font-weight:600}.chroma-result__score{font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 20px #00000080;font-size:clamp(64px,18vw,92px);font-weight:700;line-height:1}.chroma-result__feedback{color:#ffffffb3;text-shadow:0 1px 8px #0006;font-size:16px;font-weight:500}.chroma-next-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;pointer-events:auto;letter-spacing:.02em;background:#ffffff26;border:none;border-radius:28px;margin-top:12px;padding:12px 36px;font-size:14px;font-weight:600;transition:all .15s}.chroma-next-btn:hover{background:#ffffff40}.chroma-swatch{border-radius:12px;width:56px;height:56px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000004d}.chroma-swatch--small{border-radius:10px;width:48px;height:48px}.chroma-swatch--split{background:0 0}.chroma-swatch__target{clip-path:polygon(0 0,100% 0,0 100%);position:absolute;inset:0}.chroma-swatch__guess{clip-path:polygon(100% 0,100% 100%,0 100%);position:absolute;inset:0}.chroma-swatch__divider{pointer-events:none;background:linear-gradient(135deg,#0000 calc(50% - .5px),#ffffff26 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px));position:absolute;inset:0}.chroma-final{background:#000}.chroma-final__content{flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex}.chroma-final__tier{letter-spacing:.1em;text-transform:uppercase;color:#ffffff80;font-size:14px;font-weight:600}.chroma-final__score-row{align-items:baseline;gap:6px;display:flex}.chroma-final__total{font-variant-numeric:tabular-nums;letter-spacing:-.03em;-webkit-text-fill-color:transparent;background:conic-gradient(#ff6b6b,#fdcb6e,#55efc4,#00cec9,#6c5ce7,#fd79a8,#ff6b6b);-webkit-background-clip:text;background-clip:text;font-size:clamp(56px,16vw,82px);font-weight:700;line-height:1;animation:6s linear infinite chromaHueRotate}.chroma-final__max{color:#fff3;font-size:22px;font-weight:500}.chroma-final__desc{color:#fff6;margin-bottom:8px;font-size:15px}.chroma-final__swatches{flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0;display:flex}.chroma-final__swatch-card{flex-direction:column;align-items:center;gap:5px;display:flex}.chroma-final__swatch-score{color:#ffffff80;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.chroma-final__actions{gap:10px;margin-top:16px;display:flex}.chroma-btn{cursor:pointer;letter-spacing:.02em;border:none;border-radius:28px;padding:14px 28px;font-size:14px;font-weight:600;transition:all .15s}.chroma-btn--primary{color:#000;background:#fff}.chroma-btn--primary:hover{transform:scale(1.02);box-shadow:0 6px 20px #ffffff26}.chroma-btn--primary:active{transform:scale(.97)}.chroma-btn--ghost{color:#ffffff80;background:#ffffff14}.chroma-btn--ghost:hover{color:#fff;background:#ffffff24}.chroma-leaderboard{background:#000;overflow-y:auto}.chroma-leaderboard__content{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:380px;margin:0 auto;padding:32px 24px;display:flex}.chroma-leaderboard__your-score{text-align:center}.chroma-leaderboard__daily-badge{letter-spacing:.08em;color:#fff6;background:#ffffff0f;border:1px solid #ffffff14;border-radius:20px;padding:6px 16px;font-size:12px;font-weight:600}.chroma-leaderboard__label{letter-spacing:.12em;color:#fff6;margin-bottom:4px;font-size:11px;font-weight:600}.chroma-leaderboard__score-row{align-items:baseline;gap:6px;display:flex}.chroma-leaderboard__max{color:#fff3;font-size:20px;font-weight:500}.chroma-leaderboard__total{font-variant-numeric:tabular-nums;-webkit-text-fill-color:transparent;background:conic-gradient(#ff6b6b,#fdcb6e,#55efc4,#00cec9,#6c5ce7,#fd79a8,#ff6b6b);-webkit-background-clip:text;background-clip:text;font-size:clamp(48px,14vw,72px);font-weight:700;line-height:1;animation:6s linear infinite chromaHueRotate}.chroma-leaderboard__swatches{justify-content:center;gap:10px;display:flex}.chroma-leaderboard__list{flex-direction:column;gap:6px;width:100%;max-width:320px;display:flex}.chroma-leaderboard__list-title{letter-spacing:.12em;color:#ffffff4d;text-transform:uppercase;margin-bottom:4px;font-size:11px;font-weight:600}.chroma-leaderboard__entry{background:#ffffff0a;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;display:flex}.chroma-leaderboard__entry--first{background:#ffffff14}.chroma-leaderboard__rank{color:#ffffff4d;text-align:center;font-variant-numeric:tabular-nums;min-width:24px;font-size:14px;font-weight:700}.chroma-leaderboard__entry--first .chroma-leaderboard__rank{color:#fdcb6e}.chroma-leaderboard__name{color:#ffffffb3;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;font-weight:500;overflow:hidden}.chroma-leaderboard__entry-score{color:#fff;font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}.chroma-share-btn{margin-top:4px}.chroma-leaderboard__save-row{align-items:center;gap:8px;width:100%;margin-top:4px;display:flex}.chroma-leaderboard__name-input{color:#fff;background:#ffffff14;border:1px solid #ffffff1f;border-radius:10px;outline:none;flex:1;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .15s}.chroma-leaderboard__name-input::placeholder{color:#ffffff59}.chroma-leaderboard__name-input:focus{border-color:#ffffff4d}.chroma-leaderboard__save-btn{flex-shrink:0;padding:10px 18px;font-size:14px}.chroma-leaderboard__save-btn:disabled{opacity:.4;cursor:default}.chroma-leaderboard__saved-msg{text-align:center;color:#fff9;width:100%;padding:10px 0;font-size:14px}.chroma-challenge-btn{margin-top:4px}.chroma-challenge-setup{background:#000}.chroma-challenge-setup__content{flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.chroma-challenge-setup__icon{font-size:48px;line-height:1}.chroma-challenge-setup__title{color:#fff;margin:0;font-size:22px;font-weight:700}.chroma-challenge-setup__desc{color:#ffffff73;text-align:center;margin:0;font-size:14px;line-height:1.6}.chroma-challenge-setup__link-box{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;align-items:center;gap:6px;margin:8px 0;padding:20px 32px;transition:all .15s;display:flex}.chroma-challenge-setup__link-box:hover{background:#ffffff1a;border-color:#ffffff26}.chroma-challenge-setup__code{letter-spacing:.1em;color:#fff;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:28px;font-weight:700}.chroma-challenge-setup__copy-hint{color:#ffffff4d;letter-spacing:.04em;font-size:11px;font-weight:500}@media (max-width:400px){.chroma-picker__sliders{width:100px;padding:50px 6px 60px}.chroma-slider__track{width:24px}.chroma-slider__thumb{width:24px;height:24px}}