/* no framework, sorry. it works on my machine */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #fff6d6; color: #111; font: 15px/1.4 "Courier New", Courier, monospace; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; padding: 12px 20px; background: #ff5c8a; border-bottom: 4px solid #111; }
.logo { font: 900 30px Arial, Helvetica, sans-serif; letter-spacing: -2px; }
.logo em { font-style: normal; background: #111; color: #ffe94a; padding: 0 5px; }
.tag { transform: rotate(-1.5deg); background: #ffe94a; border: 2px solid #111; padding: 0 6px; }
.columns { display: flex; align-items: flex-start; gap: 18px; padding: 18px 20px; }
aside { flex: 0 0 240px; background: #fff; border: 3px solid #111; box-shadow: 6px 6px 0 #111; padding: 9px; transform: rotate(-.4deg); }
main { flex: 1; min-width: 0; }
.side-head { display: flex; justify-content: space-between; font-weight: bold; border-bottom: 2px dashed #111; padding-bottom: 5px; }
.side-head button { padding: 0 6px; font: inherit; background: #fff; border: 2px solid #111; cursor: pointer; }
ol { list-style: none; margin: 7px 0 0; padding: 0; }
ol button { display: block; width: 100%; margin-bottom: 4px; padding: 3px 4px; overflow: hidden; border: 0; background: #e8fff0; font: 12px "Courier New", monospace; text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
ol button:hover { background: #ffe94a; }
.line { display: flex; gap: 7px; }
select, input, textarea { width: 100%; padding: 7px; border: 3px solid #111; background: #fff; font: inherit; }
select { flex: 0 0 96px; width: 96px; font-weight: bold; background: #7fe3ff; }
#send { flex: 0 0 auto; padding: 0 17px; border: 3px solid #111; background: #22d36b; font: 900 16px Arial, sans-serif; box-shadow: 4px 4px 0 #111; cursor: pointer; }
#send:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111; }
#send:disabled { background: #ccc; }
.pair { display: flex; gap: 11px; margin-top: 12px; }
.pair label { flex: 1; min-width: 0; font-weight: bold; }
.pair small { font-weight: normal; }
textarea { display: block; margin-top: 3px; resize: vertical; font-size: 13px; }
section { margin-top: 16px; }
.status { display: inline-block; padding: 2px 8px; background: #111; color: #ffe94a; transform: rotate(.5deg); }
.status.ok { background: #22d36b; color: #111; }
.status.fail { background: #ff3b3b; color: #fff; }
pre { min-height: 180px; max-height: 55vh; margin: 7px 0 0; padding: 11px; overflow: auto; background: #1b1b1b; color: #9dff9d; border: 3px solid #111; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.hint { color: #555; font-size: 12px; }
footer { padding: 7px 20px 20px; font-size: 12px; }
@media (max-width: 720px) {
  .columns, .pair { flex-direction: column; }
  aside { flex: none; width: 100%; order: 2; }
  main { width: 100%; }
  .line { flex-wrap: wrap; }
  #send { flex: 1; height: 42px; }
}