.workspace{

    padding:60px;
}

 


.mixer{

    width:325px;
    height:546px;  /*536*/

    flex-shrink: 0;
   
    position:relative;
    
    transform-origin:center center;
    
    border-radius:18px;

    overflow:visible;

    background:
        linear-gradient(
            180deg,
            #2f2f2f 0%,
            #252525 50%,
            #1f1f1f 100%
        );

}

.mixer::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.020) 0px,
            rgba(255,255,255,.020) 1px,
            rgba(0,0,0,.015) 2px,
            rgba(0,0,0,.015) 3px
        );

    opacity:.8;

    pointer-events:none;

}

.branding-placeholder{

    position:absolute;

    top:40px;
    left:50%;

    transform:translateX(-50%);

    padding:6px 18px;

    font-size:12px;

    letter-spacing:4px;

    color:#8a8a8a;

    text-transform:uppercase;

    user-select:none;
}

.logo{

    font-size:34px;

    margin-bottom:12px;

}

.title{

    font-size:30px;

    font-weight:700;

}

.subtitle{

    margin-top:10px;

    font-size:12px;

    opacity:.65;

}

.screw{

    position:absolute;

    width:14px;
    height:14px;
    
   

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
        #bdbdbd,
        #666);

    box-shadow:

        inset -1px -1px 2px rgba(0,0,0,.7),

        inset 1px 1px 2px rgba(255,255,255,.3);

}

.screw::after{

    content:"";

    position:absolute;

    left:2px;
    right:2px;
    top:6px;

    height:2px;

    background:#444;
}

.tl{

    top:18px;
    left:18px;

}
.tr{

    top:18px;
    right:18px;
}

.bl{

    bottom:18px;
    left:18px;

}

.br{

    bottom:18px;
    right:18px;

}

/* ==========================================================
   PANEL LAYOUT
========================================================== */


.panel{

    position:absolute;
    inset: 25px;

    display:grid;

    grid-template-columns:
        1fr
        110px
        1fr;

    column-gap:12px;

    align-items:start;

}

.channel-left{

    grid-column:1;

} 

.master{

    grid-column:2;

    display:grid;

    justify-items:center;

    align-content:start;

    row-gap:12px;

}

.channel-right{

    grid-column:3;

}

/* ==========================================================
   CHANNELS
========================================================== */

/* ==========================================================
   CHANNEL
========================================================== */

.channel{

    display:grid;

    grid-auto-rows:max-content;

    row-gap:-2px;

    justify-items:center;

    align-content:start;

}

/* ==========================================================
   CONTROL
========================================================== */

.control{

    display:grid;

    grid-template-rows:
        auto
        auto;

    row-gap:2px;

    justify-items:center;

}

.mixer-label{

    color:#d0d0d0;

    font-size:9px;

    font-weight:600;

    letter-spacing:1.2px;

    text-align:center;

    white-space:nowrap;

    user-select:none;

}


/* ==========================================================
   MOUNT POINTS
========================================================== */

/* ==========================================================
   MOUNT POINT
========================================================== */

