/* Adobe NotDef contains only the .notdef glyph. With unicode-range covering
   all of Unicode, the browser routes any code point not handled by an earlier
   @font-face to this font and renders tofu — so unsupported glyphs stay
   visible instead of being silently filled in by a system font. */
@font-face {
  font-family: "ForceTofu";
  src: url("https://cdn.jsdelivr.net/gh/adobe-fonts/adobe-notdef/AND-Regular.otf") format("opentype");
  unicode-range: U+0-10FFFF;
  font-display: block;
}

:root { color-scheme: light; }
* { box-sizing: border-box; }

body {
  font-family: 'Roboto', 'Noto Sans Math', 'Noto Sans Symbols', 'Noto Sans Symbols 2',
    'Noto Sans Armenian', 'Noto Sans Georgian', 'Noto Sans Thai',
    'Noto Sans Canadian Aboriginal', 'Noto Sans Vai', 'Noto Sans Tai Viet',
    'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu',
    'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Gujarati', 'Noto Sans Oriya',
    'Noto Sans Gurmukhi', 'Noto Sans Sinhala', 'Noto Sans Ethiopic', 'Noto Naskh Arabic',
    'Noto Nastaliq Urdu', 'Noto Sans SC', 'Noto Sans JP', 'Noto Color Emoji', 'ForceTofu';
  margin: 0;
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.app { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
h2 { margin: 0 0 4px; font-weight: 500; }

textarea {
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd; border-radius: 12px;
  font-size: 22px; line-height: 1.4;
  resize: vertical; min-height: 220px;
  background: #fff;
  font-family: inherit;
}

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .controls { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 4px; }
label { font-size: 12px; color: #555; font-weight: 500; }

select, input[type="text"] {
  padding: 10px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}

input[type="color"] { padding: 2px; height: 38px; width: 44px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }

.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type="text"] { flex: 1; }

button.toggle {
  width: 44px; height: 38px;
  padding: 0;
  background: #fff; color: #333;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
button.toggle.italic { font-weight: 400; font-style: italic; font-family: serif; }
button.toggle:hover { background: #f0f0f0; }
button.toggle[aria-pressed="true"] { background: #2e7d32; color: white; border-color: #2e7d32; }
button.toggle[aria-pressed="true"]:hover { background: #1b5e20; }

button {
  padding: 14px 16px;
  background: #2e7d32; color: white;
  border: none; border-radius: 8px;
  font-size: 16px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
button:hover { background: #1b5e20; }
button:disabled { background: #888; cursor: not-allowed; }

.error { color: #c62828; font-size: 12px; min-height: 14px; }
.hint { color: #777; font-size: 12px; }

.preview { display: flex; flex-direction: column; gap: 6px; }
.preview-frame {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 8px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, 10px 0px;
  overflow: hidden;
}
.preview-frame canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.preview-meta { font-size: 12px; color: #777; display: flex; justify-content: space-between; }