:root { color-scheme: dark; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; margin: 16px; }
h1 { margin: 0 0 12px; font-size: 20px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
button { padding: 10px 12px; border: 1px solid #444; background: #222; color: #eee; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.badge { padding: 6px 10px; border: 1px solid #444; border-radius: 999px; background: #111; color: #ddd; font-size: 12px; }
.panel { border: 1px solid #333; border-radius: 12px; padding: 12px; background: #0f0f0f; }
video { width: 480px; max-width: 100%; background: #111; border-radius: 12px; }
pre { white-space: pre-wrap; background: #0b0b0b; border: 1px solid #333; padding: 10px; border-radius: 12px; max-height: 260px; overflow: auto; }
small.mono { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; color: #aaa; }

/* --- buttons (index) --- */
.btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid #ccc;
  border-radius:10px;
  text-decoration:none;
  color:#111;
  background:#f7f7f7;
}
.btn.primary{
  border-color:#111;
  background:#111;
  color:#fff;
}