.studio-control{width:72px;height:64px;min-height:64px;color:var(--studio-category-color,#f7f6f2);cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(145deg,#343433,#242423);border:1px solid #080808;border-radius:0;flex:none;place-items:center;padding:0;transition:background .18s,box-shadow .18s;display:grid;position:relative;box-shadow:inset 0 1px 1px #ffffff24,inset 0 -1px 1px #0008}.studio-control-face{place-items:center;width:100%;height:100%;transition:transform .18s;display:grid}.studio-control-face>svg{transition:filter .18s}.studio-control:after{content:"";border-radius:inherit;pointer-events:none;border:2px solid #0000;transition:border-color .15s;position:absolute;inset:0}.studio-control:not(:disabled):hover:after,.studio-control:focus-visible:after{border-color:var(--studio-category-color,#f7f6f2)}.studio-control:focus-visible{z-index:1;outline:2px solid var(--studio-category-color,#f7f6f2);outline-offset:-2px}.studio-control.is-active,.studio-control.is-selected,.studio-control:not(:disabled):active{background:radial-gradient(at 50% 85%,#252524,#111110);box-shadow:inset 0 5px 14px #000b,inset 0 1px 3px #000,inset 0 -1px #ffffff12}.studio-control.is-active .studio-control-face,.studio-control.is-selected .studio-control-face,.studio-control:not(:disabled):active .studio-control-face{transform:translateY(2px)scale(.96)}.studio-control.is-active .studio-control-face>svg,.studio-control.is-selected .studio-control-face>svg,.studio-control:not(:disabled):active .studio-control-face>svg{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--studio-category-color,#f7f6f2) 55%, transparent))}.studio-control:disabled{opacity:.35;cursor:not-allowed}@media (width<=760px){.studio-control{width:58px;height:54px;min-height:54px}.studio-control-face>svg{width:23px;height:23px}}@media (prefers-reduced-motion:reduce){.studio-control,.studio-control:after,.studio-control-face,.studio-control-face>svg{transition:none}}.studio-control.studio-control--readout{text-align:left;color:#68efbf;width:100%;min-width:0;height:100%;min-height:0;box-shadow:none;background:0 0;border:0;border-radius:7px;justify-content:flex-start;gap:.8rem;padding:.6rem .8rem;display:flex}.studio-control--readout .studio-control-face{flex:none;width:27px;height:27px}.studio-control--readout .studio-control-readout{gap:.3rem;min-width:0;display:grid}.studio-control--readout .studio-control-readout small{color:#8ac4b7;font:600 .52rem/1.1 var(--font-mono,monospace);letter-spacing:.13em;text-transform:uppercase}.studio-control--readout .studio-control-readout strong{color:#e2fff5;font:600 .95rem/1.15 var(--font-sans,sans-serif);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.studio-control--readout:not(:disabled):hover,.studio-control--readout.is-active{background:#62ecc014;box-shadow:inset 0 0 0 1px #66d8b252}.studio-control--readout.is-active .studio-control-face,.studio-control--readout:not(:disabled):active .studio-control-face{transform:none}.studio-control--readout:after{border-radius:7px}