.canvas.tango{--cv-ink:#effffc;--cv-btn-bg:#f2fbf8;--cv-btn-ink:#0b4c48;--cv-btn-edge:#8cc7bf;--cv-main-bg:#0b3b39;--cv-main-ink:#f2fbf8;--cv-main-edge:#04201f;--cv-well:#002d2a59;--cv-on-bg:#f2fbf8;--cv-on-ink:#0b4c48;--cv-on-edge:#8cc7bf;--cv-card-bg:#f2fbf8;--cv-card-ink:#0b3b39;--cv-card-edge:#8cc7bf;--cv-card-sub:#ddf3ee;--cv-card-mute:#3f7c79;--cv-ok:#0e5653;--cv-ok-edge:#073634;background:radial-gradient(120% 90% at 15% 0,#2db7ac 0%,#17958f 45%,#0a5b57 100%)}.canvas.tango .scene{background-image:repeating-linear-gradient(45deg,#ffffff0f 0 2px,#0000 2px 18px),repeating-linear-gradient(-45deg,#ffffff0f 0 2px,#0000 2px 18px)}.canvas.tango .s1{background:#aafff029;width:420px;height:420px;top:-190px;right:-140px}.canvas.tango .s2{background:#00282640;width:300px;height:300px;bottom:-150px;left:-110px}.canvas.tango .s3{background:#aafff014;width:160px;height:160px;bottom:-80px;left:40%}.canvas.tango .plate{--bw:384px;--tc:calc(var(--bw) / var(--n));box-sizing:content-box;border-radius:var(--rl);background:#0e5653;flex:none;padding:16px;transition:box-shadow .3s;box-shadow:inset 0 2px #a0f0e62e,0 8px #073634,0 18px 30px #00282673}.canvas.tango .plate.done,.canvas.done.tango .plate{box-shadow:inset 0 2px #a0f0e62e,0 8px #073634,0 18px 30px #00282673,0 0 0 6px #fff6e68c}.canvas.tango .board{box-sizing:border-box;grid-template-columns:repeat(var(--n), var(--tc));grid-template-rows:repeat(var(--n), var(--tc));-webkit-user-select:none;user-select:none;border-radius:10px;display:grid;position:relative}.canvas.tango .board:focus{outline:none}.canvas.tango .board:focus-visible{outline-offset:8px;outline:3px solid #f2fbf8}.canvas.tango .tc{box-sizing:border-box;cursor:pointer;touch-action:manipulation;background:#1e8078;border-radius:9px;justify-content:center;align-items:center;margin:3px;display:flex;box-shadow:inset 0 2px #ffffff24,inset 0 -3px #0000002e}.canvas.tango .tc.given{cursor:default;background:#0a4744;box-shadow:inset 0 3px 6px #00000073,inset 0 -1px #a0f0e626}.canvas.tango .tk{width:74%;height:74%;display:block}.canvas.tango .tc.placed .tk{filter:drop-shadow(0 4px 4px #001e1c73)}.canvas.tango .tc.given .tk{width:64%;height:64%}.canvas.tango .tc.bad{background-image:repeating-linear-gradient(135deg,#ff8a6599 0 4px,#0000 4px 10px)}.canvas.tango .board:focus-visible .tc.cursor{outline-offset:-2px;outline:3px dashed #f2fbf8}.canvas.tango .tc.hinted{animation:.9s ease-out 2 tango-glow}.canvas.tango .tc.pop .tk{animation:.15s ease-out tango-pop}.canvas.tango .tc.pop.bad .tk,.canvas.tango .tc.shake .tk{animation:.15s ease-out tango-pop,.24s ease-out .15s tango-shake}.canvas.tango .sign{z-index:3;pointer-events:none;left:calc(var(--tc) * var(--x));top:calc(var(--tc) * var(--y));--sg:clamp(16px, calc(var(--tc) * .42), 22px);width:var(--sg);height:var(--sg);margin:calc(var(--sg) / -2) 0 0 calc(var(--sg) / -2);border-radius:calc(var(--sg) * .32);color:#0b4c48;box-sizing:border-box;background:#fff6e6;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:0 2px #8cc7bf,0 3px 6px #001e1c59}.canvas.tango .sign svg{width:72%;height:72%}.canvas.tango .sign.bad{color:#9b3516;box-shadow:0 0 0 3px #ff8a65,0 3px 6px #001e1c59}.canvas.tango .sign.bad:after{content:"";border:2px dashed #ff8a65;border-radius:10px;position:absolute;inset:-6px}.canvas.tango .sign.shake{animation:.24s ease-out tango-shake}.canvas.tango .viol{z-index:2;pointer-events:none;box-sizing:border-box;left:calc(var(--tc) * var(--c));top:calc(var(--tc) * var(--r));width:calc(var(--tc) * var(--w));height:calc(var(--tc) * var(--h));border-radius:var(--radius);border:3px dashed #ff8a65;animation:.15s ease-out tango-fade;position:absolute}.canvas.tango .viol.count{border-style:dotted}.canvas.tango .viol:after{content:"!";color:#3b1e0e;width:20px;height:20px;font-weight:700;font-size:var(--fs-s);text-align:center;background:#ff8a65;border-radius:50%;line-height:20px;position:absolute;top:-11px;right:-11px;box-shadow:0 2px #b8502f}.canvas.tango .viol.shake{animation:none}@keyframes tango-pop{0%{transform:scale(.6)}to{transform:scale(1)}}@keyframes tango-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-3px)}}@keyframes tango-fade{0%{opacity:0}to{opacity:1}}@keyframes tango-glow{0%,to{box-shadow:inset 0 2px #ffffff24,inset 0 -3px #0000002e}50%{box-shadow:inset 0 2px #ffffff24,0 0 0 4px #f3c65f}}@media (width<=640px){.canvas.tango .plate{--bw:min(318px, calc(100vw - 72px));padding:12px}.canvas.tango .viol{border-width:2.5px}}@media (prefers-reduced-motion:reduce){.canvas.tango .tc.hinted,.canvas.tango .tc.pop .tk,.canvas.tango .tc.shake .tk,.canvas.tango .sign.shake,.canvas.tango .viol{animation:none}.canvas.tango .plate{transition:none}}