:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; background: #fafafa; }
.wrap { max-width: 980px; margin: 0 auto; padding: 28px 16px; }
header { background: #fff; border-bottom: 1px solid #e6e6e6; }
h1 { margin: 0 0 8px; font-size: 34px; }
.sub { margin: 0 0 14px; color: #555; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 16px; }
.card h2 { margin: 0 0 10px; font-size: 18px; }
ul { margin: 0; padding-left: 18px; }
li { margin: 8px 0; }
.muted { color: #666; margin: 8px 0 12px; }
.tiny { color: #777; font-size: 12px; }
.row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 10px; }
input { width: 100%; padding: 10px 12px; border: 1px solid #d5d5d5; border-radius: 8px; }
.btn { appearance: none; border: 1px solid #111; background: #111; color: #fff; padding: 10px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.secondary { background: #fff; color: #111; }
.btn:active { transform: translateY(1px); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #f4f4f4; }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .cases { grid-template-columns: 1fr; } }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 10px; border: 1px solid #dcdcdc; border-radius: 999px; font-size: 13px; background: #fff; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; } }
blockquote { margin: 0; padding: 12px; border-left: 4px solid #111; background: #f7f7f7; border-radius: 8px; }
cite { display: block; margin-top: 8px; color: #555; font-style: normal; font-size: 12px; }
.play { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.out { margin: 0; padding: 12px; background: #0b0b0b; color: #eaeaea; border-radius: 10px; overflow: auto; }