/* Uses the host site's tokens when present, with neutral fallbacks. */
.ao-lab, .ao-preview, .ao-project {
  --ao-accent: var(--accent, #63ffab);
  --ao-accent-soft: var(--accent-soft, #2abf73);
  --ao-bg: var(--shell, #111);
  --ao-panel: var(--sidebar, #0d0d0d);
  --ao-text: var(--text, #f2f4f3);
  --ao-muted: color-mix(in srgb, var(--ao-text) 62%, transparent);
  --ao-line: color-mix(in srgb, var(--ao-text) 14%, transparent);
  --ao-warn: #ffd84a;
  --ao-err: #ff5a4f;
  color: var(--ao-text);
}

.ao-root { position: relative; width: 100%; overflow: hidden; }
.ao-root.ao-mini { aspect-ratio: var(--ao-aspect, 320 / 176); }
.ao-root.ao-full { aspect-ratio: var(--ao-aspect, 320 / 176); max-height: 78vh; margin-inline: auto; }
.ao-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.ao-root.ao-offline .ao-canvas { filter: grayscale(1) brightness(.55); }
.ao-notice {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  font: 600 .9rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.ao-notice[hidden] { display: none; }
.ao-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap; padding: .25rem .5rem;
  background: rgba(8,8,10,.92); border: 1px solid var(--ao-accent-soft, #2abf73); color: #f2f4f3;
  font: 600 .72rem ui-monospace, monospace; border-radius: 6px;
}
.ao-tip[hidden] { display: none; }

/* lab */
.ao-lab-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.ao-lab-title { margin: 0; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; }
.ao-lab-totals { color: var(--ao-muted); font-size: .85rem; }
.ao-live {
  display: inline-flex; align-items: center; gap: .4rem; font: 700 .7rem ui-monospace, monospace; letter-spacing: .12em;
  color: var(--ao-accent);
}
.ao-live::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: ao-pulse 1.6s ease-in-out infinite; }
.ao-live.is-off { color: var(--ao-muted); }
.ao-live.is-off::before { animation: none; opacity: .5; }
@keyframes ao-pulse { 50% { opacity: .25; } }

.ao-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ao-card {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--ao-panel); border: 1px solid var(--ao-line); border-radius: 16px; transition: border-color .15s, transform .15s;
}
.ao-card:hover, .ao-card:focus-visible { border-color: var(--ao-accent-soft); transform: translateY(-2px); }
.ao-card:focus-visible { outline: 2px solid var(--ao-accent); outline-offset: 2px; }
.ao-card-art { background: #000; }
.ao-card-body { padding: .7rem .85rem .85rem; display: grid; gap: .3rem; }
.ao-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ao-card-name { font-size: .95rem; }
.ao-card-meta { font-size: .75rem; color: var(--ao-muted); }
.ao-chip { font: 700 .62rem ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; border: 1px solid var(--ao-line); color: var(--ao-muted); white-space: nowrap; }
.ao-chip-active { color: var(--ao-accent); border-color: var(--ao-accent-soft); }
.ao-chip-paused { color: var(--ao-warn); border-color: color-mix(in srgb, var(--ao-warn) 50%, transparent); }

.ao-floor-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ao-floor-name { margin: 0; font-size: 1.05rem; }
.ao-back { all: unset; cursor: pointer; color: var(--ao-accent); font-size: .85rem; }
.ao-back:hover, .ao-back:focus-visible { text-decoration: underline; }
.ao-floor-main { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ao-floor-main { grid-template-columns: minmax(0, 1fr) 260px; } }
.ao-stage { align-self: start; background: #000; border: 1px solid var(--ao-line); border-radius: 16px; overflow: hidden; min-width: 0; }
.ao-side { display: grid; gap: .8rem; align-content: start; }
.ao-desc { margin: 0; color: var(--ao-muted); font-size: .85rem; }
.ao-repo { color: var(--ao-accent); font-size: .85rem; }

.ao-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ao-agent { display: grid; grid-template-columns: .6rem 1fr; gap: .1rem .6rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--ao-line); border-radius: 10px; background: var(--ao-panel); font-size: .8rem; }
.ao-agent.is-selected { border-color: var(--ao-accent); }
.ao-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ao-muted); grid-row: span 2; }
.ao-agent-role { font-weight: 700; }
.ao-agent-state { color: var(--ao-muted); font-size: .72rem; grid-column: 2; }
.ao-s-working .ao-dot, .ao-s-researching .ao-dot, .ao-s-reviewing .ao-dot, .ao-s-spawned .ao-dot { background: var(--ao-accent); }
.ao-s-waiting .ao-dot { background: var(--ao-warn); }
.ao-s-error .ao-dot { background: var(--ao-err); }
.ao-roster-empty { color: var(--ao-muted); font-size: .8rem; }

/* home preview */
.ao-preview { display: grid; gap: .6rem; padding: 1rem; text-decoration: none; color: inherit; background: var(--ao-panel); border: 1px solid var(--ao-line); border-radius: 20px; max-width: 460px; }
.ao-preview:hover, .ao-preview:focus-visible { border-color: var(--ao-accent-soft); }
.ao-preview-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font: 700 .72rem ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.ao-preview-stats { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--ao-muted); font-size: .85rem; min-height: 1.2em; }
.ao-preview-art { background: #000; border-radius: 12px; overflow: hidden; min-height: 80px; }
.ao-preview-cta { color: var(--ao-accent); font-weight: 600; font-size: .9rem; }
.ao-project { display: grid; gap: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .ao-live::before { animation: none; }
  .ao-card { transition: none; }
}

.ao-live[hidden], .ao-preview-art:empty { display: none; }
.ao-empty { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--ao-muted); border: 1px dashed var(--ao-line); border-radius: 16px; font: 600 .9rem ui-monospace, monospace; }

.ao-pause { all: unset; cursor: pointer; margin-left: auto; font-size: .75rem; color: var(--ao-muted); border: 1px solid var(--ao-line); border-radius: 999px; padding: .2rem .7rem; }
.ao-pause:hover, .ao-pause:focus-visible { color: var(--ao-text); border-color: var(--ao-accent-soft); }
.ao-pause:focus-visible { outline: 2px solid var(--ao-accent); outline-offset: 2px; }

/* names, times, recent runs */
.ao-agent { grid-template-columns: .6rem 1fr auto; }
.ao-agent-title { color: var(--ao-muted); font-weight: 400; }
.ao-agent-when { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--ao-muted); font-size: .68rem; text-align: right; white-space: nowrap; }
.ao-card-last { font-size: .72rem; color: var(--ao-muted); }
.ao-card-last.is-running { color: var(--ao-accent); }
.ao-runs { margin-top: .9rem; }
.ao-runs-title { margin: 0 0 .5rem; font: 700 .68rem ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ao-muted); }
.ao-runs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ao-run { padding: .5rem .65rem; border: 1px solid var(--ao-line); border-radius: 10px; background: var(--ao-panel); font-size: .78rem; }
.ao-run-head { display: flex; align-items: center; gap: .5rem; }
.ao-run-meta, .ao-run-activity { color: var(--ao-muted); font-size: .7rem; margin-top: .15rem; }
.ao-run .ao-dot { background: var(--ao-muted); }
.ao-o-running .ao-dot { background: var(--ao-accent); animation: ao-pulse 1.6s ease-in-out infinite; }
.ao-o-done .ao-dot { background: var(--ao-accent-soft); }
.ao-o-error .ao-dot { background: var(--ao-err); }
.ao-runs-empty { color: var(--ao-muted); font-size: .78rem; }