.canvas.colorfle{--cf-ink:#26232a;--cf-mute:#6e6870;--cf-plate:#f7f5f1;--cf-edge:#cfc8bc;--cf-well:#ece8e1;--cf-btn:#f2b544;--cf-btn-d:#b57f18;--cv-ink:#f4f1ec;--cv-btn-bg:#f7f5f1;--cv-btn-ink:#26232a;--cv-btn-edge:#cfc8bc;--cv-main-bg:#f2b544;--cv-main-ink:#2a1c04;--cv-main-edge:#b57f18;--cv-well:#00000052;--cv-on-bg:#f7f5f1;--cv-on-ink:#26232a;--cv-on-edge:#cfc8bc;--cv-card-bg:#f7f5f1;--cv-card-ink:#26232a;--cv-card-edge:#cfc8bc;--cv-card-sub:#ece8e1;--cv-card-mute:#6e6870;--cv-ok:#f2b544;--cv-ok-edge:#b57f18;z-index:2;background:radial-gradient(120% 95% at 75% 0,#46424a 0%,#322f35 48%,#1f1d21 100%);overflow:clip visible}.canvas.colorfle .scene{border-radius:inherit;background-image:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000 1px 4px),repeating-linear-gradient(90deg,#0000000d 0 1px,#0000 1px 5px);overflow:hidden}.canvas.colorfle .s1{filter:blur(30px);background:conic-gradient(from 200deg,#d0283a1a,#f6ce2c1a,#2d9a4b1a,#5db8ea1a,#a06bdd1a,#d0283a1a);width:520px;height:520px;top:-260px;left:-180px}.canvas.colorfle .s2{background:#00000047;width:380px;height:380px;bottom:-200px;right:-140px}.canvas.colorfle .s3{display:none}.canvas.colorfle .ct-s{color:#bdb6bf}.canvas.colorfle .badge{color:#2a1c04}.canvas.colorfle .result-layer{background:#14121680}.canvas.colorfle .result .gb{box-shadow:0 3px #cfc8bc}.canvas.colorfle .result .gb.primary{box-shadow:0 3px #b57f18,0 6px 10px #0003}.canvas.colorfle .swap a{box-shadow:0 2px #cfc8bc}.canvas.colorfle .confetti i{--c:#f2b544}.canvas.colorfle .stage{grid-template-columns:250px minmax(0,440px) 300px;place-content:start center;align-items:start;gap:24px;display:grid}.canvas.colorfle .cf-tplate,.canvas.colorfle .cf-board,.canvas.colorfle .cf-side{border-radius:var(--rl);background:var(--cf-plate);color:var(--cf-ink);box-shadow:inset 0 1px 0 #fff, 0 7px 0 var(--cf-edge), 0 16px 28px #0006}.canvas.colorfle .cf-tplate{gap:12px;padding:14px;display:grid}.canvas.colorfle .cf-target{margin:0}.canvas.colorfle .cf-tile{aspect-ratio:1;border-radius:var(--radius);background:var(--c);display:block;box-shadow:inset 0 0 0 1px #00000014,inset 0 -8px #0000001f,inset 0 6px 10px #ffffff40}.canvas.colorfle .cf-ratio{gap:4px;min-height:34px;display:flex}.canvas.colorfle .cf-seg{flex:var(--w) 1 0;color:var(--cf-mute);font-weight:700;font-size:var(--fs-xs);border:2px dashed #c9c1b4;border-radius:7px;place-items:center;min-width:32px;padding:0 1px;display:grid;overflow:hidden}.canvas.colorfle .cf-seg b{font-variant-numeric:tabular-nums}.canvas.colorfle .cf-ratio.cf-ans{gap:4px;display:grid}.canvas.colorfle .cf-seg.cf-on{background:var(--c);color:var(--cf-ink);border:0;justify-content:flex-start;align-items:center;gap:8px;padding:6px 8px;display:flex;box-shadow:inset 0 -3px #00000026}.canvas.colorfle .cf-seg.cf-on b,.canvas.colorfle .cf-seg.cf-on i{font-style:normal;font-size:var(--fs-xs);white-space:nowrap;background:#ffffffe0;border-radius:5px;padding:1px 6px;line-height:1.3}.canvas.colorfle .cf-board{gap:10px;min-width:0;padding:14px 16px 12px;display:grid}.canvas.colorfle .cf-tries{font-size:var(--fs-s);color:var(--cf-mute);align-items:center;gap:10px;margin:0;font-weight:600;display:flex}.canvas.colorfle .cf-tries .pp{gap:5px;display:flex}.canvas.colorfle .cf-tries .pp i{border:2px solid #b9b1a5;border-radius:50%;width:10px;height:10px}.canvas.colorfle .cf-tries .pp i.u{background:var(--cf-ink);border-color:var(--cf-ink)}.canvas.colorfle .cf-rows{gap:6px;margin:0;padding:0;list-style:none;display:grid}.canvas.colorfle .cf-row{grid-template-columns:minmax(0,1fr) 104px;align-items:start;gap:14px;display:grid}.canvas.colorfle .cf-band{gap:4px;display:flex}.canvas.colorfle .cf-cell{flex:var(--w) 1 0;gap:3px;min-width:0;display:grid}.canvas.colorfle .cf-fill{border:2px dashed #d8d1c6;border-radius:7px;height:36px;display:block;position:relative}.canvas.colorfle .cf-cell.cf-on .cf-fill{background:var(--c);border:0;box-shadow:inset 0 0 0 1px #0000001a,inset 0 -3px #00000029}.canvas.colorfle .cf-cell.cf-next .cf-fill{border:2px solid var(--cf-ink);box-shadow:0 0 0 3px #f2b5448c}.canvas.colorfle .cf-cell.cf-rv .cf-fill{box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px var(--cf-ink), inset 0 -3px 0 #00000029}.canvas.colorfle .cf-lock{background:var(--cf-ink);color:#fff;border-radius:50%;place-items:center;width:22px;height:22px;display:grid;position:absolute;top:-7px;right:-6px;box-shadow:0 2px #00000040}.canvas.colorfle .cf-lock .ic{stroke-width:2.4px;width:13px;height:13px}.canvas.colorfle .cf-mk{height:16px;color:var(--cf-ink);justify-content:center;display:flex}.canvas.colorfle .cf-mk .mk{width:16px;height:16px}.canvas.colorfle .cf-res{align-items:center;gap:10px;height:36px;display:flex}.canvas.colorfle .cf-mix{background:var(--c);border-radius:50% 50% 50% 8px;flex:none;width:36px;height:36px;box-shadow:inset 0 0 0 1px #0000001a,inset 0 -3px #00000024}.canvas.colorfle .cf-mix.cf-empty{box-shadow:none;background:0 0;border:2px dashed #d8d1c6}.canvas.colorfle .cf-sim{font-size:var(--fs-l);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}.canvas.colorfle .cf-sim small{font-size:var(--fs-xs);color:var(--cf-mute);margin-left:1px}.canvas.colorfle .cf-row.cf-cur .cf-mix.cf-empty{border-color:var(--cf-ink);opacity:.35}.canvas.colorfle .cf-key{font-size:var(--fs-xs);color:var(--cf-mute);border-top:1px solid #e6e0d7;flex-wrap:wrap;gap:4px 14px;margin:0;padding-top:8px;display:flex}.canvas.colorfle .cf-key span{align-items:center;gap:5px;display:inline-flex}.canvas.colorfle .cf-key .mk{width:13px;height:13px;color:var(--cf-ink)}.canvas.colorfle .cf-side{gap:14px;min-width:0;padding:14px;display:grid}.canvas.colorfle .cf-pal{grid-template-columns:repeat(3,1fr);gap:10px 8px;display:grid}.canvas.colorfle .cf-sw{cursor:pointer;color:var(--cf-ink);font:inherit;background:0 0;border:0;justify-items:center;gap:4px;padding:0;display:grid}.canvas.colorfle .cf-sw .cf-chip{border-radius:var(--r-sm);background:var(--c);place-items:center;width:100%;height:46px;transition:transform 80ms;display:grid;position:relative;box-shadow:inset 0 0 0 1px #0000001a,inset 0 -4px #0000002e,0 2px #00000014}.canvas.colorfle .cf-sw:active .cf-chip{transform:translateY(2px)}.canvas.colorfle .cf-sw .nm{font-size:var(--fs-xs);color:var(--cf-ink);font-weight:600}.canvas.colorfle .cf-sw.cf-out .cf-chip{opacity:.22;box-shadow:inset 0 0 0 1px #0000001a}.canvas.colorfle .cf-sw.cf-out .cf-chip:after{content:"";background:var(--cf-ink);opacity:.8;height:2px;position:absolute;inset:50% 8px auto;transform:rotate(-14deg)}.canvas.colorfle .cf-sw.cf-out .nm{color:#8f8791;text-decoration:line-through}.canvas.colorfle .cf-sw.cf-pk .cf-chip{outline:2px solid var(--cf-ink);outline-offset:2px}.canvas.colorfle .cf-sw.cf-lk .cf-chip{color:#fff}.canvas.colorfle .cf-sw.cf-lk .cf-chip .ic{filter:drop-shadow(0 1px 1px #00000059);width:18px;height:18px}.canvas.colorfle .cf-sw:focus-visible,.canvas.colorfle .cf-act .gb:focus-visible{outline:3px solid var(--cf-ink);outline-offset:3px;border-radius:var(--r-sm)}.canvas.colorfle .cf-act{grid-template-columns:auto 1fr;gap:8px;display:grid}.canvas.colorfle .cf-act .gb{height:46px}.canvas.colorfle .cf-act .gb:not(.primary){background:var(--cf-well);box-shadow:0 3px 0 var(--cf-edge)}.canvas.colorfle .cf-act .gb .ic{width:18px;height:18px}.canvas.colorfle .cf-act .gb[aria-disabled=true]{opacity:.55;box-shadow:0 3px 0 var(--cf-btn-d)}.canvas.colorfle .cf-msg{min-height:18px;font-size:var(--fs-s);color:var(--cf-mute);margin:0;font-weight:600;line-height:1.35}@keyframes cf-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}.canvas.colorfle .cf-row.cf-sub .cf-mk .mk{animation:.25s ease-out backwards cf-pop}.canvas.colorfle .cf-row.cf-sub .cf-cell:nth-child(2) .mk{animation-delay:.12s}.canvas.colorfle .cf-row.cf-sub .cf-cell:nth-child(3) .mk{animation-delay:.24s}.canvas.colorfle .cf-row.cf-sub .cf-cell:nth-child(4) .mk{animation-delay:.36s}.canvas.colorfle .cf-row.cf-sub .cf-mix{animation:.3s ease-out .4s backwards cf-pop}@media (prefers-reduced-motion:reduce){.canvas.colorfle .cf-row.cf-sub .cf-mk .mk,.canvas.colorfle .cf-row.cf-sub .cf-mix,.canvas.colorfle .cf-sw .cf-chip{transition:none;animation:none}}@media (width<=1100px){.canvas.colorfle .stage{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"t b""s b"}.canvas.colorfle .cf-tplate{grid-area:t}.canvas.colorfle .cf-board{grid-area:b}.canvas.colorfle .cf-side{grid-area:s}.canvas.colorfle .cf-pal{gap:8px 6px}.canvas.colorfle .cf-sw .cf-chip{height:38px}.canvas.colorfle .cf-msg{min-height:36px}}@media (width>=1140px){.canvas.colorfle .stage{grid-template-columns:300px minmax(0,440px) 300px}.canvas.colorfle .cf-tplate{margin-left:50px}}@media (width>=980px) and (width<=1100px){.canvas.colorfle .stage{grid-template-columns:220px minmax(0,1fr) 220px;grid-template-areas:"t b s"}}@media (width<=640px){.canvas.colorfle .stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"t""b""s";gap:10px}.canvas.colorfle .cf-tplate{border-radius:var(--rl);grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;padding:8px}.canvas.colorfle .cf-tile{border-radius:var(--radius);box-shadow:inset 0 0 0 1px #00000014,inset 0 -5px #0000001f}.canvas.colorfle .cf-ratio{min-height:30px}.canvas.colorfle .cf-seg{font-size:11px}.canvas.colorfle .cf-board{border-radius:var(--rl);gap:6px;padding:8px 10px}.canvas.colorfle .cf-tries{font-size:var(--fs-xs)}.canvas.colorfle .cf-tries .pp i{width:8px;height:8px}.canvas.colorfle .cf-rows{gap:3px}.canvas.colorfle .cf-row{grid-template-columns:minmax(0,1fr) 86px;gap:8px}.canvas.colorfle .cf-fill{border-radius:6px;height:28px}.canvas.colorfle .cf-mk{height:12px}.canvas.colorfle .cf-mk .mk{width:12px;height:12px}.canvas.colorfle .cf-res{gap:6px;height:28px}.canvas.colorfle .cf-mix{width:28px;height:28px}.canvas.colorfle .cf-sim{font-size:var(--fs-m)}.canvas.colorfle .cf-key{display:none}.canvas.colorfle .cf-side{border-radius:var(--rl);gap:8px;padding:8px}.canvas.colorfle .cf-pal{grid-template-columns:repeat(6,1fr);gap:6px 4px}.canvas.colorfle .cf-sw{gap:2px}.canvas.colorfle .cf-sw .cf-chip{border-radius:var(--r-sm);height:32px}.canvas.colorfle .cf-sw .nm{font-size:10.5px}.canvas.colorfle .cf-act .gb{height:42px}.canvas.colorfle .cf-msg{font-size:var(--fs-xs);min-height:16px}.canvas.colorfle .cf-ratio.cf-ans{grid-template-columns:1fr 1fr;gap:3px}.canvas.colorfle .cf-seg.cf-on{gap:5px;padding:3px 5px}.canvas.colorfle .cf-seg.cf-on b,.canvas.colorfle .cf-seg.cf-on i{padding:0 4px;font-size:11px}}.canvas.colorfle,.canvas.colorfle *,.canvas.colorfle :before,.canvas.colorfle :after{box-sizing:border-box}.canvas.colorfle .stage{height:var(--stage-h);flex:none}@media (width<=640px){.canvas.colorfle .stage{height:var(--stage-h-sm)}}