@property --ccm-ring{syntax:"<number>";inherits:true;initial-value:0}.ccm{--ccm-paper:#fff6ee;--ccm-ink:#1a0d24;--ccm-navy:#0c0a1d;--ccm-coral:#ff8a3d;--ccm-pink:#ff3d8b;--ccm-violet:#8b5cff;--ccm-teal:#2fe0cf;--ccm-bg:var(--ccm-navy);--ccm-text:var(--ccm-paper);--ccm-card:#15112c;--ccm-body:#1e1840;--ccm-key:#241d4d;--ccm-line:#fff6ee1f;--ccm-muted:#b9b0d6;--ccm-shadow:#04030e99;--ccm-sunset:linear-gradient(100deg, #ffc65c 0%, var(--ccm-coral) 28%, var(--ccm-pink) 62%, var(--ccm-violet) 100%);--ccm-ad-clear-zone:150px;isolation:isolate;background:radial-gradient(120% 50% at 50% 0%, #2a1f5c, transparent 70%), radial-gradient(90% 60% at 100% 100%, #ff3d8b29, transparent 70%), var(--ccm-card);max-width:560px;color:var(--ccm-text);color-scheme:dark;font:inherit;-webkit-tap-highlight-color:transparent;border:1px solid #fff6ee1a;border-radius:28px;gap:16px;margin-inline:auto;padding:18px 14px 16px;line-height:1.4;display:grid;position:relative;overflow:clip;box-shadow:0 24px 60px -28px #04030ecc;container-type:inline-size}.ccm:before{content:"";background:linear-gradient(90deg, #ffc65c, var(--ccm-coral) 28%, var(--ccm-pink) 62%, var(--ccm-violet));height:3px;position:absolute;inset:0 0 auto}.ccm *,.ccm :before,.ccm :after{box-sizing:border-box}:where(.ccm) p{margin:0}:where(.ccm) button{font:inherit;color:inherit;cursor:pointer}.ccm button:focus-visible,.ccm textarea:focus-visible{outline:3px solid var(--ccm-teal);outline-offset:2px}.ccm-head{grid-template-columns:1fr auto auto;align-items:center;gap:8px;display:grid}.ccm-title{font-family:var(--font-display,inherit);letter-spacing:.01em;text-transform:uppercase;margin:0;font-size:1.9rem;font-weight:400;line-height:1;display:grid}.ccm-title span{color:var(--ccm-pink);font-family:var(--font-body,inherit);letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;font-weight:750}.ccm-streak{background:var(--ccm-body);min-height:40px;color:var(--ccm-muted);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:0 12px 0 9px;font-size:.78rem;font-weight:650;display:inline-flex;position:relative}.ccm-streak svg{width:18px;height:18px;fill:var(--ccm-coral);transform-origin:50% 90%}.ccm-streak b{color:var(--ccm-text);font-variant-numeric:tabular-nums;margin-right:3px;font-size:1.05rem;font-weight:800}.ccm-streak.is-due{box-shadow:inset 0 0 0 1px #ff8a3d73}.ccm-streak.is-due:after{content:"";border-radius:inherit;box-shadow:0 0 0 2px var(--ccm-coral);opacity:0;pointer-events:none;animation:2.6s ease-out infinite ccm-due;position:absolute;inset:0}.ccm-streak.is-due svg{animation:2.6s ease-in-out infinite ccm-ember}.ccm-streak.is-done [data-o=flame-label]{color:var(--ccm-teal)}.ccm-streak.is-done [data-o=flame-label]:before{content:"✓ "}@keyframes ccm-due{0%{opacity:.7;transform:scale(1)}70%,to{opacity:0;transform:scale(1.12,1.35)}}@keyframes ccm-ember{50%{transform:scale(1.14)}}.ccm-mute{border:1px solid var(--ccm-line);background:0 0;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.ccm-mute svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.ccm-tools{flex-wrap:wrap;grid-column:1/-1;justify-content:space-between;gap:8px;display:flex}.ccm-seg{background:var(--ccm-body);border-radius:999px;padding:3px;display:inline-flex}.ccm-seg button{min-height:38px;color:var(--ccm-muted);background:0 0;border:0;border-radius:999px;padding:0 14px;font-size:.86rem;font-weight:650}.ccm-seg button[aria-pressed=true]{background:var(--ccm-text);color:var(--ccm-navy)}.ccm-seg button:disabled{cursor:default;opacity:.55}.ccm-stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.ccm-stats>div{background:var(--ccm-body);border-radius:16px;align-content:start;gap:2px;padding:10px 12px;display:grid}.ccm-k{color:var(--ccm-muted);letter-spacing:.07em;text-transform:uppercase;font-size:.7rem;font-weight:650}.ccm-stats b{font-family:var(--font-display,inherit);font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:400;line-height:1.15}.ccm-stats small{color:var(--ccm-muted);font-size:.74rem;line-height:1.3}.ccm-progress{gap:8px;display:grid}.ccm-plabel{justify-content:space-between;gap:8px;font-size:.86rem;font-weight:600;display:flex}.ccm-plabel span:last-child{color:var(--ccm-muted);font-variant-numeric:tabular-nums}.ccm-track{background:var(--ccm-body);border-radius:999px;height:10px;margin-inline:2px 7px;position:relative}.ccm-fill{width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--ccm-sunset);transition:width .3s;position:absolute;inset:0 auto 0 0}.ccm-dot{top:50%;left:calc(var(--at) * 100%);border:2px solid var(--ccm-card);background:var(--ccm-body);width:14px;height:14px;box-shadow:0 0 0 1px var(--ccm-line);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.ccm-dot.is-earned{background:var(--ccm-text)}.ccm-marks{color:var(--ccm-muted);text-align:right;grid-template-columns:repeat(4,1fr);font-size:.72rem;display:grid}.ccm-marks .is-earned{color:var(--ccm-text);font-weight:700}.ccm-panel{text-align:center;align-content:center;gap:12px;min-height:140px;display:grid}.ccm-status{max-width:38ch;color:var(--ccm-muted);margin-inline:auto;font-size:.95rem;line-height:1.5}.ccm[data-phase=show] .ccm-panel,.ccm[data-phase=input] .ccm-panel{gap:6px}.ccm-round{color:var(--ccm-muted);letter-spacing:-.01em;font-size:1.45rem;font-weight:750;line-height:1}.ccm-round b{background:var(--ccm-sunset);color:#0000;min-width:1ch;font-family:var(--font-display,inherit);letter-spacing:0;font-variant-numeric:tabular-nums;-webkit-background-clip:text;background-clip:text;font-size:3.2rem;font-weight:400;display:inline-block}.ccm-round b.is-pop{animation:.34s cubic-bezier(.2,1.6,.4,1) ccm-pop}.ccm-phase{letter-spacing:-.02em;font-size:1.3rem;font-weight:750}.ccm[data-phase=input] .ccm-phase{color:var(--ccm-teal)}.ccm-phase.is-go{animation:.45s cubic-bezier(.2,1.5,.4,1) ccm-go}.ccm-count{color:var(--ccm-muted);font-variant-numeric:tabular-nums}@keyframes ccm-pop{0%{transform:scale(1.5)}}@keyframes ccm-go{0%{opacity:.2;transform:scale(.72)}}.ccm-cta{background:var(--ccm-text);min-height:54px;color:var(--ccm-navy);border:0;border-radius:16px;padding:0 20px;font-size:1rem;font-weight:750;transition:transform .12s,filter .12s}.ccm-cta:hover{filter:brightness(1.07)}.ccm-cta:active{transform:scale(.97)}.ccm-cta-go{background:var(--ccm-sunset);color:var(--ccm-ink);box-shadow:0 12px 28px -12px #ff3d8bbf}.ccm-actions.is-endless .ccm-cta-share{color:var(--ccm-text);box-shadow:inset 0 0 0 1px var(--ccm-line);background:0 0}.ccm-result{gap:8px;display:grid}.ccm-score{color:var(--ccm-muted);justify-items:center;display:grid}.ccm-score b{color:var(--ccm-text);font-family:var(--font-display,inherit);letter-spacing:0;font-variant-numeric:tabular-nums;font-size:4rem;font-weight:400;line-height:1;position:relative}.ccm-stamp{border:2px solid var(--ccm-pink);color:var(--ccm-pink);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-radius:6px;margin-left:10px;padding:4px 8px 3px;font-size:.78rem;font-weight:850;line-height:1.2;animation:.3s cubic-bezier(.3,1.5,.5,1) .12s both ccm-stamp;position:absolute;top:.15em;left:100%;transform:rotate(-9deg)}@keyframes ccm-stamp{0%{opacity:0;transform:rotate(-22deg)scale(2.6)}}.ccm-msg{margin-top:4px;font-size:1.08rem;font-weight:700}.ccm-badge-card{background:var(--ccm-body);text-align:left;border-radius:16px;align-items:center;gap:12px;margin:4px auto 0;padding:8px 18px 8px 8px;animation:.5s cubic-bezier(.2,1.3,.4,1) .35s both ccm-slide;display:flex;box-shadow:inset 0 0 0 1px #8b5cff99}.ccm-medal{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg, var(--ccm-coral), var(--ccm-pink));width:42px;height:46px;color:var(--ccm-ink);place-items:center;font-weight:850;display:grid}.ccm-badge-card small{color:var(--ccm-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;font-weight:700;display:block}.ccm-badge-card b{font-size:1.1rem}@keyframes ccm-slide{0%{opacity:0;transform:translateY(16px)scale(.94)}}.ccm-detail{color:var(--ccm-muted);font-size:.9rem}.ccm-share-preview{background:var(--ccm-body);text-wrap:balance;border-radius:12px;margin-top:6px;padding:10px 12px;font-size:.86rem;line-height:1.6}.ccm-share-text{border:1px solid var(--ccm-line);background:var(--ccm-body);width:100%;color:var(--ccm-text);text-align:left;resize:none;field-sizing:content;border-radius:12px;margin-top:6px;padding:10px 12px;font:.8rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.ccm-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.ccm-actions.is-endless{grid-template-columns:auto 1fr}.ccm-share-note{min-height:1.3em;color:var(--ccm-muted);font-size:.85rem}.ccm-burst{z-index:3;pointer-events:none;width:0;height:0;position:absolute}.ccm-burst i{background:var(--c);border-radius:2px;width:8px;height:11px;animation:1.1s cubic-bezier(.12,.75,.3,1) forwards ccm-confetti;position:absolute;top:-5px;left:-4px}.ccm-burst i:nth-child(3n){border-radius:50%;width:7px;height:7px}@keyframes ccm-confetti{0%{opacity:1;transform:translate(0)rotate(0)scale(.5)}65%{opacity:1}to{opacity:0;transform:translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)) scale(1)}}.ccm-pad{--u:clamp(40px, 13cqi, 54px);--o:7px;--cluster:calc(3 * var(--u) + 2 * var(--o));touch-action:manipulation;-webkit-user-select:none;user-select:none;background:linear-gradient(#0000 45%,#8b5cff29),#1e1840e0;border-radius:28px;gap:16px;padding:14px 12px 16px;transition:--ccm-ring .22s ease-out;display:grid;position:relative;box-shadow:inset 0 1px #fff6ee12}.ccm-pad:before{content:"";background:conic-gradient(var(--ccm-coral), var(--ccm-pink) calc(var(--ccm-ring) * 180deg), var(--ccm-violet) calc(var(--ccm-ring) * 360deg), #fff6ee1a 0);-webkit-mask-composite:xor;opacity:0;pointer-events:none;border-radius:35px;padding:3px;transition:opacity .3s;position:absolute;inset:-7px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.ccm[data-phase=show] .ccm-pad:before,.ccm[data-phase=input] .ccm-pad:before{opacity:1}.ccm-pad:after{content:"";z-index:-1;opacity:.7;pointer-events:none;background:radial-gradient(60% 45% at 50% 100%,#ff3d8b99,#0000 75%),radial-gradient(60% 55% at 10% 85%,#ff8a3d57,#0000 75%),radial-gradient(60% 55% at 90% 80%,#8b5cff8c,#0000 75%),radial-gradient(70% 40% at 50% 0,#8b5cff38,#0000 80%);border-radius:40px;transition:opacity .5s;animation:9s ease-in-out infinite alternate ccm-glow;position:absolute;inset:-12px -8px -14px}.ccm[data-phase=input] .ccm-pad:after{opacity:1}@keyframes ccm-glow{0%{transform:translateY(6px)scale(.98)}to{transform:translateY(-5px)scale(1.03)}}.ccm-shoulders,.ccm-clusters{justify-content:space-between;width:100%;max-width:440px;margin-inline:auto;display:flex}.ccm-shoulders>div{width:var(--cluster);gap:8px;display:flex}.ccm-cluster{grid-template:repeat(3, var(--u)) / repeat(3, var(--u));padding:var(--o);display:grid}.ccm-cluster .ccm-key{margin:calc(-1 * var(--o))}.k-up,.k-n{grid-area:1/2}.k-left,.k-w{grid-area:2/1}.k-right,.k-e{grid-area:2/3}.k-down,.k-s{grid-area:3/2}.ccm-key{--c:var(--ccm-text);--on:var(--ccm-navy);--g:var(--ccm-text);background:linear-gradient(#2e2563, var(--ccm-key));min-width:56px;min-height:56px;color:var(--g);box-shadow:inset 0 1px 0 #fff6ee1a, 0 4px 0 #07051a, 0 10px 18px var(--ccm-shadow);border:1px solid #fff6ee14;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:0;transition:background .1s,color .1s,box-shadow .12s,transform .12s;display:flex;position:relative}.ccm-dpad .ccm-key{border-radius:16px}.ccm-shoulders .ccm-key{letter-spacing:.02em;border-radius:18px 18px 12px 12px;flex:1;font-size:1rem;font-weight:750}.k-n{--c:var(--ccm-teal);--g:var(--ccm-teal);--on:var(--ccm-ink)}.k-e{--c:#ff6b6b;--g:#ff7b7b;--on:var(--ccm-ink)}.k-s{--c:#7aa8ff;--g:#8fb6ff;--on:var(--ccm-ink)}.k-w{--c:#ff8fd8;--g:#ff8fd8;--on:var(--ccm-ink)}.ccm-key svg{aspect-ratio:1;fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:44%;height:auto}.ccm-key svg.ccm-arrow{fill:currentColor;stroke-width:1.5px;width:40%}.ccm-label{font-size:1.4rem;font-weight:800}.ccm-key.is-lit{background:var(--c);color:var(--on);box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 32%, transparent), 0 0 34px color-mix(in srgb, var(--c) 70%, transparent);border-color:#0000;transform:scale(1.08)}.ccm-shoulders .ccm-key.is-lit{--c:var(--ccm-pink);--on:var(--ccm-ink);background:var(--ccm-sunset)}.ccm-key.is-wrong{box-shadow:0 0 0 4px var(--ccm-pink), 0 0 26px #ff3d8b99;animation:.32s ccm-shake}.ccm[data-phase=show] .ccm-key{cursor:default}@keyframes ccm-shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.ccm-kbd{border:1px solid var(--ccm-line);color:var(--ccm-muted);border-radius:5px;padding:0 5px;font:600 .62rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;display:none}.ccm-key.is-lit .ccm-kbd{color:inherit;border-color:currentColor}@media (hover:hover) and (pointer:fine){.ccm-kbd{display:block}.ccm-key svg{width:34%}.ccm-key svg.ccm-arrow{width:32%}.ccm-label{font-size:1.15rem;line-height:1.1}}.ccm-note{color:var(--ccm-muted);text-align:center;font-size:.8rem}.ccm-sr,.ccm-vh{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.ccm *,.ccm :before,.ccm :after{transition:none!important;animation:none!important}.ccm-key.is-lit{transform:none}.ccm-burst{display:none}}