:root { color-scheme: dark; font: 16px/1.45 system-ui, sans-serif; background: #101624; color: #edf2ff; } * { box-sizing: border-box; } body { margin: 0; } main { max-width: 680px; min-height: 100vh; margin: auto; padding: 16px; } h1 { font-size: 1.45rem; margin: 0; } h2 { font-size: 1.1rem; margin: 0 0 10px; } button, input, textarea { font: inherit; } button { background: #77a8ff; color: #07111f; border: 0; border-radius: 6px; padding: 10px 12px; font-weight: 700; cursor: pointer; } button:disabled { opacity: .5; cursor: wait; } input, textarea { width: 100%; color: inherit; background: #1c263a; border: 1px solid #51627d; border-radius: 6px; padding: 10px; } textarea { min-height: 78px; resize: vertical; } .bar, .row { display: flex; align-items: center; gap: 10px; } .bar { justify-content: space-between; margin-bottom: 18px; } .stack { display: grid; gap: 12px; } .card, .message, details { padding: 12px; border: 1px solid #35445f; border-radius: 7px; background: #172033; } .card button { width: 100%; text-align: left; background: transparent; color: inherit; padding: 0; } .muted { color: #aab7ce; font-size: .9rem; } .error { color: #ffb4ab; background: #4a1d24; padding: 10px; border-radius: 6px; } .ok { color: #b9f7c5; } .message.user { border-color: #77a8ff; } .message pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; font: inherit; } .tools { display: grid; gap: 7px; } details { padding: 8px 10px; } summary { cursor: pointer; } form { margin-top: 14px; } .login { max-width: 380px; margin: 15vh auto; } @media (min-width: 700px) { main { padding: 30px; } }