.v9Mdjq_tiles{--bar-max:172px;--bar-fall:60px;--rail:30px;grid-template-columns:repeat(var(--count), minmax(var(--tap), 116px));touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:8px;padding:10px 6px 4px;display:grid}.v9Mdjq_cell{align-items:center;display:grid;position:relative}.v9Mdjq_cell:before,.v9Mdjq_cell:after{content:"";background:linear-gradient(#e7b47a,#a86f3a 70%,#8a5a2e);border-radius:5px;height:10px;position:absolute;left:-7px;right:-7px;box-shadow:0 3px 4px #2b214038}.v9Mdjq_cell:before{top:calc(50% - var(--rail) - 5px)}.v9Mdjq_cell:after{top:calc(50% + var(--rail) - 5px)}.v9Mdjq_tile{--screw:radial-gradient(circle, #ffffffe6 0 2px, #2b214073 2.5px 3.8px, transparent 4.2px);z-index:1;min-width:var(--tap);height:calc(var(--bar-max) - var(--rise) * var(--bar-fall) / var(--count));min-height:calc(var(--tap) + 8px);background:var(--screw) 50% calc(50% - var(--rail)) / 10px 10px no-repeat, var(--screw) 50% calc(50% + var(--rail)) / 10px 10px no-repeat, linear-gradient(90deg, #ffffff57, transparent 24% 74%, #00000024), linear-gradient(180deg, #ffffff47, transparent 26%), var(--tile);color:var(--tile-ink);cursor:pointer;--raised:0;-webkit-tap-highlight-color:transparent;border:0;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:0;transition:transform 80ms,filter .12s,box-shadow .12s;display:flex;position:relative;box-shadow:inset 0 -6px #00000029,inset 0 2px #fff6,0 4px #00000024,0 10px 16px -6px #2b214059}.v9Mdjq_tile:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.v9Mdjq_tileLit{filter:brightness(1.18)saturate(1.1);box-shadow:inset 0 -3px 0 #00000029, 0 0 0 4px #ffffffe6, 0 0 26px 8px var(--tile);transform:translateY(3px)scale(.98)}.v9Mdjq_tileHint{animation:1s ease-in-out infinite v9Mdjq_beckon}.v9Mdjq_tileWord{letter-spacing:.01em;text-transform:capitalize;background:#ffffff38;border-radius:999px;padding:1px 8px 2px;font-size:clamp(15px,3.8vw,20px);font-weight:900}.v9Mdjq_tileDot{background:var(--tile-ink);opacity:.8;border-radius:50%;width:9px;height:9px;position:absolute;top:9px}.v9Mdjq_tileKey{font-size:max(10px, var(--type-floor));opacity:.55;font-weight:800;position:absolute;top:7px;right:9px}@media (hover:none){.v9Mdjq_tileKey{display:none}}.v9Mdjq_note{color:var(--tile);text-shadow:0 0 2px #fff,0 0 2px #fff,0 2px 3px #2b214059;opacity:0;pointer-events:none;font-size:26px;font-weight:900;line-height:1;position:absolute;top:-4px;left:50%;transform:translate(-50%)}.v9Mdjq_tileLit .v9Mdjq_note{animation:.9s ease-out v9Mdjq_float-note}.v9Mdjq_drums .v9Mdjq_cell:before,.v9Mdjq_drums .v9Mdjq_cell:after{display:none}.v9Mdjq_drums .v9Mdjq_tile{aspect-ratio:1;background:radial-gradient(circle closest-side at 42% 38%, #fff 0 22%, transparent 60%), radial-gradient(circle closest-side, #fbf6ec 0 64%, #e9dcc4 71%, #2b214059 72% 75%, transparent 76%), linear-gradient(180deg, #ffffff4d, transparent 40%), var(--tile);border-radius:50%;justify-self:center;width:min(100%,132px);height:auto}@media (max-width:559px){.v9Mdjq_tiles{--bar-max:124px;--bar-fall:32px;--rail:24px;grid-template-columns:repeat(var(--narrow), minmax(var(--tap), 104px))}}@media (max-width:559px) and (max-height:760px),(orientation:landscape) and (max-height:520px){.v9Mdjq_tiles{--bar-max:88px;--bar-fall:12px;--rail:20px;padding-top:6px}.v9Mdjq_drums .v9Mdjq_tile{width:min(100%,92px)}}.v9Mdjq_offscreen{pointer-events:none;position:absolute;top:0;left:-20000px}.v9Mdjq_guide{flex-direction:column;gap:14px;display:flex}.v9Mdjq_guide h3{color:var(--text);margin:0 0 6px;font-size:15px;font-weight:800}.v9Mdjq_guide p{color:var(--muted);margin:0;font-size:14px;line-height:1.6}@keyframes v9Mdjq_beckon{50%{box-shadow:inset 0 -8px 0 #00000029, 0 0 0 4px #ffffffe6, 0 0 18px 4px var(--tile);transform:translateY(-6px)}}@keyframes v9Mdjq_float-note{0%{opacity:1;transform:translate(-50%,4px)scale(.6)}to{opacity:0;transform:translate(-30%,-44px)rotate(14deg)scale(1.1)}}@media (prefers-reduced-motion:reduce){.v9Mdjq_tileLit .v9Mdjq_note{animation:none}.v9Mdjq_tileHint{box-shadow:0 0 0 4px #ffffffe6, 0 0 18px 4px var(--tile);animation:none}}
