:root{--input-border: #767676;--input-border-radius: 4px}*{box-sizing:border-box}html{height:100%}body{display:flex;flex-direction:column;padding:20px;margin:0;font-family:sans-serif;font-size:14px;height:auto}h1{margin:0;word-wrap:break-word}h2{margin:0 0 20px 0}.content-grid{box-sizing:border-box;display:grid;gap:20px;grid-template:repeat(3, min-content)/60% auto;grid-template-areas:"header header" "input-label output-label" "input-textarea output-list" "settings settings";height:100%;margin:0 auto;max-width:1500px;width:100%}@media(max-width: 650px){.content-grid{grid-template:repeat(3, min-content)/repeat(2, 1fr);grid-template-areas:"header header" "input-label output-label" "input-textarea output-list" "settings settings"}}@media(max-width: 350px){.content-grid{grid-template:repeat(6, min-content)/1fr;grid-template-areas:"header" "input-label" "input-textarea" "output-label" "output-list" "settings"}}.content-grid .header{font-weight:700;grid-area:header}.content-grid .input-label{font-weight:700;grid-area:input-label}.content-grid .input-textarea{display:flex;grid-area:input-textarea}.content-grid .input-textarea #textarea-input{background-color:#fff;border:1px solid var(--input-border);border-radius:var(--input-border-radius);color:#000;display:block;font-family:monospace;height:fit-content;overflow:hidden;padding:12px;resize:vertical;width:100%;word-break:break-all}.content-grid .input-textarea #textarea-input *{background-color:rgba(0,0,0,0) !important;color:#000 !important;font-family:monospace !important}.content-grid .output-label{font-weight:700;grid-area:output-label}.content-grid .output-label .details{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.content-grid .output-list{background-color:#f2f2f2;border:1px solid var(--input-border);border-radius:var(--input-border-radius);height:fit-content;grid-area:output-list;min-height:42px}.content-grid .output-list #output-list{counter-reset:elementcounter;font-family:monospace;list-style-type:none;margin:0;padding:10px}.content-grid .output-list #output-list li:not(.no-text-found)::before{content:"Paragraph " counter(elementcounter) ": ";counter-increment:elementcounter;font-weight:bold}.content-grid .output-list #output-list .emoji{font-size:.75rem}.content-grid .settings{grid-area:settings}.content-grid .settings .input-group{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.content-grid .settings .input-group label{display:block;font-weight:700}.content-grid .settings .input-group input{border:1px solid var(--input-border);border-radius:var(--input-border-radius);font-family:monospace;width:10ch}
