* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 20px;
  font: 16px/1.8 system-ui, sans-serif;
  color: #233a32;
  background: #f8faf3;
}
h1 { font-size: 24px; }
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.card {
  padding: 20px;
  border: 1px solid #6d865e;
  border-radius: 12px;
  background: #fff;
  overflow-wrap: anywhere;
}
.card h2 { margin: 0 0 8px; font-size: 20px; }
.card p { margin: 0; }
/* 640px以上では2列 */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 960px以上では、この後の指定が優先されて3列 */
@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-color-scheme: dark) {
  body { color: #edf5e3; background: #17251e; }
  .card { background: #24362b; border-color: #b6cb96; }
}
@media print {
  body { padding: 0; color: #000; background: #fff; }
  .cards { display: block; }
  .card { margin-bottom: 12px; break-inside: avoid; color: #000; background: #fff; }
  .demo-status { display: none; }
}