/* SIGNAL 2002, PLAY A, the pad bank. Same tokens and SILVER wells as SOUND and TECH. */
.pface{position:absolute;left:0;top:0;transform-origin:0 0;z-index:1;background:var(--pskin) 0 0/var(--sw) var(--sh) no-repeat;color:#fff;font-family:var(--dot);
  --hole:#1a3a9e;--lcd:#ffffff;--lcd-ghost:rgba(255,255,255,.12);--lcd-dim:#9fb6ff;--amber:#ff8a1e}
.pface[hidden]{display:none}
.pface .ph{position:absolute;overflow:hidden;border-radius:var(--r-well);background:linear-gradient(180deg,#2448b8 0,#173193 100%)}
.pface .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(0,8,50,.45) 0 .7px,transparent 1px) 0 0/3px 3px}
.pface .ph::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.6);border-radius:inherit;z-index:2}
.pface .seg__lit{text-shadow:0 0 4px rgba(200,220,255,.6)}
.pface .pk{position:absolute;border:0;padding:0;background:transparent no-repeat;background-size:var(--sw) var(--sh);cursor:pointer;border-radius:var(--r-key);display:block}
.pface .pk:hover,.pface .pk:focus-visible,.pface .pk[aria-current="page"],.pface .pk[aria-pressed="true"]{background-image:var(--plit)}
.pface .pk:active,.pface .pk.is-down{background-image:var(--pdown)}
.pface .pk:focus-visible,.pface .knob:focus-visible{outline:2px dotted var(--amber);outline-offset:2px}
.pface .pad{touch-action:manipulation}
.pface .cap{font:400 9px var(--px);color:var(--lcd-dim);letter-spacing:0}

/* the screen */
.scr{padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.scr__top{display:flex;align-items:flex-end;gap:10px}
.scr__bpm,.scr__pos{font-size:44px}
.scr__st{margin-left:auto;margin-right:18px;padding:2px 6px;background:var(--lcd-ghost)}
.scr[data-state="playing"] .scr__st{background:var(--amber);color:#081a5e}
.scr__grid{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center}
.scr__row{display:flex;align-items:center;gap:12px}
.scr__row b{width:56px;font:400 10px var(--px);color:var(--lcd-dim)}
.scr__row.sel b{color:#fff}
.scr__row span{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.scr__row i{height:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.scr__row i:nth-child(4n+1){box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.scr__row i.on{background:#fff}
.scr__row i.now{background:rgba(159,182,255,.45)}
.scr__row i.on.now{background:var(--amber)}
.trk{display:flex;align-items:center;gap:20px;padding:0 16px}
.trk__n{font:400 22px var(--px);color:#fff}
.trk .cap{margin-left:auto}
.info{display:flex;gap:16px;padding:12px}
.info img{height:100%;aspect-ratio:4/3;object-fit:cover;flex:none;image-rendering:pixelated}
.info p{font-size:20px;line-height:1.05;margin:0 0 6px;color:#fff}
.info p.cap{font-size:9px;color:var(--lcd-dim);margin-bottom:8px}
.info p.dim{color:var(--lcd-dim)}
.pface .knob{position:absolute;cursor:grab;touch-action:none;border-radius:50%;user-select:none}
.pface .knob img{width:100%;height:100%;display:block;pointer-events:none}
.pface .pt{position:absolute;left:14px;top:9px;font:400 26px var(--px);color:#fff;letter-spacing:2px;white-space:pre;text-shadow:0 0 4px rgba(200,220,255,.6)}
.pface.is-phone .pt{left:10px;top:6px;font-size:20px}

.pface.is-phone .seg--title{font-size:24px;left:12px;top:6px}
.pface.is-phone .lcd__sub{font-size:8px;left:12px;right:12px;bottom:4px}
.pface.is-phone .scr{padding:8px 10px;gap:6px}
.pface.is-phone .scr__bpm,.pface.is-phone .scr__pos{font-size:26px}
.pface.is-phone .scr__st{margin-right:8px}
.pface.is-phone .scr__grid{gap:4px}
.pface.is-phone .scr__row{gap:6px}
.pface.is-phone .scr__row b{width:38px;font-size:7px}
.pface.is-phone .scr__row span{gap:2px}
.pface.is-phone .scr__row i{height:12px}