* { box-sizing: border-box; margin: 0; }
body {
  background: #0d1117; color: #c9d1d9;
  font: 15px/1.5 ui-monospace, "Cascadia Mono", "JetBrains Mono", monospace;
  max-width: 900px; margin: 0 auto; padding: 1.5rem;
}
header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
h1 { font-size: 1.2rem; color: #e6edf3; }
.tag { color: #8b949e; font-size: .85rem; }
textarea {
  width: 100%; min-height: 55vh; resize: vertical;
  background: #161b22; color: inherit; font: inherit;
  border: 1px solid #30363d; border-radius: 6px; padding: .75rem;
}
textarea:focus { outline: none; border-color: #58a6ff; }
.controls { display: flex; gap: 1rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
select, button, .btn {
  background: #21262d; color: #c9d1d9; border: 1px solid #30363d;
  border-radius: 6px; padding: .4rem .9rem; font: inherit;
  cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { border-color: #8b949e; }
button:disabled { opacity: .5; cursor: wait; }
label { display: flex; gap: .4rem; align-items: center; color: #8b949e; }
#result { display: flex; gap: .5rem; margin-top: 1rem; }
#link { flex: 1; background: #161b22; border: 1px solid #238636;
  border-radius: 6px; padding: .4rem .6rem; color: #7ee787; font: inherit; }
pre {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  padding: .75rem; overflow-x: auto; white-space: pre-wrap;
  overflow-wrap: anywhere; min-height: 30vh;
}
.warn { background: #3d1e00; border: 1px solid #9e6a03; color: #e3b341;
  border-radius: 6px; padding: .6rem .8rem; margin-bottom: .75rem; }
#status { margin-top: 1rem; color: #8b949e; }
#status.error { color: #f85149; }