/* Host site owns [data-en]/[data-fr] visibility. No language switcher here. */
.hero-art{color:#F4F5F7;font-family:"IBM Plex Sans",sans-serif;width:100%;min-width:0}
.hero-art *{box-sizing:border-box}
.hero-art .ha-panel{padding:18px;border:1px solid #344963;border-radius:12px;background:#0D1F3C;max-width:620px;height:450px;position:relative}
.hero-art .ha-modes{margin:0;padding:3px;border:1px solid #344963;border-radius:8px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;min-width:0}
.hero-art .ha-modes label{position:relative;display:flex;align-items:center;justify-content:center;min-height:38px;padding:4px;text-align:center;cursor:pointer;font-size:12px;font-weight:600;border-radius:5px}
.hero-art .ha-modes input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.hero-art .ha-modes label:has(input:checked){background:#F26A1B;color:#0D1F3C}
.hero-art .ha-modes label:has(input:focus-visible){outline:2px solid #FFB98A;outline-offset:3px}
.hero-art .ha-network{position:relative}
.hero-art .ha-sky{width:100%;height:102px;display:block}
.hero-art .ha-link{fill:none;stroke:#2E6FBF;stroke-width:1;opacity:.65}
.hero-art .ha-packet{fill:#FFB98A}
.hero-art .ha-sites{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hero-art .ha-site{font:inherit;color:#F4F5F7;background:#14305A;border:1px solid #355175;border-radius:8px;padding:7px 4px;cursor:pointer;min-width:0;text-align:center;--status:#1E9E6A}
.hero-art .ha-site svg{height:25px;width:32px;fill:none;stroke:var(--status);stroke-width:1.7;display:block;margin:0 auto 4px}
.hero-art .ha-site strong{display:block;font-size:12px;font-weight:500}
.hero-art .ha-site-number{display:block;font:10px "IBM Plex Mono",monospace;margin:5px 0;color:#D5DEEA;white-space:nowrap}
.hero-art .ha-meter{display:block;height:4px;background:#0D1F3C;border-radius:3px;position:relative;margin:0 2px}
.hero-art .ha-meter i{display:block;height:100%;background:var(--status);border-radius:3px}
.hero-art .ha-meter b{position:absolute;right:0;top:-3px;width:2px;height:10px;background:#F26A1B}
.hero-art .ha-state{display:block;font-size:9px;line-height:12px;margin-top:7px;color:#D5DEEA;min-height:12px}
.hero-art .ha-site.is-quota{--status:#FFB98A;border-color:#F26A1B}
.hero-art .ha-site.is-slow{--status:#D64545;border-color:#D64545}
.hero-art .ha-site:focus-visible{outline:2px solid #FFB98A;outline-offset:3px}
.hero-art .ha-site[aria-expanded="true"]{box-shadow:inset 0 0 0 1px #F4F5F7}
.hero-art .ha-panel:not([data-mode="quota"]) .ha-meter b{display:none}
.hero-art .ha-detail{height:40px;display:flex;align-items:center;color:#D5DEEA;font-size:11px;line-height:16px}
.hero-art .ha-pool-heading{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:18px}
.hero-art .ha-pool-heading strong{font-weight:500}
.hero-art .ha-total{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.hero-art .ha-pool-track{height:9px;background:#243D5E;border-radius:3px;margin-top:8px;overflow:hidden}
.hero-art .ha-pool-track i{display:block;height:100%;background:#F26A1B;border-radius:3px}
.hero-art .ha-outcome{font-size:11px;color:#FFB98A;height:32px;padding-top:8px}
.hero-art .ha-day{display:grid;grid-template-columns:1fr auto;font-size:12px;gap:5px;align-items:center}
.hero-art .ha-day output{font:12px "IBM Plex Mono",monospace;background:#14305A;padding:3px 8px;border-radius:4px}
.hero-art .ha-day input{grid-column:1/-1;width:100%;margin:0;height:24px;accent-color:#F26A1B;cursor:pointer}
.hero-art .ha-day input:focus-visible{outline:2px solid #FFB98A;outline-offset:3px}
.hero-art .ha-note{font-size:10px;color:#ACBACD;margin:6px 0 0}
.hero-art .ha-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:420px){.hero-art .ha-panel{padding:12px;height:450px}.hero-art .ha-modes label{font-size:10px}.hero-art .ha-sites{gap:4px}.hero-art .ha-site strong{font-size:10px}.hero-art .ha-site-number{font-size:8px}.hero-art .ha-state{font-size:8px}.hero-art .ha-detail{font-size:10px}.hero-art .ha-pool-heading{font-size:10px}.hero-art .ha-outcome{font-size:10px}}
/* Fixed vertical budget: fits the host's 460px maximum at phone and desktop widths. */
.hero-art .ha-panel{height:460px;padding:12px}
.hero-art .ha-modes label{min-height:30px;line-height:14px;font-family:"Archivo","IBM Plex Sans",sans-serif}
.hero-art .ha-sky{height:60px}
.hero-art .ha-site{height:84px;padding:6px 4px}
.hero-art .ha-site svg{height:18px;margin-bottom:3px}
.hero-art .ha-site strong{line-height:12px}
.hero-art .ha-site-number{line-height:10px;margin:4px 0}
.hero-art .ha-state{line-height:10px;min-height:10px;margin-top:4px}
.hero-art .ha-detail{height:28px}
.hero-art .ha-pool-track{height:8px;margin-top:6px}
.hero-art .ha-outcome{height:26px;padding-top:6px;line-height:14px}
.hero-art .ha-day{gap:3px;line-height:14px}
.hero-art .ha-day output{line-height:14px}
.hero-art .ha-note{line-height:12px}