/* R32 SoundCloud sampler, hardware edition. A dark panel continues the black page; each pad
 * is a small screen in a slot, numbered, with a small LED in its category colour. A liquid play
 * key, glowing, is the cursor over the pads; the playing pad's screen lights up as a small XY
 * oscilloscope drawn in dots (sound-scope-r32.js draws both on canvases layered between the
 * pads' backgrounds and their text). Fills, never strokes. */
.r32-sound{--r32-sound-ease:cubic-bezier(.16,1,.3,1);--r32-spring:cubic-bezier(.34,1.56,.64,1);background:#121212!important;color:#eee!important}
.r32-sound .r12-sound-player-top{color:#8a8a8a}
.r32-sound .r12-sound-player-top a{color:#ddd;font-size:14px;font-weight:500;gap:10px;min-height:44px}
.r32-sound .r12-sound-player-top a>span{font-size:18px}
/* never select pad text by clicking or dragging across the pads */
.r32-pads{-webkit-user-select:none;user-select:none;position:relative;display:grid;grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));gap:8px}
.r32-pad{position:relative;aspect-ratio:1.12;min-width:0;padding:10px 11px 12px;border:0;border-radius:10px;color:#e9e9e9;font-family:inherit;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:6px;overflow:hidden;cursor:pointer;transition:transform .45s var(--r32-spring),background-color .35s var(--r32-sound-ease),color .25s,opacity .5s var(--r32-sound-ease),filter .5s var(--r32-sound-ease)}
/* the pad's text sits above the scope (z 1) and below the key, which reads through it (z 3–4) */
.r32-pad>*{position:relative;z-index:2}
.r32-pad-top{display:flex;justify-content:space-between;align-items:center}
.r32-pad-top em{display:inline-flex;align-items:center;gap:7px;font:500 10px ui-monospace,"SF Mono",Menlo,monospace;font-style:normal;color:#8a8a8a}
.r32-pad-top em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pad);transition:box-shadow .4s var(--r32-sound-ease),background-color .45s var(--r32-sound-ease)}
.r32-pad-top kbd{min-width:18px;height:18px;padding:0 5px;border-radius:5px;background:#ffffff12;color:#9a9a9a;font:500 10px/18px ui-monospace,"SF Mono",Menlo,monospace;text-align:center}
.r32-pad-name{flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:clamp(12px,1.05vw,15px);font-weight:600;line-height:1.18;letter-spacing:-.01em}
.r32-pad small{font:500 10px ui-monospace,"SF Mono",Menlo,monospace;color:#8a8a8a;font-variant-numeric:tabular-nums}
/* Every pad is a small analog screen set into a slot milled in the panel. The slot is hard-edged:
 * a 3 px inner wall (--r32-wall, ::before) dark where it faces down and catching light where it
 * faces up, a crisp black line where the panel drops into it and a bright one on the lip below.
 * At the bottom of the wall sits the glass (::after: a black seal round its edge and the wall's
 * shadow on its top; no reflection), near black, with a faint graticule, a fine 3 px pixel grid
 * (the beam's dots sit on it) and a soft vignette. The playing pad is the live scope: a darker
 * screen still, whose graticule takes on its colour, lit from inside, its light on the walls
 * and on the lip below (sound-scope-r32.js draws the light). The panel itself stays grey: the
 * screen's own light is the only colour on it; the other pads' lights go out. The pads never
 * move or change size: they are part of the panel. */
.r32-pad{--r32-grid:#ffffff07;--r32-wall:3px;background-color:#070807;background-image:radial-gradient(130% 110% at 50% 50%,transparent 52%,#00000066),repeating-linear-gradient(180deg,#ffffff05 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(90deg,var(--r32-grid) 1px,transparent 1px),linear-gradient(0deg,var(--r32-grid) 1px,transparent 1px);background-size:auto,auto,auto,10% 100%,100% 12.5%;background-position:0 0,0 0,0 0,-1px 0,0 -1px;box-shadow:0 -1px 0 #000,0 1px 0 #ffffff29}
.r32-pad::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--r32-wall);pointer-events:none;background:linear-gradient(90deg,#ffffff0a,transparent 20% 80%,#00000066),linear-gradient(180deg,#000 0%,#050505 32%,#1c1d1d 74%,#3d3e3e 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.r32-pad::after{content:"";position:absolute;inset:var(--r32-wall);z-index:2;border-radius:calc(10px - var(--r32-wall));pointer-events:none;box-shadow:inset 0 0 0 1px #000000e0,inset 0 2px 0 #00000099,inset 0 7px 8px -6px #000000a6}
.r32-pad:not(.is-on):hover{background-color:#0d0f0e}
.r32-pad.is-on{--r32-grid:color-mix(in srgb,var(--pad) 13%,transparent);background-color:#020303;box-shadow:0 -1px 0 #000,0 1px 0 color-mix(in srgb,var(--pad) 45%,#ffffff29)}
.r32-pad.is-playing .r32-pad-top em::before{box-shadow:0 0 10px 1px var(--pad);animation:r32-led 1.1s ease-in-out infinite alternate}
@keyframes r32-led{to{opacity:.45}}
.r32-sound.has-on .r32-pad:not(.is-on) .r32-pad-top em::before{background:#3a3a3a}
.r32-pads>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.r32-pads>.r32-scope{z-index:1}
.r32-pads>.r32-key{z-index:3;mix-blend-mode:difference}
.r32-pads>.r32-key-icon{z-index:4;mix-blend-mode:difference}
/* with a mouse the play key is the cursor over the pads: both the system and the site cursor hide */
@media(hover:hover) and (pointer:fine){.r32-pads,.r32-pads .r32-pad{cursor:none}}
html[data-r32-key-over] .r17-cursor{visibility:hidden}
.r32-pad:focus-visible{outline:3px solid var(--pad);outline-offset:3px}
.r32-sound-now{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,2.2fr) auto;align-items:center;gap:16px;margin-top:18px;padding:12px 16px;border-radius:14px;background:#1b1b1b}
.r32-sound-toggle{width:42px;height:42px;border:0;border-radius:50%;background:var(--now,#D6FF3F);color:#000;font-size:13px;cursor:pointer;transition:transform .45s var(--r32-spring),opacity .2s,background-color .3s}
.r32-sound-toggle:disabled{opacity:.2;cursor:default;background:#fff}
.r32-sound-toggle:active:not(:disabled){transform:scale(.88)}
.r32-sound-title{min-width:0;display:grid;gap:2px}
.r32-sound-title b{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r32-sound-title small{font-size:11px;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r32-sound-scrub{position:relative;height:42px;cursor:pointer}
.r32-sound-scrub canvas{display:block;width:100%;height:100%}
.r32-sound-scrub span{position:absolute;top:0;bottom:0;width:1px;background:#fff;opacity:0;pointer-events:none}
.r32-sound-scrub span::after{content:attr(data-time);position:absolute;top:-18px;left:50%;transform:translateX(-50%);font:10px ui-monospace,"SF Mono",Menlo,monospace;color:#fff}
.r32-sound-scrub:hover span{opacity:.7}
.r32-sound-time{font:11px ui-monospace,"SF Mono",Menlo,monospace;color:#9a9a9a;white-space:nowrap}
.r32-sound-foot{display:flex;justify-content:flex-end;margin-top:14px}
/* three drum lamps (kick, snare, hi-hat) at the top left of the panel: dark glass bulbs that light in
 * the playing track's colour with each hit, as bright as the hit, and fade like a filament */
.r32-lamps{display:inline-flex;gap:7px}
.r32-lamps i{position:relative;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3c3c3c,#151515 72%);box-shadow:inset 0 -1px 1px #0009}
.r32-lamps i::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,var(--now,#D6FF3F) 48%,color-mix(in srgb,var(--now,#D6FF3F) 55%,#000));box-shadow:0 0 6px 1px var(--now,#D6FF3F),0 0 16px 4px color-mix(in srgb,var(--now,#D6FF3F) 40%,transparent);opacity:0;transition:opacity .42s cubic-bezier(.2,.7,.3,1)}
.r32-lamps i.on::after{opacity:var(--level,1);transition-duration:0s}
.r32-sound-all{font-size:14px;font-weight:500;min-height:44px;color:#fff;text-decoration:none;display:inline-flex;gap:10px;align-items:center}
.r32-sound-all span{transition:transform .4s var(--r32-sound-ease)}.r32-sound-all:hover span{transform:translateX(3px)}
/* the official widget plays the sound unseen; it keeps a normal size so its own waveform canvas is never 0 px */
.r12-sound-listening .r32-sound-engine{position:absolute;width:300px;height:166px;left:0;bottom:0;opacity:0;pointer-events:none;border:0;z-index:-1}
.r12-sound-listening.r32-sound{min-height:0}
@media(hover:none),(pointer:coarse){.r32-pad-top kbd{display:none}}
@media(max-width:760px){.r32-sound .r12-sound-player-top a,.r32-sound-all{font-size:13px;gap:8px}.r32-pads{grid-template-columns:repeat(var(--cols-phone,4),minmax(0,1fr));gap:6px}.r32-pad{aspect-ratio:1;padding:8px}.r32-pad-name{font-size:12px;-webkit-line-clamp:2}.r32-pad-top kbd{display:none}.r32-sound-now{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}.r32-sound-scrub{grid-column:1/-1;grid-row:2}}