:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111827; color: #e5e7eb; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main { max-width: 1280px; margin: auto; padding: 1.25rem; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
h1 { margin: 0; } h1 small { font-size: .6em; color: #93c5fd; }
h2 { font-size: 1.3rem; margin-top: .5rem; } h3 { font-size: 1rem; }
p { line-height: 1.5; } label { display: block; margin: .8rem 0; }
label > span { display: block; margin-bottom: .35rem; }
input, textarea, select, button { font: inherit; border-radius: .4rem; border: 1px solid #536078; padding: .6rem; }
input, textarea, select { background: #111827; color: #f3f4f6; width: 100%; }
textarea { resize: vertical; }
button { background: #334155; color: #f8fafc; cursor: pointer; }
button:hover { background: #475569; } button:disabled { opacity: .5; cursor: wait; }
button.primary { background: #1d4ed8; } button.danger { color: #fda4af; }
a { color: #93c5fd; }
section { background: #1e293b; border: 1px solid #334155; border-radius: .65rem; padding: 1.2rem; margin-bottom: 1.25rem; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.buttons, .healthbar, .selection { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.healthbar > span { flex: 1; }
.selection label { flex: 1; min-width: 100px; }
.inline { display: flex; gap: .5rem; align-items: center; }.inline input { width: auto; }
.inline span { margin: 0; }
.hint, footer { font-size: .88rem; color: #bbc8da; }
audio { width: 100%; margin-top: .6rem; }
.clip { border-top: 1px solid #475569; padding: .8rem 0; }
.clip p { font-size: .9rem; }
#notice { position: sticky; top: .5rem; z-index: 1; }
#notice:not(:empty) { padding: .9rem; background: #164e63; border: 1px solid #22d3ee; border-radius: .5rem; margin-bottom: 1rem; }
#notice.error, .warning { color: #fef3c7; background: #713f12; border: 1px solid #eab308; padding: .75rem; border-radius: .4rem; }
.job { border-top: 1px solid #475569; padding: 1rem 0; }
.job summary { cursor: pointer; padding: .5rem 0; overflow-wrap: anywhere; }
.job pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; }
.badge { font-weight: 600; color: #93c5fd; }
.job a { margin-right: 1rem; }
[hidden] { display: none !important; }
@media (max-width: 800px) { .columns { grid-template-columns: 1fr; gap: 0; } header { align-items: flex-start; } }