.mount{

    width:26px;
    height:26px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:
        radial-gradient(circle at 50% 45%,
            #3f3f3f 0%,
            #2b2b2b 55%,
            #171717 100%);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.05),
        inset 0 -2px 4px rgba(0,0,0,.85),
        0 1px 2px rgba(0,0,0,.45);

}

.mount.large{

    width:34px;
    height:34px;

}

.mount.button{

    width:34px;
    height:18px;

    border-radius:4px;

}

.master-title{

    text-align:center;

    color:#d8d8d8;

    font-size:11px;

    letter-spacing:3px;

   

}

/* ==========================================================
   DIAL
========================================================== */

.dial{

    position:relative;

    width:60px;
    height:48px;

    display:grid;
    place-items:center;

}

/* ==========================================================
   ARC
========================================================== */

.arc{

    position:absolute;

    width:48px;
    height:48px;

    border-radius:50%;

}

.tick{

    position:absolute;

    left:50%;
    top:50%;

    width:2px;
    height:5px;

    background:#d8d8d8;
 
    border-radius:1px;

    transform-origin:center 22px;

}

.t1{
    transform:translate(-50%,-22px) rotate(-135deg);
}

.t2{
    transform:translate(-50%,-22px) rotate(-90deg);
}

.t3{
    transform:translate(-50%,-22px) rotate(-45deg);
}

.t4{
    transform:translate(-50%,-22px) rotate(0deg);
}

.t5{
    transform:translate(-50%,-22px) rotate(45deg);
}

.t6{
    transform:translate(-50%,-22px) rotate(90deg);
}

.t7{
    transform:translate(-50%,-22px) rotate(135deg);
    
}
    
/* ==========================================================
   VU WINDOW
========================================================== */

.vu-window{

    width:80px;

    height:304px;          /* adjust later */

    padding:8px 6px;

    border-radius:4px;

    background:#101010;

    display:flex;

    justify-content:center;

    display:flex;

    flex-direction:column;


}

.vu-left{
    grid-column:1;
}

.vu-scale.left{
    grid-column:2;
}

.vu-master{
    grid-column:3;
}

.vu-scale.right{
    grid-column:4;
}

.vu-right{
    grid-column:5;
}


/* ==========================================================
   VU LABELS
========================================================== */



.vu-labels{
    display:grid;
    grid-template-columns:5px 22px 10px 22px 5px;
    column-gap:2px;
    justify-content:center;
    margin-bottom:6px;
     font-size:8px;

    font-weight:600;

    color:#ffffff;
}

.vu-labels span{
    display:flex;
    justify-content:center;
    align-items:center;
}

.vu-labels span:nth-child(3){
    transform:translateX(1px);
}

/* ==========================================================
   VU BRIDGE
========================================================== */
.vu-bridge{

    display:grid;

    grid-template-columns:5px 22px 10px 22px 5px;

    column-gap:2px;

    align-items:stretch;

    justify-content:center;

    height:100%;

}




/* ==========================================================
   LEFT VU
========================================================== */

.vu-left{

    width:6px;

}


/* ==========================================================
   MASTER VU
========================================================== */

.vu-master{

    width:12px;

}


/* ==========================================================
   RIGHT VU
========================================================== */

.vu-right{

    width:6px;

}


.vu{

    display:flex;

    flex-direction:column-reverse;

    justify-content:space-between;

    height:100%;

}

/* scale for vu */

.vu-scale{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:100%;

    width:22px;

    font-size:8px;

    font-weight:600;

    color:#fff;

    user-select:none;

}

.vu-scale span{

    display:flex;

    justify-content:center;

    align-items:center;

    height:12px;

}

/* ==========================================================
   VU LED
========================================================== */

.vu-led{

    width:100%;

    height:12px;

    border-radius:1px;

    background:#5a5a5a;
}



.vu-led.on {
    box-shadow:
        0 0 3px currentColor,
        0 0 8px currentColor;
}

/* Bottom 9 LEDs - current yellow */
.vu-led:nth-child(-n+9).on {
    background: #ffd400;
    color: #ffd400;
}

/* Top 3 LEDs - medium green */
.vu-led:nth-child(n+10):nth-child(-n+12).on {
    background: #00aa2a;
    color: #00aa2a;
}

/* Top LED - red */
.vu-led:nth-child(13).on {
    background: #ff2a2a;
    color: #ff2a2a;
}
/* ==========================================================
   ROTARY KNOBS
========================================================== */

.knob{

    position:absolute;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    border-radius:50%;

    cursor:pointer;

    z-index:20;

    background:
        radial-gradient(circle at 35% 30%,
            #5a5a5a 0%,
            #404040 35%,
            #2d2d2d 70%,
            #1b1b1b 100%);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.10),
        inset 0 -3px 5px rgba(0,0,0,.85),
        0 2px 4px rgba(0,0,0,.45);

}


/* ==========================================================
   SMALL KNOB
========================================================== */

.knob-small{

    width:20px;
    height:20px;

}


/* ==========================================================
   LARGE KNOB
========================================================== */

.knob-large{

    width:28px;
    height:28px;

}


/* ==========================================================
   KNOB INDICATOR
========================================================== */

.indicator{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    border-radius:2px;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #cfcfcf
        );

    box-shadow:
        0 0 1px rgba(255,255,255,.5);

    z-index:30;

}

.knob-small .indicator{

    width:2px;
    height:6px;
    top:3px;

}

.knob-large .indicator{

    width:2px;
    height:8px;
    top:4px;

}


/* ==========================================================
   SMALL INDICATOR
========================================================== */

.knob-small .indicator{

    margin-top:3px;

    width:2px;
    height:6px;

}


/* ==========================================================
   LARGE INDICATOR
========================================================== */

.knob-large .indicator{

    margin-top:4px;

    width:2px;
    height:8px;

}





/* ==========================================================
   RUBBER GRIP TEXTURE
========================================================== */

.knob{

    overflow:hidden;

}

/* ==========================================================
   RUBBER GRIP TEXTURE
========================================================== */

.knob::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 1px,
            rgba(0,0,0,.05) 1px,
            rgba(0,0,0,.05) 2px
        );

    opacity:.45;

    mask:radial-gradient(circle, transparent 0 35%, black 36%);
    -webkit-mask:radial-gradient(circle, transparent 0 35%, black 36%);

    pointer-events:none;
}


/* ==========================================================
   TOP CAP
========================================================== */

/* ==========================================================
   MACHINED TOP CAP
========================================================== */

