/* Hand-inked patch icons. GENERATED by scripts/draw_patch_icons.mjs.
   Fills come from the tile's custom properties; .i-gnd is an occluder in the
   tile's ground colour so a front plane can hide what is behind it.
   Motion: paused at rest, running on hover (small, --pi-amp .3) and while the
   patch plays (full, --pi-amp 1). Looping motions change speed instead. */
@property --pi-amp { syntax: "<number>"; inherits: true; initial-value: 0; }
.pg-tile .pg-icon { --pi-amp: 0; transition: --pi-amp 0.28s ease-out; }
.pg-tile:hover .pg-icon { --pi-amp: 0.3; }
.pg-tile[aria-pressed="true"] .pg-icon { --pi-amp: 1; }
.pg-tile .i-ink { fill: var(--i-ink); }
.pg-tile .i-soft { fill: var(--i-soft); }
.pg-tile .i-gnd { fill: var(--i-ground, black); }
.pg-tile .i-acc { fill: var(--i-acc); opacity: 0.62; transition: opacity 0.15s ease-out; }
.pg-tile:hover .i-acc { opacity: 0.85; }
.pg-tile[aria-pressed="true"] .i-acc { opacity: 1; }
.pg-tile:hover .pi-a,
.pg-tile[aria-pressed="true"] .pi-a { animation-play-state: running; }
.pg-tile .pi-fst10-stick{transform-box:view-box;transform-origin:110px 10px;animation:pi-fst10-stick 1.2s linear infinite;animation-play-state:paused;}
@keyframes pi-fst10-stick{0%,100%{transform:rotate(0)}8%{transform:rotate(calc(var(--pi-amp) * -10deg))}13%{transform:rotate(calc(var(--pi-amp) * -7.5deg))}24%{transform:rotate(calc(var(--pi-amp) * 4deg))}46%{transform:rotate(calc(var(--pi-amp) * 2deg))}54%{transform:rotate(calc(var(--pi-amp) * -10deg))}59%{transform:rotate(calc(var(--pi-amp) * -7deg))}72%{transform:rotate(calc(var(--pi-amp) * -3deg))}79%{transform:rotate(calc(var(--pi-amp) * -6deg))}84%{transform:rotate(calc(var(--pi-amp) * -1deg))}}
.pg-tile .pi-fst10-crack{transform-box:view-box;transform-origin:70px 59px;animation:pi-fst10-crack 1.2s ease-out infinite;animation-play-state:paused;}
@keyframes pi-fst10-crack{0%,7%{transform:scale(calc(1 + var(--pi-amp) * -0.6))}9%{transform:scale(calc(1 + var(--pi-amp) * 0.3))}22%{transform:scale(calc(1 + var(--pi-amp) * -0.15))}40%,53%{transform:scale(calc(1 + var(--pi-amp) * -0.65))}55%{transform:scale(calc(1 + var(--pi-amp) * 0.38))}68%{transform:scale(calc(1 + var(--pi-amp) * -0.1))}78%{transform:scale(calc(1 + var(--pi-amp) * -0.55))}80%{transform:scale(calc(1 + var(--pi-amp) * -0.15))}90%{transform:scale(calc(1 + var(--pi-amp) * -0.5))}}
.pg-tile .pi-fst10-ghost{transform-box:view-box;transform-origin:3px 31px;animation:pi-fst10-ghost 1.2s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-fst10-ghost{0%,100%{transform:rotate(0)}30%{transform:rotate(calc(var(--pi-amp) * -8deg))}36%{transform:rotate(calc(var(--pi-amp) * 1.5deg))}42%{transform:rotate(calc(var(--pi-amp) * -5deg))}63%{transform:rotate(calc(var(--pi-amp) * -9deg))}69%{transform:rotate(calc(var(--pi-amp) * 1.5deg))}88%{transform:rotate(calc(var(--pi-amp) * -4deg))}94%{transform:rotate(calc(var(--pi-amp) * 1deg))}}
.pg-tile .pi-arp06-knob{transform-box:view-box;transform-origin:37px 79px;animation:pi-arp06-knob 1.9s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-arp06-knob{0%,100%{transform:rotate(0)}22%{transform:rotate(calc(var(--pi-amp) * -40deg))}40%{transform:rotate(calc(var(--pi-amp) * 26deg))}56%{transform:rotate(calc(var(--pi-amp) * -12deg))}74%{transform:rotate(calc(var(--pi-amp) * 46deg))}}
.pg-tile .pi-arp06-wave{transform-box:view-box;transform-origin:50px 54px;animation:pi-arp06-wave 0.95s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-arp06-wave{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(calc(1 + var(--pi-amp) * -0.05),calc(1 + var(--pi-amp) * 0.3)) skewX(calc(var(--pi-amp) * -8deg))}50%{transform:scale(calc(1 + var(--pi-amp) * 0.04),calc(1 + var(--pi-amp) * -0.24)) skewX(calc(var(--pi-amp) * 6deg))}75%{transform:scale(calc(1 + var(--pi-amp) * -0.03),calc(1 + var(--pi-amp) * 0.16)) skewX(calc(var(--pi-amp) * -3deg))}}
.pg-tile .pi-arp01-dash{transform-box:view-box;transform-origin:60px 60px;animation:pi-arp01-dash 0.42s linear infinite;animation-play-state:paused;}
.pg-tile:hover .pi-arp01-dash{animation-duration:1.6s}
.pg-tile[aria-pressed="true"] .pi-arp01-dash{animation-duration:0.42s}
@keyframes pi-arp01-dash{from{transform:scale(1)}to{transform:scale(1.55)}}
.pg-tile .pi-arp01-sun{transform-box:view-box;transform-origin:60px 60px;animation:pi-arp01-sun 0.6s steps(1,end) infinite;animation-play-state:paused;}
@keyframes pi-arp01-sun{0%{transform:translateY(0)}25%{transform:translateY(calc(var(--pi-amp) * -1.6px))}50%{transform:translateY(calc(var(--pi-amp) * -3.2px))}75%{transform:translateY(calc(var(--pi-amp) * -1.6px))}}
.pg-tile .pi-bas02-a{transform-box:view-box;transform-origin:48px 70px;animation:pi-bas02-a 1.1s linear infinite;animation-play-state:paused;}
.pg-tile:hover .pi-bas02-a{animation-duration:4.4s}
.pg-tile[aria-pressed="true"] .pi-bas02-a{animation-duration:1.1s}
@keyframes pi-bas02-a{to{transform:rotate(360deg)}}
.pg-tile .pi-bas02-b{transform-box:view-box;transform-origin:79px 44px;animation:pi-bas02-b 1.04s linear infinite;animation-play-state:paused;}
.pg-tile:hover .pi-bas02-b{animation-duration:4.16s}
.pg-tile[aria-pressed="true"] .pi-bas02-b{animation-duration:1.04s}
@keyframes pi-bas02-b{to{transform:rotate(-360deg)}}
.pg-tile .pi-bas02-shake{transform-box:view-box;transform-origin:60px 60px;animation:pi-bas02-shake 0.18s steps(1,end) infinite;animation-play-state:paused;}
@keyframes pi-bas02-shake{0%{transform:translate(0,0)}25%{transform:translate(calc(var(--pi-amp) * 0.9px),calc(var(--pi-amp) * -0.6px))}50%{transform:translate(calc(var(--pi-amp) * -0.7px),calc(var(--pi-amp) * 0.8px))}75%{transform:translate(calc(var(--pi-amp) * 0.5px),calc(var(--pi-amp) * 0.7px))}}
.pg-tile .pi-bas02-spark{transform-box:view-box;transform-origin:70px 45px;animation:pi-bas02-spark 0.36s steps(1,end) infinite;animation-play-state:paused;}
@keyframes pi-bas02-spark{0%{transform:scale(1) rotate(0)}33%{transform:scale(calc(1 + var(--pi-amp) * -0.4)) rotate(calc(var(--pi-amp) * 18deg))}66%{transform:scale(calc(1 + var(--pi-amp) * 0.15)) rotate(calc(var(--pi-amp) * -12deg))}}
.pg-tile .pi-fst03-foam{transform-box:view-box;transform-origin:88px 38px;animation:pi-fst03-foam 0.9s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-fst03-foam{0%,100%{transform:rotate(0)}25%{transform:rotate(calc(var(--pi-amp) * 5deg))}50%{transform:rotate(calc(var(--pi-amp) * -2deg))}75%{transform:rotate(calc(var(--pi-amp) * 4deg))}}
.pg-tile .pi-fst03-spray{transform-box:view-box;transform-origin:100px 30px;animation:pi-fst03-spray 0.45s ease-out infinite;animation-play-state:paused;}
@keyframes pi-fst03-spray{0%{transform:translate(0,0)}50%{transform:translate(calc(var(--pi-amp) * 3px),calc(var(--pi-amp) * -3px))}100%{transform:translate(0,0)}}
.pg-tile .pi-wor04-rain1{transform-box:view-box;transform-origin:60px 20px;animation:pi-wor04-rain1 0.7s linear infinite;animation-play-state:paused;}
@keyframes pi-wor04-rain1{0%{transform:translate(0,0);opacity:1}100%{transform:translate(calc(var(--pi-amp) * -5px),calc(var(--pi-amp) * 22px));opacity:calc(1 - var(--pi-amp))}}
.pg-tile .pi-wor04-rain2{transform-box:view-box;transform-origin:60px 20px;animation:pi-wor04-rain2 0.7s linear infinite;animation-play-state:paused;animation-delay:-0.35s;}
@keyframes pi-wor04-rain2{0%{transform:translate(0,0);opacity:1}100%{transform:translate(calc(var(--pi-amp) * -5px),calc(var(--pi-amp) * 22px));opacity:calc(1 - var(--pi-amp))}}
.pg-tile .pi-wor04-ring{transform-box:view-box;transform-origin:60px 67px;animation:pi-wor04-ring 1.2s ease-out infinite;animation-play-state:paused;}
.pg-tile .pi-wor04-ring:nth-child(1){animation-delay:-0.800s}
.pg-tile .pi-wor04-ring:nth-child(2){animation-delay:-0.400s}
.pg-tile .pi-wor04-ring:nth-child(3){animation-delay:0.000s}
@keyframes pi-wor04-ring{0%{transform:scale(calc(1 + var(--pi-amp) * -0.3)) rotate(0);opacity:1}100%{transform:scale(calc(1 + var(--pi-amp) * 0.18)) rotate(calc(var(--pi-amp) * 12deg));opacity:calc(1 - var(--pi-amp))}}
.pg-tile .pi-wor09-ring{transform-box:view-box;transform-origin:60px 40px;animation:pi-wor09-ring 1.2s ease-out infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:50% 50%;}
.pg-tile .pi-wor09-ring:nth-child(1){animation-delay:-0.800s}
.pg-tile .pi-wor09-ring:nth-child(2){animation-delay:-0.400s}
.pg-tile .pi-wor09-ring:nth-child(3){animation-delay:0.000s}
@keyframes pi-wor09-ring{0%{transform:scale(calc(1 + var(--pi-amp) * 0.12),calc(1 + var(--pi-amp) * 0.2))}12%{transform:scale(calc(1 + var(--pi-amp) * -0.05),calc(1 + var(--pi-amp) * -0.12))}24%{transform:scale(calc(1 + var(--pi-amp) * 0.04),calc(1 + var(--pi-amp) * 0.06))}40%,100%{transform:scale(1)}}
.pg-tile .pi-arp11-str{transform-box:view-box;transform-origin:60px 60px;animation:pi-arp11-str 1.6s ease-out infinite;animation-play-state:paused;}
.pg-tile .pi-arp11-str:nth-child(1){animation-delay:-0.480s}
.pg-tile .pi-arp11-str:nth-child(2){animation-delay:-0.420s}
.pg-tile .pi-arp11-str:nth-child(3){animation-delay:-0.360s}
.pg-tile .pi-arp11-str:nth-child(4){animation-delay:-0.300s}
.pg-tile .pi-arp11-str:nth-child(5){animation-delay:-0.240s}
.pg-tile .pi-arp11-str:nth-child(6){animation-delay:-0.180s}
.pg-tile .pi-arp11-str:nth-child(7){animation-delay:-0.120s}
.pg-tile .pi-arp11-str:nth-child(8){animation-delay:-0.060s}
.pg-tile .pi-arp11-str:nth-child(9){animation-delay:0.000s}
@keyframes pi-arp11-str{0%,100%{transform:translateX(0)}3%{transform:translateX(calc(var(--pi-amp) * 1.6px))}7%{transform:translateX(calc(var(--pi-amp) * -1.3px))}11%{transform:translateX(calc(var(--pi-amp) * 0.9px))}16%{transform:translateX(calc(var(--pi-amp) * -0.5px))}22%{transform:translateX(calc(var(--pi-amp) * 0.25px))}28%{transform:translateX(0)}}
.pg-tile .pi-arp11-spark{transform-box:view-box;transform-origin:108px 18px;animation:pi-arp11-spark 1.6s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-arp11-spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(calc(1 + var(--pi-amp) * -0.35)) rotate(calc(var(--pi-amp) * 40deg))}}
.pg-tile .pi-ten03-swell{transform-box:view-box;transform-origin:84px 34px;animation:pi-ten03-swell 2.6s ease-in-out infinite;animation-play-state:paused;}
.pg-tile .pi-ten03-swell:nth-child(1){animation-delay:-0.360s}
.pg-tile .pi-ten03-swell:nth-child(2){animation-delay:-0.180s}
.pg-tile .pi-ten03-swell:nth-child(3){animation-delay:0.000s}
@keyframes pi-ten03-swell{0%,100%{transform:scale(calc(1 + var(--pi-amp) * -0.22));opacity:calc(1 - var(--pi-amp) * 0.85)}55%{transform:scale(calc(1 + var(--pi-amp) * 0.08));opacity:1}}
.pg-tile .pi-ten03-slide{transform-box:view-box;transform-origin:0px 0px;animation:pi-ten03-slide 2.6s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-ten03-slide{0%,100%{transform:translate(0,0)}55%{transform:translate(calc(var(--pi-amp) * -4.1679502227539835px),calc(var(--pi-amp) * 4.316038802031907px))}}
.pg-tile .pi-ten03-bell{transform-box:view-box;transform-origin:84px 34px;animation:pi-ten03-bell 2.6s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-ten03-bell{0%,100%{transform:scale(1)}55%{transform:scale(calc(1 + var(--pi-amp) * 0.08))}}
.pg-tile .pi-bed02-beam{transform-box:view-box;transform-origin:72px 68px;animation:pi-bed02-beam 3.2s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-bed02-beam{0%,100%{transform:skewX(0) scaleX(1);opacity:1}35%{transform:skewX(calc(var(--pi-amp) * -4deg)) scaleX(calc(1 + var(--pi-amp) * 0.05));opacity:calc(1 - var(--pi-amp) * 0.35)}70%{transform:skewX(calc(var(--pi-amp) * 3deg)) scaleX(calc(1 + var(--pi-amp) * -0.04));opacity:1}}
.pg-tile .pi-bed02-motes{transform-box:view-box;transform-origin:50px 70px;animation:pi-bed02-motes 3.2s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-bed02-motes{0%{transform:translate(0,0);opacity:1}50%{transform:translate(calc(var(--pi-amp) * 3px),calc(var(--pi-amp) * -10px));opacity:calc(1 - var(--pi-amp) * 0.2)}100%{transform:translate(calc(var(--pi-amp) * -1px),calc(var(--pi-amp) * -18px));opacity:calc(1 - var(--pi-amp))}}
.pg-tile .pi-lof21-reelL{transform-box:view-box;transform-origin:39.48215107393652px 61.65183572822603px;animation:pi-lof21-reelL 2.2s linear infinite;animation-play-state:paused;}
.pg-tile:hover .pi-lof21-reelL{animation-duration:7s}
.pg-tile[aria-pressed="true"] .pi-lof21-reelL{animation-duration:2.2s}
@keyframes pi-lof21-reelL{0%{transform:rotate(0)}30%{transform:rotate(150deg)}48%{transform:rotate(196deg)}70%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
.pg-tile .pi-lof21-reelR{transform-box:view-box;transform-origin:79.5812738951853px 57.43724808927424px;animation:pi-lof21-reelR 2.2s linear infinite;animation-play-state:paused;animation-delay:-0.3s;}
.pg-tile:hover .pi-lof21-reelR{animation-duration:7s}
.pg-tile[aria-pressed="true"] .pi-lof21-reelR{animation-duration:2.2s}
@keyframes pi-lof21-reelR{0%{transform:rotate(0)}30%{transform:rotate(150deg)}48%{transform:rotate(196deg)}70%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
.pg-tile .pi-lof21-wow{transform-box:view-box;transform-origin:60px 64px;animation:pi-lof21-wow 2.2s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-lof21-wow{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(calc(var(--pi-amp) * 1.6deg)) translateY(calc(var(--pi-amp) * -1.2px))}70%{transform:rotate(calc(var(--pi-amp) * -1.1deg)) translateY(calc(var(--pi-amp) * 0.6px))}}
.pg-tile .pi-lof21-dust{transform-box:view-box;transform-origin:60px 15px;animation:pi-lof21-dust 4.4s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-lof21-dust{0%,100%{transform:translate(0,0)}50%{transform:translate(calc(var(--pi-amp) * 3px),calc(var(--pi-amp) * -3px))}}
.pg-tile .pi-lof12-hammer{transform-box:view-box;transform-origin:60px 55px;animation:pi-lof12-hammer 0.9s ease-out infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:50% 100%;}
.pg-tile .pi-lof12-hammer:nth-child(1){animation-delay:-0.600s}
.pg-tile .pi-lof12-hammer:nth-child(2){animation-delay:-0.300s}
.pg-tile .pi-lof12-hammer:nth-child(3){animation-delay:0.000s}
@keyframes pi-lof12-hammer{0%,100%{transform:rotate(0)}6%{transform:rotate(calc(var(--pi-amp) * -16deg))}14%{transform:rotate(calc(var(--pi-amp) * 2deg))}20%{transform:rotate(0)}}
.pg-tile .pi-lof12-key{transform-box:view-box;transform-origin:60px 77px;animation:pi-lof12-key 0.9s ease-out infinite;animation-play-state:paused;}
.pg-tile .pi-lof12-key:nth-child(1){animation-delay:-0.600s}
.pg-tile .pi-lof12-key:nth-child(2){animation-delay:-0.300s}
.pg-tile .pi-lof12-key:nth-child(3){animation-delay:0.000s}
@keyframes pi-lof12-key{0%,100%{transform:translateY(0)}6%{transform:translateY(calc(var(--pi-amp) * 1.8px))}20%{transform:translateY(0)}}
.pg-tile .pi-fst01-hat{transform-box:view-box;transform-origin:60px 40px;animation:pi-fst01-hat 1s linear infinite;animation-play-state:paused;}
@keyframes pi-fst01-hat{0%,100%{transform:translateY(0)}4%{transform:translateY(calc(var(--pi-amp) * -2.6px))}8%{transform:translateY(0)}12.5%{transform:translateY(calc(var(--pi-amp) * -2.6px))}16.5%{transform:translateY(0)}21%{transform:translateY(calc(var(--pi-amp) * -2.6px))}25%{transform:translateY(0)}29%{transform:translateY(calc(var(--pi-amp) * -2px))}33%{transform:translateY(0)}37.5%{transform:translateY(calc(var(--pi-amp) * -2px))}41.5%{transform:translateY(0)}46%{transform:translateY(calc(var(--pi-amp) * -2px))}50%{transform:translateY(0)}54%{transform:translateY(calc(var(--pi-amp) * -2.6px))}58%{transform:translateY(0)}70%{transform:translateY(calc(var(--pi-amp) * -2.6px))}74%{transform:translateY(0)}}
.pg-tile .pi-fst01-tick{transform-box:view-box;transform-origin:60px 20px;animation:pi-fst01-tick 1s steps(1,end) infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:50% 100%;}
.pg-tile .pi-fst01-tick:nth-child(1){animation-delay:-0.080s}
.pg-tile .pi-fst01-tick:nth-child(2){animation-delay:-0.040s}
.pg-tile .pi-fst01-tick:nth-child(3){animation-delay:0.000s}
@keyframes pi-fst01-tick{0%,8%,16.5%,25%,33%,41.5%,50%,58%,70%{opacity:1;transform:scale(1)}4%,12.5%,21%,29%,37.5%,46%,54%,62%,80%,90%{opacity:calc(1 - var(--pi-amp) * 0.85);transform:scale(calc(1 + var(--pi-amp) * -0.35))}}
.pg-tile .pi-fst01-boom{transform-box:view-box;transform-origin:60px 104px;animation:pi-fst01-boom 1s ease-out infinite;animation-play-state:paused;}
.pg-tile .pi-fst01-boom:nth-child(1){animation-delay:-0.100s}
.pg-tile .pi-fst01-boom:nth-child(2){animation-delay:-0.050s}
.pg-tile .pi-fst01-boom:nth-child(3){animation-delay:0.000s}
@keyframes pi-fst01-boom{0%{transform:scale(calc(1 + var(--pi-amp) * -0.3));opacity:1}45%,100%{transform:scale(calc(1 + var(--pi-amp) * 0.22));opacity:calc(1 - var(--pi-amp))}}
.pg-tile .pi-fst06-kick{transform-box:view-box;transform-origin:54px 70px;animation:pi-fst06-kick 1.9s ease-out infinite;animation-play-state:paused;}
@keyframes pi-fst06-kick{0%,25%,50%,75%{transform:scale(calc(1 + var(--pi-amp) * 0.16))}10%,35%,60%,85%,100%{transform:scale(calc(1 + var(--pi-amp) * -0.04))}}
.pg-tile .pi-fst06-pump{transform-box:view-box;transform-origin:54px 70px;animation:pi-fst06-pump 0.475s ease-out infinite;animation-play-state:paused;}
.pg-tile .pi-fst06-pump:nth-child(1){animation-delay:-0.050s}
.pg-tile .pi-fst06-pump:nth-child(2){animation-delay:0.000s}
@keyframes pi-fst06-pump{0%{transform:scale(calc(1 + var(--pi-amp) * -0.12));opacity:1}60%,100%{transform:scale(calc(1 + var(--pi-amp) * 0.1));opacity:calc(1 - var(--pi-amp))}}
.pg-tile .pi-fst06-hat{transform-box:view-box;transform-origin:94px 25px;animation:pi-fst06-hat 0.475s ease-in-out infinite;animation-play-state:paused;}
@keyframes pi-fst06-hat{0%,30%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(var(--pi-amp) * -3.4px)) rotate(calc(var(--pi-amp) * -5deg))}62%{transform:translateY(calc(var(--pi-amp) * -2.6px)) rotate(calc(var(--pi-amp) * -3deg))}}
@media (prefers-reduced-motion: reduce) {
  .pg-tile .pi-a { animation: none !important; }
  .pg-tile .pg-icon { transition: none; }
}