.room-hardware{background:url('../assets/art/hardware-room-v1.png') center/cover}
.hw-grid{position:relative;width:280px;height:230px;margin:24px auto}.hw-port{position:absolute;width:64px;height:56px;display:grid;place-items:center;background:#68568d;border:4px solid #bd9fda;color:#fff0c5;z-index:1}.port-0{left:0;top:0}.port-1{right:0;top:0}.port-2{left:0;bottom:0}.port-3{right:0;bottom:0}.hw-edge{position:absolute;background:#78583f;box-shadow:0 3px 0 #191521;border-top:2px solid #b28e56}.edge-01,.edge-23{left:32px;right:32px;height:8px}.edge-01{top:25px}.edge-23{bottom:25px}.edge-02,.edge-13{top:25px;bottom:25px;width:8px}.edge-02{left:28px}.edge-13{right:28px}.hw-edge.lit{background:#99e550;border-color:#f5efb0;animation:mpPop .25s steps(3)}
.hw-sites{display:flex;position:relative;gap:90px;justify-content:center;align-items:flex-start;margin:28px 0}.hw-site{min-width:104px;padding:14px 10px;border:5px solid #9d7949;background:#1c2732;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1}.hw-site i{font-style:normal;width:48px;height:48px;display:grid;place-items:center;background:#284259;font-size:32px;color:#7ed6ee;clip-path:polygon(8px 0,40px 0,40px 8px,48px 8px,48px 40px,40px 40px,40px 48px,8px 48px,8px 40px,0 40px,0 8px,8px 8px)}.hw-site.empty i{color:#b6a9c0;background:#292431}.hw-site.gold i{color:#ffd84d;background:#51412a}.hw-site.superposed i{color:#d6eda0;box-shadow:inset 24px 0 #294c63;background:#54472e}.hw-site b,.hw-site small{font-size:16px;font-weight:normal}.hw-sites>div>button{display:block;width:100%;margin-top:12px}.hw-loader{display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-size:40px;color:#99e550;background:#3d3249;border:4px solid #8c6c42;padding:14px;cursor:grab}.hw-loader small{font-size:16px;color:#f4e3be}.hw-steps{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0}.hw-pair-bridge{display:none}.hw-sites.paired .hw-pair-bridge{position:absolute;display:block;height:8px;left:36%;right:36%;top:70px;background:#99e550;box-shadow:0 4px 0 #3b6936;font-size:14px;font-style:normal;color:#f0ffd2;white-space:nowrap;line-height:40px;animation:hwBridge 1s steps(2) infinite}
.hw-probabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.hw-probabilities>div{padding:14px;background:#352d42;border:3px solid #191521}.hw-prob-track{height:18px;background:#15121b;margin:16px 0;box-shadow:2px 2px 0 #655372}.hw-prob-track i{display:block;height:100%;background:#7ed6ee;animation:mpFill .4s steps(8);transform-origin:left}.hw-loss-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.hw-loss-card{padding:18px;background:#352d42;border:3px solid #191521;text-align:left}.hw-loss-card h3{font-size:18px}.hw-loss-row{margin:18px 0}.hw-loss-row small{font-size:14px;display:block;margin-top:8px}.hw-sample-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hw-sample-slots span{background:#233d44;border:2px solid #578b81;text-align:center;padding:8px;color:#a7e5df}.hw-sample-slots span.lost{background:#4e3534;border-color:#ba9164;color:#ffd196}.hw-crystal{background:#294a38;color:#a4ee77}.hw-observation{border-top:3px solid #68567e;margin-top:24px;padding-top:12px}
@keyframes hwBridge{50%{background:#d8ff94}}
@container(max-width:600px){.hw-grid{width:240px;height:210px}.hw-sites{gap:20px;flex-wrap:wrap}.hw-site{min-width:100px}.hw-probabilities{grid-template-columns:1fr 1fr}.hw-loss-comparison{grid-template-columns:1fr}.hw-loss-card{padding:12px}.hw-sample-slots{gap:5px}.hw-sites.paired .hw-pair-bridge{left:42%;right:42%}}
.reduced .hw-pair-bridge{animation:none!important}@media(prefers-reduced-motion:reduce){.hw-pair-bridge{animation:none!important}}