:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: oklch(0.20 0 0);
  background: oklch(1 0 0);
  --muted: oklch(0.46 0 0);
  --line: oklch(0.88 0 0);
  --surface: oklch(0.975 0 0);
  --accent: oklch(0.52 0.19 355);
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.6; }
header, main { width: min(512px, 100% - 40px); margin: auto; }
header { height: 80px; display: flex; align-items: center; }
h1 { margin: 0; font-size: 14px; font-weight: 500; }
main { padding: 32px 0 48px; }
label { display: block; margin-bottom: 7px; font-size: 12px; color: var(--muted); }
input, select, button, textarea { font: inherit; }
input, select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px 12px; margin-top: 20px; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.6; }
.primary { min-height: 42px; padding: 8px 10px; border: 0; border-radius: 7px; background: var(--accent); color: oklch(1 0 0); font-size: 12px; }
.primary:hover:not(:disabled) { background: oklch(0.46 0.17 355); }
.hint, .preview-caption, footer { font-size: 12px; color: var(--muted); }
.hint { margin: 8px 0 0; }
.status { min-height: 20px; margin: 10px 0 20px; }
.status.error { color: oklch(0.46 0.17 25); }
.preview-heading, .embed-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
h2 { margin: 0; font-size: 12px; font-weight: 500; }
.plain { padding: 5px 0; background: none; border: 0; color: var(--muted); font-size: 12px; }
.plain:hover:not(:disabled) { color: var(--accent); }
.canvas { display: flex; align-items: center; justify-content: center; }
.canvas.dark { background: oklch(0.14 0 0); }
.canvas img { display: block; max-width: 100%; height: auto; }
.canvas img[hidden], [hidden] { display: none; }
.canvas[aria-busy="true"] img { opacity: 0.45; }
.canvas p { margin: 24px 0; color: var(--muted); font-size: 12px; }
.canvas.dark p { color: oklch(0.8 0 0); }
.preview-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.embed-heading { margin-top: 28px; }
textarea { display: block; resize: vertical; width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: inherit; font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
footer { margin-top: 48px; }
@media (max-width: 380px) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}