.opto-rack{position:relative;padding:27px 34px 22px;margin:0 0 25px;border:2px solid #151716;border-radius:8px;color:#252b27;background:linear-gradient(0deg,#303833 0,#78837b 1%,#b4bfb8 3%,#c7cec8 98%,#f0f0e2 99%,#57625a),repeating-linear-gradient(0deg,#fff2 0 1px,#0001 1px 2px);background-blend-mode:normal,soft-light;box-shadow:inset 0 0 0 1px #e1e2d166,inset 0 12px 30px #fff2,0 10px 23px #0007;font-family:Arial,Helvetica,sans-serif}.opto-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid #616b6370}.opto-brand{font:italic 24px Georgia,serif;color:#263b32;text-shadow:0 1px #fff8}.opto-brand b{font:700 12px Arial,sans-serif;font-style:normal;border:1px solid #6b756c;padding:4px 6px;margin-left:10px;vertical-align:middle}.opto-heading h2{font:700 15px/1.3 Arial,sans-serif;letter-spacing:3px;margin:9px 0 5px;color:#283a30}.opto-heading small{font:9px Arial,sans-serif;letter-spacing:1.8px;color:#4e5f50}.opto-selector{display:flex;gap:2px;padding:4px;border-radius:6px;background:#242d28;box-shadow:inset 0 2px 4px #0006}.opto-selector button{min-height:42px;border:1px solid #586055;background:linear-gradient(#414c43,#232d26);color:#bbc7b7;border-radius:3px;padding:10px 15px;font:700 11px Arial,sans-serif;letter-spacing:1px;cursor:pointer}.opto-selector button.on{background:linear-gradient(#dbc28e,#bba46e);color:#252b24;border-color:#f6dfaa;box-shadow:0 0 8px #f3c57544}.opto-face{display:grid;grid-template-columns:145px minmax(200px,1fr) 145px;gap:22px;align-items:center;padding:25px 0}.opto-dial .knob-label{color:#263c31;font:700 12px Arial,sans-serif;letter-spacing:1px;margin-bottom:12px;white-space:nowrap}.opto-dial .knob-wrap{width:103px;height:103px;margin:0 auto}.opto-dial .knob{width:80px;height:80px;left:11px;top:11px;border-radius:50%;background:radial-gradient(ellipse at 35% 23%,#66716b 0%,#323a35 24%,#171d1a 60%,#090c0a 77%,#3d4840 83%,#141a16 95%);border:2px solid #15211a;box-shadow:inset 0 2px 2px #c8d2bf55,inset 0 -3px 5px #000a,3px 7px 9px #17201777}.opto-dial .knob:before{background:#efead9;box-shadow:0 0 2px #fff8;width:4px;height:24px;top:6px;border-radius:2px}.opto-dial .knob-scale{background:repeating-conic-gradient(from -135deg,#414d4133 0deg 1deg,transparent 1deg 9deg);border-radius:50%;mask-image:radial-gradient(transparent 62%,#000 63%);-webkit-mask-image:radial-gradient(transparent 62%,#000 63%)}.opto-dial .knob-value{color:#263c31;font:700 15px/1.4 ui-monospace,monospace}.opto-dial>input{display:block;width:84px;margin:8px auto 0;text-align:center;min-height:38px;font:14px ui-monospace,monospace;border:1px solid #687467;border-radius:4px;background:#d8ddcf;color:#22332a;padding:5px}.opto-meters{display:grid;grid-template-columns:1fr 1fr;gap:15px;min-width:0}.opto-meter{text-align:center;min-width:0}.opto-meter>span{display:block;font:700 10px Arial,sans-serif;letter-spacing:1.3px;color:#304637;margin:0 0 9px}.opto-meter svg{display:block;width:100%;min-width:0;filter:drop-shadow(0 4px 4px #0007);border-radius:14px;transition:filter .2s}.opto-powered .opto-meter svg{filter:drop-shadow(0 4px 4px #0007) drop-shadow(0 0 7px #edc57555)}.opto-needle{transform-origin:125px 153px;transition:transform 80ms linear}.opto-meter>output{display:block;font:700 13px ui-monospace,monospace;letter-spacing:0;background:#25382e;color:#ecdab1;border:1px solid #71836b;box-shadow:inset 0 2px 4px #0007;border-radius:3px;padding:8px 5px;margin:9px auto 0;max-width:180px;white-space:nowrap}.opto-switches{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-top:1px solid #63726677;border-bottom:1px solid #63726677}.opto-toggle{display:flex;flex-direction:column;align-items:center;gap:11px;background:transparent;border:0;padding:0;min-width:72px;min-height:60px;cursor:pointer;color:#293e30}.opto-toggle>span{font:700 10px Arial,sans-serif;letter-spacing:.8px;white-space:nowrap}.opto-toggle i{display:block;width:23px;height:29px;border:2px solid #4b5149;border-radius:9px;background:linear-gradient(90deg,#465047,#c6cbc0 35%,#e8eddf 52%,#687368 67%,#353f36);box-shadow:0 3px 3px #0006;transform:rotate(180deg);position:relative}.opto-toggle i:before{content:'';position:absolute;left:7px;top:1px;width:6px;height:16px;background:linear-gradient(90deg,#72776c,#f1f0d6,#697364);border-radius:4px;box-shadow:1px 2px 2px #18251aaa}.opto-toggle.on i{transform:rotate(0deg);border-color:#5b653f}.opto-switches label{font:700 10px/1.5 Arial,sans-serif;letter-spacing:1px;color:#293e30;min-width:0}.opto-switches select{display:block;color:#20372b;background:#d4dccb;font:12px Arial,sans-serif;padding:9px;border:1px solid #7b8974;border-radius:4px;margin-top:5px;min-height:40px;max-width:220px;width:100%}.opto-cell{text-align:center;min-width:70px;font:8px Arial,sans-serif;letter-spacing:1px;color:#31412f}.opto-cell i{display:block;--cell-glow:0;width:32px;height:38px;margin:0 auto 8px;background:radial-gradient(ellipse,#f2bf66,#935c26 25%,#292e26 62%);border:3px solid #606d5a;border-radius:45% 45% 20% 20%;opacity:calc(.45 + var(--cell-glow)*.55);box-shadow:0 0 calc(var(--cell-glow)*18px) #e6a338aa,inset 0 2px 4px #080e07;transition:opacity .1s,box-shadow .1s}.opto-rack .opto-status{font:12px/1.6 Arial,sans-serif;color:#233c2a;margin:14px 0 8px}.opto-help{color:#304b37;border-top:1px solid #778570;padding-top:12px;font:13px/1.6 Arial,sans-serif}.opto-help summary{cursor:pointer;min-height:26px}.opto-help p{margin:13px 0}.opto-rack :focus-visible{outline:3px solid #b37e25;outline-offset:5px}.opto-rack button:disabled,.opto-rack input:disabled,.opto-rack select:disabled{opacity:.45;cursor:default}.opto-clean-disabled{opacity:.4;position:relative}.opto-clean-disabled:after{content:'OPTICAL SELECTED';display:block;position:absolute;left:0;right:0;bottom:-18px;font:8px Arial,sans-serif;text-align:center;color:#f2d49b}.opto-screw{position:absolute;width:12px;height:12px;border-radius:50%;background:linear-gradient(145deg,#dce0d4,#536054);border:1px solid #465544;box-shadow:0 1px 2px #0006}.opto-screw:after{content:'';position:absolute;width:8px;height:2px;left:1px;top:4px;background:#3b4938;transform:rotate(-30deg)}.opto-screw.one{top:10px;left:10px}.opto-screw.two{top:10px;right:10px}.opto-screw.three{bottom:10px;left:10px}.opto-screw.four{bottom:10px;right:10px}
@media(max-width:1000px){.opto-face{grid-template-columns:115px 1fr 115px;gap:15px}.opto-rack{padding:24px}.opto-heading h2{letter-spacing:2px}.opto-switches{gap:12px}.opto-cell{display:none}}
@media(max-width:650px){.opto-rack{padding:25px 16px 20px}.opto-heading{flex-wrap:wrap;gap:15px}.opto-heading h2{font-size:13px;letter-spacing:1.5px}.opto-heading small{font-size:8px;letter-spacing:1px}.opto-selector{margin-left:auto}.opto-selector button{padding:10px 20px}.opto-face{grid-template-columns:1fr 1fr;gap:22px 15px;padding:22px 0}.opto-meters{grid-column:1/-1;grid-row:1;gap:12px}.opto-dial{grid-row:2}.opto-meter>output{font-size:13px}.opto-switches{flex-wrap:wrap;justify-content:space-around;gap:22px 10px}.opto-switches>label{flex-basis:100%;max-width:260px;display:flex;align-items:center;gap:20px}.opto-switches select{margin-top:0}.opto-help{font-size:14px}.opto-rack .opto-status{font-size:13px}.opto-dial>input{min-height:44px}}
@media(prefers-reduced-motion:reduce){.opto-needle,.opto-cell i{transition:none}}

/* Keep the editable readout legible against the console theme. */
.opto-dial .knob-value{display:none}.opto-dial>input{background:#25382e;color:#ecdab1;box-shadow:inset 0 2px 4px #0007;border:1px solid #71836b;font-weight:700;min-height:44px;margin-top:14px}.opto-meters{width:100%;max-width:640px;justify-self:center}.opto-rack{background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#00000004 1px 2px),linear-gradient(0deg,#303833 0,#78837b 1%,#b4bfb8 3%,#c7cec8 98%,#f0f0e2 99%,#57625a);background-blend-mode:normal}