.pattern-preview.toggle-preview{position:relative;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;grid-gap:12px;gap:12px;padding:14px;height:180px;overflow:hidden;isolation:isolate;transition:background 1.2s cubic-bezier(.4,0,.2,1)}.toggle-badge{position:absolute;top:8px;right:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.dn input,.nm input,.pwr input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}.toggle-preview--motion-day-night{background:linear-gradient(135deg,#fef3c7,#dbeafe)}.toggle-preview--motion-day-night.toggle-preview--on{background:linear-gradient(135deg,#0b1027,#1e1b4b)}.dn{width:200px;height:84px;border-radius:999px;position:relative;cursor:pointer;overflow:hidden;background:linear-gradient(160deg,#fec57a,#f59e0b 45%,#fb923c);transition:all 1.2s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 3px 10px rgba(180,83,9,.35),inset 0 -2px 6px rgba(0,0,0,.1),0 14px 36px rgba(245,158,11,.35),0 4px 12px rgba(0,0,0,.12)}.dn.on{background:linear-gradient(160deg,#1e1b4b,#312e81 50%,#3730a3);box-shadow:inset 0 3px 10px rgba(0,0,0,.4),inset 0 -2px 6px rgba(99,102,241,.15),0 14px 36px rgba(67,56,202,.4),0 4px 12px rgba(0,0,0,.3)}.dn .star{position:absolute;background:#ffffff;border-radius:50%;opacity:0;transition:opacity .9s ease .4s}.dn.on .star{opacity:1;animation:dnTwinkle 2.6s ease-in-out infinite}@keyframes dnTwinkle{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}.dn .star:first-of-type{width:1.5px;height:1.5px;top:16px;left:24px;animation-delay:0s}.dn .star:nth-of-type(2){width:2px;height:2px;top:56px;left:32px;animation-delay:.4s}.dn .star:nth-of-type(3){width:1px;height:1px;top:34px;left:50px;animation-delay:.8s}.dn .star:nth-of-type(4){width:2.5px;height:2.5px;top:22px;left:70px;animation-delay:1.2s}.dn .star:nth-of-type(5){width:1.5px;height:1.5px;top:64px;left:80px;animation-delay:.2s}.dn .star:nth-of-type(6){width:1px;height:1px;top:46px;left:98px;animation-delay:1.5s}.dn .star:nth-of-type(7){width:2px;height:2px;top:14px;left:122px;animation-delay:.6s}.dn .star:nth-of-type(8){width:1.5px;height:1.5px;top:70px;left:130px;animation-delay:1s}.dn .star:nth-of-type(9){width:1px;height:1px;top:28px;left:162px;animation-delay:.3s}.dn .star:nth-of-type(10){width:1.5px;height:1.5px;top:56px;left:180px;animation-delay:1.4s}.dn .cloud{position:absolute;background:rgba(255,255,255,.9);border-radius:50px;filter:blur(.4px);transition:opacity .8s ease;box-shadow:0 2px 6px rgba(180,83,9,.08)}.dn.on .cloud{opacity:0}.dn .cloud:after,.dn .cloud:before{content:"";position:absolute;background:rgba(255,255,255,.9);border-radius:50%}.dn .cloud-1{width:32px;height:10px;top:20px;animation:dnDrift 14s linear infinite}.dn .cloud-1:before{width:12px;height:12px;top:-6px;left:6px}.dn .cloud-1:after{width:9px;height:9px;top:-4px;right:6px}.dn .cloud-2{width:24px;height:7px;top:56px;animation:dnDrift 19s linear infinite;animation-delay:-7s;opacity:.85}.dn .cloud-2:before{width:9px;height:9px;top:-4px;left:4px}.dn .cloud-2:after{width:7px;height:7px;top:-3px;right:4px}@keyframes dnDrift{0%{transform:translateX(-50px)}to{transform:translateX(250px)}}.dn .rays{position:absolute;width:84px;height:84px;top:0;left:0;pointer-events:none;animation:dnSpin 60s linear infinite;transition:opacity .6s ease,transform 1s cubic-bezier(.34,1.56,.64,1)}.dn.on .rays{opacity:0;transform:translateX(116px) scale(.5)}@keyframes dnSpin{to{transform:rotate(1turn)}}.dn .ray{position:absolute;width:3px;height:8px;background:linear-gradient(0deg,transparent,rgba(255,247,200,.85));top:4px;left:50%;margin-left:-1.5px;border-radius:2px;transform-origin:50% 38px;animation:dnRayPulse 2.4s ease-in-out infinite}@keyframes dnRayPulse{0%,to{opacity:.5;height:7px}50%{opacity:1;height:10px}}.dn .ray:first-of-type{transform:rotate(0deg)}.dn .ray:nth-of-type(2){transform:rotate(45deg);animation-delay:.3s}.dn .ray:nth-of-type(3){transform:rotate(90deg);animation-delay:.6s}.dn .ray:nth-of-type(4){transform:rotate(135deg);animation-delay:.9s}.dn .ray:nth-of-type(5){transform:rotate(180deg);animation-delay:1.2s}.dn .ray:nth-of-type(6){transform:rotate(225deg);animation-delay:1.5s}.dn .ray:nth-of-type(7){transform:rotate(270deg);animation-delay:1.8s}.dn .ray:nth-of-type(8){transform:rotate(315deg);animation-delay:2.1s}.dn .orb{position:absolute;width:68px;height:68px;top:8px;left:8px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff8dc 0,#fbbf24 50%,#d97706 100%);box-shadow:0 0 24px rgba(251,191,36,.7),0 0 48px rgba(251,146,60,.45),inset -3px -4px 12px rgba(180,83,9,.4),inset 3px 4px 8px rgba(255,247,200,.4);transition:transform 1.1s cubic-bezier(.34,1.56,.64,1),background 1s ease,box-shadow 1s ease}.dn.on .orb{transform:translateX(116px) rotate(1turn);background:radial-gradient(circle at 32% 30%,#f8fafc 0,#e2e8f0 55%,#94a3b8 100%);box-shadow:0 0 26px rgba(226,232,240,.45),0 0 60px rgba(165,180,252,.35),inset -6px -6px 16px rgba(71,85,105,.45),inset 4px 4px 10px rgba(248,250,252,.5)}.dn .crater{position:absolute;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,rgba(100,116,139,.55),rgba(71,85,105,.35));box-shadow:inset 1px 1px 2px rgba(0,0,0,.2);transition:opacity .7s ease .6s}.dn.on .crater{opacity:1}.dn .crater-1{width:12px;height:12px;top:18px;left:20px}.dn .crater-2{width:7px;height:7px;top:38px;left:42px}.dn .crater-3{width:8px;height:8px;top:44px;left:16px}.dn .crater-4{width:5px;height:5px;top:24px;left:42px}.toggle-preview--motion-neumorphic{background:radial-gradient(ellipse at 50% 100%,rgba(236,72,153,.05) 0,transparent 70%),linear-gradient(135deg,#ece2d0,#ddd0bb);box-shadow:inset 0 4px 30px rgba(166,144,110,.15);transition:background 1.2s cubic-bezier(.4,0,.2,1)}.toggle-preview--motion-neumorphic.toggle-preview--on{background:radial-gradient(ellipse at 50% 100%,rgba(236,72,153,.22) 0,transparent 60%),linear-gradient(135deg,#f2dce2,#e8c5cf)}.nm{width:200px;height:84px;background:#e5dac5;border-radius:999px;position:relative;cursor:pointer;transition:all .7s cubic-bezier(.4,0,.2,1);box-shadow:inset 6px 6px 14px rgba(160,138,100,.45),inset -6px -6px 14px rgba(255,252,240,.85),0 1px 1px rgba(255,252,240,.4)}.nm.on{background:#f4dce1;box-shadow:inset 6px 6px 14px rgba(200,130,160,.3),inset -6px -6px 14px rgba(255,248,250,.95),0 1px 1px rgba(255,252,240,.4)}.nm:before{content:"";position:absolute;inset:0;border-radius:999px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");opacity:.2;mix-blend-mode:multiply;pointer-events:none}.nm .t-dot{position:absolute;width:5px;height:5px;border-radius:50%;top:50%;margin-top:-2.5px;background:rgba(160,138,100,.32);box-shadow:inset 1px 1px 2px rgba(160,138,100,.45),0 1px 0 rgba(255,252,240,.6);transition:all .45s ease}.nm .t-dot:first-of-type{left:92px}.nm .t-dot:nth-of-type(2){left:112px}.nm .t-dot:nth-of-type(3){left:132px}.nm .t-dot:nth-of-type(4){left:152px}.nm .t-dot:nth-of-type(5){left:172px}.nm.on .t-dot{background:#ec4899;box-shadow:0 0 10px rgba(236,72,153,.85),0 0 18px rgba(236,72,153,.4);animation:nmDotBreathe 1.6s ease-in-out infinite}.nm.on .t-dot:first-of-type{transition-delay:.5s;animation-delay:1.2s}.nm.on .t-dot:nth-of-type(2){transition-delay:.6s;animation-delay:1.35s}.nm.on .t-dot:nth-of-type(3){transition-delay:.7s;animation-delay:1.5s}.nm.on .t-dot:nth-of-type(4){transition-delay:.8s;animation-delay:1.65s}.nm.on .t-dot:nth-of-type(5){transition-delay:.9s;animation-delay:1.8s}@keyframes nmDotBreathe{0%,to{box-shadow:0 0 8px rgba(236,72,153,.5),0 0 14px rgba(236,72,153,.2)}50%{box-shadow:0 0 14px rgba(236,72,153,1),0 0 24px rgba(236,72,153,.5)}}.nm .knob-pos{position:absolute;width:68px;height:68px;top:8px;left:8px;transition:transform .85s cubic-bezier(.34,1.56,.64,1)}.nm.on .knob-pos{transform:translateX(116px)}.nm .ripple{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;pointer-events:none}.nm.on .ripple-1{animation:nmRipple 1.6s ease-out .7s}.nm.on .ripple-2{animation:nmRipple 1.6s ease-out .9s}.nm.on .ripple-3{animation:nmRipple 1.6s ease-out 1.1s}@keyframes nmRipple{0%{transform:scale(1);opacity:0;border-color:rgba(236,72,153,.7)}12%{opacity:1}to{transform:scale(2.4);opacity:0;border-color:rgba(236,72,153,0)}}.nm .p{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#ffe4f0,#ec4899);top:50%;left:50%;margin:-2.5px 0 0 -2.5px;opacity:0;pointer-events:none;box-shadow:0 0 6px rgba(236,72,153,.6)}.nm.on .p{animation:nmBurst 1s ease-out .65s forwards}@keyframes nmBurst{0%{opacity:1;transform:translate(0) scale(0)}18%{opacity:1;transform:translate(0) scale(1.3)}60%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}.nm .knob{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,252,240,.95),rgba(229,218,197,0) 50%),linear-gradient(135deg,#f5ecdb,#d9cbb1);box-shadow:4px 4px 10px rgba(160,138,100,.55),-2px -2px 6px rgba(255,252,240,.9),inset 1px 1px 2px rgba(255,252,240,.7),inset -2px -2px 4px rgba(160,138,100,.2);transition:background .7s ease,box-shadow .7s ease}.nm.on .knob{background:radial-gradient(circle at 30% 25%,#fbbfd0 0,#ec4899 55%,#be185d 100%);box-shadow:0 0 28px rgba(236,72,153,.6),0 0 50px rgba(236,72,153,.3),4px 4px 14px rgba(190,24,93,.4),inset -3px -4px 10px rgba(157,23,77,.5),inset 3px 4px 8px rgba(255,220,235,.5);animation:nmKnobBreathe 3.2s ease-in-out 1.4s infinite}@keyframes nmKnobBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.nm .knob:before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.55) 50deg,transparent 110deg,transparent 1turn);opacity:0;transition:opacity .5s ease .9s;border-radius:50%;pointer-events:none}.nm.on .knob:before{opacity:.85;animation:nmShimmer 4.5s linear infinite}@keyframes nmShimmer{to{transform:rotate(1turn)}}.nm .grip{position:absolute;width:22px;height:2px;border-radius:2px;background:rgba(160,138,100,.45);box-shadow:0 1px 0 rgba(255,252,240,.6);left:50%;margin-left:-11px;transition:all .4s ease;z-index:2}.nm .grip-1{top:24px}.nm .grip-2{top:32px}.nm .grip-3{top:40px}.nm.on .grip{opacity:0;transform:scaleX(.4)}.nm .ring{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,220,235,.95);top:50%;left:50%;margin:-9px 0 0 -9px;opacity:0;transform:scale(.4);transition:all .5s cubic-bezier(.34,1.56,.64,1) .4s;box-shadow:0 0 8px rgba(255,220,235,.8),inset 0 0 4px rgba(255,220,235,.5);z-index:3}.nm.on .ring{opacity:1;transform:scale(1)}.nm .ring:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:white;top:50%;left:50%;margin:-2px 0 0 -2px;box-shadow:0 0 6px white;animation:nmRingDot 1.5s ease-in-out infinite}@keyframes nmRingDot{0%,to{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}}.nm:active .knob-pos{transform:scale(.94)}.nm.on:active .knob-pos{transform:translateX(116px) scale(.94)}.toggle-preview--motion-power{background:radial-gradient(ellipse at 50% 60%,#1a1a18 0,#0a0a09 70%)}.toggle-preview--motion-power.toggle-preview--on{background:radial-gradient(ellipse at 50% 60%,#0f2a1f 0,#050d08 70%)}.pwr{width:156px;height:156px;position:relative;cursor:pointer}.pwr,.pwr .led{border-radius:50%}.pwr .led{position:absolute;width:6px;height:6px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 2px rgba(0,0,0,.6);top:4px;left:50%;margin-left:-3px;transform-origin:50% 74px;transition:all .3s ease}.pwr .led:nth-of-type(2){transform:rotate(30deg)}.pwr .led:nth-of-type(3){transform:rotate(60deg)}.pwr .led:nth-of-type(4){transform:rotate(90deg)}.pwr .led:nth-of-type(5){transform:rotate(120deg)}.pwr .led:nth-of-type(6){transform:rotate(150deg)}.pwr .led:nth-of-type(7){transform:rotate(180deg)}.pwr .led:nth-of-type(8){transform:rotate(210deg)}.pwr .led:nth-of-type(9){transform:rotate(240deg)}.pwr .led:nth-of-type(10){transform:rotate(270deg)}.pwr .led:nth-of-type(11){transform:rotate(300deg)}.pwr .led:nth-of-type(12){transform:rotate(330deg)}.pwr.on .led{background:#34d399;box-shadow:0 0 8px #34d399,0 0 14px rgba(52,211,153,.5),inset 0 0 2px rgba(255,255,255,.4)}.pwr.on .led:first-of-type{transition-delay:0s}.pwr.on .led:nth-of-type(2){transition-delay:.05s}.pwr.on .led:nth-of-type(3){transition-delay:.1s}.pwr.on .led:nth-of-type(4){transition-delay:.15s}.pwr.on .led:nth-of-type(5){transition-delay:.2s}.pwr.on .led:nth-of-type(6){transition-delay:.25s}.pwr.on .led:nth-of-type(7){transition-delay:.3s}.pwr.on .led:nth-of-type(8){transition-delay:.35s}.pwr.on .led:nth-of-type(9){transition-delay:.4s}.pwr.on .led:nth-of-type(10){transition-delay:.45s}.pwr.on .led:nth-of-type(11){transition-delay:.5s}.pwr.on .led:nth-of-type(12){transition-delay:.55s}.pwr .core{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#2d2d2a 0,#14140f 70%,#0a0a09 100%);box-shadow:inset 0 4px 14px rgba(0,0,0,.6),inset 0 -2px 6px rgba(255,255,255,.04),0 4px 16px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:all .7s ease}.pwr.on .core{background:radial-gradient(circle at 30% 25%,#1a3d2e 0,#0a1f15 70%,#051208 100%);border-color:rgba(52,211,153,.25);box-shadow:inset 0 4px 14px rgba(0,0,0,.7),inset 0 -2px 8px rgba(52,211,153,.15),inset 0 0 24px rgba(52,211,153,.12),0 4px 16px rgba(0,0,0,.5),0 0 28px rgba(52,211,153,.25)}.pwr .icon{width:38px;height:38px;color:rgba(180,178,169,.35);transition:all .7s ease}.pwr.on .icon{color:#34d399;filter:drop-shadow(0 0 6px #34d399) drop-shadow(0 0 10px rgba(52,211,153,.5))}.pwr .aura{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(52,211,153,0);pointer-events:none;transition:border-color .4s ease}.pwr.on .aura{border-color:rgba(52,211,153,.4);animation:pwrPulse 2.6s ease-out .6s infinite}@keyframes pwrPulse{0%{transform:scale(1);opacity:.6;border-color:rgba(52,211,153,.5)}to{transform:scale(1.35);opacity:0;border-color:rgba(52,211,153,0)}}@media (prefers-reduced-motion:reduce){.pattern-preview.toggle-preview,.pattern-preview.toggle-preview *,.pattern-preview.toggle-preview :after,.pattern-preview.toggle-preview :before,.pattern-preview.toggle-preview:after,.pattern-preview.toggle-preview:before{transition:none!important;animation:none!important}}