:root {
  font-family: system-ui, sans-serif;
  color: #222;
  background: #fff;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
}
main {
  max-width: 1500px;
  margin: 48px auto;
  padding: 0 24px;
}
label {
  display: block;
  font-size: 14px;
  margin: 18px 0 6px;
}
input,
textarea,
button {
  font: inherit;
}
.start-row {
  display: flex;
  gap: 10px;
  max-width: 480px;
}
input {
  width: 100%;
  min-width: 0;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 10px;
}
button {
  padding: 9px 16px;
  border: 1px solid #999;
  border-radius: 3px;
  background: #f5f5f5;
  color: #222;
  cursor: pointer;
}
button:hover {
  background: #e8e8e8;
}
input:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid #3566b8;
  outline-offset: 2px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
}
#id-label {
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
}
#status {
  font-size: 13px;
  color: #555;
}
#status.warn {
  color: #9b4b00;
}
.workspace {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(640px, 1.5fr);
  gap: 24px;
}
textarea {
  display: block;
  width: 100%;
  height: 410px;
  min-height: 180px;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 14px;
  font:
    15px/1.6 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  tab-size: 4;
  resize: vertical;
}
textarea[readonly] {
  background: #fafafa;
}
aside {
  min-width: 0;
  font:
    12px/1.6 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.timing-note { color: #555; margin-bottom: 8px; }
.table-scroll { max-height: 320px; overflow: auto; border: 1px solid #ddd; margin-bottom: 16px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; white-space: nowrap; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 8px; font-weight: 600; }
th, td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #eee; }
th { position: sticky; top: 0; background: #f5f5f5; font-weight: 500; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
#message {
  font-size: 13px;
  color: #9b3e00;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (max-width: 1050px) {
  main {
    margin: 24px auto;
    padding: 0 16px;
  }
  .workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  textarea {
    height: 280px;
  }
}