:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; font: 16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
header, main { width: min(1100px, calc(100% - 28px)); margin: 0 auto; }
header { display: flex; gap: 12px; align-items: center; padding: 18px 0; }
header span { margin-left: auto; opacity: .8; }
button, .btn { background: #fff; color: #000; border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer; }
button.ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.list { display: grid; gap: 8px; }
article { border: 1px solid rgba(255,255,255,.3); border-radius: 14px; padding: 12px 14px; }
article button { margin-right: 6px; }
pre { white-space: pre-wrap; }
textarea { width: 100%; min-height: 80px; background: #000; color: #fff; border: 1px solid #fff; border-radius: 10px; padding: 8px; font: inherit; }
.msg { border-top: 1px solid rgba(255,255,255,.2); padding: 8px 0; }
@media (max-width: 700px) { header { flex-wrap: wrap; } }