:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #10131a;
  color: #eef3fb;
  line-height: 1.5;
}
header { padding: 18px 24px 8px; text-align: center; }
h1 { margin: 0; font-size: 30px; letter-spacing: 0; }
main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 24px 28px;
  display: grid;
  gap: 16px;
}
.card {
  background: #171c27;
  border: 1px solid #2b3344;
  border-radius: 8px;
  padding: 16px;
}
.composer-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 96px);
}
.beepbox {
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 620px;
  border: 1px solid #2b3344;
  border-radius: 8px;
  background: #000;
}
input {
  width: 100%;
  background: #0d1118;
  color: #eef3fb;
  border: 1px solid #30394c;
  border-radius: 8px;
  padding: 10px 12px;
  font: 14px ui-monospace, Consolas, monospace;
}
.export-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
button {
  background: #3b6df0;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { background: #4f7df4; }
button:disabled { opacity: 0.6; cursor: default; }
.ghost {
  background: transparent;
  border: 1px solid #3c4658;
  color: #c5d2e7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.ghost:hover { border-color: #5b6984; }
.result {
  padding: 13px 14px;
  background: #0e1a12;
  border: 1px solid #245133;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.result span { color: #9fb0c8; }
.result code {
  font-size: 28px;
  font-weight: 750;
  color: #6ee7a0;
  letter-spacing: 0;
}
.error { color: #ff8585; min-height: 18px; margin: 10px 0 0; font-size: 14px; }
.out {
  background: #0d1118;
  border: 1px solid #30394c;
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  font: 13px ui-monospace, Consolas, monospace;
  color: #dbe8ff;
}
.hidden { display: none; }
code { background: #0d1118; padding: 1px 5px; border-radius: 4px; }

@media (max-width: 720px) {
  main { padding: 12px; }
  header { padding: 18px 12px 4px; }
  .composer-card { min-height: calc(100vh - 76px); }
  .beepbox { min-height: 430px; }
  .export-bar { align-items: stretch; flex-direction: column; }
  button { width: 100%; }
  .result { display: flex; }
}