:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; }
body { margin: 0; background: #101725; color: #edf2ff; }
main { max-width: 960px; margin: 36px auto; padding: 0 20px; }
h1 { margin-bottom: 6px; }
.notice { margin: 22px 0; padding: 12px; border-left: 4px solid #f4bd38; background: #2d2615; }
.api-key { display: block; max-width: 420px; margin: 18px 0; }
input { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #34415b; border-radius: 6px; background: #080d17; color: #edf2ff; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
article { padding: 18px; border: 1px solid #34415b; border-radius: 10px; background: #182238; }
video, img { width: 100%; min-height: 210px; object-fit: cover; border-radius: 7px; background: #080d17; }
img:not([src]) { display: none; }
button { cursor: pointer; margin-top: 12px; padding: 10px 15px; border: 0; border-radius: 6px; background: #638cff; color: white; font-weight: 700; }
button:disabled { opacity: .55; cursor: not-allowed; }
.verify { background: #24a065; font-size: 1rem; }
pre { padding: 16px; white-space: pre-wrap; overflow: auto; background: #080d17; border-radius: 8px; }
@media (max-width: 680px) { .grid { grid-template-columns: 1fr; } }