:root{font-family:monospace}body{margin:0;background:#fff;transition:background-color .2s ease-out}body:has(.app-container.hint-selection-mode){background:#aaa}body:has(.app-container.hint-selection-mode) .body-text{-webkit-user-select:none;user-select:none}#app{max-width:1280px;margin:0 auto;padding:8px;font-size:32px;text-align:center}.header{position:sticky;top:0;padding:1.5rem;background:#fff;border-bottom:3px solid #ccc}.header button{width:2em;height:2em;background-color:#fff;border:none;border-radius:6px;font-size:32px;text-align:center}.header button:hover{background-color:#ddd}#anagram-input{margin-left:.5em;margin-right:.5em;font-family:monospace;font-size:48px;text-align:center;text-transform:uppercase}#anagram-input::placeholder{text-transform:none}#anagram-input:invalid{background:#f003}#feedback{margin-top:.75em;margin-bottom:0;font-size:28px}#feedback[data-feedback-type=good]{color:#007d00}#feedback[data-feedback-type=neutral]{color:#777}#feedback[data-feedback-type=bad]{color:#7d0000}.body-text{text-align:left;font-family:monospace;color:#777;font-style:italic;max-width:90ch;margin:0 auto}.body-text span{transition:color .3s ease-out}.body-text span.text-hidden[data-placeholder]:after{content:attr(data-placeholder)}.body-text span.text-hidden[data-solved-before][data-solved-after]:after{content:attr(data-original)}.body-text span[data-alphagram]{padding-inline-start:4px;padding-inline-end:4px;margin-inline-start:-4px;margin-inline-end:-4px;border-radius:6px;color:#000;font-style:normal;transition:background-color .2s ease-out}.body-text span[data-alphagram].text-solved{color:#007d00}.body-text span[data-alphagram].anagram-candidate{background-color:#c2ebff}.body-text span[data-alphagram].anagram-candidate.text-solved{background-color:#e0f5ff}.hint-selection-mode :is(.body-text span[data-alphagram].text-scrambled)[data-can-hint]{background-color:#eee}.body-text span[data-alphagram].text-scrambled:has(>span[data-hint-index]){cursor:pointer}.body-text span[data-alphagram].text-scrambled>span[data-hint-index="1"]{color:red}.body-text span[data-alphagram].text-scrambled>span[data-hint-index="2"]{color:orange}.body-text span[data-alphagram].text-scrambled>span[data-hint-index="3"]{color:#dacc04}.body-text span[data-alphagram].text-scrambled>span[data-hint-index="97"]{color:#00bc00}.body-text span[data-alphagram].text-scrambled>span[data-hint-index="98"]{color:#00f}.body-text span[data-alphagram].text-scrambled>span[data-hint-index="99"]{color:purple}#settings-dialog label{display:block}
