.canvas.colordle{--cd-ink:#1f2630;--cd-mute:#5c6672;--cd-edge:#c3c9d1;--cd-plate:#fbfbfc;--cd-well:#f0f2f5;--cd-btn:#26303c;--cd-btn-d:#0e141b;--cv-ink:var(--cd-ink);--cv-btn-bg:#fff;--cv-btn-ink:var(--cd-ink);--cv-btn-edge:var(--cd-edge);--cv-main-bg:var(--cd-btn);--cv-main-ink:#fff;--cv-main-edge:var(--cd-btn-d);--cv-well:#1f263014;--cv-on-bg:#fff;--cv-on-ink:var(--cd-ink);--cv-on-edge:var(--cd-edge);--cv-card-bg:#fff;--cv-card-ink:var(--cd-ink);--cv-card-edge:var(--cd-edge);--cv-card-sub:var(--cd-well);--cv-card-mute:var(--cd-mute);--cv-ok:var(--cd-btn);--cv-ok-edge:var(--cd-btn-d);color:var(--cd-ink);z-index:2;background:radial-gradient(120% 95% at 22% 0,#f7f8f9 0%,#e8ebee 52%,#d8dde3 100%);overflow:clip visible}.canvas.colordle .scene{border-radius:inherit;background-image:radial-gradient(#1f26301c 1px,#0000 1.5px);background-size:22px 22px;overflow:hidden}.canvas.colordle .s1{background:#ffffffb3;width:520px;height:520px;top:-260px;right:-200px}.canvas.colordle .s2{background:#78879b29;width:360px;height:360px;bottom:-200px;left:-140px}.canvas.colordle .s3{display:none}.canvas.colordle .ct-s{color:var(--cd-mute)}.canvas.colordle .badge{color:#fff}.canvas.colordle .result-layer{background:#1f263047}.canvas.colordle .result .gb{box-shadow:0 3px 0 var(--cd-edge)}.canvas.colordle .result .gb.primary{box-shadow:0 3px 0 var(--cd-btn-d)}.canvas.colordle .result .swap a{box-shadow:0 2px 0 var(--cd-edge);background:var(--cd-plate)}.canvas.colordle .confetti i{--c:var(--cd-btn)}.canvas.colordle .confetti i:nth-child(3n){--c:#4c9085}.canvas.colordle code{color:var(--cd-mute);letter-spacing:.02em;font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.canvas.colordle .stage{grid-template-columns:520px minmax(0,600px);place-content:start center;align-items:start;gap:28px;display:grid}.canvas.colordle .cd-spec{border-radius:var(--rl);background:var(--cd-plate);box-shadow:inset 0 1px 0 #fff, 0 7px 0 var(--cd-edge), 0 16px 28px #1e283729;grid-template-columns:210px minmax(0,1fr);align-items:start;gap:14px 16px;padding:14px;display:grid;position:relative}.canvas.colordle .cd-card{gap:10px;margin:0;display:grid}.canvas.colordle .cd-chip{aspect-ratio:4/3;border-radius:var(--radius);background:repeating-linear-gradient(135deg,#eef0f3 0 9px,#e3e7eb 9px 18px);place-items:center;display:grid;position:relative;box-shadow:inset 0 0 0 1px #1f263014,inset 0 -4px #1f26300f}.canvas.colordle .cd-card .q{color:#a3acb7;text-shadow:0 2px #fff;font-size:92px;font-weight:700;line-height:1}.canvas.colordle .cd-card.open .cd-chip{background:var(--c);animation:.5s ease-out cd-open;box-shadow:inset 0 0 0 1px #0000001a,inset 0 -5px #00000024}.canvas.colordle .cd-card figcaption{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.canvas.colordle .cd-card figcaption b{font-size:var(--fs-xl);overflow-wrap:anywhere;line-height:1.1}@keyframes cd-open{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.canvas.colordle .cd-side{align-content:start;gap:10px;min-width:0;display:grid}.canvas.colordle .cd-count{font-size:var(--fs-m);color:var(--cd-mute);margin:0;font-weight:600}.canvas.colordle .cd-count b{font-size:var(--fs-2xl);color:var(--cd-ink);font-variant-numeric:tabular-nums;margin-right:2px}.canvas.colordle .cd-hints{gap:6px;display:grid}.canvas.colordle .cd-hint{border-radius:var(--radius);background:var(--cd-well);font-family:var(--sans);font-size:var(--fs-s);color:var(--cd-ink);grid-template-columns:auto 1fr;align-items:start;gap:10px;margin:0;padding:10px 12px;line-height:1.4;animation:.35s ease-out cd-in;display:grid}.canvas.colordle .cd-hint .hn{background:var(--cd-btn);color:#fff;height:22px;font:700 12px/1 var(--game);border-radius:999px;align-items:center;gap:2px;padding:0 7px 0 4px;display:inline-flex}.canvas.colordle .cd-hint .hn .ic{width:14px;height:14px}@keyframes cd-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.canvas.colordle .cd-q{grid-column:1/-1;grid-template-columns:1fr auto;gap:8px;display:grid;position:relative}.canvas.colordle .cd-q .gb{height:48px;padding:0 20px}.canvas.colordle .cd-in{border-radius:var(--radius);height:48px;color:var(--cd-ink);box-shadow:inset 0 2px 3px #1f26301f, 0 2px 0 var(--cd-edge);background:#fff;align-items:center;gap:10px;padding:0 14px 0 10px;display:flex}.canvas.colordle .cd-in .ic{opacity:.5;flex:none;width:20px;height:20px;margin-left:4px}.canvas.colordle .cd-in.has-pv .ic{display:none}.canvas.colordle .cd-in input{all:unset;min-width:0;font:600 17px var(--game);color:var(--cd-ink);flex:1}.canvas.colordle .cd-in input::placeholder{color:#6f7885}.canvas.colordle .cd-in:focus-within{box-shadow:inset 0 2px 3px #1f26301f, 0 0 0 3px var(--cd-btn)}.canvas.colordle .cd-msg{font-family:var(--sans);font-size:var(--fs-s);color:var(--cd-ink);grid-column:1/-1;margin:-6px 2px 0;font-weight:600;line-height:1.35}.canvas.colordle .cd-msg:empty{display:none}.canvas.colordle .sw{background:var(--c);border-radius:9px;flex:none;width:36px;height:36px;box-shadow:inset 0 0 0 1px #0000001f,inset 0 -3px #00000024,0 2px 3px #1f26301f}.canvas.colordle .sw.pv{border-radius:7px;width:28px;height:28px;margin-left:2px}.canvas.colordle .sw[hidden]{display:none}.canvas.colordle .sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.canvas.colordle .cd-dd{z-index:4;border-radius:var(--rl);color:var(--cd-ink);box-shadow:0 5px 0 var(--cd-edge), 0 16px 28px #1e283738;background:#fff;margin:0;padding:6px;list-style:none;position:absolute;top:54px;left:0;right:0}.canvas.colordle .cd-dd[hidden]{display:none}.canvas.colordle .cd-dd li{border-radius:var(--r-sm);height:42px;font-weight:500;font-size:var(--fs-m);cursor:pointer;align-items:center;gap:10px;padding:0 10px 0 8px;display:flex}.canvas.colordle .cd-dd li .sw{border-radius:6px;width:24px;height:24px}.canvas.colordle .cd-dd li .on{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.canvas.colordle .cd-dd mark{color:inherit;text-decoration:underline 2px var(--cd-btn);text-underline-offset:3px;background:0 0;font-weight:700}.canvas.colordle .cd-dd li[aria-selected=true]{background:var(--cd-well);box-shadow:inset 3px 0 0 var(--cd-btn)}.canvas.colordle .cd-dd li.used{color:#6f7885;cursor:default}.canvas.colordle .cd-dd li.used .sw{opacity:.45}.canvas.colordle .cd-dd .gd{font-size:var(--fs-xs);background:var(--cd-well);border-radius:999px;padding:2px 8px;font-weight:600}.canvas.colordle .cd-panel{flex-direction:column;gap:12px;min-width:0;display:flex}.canvas.colordle .cd-list{border-radius:var(--rl);background:var(--cd-plate);box-shadow:inset 0 1px 0 #fff, 0 6px 0 var(--cd-edge), 0 14px 24px #1e283724;overscroll-behavior:contain;align-content:start;gap:2px;max-height:466px;margin:0;padding:6px;list-style:none;display:grid;overflow-y:auto}.canvas.colordle .cd-empty{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.canvas.colordle .cd-ghost{border-radius:var(--radius);grid-template-columns:36px minmax(0,1fr) minmax(60px,120px);align-items:center;gap:12px;height:54px;padding:0 10px 0 42px;display:grid}.canvas.colordle .cd-ghost+.cd-ghost{box-shadow:0 -1px #eceff2}.canvas.colordle .cd-ghost i{box-sizing:border-box;border:2px dashed #d3d8de;border-radius:9px;width:36px;height:36px}.canvas.colordle .cd-ghost b{background:#eceff2;border-radius:5px;width:70%;height:10px}.canvas.colordle .cd-ghost u{background:#e4e8ec;border-radius:5px;height:10px}.canvas.colordle .cd-row{border-radius:var(--radius);grid-template-columns:22px 36px minmax(0,1fr) minmax(80px,170px) 62px 74px;align-items:center;gap:12px;height:54px;padding:0 10px 0 8px;display:grid}.canvas.colordle .cd-row+.cd-row{box-shadow:0 -1px #eceff2}.canvas.colordle .cd-row .rk{font-size:var(--fs-s);color:#6f7885;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.canvas.colordle .cd-row .nm{gap:3px;min-width:0;display:grid}.canvas.colordle .cd-row .nm b{font-size:var(--fs-m);white-space:nowrap;text-overflow:ellipsis;line-height:1.1;overflow:hidden}.canvas.colordle .cd-row .bar{background:#e4e8ec;border-radius:5px;height:10px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #1f26301f}.canvas.colordle .cd-row .bar i{background:var(--cd-btn);transform-origin:0;border-radius:5px;position:absolute;top:0;bottom:0;left:0}.canvas.colordle .cd-row.new .bar i{animation:.6s cubic-bezier(.2,.8,.2,1) cd-bar}@keyframes cd-bar{0%{transform:scaleX(0)}to{transform:none}}.canvas.colordle .cd-row .pc{font-size:var(--fs-l);text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.canvas.colordle .cd-row .pc small{font-size:var(--fs-xs);color:var(--cd-mute);margin-left:1px;font-weight:600}.canvas.colordle .cd-row .no{font-size:var(--fs-xs);color:#6f7885;text-align:right;font-weight:600}.canvas.colordle .cd-row.new{background:var(--cd-well);box-shadow:inset 3px 0 0 var(--cd-btn);animation:.35s ease-out cd-in}.canvas.colordle .cd-row.hit .pc{color:var(--cd-ink)}.canvas.colordle .tag-new{background:var(--cd-btn);color:#fff;height:24px;font-size:var(--fs-xs);border-radius:999px;justify-content:center;align-items:center;gap:3px;padding:0 8px 0 5px;font-weight:600;display:inline-flex}.canvas.colordle .tag-new .ic{stroke-width:2.6px;width:13px;height:13px}.canvas.colordle.done .cd-list,.canvas.colordle.done .cd-spec{filter:saturate(.9)}@media (prefers-reduced-motion:reduce){.canvas.colordle .cd-card.open .cd-chip,.canvas.colordle .cd-hint,.canvas.colordle .cd-row.new,.canvas.colordle .cd-row.new .bar i{animation:none}}@media (width<=1180px){.canvas.colordle .stage{grid-template-columns:430px minmax(0,1fr);gap:22px}.canvas.colordle .cd-spec{grid-template-columns:170px minmax(0,1fr)}.canvas.colordle .cd-row{grid-template-columns:18px 34px minmax(0,1fr) 84px 56px 62px;gap:8px}}@media (width<=980px){.canvas.colordle .stage{grid-template-columns:minmax(0,1fr);gap:12px}.canvas.colordle .cd-spec{grid-template-columns:132px minmax(0,1fr);align-items:center;gap:10px 12px;padding:10px}.canvas.colordle .cd-chip{aspect-ratio:1}.canvas.colordle .cd-card .q{font-size:56px}.canvas.colordle .cd-list{max-height:336px}.canvas.colordle .cd-row{grid-template-columns:22px 36px minmax(0,1fr) minmax(80px,170px) 62px 74px;gap:12px}}@media (width<=640px){.canvas.colordle .stage{gap:10px}.canvas.colordle .cd-spec{border-radius:var(--rl);box-shadow:inset 0 1px 0 #fff, 0 5px 0 var(--cd-edge), 0 12px 20px #1e283724;grid-template-columns:84px minmax(0,1fr);gap:10px;padding:8px}.canvas.colordle .cd-card .q{font-size:44px}.canvas.colordle .cd-chip{border-radius:10px}.canvas.colordle .cd-side{gap:6px}.canvas.colordle .cd-count{font-size:var(--fs-s)}.canvas.colordle .cd-count b{font-size:var(--fs-xl)}.canvas.colordle .cd-hint{font-size:var(--fs-s);border-radius:var(--r-sm);gap:7px;padding:7px 9px}.canvas.colordle .cd-hint .hn{height:20px}.canvas.colordle .cd-q .gb{height:46px;padding:0 14px}.canvas.colordle .cd-in{height:46px}.canvas.colordle .cd-dd{top:52px}.canvas.colordle .cd-list{border-radius:var(--rl);max-height:262px;box-shadow:inset 0 1px 0 #fff, 0 5px 0 var(--cd-edge), 0 12px 20px #1e283724;padding:4px}.canvas.colordle .cd-row{grid-template-columns:30px minmax(0,1fr) 54px 50px;gap:8px;height:48px;padding:0 8px 0 6px}.canvas.colordle .cd-row .rk,.canvas.colordle .cd-row .no{display:none}.canvas.colordle .cd-row .sw{border-radius:var(--r-sm);width:30px;height:30px}.canvas.colordle .cd-row .nm b{font-size:var(--fs-s)}.canvas.colordle .cd-row code{font-size:11px}.canvas.colordle .cd-row .bar{height:8px}.canvas.colordle .cd-row .pc{font-size:var(--fs-m)}.canvas.colordle .cd-row.new{position:relative}.canvas.colordle .cd-row .tag-new{border:2px solid var(--cd-well);width:18px;height:18px;padding:0;position:absolute;top:3px;left:1px}.canvas.colordle .cd-row .tag-new span{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.canvas.colordle .cd-row .tag-new .ic{width:10px;height:10px}.canvas.colordle .cd-dd li{height:40px}.canvas.colordle .cd-ghost{grid-template-columns:30px minmax(0,1fr) 54px;gap:8px;height:48px;padding-left:36px}.canvas.colordle .cd-ghost i{width:30px;height:30px}.canvas.colordle .cd-ghost:nth-of-type(n+5),.canvas.colordle.typing .cd-card,.canvas.colordle.typing .cd-side{display:none}.canvas.colordle.typing .cd-spec{grid-template-columns:minmax(0,1fr)}.canvas.colordle.typing .stage{flex-direction:column;display:flex}.canvas.colordle.typing .cd-panel{order:-1}.canvas.colordle.typing .cd-row:not(:first-child),.canvas.colordle.typing .cd-ghost{display:none}.canvas.colordle .result .res-top{grid-template-columns:auto 1fr}.canvas.colordle .result .stats{grid-column:1/-1;justify-content:space-between}}
