.canvas.connections{--cv-ink:#fff1f7;--cv-btn-bg:#fff6e6;--cv-btn-ink:#4a1530;--cv-btn-edge:#d9a9bf;--cv-main-bg:#2a0b1c;--cv-main-ink:#fff1f7;--cv-main-edge:#12030b;--cv-well:#28001452;--cv-on-bg:#fff6e6;--cv-on-ink:#4a1530;--cv-on-edge:#d9a9bf;--cv-card-bg:#fff6e6;--cv-card-ink:#3b1e0e;--cv-card-edge:#d9a9bf;--cv-card-sub:#f9e3ee;--cv-card-mute:#8f4d70;background:radial-gradient(120% 90% at 80% 0,#d25a93 0%,#b23a74 45%,#6a1c44 100%)}.canvas.connections .scene{background-image:repeating-linear-gradient(45deg,#ffffff0d 0 1.5px,#0000 1.5px 20px),repeating-linear-gradient(-45deg,#ffffff0d 0 1.5px,#0000 1.5px 20px)}.canvas.connections .s1{background:#ffbee129;width:400px;height:400px;top:-180px;right:-130px}.canvas.connections .s2{background:#28001440;width:280px;height:280px;bottom:-140px;left:-100px}.canvas.connections .s3{display:none}.canvas.connections .tb .gb.primary{background:var(--cv-btn-bg);color:var(--cv-btn-ink);box-shadow:0 3px 0 var(--cv-btn-edge), 0 6px 10px #28001447}.canvas.connections .tb .gb.primary:active{box-shadow:0 0 0 var(--cv-btn-edge)}.canvas.connections .stage{align-content:flex-start}.canvas.connections .cx{--cw:124px;--card-h:68px;box-sizing:border-box;gap:14px;width:min(626px,100%);display:grid}.canvas.connections .cx *,.canvas.connections .cx :before,.canvas.connections .cx :after{box-sizing:border-box}.canvas.connections .mat{border-radius:var(--rl);background:#5a1838;gap:10px;padding:18px;display:grid;position:relative;box-shadow:inset 0 2px #ffbee126,0 8px #3a0e24,0 18px 30px #28001473}.canvas.connections .mat:before{content:"";pointer-events:none;border:1.5px dashed #ffd6e84d;border-radius:14px;position:absolute;inset:7px}.canvas.connections .bars{gap:10px;display:grid}.canvas.connections .bars:empty,.canvas.connections .cards:empty{display:none}.canvas.connections .bar{--bb:#ffe7cc;--be:#d9a877;--bi:#4a2412;height:var(--card-h);border-radius:var(--radius);background:var(--bb);color:var(--bi);box-shadow:0 4px 0 var(--be);justify-content:space-between;align-items:center;gap:12px;padding:8px 18px;display:flex;position:relative}.canvas.connections .bar.t1{--bb:#ffe7cc;--be:#d9a877;--bi:#4a2412}.canvas.connections .bar.t2{--bb:#e8794a;--be:#a9471f;--bi:#2e1006}.canvas.connections .bar.t3{--bb:#f2a7c3;--be:#be6a8c;--bi:#5a1838}.canvas.connections .bar.t4{--bb:#4a2412;--be:#2a1208;--bi:#fff6e6}.canvas.connections .bar.missed{box-shadow:0 4px 0 var(--be), 0 0 0 3px #5a1838, 0 0 0 5px #fff1f7d9;outline-offset:-6px;outline:2px dashed}.canvas.connections .bar-t{gap:2px;min-width:0;display:grid}.canvas.connections .bar-n{font-weight:700;font-size:var(--fs-m);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere;line-height:1.15}.canvas.connections .bar-w{font-weight:600;font-size:var(--fs-s);letter-spacing:.04em;opacity:.92;overflow-wrap:anywhere;line-height:1.2}.canvas.connections .tier{flex:none;gap:5px;display:flex}.canvas.connections .tier i{border:2px solid;border-radius:50%;width:11px;height:11px}.canvas.connections .tier i.f{background:currentColor}.canvas.connections .cards{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--card-h);border-radius:var(--radius);gap:10px;display:grid}.canvas.connections .cards:focus{outline:none}.canvas.connections .cards:focus-visible{outline-offset:6px;outline:3px solid #ffe7cc}.canvas.connections .card{text-align:center;border-radius:var(--radius);color:#3b1e0e;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;letter-spacing:.04em;text-transform:uppercase;min-width:0;font-weight:700;line-height:1.05;font-size:clamp(9px, calc(var(--cw) / (var(--l) * .76)), 17px);background:#fff6e6;justify-content:center;align-items:center;padding:0 8px;transition:transform .1s,background-color .1s;display:flex;position:relative;box-shadow:0 4px #d9b9a0,0 7px 10px #2800144d}.canvas.connections .card span{overflow-wrap:normal;max-width:100%;display:block}.canvas.connections .card.on{color:#fff6e6;background:#2a0b1c;transform:translateY(-2px);box-shadow:0 4px #12030b,0 7px 10px #2800144d}.canvas.connections .card.on:before{content:"";background:#f2a7c3;border-radius:50%;width:7px;height:7px;position:absolute;top:8px;left:8px}.canvas.connections .cards:focus-visible .card.cursor{outline-offset:2px;outline:3px dashed #f2a7c3}.canvas.connections .card.hinted{animation:.9s ease-out 2 cx-hint}.canvas.connections .card.hinted:not(.on){box-shadow:0 4px #d9b9a0,0 0 0 3px #f2a7c3}.canvas.connections .cx-ctl{justify-content:space-between;align-items:center;gap:12px;display:flex}.canvas.connections .mist{font-weight:600;font-size:var(--fs-s);align-items:center;gap:10px;display:flex}.canvas.connections .chips{gap:6px;display:flex}.canvas.connections .chips i{border:2px dashed #fff1f7a6;border-radius:50%;width:16px;height:16px;transition:all .2s}.canvas.connections .chips i.f{background:#fff1f7;border:2px solid #fff1f7;box-shadow:0 2px #c66f92}.canvas.connections .cx-b{gap:8px;display:flex}.canvas.connections .gb.ghost{color:#fff1f7;background:0 0;box-shadow:inset 0 0 0 2px #fff1f7b3}.canvas.connections .gb.ghost:active{transform:none;box-shadow:inset 0 0 0 2px #fff1f7b3}.canvas.connections .gb.cx-submit{color:#fff1f7;background:#2a0b1c;min-width:120px;box-shadow:0 3px #12030b,0 6px 10px #28001447}.canvas.connections .gb.cx-submit:active{box-shadow:0 0 #12030b}.canvas.connections .cx-b .gb:disabled{opacity:.45;cursor:default;box-shadow:none}.canvas.connections .cx-b .gb.cx-submit:disabled{box-shadow:0 3px #12030b}.canvas.connections .cx-b .gb.ghost:disabled{box-shadow:inset 0 0 0 2px #fff1f780}.canvas.connections .toast{z-index:3;opacity:0;pointer-events:none;color:#4a1530;font-weight:700;font-size:var(--fs-m);white-space:nowrap;background:#fff6e6;border-radius:999px;padding:7px 16px;transition:opacity .2s,transform .2s;position:absolute;top:-16px;left:50%;transform:translate(-50%,6px);box-shadow:0 3px #d9a9bf,0 8px 14px #28001459}.canvas.connections .toast.show{opacity:1;transform:translate(-50%)}.canvas.connections .toast:empty{display:none}.canvas.connections .card.shake{animation:.26s ease-in-out cx-shake}.canvas.connections .card.fly{opacity:0;transition:transform .3s ease-in,opacity .3s ease-in;transform:translateY(-40px)scale(.92)}.canvas.connections .card.shuf{animation:.18s ease-out backwards cx-pop;animation-delay:calc(var(--i) * 20ms)}.canvas.connections .bar.fresh{animation:.22s ease-out cx-grow}.canvas.connections .bar.fresh .bar-t,.canvas.connections .bar.fresh .tier{animation:.25s ease-out .1s backwards cx-fade}.canvas.connections .bar.lit,.canvas.connections .bars.lit .bar{animation:.4s ease-out backwards cx-lit;animation-delay:calc(var(--i) * 80ms)}@keyframes cx-shake{0%,to{translate:0}25%{translate:-4px}50%{translate:4px}75%{translate:-4px}}@keyframes cx-grow{0%{opacity:.4;transform:scaleX(.6)}to{opacity:1;transform:none}}@keyframes cx-fade{0%{opacity:0}to{opacity:1}}@keyframes cx-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}@keyframes cx-lit{0%{filter:brightness()}40%{filter:brightness(1.3)}to{filter:brightness()}}@keyframes cx-hint{0%,to{box-shadow:0 4px #d9b9a0,0 0 #f2a7c3e6}50%{box-shadow:0 4px #d9b9a0,0 0 0 7px #f2a7c300}}@media (prefers-reduced-motion:reduce){.canvas.connections .card,.canvas.connections .chips i,.canvas.connections .toast{transition:none}.canvas.connections .card.shake,.canvas.connections .card.shuf,.canvas.connections .card.hinted,.canvas.connections .bar,.canvas.connections .bar *,.canvas.connections .bars.lit .bar{animation:none!important}}@media (width<=640px){.canvas.connections .cx{--cw:64px;--card-h:56px;gap:10px;width:100%}.canvas.connections .mat{border-radius:var(--rl);gap:6px;padding:10px}.canvas.connections .mat:before{border-radius:var(--radius);inset:4px}.canvas.connections .bars{gap:6px}.canvas.connections .bar{gap:8px;padding:6px 10px}.canvas.connections .bar-n{font-size:var(--fs-s)}.canvas.connections .bar-w{letter-spacing:.02em;font-size:10.5px}.canvas.connections .tier{gap:4px}.canvas.connections .tier i{width:9px;height:9px}.canvas.connections .cards{gap:6px}.canvas.connections .card{letter-spacing:.01em;font-size:clamp(8.5px, calc(var(--cw) / (var(--l) * .7)), 13px);border-radius:10px;padding:0 3px}.canvas.connections .card.on:before{width:6px;height:6px;top:6px;left:6px}.canvas.connections .cx-ctl{flex-direction:column;align-items:stretch;gap:10px}.canvas.connections .mist{justify-content:center}.canvas.connections .cx-b{grid-template-columns:1fr 1fr 1.2fr;display:grid}.canvas.connections .gb.cx-submit{min-width:0}.canvas.connections .toast{top:-14px}}