/* Brushed Mesh: separate metal enclosures on a dark studio surface. */
:root {
  --steel: repeating-linear-gradient(0deg,#fff2 0px,#fff0 1px,#0000000b 2px,#fff0 3px),linear-gradient(102deg,#747b7d 0%,#e0e2de 2%,#bfc3c1 9%,#cdd0cd 27%,#f0f0e9 48%,#b0b6b5 76%,#dfe2de 96%,#828c8e 100%);
  --copper: linear-gradient(112deg,#7c3d20 0%,#dda170 9%,#f7c69a 27%,#ffdfb3 34%,#c97b49 47%,#a95b32 56%,#eab183 79%,#ffe2b8 92%,#824425 100%);
  --mesh: radial-gradient(circle,#070a0b 1.6px,#3c4243 1.8px,#101617 2.5px,transparent 2.8px) 0 0/7px 6px,radial-gradient(circle,#080c0d 1.6px,#363d3e 1.8px,#101617 2.5px,transparent 2.8px) 3.5px 3px/7px 6px,linear-gradient(#42494a,#181e20);
}
body {
  background: url('/assets/studio-grain.svg') repeat,radial-gradient(ellipse at 70% 4%,#59656b66,transparent 43%),radial-gradient(ellipse at 18% 25%,#424d5477,transparent 48%),linear-gradient(115deg,#151a1e,#242c31 55%,#11181d);
  background-attachment:scroll;
}
.intro{padding-top:38px;padding-bottom:30px}
.receiver {isolation:isolate;filter:none;margin-bottom:110px}
.receiver:before {content:'';position:absolute;z-index:-2;inset:80% -12px -145px;background:radial-gradient(ellipse at 50% 50%,#9eabb32b,transparent 68%),repeating-linear-gradient(90deg,#b0bac803 0px,#fff0 2px,#0001 3px,#fff0 5px);border-top:1px solid #7a8a921a;pointer-events:none}
.receiver:after {content:'';position:absolute;z-index:-1;bottom:-28px;left:1%;width:98%;height:55px;background:#000;filter:blur(20px);opacity:.8;pointer-events:none}
.rack-unit {background:var(--steel);border:1px solid #b8c0bf;border-radius:5px;box-shadow:inset 0 1px 0 #fff,inset 2px 0 0 #dfe3dd,inset -2px 0 1px #566165,inset 0 -4px 1px #5e686c,0 5px 0 #080d0f,0 8px 7px #000a}
.rack-unit:before,.rack-unit:after {content:'';position:absolute;z-index:3;top:68px;bottom:52px;width:12px;border:1px solid #616b6c;border-radius:7px;background:linear-gradient(90deg,#323c40,#ccd4d2 18%,#f8f9ef 31%,#9da8a9 48%,#dfe5e0 73%,#475357);box-shadow:2px 2px 4px #0009,inset 0 7px 3px #fff8,inset 0 -8px 3px #263035;pointer-events:none}
.rack-unit:before{left:10px}.rack-unit:after{right:10px}
.translation-unit {padding:18px 38px 16px;background:var(--mesh);border-color:#7b8587;box-shadow:inset 0 1px 0 #eef1e7,inset 0 0 0 4px #7f8a8d,inset 0 0 0 7px #141d20,0 5px 0 #080c0f,0 10px 16px #0009}
.translation-unit .unit-heading{margin:0 -2px 17px;padding:0 5px;color:#d9e1de}
.translation-unit .unit-brand{color:#e1e7e3;font-size:23px;text-shadow:0 2px 1px #000}
.translation-unit .unit-brand small,.translation-unit .engraving{color:#b7c3c4;text-shadow:0 1px #000}
.translation-unit .quiet-button{color:#d6e2df;background:linear-gradient(#354145,#1d282c);border-color:#687679;box-shadow:inset 0 1px #a9b4af66,0 2px 2px #0009;font-size:8px;min-height:34px}
.translation-unit .channels{gap:25px;align-items:stretch}
.translation-unit .channel {position:relative;padding:15px 17px 15px;border:1px solid #dce2dc;border-right:3px solid #6a7779;border-bottom:4px solid #657175;border-radius:5px;background:url('/assets/metal-grain.svg'),var(--steel);box-shadow:inset 2px 0 1px #ffffffdd,inset 0 2px 1px #fff,inset -2px 0 0 #d4dbd6,0 0 0 3px #151e22,5px 6px 0 #080d11,8px 11px 9px #0009}
.translation-unit .channel.is-source{border-color:#dfe5da;border-right-color:#6a7779;border-bottom-color:#657175;box-shadow:inset 2px 0 1px #fff,inset 0 2px 1px #fff,inset -2px 0 0 #d4dbd6,0 0 0 3px #151e22,5px 6px 0 #080d11,8px 11px 9px #0009}
.channel>.screw{width:9px;height:9px;z-index:2;box-shadow:0 1px 1px #fff,inset 0 0 0 1px #e8ebe3,0 0 0 1px #4a575a;background:conic-gradient(#f8f8ed,#3a484d,#dbe0d9,#69767a,#f8f8ed)}
.channel>.top-left{top:8px;left:7px}.channel>.top-right{top:8px;right:6px}.channel>.bottom-left{bottom:7px;left:7px}.channel>.bottom-right{bottom:7px;right:6px}
.module-grille {height:27px;margin:-5px 9px 15px;border:2px solid #5c686c;border-bottom-color:#dce4dc;border-radius:3px;background:var(--mesh);box-shadow:inset 0 2px 3px #000,0 1px 0 #fff}
.translation-unit .channel-heading b{font-size:23px;color:#202d32;text-shadow:0 1px #f9f9e8;font-weight:800}
.translation-unit .channel-heading{color:#293a40;font-size:7px}
.machine-rule{margin-top:9px;color:#526066;font-size:6px;letter-spacing:.6px}
.machine-rule i{height:1px;background:#7b888b}
.translation-unit .channel-led{background:radial-gradient(circle at 40% 30%,#829e6f,#17271b 70%);box-shadow:0 0 0 1px #36433b,0 1px 1px #fff;width:6px;height:6px}
.translation-unit .is-source .channel-led{background:radial-gradient(circle at 40% 25%,#e9ffd8,#91dc5e 45%,#3c762b 90%);box-shadow:0 0 3px #95db5b,0 0 0 1px #36433b}
.translation-unit .language-control{margin:12px 0 10px;height:38px;background:linear-gradient(165deg,#29383b,#111b20 60%,#243135);border:1px solid #112025;border-bottom-color:#8a9695;box-shadow:inset 0 2px 4px #000b,0 1px #fff8}
.translation-unit .language-control select{font-size:15px}
.translation-unit .display {background:linear-gradient(130deg,#ffffff21,transparent 42%),repeating-linear-gradient(0deg,#15260005 0 1px,transparent 1px 3px),radial-gradient(ellipse at 45% 5%,#d8ecb4,#b4cf87 64%,#8fbb68);border:5px solid #1b2729;border-top-color:#10191c;border-bottom-color:#424f4f;box-shadow:0 1px 0 #f5f6e4,inset 0 3px 10px #3349237a;padding:12px}
/* The selected concept used 120px; the requested text area is twice that. */
.translation-unit .display textarea{height:240px;min-height:240px;max-height:640px;font:400 18px/1.6 var(--mono);color:#213414}
.translation-unit .display textarea::placeholder{color:#526740}
.translation-unit .display-top,.translation-unit .display-bottom{font-size:7px}
.pad-heading{margin-top:14px;margin-bottom:7px;font-size:6px}
.preset-pad{min-height:43px;border-radius:3px;font-size:12px;background:linear-gradient(#4b585b,#2c393d);border-color:#1b252a;box-shadow:inset 0 1px #c0ccc48c,0 2px 0 #172226,0 3px 2px #0008}
.preset-pad[aria-pressed=true]{background:linear-gradient(#deedc3,#b7cd93);box-shadow:inset 0 1px #faffef,0 2px 0 #5c6a4c,0 3px 2px #0006}
.translation-unit .channel-controls{gap:7px;padding-top:10px}
.translation-unit .source-button{background:var(--copper);color:#382213;border:1px solid #7b462d;border-top-color:#ffe5c8;box-shadow:inset 0 1px #ffdfb3,inset 0 -1px #9a4f2c,0 2px 0 #5e3726,0 4px 4px #1d1d1b55;text-shadow:0 1px #f2bf8b;min-height:42px;font:600 8px var(--mono);letter-spacing:0}
.translation-unit .source-button[aria-pressed=true]{background:var(--copper);color:#291c13;box-shadow:inset 0 1px 3px #71371f,0 1px 0 #ead5b3;transform:translateY(1px)}
.translation-unit .source-button span{width:5px;height:5px;box-shadow:0 0 0 1px #754522;background:#593a23}
.translation-unit .source-button[aria-pressed=true] span{background:#fff0a4;box-shadow:0 0 4px #ffce70,0 0 0 1px #9e602e}
.translation-unit .copy-button,.translation-unit .clear-channel{min-height:42px;font-size:7px;background:linear-gradient(#4a575a,#253236);box-shadow:inset 0 1px #bfcbc288,0 2px 1px #141f23}
.patch-bay{border:0;margin:16px 3px 0;padding:0;color:#243a40;min-height:26px;font-size:7px}
.patch-port{gap:7px}.patch-port i{width:23px;height:23px;border:0;background:radial-gradient(circle,#04090a 0 30%,#303b3c 32% 39%,#edb578 41% 49%,#754321 52% 56%,#ffddb2 59% 64%,#a46c40 68% 72%,#28373b 75%);box-shadow:0 1px 1px #f7f9e4,inset 0 1px 2px #292d2b}
.patch-label{font-size:6px;color:#506366;letter-spacing:.5px}
.patch-rack{padding-bottom:68px}
.cable-shadow{stroke:#020708;stroke-width:11}.cable-sheath{stroke:#192225;stroke-width:8}.cable-shine{stroke:#697375;stroke-opacity:.5;stroke-width:1.8}
.trs-plug .trs-shaft{fill:url('#plug-metal');stroke:#526164;stroke-width:.6}
.trs-plug .trs-insulator{fill:#101719}.trs-plug .trs-collar{fill:url('#plug-copper');stroke:#503323;stroke-width:.6}
.trs-plug .trs-barrel{fill:url('#plug-metal');stroke:#404e52;stroke-width:.8}.trs-plug .trs-knurl{stroke:#33444888;stroke-width:.7}
.trs-plug .trs-boot{fill:#1b272b;stroke:#080e10;stroke-width:1}.trs-plug .trs-rib{stroke:#718084;stroke-width:.7;opacity:.55}
.translation-unit .translation-footer{background:var(--steel);padding:12px 14px;margin:0 -10px;border:1px solid #d3ddd6;border-radius:3px;box-shadow:inset 0 1px #fff,inset 0 -2px #67787b,0 3px 3px #0009;gap:12px}
.translation-unit .translate-button{background:linear-gradient(105deg,#9eaaa9,#e5ebe0 25%,#bcc6bf 70%,#a1afab);color:#1d3532;border-color:#637773;box-shadow:inset 0 1px #fff,0 2px 0 #596b65,0 3px 4px #26352d66;padding:12px 21px}
.translation-unit .translate-button:before{content:'';width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#eaffbb,#a6ed42 45%,#428724);box-shadow:0 0 6px #9dde49,0 0 0 1px #59783a}
.translation-unit .routing{font-size:7px;letter-spacing:0}.translation-unit .keyboard-note{font-size:8px}
.translation-unit .system-message{color:#c4ceca;font-size:10px;margin:12px 0 0}.translation-unit .system-message.is-error{color:#ffbd9c}
.audio-unit{padding:26px 43px 24px;margin-top:15px;background:url('/assets/metal-grain.svg'),var(--steel)}
.audio-unit:before,.audio-unit:after{top:23px;bottom:24px}
.audio-heading{margin-bottom:16px}.audio-heading .unit-brand{font-size:19px}.audio-heading .engraving{font-size:8px}
.audio-components{grid-template-columns:minmax(0,1.25fr) minmax(0,1.05fr) 110px 110px;gap:28px;align-items:center}
.led-meter{min-width:0;padding:15px 13px 12px;border:4px solid #263438;border-top-color:#0d171b;border-bottom-color:#647478;border-radius:4px;background:linear-gradient(145deg,#31424455,transparent 50%),#071113;box-shadow:inset 0 3px 7px #000,0 1px 0 #fff,0 0 0 1px #727f7f;color:#c4d1bf}
.meter-scale{display:flex;justify-content:space-between;margin:0 0 11px 16px;font:7px var(--mono);color:#bac7b8}
.led-channel{display:flex;gap:8px;align-items:center;margin:8px 0;font:10px var(--mono)}
.led-row{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;flex:1;min-width:0}
.led-segment{display:block;height:17px;border-radius:1px;background:linear-gradient(90deg,#ffffff32,transparent 65%),var(--led);opacity:.16;box-shadow:inset 0 0 0 1px #ffffff29}
.led-segment.is-lit{opacity:1;box-shadow:0 0 5px color-mix(in srgb,var(--led),transparent 45%),inset 0 0 0 1px #ffffff50}
.led-segment.is-peak{opacity:1;filter:brightness(1.3)}
.meter-legend{display:flex;justify-content:space-between;gap:5px;margin:12px 0 0 16px;font:5px var(--mono);letter-spacing:.5px;color:#849d8e}
.track-display{border:4px solid #263438;border-top-color:#0d171b;border-bottom-color:#647478;background:linear-gradient(140deg,#34433d55,transparent 45%),#0b1414;box-shadow:inset 0 2px 5px #000b,0 1px 0 #fff;color:#c2e58a;padding:13px 13px 11px}
.track-display p{gap:10px;min-height:42px}.track-display p>span{font-size:23px;color:#abc875}.track-display strong{color:#d0e9a0;font-size:13px}
.track-overline,.track-bottom{font-size:6px;color:#8faa78}.track-overline #playback-state{color:#c9dcae}
.volume-control{color:#a9b68f;margin-top:10px}.volume-control input{background:#66755a}.volume-control input::-webkit-slider-thumb{background:linear-gradient(90deg,#687a77,#e9efde,#99a7a1);border-color:#f0f3db}
.dial-control{--dial-size:82px}.dial{width:var(--dial-size);height:var(--dial-size);background:repeating-conic-gradient(#48585c 0deg,#e2e8dc 2deg,#8a9899 4deg);border-color:#697a7b;box-shadow:0 7px 7px #0006,0 0 0 3px #c9d2ca,0 0 0 4px #526569,inset 0 1px 2px #fff}
.dial-face{background:conic-gradient(from 18deg,#c5cfcb,#f9fbec 35deg,#5f7479 80deg,#dce3d9 125deg,#9aabaa 172deg,#f8faec 220deg,#62787d 274deg,#c5cfcb);box-shadow:inset 0 0 0 1px #f3f6e8,inset 0 0 0 4px #c9d4cb55}
.dial-face:before{background:url('/assets/metal-grain.svg');opacity:.7}
.dial-face i{width:3px;height:13px;top:7px;background:#1b2c30;box-shadow:1px 0 #f6f8e6}
.power-dial{--angle:-60deg}.power-dial[aria-pressed=true]{--angle:60deg}.power-dial[aria-pressed=true] .dial-face i{background:#1b2c30;box-shadow:1px 0 #f6f8e6}
.power-ring{width:var(--dial-size);height:var(--dial-size);position:relative;margin:24px auto 0}
.power-stop{position:absolute;top:calc(25% - 15px);font:600 14px/1 var(--mono);color:#1a2b30;text-shadow:0 1px #fff;width:14px;text-align:center}
.power-off{left:calc(6.7% - 21px)}.power-on{right:calc(6.7% - 21px)}
.dial-label{font-size:8px;color:#253b43;letter-spacing:.6px}.dial-stops{font-size:7px;margin:10px auto 8px;max-width:85px}.dial-value{font-size:8px;margin-top:12px;min-height:10px;color:#20383e}
.audio-bottom{margin-top:20px;font-size:7px;gap:15px;color:#3f555c}.audio-bottom .vent{height:12px;background:var(--mesh);border-radius:2px;opacity:1;box-shadow:0 1px #eef1e4,inset 0 1px #344347}
.rack-feet{height:19px;padding:0 55px}.rack-feet i{width:65px;height:19px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#131c1e,#aab6b2 16%,#e8eee0 30%,#7b8e8c 55%,#c3cfbf 78%,#101b1f);border-bottom:4px solid #081013;box-shadow:0 4px 3px #000a}
.rack-reflection{position:absolute;top:calc(100% + 5px);left:0;width:100%;height:125px;overflow:hidden;pointer-events:none;opacity:.27;filter:blur(1.5px);mask-image:linear-gradient(#0009,transparent 92%);-webkit-mask-image:linear-gradient(#0009,transparent 92%)}
.rack-reflection>.audio-unit{margin:0;transform:scaleY(-1);pointer-events:none}
.below-system{position:relative;margin-top:0;padding-top:10px;color:#a2afb3}
@media(max-width:1100px){
  .wrap{width:calc(100% - 48px)}.translation-unit{padding-inline:31px}.translation-unit .channels{gap:21px}.translation-unit .channel{padding-inline:12px}.module-grille{margin-inline:8px}
  .audio-unit{padding-inline:33px}.audio-components{gap:20px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 89px 89px}.dial-control{--dial-size:68px}
  .led-row{gap:2px}.led-meter{padding:13px 9px 10px}.led-segment{height:15px}.meter-legend span:last-child{display:none}
  .translation-unit .source-button{font-size:6px;padding-inline:5px}.translation-unit .copy-button,.translation-unit .clear-channel{font-size:6px;padding-inline:6px}
  .translation-unit .display textarea{font-size:16px}.translation-unit .display{padding-inline:10px}.track-display strong{font-size:11px}
}
@media(min-width:701px) and (max-width:900px){
  .translation-unit .unit-heading .engraving{display:none}.translation-unit .channels{gap:17px}.translation-unit .channel{padding-inline:9px}.translation-unit .channel-heading{font-size:6px}.translation-unit .channel-heading b{font-size:21px}
  .translation-unit .language-control select{font-size:12px}.translation-unit .display textarea{font-size:14px}.translation-unit .display-top{font-size:5px;letter-spacing:0}.translation-unit .display-bottom{font-size:6px}
  .preset-bank{gap:4px}.preset-pad{font-size:10px}.preset-pad span{display:none}.pad-heading{font-size:5px;letter-spacing:.2px}.translation-unit .channel-controls{gap:4px}.translation-unit .source-button span{display:none}.patch-label{display:none}
  .audio-components{gap:14px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 76px 76px}.dial-control{--dial-size:60px}.dial-label{font-size:6px}.power-stop{font-size:12px}.led-channel{gap:5px}.led-row{gap:2px}.led-meter{padding-inline:7px}.meter-scale{font-size:5px;margin-left:12px}.meter-legend{font-size:4px;letter-spacing:0;margin-left:12px}
  .translation-unit .translation-footer{grid-template-columns:1fr auto}.translation-unit .keyboard-note{display:none}.translation-unit .translate-button{font-size:9px;padding-inline:12px;gap:10px}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 28px)}.intro{padding-top:28px}.receiver{margin-bottom:85px}.receiver:before{inset:90% -10px -110px}.translation-unit{padding:18px 23px 15px}
  .rack-unit:before,.rack-unit:after{width:8px;top:70px;bottom:66px}.rack-unit:before{left:6px}.rack-unit:after{right:6px}
  .translation-unit .unit-heading{margin-bottom:20px}.translation-unit .unit-brand{font-size:24px}.translation-unit .unit-brand small{font-size:6px}
  .translation-unit .channels{grid-template-columns:1fr;gap:26px}.patch-rack{padding-right:45px;padding-bottom:16px}.translation-unit .channel{padding:15px 14px 20px}.module-grille{height:26px;margin-bottom:14px}
  .translation-unit .channel-heading{font-size:7px}.translation-unit .channel-heading b{font-size:24px}.translation-unit .language-control label{display:none}.translation-unit .language-control select{font-size:15px}
  .translation-unit .display textarea{height:240px;min-height:240px;font-size:17px}.translation-unit .display-top{font-size:6px;letter-spacing:0}.translation-unit .display-bottom{font-size:7px}
  .preset-bank{gap:6px}.preset-pad{min-height:44px;font-size:12px}.preset-pad span{font-size:5px}.pad-heading{font-size:6px;letter-spacing:0}
  .translation-unit .source-button{font-size:7px;min-height:44px;padding-inline:5px}.translation-unit .copy-button,.translation-unit .clear-channel{min-height:44px;font-size:7px;padding-inline:7px}.translation-unit .channel-controls{gap:5px}
  .patch-bay{position:absolute;inset:64px -12px 21px auto;width:23px;min-height:0;flex-direction:column;padding:0;margin:0}.patch-port{flex-direction:column;font-size:0}.patch-port i{width:23px;height:23px}.patch-label{display:none}
  .translation-unit .translation-footer{grid-template-columns:1fr;gap:12px;margin-inline:-4px;padding:12px 10px}.translation-unit .routing{font-size:7px}.translation-unit .translate-button{font-size:10px;width:100%;padding:14px 12px;gap:8px}.translation-unit .keyboard-note{display:block;text-align:center;font-size:8px}.translation-unit .system-message{line-height:1.6;font-size:10px}
  .audio-unit{padding:24px 26px 20px;margin-top:14px}.audio-unit:before,.audio-unit:after{top:23px;bottom:24px}.audio-heading{margin-bottom:18px}.audio-heading .unit-brand{font-size:19px}.audio-heading .engraving{font-size:6px;letter-spacing:.2px}
  .audio-components{grid-template-columns:1fr 1fr;gap:22px 24px}.led-meter{grid-column:1/-1;padding:14px 12px 12px}.meter-scale{font-size:7px}.led-row{gap:3px}.led-segment{height:19px}.led-channel{margin:10px 0}.meter-legend{font-size:5px}.meter-legend span:last-child{display:inline}
  .track-display{grid-column:1/-1;grid-row:2;padding:14px}.track-display strong{font-size:14px}.track-display p{min-height:42px}.track-overline,.track-bottom{font-size:7px}.volume-control{font-size:8px}
  .dial-control{--dial-size:76px;padding:0}.dial-label{font-size:8px}.power-stop{font-size:14px}.dial-stops{font-size:8px}.dial-value{font-size:8px}
  .audio-bottom{font-size:7px;line-height:1.7;margin-top:20px}.audio-bottom .vent{display:none}.rack-feet{padding-inline:37px}.rack-feet i{width:45px}
  .rack-reflection{height:100px;opacity:.2}.rack-reflection>.audio-unit{transform:scaleY(-1) translateY(calc(100% - 125px))}.below-system p{font-size:10px}
}
@media(max-width:380px){
  .translation-unit{padding-inline:20px}.patch-rack{padding-right:37px}.translation-unit .channel{padding-inline:9px}.translation-unit .display{padding-inline:8px}.translation-unit .display textarea{font-size:15px}.preset-bank{gap:4px}.preset-pad{font-size:11px}.preset-pad span{display:none}
  .translation-unit .source-button{font-size:6px}.translation-unit .source-button span{display:none}.translation-unit .copy-button,.translation-unit .clear-channel{font-size:6px;padding-inline:5px}.translation-unit .channel-controls{gap:4px}.audio-unit{padding-inline:23px}.led-row{gap:2px}.meter-legend{font-size:4px}.audio-heading .engraving{max-width:95px;text-align:right;line-height:1.5}
}