.ehr-figure { container-type: inline-size; width: 100%; max-width: 34rem; min-width: 0; margin-inline: auto; }
.ehr-rack { display: flex; gap: 0; padding: 7px 4px; border: 1px solid #35414b; border-radius: 5px; background: #090c0f; box-shadow: inset 0 1px #8bc4d529, 3px 3px 0 #161d24, 6px 6px 0 #090d12, 0 24px 40px #0008, 0 0 65px #5b9bb510; }
.ehr-rail { flex: 0 0 4.5%; display: flex; flex-direction: column; justify-content: space-around; padding-block: 1px; background: linear-gradient(90deg, #0e1318, #151b20); border: 1px solid #20272d; }
.ehr-rail > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ehr-rail b { position: absolute; left: 0; top: 9px; color: #46505b; font: 5px ui-monospace, monospace; }
.ehr-rail i { width: 4px; height: 5px; margin-left: 5px; background: #030609; box-shadow: inset 0 1px 1px #000; }
.ehr-rightRail { flex: 0 0 3%; background: linear-gradient(90deg, #12171c, #0d1217); border: 1px solid #1f262c; }
.ehr-units { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ehr-unit { position: relative; display: flex; align-items: center; gap: 2%; width: 100%; min-width: 0; padding: 0 4%; border: 1px solid #22292e; border-left-color: #191f25; border-right-color: #191f25; border-radius: 2px; background: linear-gradient(180deg, #171d22, #0c1115 36%, #101519 88%, #1b2126); color: #a4afb9; box-shadow: inset 0 1px #a4b5c106, 0 1px 1px #000; font: inherit; text-align: left; text-decoration: none; }
button.ehr-unit, a.ehr-unit { cursor: pointer; transition: filter .18s, border-color .18s; }
.ehr-unit::before, .ehr-unit::after { content: ''; position: absolute; width: 4px; height: 4px; top: calc(50% - 2px); border-radius: 50%; border: 1px solid #303b44; background: linear-gradient(135deg, #1f272d 38%, #080d11 40% 60%, #1f272d 62%); box-shadow: 0 0 0 1px #080c10; }
.ehr-unit::before { left: 1.25%; }.ehr-unit::after { right: 1.25%; }
button.ehr-unit:hover, a.ehr-unit:hover { filter: brightness(1.3); border-color: #4b5a60; z-index: 1; }
.ehr-unit[aria-pressed='true'] { box-shadow: inset 2px 0 #77a3a76b, inset 0 1px #a4b5c106; }
.ehr-unit:focus-visible { outline: 2px solid #b4dbe0; outline-offset: 2px; z-index: 2; }
.ehr-copy { display: flex; flex: 0 0 31%; flex-direction: column; gap: 3px; min-width: 0; }
.ehr-copy strong { font: 650 clamp(6px, 1.5cqw, 8px)/1.25 ui-monospace, monospace; letter-spacing: .045em; text-transform: uppercase; }
.ehr-copy small { color: #7c8895; font: clamp(4.5px, 1.08cqw, 6px)/1.4 ui-monospace, monospace; letter-spacing: .01em; }
.ehr-led { display: inline-block; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: #69c398; box-shadow: 0 0 0 2px #173b2d, 0 0 6px 1px #43bd7666; }
.ehr-blue { background: #8bd8ec; box-shadow: 0 0 0 2px #203e47, 0 0 6px 1px #58c2dd55; }
.ehr-switch { height: 10cqw; min-height: 39px; }
.ehr-switch .ehr-copy { flex-basis: 23%; }
.ehr-ports { display: grid; flex: 1; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; gap: 4px 3px; }
.ehr-ports i { position: relative; height: clamp(6px, 1.8cqw, 10px); border: 1px solid #29383f; border-radius: 1px; background: #020607; box-shadow: inset 0 0 0 1px #0e161b, 0 1px #263039; }
.ehr-ports i::before, .ehr-ports i::after { content: ''; position: absolute; top: 1px; width: 2px; height: 2px; border-radius: 1px; background: #24302a; }
.ehr-ports i::before { left: 1px; }
.ehr-ports i::after { right: 1px; }
.ehr-ports i[data-connected]::before { background: #79e6a0; box-shadow: 0 0 3px 1px #45cf7566; }
.ehr-ports i[data-connected]::after { background: #efc769; box-shadow: 0 0 3px 1px #ddb15155; }
.ehr-uplink { display: flex; flex: 0 0 15%; flex-direction: column; gap: 4px; margin-left: 3%; }
.ehr-uplink > small { font: 4px ui-monospace, monospace; color: #667481; }
.ehr-uplink > span { display: flex; justify-content: space-around; gap: 6px; }
.ehr-uplink > span:first-of-type > i { width: 40%; height: 12px; background: #030609; border: 1px solid #263038; }
.ehr-blank { height: 7cqw; min-height: 24px; padding: 1.6cqw 8%; }
.ehr-blank > span { width: 100%; height: 100%; border-radius: 12px; border-top: 1px solid #25343b; background: repeating-linear-gradient(90deg, #010506 0 1px, #1d2529 1px 2px, #080d10 2px 3px); box-shadow: inset 0 2px 3px #000; }
.ehr-dedicated { height: 8.5cqw; min-height: 37px; }
.ehr-grille { flex: 1; display: flex; align-items: center; justify-content: center; height: 5.5cqw; min-height: 20px; border: 1px solid #03070a; border-radius: 3px; background: radial-gradient(circle, #263139 25%, transparent 30%) 0 0 / 4px 4px, radial-gradient(circle, #263139 25%, transparent 30%) 2px 2px / 4px 4px, #070c10; box-shadow: inset 0 0 7px 3px #000b, 0 1px #2b343b66; }
.ehr-tag { display: inline-flex; align-items: baseline; gap: 1px; padding: 4px 7px 4px 12px; position: relative; background: #e8dba8; color: #13120c; border-radius: 1px; box-shadow: 0 2px 4px #0008; font: 800 clamp(6px, 1.4cqw, 8px)/1 ui-monospace, monospace; white-space: nowrap; }
.ehr-tag::before { content: ''; position: absolute; left: 5px; top: calc(50% - 1px); width: 2px; height: 2px; background: #1e1c11; border-radius: 50%; }
.ehr-tag small { font-size: .78em; }
.ehr-tag[data-featured] { background: #ffbe32; }
.ehr-status { display: flex; flex: 0 0 15%; align-items: center; justify-content: flex-start; gap: 6px; padding-left: 2%; }
.ehr-status small { font: clamp(4px, .92cqw, 5px)/1.3 ui-monospace, monospace; color: #88939c; text-transform: uppercase; }
.ehr-service { height: 17cqw; min-height: 66px; padding-right: 5%; }
.ehr-service .ehr-copy { height: 79%; flex-basis: 31%; padding-top: 3px; }
.ehr-service .ehr-copy strong { color: #c0cad3; font-size: clamp(8px, 2cqw, 11px); letter-spacing: .02em; }
.ehr-service .ehr-copy small { font-size: clamp(4px, 1cqw, 5.5px); }
.ehr-serviceMeta { margin-top: auto; color: #72818b; font: clamp(4px, 1cqw, 5.5px) ui-monospace, monospace; }
.ehr-service > .ehr-led { position: absolute; top: 12%; right: 7%; }
.ehr-blades { display: flex; flex: 1; gap: 5px; height: 84%; }
.ehr-blades > i { position: relative; flex: 1; min-width: 0; padding: 4px 3px 10px; border: 1px solid #273038; border-radius: 2px; background: linear-gradient(90deg, #202932, #0a1016 12% 85%, #25313b); box-shadow: 0 2px 3px #000a, inset 0 0 0 2px #050a10; }
.ehr-blades > i > span { display: block; height: 100%; border: 1px solid #060b10; background: radial-gradient(circle, #31404e 23%, transparent 28%) 0 0 / 3px 3px, radial-gradient(circle, #31404e 23%, transparent 28%) 1.5px 1.5px / 3px 3px, radial-gradient(ellipse at center, #0a2a42, #03080f); box-shadow: inset 0 0 5px #000; }
.ehr-blades b { position: absolute; left: 4px; right: 9px; bottom: 4px; height: 2px; background: #2c3942; box-shadow: 0 1px #050a0e; }
.ehr-blades em { position: absolute; width: 4px; height: 4px; right: 3px; bottom: 3px; border-radius: 50%; background: #80c5df; box-shadow: 0 0 0 1px #254652, 0 0 4px #5db8d788; }
.ehr-slim { height: 7.5cqw; min-height: 32px; }
.ehr-slim .ehr-grille { height: 5cqw; background-color: #071525; }
.ehr-twinLights { flex: 0 0 15%; display: flex; gap: 8px; padding-left: 2%; }
.ehr-power { height: 8cqw; min-height: 34px; }
.ehr-power .ehr-copy { flex-basis: 19%; }
.ehr-power .ehr-copy small { font-size: clamp(3.8px, .9cqw, 5px); }
.ehr-sockets { flex: 1; display: flex; gap: 6px; margin-right: 5%; }
.ehr-sockets i { flex: 1; height: clamp(12px, 3.5cqw, 18px); border-radius: 3px; border: 1px solid #2b353d; background: linear-gradient(90deg, #020609 28%, #3c464c 29% 36%, #020609 37% 64%, #3c464c 65% 72%, #020609 73%); box-shadow: inset 0 0 0 4px #03070a, 0 1px #24303a66; }
.ehr-footnote { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 0; color: #909aa5; font: clamp(6px, 1.6cqw, 9px)/1.5 ui-monospace, monospace; }
.ehr-footnote > span:last-child { display: flex; align-items: center; gap: 7px; font-family: inherit; }
.ehr-footnote i { width: 12px; height: 8px; border-radius: 2px; background: #e8dba8; }
@container (max-width: 360px) { .ehr-blades { gap: 3px; }.ehr-ports { gap: 3px 2px; }.ehr-status { gap: 4px; }.ehr-sockets { gap: 4px; }.ehr-tag { padding: 4px 5px 4px 10px; }.ehr-unit::before, .ehr-unit::after { width: 3px; height: 3px; }.ehr-rail i { height: 4px; }.ehr-uplink { margin-left: 1%; }.ehr-twinLights { gap: 6px; } }
.ehr-unit:nth-child(2n) { --activity-delay: -2.7s; --activity-period: 8.3s; }
.ehr-unit:nth-child(3n) { --activity-delay: -5.1s; --activity-period: 9.7s; }
.ehr-led { opacity: 1; }
.ehr-indicators { display: flex; flex: none; gap: 5px; }
.ehr-activity { background: #efc769; box-shadow: 0 0 0 1px #514122, 0 0 4px #e1b35577; }
.ehr-uplink > span > span { display: flex; justify-content: center; gap: 5px; width: 40%; }
.ehr-uplink > span > span:last-child { --activity-delay: -3.7s; --activity-period: 8.1s; }
/* .ehr-uplink .ehr-activity swapped in ehr-networkTraffic here; inert now that the LEDs are static. */
.ehr-blades em { background: #7cdda2; box-shadow: 0 0 0 1px #22492f, 0 0 4px #52c27977; }
.ehr-blades em:last-child { right: 10px; background: #efc769; box-shadow: 0 0 0 1px #514122, 0 0 4px #e1b35577; }
.ehr-blades b { right: 17px; }
@keyframes ehr-diskActivity {
    0%, 7%, 18%, 24%, 53%, 60%, 88%, 100% { opacity: .12; }
    5%, 16%, 22%, 51%, 58%, 86% { opacity: 1; }
}
@keyframes ehr-networkTraffic {
    0%, 10%, 17%, 25%, 58%, 65%, 72%, 100% { opacity: .12; }
    8%, 15%, 23%, 56%, 63%, 70% { opacity: 1; }
}
.ehr-unit[aria-pressed='true'], .ehr-figure[data-active='compute'] .ehr-dedicated { border-color: #6eacc166; box-shadow: inset 2px 0 #83c5db, inset 0 0 22px #5daac110; }
/* Rack entry animation removed 2026-10-19; the rack now just appears at its resting state. */
.ehr-figure[data-paused='true'] *, .ehr-figure[data-paused='true'] *::after { animation-play-state: paused !important; }
@keyframes ehr-rackEntry { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ehr-figure *, .ehr-figure *::after { animation: none !important; transition: none !important; } }

.ehr-figure{margin-top:24px}.ehr-unit{box-sizing:border-box}.ehr-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ehr-controls span{font:9px ui-monospace,monospace;color:#8b929e;letter-spacing:.08em}.ehr-pause{color:#a9a5b1;border:1px solid #ffffff1c;border-radius:20px;padding:5px 10px;font:10px Inter,system-ui;background:#ffffff05;cursor:pointer}.ehr-figure .ehr-copy strong{color:#a4afb9}.ehr-figure .ehr-copy small{color:#7c8895}.ehr-figure a.ehr-unit{color:#a4afb9}.ehr-figure .ehr-footnote{color:#909aa5}.ehr-figure a:focus-visible,.ehr-pause:focus-visible{outline:2px solid #c4b5fd;outline-offset:3px}