#tool [hidden] { display: none !important; }
.b64-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 0; }
.b64-mode label { min-width: 88px; justify-content: center; font-weight: 500; }
.b64-file { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--blue-tint); max-width: 100%; overflow: hidden; }
.b64-file [data-file-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b64-binary { border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--canvas); padding: 12px; min-height: 320px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.b64-binary-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.b64-binary img { max-width: 100%; max-height: 180px; object-fit: contain; align-self: flex-start; border: 1px solid var(--border); border-radius: 8px; background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.b64-hex { margin: 0; font: 12px/1.5 var(--mono); overflow-x: auto; white-space: pre; background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; max-width: 100%; }
.b64-hint { margin: 0 16px 12px; }
@media (max-width: 768px) {
  .b64-bar { padding: 12px 12px 0; }
  .b64-mode { display: flex; width: 100%; }
  .b64-mode label { flex: 1; min-height: 44px; }
}
.example pre { overflow-wrap: anywhere; }
.example .ex-cols > div { min-width: 0; }
.options details.opt-more { width: 100%; }
@media (max-width: 900px) {
  .b64-bar { order: 0; }
  #tool > [data-hint], #tool > [data-query] { order: 4; }
}