.knob::after{

    content:"";

    position:absolute;

    left:17%;
    top:17%;

    width:66%;
    height:66%;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 30%,
            #555,
            #3a3a3a 55%,
            #232323 100%);

    border:1px solid rgba(255,255,255,.05);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.10),
        inset 0 -2px 3px rgba(0,0,0,.80);
}

/* ==========================================================
   MASTER KNOB
========================================================== */

.master-knob{

    position:relative;
    
    
    left:3px;
    top:21px;

    width:28px;
    height:28px;

    border-radius:50%;

    overflow:hidden;

    cursor:grab;

    background:
        linear-gradient(
            to bottom,
            #bcbcbc,
            #8d8d8d 18%,
            #686868 50%,
            #4d4d4d 100%
        );

    border:1px solid #2b2b2b;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -1px 1px rgba(0,0,0,.45),
        0 1px 2px rgba(0,0,0,.6);

}

.master-knob::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 1px,
            rgba(0,0,0,.05) 1px,
            rgba(0,0,0,.05) 2px
        );

    opacity:.45;

    mask:
        radial-gradient(circle, transparent 0 35%, black 36%);

    -webkit-mask:
        radial-gradient(circle, transparent 0 35%, black 36%);

}

.master-knob-cap{

    position:absolute;

    left:17%;
    top:17%;

    width:66%;
    height:66%;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #555,
            #3a3a3a 55%,
            #232323 100%
        );

    border:1px solid rgba(255,255,255,.05);

    

    transform-origin:center;

}

.master-knob-indicator{

    position:absolute;

    left:50%;
    top:50%;

    width:2px;
    height:9px;

    transform:
        translate(-50%, -100%);

    border-radius:2px;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #cfcfcf
        );
     box-shadow:
        0 0 1px rgba(255,255,255,.5);
}

/* ==========================================
   FADERS
========================================== */

.fader-section{

    position:absolute;

    left:0;
    right:0;
    bottom:25px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto;

    align-items:start;

    padding:0 40px;
}

.channel-fader{

    position:relative;

    width:24px;

    justify-self:center;
}

.channel-fader-left{
    left:auto;
}

.channel-fader-right{
    right:auto;
}

.master-level{

    position:relative;

    left:auto;
    top:auto;
    bottom:auto;

    transform:none;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    justify-self:center;
}

/* ==========================================================
   UNIVERSAL FADER SLOT
========================================================== */

.fader-slot{

    position:relative;

    width:20px;
    height:98px;

    margin:auto;
}



.fader-slot.horizontal{

    position:absolute;

    left:28px;
    right:28px;

    width:auto;
    height:20px;

    margin:auto;
   
}

/* ==========================================================
   SLOT / RAIL
========================================================== */

.fader-rail{

    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:8px;
    height:100%;

    border-radius:5px;

    background:
        linear-gradient(
            to right,
            #3c3c3c,
            #151515 22%,
            #050505 50%,
            #151515 78%,
            #3c3c3c
        );

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.9),
        inset 0 -1px 1px rgba(255,255,255,.05);
}



.fader-rail::before{

    content:"";

    position:absolute;

    left:50%;
    top:4px;
    bottom:4px;

    width:2px;

    transform:translateX(-50%);

    background:#8b8b8b;

    border-radius:2px;
}



.fader-slot.horizontal .fader-rail{

    position:absolute;

    top:50%;
   left:8px;
    right:8px;

    width:auto;
    height:8px;

    transform:translateY(-50%);

    border-radius:5px;

    background:
        linear-gradient(
            to bottom,
            #3c3c3c,
            #151515 22%,
            #050505 50%,
            #151515 78%,
            #3c3c3c
        );

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.9),
        inset 0 -1px 1px rgba(255,255,255,.05);
}

.fader-slot.horizontal .fader-rail::before{

    content:"";

    position:absolute;
    
    

    left:4px;
right:4px;
    top:50%;

    width:auto;
    height:2px;

    transform:translateY(-50%);

    background:#8b8b8b;

    border-radius:2px;
}

/* ==========================================================
   FADER CAP
========================================================== */

.fader-cap{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:38px;
    height:14px;

    border-radius:3px;

    background:
        linear-gradient(
            to bottom,
            #bcbcbc,
            #8d8d8d 18%,
            #686868 50%,
            #4d4d4d 100%
        );

    border:1px solid #2b2b2b;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -1px 1px rgba(0,0,0,.45),
        0 1px 2px rgba(0,0,0,.6);

    cursor:pointer;

    z-index:20;
}

.fader-cap::before{

    content:"";

    position:absolute;

    left:1px;
    right:1px;
    top:1px;

    height:4px;

    border-radius:2px 2px 0 0;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.45),
        rgba(255,255,255,.10)
    );

    pointer-events:none;
}

.fader-cap::after{

    content:"";

    position:absolute;

    left:-12px;
    right:-12px;
    top:-12px;
    bottom:-12px;

    background:transparent;
    
  
}



