:root { color-scheme: dark; font: 16px system-ui, sans-serif; background: #171717; color: #eee; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: auto; padding: 20px 16px 48px; }
header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 32px; }
header strong { color: #ff9f1c; font-size: 2rem; }
header span, small, #status { color: #aaa; }
label { display: block; margin-bottom: 8px; font-weight: 700; }
form div, .controls { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; }
input, button { font: inherit; border: 1px solid #555; border-radius: 8px; padding: 10px 12px; background: #242424; color: inherit; }
button { cursor: pointer; }
button:hover, button:focus-visible { border-color: #ff9f1c; }
#status { min-height: 1.5em; }
#player { margin: 20px 0; }
#media { display: block; width: 100%; }
.controls { align-items: center; margin-top: 8px; }
#now-playing { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol { padding: 0; margin: 0; list-style: none; }
li { border-top: 1px solid #333; }
.result { display: flex; width: 100%; gap: 12px; text-align: left; border: 0; border-radius: 0; padding: 12px 0; }
.result img { width: 144px; aspect-ratio: 16 / 9; object-fit: cover; background: #242424; border-radius: 4px; }
.result span { min-width: 0; display: grid; gap: 6px; }
.result b { line-height: 1.3; }
.result small { line-height: 1.25; }
@media (max-width: 420px) { .result img { width: 120px; } }