/* GENERATED by scripts/site/build.mjs (scripts/site/tools.mjs) - the free tool pages' own rules, on top of /legal/legal.css and /site/site.css. */
.tools .lede { margin-bottom: 16px; }
.tool { display: grid; grid-template-columns: minmax(0, 1fr) 240px; margin: 0 0 40px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); overflow: hidden; }
.tool.over { box-shadow: inset 0 0 0 2px var(--brand); }
.tool .stage { display: flex; flex-direction: column; min-width: 0; background: var(--paper-2); }
/* the picture's box has a fixed height, so neither the still arriving nor the live canvas replacing it moves anything */
.tool .view { position: relative; box-sizing: border-box; height: 480px; padding: 16px; flex: 1 0 auto;
  background-color: var(--paper-2);
  background-image: linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%), linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.tool .view img, .tool .view canvas { position: absolute; inset: 16px; display: block; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)); }
.tool .drop { margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11px; line-height: 16px; }
.tool .panel { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--paper); }
.tool .panel-h { display: flex; align-items: center; height: 40px; margin: 0; padding: 0 16px; font-size: 11px; line-height: 16px; font-weight: 550; }
.tool .props { padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.tool .row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; font-size: 11px; line-height: 16px; }
.tool .row > label, .tool .row .lbl { color: var(--ink-3); }
.tool .row.check { grid-template-columns: 16px minmax(0, 1fr); }
.tool .row.check label { color: var(--ink); }
.tool .row.tall { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 4px; padding-bottom: 4px; }
.tool .row output { min-width: 28px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.tool .row:has(select), .tool .row:has(input[type='color']), .tool .row:has(input[type='text']), .tool .row:has(.pick) { grid-template-columns: 88px minmax(0, 1fr); }
.tool select, .tool input[type='text'], .tool textarea { width: 100%; min-width: 0; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: 5px; background: var(--paper-2); color: var(--ink); font: 450 11px/16px var(--ui-face, Inter), system-ui, sans-serif; }
.tool textarea { height: auto; min-height: 40px; padding: 4px 6px; resize: vertical; }
.tool select:hover, .tool input[type='text']:hover, .tool textarea:hover { border-color: var(--line); }
.tool select:focus-visible, .tool input:focus-visible, .tool textarea:focus-visible, .tool button:focus-visible, .tool .btn:focus-visible, .tool .pick:focus-within { outline: 2px solid var(--brand-ring); outline-offset: -1px; }
.tool input[type='range'] { width: 100%; min-width: 0; height: 24px; margin: 0; accent-color: var(--brand); }
.tool input[type='checkbox'] { width: 12px; height: 12px; margin: 0; accent-color: var(--brand); }
.tool input[type='color'] { width: 100%; height: 24px; padding: 2px; border: 1px solid transparent; border-radius: 5px; background: var(--paper-2); }
.tool .pick { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--paper-2); color: var(--ink); font-size: 11px; line-height: 16px; font-weight: 550; cursor: pointer; }
.tool .drop .pick { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.tool .pick:hover { background: var(--brand-tint); color: var(--brand-ink); }
.tool .pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.tool .link { justify-self: start; height: 24px; padding: 0; border: 0; background: none; color: var(--brand-ink); font: 550 11px/16px var(--ui-face, Inter), system-ui, sans-serif; cursor: pointer; }
.tool .acts { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.tool .acts .btn { justify-content: center; border: 0; font-family: inherit; cursor: pointer; }
.tool .acts .btn[disabled] { background: #d9d9d9; color: #ffffff; cursor: default; }
.tool .acts .btn.quiet[disabled] { background: transparent; color: var(--ink-3); }
.tool .note { margin: 0; color: var(--ink-3); font-size: 11px; line-height: 16px; }
.tool .status { min-height: 16px; margin: 0; color: var(--ink); font-size: 11px; line-height: 16px; }
.tool kbd { display: inline-block; min-width: 16px; padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); font: 450 11px/16px var(--ui-face, Inter), system-ui, sans-serif; text-align: center; }
:root[data-theme='dark'] .tool .view { background-image: linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%), linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%); }
:root[data-theme='dark'] .tool .acts .btn[disabled] { background: var(--paper-2); color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tool .view { background-image: linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%), linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%); }
  :root:not([data-theme]) .tool .acts .btn[disabled] { background: var(--paper-2); color: var(--ink-3); }
}
.tools .steps li h3 { margin: 0 0 2px; }
.tools .previews li > span, .tools .previews a > span { font-weight: 450; color: var(--ink-3); }
.tools .previews img { aspect-ratio: 4 / 5; }
.tools .links { margin: 12px 0 0; }
@media (max-width: 720px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool .panel { border-left: 0; border-top: 1px solid var(--line); }
  .tool .view { height: 360px; padding: 12px; flex: none; }
  .tool .view img, .tool .view canvas { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
  .tool .stage { min-height: 0; }
  .tool .row { min-height: 40px; }
  .tool .acts .btn.big { height: 40px; }
}