:root { font-family: system-ui, sans-serif; color-scheme: light dark; }
body { margin: 0; }
nav { display: flex; gap: 1rem; align-items: center; padding: .6rem 1rem;
      border-bottom: 1px solid #8884; }
nav form.inline { margin-left: auto; }
main { max-width: 960px; margin: 0 auto; padding: 1rem; }
.card { border: 1px solid #8884; border-radius: 8px; padding: 1rem;
        margin: .5rem 0; display: flex; flex-direction: column; gap: .6rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: .8rem; }
.grid img, .card img { max-width: 100%; border-radius: 6px; }
label { display: flex; flex-direction: column; gap: .2rem; }
label.inline { display: inline-flex; flex-direction: row; gap: .3rem; margin-right: 1rem; }
table { border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid #8884; padding: .4rem; text-align: left; }
td.prompt { max-width: 28ch; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.st-running { background: #ffd70022; }
.st-failed { background: #ff000022; }
.error { color: #c00; }
button { padding: .5rem 1rem; cursor: pointer; }