/* Ayres Synthesizer — knob rotativo e telas auxiliares */
/* ══════════════════ knob ══════════════════ */
.cell{
  width:var(--cell);height:var(--row);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:3px;position:relative;
}
.cell.w2{width:calc(var(--cell)*2);grid-column:span 2}
.klbl{
  font-size:8px;letter-spacing:.09em;font-weight:600;text-transform:uppercase;
  color:var(--ink-soft);text-shadow:0 1px 0 var(--emboss);
  margin-bottom:3px;text-align:center;line-height:1.15;height:19px;
  display:flex;align-items:flex-end;transition:color 180ms var(--ease-out);
}
.dial{
  position:relative;width:58px;height:58px;cursor:grab;touch-action:none;outline:none;
  transition:transform 220ms var(--ease-out);
}
.dial:active{cursor:grabbing}
.dial.press{transform:scale(.955);transition-duration:110ms}
@media (hover:hover) and (pointer:fine){
  .cell:hover .dial:not(.press){transform:scale(1.035)}
  .cell:hover .klbl{color:var(--ink)}
}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .trk{fill:none;stroke:rgba(38,32,22,.22);stroke-width:2;stroke-linecap:round}
.dial .fil{fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round}
.dial .glow{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;
  opacity:.20;filter:blur(3px);transition:opacity 200ms var(--ease-out)}
.dial.press .glow,.dial.live .glow{opacity:.55}
.dial .tip{fill:#fff3dc;filter:drop-shadow(0 0 4px rgba(255,154,46,.95))}
.dial .tick{stroke:rgba(38,32,22,.26);stroke-width:1;stroke-linecap:round}
.dial .tick.maj{stroke:rgba(38,32,22,.52);stroke-width:1.4}
.cap{
  position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;
  background:
    radial-gradient(115% 115% at 33% 20%,rgba(255,255,255,.30),rgba(255,255,255,0) 44%),
    conic-gradient(from 205deg,#40404b,#15151b 22%,#31313a 48%,#0f0f14 74%,#40404b),
    radial-gradient(circle at 50% 55%,#22222a,#0a0a0e 80%);
  box-shadow:
    0 0 0 .8px rgba(0,0,0,.6),
    inset 0 1.2px 1.4px rgba(255,255,255,.34),
    inset 0 -6px 9px rgba(0,0,0,.68),
    0 5px 11px rgba(0,0,0,.42),
    0 1px 2px rgba(0,0,0,.5);
}
.cap::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.10) 0 1.1deg,transparent 1.1deg 4.4deg);
  -webkit-mask:radial-gradient(circle,transparent 74%,#000 79%);
          mask:radial-gradient(circle,transparent 74%,#000 79%);
}
.cap::after{
  content:'';position:absolute;inset:5px;border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 55%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07);
}
.cap i{
  position:absolute;left:50%;top:4.5px;width:2px;height:12px;margin-left:-1px;
  border-radius:1px;background:linear-gradient(#fff6e4,#b9ad91);
  box-shadow:0 0 6px rgba(255,240,205,.6);
}
.dial:focus-visible .cap{box-shadow:0 0 0 2.5px var(--amber),inset 0 1.2px 1.4px rgba(255,255,255,.3)}
.rd{
  margin-top:4px;padding:2px 7px;border-radius:4px;min-width:46px;text-align:center;
  font:600 9.5px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:#ffc879;background:linear-gradient(180deg,#16131a,#09070d);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85),0 1px 0 var(--emboss);
  white-space:nowrap;transition:color 200ms var(--ease-out),box-shadow 200ms var(--ease-out);
}
.dial.live ~ .rd,.dial.press ~ .rd{color:#fff0d2;box-shadow:inset 0 1px 2px rgba(0,0,0,.85),0 0 12px rgba(255,154,46,.35),0 1px 0 var(--emboss)}
.rd.sw{color:var(--phos);min-width:58px;font-size:8.5px;letter-spacing:.04em}
.dial.live ~ .rd.sw,.dial.press ~ .rd.sw{color:#c9ffe0}

/* mini-display */
.disp{
  width:calc(var(--cell)*2 - 10px);height:56px;margin-top:0;border-radius:4px;position:relative;
  background:linear-gradient(180deg,#06120b,#010604);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 1px 0 var(--emboss),0 0 0 1px rgba(0,0,0,.45);
  overflow:hidden;
}
.disp canvas{width:100%;height:100%;display:block}
.disp::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.30) 0 1px,transparent 1px 3px)}