.fader-cap-line{

    position:absolute;

    left:3px;
    right:3px;

    top:50%;

    height:2px;
    width:auto;

    transform:translateY(-50%);

    background:#2d2d2d;

    border-radius:2px;

    box-shadow:
        0 1px rgba(255,255,255,.25),
        inset -0.5px 0 rgba(0,0,0,.35);
        
}

.fader-cap.horizontal{

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:14px;
    height:36px;
}


.fader-cap.horizontal .fader-cap-line{

    left:50%;
    top:3px;
    bottom:3px;

    width:2px;
    height:auto;

    transform:translateX(-50%);
}
/* ==========================================================
   CROSSFADER POSITION
========================================================== */

.crossfader{

    grid-column:1 / 4;
    grid-row:2;

    margin-top:30px;

    position:relative;

    width:100%;
    
    
}

/* ==========================================================
   CHANNEL FADER SCALE
========================================================== */

.fader-scale{

    position:absolute;

    inset:0;

    pointer-events:none;
}



.scale-track{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:44px;
    height:100%;
}

.scale-track::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;
    top:-6px;          /* move the entire tick pattern up */
    width:12px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 9px, /* 0 9*/
            #c8c8c8 9px 10px
        
        );

    mask:
        linear-gradient(
            to right,
            black 0 20px,
            transparent 20px
        );
        
        -webkit-mask:
        linear-gradient(
            to bottom,
            transparent 0 6px,
            black 6px
        );

    mask:
        linear-gradient(
            to bottom,
            transparent 0 6px,
            black 6px
        );
}

.scale-track::after{

    content:"";

    position:absolute;

    right:0;
    top:0;
    bottom:0;
    top:-6px;          /* move the entire tick pattern up */
    width:12px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 9px, /* 0 9*/
            #c8c8c8 9px 10px
        );

    mask:
        linear-gradient(
            to left,
            black 0 20px,
            transparent 20px
        );
        
        -webkit-mask:
        linear-gradient(
            to bottom,
            transparent 0 6px,
            black 6px
        );

    mask:
        linear-gradient(
            to bottom,
            transparent 0 6px,
            black 6px
        );
}

/* ==========================================================
   CROSSFADER SCALE
========================================================== */

.crossfader-scale{

    position:absolute;

    left:36px;
    right:36px;

    top:50%;
    height:20px;

    transform:translateY(-50%);

    pointer-events:none;
}

.crossfader-track{

    position:absolute;

    inset:0;
    transform:translateY(9.5px) translateX(1.5px);
    
}

.crossfader-track::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
   top:15px;
    height:15px;
    width:121px;

    background:
        repeating-linear-gradient(
            to right,
            #c8c8c8 0 1px,
            transparent 1px 12px
        );
}

.crossfader-track::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:15px;
    height:15px;

    background:
        repeating-linear-gradient(
            to right,
            #c8c8c8 0 1px,
            transparent 1px 12px
        );
}

/* ==========================================================
   AUTO SCRATCH SWITCH
========================================================== */

.auto-scratch{

    position:absolute;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    /* z-index:9999; */
}

.auto-scratch-text{

    margin-top:6px;

    font-size:7px;
    font-weight:700;

    letter-spacing:1px;

    color:#cfcfcf;

    text-align:center;

    line-height:1.1;

    user-select:none;

}

.auto-scratch-switch{

    position:relative;

    width:38px;
    height:22px;

    border-radius:4px;

    background:linear-gradient(
        to bottom,
        #4c4c4c,
        #1d1d1d
    );

    border:1px solid #111;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.15),
        inset 0 -2px 3px rgba(0,0,0,.7),
        0 1px 2px rgba(0,0,0,.8);

    cursor:pointer;
    
    /* pointer-events:auto; */
}

.auto-scratch-slider{

    position:absolute;

    left:3px;
    top:2px;

    width:14px;
    height:18px;

    border-radius:2px;

    background:linear-gradient(
        to bottom,
        #767676,
        #444
    );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.35),
        inset 0 -1px 1px rgba(0,0,0,.55),
        0 1px 2px rgba(0,0,0,.7);

    transition: left .12s ease;
}

.auto-scratch-switch.on .auto-scratch-slider{

    left:21px;

}


.auto-scratch-led{

    width:8px;
    height:8px;

    margin-bottom: 4px;

    border-radius:50%;

    background:#3a3000;

    border:1px solid #111;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.2),
        0 1px 2px rgba(0,0,0,.8);

    transition:
        background .15s,
        box-shadow .15s;

}

.auto-scratch-led.on{

    background:#ffd400;

    border-color:#8a6a00;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        0 0 3px rgba(255,212,0,.95),
        0 0 8px rgba(255,212,0,.75),
        0 0 16px rgba(255,212,0,.45);

}