#demoArea{border:1px solid #cfd6c9;border-radius:5px;background:#fff;overflow:hidden;color:#202220}
#demoArea [hidden]{display:none!important}
.demo-editors{display:grid;grid-template-columns:1fr 1fr}
.editor-pane{min-width:0;padding:22px 26px}
.result-pane{border-left:1px solid #e1e5dc;background:#fbfcf8}
.pane-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;margin-bottom:15px}
.pane-heading>span:last-child:not(:first-child){font-size:10px;letter-spacing:.5px;color:#70786b;font-weight:400}
#demoArea textarea{display:block;box-sizing:border-box;width:100%;min-height:170px;padding:4px 0;border:0;background:transparent;font:inherit;font-size:21px;line-height:1.9;resize:vertical;color:inherit;border-radius:0}
#output{min-height:170px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:21px;line-height:2.2;padding:4px 0}
#output:empty::before{content:"Your converted text will appear here.";color:#777f71;font-size:16px}
#output rt{font-size:.55em}
.demo-toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:18px 26px;border-top:1px solid #e1e5dc;flex-wrap:wrap}
.demo-options{display:flex;flex-wrap:wrap;gap:16px}
.demo-options label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.demo-options select{font:inherit;font-size:14px;min-height:42px;padding:7px 30px 7px 10px;border:1px solid #cfd6c9;border-radius:3px;background:#fff;color:#202220}
.demo-actions{display:flex;gap:10px;flex-wrap:wrap}
#demoArea button{font:inherit;font-size:14px;font-weight:600;min-height:42px;padding:9px 17px;border:1px solid #202220;border-radius:3px;cursor:pointer;background:#202220;color:white}
#demoArea button:disabled{background:#f0f2ec;color:#747b6e;border-color:#dce0d7;cursor:not-allowed}
#demoArea button:not(:disabled):hover{background:#38604b;border-color:#38604b}
#demoArea #cancelBtn{background:white;color:#202220}
#demoStatus{margin:0;padding:12px 26px;font-size:13px;background:#f6f8f2;color:#53604e;border-top:1px solid #e1e5dc}
#demoArea :focus-visible{outline:3px solid #477357;outline-offset:3px}
#demoArea noscript{display:block;padding:15px}
@media (max-width: 720px) {
  .demo-options { width: 100%; }
  .demo-options > div { flex: 1 1 120px; min-width: 0; }
  .demo-options select { width: 100%; min-height: 44px; font-size: 16px; }
  .demo-actions { width: 100%; }
  #demoArea button { flex: 1 1 auto; min-height: 44px; }
}
@media(max-width:720px){.demo-editors{grid-template-columns:1fr}.result-pane{border-left:0;border-top:1px solid #e1e5dc}.editor-pane{padding:18px}#demoArea textarea,#output{font-size:19px;min-height:140px}.demo-toolbar{padding:18px}.demo-options{gap:12px}#demoStatus{padding:12px 18px}.pane-heading{flex-wrap:wrap}}