/* word-cloud-generator: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.wcl-tool { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .wcl-tool { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
.wcl-side, .wcl-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wcl-check { align-self: end; padding-bottom: 8px; }
.wcl-stage { padding: 12px; border-radius: 12px; background: var(--mist); }
.wcl-tool.is-transparent .wcl-stage { background: repeating-conic-gradient(#E3E7EE 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.wcl-stage canvas { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-1); }
.wcl-words-head { margin: 4px 0 8px; font-weight: 600; }
.wcl-words-head small { color: var(--slate); font-weight: 400; }
.wcl-words ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wcl-word { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 0.85rem var(--text); cursor: pointer; }
.wcl-word small { color: var(--slate-2); }
.wcl-word:hover { border-color: var(--line-strong); text-decoration: line-through; }
.wcl-word.is-off { color: var(--slate-2); text-decoration: line-through; background: var(--mist); }
.wcl-word.is-off:hover { text-decoration: none; }
.wcl-side input[type="color"] { width: 72px; height: 40px; padding: 3px; }