.cl-home,.cl-play,.cl-result-wrap{gap:var(--space-4);scroll-margin-top:80px;display:grid}.cl-play{width:100%;max-width:440px;margin:0 auto}.cl-title{letter-spacing:-.02em;word-break:keep-all;margin:0;font-size:clamp(1.3rem,6vw,1.65rem);font-weight:800}.cl-sub{color:var(--muted);margin:4px 0 0;font-weight:600}.cl-kicker{color:var(--muted);margin:0;font-weight:700}.cl-note{text-align:center;color:var(--muted);margin:0;font-size:.85rem;font-weight:600}.cl-hero{gap:var(--space-3);padding:var(--space-6);display:grid}.cl-hero-art{justify-content:center;align-items:center;gap:10px;height:150px;display:flex;position:relative}.cl-hero-art span{background:var(--tiger-500);width:48px;height:48px;box-shadow:var(--shadow-float);border-radius:14px;animation:6.5s linear infinite cl-hue,2.4s ease-in-out infinite bob}.cl-hero-art span:nth-child(2n){margin-top:30px}@keyframes cl-hue{to{filter:hue-rotate(360deg)}}.cl-hero-tiger{position:absolute;bottom:-18px;right:-4px}.cl-steps{grid-template-columns:repeat(5,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.cl-steps li{background:var(--cream-50);height:34px;color:var(--muted);font-variant-numeric:tabular-nums;border-radius:10px;place-items:center;font-size:.85rem;font-weight:800;display:grid}.cl-steps .is-now{background:var(--bear-900);color:var(--bg)}.cl-steps .is-done{color:var(--bg);text-shadow:0 1px 2px #00000073;animation:pop .3s var(--ease) both}.cl-swatch{aspect-ratio:1;width:100%;max-height:46vh;box-shadow:var(--shadow-float);border-radius:28px;justify-self:center;position:relative;overflow:hidden}.cl-show{animation:.35s cubic-bezier(.2,1.2,.4,1) both cl-in}@keyframes cl-in{0%{opacity:0;transform:scale(.85)rotate(-3deg)}}.cl-timer{border-radius:var(--radius-pill);background:color-mix(in oklab, var(--bg) 85%, transparent);transform-origin:0;height:8px;animation:3s linear both cl-timer;position:absolute;bottom:16px;left:16px;right:16px}@keyframes cl-timer{to{transform:scaleX(0)}}.cl-make{aspect-ratio:16/10;transition:background 60ms;animation:.4s ease-out both cl-blink}@keyframes cl-blink{0%{filter:brightness(0)contrast(0)}}.cl-split{display:flex}.cl-half{flex:1;align-items:flex-end;padding:14px;display:flex}.cl-half.is-guess{animation:.45s cubic-bezier(.2,1.1,.4,1) both cl-slide}@keyframes cl-slide{0%{transform:translate(100%)}}.cl-half em{border-radius:var(--radius-pill);background:color-mix(in oklab, var(--bg) 85%, transparent);color:var(--fg);padding:3px 10px;font-size:.85rem;font-style:normal;font-weight:800}.cl-pts{background:var(--bg);min-width:108px;color:var(--fg);text-align:center;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-float);border-radius:22px;padding:10px 18px;font-size:2.6rem;font-weight:900;animation:.45s cubic-bezier(.2,1.4,.4,1) .3s both cl-pts;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes cl-pts{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}}.cl-hint{justify-content:space-between;align-items:center;margin:0;font-weight:800;display:flex}.cl-hint span{border-radius:var(--radius-pill);background:var(--tiger-50);color:var(--bear-900);padding:6px 12px}.cl-hint small{color:var(--muted);font-weight:700}.cl-sliders{gap:var(--space-3);display:grid}.cl-slider{gap:6px;display:grid}.cl-slider-label{font-size:.9rem;font-weight:800}.cl-track{border-radius:var(--radius-pill);height:40px;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--fg) 12%, transparent);touch-action:none;cursor:pointer;position:relative}.cl-track:focus-visible{outline:3px solid var(--tiger-500);outline-offset:3px}.cl-thumb{border:4px solid var(--bg);pointer-events:none;border-radius:50%;width:34px;height:34px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000059}.cl-result{position:relative;overflow:hidden}.cl-result>:not(.confetti){z-index:2;position:relative}.cl-result .mascot{margin:0 auto}.cl-stamp{margin:var(--space-2) 0 0;border:3px solid var(--bad-600);color:var(--bad-600);border-radius:10px;padding:4px 14px;font-size:1.15rem;font-weight:800;animation:.42s cubic-bezier(.2,1.4,.4,1) 1s both cl-stamp;display:inline-block;transform:rotate(-5deg)}@keyframes cl-stamp{0%{opacity:0;transform:rotate(-5deg)scale(2.2)}70%{opacity:1;transform:rotate(-5deg)scale(.94)}to{transform:rotate(-5deg)scale(1)}}.cl-marks{margin:var(--space-3) 0 0;letter-spacing:4px;font-size:1.5rem;animation:.4s cubic-bezier(.2,1.3,.4,1) 1.25s both cl-late}.cl-pairs{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.cl-pair{text-align:center;justify-items:center;gap:4px;margin:0;display:grid}.cl-dot{aspect-ratio:1;width:100%;box-shadow:var(--shadow-float);border-radius:50%;position:relative;overflow:hidden}.cl-dot span{position:absolute;inset:0}.cl-dot span:last-child{clip-path:polygon(100% 0,100% 100%,0 100%)}.cl-pair.is-best .cl-dot{outline:3px solid var(--tiger-500);outline-offset:2px}.cl-pair figcaption{line-height:1.2;display:grid}.cl-pair b{font-variant-numeric:tabular-nums;font-size:1rem}.cl-pair small{color:var(--muted);font-size:.7rem;font-weight:700}.cl-late{animation:.4s cubic-bezier(.2,1.1,.4,1) both cl-late}@keyframes cl-late{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:none}}.cl-actions{gap:var(--space-2);display:grid}.cl-actions .btn{width:100%}@media (min-width:720px){.cl-actions{grid-template-columns:1fr 1fr}.cl-actions .btn:first-child{grid-column:1/-1}}.cl-shine{position:relative;overflow:hidden}.cl-shine:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff8c,#0000);width:30%;animation:3.6s ease-in-out 1.2s infinite cl-shine;position:absolute;top:0;bottom:0;left:-40%;transform:skew(-20deg)}@keyframes cl-shine{0%,70%{left:-40%}to{left:130%}}.cl-toast{left:50%;bottom:max(24px, env(safe-area-inset-bottom));z-index:110;border-radius:var(--radius-md);background:var(--bear-900);max-width:calc(100% - 32px);color:var(--bg);box-shadow:var(--shadow-float);animation:rise .2s var(--ease) both;padding:12px 18px;font-weight:700;position:fixed;transform:translate(-50%)}