  <style>    ol {      counter-reset: item;      list-style: none;      padding-left: 0;      margin-left: 1.5em;    }    ol > li {      counter-increment: item;      display: flex;      align-items: baseline;      margin-bottom: 0.2em;      font-size: 1rem;      line-height: 1.4;    }    ol > li::before {      content: counter(item) ".";      min-width: 2em;      padding-right: 0.5em;      text-align: right;      font-size: 1rem;      font-family: inherit;      line-height: 1.4;    }    body {      background-color: #f9fafb;      padding: 1rem;      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;      margin: 0;    }    @media (min-width: 768px) {      body { padding: 1.5rem; }    }    .main-container {      max-width: 56rem;      margin-left: auto;      margin-right: auto;    }    .main-title {      font-size: 1.25rem;      font-weight: 800;      color: #1f2937;      text-align: center;      margin-bottom: 0.5rem;    }    .main-subtitle {      font-size: 0.875rem;      font-weight: 500;      color: #4b5563;      text-align: center;      margin-bottom: 1.5rem;    }    .toolbar {      display: flex;      flex-wrap: wrap;      gap: 0.6rem;      padding: 1rem;      background-color: #b5eab3;      border: 1px solid #e5e7eb;      border-radius: 1.0rem 4rem 0 0;      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);    }    .color-swatch {      width: 40px;      height: 35px;      padding: 2px;      border: none;      cursor: pointer;      vertical-align: middle;      border-radius: 5px;      transition: box-shadow 0.3s ease-in-out;      box-shadow: 0 1px 3px rgba(0,0,0,0.2);    }    .toolbar button,    .toolbar select {      width: auto;      height: 35px;      padding: 0.30rem 0.65rem;      border-radius: 0.5rem;      border: 1px solid transparent;      transition: background-color 0.15s ease-in-out;      cursor: pointer;      font-size: 0.8rem;    }    .toolbar button:not(#btnSaveTxt):not(#btnSaveHtml):not(#btnSavePdf) {      background-color: #f3f4f6;    }    .toolbar button:not(#btnSaveTxt):not(#btnSaveHtml):not(#btnSavePdf):hover {      background-color: #e5e7eb;    }    #btnSaveTxt, #btnSaveHtml {      background-color: #3b82f6;      color: white;      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);    }    #btnSaveTxt:hover, #btnSaveHtml:hover { background-color: #2563eb; }    #btnSavePdf {      background-color: #10b981;      color: white;      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);    }    #btnSavePdf:hover { background-color: #059669; }    .toolbar select {      padding: 0.25rem;      border: 1px solid #d1d5db;    }    #editor {      min-height: 400px;      padding: 20px;      border: 1px solid #ddd;      border-top: none;      border-radius: 0 0 0.5rem 0.5rem;      margin-top: 0;      background-color: white;      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);      font-family: Arial, sans-serif;      line-height: 1.6;      outline: none;      cursor: text;    }    .txt-btn {      background: none;      border: none;      cursor: pointer;      padding: 0;    }    .txt-btn svg {      transition: transform 0.2s ease, opacity 0.2s ease;    }    .txt-btn:hover svg {      transform: scale(1.1);      opacity: 0.9;    }    ol, ul {      margin-left: 1.5em !important;      padding-left: 0.5em !important;    }    li {      margin-left: 0 !important;      padding-left: 0 !important;      text-align: left;    }    body {      -webkit-user-select: none;      -moz-user-select: none;      -ms-user-select: none;      user-select: none;    }    img {      pointer-events: none;      -webkit-user-drag: none;    }  </style>