.dvpf-connect{position:relative;overflow:hidden;max-width:1040px;margin:0 auto;padding:22px;border:1px solid rgba(117,91,255,.28);border-radius:24px;background:linear-gradient(155deg,#0d1433,#11183c 62%,#151346);color:#eef1ff;box-shadow:0 24px 65px rgba(0,0,0,.27)}
.dvpf-connect header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.dvpf-connect header span{font-size:12px;font-weight:900;letter-spacing:.12em;color:#8feaff}.dvpf-connect header h2{margin:4px 0 5px;font-size:32px;line-height:1.05;color:#fff}.dvpf-connect header p{margin:0;max-width:680px;color:#b8c3eb}
.dvpf-connect-head-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}.dvpf-connect-progress{padding:10px 14px;border-radius:999px;background:#ffe16b;color:#12162f;white-space:nowrap}.dvpf-connect-audio-controls{display:flex;align-items:center;gap:8px}.dvpf-connect-sound-toggle,.dvpf-connect-next-melody,.dvpf-connect-actions button{border:0;border-radius:12px;padding:10px 14px;background:#242b5b;color:#fff;font-weight:800;cursor:pointer}.dvpf-connect-sound-toggle:hover,.dvpf-connect-next-melody:hover,.dvpf-connect-actions button:hover{background:#313a78}.dvpf-connect-next-melody{white-space:nowrap}
.dvpf-connect-stage{width:min(650px,100%);margin:0 auto;padding:14px;border-radius:26px;background:linear-gradient(145deg,#835837,#5b3924);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 0 25px rgba(37,18,8,.52),0 16px 38px rgba(0,0,0,.28)}
.dvpf-connect-board{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.12),transparent 36%),linear-gradient(145deg,#fbf0d2,#e8d3a2);box-shadow:inset 0 0 0 2px rgba(83,53,30,.34),inset 0 8px 18px rgba(255,255,255,.28);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.dvpf-connect-board.is-dragging{cursor:grabbing}
.dvpf-connect-fabric{position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:repeating-linear-gradient(0deg,rgba(105,76,45,.07) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 12px)}
.dvpf-connect-lines,.dvpf-connect-spools{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.dvpf-connect-lines{overflow:visible}
.dvpf-connect-line-shadow,.dvpf-connect-line,.dvpf-connect-line-shine{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dvpf-connect-line-shadow{stroke:rgba(59,35,20,.42);stroke-width:12px;filter:blur(.35px)}
.dvpf-connect-line{stroke-width:7.5px;filter:drop-shadow(0 2px 1px rgba(255,255,255,.18));transition:filter .16s ease}.dvpf-connect-line.is-active{filter:drop-shadow(0 0 4px rgba(255,255,255,.45)) drop-shadow(0 4px 2px rgba(46,27,15,.34))}.dvpf-connect-line.is-complete{filter:drop-shadow(0 0 5px rgba(255,255,255,.72)) drop-shadow(0 3px 2px rgba(46,27,15,.35))}
.dvpf-connect-line-shine{stroke:rgba(255,255,255,.26);stroke-width:1.5px;transform:translateY(-1px)}
.dvpf-connect-thread-head{stroke:rgba(255,255,255,.78);stroke-width:2.5px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 4px 3px rgba(55,31,18,.46))}
.dvpf-connect-spool{--thread-color:#7bc8ff;position:absolute;width:12.8%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 50%,#f7eed7 0 18%,var(--thread-color) 19% 51%,#f7eed7 52% 67%,#7d5437 68% 79%,#4c2f20 80% 100%);box-shadow:0 5px 10px rgba(57,34,21,.34),inset 0 1px 2px rgba(255,255,255,.7);transition:transform .18s ease,filter .18s ease}.dvpf-connect-spool:before{content:'';position:absolute;inset:-14%;border:3px dashed color-mix(in srgb,var(--thread-color) 62%,transparent);border-radius:50%;opacity:0;transform:scale(.82);transition:.18s ease}.dvpf-connect-spool:after{content:'';position:absolute;inset:35%;border-radius:50%;background:#4b2d1d;box-shadow:inset 0 1px 2px rgba(255,255,255,.18)}.dvpf-connect-spool.is-active{transform:translate(-50%,-50%) scale(1.10);filter:brightness(1.08)}.dvpf-connect-spool.is-active:before{opacity:.72;transform:scale(1)}.dvpf-connect-spool.is-complete{filter:brightness(1.12) drop-shadow(0 0 8px var(--thread-color))}
.dvpf-connect-board.is-error{animation:dvpfConnectShake .28s ease;box-shadow:inset 0 0 0 4px rgba(255,84,112,.82),inset 0 8px 18px rgba(255,255,255,.26)}
.dvpf-connect-message{text-align:center;margin:16px 0 0;min-height:24px;color:#d6dcfa;font-weight:700}.dvpf-connect-actions{text-align:center;margin-top:13px}.dvpf-connect-done{text-align:center;margin-top:16px;padding:16px;border-radius:16px;background:rgba(110,231,168,.12);border:1px solid rgba(110,231,168,.28);font-size:17px}.dvpf-connect.is-complete .dvpf-connect-stage{box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),inset 0 0 24px rgba(37,18,8,.42),0 0 0 3px rgba(110,231,168,.13),0 16px 38px rgba(0,0,0,.28)}
.dvpf-connect-celebration{pointer-events:none;position:absolute;inset:0;overflow:hidden}.dvpf-connect-celebration i{--particle-color:#ffe16b;position:absolute;top:-7%;width:9px;height:18px;border-radius:999px;background:var(--particle-color);animation:dvpfConnectFall 1.6s ease-in forwards}
.dvpf-connect-error{padding:14px;border-radius:12px;background:#fff0f2;color:#9b2036}
@keyframes dvpfConnectShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes dvpfConnectFall{to{top:106%;transform:rotate(420deg)}}
@media(max-width:700px){.dvpf-connect{padding:15px;border-radius:18px}.dvpf-connect header{display:block}.dvpf-connect-head-tools{margin-top:12px;flex-wrap:wrap}.dvpf-connect-audio-controls{flex-wrap:wrap}.dvpf-connect header h2{font-size:25px}.dvpf-connect-stage{padding:9px;border-radius:18px}.dvpf-connect-board{border-radius:12px}.dvpf-connect-line-shadow{stroke-width:11px}.dvpf-connect-line{stroke-width:7px}.dvpf-connect-spool{width:15.5%}}
.dvpf-connect-obstacles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.dvpf-connect-lines{z-index:3}.dvpf-connect-spools{z-index:5}
.dvpf-connect-peg{position:absolute;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 36% 30%,#d9ae76 0 18%,#b47b49 19% 52%,#7c4e2f 53% 75%,#4a2b1c 76% 100%);border:2px solid rgba(65,37,22,.78);box-shadow:0 5px 8px rgba(64,38,22,.38),inset 0 2px 2px rgba(255,255,255,.38)}
.dvpf-connect-peg:after{content:'';position:absolute;inset:38%;border-radius:50%;background:#5a351f;box-shadow:inset 0 1px 2px rgba(255,255,255,.22)}
.dvpf-connect-board.is-stretched{box-shadow:inset 0 0 0 4px rgba(255,193,62,.72),inset 0 8px 18px rgba(255,255,255,.26)}
.dvpf-connect-board.is-stretched .dvpf-connect-line.is-active{filter:drop-shadow(0 0 5px rgba(255,193,62,.9)) drop-shadow(0 4px 2px rgba(46,27,15,.34))}
@media(max-width:700px){.dvpf-connect-peg{border-width:1px}}