/* Brushed steel chassis, independently sized hardware and polished copper controls. */
:root{--polished-copper:linear-gradient(103deg,#85482f 0%,#d99b72 15%,#ffe0b7 28%,#b66d45 44%,#e8ae80 62%,#ffdfb3 78%,#a85f39 100%)}
.translation-unit{background:var(--panel-photo) center 55%/120% 800%;padding:38px 48px 26px;border:0;box-shadow:inset 0 0 0 1px #b6c0c1,inset 0 -2px #536067,0 6px 5px #0009}
.translation-unit:before,.translation-unit:after{display:none}
.translation-unit>.chassis-skin,.records-unit>.chassis-skin{display:block;position:absolute;inset:0;pointer-events:none}
.translation-unit>.chassis-skin:before,.translation-unit>.chassis-skin:after,.records-unit>.chassis-skin:before,.records-unit>.chassis-skin:after{content:'';position:absolute;left:28px;right:28px;height:12px;background:var(--rack-photo) center 17.8%/115% 1800% no-repeat;border-top:1px solid #d5dadd;border-bottom:1px solid #29373c;border-radius:2px}
.translation-unit>.chassis-skin:before,.records-unit>.chassis-skin:before{top:5px}.translation-unit>.chassis-skin:after,.records-unit>.chassis-skin:after{bottom:5px}
.translation-unit .photo-handle,.records-unit>.chassis-skin .photo-handle{position:absolute;top:6px;bottom:6px;width:22px;background:var(--rack-photo) left center/2050% 143% no-repeat}
.translation-unit .handle-left,.records-unit>.chassis-skin .handle-left{left:0}.translation-unit .handle-right,.records-unit>.chassis-skin .handle-right{right:0;background-position:right center}
.translation-unit>.screw{display:none}
.translation-unit .unit-heading{margin:0 0 15px;padding:0 3px}
.translation-unit .unit-brand,.translation-unit .unit-brand small,.translation-unit .engraving{color:#253238;text-shadow:0 1px #fff8}
.translation-unit .channels{gap:18px}
.translation-unit .patch-rack{padding-bottom:8px}
.translation-unit .translation-footer{display:flex;align-items:center;justify-content:center;gap:25px;margin:0;padding:8px 0 0;border:0;background:none;box-shadow:none}
.translation-unit .translation-footer .keyboard-note{font-size:8px;line-height:1.5;color:#3d4a4c;text-align:left;margin:0}
.translation-unit .translate-button,.translation-unit .quiet-button,.wordcommando-ad .ad-button,.records-module .module-action{color:#352217;background-image:url('/assets/metal-grain.svg'),var(--polished-copper);background-size:auto,100% 100%;border:1px solid #875136;border-top-color:#f6d4aa;border-radius:3px;box-shadow:inset 0 1px #ffdfb5,inset 0 -1px #a3603b,0 2px 0 #643d2b,0 4px 5px #0004;text-shadow:0 1px #f8d4a977}
.translation-unit .translate-button:hover,.translation-unit .quiet-button:hover,.wordcommando-ad .ad-button:hover,.records-module:hover .module-action{background-image:url('/assets/metal-grain.svg'),var(--polished-copper);filter:brightness(1.08)}
.translation-unit .quiet-button{padding:8px 13px;min-height:34px;font-size:8px}
.translation-unit .translate-button{min-height:42px;padding:12px 25px;font-size:10px;gap:18px}
.status-dock{margin:10px auto 0;max-width:590px;padding:5px 8px;background:url('/assets/metal-grain.svg'),linear-gradient(100deg,#8e9b9f,#e5e8e2 27%,#aebabc 63%,#d0d7d3);border:1px solid #849398;border-top-color:#f0f3eb;border-radius:3px;box-shadow:0 1px 2px #0005}
.translation-unit .system-message{margin:0;min-height:24px;padding:5px 10px;display:flex;justify-content:center;align-items:center;border:2px solid #3d493d;border-bottom-color:#7f8e70;border-radius:2px;background:linear-gradient(135deg,#d4e8ac,#a2bc78);box-shadow:inset 0 1px 4px #20321c77;color:#273c1b;font:9px/1.35 var(--mono)}
.translation-unit .system-message.is-error{color:#672c1b;background:linear-gradient(135deg,#e6d8a3,#c9b77c)}
.module-grille{visibility:visible;position:relative;overflow:hidden;height:23px;margin:0 0 13px;border:2px solid #647175;border-bottom-color:#e2e9dd;background:#0a1012;box-shadow:inset 0 2px 4px #000}
.module-grille:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 70%,#7ade9c66,transparent 50%);opacity:0;transition:opacity .6s}
.module-grille:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 1.6px,#202b2c 1.9px,#121b1d 3px) 0 0/6px 6px;box-shadow:inset 0 2px 5px #0009}
.static-charge{position:absolute;inset:2px 3%;background:linear-gradient(90deg,transparent,#8ef5bd,#d1ffe8,#6fdca5,transparent);clip-path:polygon(0 56%,10% 49%,18% 55%,25% 30%,31% 60%,42% 45%,49% 49%,57% 34%,65% 57%,73% 42%,82% 54%,92% 46%,100% 52%,100% 59%,88% 55%,80% 62%,70% 51%,64% 66%,57% 45%,50% 57%,43% 54%,31% 70%,25% 41%,19% 64%,9% 58%,0 62%);opacity:0;filter:drop-shadow(0 0 3px #8cefc4);transition:opacity .5s}
.channel.is-charged .static-charge{opacity:.55;animation:charge-drift 3.6s ease-in-out infinite alternate}.channel.is-charged .module-grille:before{opacity:.5}
.translation-unit .channel-led{width:7px;height:7px;transition:box-shadow .7s,background .7s}
.translation-unit .channel.is-source .channel-led{background:radial-gradient(circle at 35% 25%,#f2ffe5,#abff64 40%,#4b9b27 85%);box-shadow:0 0 0 1px #3e4e30,0 0 7px #a4ff62,0 0 16px #83e537b3}
.channel.is-powering .channel-led{animation:led-power-up .8s ease-out both}.channel.is-receiving .display{animation:receive-charge .8s ease-out}
.channel.is-discharging .static-charge{opacity:.9;animation:charge-release .75s ease-out both}
.cable-energy{fill:none;stroke:#c1ffe1;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 90;opacity:0;filter:drop-shadow(0 0 3px #78ffc4);pointer-events:none}
.trs-rear-ring{fill:url('#plug-metal');stroke:#263235;stroke-width:1}.trs-rear-seat{fill:#172125;stroke:#d7e0d8;stroke-width:.7}.trs-rear-cap{fill:url('#plug-metal');stroke:#485358;stroke-width:.8}.trs-rear-lines{stroke:#3f4d50;stroke-width:.8;opacity:.8}
.projects-divider{margin-top:12px;position:relative;display:flex;align-items:center;justify-content:center;min-height:57px;padding:15px 39px;border:1px solid #8a999e;border-top-color:#e6eeea;border-radius:4px;background:url('/assets/metal-grain.svg'),linear-gradient(105deg,#839196,#e2e7e3 18%,#a9b8bb 55%,#d4ddda 80%,#64767e);box-shadow:inset 0 -2px #687981,0 4px 4px #0008}
.projects-divider h2{font:600 20px/1.15 var(--display);letter-spacing:1.1px;text-align:center;color:#b76f45;background:var(--polished-copper);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px #57321e) drop-shadow(0 -1px #ffe7c3)}
.hardware-seat{display:block;position:absolute;width:22px;height:22px;z-index:3;pointer-events:none;background:var(--panel-photo) center 55%/900% 650%;border-radius:4px}
.hardware-seat:before{content:'';position:absolute;inset:3px;border-radius:50%;background:conic-gradient(from 25deg,#eef0e8,#66767d 15%,#f9fcf4 31%,#a1afb2 50%,#46585f 65%,#e7ece5 81%,#82969c);border:1px solid #56676d;box-shadow:0 1px 1px #101b21,inset 0 0 0 1px #d5dfd9}
.hardware-seat:after{content:'';position:absolute;inset:7px;background:#334146;clip-path:polygon(50% 0,62% 22%,88% 16%,86% 41%,100% 55%,78% 67%,77% 93%,52% 83%,29% 100%,23% 74%,0 64%,17% 44%,10% 18%,36% 21%);filter:drop-shadow(0 1px #fff)}
.hardware-seat.top-left{top:3px;left:3px}.hardware-seat.top-right{top:3px;right:3px}.hardware-seat.bottom-left{bottom:3px;left:3px}.hardware-seat.bottom-right{bottom:3px;right:3px}
.projects-divider .hardware-seat{background:none}.projects-divider .hardware-seat.bottom-left,.projects-divider .hardware-seat.bottom-right{display:none}.projects-divider .hardware-seat.top-left,.projects-divider .hardware-seat.top-right{top:50%;transform:translateY(-50%)}
.records-unit{background:var(--panel-photo) center 55%/120% 800%;box-shadow:inset 0 0 0 1px #b4c0c3,inset 0 -2px #4b5d67,0 6px 5px #0009}
.records-module{position:relative}.records-module>.hardware-seat{width:18px;height:18px}.records-module>.hardware-seat:before{inset:3px}.records-module>.hardware-seat:after{inset:6px}
.wordcommando-ad .ad-copy{padding-bottom:10px}.wordcommando-ad .ad-button{margin-top:8px;margin-bottom:9px;padding:11px 13px;transform:translateY(-2px)}
.records-module .module-action{min-height:31px}.records-module .module-action b{color:#50301e}
.loop-control{display:flex;align-items:center;gap:10px;margin:12px auto 0;justify-content:center;color:#37434a}
.loop-switch{display:flex;position:relative;border:1px solid #627078;border-radius:4px;padding:3px;background:linear-gradient(#46545a,#1b292f);box-shadow:inset 0 1px 4px #0009,0 1px #ecf1e8}
.loop-switch button{display:flex;align-items:center;justify-content:center;min-width:39px;height:30px;padding:5px 10px;font:500 15px var(--mono);color:#b7c4bf;border:1px solid transparent;border-radius:2px;background:none}
.loop-switch button[aria-checked=true]{color:#25372e;border-color:#839591;background:url('/assets/metal-grain.svg'),linear-gradient(100deg,#aab9b8,#f1f4e7 32%,#b9c7c0 62%,#819591);box-shadow:inset 0 1px #fff,0 2px 3px #0009}
.loop-switch svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}.loop-switch svg text{fill:currentColor;stroke:none;font:600 10px var(--mono)}
#loop-status{font:7px var(--mono);letter-spacing:.4px;min-width:55px}.sound-control kbd{font:7px var(--mono);border:1px solid #76888c;border-radius:2px;padding:1px 3px;margin-left:4px;vertical-align:1px;opacity:.8}
.colour-flow img{position:relative;z-index:0}
.colour-flow:before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 20% 30%,#f92bbf,transparent 60%),radial-gradient(ellipse at 80% 75%,#24cfff,transparent 60%),linear-gradient(120deg,#7b30d9,#fdac35,#24e3df);background-size:180% 180%,200% 180%,200% 200%;mix-blend-mode:color;mask-image:url('/assets/mcr-midsummer-tears.jpg');mask-mode:luminance;mask-size:cover;mask-position:center;opacity:.9;animation:spectrum-flow 13s ease-in-out infinite alternate;pointer-events:none}
@keyframes spectrum-flow{0%{background-position:0% 15%,100% 80%,0% 50%;background-size:180% 180%,200% 180%,200% 200%;filter:hue-rotate(-15deg)}50%{background-position:70% 85%,20% 20%,70% 20%;background-size:210% 150%,160% 210%,180% 240%;filter:hue-rotate(45deg)}100%{background-position:100% 30%,0% 70%,100% 80%;background-size:170% 220%,220% 160%,230% 180%;filter:hue-rotate(-35deg)}}
@keyframes charge-drift{from{transform:translateX(-2%) scaleY(.65);opacity:.35}to{transform:translateX(2%) scaleY(1.2);opacity:.7}}
@keyframes led-power-up{0%{filter:brightness(.5);box-shadow:0 0 0 #7eff50}100%{filter:brightness(1);box-shadow:0 0 7px #a4ff62,0 0 16px #83e537b3}}
@keyframes charge-release{from{opacity:.9;transform:scaleX(1)}to{opacity:0;transform:scaleX(.3)}}
@keyframes receive-charge{0%{filter:brightness(1)}40%{filter:brightness(1.2)}100%{filter:brightness(1)}}
@media(max-width:1100px){.translation-unit{padding-inline:34px}.translation-unit .channels{gap:16px}.projects-divider h2{font-size:18px}}
@media(min-width:701px) and (max-width:900px){.translation-unit{padding-inline:29px}.translation-unit .channels{gap:15px}.translation-unit .translation-footer .keyboard-note{display:block}}
@media(max-width:700px){.translation-unit{padding:35px 25px 24px}.translation-unit .patch-rack{padding-right:35px;padding-bottom:10px}.translation-unit .channels{gap:19px}.translation-unit .unit-heading{gap:10px;margin-bottom:15px}.translation-unit .unit-brand{font-size:21px}.translation-unit .quiet-button{font-size:6px;padding:7px 9px}.translation-unit .translation-footer{flex-direction:column;gap:7px}.translation-unit .translate-button{width:100%;padding:12px;font-size:9px;justify-content:center}.translation-unit .translation-footer .keyboard-note{font-size:7px;text-align:center}.translation-unit .translation-footer .keyboard-note br{display:none}.translation-unit .translation-footer .keyboard-note span{margin-left:8px}.status-dock{margin-top:8px;padding:4px 5px}.translation-unit .system-message{font-size:8px;padding:4px 6px;min-height:24px}.projects-divider{min-height:52px;padding:12px 30px}.projects-divider h2{font-size:16px;letter-spacing:.8px}.module-grille{height:22px;margin-bottom:12px}.loop-control{margin-top:18px}.wordcommando-ad .ad-copy{padding-bottom:12px}.records-unit>.hardware-seat{width:19px;height:19px}}
@media(max-width:380px){.translation-unit{padding-inline:21px}.translation-unit .patch-rack{padding-right:29px}.translation-unit .channel{padding-inline:12px}.projects-divider h2{font-size:14px}.translation-unit .quiet-button{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.static-charge,.channel.is-powering .channel-led,.channel.is-receiving .display,.channel.is-discharging .static-charge,.colour-flow:before{animation:none!important}.colour-flow:before{display:none}.cable-energy{display:none}.channel.is-charged .static-charge{opacity:.35}}

/* Keep handle geometry independent from the stretched source photograph. */
.translation-unit .photo-handle,.records-unit>.chassis-skin .photo-handle{top:48px;bottom:47px;width:13px;border:1px solid #64727a;border-radius:9px;background:linear-gradient(90deg,#32424a,#bcc9ca 18%,#f7faf2 33%,#84979d 53%,#d9e3dc 73%,#43565f);box-shadow:2px 3px 4px #0009,inset 0 8px 5px #fff9,inset 0 -8px 4px #334b59}
.translation-unit .handle-left,.records-unit>.chassis-skin .handle-left{left:7px}.translation-unit .handle-right,.records-unit>.chassis-skin .handle-right{right:7px}

.projects-divider{background:var(--panel-photo) center 55%/120% 800%}