.translit-shell{gap:1.25rem;margin-top:2rem;display:grid}.translit-card{background:#fff;border:0.0625rem solid #f1f5f9;border-radius:1.5rem;padding:1rem}.translit-tabs{background:#f1f5f9;border-radius:1.125rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem;padding:.375rem;display:grid}.translit-tab{color:#475569;background:0 0;border-radius:0.875rem;min-height:2.75rem;padding:.7rem .75rem;font-size:.875rem;font-weight:700;transition:color .16s,background-color .16s,box-shadow .16s}.translit-tab:hover{color:#0f766e}.translit-tab[aria-selected=true]{color:#0f766e;background:#fff;box-shadow:0 0.25rem 0.875rem #0f172a14}.translit-tab:focus-visible,.translit-button:focus-visible,.translit-key:focus-visible,.translit-keyboard-panel summary:focus-visible{outline-offset:0.125rem;outline:0.1875rem solid #14b8a647}.translit-workspace{gap:1rem;margin-top:1rem;display:grid}.translit-editor{color:#334155;gap:.5rem;min-width:0;font-size:.875rem;font-weight:700;display:grid}.translit-editor__heading,.translit-section-heading{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.translit-counter{color:#64748b;font-size:.75rem;font-weight:600}.translit-textarea{resize:vertical;min-height:15rem;font-size:1rem;font-weight:500;line-height:1.65}.translit-actions{flex-wrap:wrap;align-items:center;gap:.625rem;margin-top:1rem;display:flex}.translit-button{border-radius:624.9375rem;min-height:2.625rem;padding:.65rem 1.1rem;font-size:.875rem;font-weight:700;transition:color .16s,background-color .16s,opacity .16s,transform .16s}.translit-button:hover:not(:disabled){transform:translateY(-0.0625rem)}.translit-button:disabled{opacity:.45}.translit-button--primary{color:#fff;background:#0d9488;box-shadow:0 0.625rem 1.125rem -0.625rem #0d9488a6}.translit-button--primary:hover:not(:disabled){background:#0f766e}.translit-button--secondary{color:#fff;background:#0f172a}.translit-button--ghost{color:#475569;background:#f1f5f9}.translit-status{color:#0f766e;min-height:1.25rem;margin:0 0 0 auto;font-size:.875rem;font-weight:700}.translit-keyboard-panel{border-top:0.0625rem solid #e2e8f0;margin-top:1rem;padding-top:1rem}.translit-keyboard-panel summary{cursor:pointer;color:#0f766e;width:fit-content;font-size:.875rem;font-weight:700}.translit-keyboard{grid-template-columns:repeat(auto-fit,minmax(2.375rem,1fr));gap:.375rem;margin-top:.875rem;display:grid}.translit-key{color:#0f766e;background:#f0fdfa;border:0.0625rem solid #ccfbf1;border-radius:0.625rem;min-height:2.5rem;font-weight:700}.translit-section-heading{align-items:flex-start;margin-bottom:1.25rem}.translit-section-heading h2{color:#0f172a;margin:.25rem 0 0;font-size:1.5rem;line-height:2rem}.translit-eyebrow{color:#0d9488;letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:.75rem;font-weight:700}.translit-mode-description{color:#64748b;max-width:34rem;margin:0;font-size:.875rem;line-height:1.5rem}.translit-setting{color:#334155;grid-template-columns:minmax(2.75rem,auto) 1fr;align-items:center;gap:.625rem;min-width:0;font-size:.875rem;font-weight:700;display:grid}.translit-setting .field{min-width:0;padding:.7rem .75rem;font-weight:600}.translit-setting--preset{grid-template-columns:1fr;margin-bottom:1rem}.translit-settings-grid{gap:.75rem;display:grid}.translit-note{color:#64748b;background:#f8fafc;border-radius:1rem;margin:1rem 0 0;padding:.875rem 1rem;font-size:.875rem;line-height:1.5rem}.translit-note--strong{color:#475569;background:#f0fdfab3;border:0.0625rem solid #ccfbf1;margin-top:0}.translit-alphabet{grid-template-columns:repeat(auto-fit,minmax(5.375rem,1fr));gap:.5rem;margin-top:1rem;display:grid}.translit-alphabet span{color:#334155;text-align:center;background:#f8fafc;border-radius:0.75rem;padding:.7rem;font-size:.8rem;font-weight:700}@media (width<=47.9375rem){.translit-section-heading{flex-direction:column;gap:.5rem}.translit-status{width:100%;margin-left:0}}@media (width>=40rem){.translit-card{padding:1.5rem}.translit-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.translit-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.translit-setting--preset{grid-template-columns:minmax(10rem,.45fr) minmax(0,1fr)}}@media (width>=64rem){.translit-workspace{grid-template-columns:repeat(2,minmax(0,1fr))}.translit-textarea{min-height:18.75rem}.translit-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}