/* Shared, deliberately plain chrome for the standalone tools. */
* { box-sizing: border-box; }
body { margin: 10px; color: #111; background: #fff; font: 13px/1.35 system-ui, sans-serif; }
.tool-nav { display: flex; gap: 12px; margin-bottom: 12px; font: 11px/1.35 system-ui, sans-serif; }
.tool-nav a, .plain-tool a { color: #555; }
.plain-tool h1 { margin: 0 0 8px; font-size: 18px; }
.plain-tool h2 { margin: 0 0 8px; font-size: 14px; }
.plain-tool p { margin: 0 0 12px; }
.plain-tool .muted { color: #555; }
.plain-tool button, .plain-tool input, .plain-tool textarea {
  padding: 2px 6px; border: 1px solid #999; border-radius: 3px;
  color: #111; background: #fff; font: inherit;
}
.plain-tool button, .plain-tool input { min-height: 26px; }
.plain-tool button { cursor: pointer; }
.plain-tool button:disabled { opacity: .45; cursor: default; }
.plain-tool textarea { width: 100%; padding: 6px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.plain-tool label { display: block; margin-bottom: 3px; font-size: 11px; color: #555; }
.plain-tool :focus-visible { outline: 2px solid #555; outline-offset: 2px; }
.plain-tool .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[hidden] { display: none !important; }