.hardware-spotlight{background:radial-gradient(ellipse at 80% 40%,color-mix(in srgb,var(--blue) 10%,transparent),transparent 60%),var(--surf);border-block:1px solid var(--line)}.hardware-heading{grid-template-columns:1fr 1fr;align-items:end;gap:50px;margin-bottom:32px;display:grid}.hardware-heading p{color:var(--muted);font-size:14px;line-height:1.8}.hardware-panel{border:1px solid var(--line);background:var(--card);border-radius:22px;grid-template-columns:1fr 1.15fr;display:grid;overflow:clip}.hardware-metrics{border-right:1px solid var(--line);gap:12px;padding:28px;display:grid}.hardware-metrics button{text-align:left;border:1px solid var(--line);background:var(--bg);width:100%;color:var(--text);font:inherit;cursor:pointer;border-radius:14px;align-items:center;gap:18px;padding:20px;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;display:flex;position:relative}.hardware-metrics button[aria-pressed=true]{background:var(--tint);border-color:color-mix(in srgb,var(--blue) 65%,var(--line));box-shadow:0 5px 20px color-mix(in srgb,var(--blue) 7%,transparent)}.hardware-metrics button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.resource-icon{width:48px;height:48px;color:var(--blue-d);border:1px solid var(--line);border-radius:12px;flex:none;place-items:center;display:grid}.resource-icon svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:25px;height:25px}.hardware-metrics small{color:var(--muted);margin-right:7px;font-size:11px;display:inline}.hardware-metrics strong{letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:32px;font-weight:600}.resource-label{color:var(--muted);margin-top:3px;font-size:12px;line-height:1.5;display:block}.resource-arrow{color:var(--blue-d);opacity:.6;margin-left:auto}.hardware-detail{flex-direction:column;justify-content:center;min-width:0;padding:28px 32px;display:flex}.hardware-visual{place-items:center;height:250px;display:grid;position:relative}.resource-orbits{width:100%;height:100%;stroke:var(--blue);stroke-width:1px;opacity:.22;position:absolute}.resource-orbits ellipse:nth-child(2){transform-origin:210px 135px;animation:45s linear infinite resource-spin}.resource-machine{justify-items:center;gap:16px;display:grid;position:relative}.resource-core{border:1px solid color-mix(in srgb,var(--blue) 45%,var(--line));background:var(--card);width:80px;height:80px;box-shadow:0 0 40px color-mix(in srgb,var(--blue) 12%,transparent);border-radius:20px;position:relative}.resource-core>span{opacity:0;place-items:center;transition:opacity .3s,transform .3s;display:grid;position:absolute;inset:0;transform:scale(.85)}.resource-core>.is-active{opacity:1;transform:scale(1)}.resource-core svg{fill:none;width:42px;height:42px;stroke:var(--blue);stroke-width:1.5px}.resource-nodes{grid-template-columns:repeat(3,52px);gap:8px;display:grid}.resource-nodes>span{border:1px solid var(--line);background:var(--card);height:25px;animation:4s ease-in-out infinite resource-glow;animation-delay:calc(var(--node)*-.7s);border-radius:5px;align-items:center;gap:4px;padding:7px;display:flex}.resource-nodes i{background:var(--line);width:9px;height:2px}.resource-nodes b{background:var(--blue);border-radius:50%;width:3px;height:3px;margin-left:auto}.machine-storage .resource-nodes{grid-template-columns:repeat(2,85px)}.machine-proxmox .resource-nodes>span{border-color:color-mix(in srgb,var(--blue) 25%,var(--line));height:32px}.machine-game .resource-core{border-radius:16px;rotate:45deg}.machine-game .resource-core>span{rotate:-45deg}.resource-particle{background:var(--blue);width:5px;height:5px;box-shadow:0 0 12px var(--blue);border-radius:50%;animation:7s ease-in-out infinite alternate resource-travel;position:absolute}.particle-a{top:25%;left:13%}.particle-b{animation-delay:-3s;bottom:25%;right:13%}.hardware-explanation{border-top:1px solid var(--line);min-height:120px;padding-top:22px}.hardware-explanation h3{letter-spacing:-.02em;font-size:18px}.hardware-explanation p{color:var(--muted);margin-top:12px;font-size:13px;line-height:1.8}.hardware-note{color:var(--muted);margin-top:18px;font-size:11px;line-height:1.7}@keyframes resource-spin{to{rotate:360deg}}@keyframes resource-glow{50%{border-color:var(--blue);box-shadow:0 0 12px color-mix(in srgb,var(--blue) 12%,transparent)}}@keyframes resource-travel{to{opacity:.25;translate:20px 30px}}@media (hover:hover) and (pointer:fine){.hardware-metrics button:hover{border-color:var(--blue);transform:translateY(-2px)}}@media (width<=700px){.hardware-heading{grid-template-columns:1fr;gap:14px}.hardware-panel{grid-template-columns:1fr}.hardware-metrics{border-right:0;border-bottom:1px solid var(--line);padding:20px}.hardware-detail{padding:20px}.hardware-explanation{min-height:0}.hardware-metrics button{padding:15px}}@media (prefers-reduced-motion:reduce){.resource-orbits ellipse,.resource-nodes>span,.resource-particle{animation:none}.resource-core>span,.hardware-metrics button{transition:none}.hardware-metrics button:hover{transform:none}}
