:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #151c2b; color: #eef2fb; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1040px; padding: 32px 24px; margin: auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.brand { color: #afc0df; font-size: 14px; margin: 0 0 6px; }
h1 { font-size: clamp(24px, 4vw, 36px); margin: 0; letter-spacing: -.03em; }
h2 { font-size: 18px; margin: 0; }
p { line-height: 1.6; }
#status { font-size: 14px; border: 1px solid #566583; padding: 7px 12px; border-radius: 6px; max-width: 46%; }
#status::before { content: '●'; margin-right: 8px; color: #b6c3dc; }
#status[data-state="online"]::before { color: #8bdfc4; }
#status[data-state="expired"]::before { color: #f5c986; }
.office { background: #24334e; border: 3px solid #566583; border-bottom-color: #334361; position: relative; }
.scene { position: relative; }
canvas { display: block; width: 100%; image-rendering: pixelated; }
#labels { position: absolute; inset: 0; pointer-events: none; }
.agent-label { position: absolute; transform: translateX(-50%); text-align: center; width: 24%; line-height: 1.15; font-size: clamp(10px, 1.35vw, 13px); }
.agent-label span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 5px; color: #fff; background: #182237; border: 1px solid #7184a5; border-radius: 3px; }
.agent-label img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; image-rendering: pixelated; }
.empty { text-align: center; margin: 0; padding: 10px; color: #d5e0f4; background: #1b2840; }
[hidden] { display: none !important; }
#demo-banner { padding: 12px 16px; border: 2px solid #f5c986; color: #f5c986; background: #182237; line-height: 1.5; }
#summary { padding: 24px 0; outline-offset: 6px; }
.summary-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
#activity { font-size: 14px; color: #b9c9e4; margin: 0; }
#counts { font-weight: 600; margin: 12px 0 8px; }
.legend { font-size: 13px; color: #afc0df; margin: 0; }
#agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; gap: 0 24px; margin: 20px 0 0; }
#agents li { padding: 12px 0; border-top: 1px solid #3c4b66; overflow-wrap: anywhere; }
#agents strong { display: block; font-weight: 600; }
#agents small { color: #b9c9e4; display: block; margin-top: 4px; line-height: 1.6; }
footer { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid #3c4b66; padding-top: 16px; font-size: 12px; color: #afc0df; line-height: 1.6; }
a { color: #c5d8ff; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #f5c986; outline-offset: 4px; }
@media (max-width: 480px) {
  main { padding: 20px 12px; }
  header { align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  #status { margin-top: 0; font-size: 12px; padding: 6px 8px; }
  .agent-label { width: 47%; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }