/* Letter studio: cursive, graffiti and bubble letter generators (one script, three pages). */
@font-face {
  font-family: "Playwrite US Trad";
  src: url("../fonts/playwrite-us-trad/PlaywriteUSTrad-wght.ttf") format("truetype");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sedgwick Ave Display";
  src: url("../fonts/sedgwick-ave-display/SedgwickAveDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.letter-tool .tool-form input.ls-text { text-transform: none; max-width: none; width: 100%; }
.letter-tool .tool-form label.ls-wide { display: grid; gap: 6px; justify-content: stretch; }
.letter-tool[data-style="cursive"] .tool-form input.ls-text { font-family: "Playwrite US Trad", cursive; font-size: 15px; }
.letter-tool[data-style="graffiti"] .tool-form input.ls-text { font-family: "Sedgwick Ave Display", var(--sans); font-size: 18px; }
.letter-tool .ls-hint { margin: 0; font-size: 13px; color: var(--muted); }
.letter-tool .ls-hint:empty { display: none; }
.letter-tool fieldset[hidden] { display: none; }
.letter-tool .tool-form .button { width: 100%; justify-content: center; }
.letter-tool .tool-preview { min-width: 0; }
.ls-measure { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.letter-tool .ls-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.letter-tool .ls-presets-lead { font-size: 13px; color: var(--ink-2); }
.letter-tool .ls-preset { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; line-height: 1.2; text-align: left; max-width: 100%; }
.letter-tool .ls-preset:hover { background: var(--ink); color: var(--paper); }