@font-face{font-family:'Redaction 50';src:url('./fonts/Redaction50-Regular.ttf') format('truetype');font-display:block}
:root{--face:#e7e5d8;--ivory:#f7f5ed;--ink:#172126;--display:#101d23;--orange:#ed4628}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#26333a;color:var(--ink);font-family:'Redaction 50',serif;font-synthesis:none}body{padding:16px;display:grid;justify-items:center;align-content:center;min-height:100vh;gap:12px}button,select,input{font:inherit}button,select{border-radius:0}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #f7a52d;outline-offset:2px}.device{width:800px;height:480px;padding:8px;border:4px solid #071116;background:#48545b;box-shadow:6px 6px 0 #101820;display:grid;grid-template-columns:216px minmax(0,1fr);gap:8px}.left{height:456px;min-height:0;display:grid;grid-template-rows:232px 24px 172px 20px;background:var(--face);border:4px solid #071116}.unit{padding:12px 12px 8px;border-bottom:4px solid #172126}.unit>label{display:flex;justify-content:space-between;font-size:15px}.unit>label span{font-size:11px;color:#58646a}select{width:100%;height:36px;margin-top:4px;padding:3px 20px 3px 4px;background:var(--ivory);border:2px solid #172126;color:var(--ink);font-size:19px}.unit-art{height:129px;display:flex;align-items:center;justify-content:space-between}.unit-art img{width:112px;height:112px;object-fit:contain;image-rendering:pixelated}.unit-art button{align-self:flex-end;margin-bottom:8px;min-width:61px;height:32px;background:var(--face);border:3px solid #172126;box-shadow:2px 2px 0 #7d8585;font-size:17px}.unit-art button[aria-pressed=true]{background:var(--orange);color:#fff}#unit-note{margin:0;font-size:11px;color:#58646a}.parts-heading{padding:5px 8px 0;font-size:12px;display:flex;justify-content:space-between}.parts-heading span{font-size:10px;color:#53626b}#parts{overflow-y:auto;padding:4px 8px;scrollbar-color:#53626b #c5ccc7;scrollbar-width:thin}#parts button{width:100%;min-height:38px;border:2px solid #52646b;background:#d3d7ce;text-align:left;margin-bottom:5px;padding:5px 6px;display:flex;align-items:center;gap:6px;font-size:16px}#parts button>span{font-size:11px;color:#52646b}#parts i{font-style:normal;margin-left:auto;visibility:hidden}#parts button[aria-current=true]{background:var(--display);color:var(--ivory);border-color:#071116}#parts button[aria-current=true] i{visibility:visible;color:#ff6945}.left-foot{margin:0;text-align:center;font-size:11px;padding-top:3px;background:var(--display);color:var(--ivory)}.right{height:456px;display:grid;grid-template-rows:115px 1fr 22px;gap:6px;min-width:0}.screen{background:var(--display);color:var(--ivory);border:4px solid #071116;padding:9px 12px;box-shadow:inset 3px 3px #37454d;overflow:hidden}.screen-top{display:flex;justify-content:space-between;font-size:12px;color:#aabdbd;gap:8px}#mode{color:#ff6945}h1{font-size:29px;font-weight:normal;line-height:1;margin:8px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen p{font-size:11px;margin:4px 0;line-height:1.1}#edit-hint{color:#aabdbd;font-size:10px}#rack{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}#rack[data-rows="3"]{grid-template-rows:repeat(3,minmax(0,1fr))}.cell{position:relative;min-height:0;background:var(--face);border:3px solid #172126;box-shadow:inset 2px 2px #fff,inset -2px -2px #afb8b6;display:flex;align-items:center;flex-direction:column;padding:5px 7px 4px;overflow:hidden}.cell output{align-self:flex-start;font-size:25px;line-height:1}.knob{height:61px;width:61px;flex:none;margin:3px 0 2px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#48545b,#172126 58%,#071116 65%);border:3px solid #071116;box-shadow:2px 3px 0 #9a9f98;position:relative}.knob:after{content:'';position:absolute;left:24px;top:3px;width:6px;height:12px;background:#ff6945;transform-origin:3px 24px;transform:rotate(var(--turn));border:1px solid #071116}.cell input{width:100%;height:14px;margin:0 0 3px;accent-color:#ed4628;cursor:ew-resize}.cell label{font-size:13px;line-height:1;margin-top:auto;max-width:100%;white-space:nowrap}.toggle{margin:auto;height:55px;width:68px;border:4px solid #071116;box-shadow:3px 3px 0 #909b99;background:#e7e5d8;font-size:19px}.toggle[aria-pressed=true]{background:var(--orange);color:#fff}.toggle:disabled{cursor:default}.cell input:disabled{cursor:default;opacity:.5}.cell.unavailable{background:#c1cac6}.unused{background:#b9c3bd;color:#687672;box-shadow:inset 2px 2px #d2d9d2}.unused>span{align-self:flex-start;font-size:22px;line-height:1}.blank-socket{width:45px;height:45px;margin:auto;border-radius:50%;border:3px solid #8a9691;background:#a7b3ac}.unused p{font-size:10px;margin:0}.right footer{display:flex;align-items:center;justify-content:space-between;color:var(--ivory);font-size:10px;padding:0 3px;gap:6px}#rack[data-rows="3"] .cell{padding:3px 6px}#rack[data-rows="3"] .cell output{font-size:19px}#rack[data-rows="3"] .knob{width:33px;height:33px;margin:0}#rack[data-rows="3"] .knob:after{left:11px;top:1px;width:5px;height:8px;transform-origin:2px 12px}#rack[data-rows="3"] input{height:10px;margin:1px 0}#rack[data-rows="3"] label{font-size:11px}#rack[data-rows="3"] .toggle{height:32px;width:61px;font-size:14px;border-width:3px}#rack[data-rows="3"] .blank-socket{height:30px;width:30px}.outside-note{font-size:11px;color:#aabdbd;margin:0;text-align:center}@media(max-width:832px){body{padding:0;align-content:start}.device{box-shadow:none}.outside-note{padding:8px}}@media(max-width:799px){.device{width:100%;height:auto;min-height:480px;grid-template-columns:190px minmax(0,1fr)}.left{height:456px}.unit{padding-left:8px;padding-right:8px}select{font-size:16px}h1{font-size:24px}.screen p{font-size:10px}.cell output{font-size:22px}.cell label{font-size:11px}.right footer{font-size:8px}}@media(max-width:580px){.device{grid-template-columns:1fr;max-width:440px}.left{height:260px;grid-template-columns:180px 1fr;grid-template-rows:24px 204px 24px}.unit{grid-row:1/3;border-bottom:0;border-right:3px solid #172126;padding-top:8px}.parts-heading{font-size:11px}.parts-heading span{display:none}#parts{grid-column:2}.left-foot{grid-column:1/3;padding-top:6px}.right{height:456px}.screen{padding:8px 10px}.screen p{font-size:10px}h1{font-size:26px}.unit-art{height:123px}.unit-art img{width:93px;height:107px}.unit-art button{min-width:49px;font-size:14px}.cell label{font-size:12px}.outside-note{max-width:400px}}