body { background: #fff; font-family: Quicksand, sans-serif; font-size: 15px; line-height: 1.45; color: #111; margin: 0; }
#canvas { max-width: 760px; margin: auto; padding: 0 16px; }
a { color: purple; text-decoration: none; } a:hover { text-decoration: underline; }
.logo { font-family: 'Lovers Quarrel', cursive; font-weight: normal; font-size: 66px; text-decoration: none !important; }
#header { padding-top: 6px; } #header p { margin: -6px 0 6px; color: #555; }
hr { border: 0; border-top: 1px solid #ccc; }
h1 { font-size: 26px; font-weight: normal; } h2 { font-size: 19px; font-weight: normal; margin-top: 1.6em; }
.cols { columns: 2; column-gap: 32px; } .cols ul { margin-top: 0; }
.cols li { break-inside: avoid; margin: 2px 0; }
.letter { font-weight: bold; color: #555; margin: 10px 0 2px; break-after: avoid; }
.filters { margin: 12px 0 16px; } .filters button { font: inherit; font-size: 13px; border: 1px solid #c9b3d6;
  background: #fff; color: purple; border-radius: 14px; padding: 2px 10px; margin: 2px 2px; cursor: pointer; }
.filters button[aria-pressed=true] { background: purple; color: #fff; border-color: purple; }
.filters input { font: inherit; font-size: 14px; padding: 4px 8px; width: 220px; border: 1px solid #bbb; border-radius: 4px; }
.tags span { display: inline-block; font-size: 12px; background: #f3ecf7; color: #5a2a73; border-radius: 10px; padding: 1px 8px; margin: 0 4px 4px 0; }
dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; } dt { color: #555; } dd { margin: 0; }
.note { font-size: 13px; color: #555; }
#footer { font-size: 13px; color: #555; padding-bottom: 24px; }
@media (max-width: 560px) { .cols { columns: 1; } dl { grid-template-columns: 1fr; } dt { font-weight: bold; } }