@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
/* Worn cream enamel, paper channel strips, and illuminated console keys. */
.faceplate{background:repeating-linear-gradient(0deg,#53452d05 0 1px,transparent 1px 4px),linear-gradient(105deg,#e4ddc7,#cfc5aa);box-shadow:inset 0 1px 2px #fff9,0 2px 4px #0007}
.mixer{background:#d6cfb9;border-color:#9b927b;box-shadow:inset 0 1px 5px #51482d33}
.channel{background:linear-gradient(90deg,#fff2,transparent 55%,#6e604311);border-color:#aaa087}
.channel:last-child{background:linear-gradient(90deg,#bfc4ad,#b2b99e)}
.channel-name{position:relative;isolation:isolate;width:100%;margin:4px auto 12px;padding:9px 3px 8px;font:700 21px/1.15 'Courier New',monospace;letter-spacing:-1px;color:#36352d;transform:rotate(-2deg);text-shadow:.4px .2px #36352d55}
.channel-name:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(3deg,#a5905710 0 1px,transparent 1px 3px),linear-gradient(95deg,#dccc9a,#f0e5be 30%,#e6d7a6 90%,#d8c68f);clip-path:polygon(2% 0,98% 2%,97% 15%,100% 27%,98% 44%,100% 62%,98% 78%,99% 98%,2% 100%,3% 84%,0 70%,2% 50%,0 34%,3% 18%);box-shadow:inset 0 0 7px #9c80392b;border-block:1px solid #b4a16f55}
.channel-name:after{display:none}
.channel:nth-child(2) .channel-name{transform:rotate(1.5deg)}
.channel:nth-child(3) .channel-name{transform:rotate(-.7deg)}
.channel:nth-child(4) .channel-name{transform:rotate(2deg)}
.channel:nth-child(5) .channel-name{transform:rotate(-1deg)}
.channel-buttons{gap:14px;margin-top:8px}
.switch-unit{display:flex;flex-direction:column;align-items:center;gap:7px}
.switch-label{font:700 14px/1 'DM Sans',Arial,sans-serif;color:#424638;letter-spacing:1px;text-shadow:0 1px #ffffff66}
.channel-buttons button{--lamp-dark:#28583e;--lamp-mid:#457b51;--lamp-light:#9cff7d;display:grid;place-items:center;width:44px;height:42px;padding:5px;border:3px solid #35382d;border-top:3px solid #55584a;border-radius:4px;background:linear-gradient(#58604e,#242b21);box-shadow:0 4px 0 #727360,0 5px 4px #0005,inset 0 1px #fff2;transform:none}
.channel-buttons button[data-mute]{--lamp-dark:#793129;--lamp-mid:#a54636;--lamp-light:#ff8261}
.switch-lens{display:block;width:100%;height:100%;border:1px solid #0005;border-radius:2px;background:linear-gradient(var(--lamp-mid),var(--lamp-dark));box-shadow:inset 0 2px 1px #fff3,inset 0 -3px 3px #0003;transition:background .15s,box-shadow .15s}
.channel-buttons button[aria-pressed=true]{border-color:#34392c;background:#272e23;box-shadow:0 1px 0 #727360,inset 0 2px 3px #0007,0 0 13px color-mix(in srgb,var(--lamp-light) 35%,transparent);transform:translateY(3px)}
.channel-buttons button[aria-pressed=true] .switch-lens{background:radial-gradient(ellipse at 50% 40%,#fff7bd,var(--lamp-light) 40%,var(--lamp-mid));box-shadow:inset 0 0 5px var(--lamp-light),0 0 8px var(--lamp-light),0 0 17px color-mix(in srgb,var(--lamp-light) 45%,transparent);border-color:var(--lamp-light)}
.channel-buttons button:active{transform:translateY(3px)}
.channel-buttons button:focus-visible{outline:3px solid #1d777b;outline-offset:5px}
@media(max-width:620px){.channel-name{font-size:15px;letter-spacing:-1px;padding:8px 1px}.channel-buttons{gap:5px}.channel-buttons button{width:30px;height:36px;padding:3px;border-width:2px}.switch-unit{gap:6px}.switch-label{font-size:14px}.master .channel-name{width:auto;min-width:67px;margin:0}}
@media(prefers-reduced-motion:reduce){.switch-lens{transition:none}}
/* Twelve round post-fader level lamps, rising from green to red. */
.led-strip{position:absolute;right:calc(50% + 30px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column-reverse;gap:3px;padding:6px 5px;background:#2d3128;border:1px solid #171d16;border-radius:4px;box-shadow:inset 0 1px 4px #0009,0 1px #fff6;pointer-events:none}
.level-led{--led:#7bd856;display:block;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--led) 18%,#182019);border:1px solid #ffffff0a;box-shadow:inset 0 1px 2px #0009}
.level-led.yellow{--led:#f7cf49}.level-led.red{--led:#ff5540}
.level-led.lit{background:var(--led);border-color:#ffffff55;box-shadow:0 0 5px var(--led),inset 0 1px 2px #fff9}
@media(min-width:1400px){.led-strip{gap:4px}}
@media(max-width:620px){.led-strip{right:calc(50% + 20px);padding:5px 3px;gap:3px}.level-led{width:5px;height:5px}.master .fader-area{padding-bottom:22px}.master .led-strip{top:auto;bottom:0;right:auto;left:0;transform:none;flex-direction:row;width:100%;justify-content:space-between;padding:3px 5px}.master .level-led{width:5px;height:5px}}

/* Charcoal channel bank with white silkscreen and handwritten tape strips. */
.mixer{background:#343638;border-color:#202224;color:#fff;box-shadow:inset 0 1px 3px #ffffff12,0 2px 4px #0004}
.mixer .channel,.mixer .channel:last-child{background:linear-gradient(90deg,#ffffff04,transparent 55%,#00000012),#343638;border-color:#55575a;color:#fff}
.mixer .channel-no,.mixer .channel-desc,.mixer .db,.mixer .switch-label,.mixer .master .channel-buttons,.mixer .fader-area:after{color:#fff;text-shadow:none}
.mixer .channel-name{font-family:'Permanent Marker','Marker Felt','Comic Sans MS',cursive;font-weight:400;font-size:22px;letter-spacing:.3px;line-height:1.2;color:#292820;text-shadow:none}
.mixer .switch-label{font-weight:700}
.mixer .channel-buttons button{box-shadow:0 4px 0 #181b18,0 5px 4px #0007,inset 0 1px #fff2}
.mixer .channel-buttons button[aria-pressed=true]{box-shadow:0 1px 0 #181b18,inset 0 2px 3px #0007,0 0 13px color-mix(in srgb,var(--lamp-light) 35%,transparent)}
@media(max-width:620px){.mixer .channel-name{font-size:15px;letter-spacing:-.3px}}